@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/data-operations/inline-edit/styles.css

@@ -0,0 +1,34 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="inline-edit"] {
+    display: grid;
+    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="inline-edit-value"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="inline-edit-form"] {
+    display: grid;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="inline-edit-form"] > input {
+    min-height: var(--kv-control-height);
+    padding-inline: var(--kv-space-2-5);
+    border: 1px solid var(--kv-field-border);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-input-bg);
+    color: var(--kv-input-text);
+  }
+
+  :where([data-kv-design-system]) [data-ui="inline-edit-actions"] {
+    display: flex;
+    gap: var(--kv-space-2);
+  }
+}

package/dist/data-operations/list-controls/index.d.ts

@@ -0,0 +1,67 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['search-bar', 'filter-bar', 'applied-filters', 'applied-filter', 'saved-views', 'saved-view', 'view-settings', 'view-settings-options'];
+export declare const withQueryState: (href: string, changes: Readonly<Record<string, string | number | boolean | null | undefined>>) => string;
+export type SearchBarProps = {
+    action: string;
+    value?: string | null;
+    name?: string;
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    hidden?: Readonly<Record<string, string>>;
+};
+export declare const SearchBar: (props: SearchBarProps) => TemplateResult;
+export declare const FilterBar: (props: {
+    label?: string;
+    filters: readonly JSXChild[];
+}) => TemplateResult;
+export type AppliedFilter = {
+    id: string;
+    label: string;
+    value: string;
+    removeHref: string;
+};
+export declare const AppliedFilters: (props: {
+    label?: string;
+    filters: readonly AppliedFilter[];
+    clearHref?: string;
+    clearLabel?: string;
+}) => TemplateResult;
+export type SortChoice = {
+    id: string;
+    label: string;
+    href: string;
+    active?: boolean;
+};
+export declare const SortMenu: (props: {
+    id: string;
+    label?: string;
+    choices: readonly SortChoice[];
+}) => TemplateResult;
+export type SavedView = {
+    id: string;
+    label: string;
+    href: string;
+    active?: boolean;
+    description?: string;
+};
+export declare const SavedViews: (props: {
+    label?: string;
+    views: readonly SavedView[];
+}) => TemplateResult;
+export type ViewSetting = {
+    id: string;
+    label: string;
+    visible: boolean;
+    disabled?: boolean;
+};
+export declare const ViewSettings: (props: {
+    id: string;
+    label?: string;
+    action: string;
+    settings: readonly ViewSetting[];
+    version?: string;
+    submitLabel?: string;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/data-operations/list-controls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/data-operations/list-controls/index.tsx"],"names":[],"mappings":"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"}

package/dist/data-operations/list-controls/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { Button } from '../../primitives/actions/index.js';
+import { Menu } from '../../interactions/menu/index.js';
+export const HOOKS = [
+    'search-bar',
+    'filter-bar',
+    'applied-filters',
+    'applied-filter',
+    'saved-views',
+    'saved-view',
+    'view-settings',
+    'view-settings-options',
+];
+export const withQueryState = (href, changes) => {
+    const url = new URL(href, 'http://ket.local');
+    for (const [key, value] of Object.entries(changes)) {
+        if (value === null || value === undefined || value === '')
+            url.searchParams.delete(key);
+        else
+            url.searchParams.set(key, String(value));
+    }
+    return `${url.pathname}${url.search}${url.hash}`;
+};
+export const SearchBar = (props) => (_jsxs("form", { "data-ui": "search-bar", action: props.action, method: "get", role: "search", children: [each(Object.entries(props.hidden ?? {}), ([name]) => name, ([name, value]) => (_jsx("input", { type: "hidden", name: name, value: value }))), _jsx("label", { for: props.id ?? 'resource-search', children: props.label ?? 'Search' }), _jsx("input", { id: props.id ?? 'resource-search', type: "search", name: props.name ?? 'q', value: props.value ?? '', placeholder: props.placeholder, autocomplete: "off" }), _jsx(Button, { type: "submit", label: props.submitLabel ?? 'Search', size: "compact" })] }));
+export const FilterBar = (props) => (_jsx("section", { "data-ui": "filter-bar", "aria-label": props.label ?? 'Filters', children: props.filters }));
+export const AppliedFilters = (props) => (_jsxs("nav", { "data-ui": "applied-filters", "aria-label": props.label ?? 'Applied filters', children: [each(props.filters, (filter) => filter.id, (filter) => (_jsxs("a", { "data-ui": "applied-filter", href: filter.removeHref, "aria-label": `Remove ${filter.label}: ${filter.value}`, children: [_jsx("strong", { children: filter.label }), " ", filter.value, " \u00D7"] }))), props.clearHref && _jsx("a", { href: props.clearHref, children: props.clearLabel ?? 'Clear all' })] }));
+export const SortMenu = (props) => (_jsx(Menu, { id: props.id, label: props.label ?? 'Sort', align: "end", items: props.choices.map((choice) => ({
+        id: choice.id,
+        label: `${choice.active ? '✓ ' : ''}${choice.label}`,
+        href: choice.href,
+    })) }));
+export const SavedViews = (props) => (_jsx("nav", { "data-ui": "saved-views", "aria-label": props.label ?? 'Saved views', children: each(props.views, (view) => view.id, (view) => (_jsxs("a", { "data-ui": "saved-view", href: view.href, "aria-current": view.active ? 'page' : null, children: [_jsx("strong", { children: view.label }), view.description && _jsx("small", { children: view.description })] }))) }));
+export const ViewSettings = (props) => (_jsxs("details", { "data-ui": "view-settings", children: [_jsx("summary", { children: props.label ?? 'View settings' }), _jsxs("form", { action: props.action, method: "post", children: [props.version && _jsx("input", { type: "hidden", name: "version", value: props.version }), _jsx("div", { "data-ui": "view-settings-options", children: each(props.settings, (setting) => setting.id, (setting) => (_jsxs("label", { children: [_jsx("input", { type: "checkbox", name: "columns", value: setting.id, checked: setting.visible, disabled: setting.disabled === true }), setting.label] }))) }), _jsx(Button, { type: "submit", label: props.submitLabel ?? 'Save view', size: "compact" })] })] }));
+//# sourceMappingURL=index.js.map

package/dist/data-operations/list-controls/index.js.map

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

package/dist/data-operations/list-controls/styles.css

@@ -0,0 +1,82 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="search-bar"] {
+    display: grid;
+    grid-template-columns: auto minmax(10rem, 22rem) auto;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="search-bar"] input {
+    min-width: 0;
+    min-height: var(--kv-control-height);
+    padding-inline: var(--kv-space-2-5);
+    border: 1px solid var(--kv-field-border);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-input-bg);
+    color: var(--kv-input-text);
+  }
+
+  :where([data-kv-design-system]) [data-ui="filter-bar"],
+  :where([data-kv-design-system]) [data-ui="applied-filters"],
+  :where([data-kv-design-system]) [data-ui="saved-views"] {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="applied-filter"] {
+    padding: var(--kv-space-1) var(--kv-space-2);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: 999px;
+    color: inherit;
+    font-size: var(--kv-text-xs);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="saved-view"] {
+    display: grid;
+    gap: 2px;
+    min-width: 10rem;
+    padding: var(--kv-space-2);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-sm);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="saved-view"][aria-current="page"] {
+    border-color: var(--kv-color-accent);
+    background: var(--kv-nav-selected);
+  }
+
+  :where([data-kv-design-system]) [data-ui="view-settings"] {
+    position: relative;
+  }
+
+  :where([data-kv-design-system]) [data-ui="view-settings"] > form {
+    display: grid;
+    gap: var(--kv-space-3);
+    max-width: 22rem;
+    padding: var(--kv-space-3);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-panel-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="view-settings-options"] {
+    display: grid;
+    gap: var(--kv-space-2);
+  }
+
+  @container (max-width: 34rem) {
+    :where([data-kv-design-system]) [data-ui="search-bar"] {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    :where([data-kv-design-system]) [data-ui="search-bar"] [data-ui="action"] {
+      grid-column: 2;
+      width: fit-content;
+    }
+  }
+}

