lucent-ui 0.4.2 → 0.6.0

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

@@ -0,0 +1,80 @@
+export const COMPONENT_MANIFEST = {
+    id: 'code-block',
+    name: 'CodeBlock',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A styled code display with optional tabs, a language label, copy-to-clipboard, and an AI prompt variant.',
+    designIntent: 'Use CodeBlock for static code snippets, install commands, API examples, and AI prompt sharing. ' +
+        'The tabs prop switches between related snippets (e.g. pnpm / npm / yarn). ' +
+        'The prompt variant renders a single-line truncated display suited to AI tool prompts — ' +
+        'the full text is always copied even when visually clipped. ' +
+        'Zero-dependency — no syntax highlighting library is bundled.',
+    props: [
+        {
+            name: 'code',
+            type: 'string',
+            required: false,
+            description: 'Code string — used in single (non-tabbed) mode.',
+        },
+        {
+            name: 'language',
+            type: 'string',
+            required: false,
+            description: 'Language label shown in the header (non-tabbed mode only). Purely cosmetic.',
+        },
+        {
+            name: 'tabs',
+            type: 'array',
+            required: false,
+            description: 'Tabbed mode. Each entry has { label, code, language?, icon? }. ' +
+                'Switching tabs resets the copied state.',
+        },
+        {
+            name: 'variant',
+            type: 'enum',
+            required: false,
+            default: 'code',
+            enumValues: ['code', 'prompt'],
+            description: '"code" renders a <pre><code> block with horizontal scroll. ' +
+                '"prompt" renders a single-line truncated span suited to AI prompts.',
+        },
+        {
+            name: 'helperText',
+            type: 'string',
+            required: false,
+            description: 'Descriptive text rendered between the tab bar and the code area.',
+        },
+        {
+            name: 'showCopyButton',
+            type: 'boolean',
+            required: false,
+            default: 'true',
+            description: 'Renders a copy-to-clipboard button. ' +
+                'Shows a "Copied!" confirmation for 2 s on success.',
+        },
+    ],
+    usageExamples: [
+        {
+            title: 'Single snippet',
+            code: `<CodeBlock language="tsx" code={\`<Button variant="primary">Save</Button>\`} />`,
+        },
+        {
+            title: 'Tabbed install commands',
+            code: `<CodeBlock tabs={[\n  { label: 'pnpm', code: 'pnpm add lucent-ui', language: 'bash' },\n  { label: 'npm',  code: 'npm install lucent-ui', language: 'bash' },\n]} />`,
+        },
+        {
+            title: 'AI prompt',
+            code: `<CodeBlock\n  variant="prompt"\n  helperText="Paste into Claude:"\n  tabs={[\n    { label: 'Claude', icon: '♦', code: '"Add a Button with variant=\\"primary\\"."' },\n    { label: 'Cursor', icon: '↖', code: '@lucent-ui Add a primary Button.' },\n  ]}\n/>`,
+        },
+    ],
+    compositionGraph: [],
+    accessibility: {
+        role: 'region',
+        ariaAttributes: ['aria-label (copy button)'],
+        keyboardInteractions: [
+            'Tab — focuses the copy button',
+            'Enter / Space — copies the code',
+        ],
+    },
+};

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

