lucent-ui 0.7.0 → 0.9.0

package/dist-cli/cli/mapper.js

@@ -6,8 +6,8 @@ import { figmaColorToHex, isFigmaColor, isAlias, } from './figma.js';
  */
 const LUCENT_TOKEN_KEYS = new Set([
     // SemanticColorTokens
-    'bgBase', 'bgSubtle', 'bgMuted', 'bgOverlay',
-    'surfaceDefault', 'surfaceRaised', 'surfaceOverlay',
+    'bgBase', 'bgSubtle', 'bgOverlay',
+    'surface', 'surfaceSecondary', 'surfaceRaised', 'surfaceOverlay',
     'borderDefault', 'borderSubtle', 'borderStrong',
     'textPrimary', 'textSecondary', 'textDisabled', 'textInverse', 'textOnAccent',
     'accentDefault', 'accentHover', 'accentActive', 'accentSubtle',

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

@@ -0,0 +1,91 @@
+export const COMPONENT_MANIFEST = {
+    id: 'color-picker',
+    name: 'ColorPicker',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A color swatch button that opens a popover with preset swatches and HEX / RGB / RGBA / HSL inputs.',
+    designIntent: 'ColorPicker surfaces color selection without navigating away. The swatch button shows the ' +
+        'current color at a glance; the popover provides precise input through four format modes. ' +
+        'Presets accelerate common choices — provide a curated palette relevant to the product. ' +
+        'Always pair with a visible label so the purpose of the picker is clear.',
+    props: [
+        {
+            name: 'value',
+            type: 'string',
+            required: false,
+            description: 'Controlled color value. Accepts hex (#rrggbb / #rrggbbaa), rgb(), rgba(), or hsl() strings.',
+        },
+        {
+            name: 'onChange',
+            type: 'function',
+            required: false,
+            description: 'Called with the new hex string (#rrggbb, or #rrggbbaa when alpha < 1) whenever the color changes.',
+        },
+        {
+            name: 'label',
+            type: 'string',
+            required: false,
+            description: 'Visible label rendered above the swatch button.',
+        },
+        {
+            name: 'presets',
+            type: 'string[]',
+            required: false,
+            description: 'Array of hex color strings shown as clickable swatches. Defaults to a 16-color palette.',
+        },
+        {
+            name: 'disabled',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Prevents interaction and dims the label.',
+        },
+        {
+            name: 'id',
+            type: 'string',
+            required: false,
+            description: 'HTML id for the swatch button. Auto-generated if omitted.',
+        },
+        {
+            name: 'style',
+            type: 'CSSProperties',
+            required: false,
+            description: 'Inline styles applied to the outer wrapper.',
+        },
+    ],
+    usageExamples: [
+        {
+            title: 'Basic controlled',
+            code: `const [color, setColor] = useState('#3b82f6');
+<ColorPicker value={color} onChange={setColor} label="Brand color" />`,
+        },
+        {
+            title: 'Custom presets',
+            code: `<ColorPicker
+  value={accent}
+  onChange={setAccent}
+  label="Accent"
+  presets={['#111827', '#3b82f6', '#8b5cf6', '#ec4899', '#ef4444', '#f97316', '#22c55e']}
+/>`,
+        },
+        {
+            title: 'No presets',
+            code: `<ColorPicker value={color} onChange={setColor} presets={[]} label="Custom color" />`,
+        },
+        {
+            title: 'Disabled',
+            code: `<ColorPicker value="#6b7280" disabled label="Theme color" />`,
+        },
+    ],
+    compositionGraph: [],
+    accessibility: {
+        role: 'button (trigger) + dialog (popover)',
+        ariaAttributes: ['aria-expanded', 'aria-haspopup', 'aria-label'],
+        keyboardInteractions: [
+            'Enter / Space — opens the color picker popover',
+            'Escape / click outside — closes the popover',
+            'Tab — moves through format tabs and input fields within the popover',
+        ],
+    },
+};

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

@@ -0,0 +1,39 @@
+export const COMPONENT_MANIFEST = {
+    id: 'color-swatch',
+    name: 'ColorSwatch',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A circular color swatch that can be static or interactive.',
+    designIntent: 'ColorSwatch is the smallest unit of color representation in the system. ' +
+        'Use it wherever a color needs to be shown at a glance — palette pickers, ' +
+        'token lists, or inline color indicators. The selected state shows an ' +
+        'accent-colored ring to indicate the active choice.',
+    props: [
+        { name: 'color', type: 'string', required: true, description: 'CSS color value to display.' },
+        { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'Swatch diameter: sm=16px, md=22px, lg=28px.' },
+        { name: 'selected', type: 'boolean', required: false, default: 'false', description: 'Shows an accent ring when true.' },
+        { name: 'onClick', type: 'function', required: false, description: 'Click handler. Omit for a non-interactive display swatch.' },
+        { name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Dims the swatch and prevents interaction.' },
+        { name: 'title', type: 'string', required: false, description: 'Tooltip text. Defaults to the color value.' },
+        { name: 'style', type: 'CSSProperties', required: false, description: 'Inline styles applied to the swatch button.' },
+    ],
+    usageExamples: [
+        {
+            title: 'Static palette',
+            code: `['#ef4444', '#f97316', '#22c55e'].map(c => (
+  <ColorSwatch key={c} color={c} />
+))`,
+        },
+        {
+            title: 'Selectable swatch',
+            code: `<ColorSwatch color="#3b82f6" selected={active === '#3b82f6'} onClick={() => setActive('#3b82f6')} />`,
+        },
+    ],
+    compositionGraph: [],
+    accessibility: {
+        role: 'button',
+        ariaAttributes: ['title (tooltip)'],
+        keyboardInteractions: ['Enter / Space — triggers onClick'],
+    },
+};

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

@@ -0,0 +1,102 @@
+export const COMPONENT_MANIFEST = {
+    id: 'segmented-control',
+    name: 'SegmentedControl',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A pill-group selector where exactly one option is always active, with a sliding indicator.',
+    designIntent: 'Use SegmentedControl for mutually exclusive view switches or mode selectors that have ' +
+        '2–5 options and where all options should be visible simultaneously (unlike Select). ' +
+        'Common uses: view mode (Grid / List / Table), time range (Day / Week / Month), ' +
+        'format picker (Hex / RGB / HSL). Keep labels short (1–2 words) so the control stays compact. ' +
+        'For more than 5 options or dynamic option lists, prefer Select.',
+    props: [
+        {
+            name: 'options',
+            type: 'SegmentedOption[]',
+            required: true,
+            description: 'Array of { value, label, disabled? }. 2–5 options recommended.',
+        },
+        {
+            name: 'value',
+            type: 'string',
+            required: false,
+            description: 'Controlled selected value. Pair with onChange.',
+        },
+        {
+            name: 'defaultValue',
+            type: 'string',
+            required: false,
+            description: 'Initial value for uncontrolled usage. Defaults to the first option.',
+        },
+        {
+            name: 'onChange',
+            type: 'function',
+            required: false,
+            description: 'Called with the newly selected value.',
+        },
+        {
+            name: 'size',
+            type: 'enum',
+            required: false,
+            default: 'md',
+            description: 'Height and font size of the control.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
+        {
+            name: 'disabled',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Disables all options.',
+        },
+        {
+            name: 'fullWidth',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Stretches the control to fill its container, distributing options equally.',
+        },
+    ],
+    usageExamples: [
+        {
+            title: 'Controlled',
+            code: `const [view, setView] = useState('grid');
+<SegmentedControl
+  value={view}
+  onChange={setView}
+  options={[
+    { value: 'grid', label: 'Grid' },
+    { value: 'list', label: 'List' },
+    { value: 'table', label: 'Table' },
+  ]}
+/>`,
+        },
+        {
+            title: 'With icons',
+            code: `<SegmentedControl
+  defaultValue="week"
+  options={[
+    { value: 'day',   label: <><CalIcon /> Day</>   },
+    { value: 'week',  label: <><CalIcon /> Week</>  },
+    { value: 'month', label: <><CalIcon /> Month</> },
+  ]}
+/>`,
+        },
+        {
+            title: 'Full-width, sizes',
+            code: `<SegmentedControl fullWidth size="sm" defaultValue="a" options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />
+<SegmentedControl fullWidth size="md" defaultValue="a" options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />
+<SegmentedControl fullWidth size="lg" defaultValue="a" options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />`,
+        },
+    ],
+    compositionGraph: [],
+    accessibility: {
+        role: 'group (radiogroup)',
+        ariaAttributes: ['aria-checked', 'role="radio"', 'disabled'],
+        keyboardInteractions: [
+            'Tab — focuses the group',
+            'Click — selects an option',
+        ],
+    },
+};

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

@@ -17,13 +17,13 @@ export const COMPONENT_MANIFEST = {
             type: 'boolean',
             required: false,
             default: 'false',
-            description: 'Applies alternating bgMuted backgrounds to even tbody rows.',
+            description: 'Applies alternating surfaceSecondary backgrounds to even tbody rows.',
         },
         {
             name: 'Table.Head',
             type: 'component',
             required: false,
-            description: 'Renders <thead> with bgMuted background. Accepts Table.Row children.',
+            description: 'Renders <thead> with surfaceSecondary background. Accepts Table.Row children.',
         },
         {
             name: 'Table.Body',
@@ -35,7 +35,7 @@ export const COMPONENT_MANIFEST = {
             name: 'Table.Foot',
             type: 'component',
             required: false,
-            description: 'Renders <tfoot> with bgMuted background.',
+            description: 'Renders <tfoot> with surfaceSecondary background.',
         },
         {
             name: 'Table.Row',

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

@@ -9,7 +9,11 @@ export const COMPONENT_MANIFEST = {
         'are separated from the body by a border-default divider, giving visual structure without requiring ' +
         'the consumer to manage spacing. Padding, shadow, and radius are all configurable to accommodate ' +
         'flat/ghost cards, modal-like surfaces, and compact data-dense layouts. The overflow: hidden ensures ' +
-        'children respect the border-radius without needing additional clipping.',
+        'children respect the border-radius without needing additional clipping.\n\n' +
+        'Token rule: Card uses surface for its background. Never use bgBase or bgSubtle on a Card — ' +
+        'those tokens are reserved for the page canvas (body, sidebar, layout regions). Content nested ' +
+        'inside a Card that needs a tinted fill (e.g. a footer, inset panel, or disabled input) should use ' +
+        'surfaceSecondary.',
     props: [
         {
             name: 'children',

package/dist-server/src/manifest/validate.js

@@ -27,7 +27,7 @@ export function validateManifest(manifest) {
         errors.push(err('id', 'Must be kebab-case (e.g. "button", "form-field")'));
     }
     // tier
-    const validTiers = ['atom', 'molecule', 'block', 'flow', 'overlay'];
+    const validTiers = ['atom', 'molecule', 'block', 'flow', 'overlay', 'provider'];
     if (!validTiers.includes(m['tier'])) {
         errors.push(err('tier', `Must be one of: ${validTiers.join(', ')}`));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -31,6 +31,11 @@
     "mcp",
     "ai"
   ],
+  "homepage": "https://lucentui.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rozinashopify/lucent-ui"
+  },
   "author": "Rozina Szogyenyi",
   "license": "MIT",
   "peerDependencies": {
@@ -43,11 +48,13 @@
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/ui": "^4.0.18",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.9.3",
     "vite": "^6.4.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.27.1",
@@ -58,7 +65,8 @@
     "build": "vite build",
     "build:server": "tsc -p server/tsconfig.json",
     "build:cli": "tsc -p cli/tsconfig.json && cp cli/template.manifest.json dist-cli/cli/template.manifest.json",
-    "test": "echo \"No tests yet\" && exit 0",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "pnpm prepublishOnly && changeset publish"