@ketvietlab/design-system 0.1.29 → 0.1.30

package/dist/catalogue/layering.d.ts

@@ -0,0 +1,10 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const layeringPresentations: readonly ['default', 'grouped'];
+/**
+ * LAYOUT.md L1–L2 on one page: every container on the canvas and again inside a
+ * white region, so the browser check can compare the two by computed style.
+ */
+export declare const LayeringPreview: (props: {
+    presentation: (typeof layeringPresentations)[number];
+}) => TemplateResult;
+//# sourceMappingURL=layering.d.ts.map

package/dist/catalogue/layering.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layering.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/catalogue/layering.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAStE,eAAO,MAAM,qBAAqB,YAAI,SAAS,EAAE,SAAS,CAAU,CAAA;AAwDpE;;;GAGG;AACH,eAAO,MAAM,eAAe,UAAW;IACrC,YAAY,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;CACrD,KAAG,cAkHH,CAAA"}

package/dist/catalogue/layering.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { ContentCard, Disclosure, Grid, Metric, Section, Stack, Surface } from '../layouts/index.js';
+import { Field } from '../primitives/field.js';
+import { Notice } from '../primitives/feedback.js';
+import { DataTable } from '../patterns/data-table.js';
+import { ModalSheet } from '../patterns/modal-sheet.js';
+import { RecordForm } from '../patterns/record-form.js';
+import { DescriptionList } from '../record/display/index.js';
+export const layeringPresentations = ['default', 'grouped'];
+const rows = [
+    { id: 'serum', name: 'Serum 30ml', range: '35–55 days' },
+    { id: 'cream', name: 'Cream 50g', range: '45–75 days' },
+];
+const table = (title) => (_jsx(DataTable, { title: title, rows: rows, id: (row) => row.id, columns: [
+        { key: 'name', label: 'Product', cell: (row) => row.name },
+        { key: 'range', label: 'Reference range', cell: (row) => row.range },
+    ] }));
+const fields = (prefix) => (_jsx(Grid, { columns: 2, items: [
+        _jsx(Field, { id: `${prefix}-name`, label: "Name", name: "name", value: "Barrier repair" }),
+        _jsx(Field, { id: `${prefix}-start`, label: "Start date", name: "start", type: "date", value: "2026-09-01" }),
+    ] }));
+/** One form, drawn in a wide surface and in a record-aside-sized column (LAYOUT.md L7). */
+const noteForm = (prefix) => (_jsx(RecordForm, { action: "#layering", submitLabel: "Save", fields: [
+        { id: `${prefix}-subject`, name: 'subject', label: 'Subject', value: 'Follow-up call', span: 'full' },
+        { id: `${prefix}-note`, name: 'note', label: 'Note', type: 'textarea', value: '', span: 'full' },
+    ] }));
+/** Bare fields stacked in a panel, with no record form around them (LAYOUT.md L7). */
+const panelFields = (prefix) => (_jsx(Stack, { items: [
+        _jsx(Field, { id: `${prefix}-path`, label: "Path", name: "path", value: "/en/careers" }),
+        _jsx(Field, { id: `${prefix}-note`, label: "Note", name: "note", type: "textarea", value: "" }),
+    ] }));
+/** Tags a specimen so the browser check can find it; the tag carries no style. */
+const Case = (props) => (_jsx("div", { "data-layering-case": props.name, children: props.body }));
+/**
+ * LAYOUT.md L1–L2 on one page: every container on the canvas and again inside a
+ * white region, so the browser check can compare the two by computed style.
+ */
+export const LayeringPreview = (props) => (_jsx("div", { "data-kv-design-system": true, "data-theme": "light", "data-presentation": props.presentation === 'grouped' ? 'grouped' : null, style: "padding: 12px; background: var(--kv-page-bg)", children: _jsx(Stack, { items: [
+            _jsx(Case, { name: "canvas-surface", body: _jsx(Surface, { title: "On the canvas", body: fields('layering-1') }) }),
+            _jsx(Case, { name: "wide-form", body: _jsx(Surface, { title: "A wide form", body: noteForm('layering-wide') }) }),
+            _jsx(Case, { name: "narrow-form", body: _jsx("div", { style: "max-inline-size: 20rem", children: _jsx(Surface, { title: "A narrow column", body: noteForm('layering-narrow') }) }) }),
+            _jsx(Case, { name: "narrow-panel", body: _jsx("div", { style: "max-inline-size: 20rem", children: _jsx(Surface, { title: "A side panel", body: panelFields('layering-panel') }) }) }),
+            _jsx(Case, { name: "canvas-table", body: table('Titled table on the canvas') }),
+            _jsx(Case, { name: "canvas-metric", body: _jsx(Metric, { label: "Open", value: 12 }) }),
+            _jsx(Case, { name: "surface-in-surface", body: _jsx(Surface, { title: "Outer surface", body: _jsx(Surface, { title: "Nested surface", description: "Renders as a section.", body: fields('layering-2') }) }) }),
+            _jsx(Case, { name: "modal", body: _jsx(ModalSheet, { id: "layering-modal", mode: "embedded", title: "Routine", closeLabel: "Close", size: "large", body: _jsx(Stack, { items: [
+                            _jsx(Notice, { title: "Reference only", message: "Ranges never create a schedule.", tone: "info" }),
+                            _jsx(Case, { name: "modal-table", body: table('Products from the order') }),
+                            _jsx(Case, { name: "modal-untitled-table", body: table() }),
+                            _jsx(Case, { name: "modal-surface", body: _jsx(Surface, { title: "Routine", body: fields('layering-3') }) }),
+                            _jsx(Case, { name: "modal-well", body: _jsx(Surface, { tone: "subtle", body: _jsx("p", { children: "Customer said the serum stings." }) }) }),
+                            _jsx(Case, { name: "modal-section", body: _jsx(Section, { title: "Next care", body: fields('layering-4') }) }),
+                            _jsx(Case, { name: "modal-divided", body: _jsx(Stack, { divided: true, items: [
+                                        _jsx(Section, { title: "Outcome", body: _jsx("p", { children: "Reached the customer." }) }),
+                                        _jsx(Section, { title: "Product feedback", body: _jsx("p", { children: "Serum suits her skin." }) }),
+                                    ] }) }),
+                            _jsx(Case, { name: "modal-disclosure", body: _jsx(Disclosure, { summary: "More detail", body: fields('layering-5') }) }),
+                            _jsx(Case, { name: "modal-metric", body: _jsx(Metric, { label: "Uses a day", value: 2 }) }),
+                            _jsx(Case, { name: "modal-card", body: _jsx(ContentCard, { title: "Serum 30ml", summary: "An object keeps its boundary." }) }),
+                            _jsx(Case, { name: "modal-strip", body: _jsx(DescriptionList, { layout: "strip", items: [
+                                        { id: 'due', label: 'Due', value: '03/09 09:00' },
+                                        { id: 'sla', label: 'SLA', value: 'Overdue' },
+                                        { id: 'owner', label: 'Owner', value: 'Ngoc Anh' },
+                                    ] }) }),
+                        ] }) }) }),
+        ] }) }));
+//# sourceMappingURL=layering.js.map

