lucent-ui 0.22.0 → 0.23.0

package/dist-server/src/components/atoms/ButtonGroup/ButtonGroup.manifest.js

@@ -0,0 +1,43 @@
+export const COMPONENT_MANIFEST = {
+    id: 'button-group',
+    name: 'ButtonGroup',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A layout wrapper that visually groups multiple Button or SplitButton children into a related strip.',
+    designIntent: 'Use ButtonGroup for peer actions that belong together visually — toolbars, action bars, ' +
+        'toggle groups. Unlike SegmentedControl (single-select with indicator), ButtonGroup has no ' +
+        'built-in selection state; each child handles its own behaviour. ' +
+        'Items are separated by a small token-based gap with subtle inner corner radius ' +
+        'so the group reads as a unit while each button retains its own border and hover states.',
+    props: [
+        { name: 'children', type: 'ReactNode', required: true, description: 'Button or SplitButton elements to group.' },
+        { name: 'style', type: 'object', required: false, description: 'Style overrides for the wrapper div.' },
+    ],
+    usageExamples: [
+        {
+            title: 'Toolbar',
+            code: `<ButtonGroup>\n  <Button variant="outline" leftIcon={<Icon name="bold" />} />\n  <Button variant="outline" leftIcon={<Icon name="italic" />} />\n  <Button variant="outline" leftIcon={<Icon name="underline" />} />\n</ButtonGroup>`,
+        },
+        {
+            title: 'Action pair',
+            code: `<ButtonGroup>\n  <Button variant="primary">Save</Button>\n  <Button variant="outline">Cancel</Button>\n</ButtonGroup>`,
+        },
+        {
+            title: 'With SplitButton',
+            code: `<ButtonGroup>\n  <SplitButton onClick={deploy} menuItems={[{ label: 'Staging', onSelect: staging }]}>Deploy</SplitButton>\n  <Button variant="outline">Logs</Button>\n</ButtonGroup>`,
+        },
+    ],
+    compositionGraph: [
+        { componentId: 'button', componentName: 'Button', role: 'Grouped action item', required: false },
+        { componentId: 'split-button', componentName: 'SplitButton', role: 'Grouped split action item', required: false },
+    ],
+    accessibility: {
+        role: 'group',
+        ariaAttributes: [],
+        keyboardInteractions: [
+            'Tab moves focus between buttons in the group',
+        ],
+        notes: 'Uses role="group" on the wrapper. Individual button accessibility is inherited from the children.',
+    },
+};

package/dist-server/src/components/atoms/SplitButton/SplitButton.manifest.js

