From a9a263114b7f1aee704f5c637577b1d97dc54ec8 Mon Sep 17 00:00:00 2001
From: Cindy Zhang <cindyxz@meta.com>
Date: Fri, 7 Aug 2026 16:03:15 -0700
Subject: [PATCH 1/2] docs(docsite): add ComplexSelector showcase and examples

Adds the missing docsite showcase and example blocks for ComplexSelector.
The docsite builds both from CLI template blocks (blocks with isShowcase
feed showcaseRegistry, the rest feed exampleRegistry keyed on exampleFor),
so all four live under packages/cli/assets/templates/blocks/components/.

- Showcase: a project-visibility picker whose popup content is a RadioList.
- Folder Tree: a TreeList destination picker, so the hierarchy keeps its own
  tree keyboard navigation.
- Multi-select Filter: CheckboxList content that stays open across several
  toggles and closes only when the apply button calls close().
- Async Assignment: changeAction driving the optimistic value, busy spinner,
  and a settled validation status.

Also references the new block directory from the component's SYNC block,
which scripts/check-sync.js requires once a showcase dir exists.
---
 .../ComplexSelectorAsyncAssign.doc.mjs        | 14 ++++
 .../ComplexSelectorAsyncAssign.tsx            | 83 +++++++++++++++++++
 .../ComplexSelectorFolderTree.doc.mjs         | 14 ++++
 .../ComplexSelectorFolderTree.tsx             | 71 ++++++++++++++++
 .../ComplexSelectorShowcase.doc.mjs           | 15 ++++
 .../ComplexSelectorShowcase.tsx               | 62 ++++++++++++++
 .../ComplexSelectorStageFilter.doc.mjs        | 14 ++++
 .../ComplexSelectorStageFilter.tsx            | 54 ++++++++++++
 .../src/ComplexSelector/ComplexSelector.tsx   |  1 +
 9 files changed, 328 insertions(+)
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.doc.mjs
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.doc.mjs
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.tsx
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.doc.mjs
 create mode 100644 packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.tsx

diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.doc.mjs b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.doc.mjs
new file mode 100644
index 000000000000..19dc0ac61f93
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.doc.mjs
@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'Complex Selector — Async Assignment',
+  displayName: 'Complex Selector — Async Assignment',
+  description:
+    'A reviewer picker using changeAction, so the trigger shows the new value optimistically with a busy spinner while the save settles into a validation status.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ComplexSelector', 'RadioList'],
+};
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx
new file mode 100644
index 000000000000..9ad04d867c5b
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx
@@ -0,0 +1,83 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  ComplexSelector,
+  type ComplexSelectorStatus,
+} from '@astryxdesign/core/ComplexSelector';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+
+const REVIEWERS = [
+  {
+    value: 'sarah-chen',
+    label: 'Sarah Chen',
+    description: 'Design systems · 2 open reviews',
+  },
+  {
+    value: 'marcus-webb',
+    label: 'Marcus Webb',
+    description: 'Accessibility · 5 open reviews',
+  },
+  {
+    value: 'priya-raman',
+    label: 'Priya Raman',
+    description: 'Platform · 1 open review',
+  },
+];
+
+export default function ComplexSelectorAsyncAssign() {
+  const [reviewer, setReviewer] = useState('');
+  const [isSaved, setIsSaved] = useState(false);
+  const selected = REVIEWERS.find(option => option.value === reviewer);
+
+  let status: ComplexSelectorStatus | undefined;
+  if (selected == null) {
+    status = {type: 'error', message: 'Every draft needs a reviewer'};
+  } else if (isSaved) {
+    status = {type: 'success', message: `Assigned to ${selected.label}`};
+  }
+
+  return (
+    <ComplexSelector
+      label="Reviewer"
+      description="Assignments save as soon as you pick someone"
+      width={320}
+      isRequired
+      value={reviewer}
+      onChange={value => {
+        setReviewer(value);
+        setIsSaved(false);
+      }}
+      changeAction={async () => {
+        await new Promise(resolve => {
+          setTimeout(resolve, 900);
+        });
+        setIsSaved(true);
+      }}
+      placeholder="Unassigned"
+      triggerLabel={selected?.label}
+      status={status}>
+      {(value, onChange, close) => (
+        <RadioList
+          label="Reviewer"
+          isLabelHidden
+          value={value}
+          onChange={nextValue => {
+            onChange(nextValue);
+            close();
+          }}>
+          {REVIEWERS.map(option => (
+            <RadioListItem
+              key={option.value}
+              label={option.label}
+              value={option.value}
+              description={option.description}
+            />
+          ))}
+        </RadioList>
+      )}
+    </ComplexSelector>
+  );
+}
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.doc.mjs b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.doc.mjs
new file mode 100644
index 000000000000..4cd738dbc824
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.doc.mjs
@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'Complex Selector — Folder Tree',
+  displayName: 'Complex Selector — Folder Tree',
+  description:
+    'A destination picker whose popup content is a TreeList, so the hierarchy keeps its own tree keyboard navigation.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ComplexSelector', 'TreeList'],
+};
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.tsx b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.tsx
new file mode 100644
index 000000000000..d175a591e9ea
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorFolderTree.tsx
@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {TreeList} from '@astryxdesign/core/TreeList';
+
+interface Destination {
+  id: string;
+  path: string;
+}
+
+const FOLDERS = [
+  {
+    id: 'design-systems',
+    label: 'Design systems',
+    children: [
+      {id: 'components', label: 'Components'},
+      {id: 'accessibility', label: 'Accessibility'},
+      {id: 'tokens', label: 'Tokens'},
+    ],
+  },
+  {
+    id: 'research',
+    label: 'Research',
+    children: [
+      {id: 'interviews', label: 'Interviews'},
+      {id: 'field-notes', label: 'Field notes'},
+    ],
+  },
+];
+
+export default function ComplexSelectorFolderTree() {
+  const [destination, setDestination] = useState<Destination>({
+    id: 'components',
+    path: 'Design systems / Components',
+  });
+
+  return (
+    <ComplexSelector<Destination>
+      label="Move to folder"
+      description="Where this document should live"
+      width={320}
+      value={destination}
+      onChange={setDestination}
+      triggerLabel={destination.path}>
+      {(value, onChange, close) => (
+        <TreeList
+          items={FOLDERS.map(folder => ({
+            id: folder.id,
+            label: folder.label,
+            isExpanded: true,
+            children: folder.children.map(child => ({
+              id: child.id,
+              label: child.label,
+              isSelected: child.id === value.id,
+              onClick: () => {
+                onChange({
+                  id: child.id,
+                  path: `${folder.label} / ${child.label}`,
+                });
+                close();
+              },
+            })),
+          }))}
+        />
+      )}
+    </ComplexSelector>
+  );
+}
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs
new file mode 100644
index 000000000000..6a3ef301960a
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs
@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'Complex Selector',
+  displayName: 'Complex Selector',
+  description:
+    'A visibility selector whose popup content is a RadioList; picking an option commits the value and closes the popup.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  isShowcase: true,
+  componentsUsed: ['ComplexSelector', 'RadioList'],
+};
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx
new file mode 100644
index 000000000000..f35e6eca30c2
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx
@@ -0,0 +1,62 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+
+const VISIBILITY_OPTIONS = [
+  {
+    value: 'private',
+    label: 'Private',
+    description: 'Only you can open this project',
+  },
+  {
+    value: 'team',
+    label: 'Design systems team',
+    description: 'All 14 teammates can edit',
+  },
+  {
+    value: 'company',
+    label: 'Everyone at Northwind',
+    description: 'Anyone signed in can view',
+  },
+];
+
+export default function ComplexSelectorShowcase() {
+  const [visibility, setVisibility] = useState('team');
+  const selected = VISIBILITY_OPTIONS.find(
+    option => option.value === visibility,
+  );
+
+  return (
+    <ComplexSelector
+      label="Project visibility"
+      description="Who can open this project"
+      width={320}
+      value={visibility}
+      onChange={setVisibility}
+      triggerLabel={selected?.label}>
+      {(value, onChange, close) => (
+        <RadioList
+          label="Project visibility"
+          isLabelHidden
+          value={value}
+          onChange={nextValue => {
+            onChange(nextValue);
+            close();
+          }}>
+          {VISIBILITY_OPTIONS.map(option => (
+            <RadioListItem
+              key={option.value}
+              label={option.label}
+              value={option.value}
+              description={option.description}
+            />
+          ))}
+        </RadioList>
+      )}
+    </ComplexSelector>
+  );
+}
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.doc.mjs b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.doc.mjs
new file mode 100644
index 000000000000..50f49f9fff73
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.doc.mjs
@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'Complex Selector — Multi-select Filter',
+  displayName: 'Complex Selector — Multi-select Filter',
+  description:
+    'A stage filter that keeps the popup open while several checkboxes are toggled and closes only when the apply button calls close().',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ComplexSelector', 'CheckboxList', 'Button', 'VStack'],
+};
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.tsx b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.tsx
new file mode 100644
index 000000000000..9cbe55ae70d0
--- /dev/null
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorStageFilter.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Button} from '@astryxdesign/core/Button';
+import {CheckboxList, CheckboxListItem} from '@astryxdesign/core/CheckboxList';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {VStack} from '@astryxdesign/core/Layout';
+
+const STAGES = [
+  {value: 'discovery', label: 'Discovery'},
+  {value: 'in-review', label: 'In review'},
+  {value: 'approved', label: 'Approved'},
+  {value: 'shipped', label: 'Shipped'},
+];
+
+export default function ComplexSelectorStageFilter() {
+  const [stages, setStages] = useState<string[]>(['in-review', 'approved']);
+
+  return (
+    <ComplexSelector<string[]>
+      label="Pipeline stages"
+      description="Filter the roadmap by delivery stage"
+      width={320}
+      value={stages}
+      onChange={setStages}
+      placeholder="All stages"
+      triggerLabel={
+        stages.length > 0
+          ? `${stages.length} of ${STAGES.length} stages`
+          : undefined
+      }>
+      {(value, onChange, close) => (
+        <VStack gap={3}>
+          <CheckboxList
+            label="Pipeline stages"
+            isLabelHidden
+            value={value}
+            onChange={onChange}>
+            {STAGES.map(stage => (
+              <CheckboxListItem
+                key={stage.value}
+                label={stage.label}
+                value={stage.value}
+              />
+            ))}
+          </CheckboxList>
+          <Button label="Apply filters" variant="primary" onClick={close} />
+        </VStack>
+      )}
+    </ComplexSelector>
+  );
+}
diff --git a/packages/core/src/ComplexSelector/ComplexSelector.tsx b/packages/core/src/ComplexSelector/ComplexSelector.tsx
index 35da221f6326..15de3e53a3a0 100644
--- a/packages/core/src/ComplexSelector/ComplexSelector.tsx
+++ b/packages/core/src/ComplexSelector/ComplexSelector.tsx
@@ -13,6 +13,7 @@
  * - /packages/core/src/ComplexSelector/ComplexSelector.test.tsx
  * - /packages/core/src/ComplexSelector/index.ts
  * - /apps/storybook/stories/ComplexSelector.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/ComplexSelector/ (showcase blocks)
  */
 
 import React, {

From b82d884de59fbda29adbf124c17355097bbc30d8 Mon Sep 17 00:00:00 2001
From: Cindy Zhang <cindyxz@meta.com>
Date: Mon, 10 Aug 2026 09:07:12 -0700
Subject: [PATCH 2/2] docs(docsite): make the showcase a date-range picker and
 stop the arrow-key flap

The visibility picker was a RadioList in a popover, which a plain Selector
already does. Replaces it with a reporting-period picker: quick presets beside
a range Calendar, edited as a draft and committed on Apply. Two panes,
multi-step, explicit commit is the shape Selector cannot express.

Also drops close() from the reviewer example's radio onChange. RadioList
follows APG and commits on arrow navigation, so closing on change dismissed
the popup mid-traversal; focus then restored to the trigger, whose ArrowDown
reopened it, and the popup appeared to flap open/closed on every arrow key.
---
 .../ComplexSelectorAsyncAssign.tsx            |   9 +-
 .../ComplexSelectorShowcase.doc.mjs           |  13 +-
 .../ComplexSelectorShowcase.tsx               | 147 ++++++++++++------
 3 files changed, 117 insertions(+), 52 deletions(-)

diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx
index 9ad04d867c5b..67a9196148a9 100644
--- a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorAsyncAssign.tsx
@@ -40,6 +40,8 @@ export default function ComplexSelectorAsyncAssign() {
   }
 
   return (
+    // A radio group commits on arrow navigation, so closing the popup on
+    // change would dismiss it mid-traversal; the user dismisses it instead.
     <ComplexSelector
       label="Reviewer"
       description="Assignments save as soon as you pick someone"
@@ -59,15 +61,12 @@ export default function ComplexSelectorAsyncAssign() {
       placeholder="Unassigned"
       triggerLabel={selected?.label}
       status={status}>
-      {(value, onChange, close) => (
+      {(value, onChange) => (
         <RadioList
           label="Reviewer"
           isLabelHidden
           value={value}
-          onChange={nextValue => {
-            onChange(nextValue);
-            close();
-          }}>
+          onChange={onChange}>
           {REVIEWERS.map(option => (
             <RadioListItem
               key={option.value}
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs
index 6a3ef301960a..c17433436736 100644
--- a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs
@@ -7,9 +7,18 @@ export const doc = {
   name: 'Complex Selector',
   displayName: 'Complex Selector',
   description:
-    'A visibility selector whose popup content is a RadioList; picking an option commits the value and closes the popup.',
+    'A reporting-period picker: quick presets beside a range Calendar, edited as a draft and committed on Apply, in a single field.',
   isReady: true,
   aspectRatio: 4 / 3,
   isShowcase: true,
-  componentsUsed: ['ComplexSelector', 'RadioList'],
+  componentsUsed: [
+    'ComplexSelector',
+    'Calendar',
+    'List',
+    'Button',
+    'Divider',
+    'Text',
+    'HStack',
+    'VStack',
+  ],
 };
diff --git a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx
index f35e6eca30c2..54aea3d3d000 100644
--- a/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx
+++ b/packages/cli/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx
@@ -3,59 +3,116 @@
 'use client';
 
 import {useState} from 'react';
+import {Button} from '@astryxdesign/core/Button';
+import {
+  Calendar,
+  type DateRange,
+  type ISODateString,
+} from '@astryxdesign/core/Calendar';
 import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
-import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
-
-const VISIBILITY_OPTIONS = [
-  {
-    value: 'private',
-    label: 'Private',
-    description: 'Only you can open this project',
-  },
-  {
-    value: 'team',
-    label: 'Design systems team',
-    description: 'All 14 teammates can edit',
-  },
-  {
-    value: 'company',
-    label: 'Everyone at Northwind',
-    description: 'Anyone signed in can view',
-  },
+import {Divider} from '@astryxdesign/core/Divider';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {List, ListItem} from '@astryxdesign/core/List';
+import {Text} from '@astryxdesign/core/Text';
+
+const PRESETS: Array<{
+  label: string;
+  start: ISODateString;
+  end: ISODateString;
+}> = [
+  {label: 'Last 7 days', start: '2026-03-02', end: '2026-03-08'},
+  {label: 'Last 30 days', start: '2026-02-07', end: '2026-03-08'},
+  {label: 'This quarter', start: '2026-01-01', end: '2026-03-08'},
+  {label: 'Previous quarter', start: '2025-10-01', end: '2025-12-31'},
 ];
 
-export default function ComplexSelectorShowcase() {
-  const [visibility, setVisibility] = useState('team');
-  const selected = VISIBILITY_OPTIONS.find(
-    option => option.value === visibility,
+function formatDay(date: ISODateString, hasYear = false) {
+  return new Date(`${date}T00:00:00`).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: hasYear ? 'numeric' : undefined,
+  });
+}
+
+function formatRange(range: DateRange) {
+  if (range.start == null || range.end == null) {
+    return undefined;
+  }
+  const isSameYear = range.start.slice(0, 4) === range.end.slice(0, 4);
+  return `${formatDay(range.start, !isSameYear)} – ${formatDay(range.end, true)}`;
+}
+
+function DateRangeContent({
+  value,
+  onChange,
+  close,
+}: {
+  value: DateRange;
+  onChange: (value: DateRange) => void;
+  close: () => void;
+}) {
+  const [draft, setDraft] = useState(value);
+  const isComplete = draft.start != null && draft.end != null;
+
+  return (
+    <VStack gap={3}>
+      <HStack gap={4} wrap="wrap">
+        <List>
+          {PRESETS.map(preset => (
+            <ListItem
+              key={preset.label}
+              label={preset.label}
+              isSelected={
+                draft.start === preset.start && draft.end === preset.end
+              }
+              onClick={() => setDraft({start: preset.start, end: preset.end})}
+            />
+          ))}
+        </List>
+        <Calendar
+          mode="range"
+          value={draft}
+          onChange={setDraft}
+          focusDate={draft.start ?? '2026-03-01'}
+        />
+      </HStack>
+      <Divider />
+      <HStack gap={2} vAlign="center" hAlign="end">
+        <Text type="supporting" color="secondary">
+          {formatRange(draft) ?? 'Pick a start and end date'}
+        </Text>
+        <Button label="Cancel" variant="ghost" onClick={close} />
+        <Button
+          label="Apply"
+          variant="primary"
+          isDisabled={!isComplete}
+          onClick={() => {
+            onChange(draft);
+            close();
+          }}
+        />
+      </HStack>
+    </VStack>
   );
+}
+
+export default function ComplexSelectorShowcase() {
+  const [range, setRange] = useState<DateRange>({
+    start: '2026-03-02',
+    end: '2026-03-08',
+  });
 
   return (
-    <ComplexSelector
-      label="Project visibility"
-      description="Who can open this project"
+    <ComplexSelector<DateRange>
+      label="Reporting period"
+      description="Pick a preset or draw a custom range"
       width={320}
-      value={visibility}
-      onChange={setVisibility}
-      triggerLabel={selected?.label}>
+      value={range}
+      onChange={setRange}
+      placeholder="All time"
+      triggerLabel={formatRange(range)}>
       {(value, onChange, close) => (
-        <RadioList
-          label="Project visibility"
-          isLabelHidden
-          value={value}
-          onChange={nextValue => {
-            onChange(nextValue);
-            close();
-          }}>
-          {VISIBILITY_OPTIONS.map(option => (
-            <RadioListItem
-              key={option.value}
-              label={option.label}
-              value={option.value}
-              description={option.description}
-            />
-          ))}
-        </RadioList>
+        <DateRangeContent value={value} onChange={onChange} close={close} />
       )}
     </ComplexSelector>
   );