;
}
/* ---------------- Tabs ---------------- */
function TabsDemo(v) {
const [tab, setTab] = React.useState('runs');
return ;
}
window.story({
id: 'tabs', group: G, name: 'Tabs', status: 'new',
tagline: 'Switch between views — an underline (line) or a segmented (pill) variant. Arrow-key navigable.',
importLine: "const { Tabs } = F2;",
keywords: ['tabs', 'segmented', 'views', 'switch'],
props: [
{ name: 'tabs', type: 'Array<{value,label,icon?,badge?}>', description: 'Tab definitions.' },
{ name: 'value', type: 'string', description: 'Active tab value (controlled).' },
{ name: 'onChange', type: '(value) => void', description: 'Fired with the next tab value.' },
{ name: 'variant', type: "'line' | 'pill'", default: 'line', control: 'select', options: ['line', 'pill'], description: 'Underline tabs or a segmented control.' },
],
render: (v) => ,
code: (v) => `const [tab, setTab] = useState('runs');\n`,
examples: [
{ name: 'line', render: () => },
{ name: 'pill', render: () => },
],
a11y: [
'Buttons use role="tab" with aria-selected; the active tab is the only one in the tab order (roving tabindex).',
'←/→ move between tabs.',
'Pair with a role="tabpanel" region that is labelled by the active tab.',
],
});
/* ---------------- Breadcrumb ---------------- */
window.story({
id: 'breadcrumb', group: G, name: 'Breadcrumb', status: 'new',
tagline: 'Shows the path to the current page; the last item is the current location.',
importLine: "const { Breadcrumb } = F2;",
keywords: ['breadcrumb', 'path', 'navigation', 'hierarchy'],
props: [
{ name: 'items', type: 'Array<{label,href?,icon?}>', description: 'Trail items, root first. The last is the current page.' },
],
render: () => ,
code: () => ``,
examples: [
{ name: 'short', render: () => },
{ name: 'with icon root', render: () => },
],
a11y: [
'Wrapped in <nav aria-label="Breadcrumb"> with an ordered list.',
'The current page is a non-link with aria-current="page".',
],
});
/* ---------------- Pagination ---------------- */
function PageDemo(v) {
const [page, setPage] = React.useState(3);
return ;
}
window.story({
id: 'pagination', group: G, name: 'Pagination', status: 'new',
tagline: 'Page through long lists with first/last anchors and truncated middle pages.',
importLine: "const { Pagination } = F2;",
keywords: ['pagination', 'pages', 'list', 'navigation'],
props: [
{ name: 'page', type: 'number', default: 1, description: 'Current page (1-based, controlled).' },
{ name: 'count', type: 'number', default: 12, control: 'number', min: 3, max: 40, step: 1, description: 'Total number of pages.' },
{ name: 'onChange', type: '(page) => void', description: 'Fired with the next page.' },
],
render: (v) => ,
code: () => `const [page, setPage] = useState(1);\n`,
examples: [
{ name: 'few pages', render: () => { const C = () => { const [p, setP] = React.useState(2); return ; }; return ; } },
{ name: 'many pages', render: () => { const C = () => { const [p, setP] = React.useState(8); return ; }; return ; } },
],
a11y: [
'Wrapped in <nav aria-label="Pagination">; the current page carries aria-current="page".',
'Prev/next buttons are labelled and become disabled at the ends.',
],
});
/* ---------------- DropdownMenu ---------------- */
window.story({
id: 'dropdown-menu', group: G, name: 'DropdownMenu', status: 'new',
tagline: 'An actions menu with roving focus, icons, shortcuts, dividers and a destructive item. Arrow keys + Enter + Esc.',
importLine: "const { DropdownMenu } = F2;",
keywords: ['menu', 'dropdown', 'actions', 'context'],
props: [
{ name: 'trigger', type: 'ReactNode', description: 'Element that opens the menu.' },
{ name: 'items', type: 'Array<{label,icon?,shortcut?,onClick?,danger?,disabled?,divider?}>', description: 'Menu items; use { divider: true } for a separator.' },
{ name: 'align', type: "'start' | 'end'", default: 'start', control: 'select', options: ['start', 'end'], description: 'Align the menu to the trigger.' },
{ name: 'width', type: 'number', default: 220, description: 'Menu width in px.' },
],
render: (v) => (
}
items={[
{ label: 'Open run', icon: 'ExternalLink', shortcut: '↵' },
{ label: 'Duplicate', icon: 'Copy', shortcut: '⌘D' },
{ label: 'Rename', icon: 'PenLine' },
{ divider: true },
{ label: 'Pause agent', icon: 'Pause' },
{ label: 'Delete', icon: 'Trash2', danger: true, shortcut: '⌫' },
]} />
),
code: (v) => `}\n items={[\n { label: 'Open run', icon: 'ExternalLink', shortcut: '↵' },\n { label: 'Duplicate', icon: 'Copy', onClick: dup },\n { divider: true },\n { label: 'Delete', icon: 'Trash2', danger: true },\n ]}\n/>`,
a11y: [
'Menu uses role="menu" / role="menuitem"; opening focuses the first item.',
'↑/↓ move, Enter activates, Esc / outside-click closes.',
'The destructive item is coloured and labelled "Delete" — not red alone.',
],
});
/* ---------------- CommandPalette ---------------- */
function PaletteDemo() {
const [open, setOpen] = React.useState(false);
return (
} onClick={() => setOpen(true)}>Open palette ⌘K setOpen(false)} groups={[
{ label: 'Automations', items: [
{ label: 'Deploy invoice agent', icon: 'Rocket', hint: 'Action' },
{ label: 'Pause lead routing', icon: 'Pause', hint: 'Action' },
{ label: 'View support triage runs', icon: 'Play' },
] },
{ label: 'Navigate', items: [
{ label: 'Go to Dashboard', icon: 'LayoutDashboard' },
{ label: 'Go to Billing', icon: 'CreditCard' },
{ label: 'Open Docs', icon: 'BookOpen', hint: '↗' },
] },
]} />
);
}
window.story({
id: 'command-palette', group: G, name: 'CommandPalette', status: 'new',
tagline: 'A ⌘K launcher — fuzzy-filter grouped commands, navigate with arrows, run with Enter.',
importLine: "const { CommandPalette } = F2;",
keywords: ['command', 'palette', 'cmdk', 'search', 'launcher'],
props: [
{ name: 'open', type: 'boolean', description: 'Controls visibility.' },
{ name: 'onClose', type: '() => void', description: 'Called on Esc / backdrop / selection.' },
{ name: 'groups', type: 'Array<{label, items:[{label,icon?,hint?,onSelect?}]}>', description: 'Grouped commands.' },
{ name: 'placeholder', type: 'string', default: 'Type a command or search…', description: 'Search input placeholder.' },
],
render: () => ,
code: () => `const [open, setOpen] = useState(false);\n// wire ⌘K to setOpen(true)\n setOpen(false)}\n groups={[\n { label: 'Automations', items: [\n { label: 'Deploy invoice agent', icon: 'Rocket', onSelect: deploy },\n ]},\n { label: 'Navigate', items: [\n { label: 'Go to Dashboard', icon: 'LayoutDashboard', onSelect: goDash },\n ]},\n ]}\n/>`,
a11y: [
'The input is auto-focused on open; results filter live and the active item follows ↑/↓.',
'Enter runs the active command, Esc closes.',
'Selection is reinforced by a surface change on the active row, not color alone.',
],
});
/* ---------------- Stepper ---------------- */
function StepperDemo(v) {
const steps = [{ label: 'Connect data', description: 'Stripe, ERP' }, { label: 'Define agent', description: 'Prompt & tools' }, { label: 'Test run', description: 'Dry run' }, { label: 'Deploy', description: 'Go live' }];
return ;
}
window.story({
id: 'stepper', group: G, name: 'Stepper', status: 'new',
tagline: 'Shows progress through a multi-step flow — completed steps fill amber with a check, the current step is ringed.',
importLine: "const { Stepper } = F2;",
keywords: ['stepper', 'wizard', 'progress', 'onboarding'],
props: [
{ name: 'steps', type: 'Array<{label,description?}> | string[]', description: 'Ordered steps.' },
{ name: 'current', type: 'number', default: 2, control: 'number', min: 0, max: 3, step: 1, description: 'Zero-based index of the active step.' },
{ name: 'orientation', type: "'horizontal' | 'vertical'", default: 'horizontal', control: 'select', options: ['horizontal', 'vertical'], description: 'Layout direction.' },
],
render: (v) => ,
code: (v) => ``,
examples: [
{ name: 'horizontal', render: () => },
{ name: 'vertical', render: () =>
},
],
a11y: [
'The active step circle carries aria-current="step".',
'Completed steps show a check icon in addition to the amber fill, so progress is not color-only.',
],
});
})();