lucent-ui 0.11.0 → 0.13.0

package/dist-server/server/registry.js

@@ -1,6 +1,7 @@
 // Atoms
 import { COMPONENT_MANIFEST as Avatar } from '../src/components/atoms/Avatar/Avatar.manifest.js';
 import { COMPONENT_MANIFEST as Badge } from '../src/components/atoms/Badge/Badge.manifest.js';
+import { COMPONENT_MANIFEST as Chip } from '../src/components/atoms/Chip/Chip.manifest.js';
 import { COMPONENT_MANIFEST as Button } from '../src/components/atoms/Button/Button.manifest.js';
 import { COMPONENT_MANIFEST as Checkbox } from '../src/components/atoms/Checkbox/Checkbox.manifest.js';
 import { COMPONENT_MANIFEST as Divider } from '../src/components/atoms/Divider/Divider.manifest.js';
@@ -25,6 +26,7 @@ export const ALL_MANIFESTS = [
     // Atoms
     Avatar,
     Badge,
+    Chip,
     Button,
     Checkbox,
     Divider,

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

@@ -9,7 +9,12 @@ export const COMPONENT_MANIFEST = {
         'Use a Checkbox for settings that take effect immediately (e.g. "Remember me") or for ' +
         'selecting multiple items from a list. When only one option may be active at a time, use ' +
         'Radio instead. The indeterminate state communicates a "select all" parent whose children ' +
-        'are partially checked — never use it for a third logical state.',
+        'are partially checked — never use it for a third logical state. ' +
+        'Use the contained variant when you want to add visual emphasis to individual options — ' +
+        'for example, plan selection cards, feature toggles, or consent checkboxes. Contained is ' +
+        'especially useful when checkboxes are standalone or unrelated to each other, since the ' +
+        'border gives each option its own visual weight. Pair with helperText to provide additional ' +
+        'context without cluttering the label.',
     props: [
         {
             name: 'checked',
@@ -55,8 +60,21 @@ export const COMPONENT_MANIFEST = {
             type: 'enum',
             required: false,
             default: 'md',
-            description: 'Size of the checkbox box.',
-            enumValues: ['sm', 'md'],
+            description: 'Size of the checkbox box and label text.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
+        {
+            name: 'contained',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Wraps the checkbox in a bordered container. Use for standalone choices that need visual emphasis — plan cards, feature toggles, consent items. The border highlights with the accent colour when checked.',
+        },
+        {
+            name: 'helperText',
+            type: 'string',
+            required: false,
+            description: 'Secondary text below the label for additional context. The label becomes medium-weight for visual hierarchy.',
         },
     ],
     usageExamples: [
@@ -64,6 +82,8 @@ export const COMPONENT_MANIFEST = {
         { title: 'Uncontrolled', code: `<Checkbox defaultChecked label="Send me updates" />` },
         { title: 'Indeterminate', code: `<Checkbox indeterminate label="Select all" />` },
         { title: 'Disabled', code: `<Checkbox disabled label="Unavailable option" />` },
+        { title: 'Contained with helper', code: `<Checkbox contained label="Pro plan" helperText="Unlimited projects, 100 GB storage" />` },
+        { title: 'Contained standalone', code: `<Checkbox contained label="I accept the terms and conditions" />` },
     ],
     compositionGraph: [],
     accessibility: {

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

@@ -0,0 +1,45 @@
+export const COMPONENT_MANIFEST = {
+    id: 'chip',
+    name: 'Chip',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '1.0',
+    description: 'A compact label for filters, tags, statuses, and categories. Combines the roles of Badge and Tag into a single flexible component.',
+    designIntent: 'Chip is the universal label primitive — use it anywhere you need a compact visual marker. ' +
+        'It replaces both Badge (static status) and Tag (dismissible filter) with a single component. ' +
+        'Use `onDismiss` for removable chips (filters, multi-select values). ' +
+        'Use `onClick` for clickable/selectable chips (filter toggles, category navigation). ' +
+        'Use `dot` for status indicators (online/offline). ' +
+        'Use `swatch` for color-coded categories. ' +
+        'Use `leftIcon` for chips with leading icons (folders, file types, flags). ' +
+        'Use `borderless` for a softer, filled-only appearance in dense UIs. ' +
+        'Variant conveys semantic meaning — default to neutral for user-generated content.',
+    props: [
+        { name: 'children', type: 'ReactNode', required: true, description: 'Chip label content.' },
+        { name: 'variant', type: 'enum', required: false, default: 'neutral', description: 'Colour scheme conveying semantic meaning.', enumValues: ['neutral', 'accent', 'success', 'warning', 'danger', 'info'] },
+        { name: 'size', type: 'enum', required: false, default: 'md', description: 'Controls height, font size, and icon size.', enumValues: ['sm', 'md', 'lg'] },
+        { name: 'onDismiss', type: 'function', required: false, description: 'Renders an x button that calls this handler. Use for removable filters and multi-select values.' },
+        { name: 'onClick', type: 'function', required: false, description: 'Makes the chip clickable (renders as <button>). Use for filter toggles and category links.' },
+        { name: 'leftIcon', type: 'ReactNode', required: false, description: 'Icon or element rendered before the label (emoji, flag, avatar).' },
+        { name: 'swatch', type: 'string', required: false, description: 'Hex color string. Renders a small color dot before the label.' },
+        { name: 'dot', type: 'boolean', required: false, default: 'false', description: 'Renders a status dot using the variant colour. Use for online/offline indicators.' },
+        { name: 'borderless', type: 'boolean', required: false, default: 'false', description: 'Removes the border for a filled-only look.' },
+        { name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Dims the chip and prevents interaction.' },
+        { name: 'style', type: 'object', required: false, description: 'Inline style overrides.' },
+    ],
+    usageExamples: [
+        { title: 'Dismissible filter', code: `<Chip onDismiss={() => removeFilter('react')}>React</Chip>` },
+        { title: 'Status with dot', code: `<Chip variant="success" dot>Online</Chip>` },
+        { title: 'Color swatch', code: `<Chip swatch="#6366f1" onDismiss={() => {}}>Indigo</Chip>` },
+        { title: 'With icon', code: `<Chip leftIcon={<FolderIcon />} onDismiss={() => {}}>Documents</Chip>` },
+        { title: 'Clickable category', code: `<Chip variant="accent" onClick={() => navigate('/ux')}>UX</Chip>` },
+        { title: 'Borderless', code: `<Chip variant="warning" borderless>Pending</Chip>` },
+        { title: 'Static label', code: `<Chip variant="info">Beta</Chip>` },
+    ],
+    compositionGraph: [],
+    accessibility: {
+        role: 'group',
+        notes: 'When onClick is provided, renders as <button> with native button semantics. Dismiss button has aria-label="Dismiss" and stopPropagation to prevent parent click handlers.',
+        keyboardInteractions: ['Enter / Space — activates onClick or dismiss button when focused'],
+    },
+};

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

@@ -10,13 +10,16 @@ export const COMPONENT_MANIFEST = {
         'validation failures; the component applies danger styling automatically. ' +
         'leftElement and rightElement accept icons or small controls (e.g. currency symbol, clear button).',
     props: [
-        { name: 'type', type: 'enum', required: false, default: 'text', description: 'HTML input type.', enumValues: ['text', 'number', 'password', 'email', 'tel', 'url', 'search'] },
+        { name: 'size', type: 'enum', required: false, default: 'md', description: 'Controls height, font size, and padding. Label and helper text scale accordingly.', enumValues: ['sm', 'md', 'lg'] },
+        { name: 'type', type: 'enum', required: false, default: 'text', description: 'HTML input type.', enumValues: ['text', 'number', 'password', 'email', 'tel', 'url', 'search', 'color'] },
         { name: 'label', type: 'string', required: false, description: 'Visible label rendered above the input.' },
         { name: 'helperText', type: 'string', required: false, description: 'Supplementary hint shown below the input.' },
         { name: 'errorText', type: 'string', required: false, description: 'Validation error message. When set, input renders in error state.' },
         { name: 'leftElement', type: 'ReactNode', required: false, description: 'Icon or adornment rendered inside the left edge.' },
         { name: 'rightElement', type: 'ReactNode', required: false, description: 'Icon or adornment rendered inside the right edge.' },
         { name: 'placeholder', type: 'string', required: false, description: 'Placeholder text. Use as a hint, not a label.' },
+        { name: 'prefix', type: 'ReactNode', required: false, description: 'Inset label attached to the left of the field (e.g. "$", "https://").' },
+        { name: 'suffix', type: 'ReactNode', required: false, description: 'Inset label attached to the right of the field (e.g. "kg", ".com").' },
         { name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Disables the input.' },
         { name: 'value', type: 'string', required: false, description: 'Controlled value.' },
         { name: 'onChange', type: 'function', required: false, description: 'Change handler.' },

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

@@ -35,8 +35,21 @@ export const COMPONENT_MANIFEST = {
             type: 'enum',
             required: false,
             default: 'md',
-            description: 'Size of the radio button circle.',
-            enumValues: ['sm', 'md'],
+            description: 'Size of the radio button circle and label text.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
+        {
+            name: 'contained',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Wraps the radio in a bordered container. Highlights with accent border and subtle background when selected. Use for plan/option cards where each choice needs visual emphasis.',
+        },
+        {
+            name: 'helperText',
+            type: 'string',
+            required: false,
+            description: 'Secondary text below the label for additional context. Label becomes medium-weight for visual hierarchy.',
         },
     ],
     usageExamples: [
@@ -56,6 +69,14 @@ export const COMPONENT_MANIFEST = {
   <Radio value="s" label="S" />
   <Radio value="m" label="M" />
   <Radio value="l" label="L" />
+</RadioGroup>`.trim(),
+        },
+        {
+            title: 'Contained plan selector',
+            code: `
+<RadioGroup name="plan" value={plan} onChange={setPlan}>
+  <Radio value="free" label="Free plan" helperText="Up to 3 projects" contained />
+  <Radio value="pro" label="Pro plan" helperText="Unlimited projects" contained />
 </RadioGroup>`.trim(),
         },
         {

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

@@ -31,7 +31,7 @@ export const COMPONENT_MANIFEST = {
             required: false,
             default: 'md',
             description: 'Controls height and font size.',
-            enumValues: ['sm', 'md'],
+            enumValues: ['sm', 'md', 'lg'],
         },
         {
             name: 'onDismiss',

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

@@ -18,6 +18,7 @@ export const COMPONENT_MANIFEST = {
         { name: 'value', type: 'string', required: false, description: 'Controlled value.' },
         { name: 'onChange', type: 'function', required: false, description: 'Change handler.' },
         { name: 'placeholder', type: 'string', required: false, description: 'Placeholder text.' },
+        { name: 'size', type: 'enum', required: false, default: 'md', description: 'Controls font size and padding.', enumValues: ['sm', 'md', 'lg'] },
         { name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Disables the textarea.' },
     ],
     usageExamples: [

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

@@ -44,6 +44,27 @@ export const COMPONENT_MANIFEST = {
             description: 'Controls the track and thumb size.',
             enumValues: ['sm', 'md', 'lg'],
         },
+        {
+            name: 'contained',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Wraps the toggle in a bordered container. Highlights with accent border and subtle background when checked.',
+        },
+        {
+            name: 'helperText',
+            type: 'string',
+            required: false,
+            description: 'Secondary text below the label for additional context. Label becomes medium-weight for visual hierarchy.',
+        },
+        {
+            name: 'align',
+            type: 'enum',
+            required: false,
+            default: 'left',
+            description: 'Position of the toggle track relative to the label. Use "right" to push the track to the far end of the container.',
+            enumValues: ['left', 'right'],
+        },
         {
             name: 'disabled',
             type: 'boolean',
@@ -56,6 +77,8 @@ export const COMPONENT_MANIFEST = {
         { title: 'Controlled', code: `<Toggle checked={darkMode} onChange={e => setDarkMode(e.target.checked)} label="Dark mode" />` },
         { title: 'Uncontrolled', code: `<Toggle defaultChecked label="Email notifications" />` },
         { title: 'Sizes', code: `<Toggle size="sm" label="Compact" />\n<Toggle size="md" label="Default" />\n<Toggle size="lg" label="Large" />` },
+        { title: 'Contained with helper', code: `<Toggle contained label="Dark mode" helperText="Use dark colour scheme across the app" />` },
+        { title: 'Right-aligned', code: `<Toggle align="right" contained label="Notifications" helperText="Receive email alerts" />` },
         { title: 'Disabled', code: `<Toggle disabled label="Unavailable setting" />` },
     ],
     compositionGraph: [],

package/dist-server/src/components/molecules/DatePicker/DatePicker.manifest.js

@@ -37,6 +37,14 @@ export const COMPONENT_MANIFEST = {
             default: '"Pick a date"',
             description: 'Trigger button text when no date is selected.',
         },
+        {
+            name: 'size',
+            type: 'enum',
+            required: false,
+            default: 'md',
+            description: 'Controls trigger height and font size to match Input/Select.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
         {
             name: 'disabled',
             type: 'boolean',

package/dist-server/src/components/molecules/DateRangePicker/DateRangePicker.manifest.js

@@ -35,6 +35,14 @@ export const COMPONENT_MANIFEST = {
             default: '"Pick a date range"',
             description: 'Trigger button text when no range is selected.',
         },
+        {
+            name: 'size',
+            type: 'enum',
+            required: false,
+            default: 'md',
+            description: 'Controls trigger height and font size to match Input/Select.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
         {
             name: 'disabled',
             type: 'boolean',

package/dist-server/src/components/molecules/MultiSelect/MultiSelect.manifest.js

@@ -51,6 +51,14 @@ export const COMPONENT_MANIFEST = {
             default: 'false',
             description: 'Disables interaction and dims the component.',
         },
+        {
+            name: 'size',
+            type: 'enum',
+            required: false,
+            default: 'md',
+            description: 'Controls trigger height and font size to match Input/Select.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
         {
             name: 'max',
             type: 'number',
@@ -89,6 +97,8 @@ export const COMPONENT_MANIFEST = {
         },
     ],
     compositionGraph: [
+        { componentId: 'chip', componentName: 'Chip', role: 'Selected value chips with dismiss button', required: true },
+        { componentId: 'checkbox', componentName: 'Checkbox', role: 'Selection indicator in dropdown options', required: true },
         { componentId: 'text', componentName: 'Text', role: 'Option labels, empty state, and max hint', required: true },
     ],
     accessibility: {

package/dist-server/src/components/molecules/SearchInput/SearchInput.manifest.js

@@ -23,6 +23,32 @@ export const COMPONENT_MANIFEST = {
             required: true,
             description: 'Called with the new string value whenever the input changes.',
         },
+        {
+            name: 'size',
+            type: 'enum',
+            required: false,
+            default: 'md',
+            description: 'Controls height and font size. Passed to the underlying Input.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
+        {
+            name: 'label',
+            type: 'string',
+            required: false,
+            description: 'Visible label above the search field. Passed to the underlying Input.',
+        },
+        {
+            name: 'helperText',
+            type: 'string',
+            required: false,
+            description: 'Hint text below the field. Passed to the underlying Input.',
+        },
+        {
+            name: 'errorText',
+            type: 'string',
+            required: false,
+            description: 'Validation error text. Triggers error styling on the underlying Input.',
+        },
         {
             name: 'placeholder',
             type: 'string',

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

@@ -7,9 +7,9 @@ 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, and "danger" exclusively for destructive or irreversible ' +
-        'operations. Size should match surrounding content density — prefer "md" as the default and ' +
-        'reserve "sm" for toolbars or tables.',
+        'low-emphasis actions in dense UIs, "outline" for bordered buttons with no fill, and "danger" exclusively for destructive or irreversible ' +
+        'operations. Size should match surrounding content density — prefer "md" as the default, ' +
+        '"sm" for toolbars or tables, and "xs" for compact UIs like customizer panels.',
     props: [
         {
             name: 'variant',
@@ -17,7 +17,7 @@ export const ButtonManifest = {
             required: false,
             default: 'primary',
             description: 'Visual style conveying action hierarchy.',
-            enumValues: ['primary', 'secondary', 'ghost', 'danger'],
+            enumValues: ['primary', 'secondary', 'outline', 'ghost', 'danger'],
         },
         {
             name: 'size',
@@ -25,7 +25,7 @@ export const ButtonManifest = {
             required: false,
             default: 'md',
             description: 'Controls height and padding.',
-            enumValues: ['sm', 'md', 'lg'],
+            enumValues: ['xs', 'sm', 'md', 'lg'],
         },
         {
             name: 'children',
@@ -73,6 +73,20 @@ export const ButtonManifest = {
             required: false,
             description: 'Icon element rendered after the label.',
         },
+        {
+            name: 'chevron',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Appends a chevron-down icon after the label. Useful for dropdown triggers.',
+        },
+        {
+            name: 'spread',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Spaces content to the edges (justify-content: space-between). Useful with fullWidth + rightIcon/chevron.',
+        },
         {
             name: 'onClick',
             type: 'function',
@@ -114,8 +128,12 @@ export const ButtonManifest = {
             code: `<Button variant="primary" type="submit" fullWidth>Sign in</Button>`,
         },
         {
-            title: 'Borderless primary',
-            code: `<Button variant="primary" bordered={false}>Flat primary</Button>`,
+            title: 'Outline with swatch',
+            code: `<Button size="xs" variant="outline" leftIcon={<span style={{ width: 8, height: 8, borderRadius: '50%', background: '#6366f1' }} />}>Indigo</Button>`,
+        },
+        {
+            title: 'Dropdown trigger',
+            code: `<Button variant="outline" chevron>Options</Button>`,
         },
     ],
     compositionGraph: [],

package/package.json

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