lucent-ui 0.20.0 → 0.22.0

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

@@ -10,26 +10,38 @@ export const COMPONENT_MANIFEST = {
         '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 `dot` + `pulse` to show in-progress or live states (deploying, syncing, live incident). ' +
+        'Use `ghost` + `dot` for subtle inline status that blends into surrounding text or table rows. ' +
+        'Omit `children` with `dot` for a minimal dot-only indicator — great for table cells or avatar badges. ' +
         '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: 'children', type: 'ReactNode', required: false, description: 'Chip label content. When omitted with dot=true, renders as a compact dot-only indicator.' },
         { 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: 'dot', type: 'boolean', required: false, default: 'false', description: 'Renders a status dot using the variant colour. Omit children for a compact dot-only indicator.' },
+        { name: 'pulse', type: 'boolean', required: false, default: 'false', description: 'Adds a pulsing ring animation to the status dot. Only applies when dot=true. Use for running, deploying, or live states.' },
         { name: 'borderless', type: 'boolean', required: false, default: 'false', description: 'Removes the border for a filled-only look.' },
+        { name: 'ghost', type: 'boolean', required: false, default: 'false', description: 'Transparent background with text color only. Pairs well with dot for subtle inline statuses in tables or lists.' },
         { 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: [
+        // Status indicators — subtle ways to show state
+        { title: 'Status dot', code: `<Chip variant="success" dot>Online</Chip>` },
+        { title: 'Pulsing status (in-progress)', code: `<Chip variant="warning" dot pulse>Deploying</Chip>` },
+        { title: 'Ghost status (inline/table)', code: `<Chip variant="success" ghost dot>Active</Chip>` },
+        { title: 'Ghost pulsing', code: `<Chip variant="danger" ghost dot pulse>Live incident</Chip>` },
+        { title: 'Dot only (minimal)', code: `<Chip variant="success" dot />` },
+        { title: 'Dot only pulsing', code: `<Chip variant="danger" dot pulse />` },
+        // Filters, tags, and categories
         { 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>` },

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

@@ -0,0 +1,33 @@
+export const COMPONENT_MANIFEST = {
+    id: 'progress',
+    name: 'Progress',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A horizontal bar indicating completion, progress, or resource usage.',
+    designIntent: 'Use Progress to visualise a bounded numeric value — task completion, disk usage, health bars, etc. ' +
+        'Set warnAt/dangerAt thresholds for automatic colour shifts instead of hardcoding variants. ' +
+        'Ascending thresholds (warnAt < dangerAt) suit "high is bad" metrics like CPU; ' +
+        'descending thresholds (warnAt > dangerAt) suit "low is bad" metrics like battery.',
+    props: [
+        { name: 'value', type: 'number', required: true, description: 'Current progress value.' },
+        { name: 'max', type: 'number', required: false, default: '100', description: 'Maximum value.' },
+        { name: 'variant', type: 'enum', required: false, default: 'accent', description: 'Colour variant. Overridden when thresholds are set.', enumValues: ['accent', 'success', 'warning', 'danger'] },
+        { name: 'size', type: 'enum', required: false, default: 'md', description: 'Bar height.', enumValues: ['sm', 'md', 'lg'] },
+        { name: 'warnAt', type: 'number', required: false, description: 'Value at which variant auto-switches to warning.' },
+        { name: 'dangerAt', type: 'number', required: false, description: 'Value at which variant auto-switches to danger.' },
+        { name: 'label', type: 'union', required: false, description: 'true shows percentage; ReactNode shows custom label.' },
+    ],
+    usageExamples: [
+        { title: 'Basic', code: `<Progress value={60} />` },
+        { title: 'With label', code: `<Progress value={42} label />` },
+        { title: 'Thresholds', code: `<Progress value={85} warnAt={70} dangerAt={90} label />` },
+        { title: 'Danger variant', code: `<Progress value={95} variant="danger" size="lg" label />` },
+    ],
+    compositionGraph: [],
+    accessibility: {
+        role: 'progressbar',
+        ariaAttributes: ['aria-valuenow', 'aria-valuemin', 'aria-valuemax'],
+        notes: 'Uses native progressbar role. Add aria-label on the wrapping element for screen-reader context.',
+    },
+};

package/package.json

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