package/dist/catalogue/layering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layering.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/catalogue/layering.tsx"],"names":[],"mappings":"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"}

package/dist/catalogue/primitives.css

@@ -0,0 +1,77 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="primitive-harness"] {
+    display: grid;
+    gap: var(--kv-space-10);
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-section"] {
+    min-width: 0;
+    scroll-margin-top: var(--kv-space-6);
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-section-head"] {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--kv-space-2) var(--kv-space-3);
+    padding-bottom: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-section-head"] h2 {
+    margin: 0;
+    font-size: var(--kv-text-lg);
+    font-weight: var(--kv-weight-semibold);
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-section-head"] span {
+    color: var(--kv-text-muted);
+    font-family: var(--kv-font-mono);
+    font-size: var(--kv-text-xs);
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-section-head"] span:last-child {
+    flex-basis: 100%;
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-row"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+    align-items: start;
+    gap: var(--kv-space-6);
+    padding-block: var(--kv-space-5);
+    border-top: 1px solid var(--kv-color-line);
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-caption"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-caption"] h3 {
+    margin: 0 0 var(--kv-space-1);
+    font-size: var(--kv-text-sm);
+    font-weight: var(--kv-weight-medium);
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-caption"] p {
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    line-height: var(--kv-leading-relaxed);
+  }
+
+  :where([data-kv-design-system]) [data-ui="primitive-sample"] {
+    min-width: 0;
+  }
+
+  @media (max-width: 63.9375rem) {
+    :where([data-kv-design-system]) [data-ui="primitive-section"] {
+      scroll-margin-top: calc(var(--kv-space-16) + var(--kv-space-4));
+    }
+
+    :where([data-kv-design-system]) [data-ui="primitive-row"] {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--kv-space-3);
+    }
+  }
+}

package/dist/catalogue/primitives.d.ts