package/dist/forms/combobox/index.d.ts

@@ -0,0 +1,39 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { FieldIssue } from '../shared.tsx';
+export declare const HOOKS: readonly ['combobox', 'combobox-input-row', 'combobox-toggle', 'combobox-listbox', 'combobox-option', 'combobox-empty', 'tag-picker'];
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+export type ComboboxProps = {
+    id: string;
+    name: string;
+    /** Name used for the human-readable search text; defaults to `${name}Query`. */
+    queryName?: string;
+    label: string;
+    query: string;
+    value?: string | null;
+    options: readonly ComboboxOption[];
+    open: boolean;
+    openHref: string;
+    closeHref: string;
+    help?: string | null;
+    error?: string | null;
+    issues?: readonly FieldIssue[];
+    required?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingLabel?: string;
+    noResultsLabel?: string;
+    span?: 'half' | 'full';
+};
+export declare const Combobox: (props: ComboboxProps) => TemplateResult;
+export type MultiComboboxProps = Omit<ComboboxProps, 'value'> & {
+    values: readonly string[];
+    removeHref: (value: string) => string;
+};
+export declare const MultiCombobox: (props: MultiComboboxProps) => TemplateResult;
+export declare const TagPicker: (props: MultiComboboxProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/forms/combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,CACJ,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AACvG,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,EAAE,SAAS,cAAc,EAAE,CAAA;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AA8ED,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cAA0D,CAAA;AAE1G,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG;IAC9D,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,cAmBzD,CAAA;AAED,eAAO,MAAM,SAAS,UAAW,kBAAkB,KAAG,cAA8C,CAAA"}

package/dist/forms/combobox/index.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { describedBy, FieldFrame, issueFor } from '../shared.js';
+export const HOOKS = [
+    'combobox',
+    'combobox-input-row',
+    'combobox-toggle',
+    'combobox-listbox',
+    'combobox-option',
+    'combobox-empty',
+    'tag-picker',
+];
+const ComboControl = (props) => (_jsxs("div", { "data-ui": "combobox", "data-open": String(props.open), children: [props.submitValue && (_jsx("input", { type: "hidden", name: props.name, value: props.value ?? '', disabled: props.disabled === true })), _jsxs("div", { "data-ui": "combobox-input-row", children: [_jsx("input", { "data-ui": "field-control", id: props.id, name: props.queryName ?? `${props.name}Query`, value: props.query, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(props.open), "aria-controls": `${props.id}-listbox`, "aria-invalid": props.resolvedError ? 'true' : null, "aria-describedby": describedBy(props.id, props.help, props.resolvedError), required: props.required === true, disabled: props.disabled === true, autocomplete: "off" }), _jsx("a", { "data-ui": "combobox-toggle", href: props.open ? props.closeHref : props.openHref, "aria-label": props.open ? 'Close options' : 'Open options', children: "\u25BE" })] }), props.open && (_jsx("div", { "data-ui": "combobox-listbox", id: `${props.id}-listbox`, role: "listbox", children: props.loading ? (_jsx("p", { "data-ui": "combobox-empty", children: props.loadingLabel ?? 'Loading…' })) : props.options.length === 0 ? (_jsx("p", { "data-ui": "combobox-empty", children: props.noResultsLabel ?? 'No results' })) : (each(props.options, (option) => option.value, (option) => (_jsxs("a", { "data-ui": "combobox-option", href: option.disabled
+                    ? null
+                    : `${props.closeHref}${props.closeHref.includes('?') ? '&' : '?'}${encodeURIComponent(props.name)}=${encodeURIComponent(option.value)}`, role: "option", "aria-selected": String(option.value === props.value), "aria-disabled": option.disabled ? 'true' : null, children: [_jsx("strong", { children: option.label }), option.description && _jsx("small", { children: option.description })] })))) }))] }));
+const ComboboxField = (props) => {
+    const error = props.error ?? issueFor(props.issues, props.name);
+    return (_jsx(FieldFrame, { ...props, kind: "combobox", error: error, control: _jsx(ComboControl, { ...props, resolvedError: error }) }));
+};
+export const Combobox = (props) => _jsx(ComboboxField, { ...props, submitValue: true });
+export const MultiCombobox = (props) => (_jsxs("div", { "data-ui": "tag-picker", children: [_jsx(ComboboxField, { ...props, value: null, submitValue: false }), each(props.values, (value) => value, (value) => (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: props.name, value: value, disabled: props.disabled === true }), _jsxs("a", { href: props.removeHref(value), "aria-label": `Remove ${props.options.find((option) => option.value === value)?.label ?? value}`, children: [props.options.find((option) => option.value === value)?.label ?? value, " \u00D7"] })] })))] }));
+export const TagPicker = (props) => _jsx(MultiCombobox, { ...props });
+//# sourceMappingURL=index.js.map