@@ -0,0 +1,75 @@
+export const COMPONENT_MANIFEST = {
+    id: 'split-button',
+    name: 'SplitButton',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A compound button pairing a primary action with a chevron dropdown for secondary actions.',
+    designIntent: 'Use SplitButton when there is one dominant action alongside a small set of related alternatives ' +
+        '(e.g. "Save" + "Save as draft", "Deploy" + "Deploy to staging"). ' +
+        'Each half is a fully independent button separated by a small token-based gap, with a subtle ' +
+        'inner corner radius (radius-sm) so the pair reads as a unit without sharing a border. ' +
+        'Hover lift and press ring apply independently per half. ' +
+        'Ghost variants use tighter inner padding to keep the halves visually close. ' +
+        'The chevron half opens a Menu molecule; all dropdown keyboard navigation is inherited.',
+    props: [
+        { name: 'children', type: 'ReactNode', required: true, description: 'Label content for the primary action button.' },
+        { name: 'onClick', type: 'function', required: true, description: 'Handler fired when the primary (left) half is clicked.' },
+        { name: 'menuItems', type: 'array', required: true, description: 'Array of { label, onSelect, disabled?, danger?, icon? } for the dropdown.' },
+        { name: 'variant', type: 'enum', required: false, default: 'primary', description: 'Visual variant applied to both halves.', enumValues: ['primary', 'secondary', 'outline', 'ghost', 'danger', 'danger-outline', 'danger-ghost'] },
+        { name: 'size', type: 'enum', required: false, default: 'md', description: 'Size applied to both halves.', enumValues: ['2xs', 'xs', 'sm', 'md', 'lg'] },
+        { name: 'bordered', type: 'boolean', required: false, default: 'true', description: 'If false, removes the border on both halves.' },
+        { name: 'menuPlacement', type: 'enum', required: false, default: 'bottom-end', description: 'Dropdown placement relative to the chevron trigger.', enumValues: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'right'] },
+        { name: 'disabled', type: 'boolean', required: false, description: 'Disables both halves.' },
+        { name: 'loading', type: 'boolean', required: false, default: 'false', description: 'Shows a spinner in the primary half and disables both.' },
+        { name: 'leftIcon', type: 'ReactNode', required: false, description: 'Icon rendered before the label in the primary half.' },
+        { name: 'style', type: 'object', required: false, description: 'Style overrides for the wrapper div.' },
+    ],
+    usageExamples: [
+        {
+            title: 'Basic',
+            code: `<SplitButton onClick={handleSave} menuItems={[{ label: 'Save as draft', onSelect: handleDraft }]}>Save</SplitButton>`,
+        },
+        {
+            title: 'Outline with leftIcon',
+            code: `<SplitButton variant="outline" leftIcon={<Icon name="deploy" />} onClick={deploy} menuItems={[{ label: 'Deploy to staging', onSelect: deployStaging }, { label: 'Rollback', onSelect: rollback, danger: true }]}>Deploy</SplitButton>`,
+        },
+        {
+            title: 'Menu items with icons',
+            code: `<SplitButton onClick={handleSave} menuItems={[{ label: 'Save as draft', onSelect: handleDraft, icon: <Icon name="file" /> }, { label: 'Export', onSelect: handleExport, icon: <Icon name="download" /> }]}>Save</SplitButton>`,
+        },
+        {
+            title: 'Small ghost bordered (issue #90 use case)',
+            code: `<SplitButton variant="ghost" size="2xs" bordered onClick={toggle} menuItems={[{ label: 'Reset layout', onSelect: reset }]}>Collapse all</SplitButton>`,
+        },
+        {
+            title: 'Danger outline with disabled item',
+            code: `<SplitButton variant="danger-outline" onClick={handleDelete} menuItems={[{ label: 'Move to trash', onSelect: trash }, { label: 'Delete forever', onSelect: nuke, danger: true }, { label: 'Archive (unavailable)', onSelect: archive, disabled: true }]}>Delete</SplitButton>`,
+        },
+        {
+            title: 'Disabled',
+            code: `<SplitButton disabled onClick={handleSave} menuItems={[{ label: 'Option', onSelect: fn }]}>Save</SplitButton>`,
+        },
+        {
+            title: 'Loading',
+            code: `<SplitButton loading onClick={handleSave} menuItems={[{ label: 'Option', onSelect: fn }]}>Saving...</SplitButton>`,
+        },
+    ],
+    compositionGraph: [
+        { componentId: 'menu', componentName: 'Menu', role: 'Dropdown container for secondary actions', required: true },
+        { componentId: 'menu-item', componentName: 'MenuItem', role: 'Individual dropdown action', required: true },
+    ],
+    accessibility: {
+        role: 'group',
+        ariaAttributes: ['aria-label', 'aria-haspopup', 'aria-expanded', 'aria-busy'],
+        keyboardInteractions: [
+            'Enter/Space on primary button fires onClick',
+            'Enter/Space/ArrowDown on chevron opens dropdown',
+            'ArrowDown/ArrowUp cycles dropdown items',
+            'Home/End jumps to first/last item',
+            'Escape closes dropdown and returns focus to chevron',
+            'Tab closes dropdown',
+        ],
+        notes: 'The wrapper uses role="group" with aria-label derived from children. The chevron button carries aria-haspopup="menu" and aria-expanded via Menu. Primary button has aria-busy when loading.',
+    },
+};

package/dist-server/src/manifest/examples/button.manifest.js

@@ -7,11 +7,12 @@ export const ButtonManifest = {
     description: 'A clickable control that triggers an action. The primary interactive primitive in Lucent UI.',
     designIntent: 'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the ' +
         'single most important action in a view, "secondary" for supporting actions, "ghost" for ' +
-        'low-emphasis actions in dense UIs, "outline" for bordered buttons with no fill, and "danger" exclusively for destructive or irreversible ' +
+        'low-emphasis actions in dense UIs, "outline" for bordered buttons with transparent background, and "danger" exclusively for destructive or irreversible ' +
         'operations. Use "danger-ghost" for low-emphasis destructive actions (red text, no fill) and ' +
-        '"danger-outline" for bordered destructive buttons. Size should match surrounding content density — prefer "md" as the default, ' +
+        '"danger-outline" for bordered destructive buttons (also transparent background). Size should match surrounding content density — prefer "md" as the default, ' +
         '"sm" for toolbars or tables, "xs" for compact UIs like customizer panels, and "2xs" for ' +
-        'ultra-dense inline controls (~22px height) such as table-inline actions or toolbar icon triggers.',
+        'ultra-dense inline controls (~22px height) such as table-inline actions or toolbar icon triggers. ' +
+        'Icon-only buttons (leftIcon/rightIcon without children) automatically render as square with aspect-ratio: 1.',
     props: [
         {
             name: 'variant',
@@ -44,8 +45,8 @@ export const ButtonManifest = {
         {
             name: 'children',
             type: 'ReactNode',
-            required: true,
-            description: 'Button label or content.',
+            required: false,
+            description: 'Button label or content. Omit for icon-only buttons (provide leftIcon or rightIcon instead).',
         },
         {
             name: 'disabled',
@@ -161,6 +162,11 @@ export const ButtonManifest = {
             title: 'Dense inline action',
             code: `<Button variant="ghost" size="2xs" leftIcon={<RefreshIcon />}>Retry</Button>`,
         },
+        {
+            title: 'Icon-only (square)',
+            code: `<Button variant="outline" size="2xs" leftIcon={<CloseIcon />} aria-label="Close" />`,
+            description: 'Omitting children auto-sizes the button as a square via aspect-ratio: 1.',
+        },
     ],
     compositionGraph: [],
     accessibility: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",