@@ -0,0 +1,34 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const primitiveSections: readonly [{
+    readonly id: 'actions';
+    readonly label: 'Actions';
+    readonly components: readonly ['ActionGroup', 'Button', 'IconButton', 'LinkButton'];
+}, {
+    readonly id: 'status';
+    readonly label: 'Status & identity';
+    readonly components: readonly ['Avatar', 'Badge', 'Code', 'CountBadge', 'MediaLabel', 'Tag', 'Text'];
+}, {
+    readonly id: 'fields';
+    readonly label: 'Fields';
+    readonly components: readonly ['Field'];
+}, {
+    readonly id: 'navigation';
+    readonly label: 'Navigation';
+    readonly components: readonly ['Breadcrumbs', 'NavItem', 'NavList', 'Tab', 'TabPanel', 'TabbedView', 'Tabs'];
+}, {
+    readonly id: 'feedback';
+    readonly label: 'Feedback';
+    readonly components: readonly ['EmptyState', 'LoadingState', 'Notice'];
+}, {
+    readonly id: 'progress';
+    readonly label: 'Progress';
+    readonly components: readonly ['Progress'];
+}];
+export type PrimitiveHarnessProps = {
+    theme?: 'light' | 'dark' | 'system';
+    density?: 'compact' | 'default' | 'comfortable';
+    tab?: 'overview' | 'activity';
+};
+/** A render-pure comparison surface. Every sample uses the public component contract. */
+export declare const PrimitiveHarness: (props?: PrimitiveHarnessProps) => TemplateResult;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/catalogue/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/catalogue/primitives.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAY,cAAc,EAAE,MAAM,wBAAwB,CAAA;AA2BtE,eAAO,MAAM,iBAAiB;aAC1B,EAAE,EAAE,SAAS;aAAE,KAAK,EAAE,SAAS;aAAE,UAAU,YAAG,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY;;aAEjG,EAAE,EAAE,QAAQ;aACZ,KAAK,EAAE,mBAAmB;aAC1B,UAAU,YAAG,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM;;aAEjF,EAAE,EAAE,QAAQ;aAAE,KAAK,EAAE,QAAQ;aAAE,UAAU,YAAG,OAAO;;aAEnD,EAAE,EAAE,YAAY;aAChB,KAAK,EAAE,YAAY;aACnB,UAAU,YAAG,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM;;aAEzF,EAAE,EAAE,UAAU;aAAE,KAAK,EAAE,UAAU;aAAE,UAAU,YAAG,YAAY,EAAE,cAAc,EAAE,QAAQ;;aACtF,EAAE,EAAE,UAAU;aAAE,KAAK,EAAE,UAAU;aAAE,UAAU,YAAG,UAAU;EACpD,CAAA;AA2BV,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;IAC/C,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAC9B,CAAA;AAED,yFAAyF;AACzF,eAAO,MAAM,gBAAgB,WAAW,qBAAqB,KAAQ,cA0XpE,CAAA"}

package/dist/catalogue/primitives.js

