@nadicodeai/ui 12.1.81 → 12.1.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion.js +1 -1
- package/dist/components/account-menu.js +1 -1
- package/dist/components/agent-card.js +1 -1
- package/dist/components/agent-profile.js +1 -1
- package/dist/components/alert-dialog.js +3 -3
- package/dist/components/alert.js +1 -1
- package/dist/components/automation-section.js +2 -2
- package/dist/components/avatar.d.ts +9 -1
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +8 -2
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/badge.d.ts.map +1 -1
- package/dist/components/badge.js +5 -6
- package/dist/components/button-group.js +4 -4
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +9 -9
- package/dist/components/calendar.js +3 -3
- package/dist/components/card.d.ts.map +1 -1
- package/dist/components/card.js +6 -11
- package/dist/components/catalog-tile.d.ts +2 -4
- package/dist/components/catalog-tile.d.ts.map +1 -1
- package/dist/components/catalog-tile.js +2 -2
- package/dist/components/channel-view.d.ts.map +1 -1
- package/dist/components/channel-view.js +8 -8
- package/dist/components/chart-card.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +2 -2
- package/dist/components/code-block.d.ts +8 -0
- package/dist/components/code-block.d.ts.map +1 -0
- package/dist/components/code-block.js +7 -0
- package/dist/components/collection-filters.d.ts.map +1 -1
- package/dist/components/collection-filters.js +3 -3
- package/dist/components/collection-toolbar.js +1 -1
- package/dist/components/combobox.js +3 -3
- package/dist/components/command.js +3 -3
- package/dist/components/copy-button.d.ts +9 -0
- package/dist/components/copy-button.d.ts.map +1 -0
- package/dist/components/copy-button.js +25 -0
- package/dist/components/data-table.d.ts +7 -7
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +21 -51
- package/dist/components/dialog.js +3 -3
- package/dist/components/drawer.js +4 -4
- package/dist/components/dropdown-menu.js +6 -6
- package/dist/components/empty-state.d.ts +10 -16
- package/dist/components/empty-state.d.ts.map +1 -1
- package/dist/components/empty-state.js +1 -1
- package/dist/components/field.js +3 -3
- package/dist/components/file-diff.js +1 -1
- package/dist/components/footer.d.ts.map +1 -1
- package/dist/components/footer.js +3 -3
- package/dist/components/form-dialog.d.ts +4 -0
- package/dist/components/form-dialog.d.ts.map +1 -0
- package/dist/components/form-dialog.js +13 -0
- package/dist/components/form-drawer.d.ts +1 -8
- package/dist/components/form-drawer.d.ts.map +1 -1
- package/dist/components/form-drawer.js +1 -8
- package/dist/components/glass-control.js +1 -1
- package/dist/components/input-group.js +3 -3
- package/dist/components/input-otp.js +2 -2
- package/dist/components/input.js +1 -1
- package/dist/components/item.js +2 -2
- package/dist/components/kbd.js +1 -1
- package/dist/components/kpi-card.d.ts +3 -3
- package/dist/components/kpi-card.d.ts.map +1 -1
- package/dist/components/kpi-card.js +5 -6
- package/dist/components/label-system.js +2 -2
- package/dist/components/label.js +1 -1
- package/dist/components/menubar.js +6 -6
- package/dist/components/native-select.js +1 -1
- package/dist/components/navigation-menu.js +4 -4
- package/dist/components/object-workspace.d.ts +2 -1
- package/dist/components/object-workspace.d.ts.map +1 -1
- package/dist/components/object-workspace.js +12 -6
- package/dist/components/page-actions.d.ts +3 -3
- package/dist/components/page-actions.d.ts.map +1 -1
- package/dist/components/page-actions.js +6 -3
- package/dist/components/page-header.js +1 -1
- package/dist/components/picture-label.d.ts.map +1 -1
- package/dist/components/picture-label.js +1 -1
- package/dist/components/plugin-slot-boundary.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/reading-column.d.ts +1 -7
- package/dist/components/reading-column.d.ts.map +1 -1
- package/dist/components/reading-column.js +1 -7
- package/dist/components/record-identity.d.ts +8 -0
- package/dist/components/record-identity.d.ts.map +1 -0
- package/dist/components/record-identity.js +5 -0
- package/dist/components/select.js +2 -2
- package/dist/components/settings-facts.d.ts +2 -1
- package/dist/components/settings-facts.d.ts.map +1 -1
- package/dist/components/settings-facts.js +5 -3
- package/dist/components/settings-form.d.ts +9 -0
- package/dist/components/settings-form.d.ts.map +1 -0
- package/dist/components/settings-form.js +85 -0
- package/dist/components/settings-section.d.ts +5 -2
- package/dist/components/settings-section.d.ts.map +1 -1
- package/dist/components/settings-section.js +13 -6
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +3 -3
- package/dist/components/sidebar.js +9 -9
- package/dist/components/skeleton.d.ts +3 -5
- package/dist/components/skeleton.d.ts.map +1 -1
- package/dist/components/skeleton.js +2 -6
- package/dist/components/sonner.js +4 -4
- package/dist/components/status-row.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.d.ts +4 -1
- package/dist/components/table.d.ts.map +1 -1
- package/dist/components/table.js +9 -9
- package/dist/components/tabs.d.ts +1 -1
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +7 -7
- package/dist/components/tag.d.ts +5 -3
- package/dist/components/tag.d.ts.map +1 -1
- package/dist/components/tag.js +10 -5
- package/dist/components/text-link.js +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/toggle-group.js +2 -2
- package/dist/components/toggle.js +3 -3
- package/dist/components/tooltip.js +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -0
- package/dist/internal/empty.d.ts +2 -6
- package/dist/internal/empty.d.ts.map +1 -1
- package/dist/internal/empty.js +5 -10
- package/dist/internal/footer-strip.js +1 -1
- package/dist/lib/merge-tokens.generated.js +2 -2
- package/dist/standalone/index.js +1 -1
- package/dist/styles/components.css +27 -4
- package/package.json +5 -5
package/dist/components/field.js
CHANGED
|
@@ -9,7 +9,7 @@ function FieldSet({ className, ...props }) {
|
|
|
9
9
|
return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
12
|
-
return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5
|
|
12
|
+
return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5 data-[variant=label]:text-label data-[variant=label]:font-medium data-[variant=legend]:text-heading-xs", className), ...props }));
|
|
13
13
|
}
|
|
14
14
|
function FieldGroup({ className, ...props }) {
|
|
15
15
|
return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
|
|
@@ -36,13 +36,13 @@ function FieldContent({ className, ...props }) {
|
|
|
36
36
|
return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1 *:data-[slot=field-label]:block *:data-[slot=field-label]:leading-snug", className), ...props }));
|
|
37
37
|
}
|
|
38
38
|
function FieldLabel({ className, ...props }) {
|
|
39
|
-
return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary
|
|
39
|
+
return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary has-data-checked:bg-muted has-[>[data-slot=field]]:rounded-sm has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
|
|
40
40
|
}
|
|
41
41
|
function FieldTitle({ className, ...props }) {
|
|
42
42
|
return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
|
|
43
43
|
}
|
|
44
44
|
function FieldDescription({ className, ...props }) {
|
|
45
|
-
return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:
|
|
45
|
+
return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:text-(--nc-link) [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:decoration-2", className), ...props }));
|
|
46
46
|
}
|
|
47
47
|
function FieldSeparator({ children, className, ...props }) {
|
|
48
48
|
return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
|
|
@@ -14,6 +14,6 @@ const MARK = {
|
|
|
14
14
|
};
|
|
15
15
|
function FileDiff({ addedLabel = "Added", after, before, className, context = 3, removedLabel = "Removed", skippedLabel = (count) => `${count} unchanged lines`, ...props }) {
|
|
16
16
|
const diff = useMemo(() => lineDiff(before, after, context), [after, before, context]);
|
|
17
|
-
return (_jsx("div", { className: cn("overflow-hidden rounded-
|
|
17
|
+
return (_jsx("div", { className: cn("overflow-hidden rounded-sm border border-border bg-recessed font-code text-code", className), "data-slot": "file-diff", ...props, children: diff.lines.map((line, index) => line.kind === "skipped" ? (_jsx("div", { className: "px-2.5 py-0.5 text-muted-foreground select-none", children: `… ${skippedLabel(line.count)}` }, index)) : (_jsxs("div", { className: cn("grid grid-cols-[1.25rem_minmax(0,1fr)] pr-2.5", ROW[line.kind]), "data-kind": line.kind, children: [_jsx("span", { "aria-hidden": "true", className: "text-center select-none", children: MARK[line.kind] }), line.kind !== "context" ? (_jsx("span", { className: "sr-only", children: line.kind === "added" ? addedLabel : removedLabel })) : null, _jsx("span", { className: "break-words whitespace-pre-wrap", children: line.text || " " })] }, index))) }));
|
|
18
18
|
}
|
|
19
19
|
export { FileDiff };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;GAeG;AAEH;;;;;GAKG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAEtC,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAgB,EAChB,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,qBAcrF;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAgB,EAChB,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,qBAalF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAWtE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQzE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQrE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQzE;AAID,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW3E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;GAeG;AAEH;;;;;GAKG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAEtC,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAgB,EAChB,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,qBAcrF;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAgB,EAChB,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,qBAalF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAWtE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQzE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQrE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQzE;AAID,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW3E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAW7E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAY3E;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,kBAAkB,EAClB,cAAc,GACf,CAAC"}
|
|
@@ -10,7 +10,7 @@ function FooterBrand({ className, ...props }) {
|
|
|
10
10
|
return (_jsx("a", { "data-slot": "footer-brand", className: cn("inline-flex items-center gap-2.5 text-sm font-semibold text-foreground [&_img]:block [&_img]:h-6 [&_img]:w-auto [&_svg]:block [&_svg]:h-6 [&_svg]:w-auto", className), ...props }));
|
|
11
11
|
}
|
|
12
12
|
function FooterIdentity({ className, ...props }) {
|
|
13
|
-
return (_jsx("p", { "data-slot": "footer-identity", className: cn("
|
|
13
|
+
return (_jsx("p", { "data-slot": "footer-identity", className: cn("text-body-md m-0 max-w-[52ch] text-muted-foreground", className), ...props }));
|
|
14
14
|
}
|
|
15
15
|
function FooterNav({ className, ...props }) {
|
|
16
16
|
return (_jsx("nav", { "data-slot": "footer-nav", className: cn("flex flex-wrap gap-3 text-sm text-muted-foreground [&_a]:text-inherit [&_a:hover]:text-foreground", className), ...props }));
|
|
@@ -19,7 +19,7 @@ function FooterMeta({ className, ...props }) {
|
|
|
19
19
|
return (_jsx("p", { "data-slot": "footer-meta", className: cn("m-0 text-sm text-muted-foreground", className), ...props }));
|
|
20
20
|
}
|
|
21
21
|
function FooterClock({ className, ...props }) {
|
|
22
|
-
return (_jsx("span", { "data-slot": "footer-clock", className: cn("
|
|
22
|
+
return (_jsx("span", { "data-slot": "footer-clock", className: cn("font-label-mono text-label-mono text-primary", className), ...props }));
|
|
23
23
|
}
|
|
24
24
|
/* ── mega variant slots ────────────────────────────────────────────────── */
|
|
25
25
|
function FooterMegaTop({ className, ...props }) {
|
|
@@ -32,7 +32,7 @@ function FooterMegaCol({ className, ...props }) {
|
|
|
32
32
|
return (_jsx("div", { "data-slot": "footer-mega-col", className: cn("grid content-start gap-2 [&_a]:text-sm [&_a]:text-muted-foreground [&_a:hover]:text-foreground", className), ...props }));
|
|
33
33
|
}
|
|
34
34
|
function FooterMegaColTitle({ className, ...props }) {
|
|
35
|
-
return (_jsx("p", { "data-slot": "footer-mega-col-title", className: cn("
|
|
35
|
+
return (_jsx("p", { "data-slot": "footer-mega-col-title", className: cn("font-label-mono text-label-mono m-0 uppercase text-muted-foreground", className), ...props }));
|
|
36
36
|
}
|
|
37
37
|
function FooterMegaMeta({ className, ...props }) {
|
|
38
38
|
return (_jsx("div", { "data-slot": "footer-mega-meta", className: cn(
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { FormDrawerProps, FormDrawerFormProps } from "./form-drawer.js";
|
|
2
|
+
export declare function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }: FormDrawerProps): import("react").JSX.Element;
|
|
3
|
+
export declare function FormDialogForm({ cancelLabel, submit, notice, children, ...form }: FormDrawerFormProps): import("react").JSX.Element;
|
|
4
|
+
//# sourceMappingURL=form-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAErF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,EAAE,eAAe,+BAiBjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,+BA2BrB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
|
+
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "./dialog.js";
|
|
5
|
+
import { WaitingLine } from "./waiting-line.js";
|
|
6
|
+
import { PendingLabel } from "./pending-label.js";
|
|
7
|
+
export function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }) {
|
|
8
|
+
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(DialogContent, { className: "sm:max-w-lg", closeLabel: closeLabel, initialFocus: initialFocus, finalFocus: finalFocus, children: [_jsxs(DialogHeader, { className: "pr-8", children: [_jsx(DialogTitle, { children: title }), description ? _jsx(DialogDescription, { children: description }) : null] }), children] }) }));
|
|
9
|
+
}
|
|
10
|
+
export function FormDialogForm({ cancelLabel, submit, notice, children, ...form }) {
|
|
11
|
+
const pending = submit.pending === true;
|
|
12
|
+
return (_jsxs("form", { className: "flex min-h-0 flex-col gap-6", "aria-busy": pending || undefined, ...form, children: [_jsx(DialogBody, { children: children }), notice, _jsxs(DialogFooter, { className: "relative", children: [_jsx(DialogClose, { disabled: pending, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancelLabel }), _jsx(Button, { "aria-busy": pending || undefined, "aria-describedby": submit.describedBy, disabled: pending || submit.disabled, type: "submit", variant: submit.destructive ? "destructive" : "default", children: _jsx(PendingLabel, { pending: pending, pendingLabel: submit.pendingLabel ?? submit.label, children: submit.label }) }), pending ? (_jsx(WaitingLine, { className: "absolute inset-x-nadicode-lg bottom-1 w-auto", decorative: true })) : null] })] }));
|
|
13
|
+
}
|
|
@@ -17,14 +17,7 @@ export type FormDrawerProps = {
|
|
|
17
17
|
/** Where focus returns when the drawer closes, when its opener is gone. */
|
|
18
18
|
finalFocus?: ComponentProps<typeof SheetContent>["finalFocus"];
|
|
19
19
|
};
|
|
20
|
-
/**
|
|
21
|
-
* The one drawer every product opens to create, edit or connect a record
|
|
22
|
-
* (DESIGN.md "Menus and commands"): from the right, its title and a close
|
|
23
|
-
* control at the top, the fields in a body that scrolls, the actions in a
|
|
24
|
-
* footer that stays in place with the primary rightmost. On a narrow window it
|
|
25
|
-
* keeps its right edge and fills the width. A centred dialog only confirms a
|
|
26
|
-
* consequence; it never holds a form.
|
|
27
|
-
*/
|
|
20
|
+
/** A substantial workflow whose fields need a separate scrolling working surface. */
|
|
28
21
|
export declare function FormDrawer({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }: FormDrawerProps): import("react").JSX.Element;
|
|
29
22
|
/** The part of the drawer that scrolls between its title and its footer. */
|
|
30
23
|
export declare function FormDrawerBody({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-drawer.d.ts","sourceRoot":"","sources":["../../src/components/form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAGL,YAAY,EAKb,MAAM,oBAAoB,CAAC;AAI5B,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qFAAqF;IACrF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,6FAA6F;IAC7F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;IACnE,2EAA2E;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;CAChE,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"form-drawer.d.ts","sourceRoot":"","sources":["../../src/components/form-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAGL,YAAY,EAKb,MAAM,oBAAoB,CAAC;AAI5B,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qFAAqF;IACrF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,6FAA6F;IAC7F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,QAAQ,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;IACnE,2EAA2E;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;CAChE,CAAC;AAEF,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,EAAE,eAAe,+BAkBjB;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAc3E;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IACzF,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,gBAAgB,CAAC;IACzB,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,+BA+BrB"}
|
|
@@ -5,14 +5,7 @@ import { PendingLabel } from "./pending-label.js";
|
|
|
5
5
|
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "./sheet.js";
|
|
6
6
|
import { WaitingLine } from "./waiting-line.js";
|
|
7
7
|
import { cn } from "../lib/utils.js";
|
|
8
|
-
/**
|
|
9
|
-
* The one drawer every product opens to create, edit or connect a record
|
|
10
|
-
* (DESIGN.md "Menus and commands"): from the right, its title and a close
|
|
11
|
-
* control at the top, the fields in a body that scrolls, the actions in a
|
|
12
|
-
* footer that stays in place with the primary rightmost. On a narrow window it
|
|
13
|
-
* keeps its right edge and fills the width. A centred dialog only confirms a
|
|
14
|
-
* consequence; it never holds a form.
|
|
15
|
-
*/
|
|
8
|
+
/** A substantial workflow whose fields need a separate scrolling working surface. */
|
|
16
9
|
export function FormDrawer({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, }) {
|
|
17
10
|
return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(SheetContent, { className: "max-sm:data-[side=right]:left-nadicode-sm max-sm:data-[side=right]:w-auto", closeLabel: closeLabel, finalFocus: finalFocus, initialFocus: initialFocus, side: "right", children: [_jsxs(SheetHeader, { className: "pr-12", children: [_jsx(SheetTitle, { className: "break-words", children: title }), description ? _jsx(SheetDescription, { children: description }) : null] }), children] }) }));
|
|
18
11
|
}
|
|
@@ -5,7 +5,7 @@ function GlassControl({ className, render, shape = "control", ...props }) {
|
|
|
5
5
|
return useRender({
|
|
6
6
|
defaultTagName: "div",
|
|
7
7
|
props: mergeProps({
|
|
8
|
-
className: cn("nc-glass flex items-center border-0 text-popover-foreground nc-elevation-floating", shape === "control" && "rounded-
|
|
8
|
+
className: cn("nc-glass flex items-center border-0 text-popover-foreground nc-elevation-floating", shape === "control" && "rounded-sm", shape === "bar" && "rounded-none", className),
|
|
9
9
|
}, props),
|
|
10
10
|
render,
|
|
11
11
|
state: { shape, slot: "glass-control" },
|
|
@@ -6,7 +6,7 @@ import { Button } from "./button.js";
|
|
|
6
6
|
import { Input } from "./input.js";
|
|
7
7
|
import { Textarea } from "./textarea.js";
|
|
8
8
|
function InputGroup({ className, ...props }) {
|
|
9
|
-
return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-control-height min-h-touch-target w-full min-w-0 items-center rounded-
|
|
9
|
+
return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-control-height min-h-touch-target w-full min-w-0 items-center rounded-sm border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit has-disabled:bg-input/50 has-disabled:opacity-50 not-in-data-[slot=combobox-content]:has-[[data-slot=input-group-control]:focus-visible]:nc-focus-outline has-[[data-slot=input-group-control]:focus-visible]:outline-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:nc-focus-outline has-[[data-slot][aria-invalid=true]]:outline-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
|
|
12
12
|
variants: {
|
|
@@ -32,9 +32,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
|
|
|
32
32
|
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
|
|
33
33
|
variants: {
|
|
34
34
|
size: {
|
|
35
|
-
xs: "h-6 gap-1 rounded-
|
|
35
|
+
xs: "h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
36
36
|
sm: "",
|
|
37
|
-
"icon-xs": "size-6 rounded-
|
|
37
|
+
"icon-xs": "size-6 rounded-sm p-0 has-[>svg]:p-0",
|
|
38
38
|
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
|
39
39
|
},
|
|
40
40
|
},
|
|
@@ -16,12 +16,12 @@ function InputOTP({ className, containerClassName, ...props }) {
|
|
|
16
16
|
suppressHydrationWarning: true }));
|
|
17
17
|
}
|
|
18
18
|
function InputOTPGroup({ className, ...props }) {
|
|
19
|
-
return (_jsx("div", { "data-slot": "input-otp-group", className: cn("flex items-center rounded-
|
|
19
|
+
return (_jsx("div", { "data-slot": "input-otp-group", className: cn("flex items-center rounded-sm has-aria-invalid:border-destructive has-aria-invalid:nc-focus-outline has-aria-invalid:outline-destructive", className), ...props }));
|
|
20
20
|
}
|
|
21
21
|
function InputOTPSlot({ index, className, ...props }) {
|
|
22
22
|
const inputOTPContext = React.useContext(OTPInputContext);
|
|
23
23
|
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
|
24
|
-
return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex size-control-height min-h-touch-target min-w-touch-target items-center justify-center border-y border-r border-input bg-background text-sm transition-[border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] outline-none first:rounded-l-
|
|
24
|
+
return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex size-control-height min-h-touch-target min-w-touch-target items-center justify-center border-y border-r border-input bg-background text-sm transition-[border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] outline-none first:rounded-l-sm first:border-l last:rounded-r-sm aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:nc-focus-outline data-[active=true]:outline-ring data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:outline-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px bg-foreground" }) }))] }));
|
|
25
25
|
}
|
|
26
26
|
function InputOTPSeparator({ ...props }) {
|
|
27
27
|
return (_jsx("div", { "data-slot": "input-otp-separator", className: "flex items-center [&_svg:not([class*='size-'])]:size-4", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));
|
package/dist/components/input.js
CHANGED
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Input as InputPrimitive } from "@base-ui/react/input";
|
|
3
3
|
import { cn } from "../lib/utils.js";
|
|
4
4
|
function Input({ className, type, ...props }) {
|
|
5
|
-
return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-control-height min-h-touch-target w-full min-w-0 rounded-
|
|
5
|
+
return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-control-height min-h-touch-target w-full min-w-0 rounded-sm border border-input bg-background px-control-padding-inline py-1 text-base transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 md:text-sm", className), ...props }));
|
|
6
6
|
}
|
|
7
7
|
export { Input };
|
package/dist/components/item.js
CHANGED
|
@@ -20,7 +20,7 @@ function ItemGroup({ className, divided = false, render, ...props }) {
|
|
|
20
20
|
function ItemSeparator({ className, ...props }) {
|
|
21
21
|
return (_jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("my-2", className), ...props, "aria-hidden": "true", role: "presentation" }));
|
|
22
22
|
}
|
|
23
|
-
const itemVariants = cva("nc-transition-paint group/item flex w-full flex-wrap items-center rounded-
|
|
23
|
+
const itemVariants = cva("nc-transition-paint group/item flex w-full flex-wrap items-center rounded-sm border text-sm in-data-divided:rounded-none in-data-divided:border-0 [a]:transition-colors [a]:hover:bg-accent [button]:transition-colors [button]:text-left [button]:enabled:hover:bg-accent [button]:disabled:opacity-50", {
|
|
24
24
|
variants: {
|
|
25
25
|
variant: {
|
|
26
26
|
default: "border-transparent",
|
|
@@ -57,7 +57,7 @@ const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 g
|
|
|
57
57
|
variant: {
|
|
58
58
|
default: "bg-transparent",
|
|
59
59
|
icon: "[&_svg:not([class*='size-'])]:size-4",
|
|
60
|
-
image: "size-10 overflow-hidden rounded-
|
|
60
|
+
image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
|
|
61
61
|
},
|
|
62
62
|
},
|
|
63
63
|
defaultVariants: {
|
package/dist/components/kbd.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
3
|
function Kbd({ className, ...props }) {
|
|
4
|
-
return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-
|
|
4
|
+
return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs border border-border bg-recessed px-1 font-label-mono text-caption font-normal text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-recessed in-data-[slot=tooltip-content]:text-popover-foreground [&_svg:not([class*='size-'])]:size-3", className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
function KbdGroup({ className, ...props }) {
|
|
7
7
|
return (_jsx("kbd", { "data-slot": "kbd-group", className: cn("inline-flex items-center gap-1", className), ...props }));
|
|
@@ -4,8 +4,7 @@ import { type TrendDirection } from "./trend-badge.js";
|
|
|
4
4
|
/**
|
|
5
5
|
* kpi-card — one measured figure, the way the dashboard-01 section card shows
|
|
6
6
|
* it: the label above the value, the change top right as a badge, and the
|
|
7
|
-
* named comparison in the footer (`rule/kpi-card-trend-top-right`).
|
|
8
|
-
* divided variant.
|
|
7
|
+
* named comparison in the footer (`rule/kpi-card-trend-top-right`). Use the inline presentation for measurements already grouped inside a section.
|
|
9
8
|
*/
|
|
10
9
|
type KpiCardDirection = TrendDirection;
|
|
11
10
|
type KpiCardTone = "default" | "warning" | "critical";
|
|
@@ -22,7 +21,8 @@ type KpiCardDelta = {
|
|
|
22
21
|
/** The direction in the reader's language, for a screen reader. */
|
|
23
22
|
directionLabel?: string;
|
|
24
23
|
};
|
|
25
|
-
declare function KpiCard({ label, value, delta, note, tone, render, className, }: {
|
|
24
|
+
declare function KpiCard({ label, value, delta, note, tone, render, presentation, className, }: {
|
|
25
|
+
presentation?: "card" | "inline";
|
|
26
26
|
label: React.ReactNode;
|
|
27
27
|
value: React.ReactNode;
|
|
28
28
|
delta?: KpiCardDelta;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kpi-card.d.ts","sourceRoot":"","sources":["../../src/components/kpi-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAW3D,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtF
|
|
1
|
+
{"version":3,"file":"kpi-card.d.ts","sourceRoot":"","sources":["../../src/components/kpi-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAW3D,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtF;;;;GAIG;AAEH,KAAK,gBAAgB,GAAG,cAAc,CAAC;AACvC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,UAAU,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAQF,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,MAAM,EACN,YAAqB,EACrB,SAAS,GACV,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBA+DA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -10,11 +10,10 @@ const VALUE_TONE_CLASS = {
|
|
|
10
10
|
warning: "text-warning-soft-foreground",
|
|
11
11
|
critical: "text-destructive-soft-foreground",
|
|
12
12
|
};
|
|
13
|
-
function KpiCard({ label, value, delta, note, tone = "default", render, className, }) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"text-2xl font-semibold tabular-nums group-data-[size=sm]/card:text-2xl", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(CardAction, { "data-kpi-delta": delta.direction, children: _jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), ...(delta.directionLabel ? { directionLabel: delta.directionLabel } : {}) }) })) : null] }), delta || note ? (_jsxs(CardFooter, { className: "flex-col items-start gap-1.5 pt-0 text-sm", children: [delta ? _jsx("div", { className: "text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("div", { className: "text-muted-foreground", children: note }) : null] })) : null] }));
|
|
13
|
+
function KpiCard({ label, value, delta, note, tone = "default", render, presentation = "card", className, }) {
|
|
14
|
+
if (presentation === "inline") {
|
|
15
|
+
return (_jsxs("div", { className: "grid min-w-0 content-start gap-2", "data-slot": "metric-summary", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("p", { className: cn("text-2xl font-semibold tabular-nums", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), ...(delta.directionLabel ? { directionLabel: delta.directionLabel } : {}) })) : null] }), delta ? _jsx("p", { className: "text-xs text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("p", { className: "text-xs text-muted-foreground", children: note }) : null] }));
|
|
16
|
+
}
|
|
17
|
+
return (_jsxs(Card, { size: "sm", "data-slot": "kpi-card", "data-tone": tone, className: className, ...(render ? { render } : {}), children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { className: "line-clamp-2 min-h-10", children: label }), _jsx(CardTitle, { className: cn("text-heading-md tabular-nums group-data-[size=sm]/card:text-heading-md", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(CardAction, { "data-kpi-delta": delta.direction, children: _jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), ...(delta.directionLabel ? { directionLabel: delta.directionLabel } : {}) }) })) : null] }), delta || note ? (_jsxs(CardFooter, { className: "flex-col items-start gap-1.5 text-sm", children: [delta ? _jsx("div", { className: "text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("div", { className: "text-muted-foreground", children: note }) : null] })) : null] }));
|
|
19
18
|
}
|
|
20
19
|
export { KpiCard };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
3
|
function MetaLabel({ className, ...props }) {
|
|
4
|
-
return (_jsx("span", { "data-slot": "meta-label", className: cn("inline-flex h-5 w-fit shrink-0 items-center justify-center rounded-
|
|
4
|
+
return (_jsx("span", { "data-slot": "meta-label", className: cn("inline-flex h-5 w-fit shrink-0 items-center justify-center rounded-sm border border-border bg-muted/40 px-2 text-xs font-medium text-muted-foreground whitespace-nowrap", className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
function CommandSuffix({ className, ...props }) {
|
|
7
|
-
return (_jsx("span", { "data-slot": "command-suffix", className: cn("inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-
|
|
7
|
+
return (_jsx("span", { "data-slot": "command-suffix", className: cn("inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-sm border border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground tabular-nums whitespace-nowrap", className), ...props }));
|
|
8
8
|
}
|
|
9
9
|
export { CommandSuffix, MetaLabel };
|
package/dist/components/label.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "../lib/utils.js";
|
|
4
4
|
function Label({ className, ...props }) {
|
|
5
|
-
return (_jsx("label", { "data-slot": "label", className: cn("flex items-center gap-2 text-
|
|
5
|
+
return (_jsx("label", { "data-slot": "label", className: cn("flex items-center gap-2 text-label font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
|
|
6
6
|
}
|
|
7
7
|
export { Label };
|
|
@@ -6,7 +6,7 @@ import { cn } from "../lib/utils.js";
|
|
|
6
6
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
|
|
7
7
|
import { CheckIcon } from "lucide-react";
|
|
8
8
|
function Menubar({ className, ...props }) {
|
|
9
|
-
return (_jsx(MenubarPrimitive, { "data-slot": "menubar", className: cn("flex h-control-height min-h-touch-target items-center gap-0.5 rounded-
|
|
9
|
+
return (_jsx(MenubarPrimitive, { "data-slot": "menubar", className: cn("flex h-control-height min-h-touch-target items-center gap-0.5 rounded-sm border p-1 [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function MenubarMenu({ ...props }) {
|
|
12
12
|
return _jsx(DropdownMenu, { "data-slot": "menubar-menu", ...props });
|
|
@@ -18,22 +18,22 @@ function MenubarPortal({ ...props }) {
|
|
|
18
18
|
return _jsx(DropdownMenuPortal, { "data-slot": "menubar-portal", ...props });
|
|
19
19
|
}
|
|
20
20
|
function MenubarTrigger({ className, ...props }) {
|
|
21
|
-
return (_jsx(DropdownMenuTrigger, { "data-slot": "menubar-trigger", className: cn("flex min-h-touch-target items-center rounded-
|
|
21
|
+
return (_jsx(DropdownMenuTrigger, { "data-slot": "menubar-trigger", className: cn("flex min-h-touch-target items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props }));
|
|
22
22
|
}
|
|
23
23
|
function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
|
|
24
24
|
return (_jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("min-w-36 rounded-lg border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating", className), ...props }));
|
|
25
25
|
}
|
|
26
26
|
function MenubarItem({ className, inset, variant = "default", ...props }) {
|
|
27
|
-
return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item min-h-touch-target gap-1.5 rounded-
|
|
27
|
+
return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item min-h-touch-target gap-1.5 rounded-sm px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-soft-foreground data-[variant=destructive]:focus:bg-destructive-soft data-[variant=destructive]:focus:text-destructive-soft-foreground data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-soft-foreground!", className), ...props }));
|
|
28
28
|
}
|
|
29
29
|
function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
30
|
-
return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-
|
|
30
|
+
return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
31
31
|
}
|
|
32
32
|
function MenubarRadioGroup({ ...props }) {
|
|
33
33
|
return _jsx(DropdownMenuRadioGroup, { "data-slot": "menubar-radio-group", ...props });
|
|
34
34
|
}
|
|
35
35
|
function MenubarRadioItem({ className, children, inset, ...props }) {
|
|
36
|
-
return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-
|
|
36
|
+
return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
37
37
|
}
|
|
38
38
|
function MenubarLabel({ className, inset, ...props }) {
|
|
39
39
|
return (_jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuLabel, { "data-slot": "menubar-label", "data-inset": inset, className: cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className), ...props }) }));
|
|
@@ -48,7 +48,7 @@ function MenubarSub({ ...props }) {
|
|
|
48
48
|
return _jsx(DropdownMenuSub, { "data-slot": "menubar-sub", ...props });
|
|
49
49
|
}
|
|
50
50
|
function MenubarSubTrigger({ className, inset, ...props }) {
|
|
51
|
-
return (_jsx(DropdownMenuSubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("min-h-touch-target gap-1.5 rounded-
|
|
51
|
+
return (_jsx(DropdownMenuSubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("min-h-touch-target gap-1.5 rounded-sm px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
52
52
|
}
|
|
53
53
|
function MenubarSubContent({ className, ...props }) {
|
|
54
54
|
return (_jsx(DropdownMenuSubContent, { "data-slot": "menubar-sub-content", className: cn("min-w-32", className), ...props }));
|
|
@@ -42,7 +42,7 @@ function NativeSelect({ className, size = "default", ref, ...props }) {
|
|
|
42
42
|
option.selected = shown.includes(option.value);
|
|
43
43
|
appliedDefault.current = defaultKey;
|
|
44
44
|
}, [defaultKey]);
|
|
45
|
-
return (_jsxs("div", { className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { ref: setRef, "data-slot": "native-select", "data-size": size, className: "h-control-height min-h-touch-target w-full min-w-0 appearance-none rounded-
|
|
45
|
+
return (_jsxs("div", { className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { ref: setRef, "data-slot": "native-select", "data-size": size, className: "h-control-height min-h-touch-target w-full min-w-0 appearance-none rounded-sm border border-input bg-background py-1 pr-8 pl-control-padding-inline text-sm transition-colors select-none selection:bg-primary selection:text-primary-foreground placeholder:text-placeholder disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive data-[size=sm]:h-nadicode-control-height-sm data-[size=sm]:py-0.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-0", ...props }), _jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
|
|
46
46
|
}
|
|
47
47
|
function NativeSelectOption({ className, ...props }) {
|
|
48
48
|
return (_jsx("option", { "data-slot": "native-select-option", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));
|
|
@@ -12,18 +12,18 @@ function NavigationMenuList({ className, ...props }) {
|
|
|
12
12
|
function NavigationMenuItem({ className, ...props }) {
|
|
13
13
|
return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }));
|
|
14
14
|
}
|
|
15
|
-
const navigationMenuTriggerStyle = cva("nc-transition-paint group/navigation-menu-trigger inline-flex h-
|
|
15
|
+
const navigationMenuTriggerStyle = cva("nc-transition-paint group/navigation-menu-trigger inline-flex h-control-height min-h-touch-target min-w-touch-target w-max items-center justify-center rounded-sm px-control-padding-inline py-1.5 text-sm font-medium hover:bg-muted focus:bg-muted disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0");
|
|
16
16
|
function NavigationMenuTrigger({ className, children, ...props }) {
|
|
17
17
|
return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "nc-transition-transform relative top-px ml-1 size-3 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
|
|
18
18
|
}
|
|
19
19
|
function NavigationMenuContent({ className, ...props }) {
|
|
20
|
-
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("h-full w-auto p-nadicode-xxs group-data-[viewport=false]/navigation-menu:origin-(--transform-origin) group-data-[viewport=false]/navigation-menu:rounded-
|
|
20
|
+
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("h-full w-auto p-nadicode-xxs group-data-[viewport=false]/navigation-menu:origin-(--transform-origin) group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:nc-glass group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:nc-elevation-floating group-data-[viewport=false]/navigation-menu:transition-[opacity,scale] group-data-[viewport=false]/navigation-menu:duration-[var(--nc-duration-close)] group-data-[viewport=false]/navigation-menu:ease-[var(--nc-ease-out-strong)] group-data-[viewport=false]/navigation-menu:data-open:duration-[var(--nc-duration-open)] group-data-[viewport=false]/navigation-menu:data-ending-style:opacity-0 group-data-[viewport=false]/navigation-menu:data-ending-style:scale-[0.98] group-data-[viewport=false]/navigation-menu:data-starting-style:opacity-0 group-data-[viewport=false]/navigation-menu:data-starting-style:scale-[0.98] motion-reduce:transition-opacity motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100 **:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function NavigationMenuPositioner({ className, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, ...props }) {
|
|
23
|
-
return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn("group/navigation-menu-positioner isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-
|
|
23
|
+
return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn("group/navigation-menu-positioner isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating transition-[opacity,scale] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] outline-none data-open:duration-[var(--nc-duration-open)] group-data-instant/navigation-menu-positioner:transition-none data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 motion-reduce:transition-opacity motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100", children: _jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" }) }) }) }));
|
|
24
24
|
}
|
|
25
25
|
function NavigationMenuLink({ className, ...props }) {
|
|
26
|
-
return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("nc-transition-paint flex min-h-touch-target min-w-touch-target items-center gap-2 rounded-
|
|
26
|
+
return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("nc-transition-paint flex min-h-touch-target min-w-touch-target items-center gap-2 rounded-sm p-2 text-sm hover:bg-muted focus:bg-muted data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
27
27
|
}
|
|
28
28
|
function NavigationMenuIndicator({ className, ...props }) {
|
|
29
29
|
return (_jsx(NavigationMenuPrimitive.Icon, { "data-slot": "navigation-menu-indicator", className: cn("top-full z-1 flex h-1.5 items-end justify-center overflow-hidden", className), ...props, children: _jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm border border-border nc-glass" }) }));
|
|
@@ -49,8 +49,9 @@ export declare function ObjectSection({ title, description, action, icon, childr
|
|
|
49
49
|
/** A card titles a section of its page; nest it deeper only under another heading. */
|
|
50
50
|
headingLevel?: 2 | 3 | 4;
|
|
51
51
|
}): import("react").JSX.Element;
|
|
52
|
-
export declare function ObjectFacts({ facts, density, }: {
|
|
52
|
+
export declare function ObjectFacts({ facts, density, layout, }: {
|
|
53
53
|
facts: readonly ObjectFact[];
|
|
54
54
|
density?: "compact" | "default";
|
|
55
|
+
layout?: "grid" | "rows";
|
|
55
56
|
}): import("react").JSX.Element;
|
|
56
57
|
//# sourceMappingURL=object-workspace.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"object-workspace.d.ts","sourceRoot":"","sources":["../../src/components/object-workspace.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC;AAErE;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,GACb,EAAE;IACD,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACtC,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACvD,+BA0CA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,GACX,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;CACvB,+BAUA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,YAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1B,+BAkBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAmB,
|
|
1
|
+
{"version":3,"file":"object-workspace.d.ts","sourceRoot":"","sources":["../../src/components/object-workspace.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC;AAErE;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,GACb,EAAE;IACD,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACtC,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACvD,+BA0CA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,GACX,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;CACvB,+BAUA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,YAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1B,+BAkBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAmB,EACnB,MAAe,GAChB,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,+BA2CA"}
|
|
@@ -9,8 +9,8 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle }
|
|
|
9
9
|
* title and its name is the h1; elsewhere the name is text at heading size.
|
|
10
10
|
*/
|
|
11
11
|
export function ObjectIdentity({ visual, title, description, facts, action, menu, headingProps, }) {
|
|
12
|
-
const nameClass = "text-
|
|
13
|
-
return (_jsxs("header", { className: "grid min-w-0 gap-5", "data-slot": "object-identity", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-x-6 gap-y-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 basis-72 items-center gap-4", children: [visual ? _jsx("div", { className: "shrink-0", children: visual }) : null, _jsxs("div", { className: "grid min-w-0 gap-1", children: [headingProps ? (_jsx("h1", { ...headingProps, className: cn(nameClass, "outline-none", headingProps.className), children: title })) : (_jsx("p", { className: nameClass, children: title })), description ? (_jsx("div", { className: "min-w-0 text-
|
|
12
|
+
const nameClass = "text-heading-md break-words text-foreground";
|
|
13
|
+
return (_jsxs("header", { className: "grid min-w-0 gap-5", "data-slot": "object-identity", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-x-6 gap-y-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 basis-72 items-center gap-4", children: [visual ? _jsx("div", { className: "shrink-0", children: visual }) : null, _jsxs("div", { className: "grid min-w-0 gap-1", children: [headingProps ? (_jsx("h1", { ...headingProps, className: cn(nameClass, "outline-none", headingProps.className), children: title })) : (_jsx("p", { className: nameClass, children: title })), description ? (_jsx("div", { className: "min-w-0 text-body-md text-muted-foreground", children: description })) : null] })] }), action || menu ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2", "data-slot": "object-identity-actions", children: [action, menu] })) : null] }), facts && facts.length > 0 ? (_jsx("dl", { className: "flex min-w-0 flex-wrap gap-x-10 gap-y-4", "data-slot": "object-identity-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: fact.label }), _jsx("dd", { className: "flex min-h-6 min-w-0 items-center text-sm", children: fact.value })] }, fact.label))) })) : null] }));
|
|
14
14
|
}
|
|
15
15
|
export function ObjectOverview({ primary, supporting, }) {
|
|
16
16
|
return (_jsxs("div", { "data-slot": "object-overview", className: "grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]", children: [_jsx("div", { className: "grid min-w-0 gap-6", children: primary }), _jsx("div", { className: "grid min-w-0 gap-6", children: supporting })] }));
|
|
@@ -18,8 +18,14 @@ export function ObjectOverview({ primary, supporting, }) {
|
|
|
18
18
|
export function ObjectSection({ title, description, action, icon, children, headingLevel = 2, }) {
|
|
19
19
|
return (_jsxs(Card, { "data-slot": "object-section", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { role: "heading", "aria-level": headingLevel, className: "flex items-center gap-2", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground [&_svg]:size-4", children: icon })) : null, title] }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), _jsx(CardContent, { children: children })] }));
|
|
20
20
|
}
|
|
21
|
-
export function ObjectFacts({ facts, density = "default", }) {
|
|
22
|
-
return (_jsx("dl", { "data-density": density, "data-slot": "object-facts", className:
|
|
23
|
-
? "grid min-w-0
|
|
24
|
-
:
|
|
21
|
+
export function ObjectFacts({ facts, density = "default", layout = "grid", }) {
|
|
22
|
+
return (_jsx("dl", { "data-density": density, "data-slot": "object-facts", className: layout === "rows"
|
|
23
|
+
? "grid min-w-0 divide-y divide-border"
|
|
24
|
+
: density === "compact"
|
|
25
|
+
? "grid min-w-0 grid-cols-2 gap-x-6 gap-y-2"
|
|
26
|
+
: "grid min-w-0 gap-x-6 gap-y-5 sm:grid-cols-2", children: facts.map((fact) => (_jsxs("div", { className: cn(layout === "rows"
|
|
27
|
+
? cn("grid min-w-0 gap-2 py-3", !fact.block && "sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]")
|
|
28
|
+
: density === "compact"
|
|
29
|
+
? "grid min-w-0 gap-0.5"
|
|
30
|
+
: "grid min-w-0 gap-1.5", fact.block && "col-span-full"), children: [_jsxs("dt", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [fact.icon ? (_jsx("span", { "aria-hidden": "true", className: "[&_svg]:size-3.5", children: fact.icon })) : null, fact.label] }), _jsx("dd", { className: cn("text-sm break-words", fact.block && "whitespace-pre-wrap"), children: fact.value })] }, fact.label))) }));
|
|
25
31
|
}
|
|
@@ -31,13 +31,13 @@ export type PageMenu = {
|
|
|
31
31
|
commands: readonly [PageMenuCommand, PageMenuCommand, ...PageMenuCommand[]];
|
|
32
32
|
};
|
|
33
33
|
/**
|
|
34
|
-
* A page's actions (DESIGN.md "Page compositions"):
|
|
35
|
-
*
|
|
34
|
+
* A page's actions (DESIGN.md "Page compositions"): at most one
|
|
35
|
+
* secondary button, the primary action, then the overflow menu at the end.
|
|
36
36
|
*/
|
|
37
37
|
export type PageActionsProps = {
|
|
38
38
|
primary?: PageCommand | undefined;
|
|
39
39
|
secondary?: PageCommand | undefined;
|
|
40
|
-
menu?: PageMenu | undefined;
|
|
40
|
+
menu?: PageMenu | ReactElement | undefined;
|
|
41
41
|
};
|
|
42
42
|
/** One command as a button in a given slot's variant. */
|
|
43
43
|
export declare function PageCommandButton({ command, variant, }: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,iBAAiB,GACzB;IAAE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE;AACvE;;;GAGG;GACD;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE9C,iFAAiF;AACjF,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC,eAAe,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC,CAAC;CAC7E,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAC;CAC5C,CAAC;AAwBF,yDAAyD;AACzD,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC1C,+BAoBA;AAsBD,4FAA4F;AAC5F,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,gBAAgB,sCAiB5E;AAYD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAa5E;AAED,yFAAyF;AACzF,wBAAgB,eAAe,gCAS9B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,sCAuBlD"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useRender } from "@base-ui/react/use-render";
|
|
4
4
|
import { ArrowUpRight } from "lucide-react";
|
|
5
|
-
import { createContext, useCallback, useContext, useEffect, useId, useState, } from "react";
|
|
5
|
+
import { createContext, isValidElement, useCallback, useContext, useEffect, useId, useState, } from "react";
|
|
6
6
|
import { createPortal } from "react-dom";
|
|
7
7
|
import { ActionMenu } from "./action-menu.js";
|
|
8
8
|
import { Button, buttonVariants } from "./button.js";
|
|
@@ -33,7 +33,7 @@ function MenuCommand({ command }) {
|
|
|
33
33
|
export function PageActionsRow({ primary, secondary, menu }) {
|
|
34
34
|
if (!primary && !secondary && !menu)
|
|
35
35
|
return null;
|
|
36
|
-
return (_jsxs("div", { "data-slot": "page-actions", className: "flex shrink-0 flex-wrap items-center gap-2", children: [
|
|
36
|
+
return (_jsxs("div", { "data-slot": "page-actions", className: "flex shrink-0 flex-wrap items-center gap-2", children: [secondary ? _jsx(PageCommandButton, { command: secondary, variant: "outline" }) : null, primary ? _jsx(PageCommandButton, { command: primary, variant: "default" }) : null, isValidElement(menu) ? (menu) : menu ? (_jsx(ActionMenu, { label: menu.label, children: menu.commands.map((command) => (_jsx(MenuCommand, { command: command }, command.label))) })) : null] }));
|
|
37
37
|
}
|
|
38
38
|
const PageActionsHostContext = createContext(null);
|
|
39
39
|
/**
|
|
@@ -63,10 +63,13 @@ export function PageActions(props) {
|
|
|
63
63
|
const id = useId();
|
|
64
64
|
const claim = host?.claim;
|
|
65
65
|
const release = host?.release;
|
|
66
|
+
const hasActions = Boolean(props.primary || props.secondary || props.menu);
|
|
66
67
|
useEffect(() => {
|
|
68
|
+
if (!hasActions)
|
|
69
|
+
return;
|
|
67
70
|
claim?.(id);
|
|
68
71
|
return () => release?.(id);
|
|
69
|
-
}, [claim, release, id]);
|
|
72
|
+
}, [claim, release, id, hasActions]);
|
|
70
73
|
if (!host) {
|
|
71
74
|
return (_jsx("div", { className: "flex justify-end empty:hidden", children: _jsx(PageActionsRow, { ...props }) }));
|
|
72
75
|
}
|