@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/primitives/status/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+export const HOOKS = ['badge', 'tag', 'tag-remove', 'count-badge', 'avatar', 'code'];
+export const Badge = (props) => (_jsx("span", { "data-ui": "badge", "data-tone": props.tone ?? 'neutral', "data-value": props.value ?? '', children: props.label }));
+export const Tag = (props) => (_jsxs("span", { "data-ui": "tag", children: [props.label, !!props.removeHref && (_jsx("a", { "data-ui": "tag-remove", href: props.removeHref, "aria-label": props.removeLabel ?? `Remove ${props.label}`, children: "\u00D7" }))] }));
+export const CountBadge = (props) => (_jsx("span", { "data-ui": "count-badge", role: "status", "aria-label": props.label, children: String(props.count) }));
+export const initials = (name) => {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (!parts.length)
+        return '?';
+    const first = parts.length > 1 ? parts[parts.length - 1] : parts[0];
+    const second = parts.length > 2 ? parts[parts.length - 2] : '';
+    return (second.slice(0, 1) + first.slice(0, 1)).toLocaleUpperCase('vi');
+};
+export const Avatar = (props) => (_jsx("span", { "data-ui": "avatar", "data-size": props.size ?? 'default', title: props.name, "aria-hidden": "true", children: initials(props.name) }));
+export const Code = (props) => (_jsx("code", { "data-ui": "code", "data-context": props.context ?? null, children: props.value }));
+//# sourceMappingURL=index.js.map

package/dist/primitives/status/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAI7F,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAqD,EAAkB,EAAE,CAAC,CAC9F,0BAAc,OAAO,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,gBAAc,KAAK,CAAC,KAAK,IAAI,EAAE,YACpF,KAAK,CAAC,KAAK,GACP,CACR,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAInB,EAAkB,EAAE,CAAC,CACpB,2BAAc,KAAK,aAChB,KAAK,CAAC,KAAK,EACX,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,CACrB,uBACU,YAAY,EACpB,IAAI,EAAE,KAAK,CAAC,UAAU,gBACV,KAAK,CAAC,WAAW,IAAI,UAAU,KAAK,CAAC,KAAK,EAAE,uBAGtD,CACL,IACI,CACR,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAkB,EAAE,CAAC,CACrF,0BAAc,aAAa,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,KAAK,YAC9D,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACf,CACR,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,GAAG,CAAA;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,CAAA;IACrE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/D,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CACvG,0BAAc,QAAQ,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,iBAAc,MAAM,YAC7F,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAChB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAiD,EAAkB,EAAE,CAAC,CACzF,0BAAc,MAAM,kBAAe,KAAK,CAAC,OAAO,IAAI,IAAI,YACrD,KAAK,CAAC,KAAK,GACP,CACR,CAAA"}

package/dist/primitives/status/styles.css