@@ -0,0 +1,149 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { ActionGroup, Avatar, Badge, Breadcrumbs, Button, Code, CountBadge, EmptyState, Field, IconButton, Inline, LinkButton, LoadingState, MediaLabel, NavList, Notice, Progress, Select, Stack, TabbedView, Tabs, Tag, Text, } from '../index.js';
+export const primitiveSections = [
+    { id: 'actions', label: 'Actions', components: ['ActionGroup', 'Button', 'IconButton', 'LinkButton'] },
+    {
+        id: 'status',
+        label: 'Status & identity',
+        components: ['Avatar', 'Badge', 'Code', 'CountBadge', 'MediaLabel', 'Tag', 'Text'],
+    },
+    { id: 'fields', label: 'Fields', components: ['Field'] },
+    {
+        id: 'navigation',
+        label: 'Navigation',
+        components: ['Breadcrumbs', 'NavItem', 'NavList', 'Tab', 'TabPanel', 'TabbedView', 'Tabs'],
+    },
+    { id: 'feedback', label: 'Feedback', components: ['EmptyState', 'LoadingState', 'Notice'] },
+    { id: 'progress', label: 'Progress', components: ['Progress'] },
+];
+const Row = (props) => (_jsxs("div", { "data-ui": "primitive-row", children: [_jsxs("div", { "data-ui": "primitive-caption", children: [_jsx("h3", { children: props.label }), _jsx("p", { children: props.detail })] }), _jsx("div", { "data-ui": "primitive-sample", children: props.children })] }));
+const Plus = () => (_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M8 3v10M3 8h10" }) }));
+/** A render-pure comparison surface. Every sample uses the public component contract. */
+export const PrimitiveHarness = (props = {}) => {
+    const href = (tab) => `/primitives?theme=${props.theme ?? 'system'}&density=${props.density ?? 'default'}&tab=${tab}#primitive-navigation`;
+    const tab = props.tab ?? 'overview';
+    const specimens = {
+        actions: (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Hierarchy", detail: "One height, four levels of emphasis.", children: _jsx(ActionGroup, { label: "Action hierarchy", actions: [
+                            _jsx(Button, { label: "Create project", variant: "primary", leading: _jsx(Plus, {}) }),
+                            _jsx(Button, { label: "Save draft" }),
+                            _jsx(Button, { label: "View details", variant: "tertiary" }),
+                            _jsx(Button, { label: "Archive", variant: "destructive" }),
+                        ] }) }), _jsx(Row, { label: "States", detail: "Resting, unavailable and in progress.", children: _jsx(ActionGroup, { label: "Action states", actions: [
+                            _jsx(Button, { label: "Save changes", variant: "primary" }),
+                            _jsx(Button, { label: "Save changes", variant: "primary", disabled: true }),
+                            _jsx(Button, { label: "Saving changes", variant: "primary", loading: true }),
+                            _jsx(LinkButton, { label: "Opening project", href: "#primitive-actions", loading: true }),
+                        ] }) }), _jsx(Row, { label: "Sizes & icons", detail: "Matched text and icon targets at each size.", children: _jsx(Inline, { items: ['compact', 'default', 'prominent'].map((size) => (_jsx(ActionGroup, { label: `${size} actions`, actions: [
+                                _jsx(Button, { label: size[0].toUpperCase() + size.slice(1), size: size }),
+                                _jsx(IconButton, { label: `Add project · ${size}`, icon: _jsx(Plus, {}), size: size, variant: "secondary" }),
+                            ] }))) }) }), _jsx(Row, { label: "Long labels", detail: "Narrow layouts retain the icon and contain the label.", children: _jsx(ActionGroup, { label: "Long action labels", actions: [
+                            _jsx(Button, { label: "Create a project for the regional operations team", leading: _jsx(Plus, {}) }),
+                            _jsx(LinkButton, { label: "Browse components", href: "/components", variant: "tertiary", leading: "\u2197" }),
+                        ] }) })] })),
+        status: (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Semantic tones", detail: "Quiet surfaces with readable, explicit labels.", children: _jsx(Inline, { items: [
+                            _jsx(Badge, { label: "Draft" }),
+                            _jsx(Badge, { label: "In progress", tone: "info" }),
+                            _jsx(Badge, { label: "Approved", tone: "positive" }),
+                            _jsx(Badge, { label: "Needs review", tone: "warning" }),
+                            _jsx(Badge, { label: "Overdue", tone: "danger" }),
+                        ] }) }), _jsx(Row, { label: "Tags & counts", detail: "Categories, removable filters and exact totals.", children: _jsx(Inline, { items: [
+                            _jsx(Tag, { label: "Operations" }),
+                            _jsx(Tag, { label: "H\u00E0 N\u1ED9i", removeHref: "#primitive-status", removeLabel: "Remove H\u00E0 N\u1ED9i filter specimen" }),
+                            _jsx(CountBadge, { count: 0, label: "No pending items" }),
+                            _jsx(CountBadge, { count: 128, label: "128 pending items" }),
+                            _jsx(Text, { tone: "muted", children: "Updated just now" }),
+                        ] }) }), _jsx(Row, { label: "Identity", detail: "Three sizes with Vietnamese name fallbacks.", children: _jsx(Inline, { items: [
+                            _jsx(Avatar, { name: "Nguy\u1EC5n Minh Ch\u00E2u", size: "small" }),
+                            _jsx(Avatar, { name: "Nguy\u1EC5n Minh Ch\u00E2u" }),
+                            _jsx(Avatar, { name: "Nguy\u1EC5n Minh Ch\u00E2u", size: "large" }),
+                            _jsx(MediaLabel, { label: "Nguy\u1EC5n Minh Ch\u00E2u \u00B7 Operations" }),
+                            _jsx(Code, { value: "PRJ-0042", context: "project" }),
+                        ] }) }), _jsx(Row, { label: "Content pressure", detail: "Long names, unbroken identifiers and reserved media.", children: _jsx(Stack, { gap: "compact", items: [
+                            _jsx(MediaLabel, { label: "Regional operations \u00B7 Th\u00E0nh ph\u1ED1 H\u1ED3 Ch\u00ED Minh \u00B7 Planning and coordination", reserveImage: true }),
+                            _jsx(Tag, { label: "regional-operations-planning-and-coordination-vietnam-2026", removeHref: "#primitive-status" }),
+                            _jsx(Badge, { label: "Awaiting approval from the regional operations coordinator", tone: "warning" }),
+                            _jsx(Code, { value: "workspace_vietnam_regional_operations_planning_2026_000042" }),
+                        ] }) })] })),
+        fields: (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Text & selection", detail: "Shared label column and aligned control edges.", children: _jsx(Stack, { gap: "compact", items: [
+                            _jsx(Field, { id: "primitive-name", name: "project", label: "Project name", value: "Regional operations", required: true }),
+                            _jsx(Select, { id: "primitive-region", name: "region", label: "Region", value: "hn", options: [
+                                    { value: 'hn', label: 'Hà Nội' },
+                                    { value: 'hcm', label: 'Thành phố Hồ Chí Minh' },
+                                ] }),
+                            _jsx(Field, { id: "primitive-description", name: "description", label: "Description", type: "textarea", placeholder: "Add a short description\u2026", help: "Visible to everyone in this project." }),
+                        ] }) }), _jsx(Row, { label: "Validation & access", detail: "Help, error, read-only and disabled states.", children: _jsx(Stack, { gap: "compact", items: [
+                            _jsx(Field, { id: "primitive-email", name: "email", label: "Contact email", type: "email", value: "chau@", required: true, help: "Use your work email.", error: "Enter a complete email address." }),
+                            _jsx(Field, { id: "primitive-reference", name: "reference", label: "Reference", value: "PRJ-0042", readOnly: true, help: "Assigned automatically." }),
+                            _jsx(Field, { id: "primitive-owner", name: "owner", label: "Owner", value: "Nguy\u1EC5n Minh Ch\u00E2u", disabled: true }),
+                        ] }) }), _jsx(Row, { label: "Select states", detail: "Consistent chevron inset, long values and native selection.", children: _jsx(Stack, { gap: "compact", items: [
+                            _jsx(Select, { id: "primitive-select-long", name: "coordination", label: "Coordination", value: "regional", options: [
+                                    { value: 'regional', label: 'Regional planning and coordination · Thành phố Hồ Chí Minh' },
+                                    { value: 'local', label: 'Local operations' },
+                                ] }),
+                            _jsx(Select, { id: "primitive-select-invalid", name: "priority", label: "Priority", value: "", required: true, error: "Choose a priority.", options: [
+                                    { value: '', label: 'Choose a priority…', disabled: true },
+                                    { value: 'normal', label: 'Normal' },
+                                    { value: 'urgent', label: 'Urgent' },
+                                ] }),
+                            _jsx(Select, { id: "primitive-select-disabled", name: "workspace", label: "Workspace", value: "vietnam", disabled: true, options: [{ value: 'vietnam', label: 'Vietnam operations' }] }),
+                        ] }) }), _jsx(Row, { label: "Choices", detail: "Native keyboard interaction and wrapping labels.", children: _jsx(Stack, { gap: "compact", items: [
+                            _jsx(Field, { id: "primitive-notify", name: "notify", label: "Send updates", type: "checkbox", value: true }),
+                            _jsx(Field, { id: "primitive-access", name: "access", label: "Access", type: "radio", value: "team", options: [
+                                    { value: 'team', label: 'Team' },
+                                    { value: 'private', label: 'Private' },
+                                    { value: 'public', label: 'Public', disabled: true },
+                                ] }),
+                            _jsx(Field, { id: "primitive-channels", name: "channels", label: "Channels", type: "checkbox-group", optionsOrientation: "vertical", options: [
+                                    { value: 'email', label: 'Email notifications', checked: true },
+                                    { value: 'digest', label: 'Weekly summary for the regional operations team' },
+                                ] }),
+                        ] }) })] })),
+        navigation: (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Location", detail: "Collapsed ancestors remain native links.", children: _jsx(Breadcrumbs, { label: "Project location", maxItems: 3, overflowLabel: "Show parent locations", items: [
+                            { label: 'Workspace', href: '#primitive-navigation' },
+                            { label: 'Operations', href: '#primitive-navigation' },
+                            { label: 'Vietnam', href: '#primitive-navigation' },
+                            { label: 'Regional planning' },
+                        ] }) }), _jsx(Row, { label: "Navigation list", detail: "The active route and counts share a clear baseline.", children: _jsx(NavList, { label: "Project sections", items: [
+                            { label: 'Overview', href: href('overview'), active: tab === 'overview', leading: '◇' },
+                            {
+                                label: 'Activity',
+                                href: href('activity'),
+                                active: tab === 'activity',
+                                leading: '≡',
+                                count: 12,
+                            },
+                        ] }) }), _jsx(Row, { label: "Route tabs", detail: "Real URL-backed tabs with an associated panel.", children: _jsx(TabbedView, { id: "primitive-project", label: "Project views", items: [
+                            { id: 'overview', label: 'Overview', href: href('overview'), active: tab === 'overview' },
+                            {
+                                id: 'activity',
+                                label: 'Activity',
+                                href: href('activity'),
+                                active: tab === 'activity',
+                                count: 12,
+                            },
+                        ], body: _jsx(Text, { children: tab === 'overview'
+                                ? 'A shared workspace for the regional operations team.'
+                                : 'Nguyễn Minh Châu updated the project description.' }) }) })] })),
+        feedback: (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Notices", detail: "Information, success, warning and recovery.", children: _jsx(Stack, { gap: "compact", items: [
+                            _jsx(Notice, { title: "Scheduled", message: "Your report will be ready tomorrow." }),
+                            _jsx(Notice, { title: "Saved", message: "All changes are up to date.", tone: "positive" }),
+                            _jsx(Notice, { title: "Review needed", message: "Two projects are missing an owner.", tone: "warning" }),
+                            _jsx(Notice, { title: "Unable to sync", message: "Check the connection before trying again.", tone: "danger", actions: _jsx(LinkButton, { label: "Review connection", href: "#primitive-fields", size: "compact" }) }),
+                        ] }) }), _jsx(Row, { label: "Empty", detail: "A useful next step with restrained emphasis.", children: _jsx(EmptyState, { title: "No projects yet", message: "Create a project to bring your team\u2019s work together.", actions: _jsx(LinkButton, { label: "Explore actions", href: "#primitive-actions", size: "compact" }) }) }), _jsx(Row, { label: "Loading", detail: "A named live region and decorative skeletons.", children: _jsx(LoadingState, { label: "Loading project activity", lines: 3 }) })] })),
+        progress: (_jsx(Row, { label: "Completion", detail: "Zero, partial, complete and text-free tracks.", children: _jsx(Stack, { gap: "loose", items: [
+                    _jsx(Progress, { label: "Not started", value: 0 }),
+                    _jsx(Progress, { label: "Project completion", value: 64 }),
+                    _jsx(Progress, { label: "Review in progress", value: 38, tone: "warning" }),
+                    _jsx(Progress, { label: "Overdue tasks", value: 16, tone: "danger" }),
+                    _jsx(Progress, { label: "All tasks complete", value: 100, tone: "positive" }),
+                    _jsx(Progress, { label: "Background preparation", value: 72, showValue: false }),
+                ] }) })),
+    };
+    return (_jsxs("div", { "data-ui": "primitive-harness", children: [_jsx(Tabs, { label: "Primitive families", items: primitiveSections.map((section) => ({
+                    id: section.id,
+                    label: section.label,
+                    href: `#primitive-${section.id}`,
+                })) }), each(primitiveSections, (section) => section.id, (section, index) => (_jsxs("section", { "data-ui": "primitive-section", id: `primitive-${section.id}`, "aria-labelledby": `primitive-${section.id}-title`, children: [_jsxs("header", { "data-ui": "primitive-section-head", children: [_jsx("span", { "aria-hidden": "true", children: String(index + 1).padStart(2, '0') }), _jsx("h2", { id: `primitive-${section.id}-title`, children: section.label }), _jsx("span", { children: section.components.join(' · ') })] }), specimens[section.id]] })))] }));
+};
+//# sourceMappingURL=primitives.js.map