package/dist/forms/combobox/index.js.map

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

package/dist/forms/combobox/styles.css

@@ -0,0 +1,76 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="combobox"] {
+    position: relative;
+    grid-column: 2;
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="combobox-input-row"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--kv-control-height);
+  }
+
+  :where([data-kv-design-system]) [data-ui="combobox-input-row"] [data-ui="field-control"] {
+    border-radius: var(--kv-radius-sm) 0 0 var(--kv-radius-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="combobox-toggle"] {
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--kv-field-border);
+    border-left: 0;
+    border-radius: 0 var(--kv-radius-sm) var(--kv-radius-sm) 0;
+    color: var(--kv-text-secondary);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="combobox-listbox"] {
+    position: absolute;
+    z-index: var(--kv-layer-popover);
+    top: calc(100% + var(--kv-space-1));
+    right: 0;
+    left: 0;
+    max-height: 15rem;
+    overflow: auto;
+    padding: var(--kv-space-1);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-panel-bg);
+    box-shadow: var(--kv-shadow-popover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="combobox-option"] {
+    display: grid;
+    gap: 2px;
+    padding: var(--kv-space-2);
+    border-radius: var(--kv-radius-xs);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="combobox-option"]:hover,
+  :where([data-kv-design-system]) [data-ui="combobox-option"][aria-selected="true"] {
+    background: var(--kv-interactive-hover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="combobox-empty"] {
+    margin: 0;
+    padding: var(--kv-space-2);
+    color: var(--kv-text-muted);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tag-picker"] {
+    display: grid;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tag-picker"] > a {
+    width: fit-content;
+    padding: var(--kv-space-1) var(--kv-space-2);
+    border-radius: 999px;
+    background: var(--kv-interactive-bg);
+    color: inherit;
+    font-size: var(--kv-text-xs);
+    text-decoration: none;
+  }
+}

