@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/primitives/primitives.css

@@ -1,570 +1,4 @@
-@layer ket.app {
-  :where([data-kv-design-system]) [data-ui="action"] {
-    display: inline-flex;
-    min-width: 0;
-    max-width: 100%;
-    min-height: var(--kv-control-height);
-    align-items: center;
-    justify-content: center;
-    gap: 0.4375rem;
-    padding-inline: var(--kv-space-3);
-    border: 1px solid var(--kv-border-default);
-    border-radius: var(--kv-radius-sm);
-    background: var(--kv-interactive-bg);
-    color: var(--kv-text-secondary);
-    font-size: var(--kv-text-sm);
-    font-weight: var(--kv-weight-medium);
-    line-height: 1;
-    text-decoration: none;
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-      background var(--kv-motion-fast),
-      border-color var(--kv-motion-fast),
-      transform var(--kv-motion-fast);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"]:hover:not(:disabled) {
-    border-color: var(--kv-border-strong);
-    background: var(--kv-interactive-hover);
-    color: var(--kv-text-main);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"]:active:not(:disabled) {
-    background: var(--kv-interactive-active);
-    transform: translateY(1px);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-variant="primary"] {
-    border-color: var(--kv-action-primary-bg);
-    background: var(--kv-action-primary-bg);
-    color: var(--kv-action-primary-ink);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-variant="primary"]:hover:not(:disabled) {
-    border-color: var(--kv-action-primary-hover);
-    background: var(--kv-action-primary-hover);
-    color: var(--kv-action-primary-ink);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-variant="primary"]:active:not(:disabled) {
-    border-color: var(--kv-action-primary-active);
-    background: var(--kv-action-primary-active);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-variant="tertiary"] {
-    border-color: transparent;
-    background: transparent;
-    color: var(--kv-text-secondary);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-variant="tertiary"]:hover:not(:disabled) {
-    border-color: transparent;
-    background: color-mix(in srgb, var(--kv-text-main) 5%, transparent);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-variant="destructive"] {
-    border-color: var(--kv-danger-border);
-    background: transparent;
-    color: var(--kv-danger);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-variant="destructive"]:hover:not(:disabled) {
-    border-color: var(--kv-danger-border);
-    background: var(--kv-danger-bg);
-    color: var(--kv-danger-hover);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-size="compact"] {
-    min-height: var(--kv-control-height-compact);
-    padding-inline: var(--kv-space-2);
-    font-size: var(--kv-text-xs);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-size="prominent"] {
-    min-height: var(--kv-control-height-prominent);
-    padding-inline: var(--kv-space-5);
-    font-size: var(--kv-text-base);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"] {
-    width: var(--kv-control-height);
-    height: var(--kv-control-height);
-    flex: none;
-    padding-inline: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"][data-size="compact"] {
-    width: var(--kv-control-height-compact);
-    height: var(--kv-control-height-compact);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"][data-size="prominent"] {
-    width: var(--kv-control-height-prominent);
-    height: var(--kv-control-height-prominent);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action"]:disabled {
-    border-color: var(--kv-panel-border);
-    background: var(--kv-interactive-disabled);
-    color: var(--kv-text-disabled);
-    cursor: not-allowed;
-  }
-
-  :where([data-kv-design-system]) [data-ui="action-leading"] {
-    display: inline-grid;
-    width: 1rem;
-    height: 1rem;
-    place-items: center;
-    font-family: var(--kv-font-mono);
-  }
-
-  :where([data-kv-design-system]) [data-ui="action-label"] {
-    min-width: 0;
-    overflow: hidden;
-    line-height: var(--kv-leading-normal);
-    text-overflow: ellipsis;
-  }
-
-  :where([data-kv-design-system]) [data-ui="action-spinner"] {
-    width: 0.8rem;
-    height: 0.8rem;
-    border: 2px solid currentcolor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: kv-spin 700ms linear infinite;
-  }
-
-  :where([data-kv-design-system]) [data-ui="action-group"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--kv-space-2);
-  }
-
-  :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;
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice"] {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    gap: var(--kv-space-3);
-    align-items: start;
-    padding: var(--kv-space-3) var(--kv-space-4);
-    border: 1px solid var(--kv-color-line);
-    border-left: 3px solid var(--kv-color-info);
-    border-radius: var(--kv-radius-sm);
-    background: var(--kv-color-info-soft);
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice"][data-tone="positive"] {
-    border-left-color: var(--kv-color-positive);
-    background: var(--kv-color-positive-soft);
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice"][data-tone="warning"] {
-    border-left-color: var(--kv-color-warning);
-    background: var(--kv-color-warning-soft);
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice"][data-tone="danger"] {
-    border-left-color: var(--kv-color-danger);
-    background: var(--kv-color-danger-soft);
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice-mark"] {
-    width: 0.65rem;
-    height: 0.65rem;
-    margin-top: 0.35rem;
-    border-radius: 50%;
-    background: currentcolor;
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice-copy"] {
-    min-width: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice-title"] {
-    margin-bottom: var(--kv-space-1);
-    font-weight: 800;
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice-message"] {
-    margin-bottom: 0;
-    color: var(--kv-color-ink-secondary);
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="notice-actions"] {
-    align-self: center;
-  }
-
-  :where([data-kv-design-system]) [data-ui="empty"] {
-    display: grid;
-    min-height: 11rem;
-    place-items: center;
-    align-content: center;
-    padding: var(--kv-space-8);
-    color: var(--kv-color-ink-secondary);
-    text-align: center;
-  }
-
-  :where([data-kv-design-system]) [data-ui="empty-mark"] {
-    display: grid;
-    width: 2.5rem;
-    height: 2.5rem;
-    margin-bottom: var(--kv-space-3);
-    place-items: center;
-    border: 1px solid var(--kv-color-line-strong);
-    border-radius: 50%;
-    color: var(--kv-color-accent);
-    font-size: var(--kv-text-lg);
-  }
-
-  :where([data-kv-design-system]) [data-ui="empty-title"] {
-    margin-bottom: var(--kv-space-1);
-    color: var(--kv-color-ink);
-    font-weight: 800;
-  }
-
-  :where([data-kv-design-system]) [data-ui="empty-message"] {
-    max-width: 34rem;
-    margin-bottom: 0;
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="empty-actions"] {
-    margin-top: var(--kv-space-4);
-  }
-
-  :where([data-kv-design-system]) [data-ui="loading"] {
-    display: grid;
-    gap: var(--kv-space-3);
-    padding: var(--kv-space-4);
-  }
-
-  :where([data-kv-design-system]) [data-ui="loading-label"] {
-    color: var(--kv-color-ink-muted);
-    font-size: var(--kv-text-xs);
-    font-weight: 750;
-    letter-spacing: 0;
-    text-transform: uppercase;
-  }
-
-  :where([data-kv-design-system]) [data-ui="skeleton"] {
-    display: grid;
-    gap: var(--kv-space-2);
-  }
-
-  :where([data-kv-design-system]) [data-ui="skeleton-line"] {
-    height: 0.7rem;
-    border-radius: var(--kv-radius-xs);
-    background: linear-gradient(
-      90deg,
-      var(--kv-color-surface-subtle),
-      var(--kv-color-line),
-      var(--kv-color-surface-subtle)
-    );
-    background-size: 200% 100%;
-    animation: kv-shimmer 1.5s ease infinite;
-  }
-
-  :where([data-kv-design-system]) [data-ui="skeleton-line"][data-line="2"] {
-    width: 82%;
-  }
-
-  :where([data-kv-design-system]) [data-ui="skeleton-line"][data-line="3"] {
-    width: 58%;
-  }
-
-  :where([data-kv-design-system]) [data-ui="field"] {
-    display: grid;
-    grid-template-columns: minmax(0, min(35%, 9rem)) minmax(0, 1fr);
-    align-items: center;
-    align-content: start;
-    min-width: 0;
-    gap: var(--kv-space-1) var(--kv-space-3);
-    margin: 0;
-    padding: 0;
-    border: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="field"][data-kind="checkbox"] {
-    min-height: var(--kv-control-height);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field"][data-kind="group"] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--kv-space-2);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field"] > [data-ui="field-label"] {
-    grid-column: 1;
-    grid-row: 1;
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
-
-  :where([data-kv-design-system])
-    [data-ui="field"]
-    > :is([data-ui="field-control"], [data-ui="field-options"]) {
-    grid-column: 2;
-    grid-row: 1;
-  }
-
-  :where([data-kv-design-system]) [data-ui="field"] > :is([data-ui="field-help"], [data-ui="field-error"]) {
-    grid-column: 2;
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
-
-  :where([data-kv-design-system])
-    [data-ui="field"][data-kind="group"]
-    > :is([data-ui="field-help"], [data-ui="field-error"]) {
-    grid-column: 1;
-  }
-
-  :where([data-kv-design-system]) [data-ui="field"][data-kind="textarea"] > [data-ui="field-label"] {
-    align-self: start;
-    padding-top: var(--kv-space-2);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-label"] {
-    color: var(--kv-text-secondary);
-    font-size: var(--kv-text-sm);
-    font-weight: var(--kv-weight-medium);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-required"] {
-    color: var(--kv-color-danger);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-control"] {
-    width: 100%;
-    min-width: 0;
-    min-height: var(--kv-control-height);
-    padding: 0 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);
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-control"]::placeholder {
-    color: var(--kv-input-placeholder);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-control"]:hover:not(:focus-visible, :disabled) {
-    border-color: var(--kv-input-border-hover);
-    background: var(--kv-input-bg-hover);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-control"]:focus-visible {
-    border-color: var(--kv-input-border-focus);
-    background: var(--kv-input-bg-focus);
-    box-shadow: var(--kv-input-ring);
-    outline: none;
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-control"]:disabled {
-    border-color: var(--kv-panel-border);
-    background: var(--kv-interactive-disabled);
-    color: var(--kv-text-disabled);
-    cursor: not-allowed;
-  }
-
-  :where([data-kv-design-system]) textarea[data-ui="field-control"] {
-    min-height: 6.875rem;
-    padding: var(--kv-space-2-5) var(--kv-space-3);
-    resize: vertical;
-  }
-
-  :where([data-kv-design-system]) input[type="checkbox"][data-ui="field-control"] {
-    width: 1rem;
-    min-height: 1rem;
-    accent-color: var(--kv-color-accent);
-  }
-
-  :where([data-kv-design-system]) input[type="color"][data-ui="field-control"] {
-    min-width: 3rem;
-    padding: var(--kv-space-1);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field"][data-invalid="true"] > [data-ui="field-control"] {
-    border-color: var(--kv-color-danger);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-options"] {
-    display: flex;
-    min-width: 0;
-    min-height: var(--kv-control-height);
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--kv-space-2);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-option"] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--kv-space-2);
-    color: var(--kv-color-ink-secondary);
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-option-input"] {
-    width: 1rem;
-    min-height: 1rem;
-    flex: 0 0 auto;
-    accent-color: var(--kv-color-accent);
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-help"] {
-    color: var(--kv-color-ink-muted);
-    font-size: var(--kv-text-xs);
-  }
-
-  :where([data-kv-design-system])
-    [data-ui="field"][data-kind="checkbox"]
-    :is([data-ui="field-help"], [data-ui="field-error"]) {
-    grid-column: 2;
-  }
-
-  :where([data-kv-design-system]) [data-ui="field-error"] {
-    color: var(--kv-color-danger);
-    font-size: var(--kv-text-xs);
-    font-weight: 700;
-  }
-
-  @keyframes kv-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes kv-shimmer {
-    to {
-      background-position: -200% 0;
-    }
-  }
-
-  @media (max-width: 42rem) {
-    :where([data-kv-design-system]) [data-ui="notice"] {
-      grid-template-columns: auto minmax(0, 1fr);
-    }
-
-    :where([data-kv-design-system]) [data-ui="notice-actions"] {
-      grid-column: 1 / -1;
-    }
-  }
-}
+@import "./actions/styles.css";
+@import "./status/styles.css";
+@import "./feedback/styles.css";
+@import "./field/styles.css";