package/dist/catalogue/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/catalogue/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/catalogue/specimens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"specimens.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/catalogue/specimens.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAkB,MAAM,wBAAwB,CAAA;AAsFtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,QAAQ,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAA;CACtC,CAAA;AAqND,eAAO,MAAM,eAAe,EAAE,SAAS,cAAc,EA6oEpD,CAAA"}
+{"version":3,"file":"specimens.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/catalogue/specimens.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAkB,MAAM,wBAAwB,CAAA;AAuFtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,QAAQ,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAA;CACtC,CAAA;AAqND,eAAO,MAAM,eAAe,EAAE,SAAS,cAAc,EA6nEpD,CAAA"}

package/dist/catalogue/specimens.js

@@ -33,7 +33,8 @@ import { createKetTableView, KetTable } from '../interactions/ket-table/index.js
 import { ketTableDemoConfig, ketTableGroupedDemoConfig } from '../interactions/ket-table/demo.js';
 import { Checkbox, CheckboxGroup, MoneyField, NumberField, RadioGroup, SearchField, Select, Switch, TextArea, TextField, } from '../forms/scalar-fields/index.js';
 import { Combobox, MultiCombobox, TagPicker } from '../forms/combobox/index.js';
-import { DatePicker, DateRangePicker, DateTimePicker, TimePicker } from '../forms/date-time/index.js';
+import { DatePickerExamples } from './date-pickers.js';
+import { DateTimePicker, TimePicker } from '../forms/date-time/index.js';
 import { DropZone, FileUpload } from '../forms/upload/index.js';
 import { RelationPicker } from '../forms/relation-picker/index.js';
 import { AppliedFilters, FilterBar, SavedViews, SearchBar, SortMenu, ViewSettings, } from '../data-operations/list-controls/index.js';