@@ -0,0 +1,98 @@
+export const COMPONENT_MANIFEST = {
+    id: 'slider',
+    name: 'Slider',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A range input styled with Lucent tokens for selecting a numeric value within a bounded range.',
+    designIntent: 'Use Slider for continuous or stepped numeric inputs where the relative position matters — ' +
+        'volume, brightness, border radius, spacing scale. Pair with showValue when the exact ' +
+        'number is meaningful to the user. For precise numeric entry, use Input with type="number" ' +
+        'instead. Disabled state uses muted colours without opacity hacks.',
+    props: [
+        {
+            name: 'min',
+            type: 'number',
+            required: false,
+            default: '0',
+            description: 'Minimum value.',
+        },
+        {
+            name: 'max',
+            type: 'number',
+            required: false,
+            default: '100',
+            description: 'Maximum value.',
+        },
+        {
+            name: 'step',
+            type: 'number',
+            required: false,
+            default: '1',
+            description: 'Increment step between values.',
+        },
+        {
+            name: 'value',
+            type: 'number',
+            required: false,
+            description: 'Controlled current value. Pair with onChange.',
+        },
+        {
+            name: 'defaultValue',
+            type: 'number',
+            required: false,
+            description: 'Initial value for uncontrolled usage. Defaults to the midpoint of min/max.',
+        },
+        {
+            name: 'onChange',
+            type: 'function',
+            required: false,
+            description: 'Called on every value change.',
+        },
+        {
+            name: 'label',
+            type: 'string',
+            required: false,
+            description: 'Visible label rendered above the track.',
+        },
+        {
+            name: 'showValue',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Displays the current numeric value to the right of the label.',
+        },
+        {
+            name: 'size',
+            type: 'enum',
+            required: false,
+            default: 'md',
+            description: 'Controls track thickness and thumb diameter.',
+            enumValues: ['sm', 'md', 'lg'],
+        },
+        {
+            name: 'disabled',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Prevents interaction and dims the control.',
+        },
+    ],
+    usageExamples: [
+        { title: 'Basic', code: `<Slider label="Volume" showValue />` },
+        { title: 'Controlled', code: `<Slider label="Opacity" min={0} max={1} step={0.01} value={opacity} onChange={e => setOpacity(Number(e.target.value))} showValue />` },
+        { title: 'Sizes', code: `<Slider size="sm" label="Small" />\n<Slider size="md" label="Medium" />\n<Slider size="lg" label="Large" />` },
+        { title: 'Disabled', code: `<Slider label="Locked" disabled defaultValue={40} />` },
+    ],
+    compositionGraph: [],
+    accessibility: {
+        role: 'slider',
+        ariaAttributes: ['aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-disabled'],
+        keyboardInteractions: [
+            'ArrowRight / ArrowUp — increase value by step',
+            'ArrowLeft / ArrowDown — decrease value by step',
+            'Home — jump to min',
+            'End — jump to max',
+        ],
+    },
+};

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

@@ -0,0 +1,98 @@
+export const COMPONENT_MANIFEST = {
+    id: 'table',
+    name: 'Table',
+    tier: 'atom',
+    domain: 'neutral',
+    specVersion: '0.1',
+    description: 'A lightweight, token-styled HTML table primitive with compound sub-components. ' +
+        'Distinct from DataTable — no sorting, filtering, or pagination.',
+    designIntent: 'Use Table for static or lightly dynamic tabular data where full DataTable features ' +
+        'are not needed — props tables, changelog entries, comparison grids, reference docs. ' +
+        'The compound API (Table.Head, Table.Body, Table.Row, Table.Cell) maps directly to ' +
+        'semantic HTML so screen readers get the full table structure. ' +
+        'Horizontal overflow is handled automatically by a scroll wrapper.',
+    props: [
+        {
+            name: 'striped',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Applies alternating bgMuted backgrounds to even tbody rows.',
+        },
+        {
+            name: 'Table.Head',
+            type: 'component',
+            required: false,
+            description: 'Renders <thead> with bgMuted background. Accepts Table.Row children.',
+        },
+        {
+            name: 'Table.Body',
+            type: 'component',
+            required: false,
+            description: 'Renders <tbody>. Accepts Table.Row children.',
+        },
+        {
+            name: 'Table.Foot',
+            type: 'component',
+            required: false,
+            description: 'Renders <tfoot> with bgMuted background.',
+        },
+        {
+            name: 'Table.Row',
+            type: 'component',
+            required: false,
+            description: 'Renders <tr> with a hover highlight. Accepts Table.Cell children.',
+        },
+        {
+            name: 'Table.Cell',
+            type: 'component',
+            required: false,
+            description: 'Renders <td> by default or <th scope="col"> when as="th". ' +
+                'Header cells are semibold + secondary colour; data cells are regular + primary.',
+        },
+    ],
+    usageExamples: [
+        {
+            title: 'Basic',
+            code: `<Table>
+  <Table.Head>
+    <Table.Row>
+      <Table.Cell as="th">Name</Table.Cell>
+      <Table.Cell as="th">Role</Table.Cell>
+    </Table.Row>
+  </Table.Head>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Alice</Table.Cell>
+      <Table.Cell>Engineer</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>`,
+        },
+        {
+            title: 'Striped',
+            code: `<Table striped>
+  <Table.Head>…</Table.Head>
+  <Table.Body>…</Table.Body>
+</Table>`,
+        },
+        {
+            title: 'Custom cell content',
+            code: `<Table.Cell>
+  <Badge variant="success">Active</Badge>
+</Table.Cell>`,
+        },
+    ],
+    compositionGraph: [
+        { componentId: 'table-head', componentName: 'Table.Head', role: 'head', required: false },
+        { componentId: 'table-body', componentName: 'Table.Body', role: 'body', required: false },
+        { componentId: 'table-foot', componentName: 'Table.Foot', role: 'foot', required: false },
+        { componentId: 'table-row', componentName: 'Table.Row', role: 'row', required: false },
+        { componentId: 'table-cell', componentName: 'Table.Cell', role: 'cell', required: false },
+    ],
+    accessibility: {
+        role: 'table',
+        ariaAttributes: ['scope="col" on th cells'],
+        keyboardInteractions: ['Standard browser table navigation'],
+    },
+};

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