@@ -0,0 +1,114 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="badge"] {
+    display: inline-flex;
+    min-height: 1.4rem;
+    align-items: center;
+    gap: 0.3125rem;
+    padding: 0.125rem 0.4375rem;
+    border: 1px solid transparent;
+    border-radius: var(--kv-radius-sm);
+    background: color-mix(in srgb, var(--kv-text-main) 7%, transparent);
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-xs);
+    font-weight: var(--kv-weight-medium);
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system]) [data-ui="badge"][data-tone="info"] {
+    background: var(--kv-color-info-soft);
+    color: var(--kv-color-info);
+  }
+
+  :where([data-kv-design-system]) [data-ui="badge"][data-tone="positive"] {
+    background: var(--kv-color-positive-soft);
+    color: var(--kv-color-positive);
+  }
+
+  :where([data-kv-design-system]) [data-ui="badge"][data-tone="warning"] {
+    background: var(--kv-color-warning-soft);
+    color: var(--kv-color-warning);
+  }
+
+  :where([data-kv-design-system]) [data-ui="badge"][data-tone="danger"] {
+    background: var(--kv-color-danger-soft);
+    color: var(--kv-color-danger);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tag"] {
+    display: inline-flex;
+    min-height: 1.6rem;
+    align-items: center;
+    gap: var(--kv-space-1);
+    padding-inline: var(--kv-space-2);
+    border: 1px solid var(--kv-color-line);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-color-surface);
+    font-size: var(--kv-text-xs);
+    font-weight: 650;
+  }
+
+  :where([data-kv-design-system]) [data-ui="tag-remove"] {
+    display: grid;
+    width: 1rem;
+    height: 1rem;
+    place-items: center;
+    border-radius: var(--kv-radius-xs);
+    color: var(--kv-color-ink-muted);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="tag-remove"]:hover {
+    background: var(--kv-color-danger-soft);
+    color: var(--kv-color-danger);
+  }
+
+  :where([data-kv-design-system]) [data-ui="count-badge"] {
+    display: inline-grid;
+    min-width: 1.4rem;
+    height: 1.4rem;
+    place-items: center;
+    padding-inline: var(--kv-space-1);
+    border-radius: var(--kv-radius-full);
+    background: var(--kv-color-accent-soft);
+    color: var(--kv-color-accent);
+    font-family: var(--kv-font-mono);
+    font-size: var(--kv-text-xs);
+    font-weight: 800;
+  }
+
+  :where([data-kv-design-system]) [data-ui="avatar"] {
+    display: inline-grid;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    border: 1px solid var(--kv-color-line-strong);
+    border-radius: 50%;
+    background: var(--kv-color-accent-soft);
+    color: var(--kv-color-accent);
+    font-size: var(--kv-text-xs);
+    font-weight: 800;
+  }
+
+  :where([data-kv-design-system]) [data-ui="avatar"][data-size="small"] {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  :where([data-kv-design-system]) [data-ui="avatar"][data-size="large"] {
+    width: 3rem;
+    height: 3rem;
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="code"] {
+    padding: 0.15rem 0.35rem;
+    border-radius: var(--kv-radius-xs);
+    background: var(--kv-color-surface-subtle);
+    color: var(--kv-color-ink-secondary);
+    font-family: var(--kv-font-mono);
+    font-size: 0.85em;
+    overflow-wrap: anywhere;
+  }
+}

package/dist/primitives/status.d.ts