package/dist/forms/date-time/index.d.ts

@@ -0,0 +1,25 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { FieldProps } from '../../primitives/field/index.tsx';
+import type { FieldIssue } from '../shared.tsx';
+export declare const HOOKS: readonly ['date-range'];
+type TemporalProps = Omit<FieldProps, 'type' | 'fields' | 'control' | 'error'> & {
+    issues?: readonly FieldIssue[];
+    error?: string | null;
+};
+/** Civil dates are passed through as YYYY-MM-DD text and are never converted through UTC. */
+export declare const DatePicker: (props: TemporalProps) => TemplateResult;
+export type DateRangePickerProps = {
+    id: string;
+    label: string;
+    start: Omit<TemporalProps, 'label' | 'span'>;
+    end: Omit<TemporalProps, 'label' | 'span'>;
+    startLabel: string;
+    endLabel: string;
+    span?: 'half' | 'full';
+};
+export declare const DateRangePicker: (props: DateRangePickerProps) => TemplateResult;
+/** Local date-time text is submitted unchanged; the app adapter owns timezone interpretation. */
+export declare const DateTimePicker: (props: TemporalProps) => TemplateResult;
+export declare const TimePicker: (props: TemporalProps) => TemplateResult;
+export type { TemporalProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/date-time/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/forms/date-time/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,KAAK,YAAI,YAAY,CAAU,CAAA;AAE5C,KAAK,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IAC/E,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,CAAA;AAOD,6FAA6F;AAC7F,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,cAA4D,CAAA;AAE9G,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAA;IAC5C,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAA;IAC1C,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,cAM7D,CAAA;AAED,iGAAiG;AACjG,eAAO,MAAM,cAAc,UAAW,aAAa,KAAG,cAErD,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,cAA4D,CAAA;AAE9G,YAAY,EAAE,aAAa,EAAE,CAAA"}

package/dist/forms/date-time/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { Field } from '../../primitives/field/index.js';
+import { issueFor } from '../shared.js';
+export const HOOKS = ['date-range'];
+const temporal = (props) => ({
+    ...props,
+    error: props.error ?? issueFor(props.issues, props.name),
+});
+/** Civil dates are passed through as YYYY-MM-DD text and are never converted through UTC. */
+export const DatePicker = (props) => _jsx(Field, { ...temporal(props), type: "date" });
+export const DateRangePicker = (props) => (_jsxs("fieldset", { "data-ui": "date-range", "data-span": props.span ?? 'full', children: [_jsx("legend", { children: props.label }), _jsx(Field, { ...temporal({ ...props.start, label: props.startLabel }), type: "date" }), _jsx(Field, { ...temporal({ ...props.end, label: props.endLabel }), type: "date" })] }));
+/** Local date-time text is submitted unchanged; the app adapter owns timezone interpretation. */
+export const DateTimePicker = (props) => (_jsx(Field, { ...temporal(props), type: "datetime-local" }));
+export const TimePicker = (props) => _jsx(Field, { ...temporal(props), type: "time" });
+//# sourceMappingURL=index.js.map

package/dist/forms/date-time/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/forms/date-time/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAkC,CAAA;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAe,CAAA;AAGxC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,YAAY,CAAU,CAAA;AAO5C,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAc,EAAE,CAAC,CAAC;IACtD,GAAG,KAAK;IACR,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC;CACzD,CAAC,CAAA;AAEF,6FAA6F;AAC7F,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,KAAC,KAAK,OAAK,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,MAAM,GAAG,CAAA;AAY9G,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAkB,EAAE,CAAC,CAC9E,+BAAkB,YAAY,eAAY,KAAK,CAAC,IAAI,IAAI,MAAM,aAC5D,2BAAS,KAAK,CAAC,KAAK,GAAU,EAC9B,KAAC,KAAK,OAAK,QAAQ,CAAC,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,GAAG,EAChF,KAAC,KAAK,OAAK,QAAQ,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,GAAG,IACnE,CACZ,CAAA;AAED,iGAAiG;AACjG,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,CACtE,KAAC,KAAK,OAAK,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,gBAAgB,GAAG,CACrD,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,KAAC,KAAK,OAAK,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,MAAM,GAAG,CAAA"}

package/dist/forms/date-time/styles.css

@@ -0,0 +1,25 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="date-range"] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-width: 0;
+    gap: var(--kv-space-3);
+    margin: 0;
+    padding: var(--kv-space-3);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="date-range"] legend {
+    padding-inline: var(--kv-space-1);
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+    font-weight: var(--kv-weight-medium);
+  }
+
+  @container (max-width: 34rem) {
+    :where([data-kv-design-system]) [data-ui="date-range"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}

package/dist/forms/relation-picker/index.d.ts

@@ -0,0 +1,12 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { ComboboxProps } from '../combobox/index.tsx';
+export declare const HOOKS: readonly ['relation-picker'];
+export type RelationPickerProps<T> = Omit<ComboboxProps, 'options'> & {
+    results: readonly T[];
+    getValue: (result: T) => string;
+    getLabel: (result: T) => string;
+    getDescription?: (result: T) => string | undefined;
+};
+/** The application supplies permission-filtered results; this renderer performs no lookup. */
+export declare const RelationPicker: <T>(props: RelationPickerProps<T>) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/relation-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/forms/relation-picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1E,eAAO,MAAM,KAAK,YAAI,iBAAiB,CAAU,CAAA;AAEjD,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG;IACpE,OAAO,EAAE,SAAS,CAAC,EAAE,CAAA;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;CACnD,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,cAAc,GAAI,CAAC,SAAU,mBAAmB,CAAC,CAAC,CAAC,KAAG,cAWlE,CAAA"}

package/dist/forms/relation-picker/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { Combobox } from '../combobox/index.js';
+export const HOOKS = ['relation-picker'];
+/** The application supplies permission-filtered results; this renderer performs no lookup. */
+export const RelationPicker = (props) => {
+    const options = props.results.map((result) => ({
+        value: props.getValue(result),
+        label: props.getLabel(result),
+        description: props.getDescription?.(result),
+    }));
+    return (_jsx("div", { "data-ui": "relation-picker", children: _jsx(Combobox, { ...props, options: options }) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/forms/relation-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/forms/relation-picker/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAuB,CAAA;AAGhD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,iBAAiB,CAAU,CAAA;AASjD,8FAA8F;AAC9F,MAAM,CAAC,MAAM,cAAc,GAAG,CAAK,KAA6B,EAAkB,EAAE;IAClF,MAAM,OAAO,GAAqB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC/D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC7B,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC7B,WAAW,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,CAAC;KAC5C,CAAC,CAAC,CAAA;IACH,OAAO,CACL,yBAAa,iBAAiB,YAC5B,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,GACrC,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/forms/relation-picker/styles.css

@@ -0,0 +1,5 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="relation-picker"] {
+    display: contents;
+  }
+}

package/dist/forms/scalar-fields/index.d.ts

@@ -0,0 +1,24 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { FieldOption, FieldProps } from '../../primitives/field/index.tsx';
+import type { FieldIssue } from '../shared.tsx';
+export declare const HOOKS: readonly ['switch-control', 'switch-track'];
+type CommonProps = Omit<FieldProps, 'type' | 'fields' | 'control' | 'error'> & {
+    issues?: readonly FieldIssue[];
+    error?: string | null;
+};
+export declare const TextField: (props: CommonProps) => TemplateResult;
+export declare const TextArea: (props: CommonProps) => TemplateResult;
+export declare const NumberField: (props: CommonProps) => TemplateResult;
+export declare const MoneyField: (props: CommonProps) => TemplateResult;
+export declare const SearchField: (props: CommonProps) => TemplateResult;
+export declare const Checkbox: (props: CommonProps) => TemplateResult;
+export declare const CheckboxGroup: (props: CommonProps) => TemplateResult;
+export declare const RadioGroup: (props: CommonProps) => TemplateResult;
+export declare const Select: (props: CommonProps) => TemplateResult;
+export type SwitchProps = Omit<CommonProps, 'options' | 'placeholder' | 'step' | 'min' | 'max'> & {
+    checked?: boolean;
+    value?: string;
+};
+export declare const Switch: (props: SwitchProps) => TemplateResult;
+export type { CommonProps as ScalarFieldProps, FieldIssue, FieldOption };
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/scalar-fields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/forms/scalar-fields/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAE/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,KAAK,YAAI,gBAAgB,EAAE,cAAc,CAAU,CAAA;AAEhE,KAAK,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IAC7E,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,CAAA;AAOD,eAAO,MAAM,SAAS,UAAW,WAAW,KAAG,cAA6D,CAAA;AAC5G,eAAO,MAAM,QAAQ,UAAW,WAAW,KAAG,cAE7C,CAAA;AACD,eAAO,MAAM,WAAW,UAAW,WAAW,KAAG,cAEhD,CAAA;AACD,eAAO,MAAM,UAAU,UAAW,WAAW,KAAG,cAE/C,CAAA;AACD,eAAO,MAAM,WAAW,UAAW,WAAW,KAAG,cAA6D,CAAA;AAC9G,eAAO,MAAM,QAAQ,UAAW,WAAW,KAAG,cAE7C,CAAA;AACD,eAAO,MAAM,aAAa,UAAW,WAAW,KAAG,cAElD,CAAA;AACD,eAAO,MAAM,UAAU,UAAW,WAAW,KAAG,cAA8D,CAAA;AAC9G,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAA+D,CAAA;AAE3G,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,GAAG;IAChG,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAgC3C,CAAA;AAED,YAAY,EAAE,WAAW,IAAI,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA"}

package/dist/forms/scalar-fields/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { Field } from '../../primitives/field/index.js';
+import { describedBy, FieldFrame, issueFor } from '../shared.js';
+export const HOOKS = ['switch-control', 'switch-track'];
+const normalize = (props) => ({
+    ...props,
+    error: props.error ?? issueFor(props.issues, props.name),
+});
+export const TextField = (props) => _jsx(Field, { ...normalize(props), type: "text" });
+export const TextArea = (props) => (_jsx(Field, { ...normalize(props), type: "textarea" }));
+export const NumberField = (props) => (_jsx(Field, { ...normalize(props), type: "number" }));
+export const MoneyField = (props) => (_jsx(Field, { ...normalize({ ...props, step: props.step ?? '0.01' }), type: "decimal" }));
+export const SearchField = (props) => _jsx(Field, { ...normalize(props), type: "text" });
+export const Checkbox = (props) => (_jsx(Field, { ...normalize(props), type: "checkbox" }));
+export const CheckboxGroup = (props) => (_jsx(Field, { ...normalize(props), type: "checkbox-group" }));
+export const RadioGroup = (props) => _jsx(Field, { ...normalize(props), type: "radio" });
+export const Select = (props) => _jsx(Field, { ...normalize(props), type: "select" });
+export const Switch = (props) => {
+    const error = props.error ?? issueFor(props.issues, props.name);
+    const checked = props.checked ?? props.value === '1';
+    return (_jsx(FieldFrame, { id: props.id, label: props.label, help: props.help, error: error, required: props.required, span: props.span, kind: "switch", control: _jsxs("label", { "data-ui": "switch-control", children: [_jsx("input", { id: props.id, type: "checkbox", role: "switch", name: props.name, value: props.value ?? '1', checked: checked, "aria-checked": String(checked), disabled: props.disabled === true, required: props.required === true, "aria-invalid": error ? 'true' : null, "aria-describedby": describedBy(props.id, props.help, error) }), _jsx("span", { "data-ui": "switch-track", "aria-hidden": "true" })] }) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/forms/scalar-fields/index.js.map

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