@@ -4,19 +4,23 @@ export const COMPONENT_MANIFEST = {
     tier: 'molecule',
     domain: 'neutral',
     specVersion: '1.0',
-    description: 'A sortable, paginated data table with configurable columns, custom cell renderers, and keyboard-accessible pagination controls.',
+    description: 'A sortable, filterable, paginated data table with configurable columns, custom cell renderers, and keyboard-accessible pagination controls.',
     designIntent: 'DataTable is generic over row type T so TypeScript consumers get full type safety on column keys and renderers. ' +
         'Sorting is client-side and composable — each column opts in via sortable:true; clicking a sorted column cycles asc → desc → unsorted. ' +
+        'Filtering is per-column — each column opts in via filterable:true, which adds a dropdown button above the table. ' +
+        'Each dropdown is searchable and multi-select: a search input filters the option list, and each option is a checkbox that toggles membership in the active set. ' +
+        'Filtering uses set-membership: a row passes if its column value is included in the selected values array. ' +
+        'A "Clear selection" link inside each dropdown clears that column; a "Clear all" button in the bar appears when any filter is active. ' +
+        'Filter → sort → paginate is the fixed pipeline order; any filter change resets the page to 0. ' +
         'Pagination is either controlled (page prop + onPageChange) or uncontrolled (internal state). ' +
         'A pageSize of 0 disables pagination entirely, useful when the parent manages windowing. ' +
-        'Column filtering is intentionally excluded here (see DataTable Filter issue #52) to keep the API focused. ' +
         'Row hover uses bg-subtle, not a border change, so the visual weight stays low for dense data views.',
     props: [
         {
             name: 'columns',
             type: 'array',
             required: true,
-            description: 'Column definitions. Each column has a key, header, optional render function, optional sortable flag, optional width, and optional text align.',
+            description: 'Column definitions. Each column has a key, header, optional render function, optional sortable flag, optional filterable flag (renders a text filter input below the header), optional width, and optional text align.',
         },
         {
             name: 'rows',
@@ -41,7 +45,13 @@ export const COMPONENT_MANIFEST = {
             name: 'onPageChange',
             type: 'function',
             required: false,
-            description: 'Called with the new page index whenever the page changes (from pagination controls or after a sort reset).',
+            description: 'Called with the new page index whenever the page changes (from pagination controls or after a sort/filter reset).',
+        },
+        {
+            name: 'onFilterChange',
+            type: 'function',
+            required: false,
+            description: 'Called with the current filter map (Record<string, string[]>) whenever any column filter changes. Keys are column keys; columns with no selection are omitted from the map.',
         },
         {
             name: 'emptyState',
@@ -66,6 +76,18 @@ export const COMPONENT_MANIFEST = {
     { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> },
   ]}
   rows={users}
+/>`,
+        },
+        {
+            title: 'Sortable + filterable table',
+            code: `<DataTable
+  columns={[
+    { key: 'name', header: 'Name', sortable: true, filterable: true },
+    { key: 'role', header: 'Role', filterable: true },
+    { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> },
+  ]}
+  rows={users}
+  onFilterChange={(filters) => console.log(filters)}
 />`,
         },
         {

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

@@ -54,6 +54,13 @@ export const ButtonManifest = {
             default: 'false',
             description: 'Stretches the button to fill its container width.',
         },
+        {
+            name: 'bordered',
+            type: 'boolean',
+            required: false,
+            default: 'true',
+            description: 'When false removes the button border entirely, producing a flat look.',
+        },
         {
             name: 'leftIcon',
             type: 'ReactNode',
@@ -106,6 +113,10 @@ export const ButtonManifest = {
             title: 'Full-width submit',
             code: `<Button variant="primary" type="submit" fullWidth>Sign in</Button>`,
         },
+        {
+            title: 'Borderless primary',
+            code: `<Button variant="primary" bordered={false}>Flat primary</Button>`,
+        },
     ],
     compositionGraph: [],
     accessibility: {

package/package.json

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