@duro-app/ui 0.16.0 → 0.17.0

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
+}