package/dist/primitives/progress/index.d.ts

@@ -0,0 +1,10 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['progress', 'progress-label', 'progress-value', 'progress-track', 'progress-bar'];
+export type ProgressTone = 'primary' | 'positive' | 'warning' | 'danger';
+export declare const Progress: (props: {
+    value: number;
+    label: string;
+    tone?: ProgressTone;
+    showValue?: boolean;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/progress/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,CACN,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAExE,eAAO,MAAM,QAAQ,UAAW;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,KAAG,cAsBH,CAAA"}

package/dist/primitives/progress/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+export const HOOKS = [
+    'progress',
+    'progress-label',
+    'progress-value',
+    'progress-track',
+    'progress-bar',
+];
+export const Progress = (props) => {
+    const value = Number.isFinite(props.value) ? Math.max(0, Math.min(100, props.value)) : 0;
+    return (_jsxs("div", { "data-ui": "progress", "data-tone": props.tone ?? 'primary', children: [(props.showValue ?? true) && (_jsxs("div", { "data-ui": "progress-label", children: [_jsx("span", { children: props.label }), _jsx("span", { "data-ui": "progress-value", children: `${value}%` })] })), _jsx("div", { "data-ui": "progress-track", role: "progressbar", "aria-label": props.label, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(value), children: _jsx("span", { "data-ui": "progress-bar", style: `width: ${value}%` }) })] }));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/progress/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,cAAc;CACN,CAAA;AAIV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE;IACnB,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACxF,OAAO,CACL,0BAAa,UAAU,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,aACvD,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAC5B,0BAAa,gBAAgB,aAC3B,yBAAO,KAAK,CAAC,KAAK,GAAQ,EAC1B,0BAAc,gBAAgB,YAAE,GAAG,KAAK,GAAG,GAAQ,IAC/C,CACP,EACD,yBACU,gBAAgB,EACxB,IAAI,EAAC,aAAa,gBACN,KAAK,CAAC,KAAK,mBACT,GAAG,mBACH,KAAK,mBACJ,MAAM,CAAC,KAAK,CAAC,YAE5B,0BAAc,cAAc,EAAC,KAAK,EAAE,UAAU,KAAK,GAAG,GAAI,GACtD,IACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/primitives/progress.d.ts

@@ -1,10 +1,2 @@
-import type { TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['progress', 'progress-label', 'progress-value', 'progress-track', 'progress-bar'];
-export type ProgressTone = 'primary' | 'positive' | 'warning' | 'danger';
-export declare const Progress: (props: {
-    value: number;
-    label: string;
-    tone?: ProgressTone;
-    showValue?: boolean;
-}) => TemplateResult;
+export * from './progress/index.tsx';
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,CACN,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAExE,eAAO,MAAM,QAAQ,UAAW;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,KAAG,cAsBH,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/progress.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/primitives/progress.js

@@ -1,13 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-export const HOOKS = [
-    'progress',
-    'progress-label',
-    'progress-value',
-    'progress-track',
-    'progress-bar',
-];
-export const Progress = (props) => {
-    const value = Number.isFinite(props.value) ? Math.max(0, Math.min(100, props.value)) : 0;
-    return (_jsxs("div", { "data-ui": "progress", "data-tone": props.tone ?? 'primary', children: [(props.showValue ?? true) && (_jsxs("div", { "data-ui": "progress-label", children: [_jsx("span", { children: props.label }), _jsx("span", { "data-ui": "progress-value", children: `${value}%` })] })), _jsx("div", { "data-ui": "progress-track", role: "progressbar", "aria-label": props.label, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(value), children: _jsx("span", { "data-ui": "progress-bar", style: `width: ${value}%` }) })] }));
-};
+export * from './progress/index.js';
 //# sourceMappingURL=progress.js.map

package/dist/primitives/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/progress.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,cAAc;CACN,CAAA;AAIV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE;IACnB,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACxF,OAAO,CACL,0BAAa,UAAU,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,aACvD,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAC5B,0BAAa,gBAAgB,aAC3B,yBAAO,KAAK,CAAC,KAAK,GAAQ,EAC1B,0BAAc,gBAAgB,YAAE,GAAG,KAAK,GAAG,GAAQ,IAC/C,CACP,EACD,yBACU,gBAAgB,EACxB,IAAI,EAAC,aAAa,gBACN,KAAK,CAAC,KAAK,mBACT,GAAG,mBACH,KAAK,mBACJ,MAAM,CAAC,KAAK,CAAC,YAE5B,0BAAc,cAAc,EAAC,KAAK,EAAE,UAAU,KAAK,GAAG,GAAI,GACtD,IACF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/progress.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAsB,CAAA"}

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

@@ -0,0 +1,27 @@
+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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/status/index.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"}