@@ -1,27 +1,2 @@
-import type { TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['badge', 'tag', 'tag-remove', 'count-badge', 'avatar', 'code'];
-export type Tone = 'neutral' | 'info' | 'positive' | 'warning' | 'danger';
-export declare const Badge: (props: {
-    label: string;
-    tone?: Tone;
-    value?: string;
-}) => TemplateResult;
-export declare const Tag: (props: {
-    label: string;
-    removeHref?: string | null;
-    removeLabel?: string | null;
-}) => TemplateResult;
-export declare const CountBadge: (props: {
-    count: number;
-    label: string;
-}) => TemplateResult;
-export declare const initials: (name: string) => string;
-export declare const Avatar: (props: {
-    name: string;
-    size?: 'small' | 'default' | 'large';
-}) => TemplateResult;
-export declare const Code: (props: {
-    value: string;
-    context?: string | null;
-}) => TemplateResult;
+export * from './status/index.tsx';
 //# sourceMappingURL=status.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAE7F,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEzE,eAAO,MAAM,KAAK,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAI7E,CAAA;AAED,eAAO,MAAM,GAAG,UAAW;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,KAAG,cAIpE,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAMvC,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CAAE,KAAG,cAItF,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAIxE,CAAA"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/status.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/primitives/status.js

@@ -1,16 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-export const HOOKS = ['badge', 'tag', 'tag-remove', 'count-badge', 'avatar', 'code'];
-export const Badge = (props) => (_jsx("span", { "data-ui": "badge", "data-tone": props.tone ?? 'neutral', "data-value": props.value ?? '', children: props.label }));
-export const Tag = (props) => (_jsxs("span", { "data-ui": "tag", children: [props.label, !!props.removeHref && (_jsx("a", { "data-ui": "tag-remove", href: props.removeHref, "aria-label": props.removeLabel ?? `Remove ${props.label}`, children: "\u00D7" }))] }));
-export const CountBadge = (props) => (_jsx("span", { "data-ui": "count-badge", role: "status", "aria-label": props.label, children: String(props.count) }));
-export const initials = (name) => {
-    const parts = name.trim().split(/\s+/).filter(Boolean);
-    if (!parts.length)
-        return '?';
-    const first = parts.length > 1 ? parts[parts.length - 1] : parts[0];
-    const second = parts.length > 2 ? parts[parts.length - 2] : '';
-    return (second.slice(0, 1) + first.slice(0, 1)).toLocaleUpperCase('vi');
-};
-export const Avatar = (props) => (_jsx("span", { "data-ui": "avatar", "data-size": props.size ?? 'default', title: props.name, "aria-hidden": "true", children: initials(props.name) }));
-export const Code = (props) => (_jsx("code", { "data-ui": "code", "data-context": props.context ?? null, children: props.value }));
+export * from './status/index.js';
 //# sourceMappingURL=status.js.map

package/dist/primitives/status.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/status.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAI7F,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAqD,EAAkB,EAAE,CAAC,CAC9F,0BAAc,OAAO,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,gBAAc,KAAK,CAAC,KAAK,IAAI,EAAE,YACpF,KAAK,CAAC,KAAK,GACP,CACR,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAInB,EAAkB,EAAE,CAAC,CACpB,2BAAc,KAAK,aAChB,KAAK,CAAC,KAAK,EACX,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,CACrB,uBACU,YAAY,EACpB,IAAI,EAAE,KAAK,CAAC,UAAU,gBACV,KAAK,CAAC,WAAW,IAAI,UAAU,KAAK,CAAC,KAAK,EAAE,uBAGtD,CACL,IACI,CACR,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAkB,EAAE,CAAC,CACrF,0BAAc,aAAa,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,KAAK,YAC9D,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACf,CACR,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,GAAG,CAAA;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,CAAA;IACrE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/D,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CACvG,0BAAc,QAAQ,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,iBAAc,MAAM,YAC7F,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAChB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAiD,EAAkB,EAAE,CAAC,CACzF,0BAAc,MAAM,kBAAe,KAAK,CAAC,OAAO,IAAI,IAAI,YACrD,KAAK,CAAC,KAAK,GACP,CACR,CAAA"}
+{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/status.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAoB,CAAA"}

package/dist/record/activity/index.d.ts

@@ -0,0 +1,26 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['activity-timeline', 'activity-item', 'activity-marker', 'audit-log', 'audit-item'];
+export type ActivityItem = {
+    id: string;
+    actor: string;
+    actorDetail?: string;
+    action: JSXChild;
+    datetime: string;
+    timeLabel: string;
+    detail?: JSXChild;
+    redacted?: boolean;
+};
+type FeedProps = {
+    label: string;
+    items: readonly ActivityItem[];
+    loading?: boolean;
+    loadingLabel?: string;
+    emptyTitle?: string;
+    emptyMessage?: string;
+    error?: string | null;
+    redactedLabel?: string;
+};
+export declare const ActivityTimeline: (props: FeedProps) => TemplateResult;
+export declare const AuditLog: (props: FeedProps) => TemplateResult;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/record/activity/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/activity/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAItE,eAAO,MAAM,KAAK,YAChB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,YAAY,CACJ,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,QAAQ,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAeD,eAAO,MAAM,gBAAgB,UAAW,SAAS,KAAG,cAsBnD,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,KAAG,cAkB3C,CAAA"}

package/dist/record/activity/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { EmptyState, LoadingState, Notice } from '../../primitives/feedback/index.js';
+import { Person } from '../display/index.js';
+export const HOOKS = [
+    'activity-timeline',
+    'activity-item',
+    'activity-marker',
+    'audit-log',
+    'audit-item',
+];
+const state = (props) => {
+    if (props.loading)
+        return _jsx(LoadingState, { label: props.loadingLabel ?? 'Loading activity' });
+    if (props.error)
+        return _jsx(Notice, { title: "Activity unavailable", message: props.error, tone: "danger" });
+    if (!props.items.length)
+        return (_jsx(EmptyState, { title: props.emptyTitle ?? 'No activity', message: props.emptyMessage ?? 'Nothing has happened yet.' }));
+    return null;
+};
+export const ActivityTimeline = (props) => {
+    const placeholder = state(props);
+    if (placeholder)
+        return placeholder;
+    return (_jsx("ol", { "data-ui": "activity-timeline", "aria-label": props.label, children: each(props.items, (item) => item.id, (item) => (_jsxs("li", { "data-ui": "activity-item", children: [_jsx("span", { "data-ui": "activity-marker", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx(Person, { name: item.actor, detail: item.actorDetail, size: "small" }), _jsx("p", { children: item.redacted ? (props.redactedLabel ?? 'Details redacted') : item.action }), item.detail !== undefined && !item.redacted && _jsx("div", { children: item.detail }), _jsx("time", { datetime: item.datetime, children: item.timeLabel })] })] }))) }));
+};
+export const AuditLog = (props) => {
+    const placeholder = state(props);
+    if (placeholder)
+        return placeholder;
+    return (_jsx("ol", { "data-ui": "audit-log", "aria-label": props.label, children: each(props.items, (item) => item.id, (item) => (_jsxs("li", { "data-ui": "audit-item", children: [_jsx("time", { datetime: item.datetime, children: item.timeLabel }), _jsx("strong", { children: item.actor }), _jsx("span", { children: item.redacted ? (props.redactedLabel ?? 'Change redacted') : item.action })] }))) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/record/activity/index.js.map

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

package/dist/record/activity/styles.css

@@ -0,0 +1,38 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="activity-timeline"],
+  :where([data-kv-design-system]) [data-ui="audit-log"] {
+    display: grid;
+    gap: var(--kv-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="activity-item"] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="activity-marker"] {
+    width: 0.625rem;
+    height: 0.625rem;
+    margin-top: var(--kv-space-2);
+    border-radius: 50%;
+    background: var(--kv-color-accent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="activity-item"] :is(p, time),
+  :where([data-kv-design-system]) [data-ui="audit-item"] :is(time, span) {
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="audit-item"] {
+    display: grid;
+    grid-template-columns: minmax(8rem, auto) minmax(8rem, auto) minmax(0, 1fr);
+    gap: var(--kv-space-3);
+    padding-block: var(--kv-space-2);
+    border-bottom: 1px solid var(--kv-panel-border);
+  }
+}

package/dist/record/composition/index.d.ts

@@ -0,0 +1,33 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { KeyValueProps, PersonProps } from '../display/index.tsx';
+import type { Tone } from '../../primitives/status/index.tsx';
+export declare const HOOKS: readonly ['record-summary', 'record-summary-main', 'record-actions', 'record-rail'];
+export type RecordSummaryProps = {
+    title: JSXChild;
+    subtitle?: JSXChild;
+    person?: PersonProps;
+    status?: {
+        label: string;
+        tone?: Tone;
+        detail?: string;
+    };
+    facts?: readonly (KeyValueProps & {
+        id: string;
+    })[];
+};
+export declare const RecordSummary: (props: RecordSummaryProps) => TemplateResult;
+export declare const RecordActions: (props: {
+    label?: string;
+    actions: readonly JSXChild[];
+}) => TemplateResult;
+export type RecordRailSection = {
+    id: string;
+    title: string;
+    body: JSXChild;
+    actions?: JSXChild;
+};
+export declare const RecordRail: (props: {
+    label?: string;
+    sections: readonly RecordRailSection[];
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/record/composition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/composition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAItE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAE7D,eAAO,MAAM,KAAK,YAAI,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,aAAa,CAAU,CAAA;AAExG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxD,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAA;CACpD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,cAUzD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAA;CAAE,KAAG,cAIvF,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAA;AACjG,eAAO,MAAM,UAAU,UAAW;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,SAAS,iBAAiB,EAAE,CAAA;CACvC,KAAG,cAUH,CAAA"}

package/dist/record/composition/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { ActionGroup } from '../../primitives/actions/index.js';
+import { Section } from '../../layouts/layout/index.js';
+import { DescriptionList, Person, Status } from '../display/index.js';
+export const HOOKS = ['record-summary', 'record-summary-main', 'record-actions', 'record-rail'];
+export const RecordSummary = (props) => (_jsxs("header", { "data-ui": "record-summary", children: [_jsxs("div", { "data-ui": "record-summary-main", children: [_jsx("h2", { children: props.title }), props.subtitle !== undefined && _jsx("p", { children: props.subtitle }), props.person && _jsx(Person, { ...props.person })] }), props.status && _jsx(Status, { ...props.status }), props.facts && _jsx(DescriptionList, { items: props.facts, columns: 3 })] }));
+export const RecordActions = (props) => (_jsx("nav", { "data-ui": "record-actions", "aria-label": props.label ?? 'Record actions', children: _jsx(ActionGroup, { actions: props.actions }) }));
+export const RecordRail = (props) => (_jsx("aside", { "data-ui": "record-rail", "aria-label": props.label ?? 'Record context', children: each(props.sections, (section) => section.id, (section) => (_jsx(Section, { title: section.title, body: section.body, actions: section.actions }))) }));
+//# sourceMappingURL=index.js.map

package/dist/record/composition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/composition/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAoC,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAgC,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAItE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,aAAa,CAAU,CAAA;AAUxG,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAkB,EAAE,CAAC,CAC1E,6BAAgB,gBAAgB,aAC9B,0BAAa,qBAAqB,aAChC,uBAAK,KAAK,CAAC,KAAK,GAAM,EACrB,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,sBAAI,KAAK,CAAC,QAAQ,GAAK,EACvD,KAAK,CAAC,MAAM,IAAI,KAAC,MAAM,OAAK,KAAK,CAAC,MAAM,GAAI,IACzC,EACL,KAAK,CAAC,MAAM,IAAI,KAAC,MAAM,OAAK,KAAK,CAAC,MAAM,GAAI,EAC5C,KAAK,CAAC,KAAK,IAAI,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,GAAI,IAC5D,CACV,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAuD,EAAkB,EAAE,CAAC,CACxG,yBAAa,gBAAgB,gBAAa,KAAK,CAAC,KAAK,IAAI,gBAAgB,YACvE,KAAC,WAAW,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,GACnC,CACP,CAAA;AAGD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAG1B,EAAkB,EAAE,CAAC,CACpB,2BAAe,aAAa,gBAAa,KAAK,CAAC,KAAK,IAAI,gBAAgB,YACrE,IAAI,CACH,KAAK,CAAC,QAAQ,EACd,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,EACvB,CAAC,OAAO,EAAE,EAAE,CAAC,CACX,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,GAAI,CAChF,CACF,GACK,CACT,CAAA"}

package/dist/record/composition/styles.css

@@ -0,0 +1,30 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="record-summary"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-ui="record-summary-main"] {
+    display: grid;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="record-summary-main"] :is(h2, p) {
+    margin: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="record-summary"] > [data-ui="description-list"] {
+    grid-column: 1 / -1;
+  }
+
+  :where([data-kv-design-system]) [data-ui="record-actions"] {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :where([data-kv-design-system]) [data-ui="record-rail"] {
+    min-width: 0;
+  }
+}

package/dist/record/display/index.d.ts

@@ -0,0 +1,37 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { Tone } from '../../primitives/status/index.tsx';
+export declare const HOOKS: readonly ['description-list', 'key-value', 'key-value-label', 'key-value-value', 'person', 'person-body', 'avatar-group', 'status'];
+export type KeyValueProps = {
+    label: JSXChild;
+    value: JSXChild;
+    emptyLabel?: string;
+};
+export declare const KeyValue: (props: KeyValueProps) => TemplateResult;
+export declare const DescriptionList: (props: {
+    label?: string;
+    items: readonly (KeyValueProps & {
+        id: string;
+    })[];
+    columns?: 1 | 2 | 3;
+}) => TemplateResult;
+export type PersonProps = {
+    name: string;
+    detail?: JSXChild;
+    href?: string;
+    size?: 'small' | 'default' | 'large';
+};
+export declare const Person: (props: PersonProps) => TemplateResult;
+export declare const AvatarGroup: (props: {
+    label: string;
+    people: readonly {
+        id: string;
+        name: string;
+    }[];
+    max?: number;
+}) => TemplateResult;
+export declare const Status: (props: {
+    label: string;
+    tone?: Tone;
+    detail?: string;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/record/display/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAE7D,eAAO,MAAM,KAAK,YAChB,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,QAAQ,CACA,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACrF,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cAK/C,CAAA;AAED,eAAO,MAAM,eAAe,UAAW;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,CAAC,aAAa,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAA;IAClD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CACpB,KAAG,cAUH,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CACrC,CAAA;AACD,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAQ3C,CAAA;AAED,eAAO,MAAM,WAAW,UAAW;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,SAAS;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,KAAG,cAmBH,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAI/E,CAAA"}

package/dist/record/display/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { Avatar, Badge } from '../../primitives/status/index.js';
+export const HOOKS = [
+    'description-list',
+    'key-value',
+    'key-value-label',
+    'key-value-value',
+    'person',
+    'person-body',
+    'avatar-group',
+    'status',
+];
+export const KeyValue = (props) => (_jsxs("div", { "data-ui": "key-value", children: [_jsx("dt", { "data-ui": "key-value-label", children: props.label }), _jsx("dd", { "data-ui": "key-value-value", children: props.value ?? props.emptyLabel ?? '—' })] }));
+export const DescriptionList = (props) => (_jsx("dl", { "data-ui": "description-list", "aria-label": props.label, "data-columns": String(props.columns ?? 2), children: each(props.items, (item) => item.id, (item) => (_jsx(KeyValue, { ...item }))) }));
+export const Person = (props) => (_jsxs("span", { "data-ui": "person", children: [_jsx(Avatar, { name: props.name, size: props.size }), _jsxs("span", { "data-ui": "person-body", children: [props.href ? _jsx("a", { href: props.href, children: props.name }) : _jsx("strong", { children: props.name }), props.detail !== undefined && _jsx("small", { children: props.detail })] })] }));
+export const AvatarGroup = (props) => {
+    const visible = props.people.slice(0, props.max ?? 4);
+    const remaining = props.people.length - visible.length;
+    return (_jsxs("span", { "data-ui": "avatar-group", role: "group", "aria-label": props.label, children: [each(visible, (person) => person.id, (person) => (_jsx(Avatar, { name: person.name }))), remaining > 0 && (_jsxs("span", { role: "img", "aria-label": `${remaining} more people`, title: `${remaining} more people`, children: ["+", String(remaining)] }))] }));
+};
+export const Status = (props) => (_jsx("span", { "data-ui": "status", title: props.detail, children: _jsx(Badge, { label: props.label, tone: props.tone }) }));
+//# sourceMappingURL=index.js.map

package/dist/record/display/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kCAAmC,CAAA;AAGjE,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,kBAAkB;IAClB,WAAW;IACX,iBAAiB;IACjB,iBAAiB;IACjB,QAAQ;IACR,aAAa;IACb,cAAc;IACd,QAAQ;CACA,CAAA;AAGV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,CAChE,0BAAa,WAAW,aACtB,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAM,EAChD,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,IAAI,GAAG,GAAM,IACvE,CACP,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAI/B,EAAkB,EAAE,CAAC,CACpB,wBAAY,kBAAkB,gBAAa,KAAK,CAAC,KAAK,kBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,YAC7F,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,KAAC,QAAQ,OAAK,IAAI,GAAI,CACvB,CACF,GACE,CACN,CAAA;AAQD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAkB,EAAE,CAAC,CAC5D,2BAAc,QAAQ,aACpB,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,EAC9C,2BAAc,aAAa,aACxB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,IAAI,GAAK,CAAC,CAAC,CAAC,2BAAS,KAAK,CAAC,IAAI,GAAU,EAClF,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,0BAAQ,KAAK,CAAC,MAAM,GAAS,IACvD,IACF,CACR,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAI3B,EAAkB,EAAE;IACnB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IACtD,OAAO,CACL,2BAAc,cAAc,EAAC,IAAI,EAAC,OAAO,gBAAa,KAAK,CAAC,KAAK,aAC9D,IAAI,CACH,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EACrB,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAC9B,CACF,EACA,SAAS,GAAG,CAAC,IAAI,CAChB,gBAAM,IAAI,EAAC,KAAK,gBAAa,GAAG,SAAS,cAAc,EAAE,KAAK,EAAE,GAAG,SAAS,cAAc,kBACtF,MAAM,CAAC,SAAS,CAAC,IACd,CACR,IACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAsD,EAAkB,EAAE,CAAC,CAChG,0BAAc,QAAQ,EAAC,KAAK,EAAE,KAAK,CAAC,MAAM,YACxC,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,GAC1C,CACR,CAAA"}

package/dist/record/display/styles.css

@@ -0,0 +1,63 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="description-list"] {
+    display: grid;
+    grid-template-columns: repeat(var(--kv-description-columns, 2), minmax(0, 1fr));
+    gap: var(--kv-space-3) var(--kv-space-5);
+    margin: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="description-list"][data-columns="1"] {
+    --kv-description-columns: 1;
+  }
+  :where([data-kv-design-system]) [data-ui="description-list"][data-columns="3"] {
+    --kv-description-columns: 3;
+  }
+
+  :where([data-kv-design-system]) [data-ui="key-value"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="key-value-label"] {
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    font-weight: var(--kv-weight-medium);
+  }
+
+  :where([data-kv-design-system]) [data-ui="key-value-value"] {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system]) [data-ui="person"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="person-body"] {
+    display: grid;
+    gap: 1px;
+  }
+
+  :where([data-kv-design-system]) [data-ui="avatar-group"] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="avatar-group"] > * + * {
+    margin-left: calc(var(--kv-space-2) * -1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="status"] {
+    display: inline-flex;
+  }
+
+  @container (max-width: 34rem) {
+    :where([data-kv-design-system]) [data-ui="description-list"] {
+      --kv-description-columns: 1;
+    }
+  }
+}

package/dist/record/formatted-values/index.d.ts

@@ -0,0 +1,19 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['formatted-date', 'formatted-number', 'formatted-money'];
+export declare const FormattedDate: (props: {
+    value: string;
+    locale?: string;
+    emptyLabel?: string;
+}) => TemplateResult;
+export declare const FormattedNumber: (props: {
+    value: number;
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+}) => TemplateResult;
+export declare const FormattedMoney: (props: {
+    value: number;
+    currency: string;
+    locale?: string;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/record/formatted-values/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/formatted-values/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAU,CAAA;AAEvF,eAAO,MAAM,aAAa,UAAW;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,KAAG,cAiBH,CAAA;AAED,eAAO,MAAM,eAAe,UAAW;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,KAAG,cAOH,CAAA;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,KAAG,cAMH,CAAA"}

package/dist/record/formatted-values/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+export const HOOKS = ['formatted-date', 'formatted-number', 'formatted-money'];
+export const FormattedDate = (props) => {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/u.exec(props.value);
+    const date = match ? new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]))) : null;
+    const valid = !!match &&
+        !!date &&
+        date.getUTCFullYear() === Number(match[1]) &&
+        date.getUTCMonth() === Number(match[2]) - 1 &&
+        date.getUTCDate() === Number(match[3]);
+    const formatted = valid
+        ? new Intl.DateTimeFormat(props.locale ?? 'vi-VN', { dateStyle: 'medium', timeZone: 'UTC' }).format(date)
+        : (props.emptyLabel ?? '—');
+    return (_jsx("time", { "data-ui": "formatted-date", datetime: valid ? props.value : null, children: formatted }));
+};
+export const FormattedNumber = (props) => (_jsx("data", { "data-ui": "formatted-number", value: String(props.value), children: new Intl.NumberFormat(props.locale ?? 'vi-VN', {
+        minimumFractionDigits: props.minimumFractionDigits,
+        maximumFractionDigits: props.maximumFractionDigits,
+    }).format(props.value) }));
+export const FormattedMoney = (props) => (_jsx("data", { "data-ui": "formatted-money", value: String(props.value), "data-currency": props.currency, children: new Intl.NumberFormat(props.locale ?? 'vi-VN', { style: 'currency', currency: props.currency }).format(props.value) }));
+//# sourceMappingURL=index.js.map

package/dist/record/formatted-values/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/formatted-values/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAU,CAAA;AAEvF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAI7B,EAAkB,EAAE;IACnB,MAAM,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACxG,MAAM,KAAK,GACT,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,IAAI;QACN,IAAI,CAAC,cAAc,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC3C,IAAI,CAAC,UAAU,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACxC,MAAM,SAAS,GAAG,KAAK;QACrB,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QACzG,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,GAAG,CAAC,CAAA;IAC7B,OAAO,CACL,0BAAc,gBAAgB,EAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,YAChE,SAAS,GACL,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAK/B,EAAkB,EAAE,CAAC,CACpB,0BAAc,kBAAkB,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,YACxD,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE;QAC9C,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;QAClD,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;KACnD,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACjB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAI9B,EAAkB,EAAE,CAAC,CACpB,0BAAc,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAiB,KAAK,CAAC,QAAQ,YACtF,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CACrG,KAAK,CAAC,KAAK,CACZ,GACI,CACR,CAAA"}

package/dist/record/formatted-values/styles.css

@@ -0,0 +1,8 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="formatted-date"],
+  :where([data-kv-design-system]) [data-ui="formatted-number"],
+  :where([data-kv-design-system]) [data-ui="formatted-money"] {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}

package/dist/record/media/index.d.ts

@@ -0,0 +1,31 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['attachments', 'attachment', 'media-gallery', 'media-item'];
+export type AttachmentItem = {
+    id: string;
+    name: string;
+    href?: string;
+    meta?: JSXChild;
+    redacted?: boolean;
+};
+export declare const Attachments: (props: {
+    label: string;
+    items: readonly AttachmentItem[];
+    loading?: boolean;
+    error?: string | null;
+    redactedLabel?: string;
+}) => TemplateResult;
+export type MediaItem = {
+    id: string;
+    src?: string;
+    alt: string;
+    caption?: JSXChild;
+    href?: string;
+    redacted?: boolean;
+};
+export declare const MediaGallery: (props: {
+    label: string;
+    items: readonly MediaItem[];
+    emptyTitle?: string;
+    redactedLabel?: string;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map