@@ -478,7 +479,7 @@ export const componentGroups = [
                 id: 'app-navigation',
                 name: 'Responsive application navigation',
                 description: 'One navigation model becomes a persistent desktop sidebar and an accessible mobile drawer.',
-                render: () => (_jsx(DemoShell, { active: "collection", main: _jsx(Page, { title: "Operations overview", description: "Resize below 768 px to review the mobile trigger and drawer.", body: _jsx(Grid, { columns: 2, items: [
+                render: () => (_jsx(DemoShell, { active: "collection", main: _jsx(Page, { title: "Operations overview", body: _jsx(Grid, { columns: 2, items: [
                                 _jsx(Metric, { label: "Open orders", value: "148", detail: "12 need attention" }),
                                 _jsx(Metric, { label: "Ready to invoice", value: "91", detail: "Updated just now" }),
                             ] }) }) })),
@@ -487,7 +488,7 @@ export const componentGroups = [
                 id: 'app-shell',
                 name: 'Collection shell',
                 description: 'A full list workspace with sidebar navigation, URL-owned list chrome, selectable rows and a context rail.',
-                render: () => (_jsx(DemoShell, { active: "collection", main: _jsx(ListPage, { variant: "operational", context: "Sales / Sales orders", title: "Sales orders", description: "Review demand, fulfillment and payment state from one operational list.", headerActions: _jsx(Button, { label: "Create order", variant: "primary" }), actionsPlacement: "header", actionsHidden: true, actions: _jsx(BulkActions, { selectedCount: 0, actions: [{ id: 'archive', label: 'Archive selected' }] }), controls: _jsx(ListDemoChrome, { id: "app-shell" }), body: _jsx(OrdersTable, { title: "Order list" }) }), railTitle: "List health", railDetail: "Seven orders need a human decision before invoicing.", railProgress: 72, railItems: [
+                render: () => (_jsx(DemoShell, { active: "collection", main: _jsx(ListPage, { variant: "operational", context: "Sales / Sales orders", title: "Sales orders", headerActions: _jsx(Button, { label: "Create order", variant: "primary" }), actionsPlacement: "header", actionsHidden: true, actions: _jsx(BulkActions, { selectedCount: 0, actions: [{ id: 'archive', label: 'Archive selected' }] }), controls: _jsx(ListDemoChrome, { id: "app-shell" }), body: _jsx(OrdersTable, { title: "Order list" }) }), railTitle: "List health", railDetail: "Seven orders need a human decision before invoicing.", railProgress: 72, railItems: [
                         _jsx(Badge, { label: "91 ready", tone: "positive" }),
                         _jsx(Badge, { label: "7 review", tone: "warning" }),
                     ] })),
@@ -496,7 +497,7 @@ export const componentGroups = [
                 id: 'record-page',
                 name: 'Record shell',
                 description: 'A durable subject with record identity, tabs, form content and a right-hand facts rail.',
-                render: () => (_jsx(DemoShell, { active: "record", main: _jsx(RecordPage, { variant: "operational", context: "Customers / M\u00F9a H\u1EA1 Riverside", title: "M\u00F9a H\u1EA1 Riverside", description: "Customer \u00B7 CUS-0042", status: _jsx(Badge, { label: "Active", tone: "positive" }), actions: _jsx(ActionGroup, { actions: [
+                render: () => (_jsx(DemoShell, { active: "record", main: _jsx(RecordPage, { variant: "operational", context: "Customers / M\u00F9a H\u1EA1 Riverside", title: "M\u00F9a H\u1EA1 Riverside", status: _jsx(Badge, { label: "Active", tone: "positive" }), actions: _jsx(ActionGroup, { actions: [
                                 _jsx(Button, { label: "Save", variant: "primary", size: "compact" }),
                                 _jsx(Button, { label: "Archive", variant: "tertiary", size: "compact" }),
                             ] }), navigation: _jsx(Tabs, { label: "Customer record", items: [
@@ -542,7 +543,7 @@ export const componentGroups = [
                 id: 'workspace-flow',
                 name: 'Flow workspace',
                 description: 'A vertical operations overview where metrics, process state and exception lists sit on one grey canvas.',
-                render: () => (_jsx(DemoShell, { active: "flow", main: _jsx(WorkspacePage, { variant: "operational", layout: "flow", context: "Sales / Overview", title: "Revenue operations", description: "Follow confirmed demand, open work and handoffs across the team.", actions: _jsx(Button, { label: "Create quotation", variant: "primary" }), controls: _jsx(ActionGroup, { label: "Flow controls", actions: [
+                render: () => (_jsx(DemoShell, { active: "flow", main: _jsx(WorkspacePage, { variant: "operational", layout: "flow", context: "Sales / Overview", title: "Revenue operations", actions: _jsx(Button, { label: "Create quotation", variant: "primary" }), controls: _jsx(ActionGroup, { label: "Flow controls", actions: [
                                 _jsx(LinkButton, { label: "Today", href: "#workspace-flow", size: "compact" }),
                                 _jsx(LinkButton, { label: "This week", href: "#workspace-flow", size: "compact", variant: "tertiary" }),
                             ] }), body: _jsx(Stack, { gap: "loose", items: [
@@ -565,7 +566,7 @@ export const componentGroups = [
                 id: 'workspace-canvas',
                 name: 'Canvas workspace',
                 description: 'A horizontal board-style surface where the main content can scroll without changing the shell.',
-                render: () => (_jsx(DemoShell, { active: "canvas", main: _jsx(WorkspacePage, { variant: "operational", layout: "canvas", context: "CRM / Pipeline", title: "Opportunities board", description: "Move active opportunities through a spatial workflow.", actions: _jsx(Button, { label: "Create opportunity", variant: "primary" }), controls: _jsx(Inline, { items: [
+                render: () => (_jsx(DemoShell, { active: "canvas", main: _jsx(WorkspacePage, { variant: "operational", layout: "canvas", context: "CRM / Pipeline", title: "Opportunities board", actions: _jsx(Button, { label: "Create opportunity", variant: "primary" }), controls: _jsx(Inline, { items: [
                                 _jsx(LinkButton, { label: "My pipeline", href: "#workspace-canvas", size: "compact" }),
                                 _jsx(LinkButton, { label: "All teams", href: "#workspace-canvas", size: "compact", variant: "tertiary" }),
                                 _jsx(Tag, { label: "High value", removeHref: "#workspace-canvas", removeLabel: "Remove filter" }),
@@ -674,7 +675,7 @@ export const componentGroups = [
                 id: 'list-page',
                 name: 'List page',
                 description: 'The canonical collection hierarchy: identity with primary actions, URL-driven controls, tool actions and records.',
-                render: () => (_jsx(ListPage, { variant: "operational", context: "Sales / Sales orders", eyebrow: "Sales", title: "Sales orders", description: "Review demand, fulfillment and payment state from one operational list.", headerActions: _jsx(Button, { label: "Create order", variant: "primary" }), actions: _jsx(Button, { label: "Export orders", variant: "secondary" }), controls: _jsx(ListChrome, { search: {
+                render: () => (_jsx(ListPage, { variant: "operational", context: "Sales / Sales orders", eyebrow: "Sales", title: "Sales orders", headerActions: _jsx(Button, { label: "Create order", variant: "primary" }), actions: _jsx(Button, { label: "Export orders", variant: "secondary" }), controls: _jsx(ListChrome, { search: {
                             id: 'orders-query',
                             action: '#list-page',
                             value: 'Mùa Hạ',
@@ -735,7 +736,7 @@ export const componentGroups = [
                 id: 'dashboard-page',
                 name: 'Dashboard page',
                 description: 'The canonical overview hierarchy: durable context, compact identity, primary action and an uninterrupted analytical canvas.',
-                render: () => (_jsx(DashboardPage, { variant: "operational", context: "Sales / Overview", eyebrow: "Commercial workspace", title: "Sales overview", description: "Follow demand, confirmed revenue and the work waiting for the team.", actions: _jsx(Button, { label: "Create quotation", variant: "primary" }), body: _jsx(Stack, { gap: "loose", items: [
+                render: () => (_jsx(DashboardPage, { variant: "operational", context: "Sales / Overview", eyebrow: "Commercial workspace", title: "Sales overview", actions: _jsx(Button, { label: "Create quotation", variant: "primary" }), body: _jsx(Stack, { gap: "loose", items: [
                             _jsx(Grid, { columns: 4, items: [
                                     _jsx(Metric, { label: "Quotations", value: 24, detail: "5 new today" }),
                                     _jsx(Metric, { label: "Sent", value: 9, detail: "Awaiting a reply", tone: "info" }),
@@ -754,7 +755,7 @@ export const componentGroups = [
                 id: 'board-page',
                 name: 'Board page',
                 description: 'The canonical horizontal workspace: durable context, compact identity, global controls and an uninterrupted board canvas.',
-                render: () => (_jsx(BoardPage, { variant: "operational", context: "CRM / Pipeline", eyebrow: "Pipeline", title: "Sales opportunities", description: "Move active opportunities through the sales process.", actions: _jsx(Button, { label: "Create opportunity", variant: "primary" }), controls: _jsx(ActionGroup, { label: "Board controls", actions: [
+                render: () => (_jsx(BoardPage, { variant: "operational", context: "CRM / Pipeline", eyebrow: "Pipeline", title: "Sales opportunities", actions: _jsx(Button, { label: "Create opportunity", variant: "primary" }), controls: _jsx(ActionGroup, { label: "Board controls", actions: [
                             _jsx(LinkButton, { label: "My opportunities", href: "#board-page", size: "compact" }),
                             _jsx(LinkButton, { label: "All teams", href: "#board-page", size: "compact", variant: "tertiary" }),
                         ] }), body: _jsx(Grid, { columns: 3, items: [
@@ -816,7 +817,7 @@ export const componentGroups = [
                 id: 'form-page',
                 name: 'Form page',
                 description: 'The canonical form hierarchy: record identity and decision first, a stable form column, then durable context.',
-                render: () => (_jsx(FormPage, { variant: "operational", context: "Customers / M\u00F9a H\u1EA1 Riverside", title: "M\u00F9a H\u1EA1 Riverside", description: "Customer \u00B7 CUS-0042", status: _jsx(Badge, { label: "Active", tone: "positive" }), actions: _jsx(Button, { label: "Save partner", variant: "primary" }), body: _jsx(Surface, { title: "Main information", body: _jsx(RecordForm, { action: "#form-page", fields: [
+                render: () => (_jsx(FormPage, { variant: "operational", context: "Customers / M\u00F9a H\u1EA1 Riverside", title: "M\u00F9a H\u1EA1 Riverside", status: _jsx(Badge, { label: "Active", tone: "positive" }), actions: _jsx(Button, { label: "Save partner", variant: "primary" }), body: _jsx(Surface, { title: "Main information", body: _jsx(RecordForm, { action: "#form-page", fields: [
                                 { id: 'partner-name', name: 'name', label: 'Name', value: 'Mùa Hạ Riverside' },
                                 { id: 'partner-ref', name: 'ref', label: 'Reference', value: 'CUS-0042' },
                                 {
@@ -1079,11 +1080,10 @@ export const componentGroups = [
             },
             {
                 id: 'date-time',
-                name: 'Civil date and local time',
-                description: 'Civil dates and local times submit their source text without implicit UTC conversion.',
+                name: 'Date pickers and local time',
+                description: 'Interactive calendars, seven quick ranges, draft selection and native civil-date submission. Open /dates for the focused playground.',
                 render: () => (_jsx(Stack, { items: [
-                        _jsx(DatePicker, { id: "date", name: "date", label: "Delivery date", value: "2026-09-08" }),
-                        _jsx(DateRangePicker, { id: "range", label: "Reporting period", start: { id: 'from', name: 'from', value: '2026-09-01' }, end: { id: 'to', name: 'to', value: '2026-09-30' }, startLabel: "From", endLabel: "To" }),
+                        _jsx(DatePickerExamples, {}),
                         _jsx(DateTimePicker, { id: "appointment", name: "appointment", label: "Appointment", value: "2026-09-08T14:30" }),
                         _jsx(TimePicker, { id: "cutoff", name: "cutoff", label: "Cut-off", value: "17:00" }),
                     ] })),