@duro-app/ui 0.16.0 → 0.17.1

package/src/components/Table/Table.meta.ts

@@ -0,0 +1,36 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Data table with CSS grid layout. Supports striped, bordered variants. Compound component — Root is required (throws without it). Requires `columns` prop on Root.',
+  whenToUse: [
+    'Displaying tabular data with rows and columns',
+    'Data lists with sortable/filterable columns',
+  ],
+  whenNotToUse: [
+    'Simple key-value pairs — use Stack with Text',
+    'Card-based layouts — use Grid with Card',
+  ],
+  anatomy: {
+    required: ['Root', 'Header', 'Body', 'Row', 'HeaderCell', 'Cell'],
+  },
+  relatedTo: [
+    {component: 'ScrollArea', relationship: 'Wrap Table in ScrollArea for horizontal overflow'},
+  ],
+  example: `<Table.Root variant="striped" size="md" columns={3}>
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>Name</Table.HeaderCell>
+      <Table.HeaderCell>Role</Table.HeaderCell>
+      <Table.HeaderCell>Status</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Alice</Table.Cell>
+      <Table.Cell>Admin</Table.Cell>
+      <Table.Cell>Active</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>`,
+}

package/src/components/Tabs/Tabs.meta.ts

@@ -0,0 +1,31 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Tabbed interface with keyboard navigation. Supports horizontal and vertical orientation. Compound component — Root is required.',
+  whenToUse: [
+    'Switching between content panels in the same view',
+    'Settings pages with multiple sections',
+    'Organizing related content without page navigation',
+  ],
+  whenNotToUse: [
+    'Primary site navigation — use SideNav or links',
+    'Step-by-step wizard — use a custom stepper',
+  ],
+  anatomy: {
+    required: ['Root', 'List', 'Tab', 'Panel'],
+  },
+  relatedTo: [
+    {component: 'SideNav', relationship: 'For persistent navigation, not content switching'},
+  ],
+  example: `<Tabs.Root defaultValue="general">
+  <Tabs.List>
+    <Tabs.Tab value="general">General</Tabs.Tab>
+    <Tabs.Tab value="security">Security</Tabs.Tab>
+    <Tabs.Tab value="billing" disabled>Billing</Tabs.Tab>
+  </Tabs.List>
+  <Tabs.Panel value="general">General settings content</Tabs.Panel>
+  <Tabs.Panel value="security">Security settings content</Tabs.Panel>
+  <Tabs.Panel value="billing">Billing content</Tabs.Panel>
+</Tabs.Root>`,
+}

package/src/components/Textarea/Textarea.meta.ts

@@ -0,0 +1,22 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Multi-line text input with automatic Field/Form integration. Same Field binding behavior as Input.',
+  whenToUse: [
+    'Multi-line text entry (comments, messages, descriptions)',
+  ],
+  whenNotToUse: [
+    'Single-line input — use Input',
+  ],
+  relatedTo: [
+    {component: 'Input', relationship: 'Single-line variant'},
+    {component: 'Field', relationship: 'Wrap in Field.Root for label + error'},
+  ],
+  example: `<Field.Root name="message">
+  <Field.Label>Message</Field.Label>
+  <Textarea placeholder="Tell us what you think..." rows={4} />
+  <Field.Description>At least 10 characters</Field.Description>
+  <Field.Error />
+</Field.Root>`,
+}

package/src/components/Toggle/Toggle.meta.ts

@@ -0,0 +1,30 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Toggle button with pressed/unpressed state. Works standalone or within ToggleGroup for multi/single selection.',
+  whenToUse: [
+    'Toolbar buttons that toggle on/off (bold, italic, grid view)',
+    'Within ToggleGroup for selecting from visible options',
+  ],
+  whenNotToUse: [
+    'On/off settings — use Switch',
+    'Form checkboxes — use Checkbox',
+    'Submitting actions — use Button',
+  ],
+  relatedTo: [
+    {component: 'ToggleGroup', relationship: 'Group of Toggles with single/multi select'},
+    {component: 'Switch', relationship: 'Switch for settings; Toggle for toolbar actions'},
+    {component: 'Button', relationship: 'Button for actions; Toggle for state'},
+  ],
+  example: `// Standalone
+<Toggle pressed={isBold} onPressedChange={setIsBold} aria-label="Bold">
+  <Icon name="key" size={16} />
+</Toggle>
+
+// In a group
+<ToggleGroup value={['grid']} onValueChange={setView} multiple={false}>
+  <Toggle value="list">List</Toggle>
+  <Toggle value="grid">Grid</Toggle>
+</ToggleGroup>`,
+}

package/src/components/ToggleGroup/ToggleGroup.meta.ts

@@ -0,0 +1,30 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Container for Toggle buttons enabling single or multi selection. Provides context to child Toggles.',
+  whenToUse: [
+    'Visible option set where user picks one or more (view mode, filter categories)',
+    'Segmented control pattern',
+  ],
+  whenNotToUse: [
+    'Dropdown selection — use Select',
+    'Many options (5+) — use Select for space efficiency',
+    'Form checkboxes — use Checkbox group in Fieldset',
+  ],
+  relatedTo: [
+    {component: 'Toggle', relationship: 'Toggle children get group context'},
+    {component: 'Select', relationship: 'Select for larger option sets'},
+  ],
+  example: `<ToggleGroup
+  value={selected}
+  onValueChange={setSelected}
+  multiple={false}
+  orientation="horizontal"
+  size="default"
+>
+  <Toggle value="list">List view</Toggle>
+  <Toggle value="grid">Grid view</Toggle>
+  <Toggle value="board">Board view</Toggle>
+</ToggleGroup>`,
+}

package/src/components/Tooltip/Tooltip.meta.ts

@@ -0,0 +1,22 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Hover/focus tooltip that shows supplementary content. Compound component — Root is required (throws without it).',
+  whenToUse: [
+    'Providing extra context on hover for icon-only buttons',
+    'Explaining abbreviations or truncated text',
+  ],
+  whenNotToUse: [
+    'Critical information that must always be visible — use Text or Callout',
+    'Interactive content (links, buttons) — tooltips are not interactive',
+  ],
+  anatomy: {
+    required: ['Root', 'Trigger'],
+  },
+  example: `<Tooltip.Root content="Delete this item permanently" placement="top">
+  <Tooltip.Trigger>
+    <Button variant="danger">Delete</Button>
+  </Tooltip.Trigger>
+</Tooltip.Root>`,
+}

package/src/components/component-meta.ts

@@ -0,0 +1,8 @@
+export interface ComponentMeta {
+  description: string
+  whenToUse: string[]
+  whenNotToUse: string[]
+  anatomy?: {required: string[]; optional?: string[]}
+  relatedTo?: Array<{component: string; relationship: string}>
+  example: string
+}