@nadicodeai/ui 6.3.1 → 6.3.3
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/dropdown-menu.d.ts +5 -2
- package/dist/components/dropdown-menu.d.ts.map +1 -1
- package/dist/components/dropdown-menu.js +7 -6
- package/dist/components/table.js +1 -1
- package/dist/components/theme-mode-switcher.d.ts +7 -0
- package/dist/components/theme-mode-switcher.d.ts.map +1 -1
- package/dist/components/theme-mode-switcher.js +10 -0
- package/dist/styles/globals.css +5 -0
- package/docs/contract.md +26 -2
- package/package.json +2 -2
|
@@ -3,7 +3,9 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
|
3
3
|
declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
|
|
4
4
|
declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
|
|
5
5
|
declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
|
|
6
|
-
declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">
|
|
6
|
+
declare function DropdownMenuContent({ align, alignOffset, density, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
|
|
7
|
+
density?: "compact" | "comfortable";
|
|
8
|
+
}): React.JSX.Element;
|
|
7
9
|
declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
|
|
8
10
|
declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
|
|
9
11
|
inset?: boolean;
|
|
@@ -21,7 +23,8 @@ declare function DropdownMenuCheckboxItem({ className, children, checked, inset,
|
|
|
21
23
|
inset?: boolean;
|
|
22
24
|
}): React.JSX.Element;
|
|
23
25
|
declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
|
|
24
|
-
declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
|
|
26
|
+
declare function DropdownMenuRadioItem({ className, iconOnly, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
|
|
27
|
+
iconOnly?: boolean;
|
|
25
28
|
inset?: boolean;
|
|
26
29
|
}): React.JSX.Element;
|
|
27
30
|
declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../src/components/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAM5D,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,qBAE3D;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,qBAEnE;AAED,iBAAS,mBAAmB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,qBAErE;AAED,iBAAS,mBAAmB,CAAC,EAC3B,KAAe,EACf,WAAe,EACf,IAAe,EACf,UAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,GAC1B,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../src/components/dropdown-menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,8 +12,8 @@ function DropdownMenuPortal({ ...props }) {
|
|
|
12
12
|
function DropdownMenuTrigger({ ...props }) {
|
|
13
13
|
return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
14
14
|
}
|
|
15
|
-
function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
|
|
16
|
-
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
15
|
+
function DropdownMenuContent({ align = "start", alignOffset = 0, density = "compact", side = "bottom", sideOffset = 4, className, ...props }) {
|
|
16
|
+
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", "data-density": density, className: cn("group/menu z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
17
17
|
}
|
|
18
18
|
function DropdownMenuGroup({ ...props }) {
|
|
19
19
|
return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
@@ -22,13 +22,13 @@ function DropdownMenuLabel({ className, inset, ...props }) {
|
|
|
22
22
|
return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
|
|
23
23
|
}
|
|
24
24
|
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
25
|
-
return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-[var(--nc-error-deep)] data-[variant=destructive]:focus:bg-[var(--nc-error-soft)] data-[variant=destructive]:focus:text-[var(--nc-error-deep)] 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 data-[variant=destructive]:*:[svg]:text-[var(--nc-error-deep)]", className), ...props }));
|
|
25
|
+
return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-[var(--nc-error-deep)] data-[variant=destructive]:focus:bg-[var(--nc-error-soft)] data-[variant=destructive]:focus:text-[var(--nc-error-deep)] 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 data-[variant=destructive]:*:[svg]:text-[var(--nc-error-deep)]", className), ...props }));
|
|
26
26
|
}
|
|
27
27
|
function DropdownMenuSub({ ...props }) {
|
|
28
28
|
return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
|
|
29
29
|
}
|
|
30
30
|
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
31
|
-
return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [@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: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
|
|
31
|
+
return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [@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: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
|
|
32
32
|
}
|
|
33
33
|
function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
|
|
34
34
|
return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-24", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
|
|
@@ -39,8 +39,9 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
|
|
|
39
39
|
function DropdownMenuRadioGroup({ ...props }) {
|
|
40
40
|
return _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
|
|
41
41
|
}
|
|
42
|
-
function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
43
|
-
return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 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",
|
|
42
|
+
function DropdownMenuRadioItem({ className, iconOnly = false, children, inset, ...props }) {
|
|
43
|
+
return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 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", iconOnly &&
|
|
44
|
+
"size-8 min-w-touch-target justify-center rounded-full p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 data-checked:bg-accent data-checked:text-accent-foreground", className), ...props, children: [!iconOnly ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) })) : null, children] }));
|
|
44
45
|
}
|
|
45
46
|
function DropdownMenuSeparator({ className, ...props }) {
|
|
46
47
|
return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
package/dist/components/table.js
CHANGED
|
@@ -15,7 +15,7 @@ function TableFooter({ className, ...props }) {
|
|
|
15
15
|
return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
|
|
16
16
|
}
|
|
17
17
|
function TableRow({ className, ...props }) {
|
|
18
|
-
return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b border-border transition-colors hover:bg-
|
|
18
|
+
return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b border-border transition-colors motion-reduce:transition-none in-[tbody]:hover:bg-accent in-[tbody]:has-[:focus-visible]:bg-accent in-[tbody]:has-aria-expanded:bg-accent data-[state=selected]:bg-muted", className), ...props }));
|
|
19
19
|
}
|
|
20
20
|
function TableHead({ className, ...props }) {
|
|
21
21
|
return (_jsx("th", { "data-slot": "table-head", className: cn("h-9 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
|
|
@@ -21,4 +21,11 @@ export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof RadioGroup
|
|
|
21
21
|
};
|
|
22
22
|
declare function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }: ThemeModeSwitcherProps): React.JSX.Element;
|
|
23
23
|
export { ThemeModeSwitcher };
|
|
24
|
+
export declare function ThemeModeMenu({ label, labels, value, onValueChange, disabled, }: {
|
|
25
|
+
label: string;
|
|
26
|
+
labels: ThemeModeOptionLabels;
|
|
27
|
+
value: ThemeMode;
|
|
28
|
+
onValueChange: (value: ThemeMode) => void;
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
}): React.JSX.Element;
|
|
24
31
|
//# sourceMappingURL=theme-mode-switcher.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBAkDxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAkCA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
|
|
4
|
+
import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "./dropdown-menu.js";
|
|
4
5
|
import { RadioGroup, RadioGroupItem } from "./radio-group.js";
|
|
5
6
|
import { toggleVariants } from "./toggle.js";
|
|
6
7
|
import { isThemeMode, themeModes } from "../lib/theme-mode.js";
|
|
@@ -30,3 +31,12 @@ function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false
|
|
|
30
31
|
}) }));
|
|
31
32
|
}
|
|
32
33
|
export { ThemeModeSwitcher };
|
|
34
|
+
export function ThemeModeMenu({ label, labels, value, onValueChange, disabled, }) {
|
|
35
|
+
return (_jsxs("div", { className: "flex min-h-touch-target items-center justify-between gap-4 px-3 py-1 text-sm", "data-slot": "theme-mode-menu", children: [_jsx("span", { children: label }), _jsx(DropdownMenuRadioGroup, { "aria-label": label, className: "flex shrink-0 items-center gap-0.5 rounded-full border border-border p-0.5", value: value, onValueChange: (next) => {
|
|
36
|
+
if (isThemeMode(next))
|
|
37
|
+
onValueChange(next);
|
|
38
|
+
}, children: ["system", "light", "dark"].map((mode) => {
|
|
39
|
+
const Icon = themeModeIcons[mode];
|
|
40
|
+
return (_jsx(DropdownMenuRadioItem, { value: mode, "aria-label": labels[mode], title: labels[mode], iconOnly: true, closeOnClick: false, disabled: disabled, children: _jsx(Icon, { "aria-hidden": "true" }) }, mode));
|
|
41
|
+
}) })] }));
|
|
42
|
+
}
|
package/dist/styles/globals.css
CHANGED
|
@@ -33,6 +33,11 @@
|
|
|
33
33
|
@apply border-border outline-ring;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
button:not(:disabled, [aria-disabled="true"], [data-disabled]),
|
|
37
|
+
[role="button"]:not(:disabled, [aria-disabled="true"], [data-disabled]) {
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
}
|
|
40
|
+
|
|
36
41
|
html {
|
|
37
42
|
@apply font-sans;
|
|
38
43
|
}
|
package/docs/contract.md
CHANGED
|
@@ -86,7 +86,11 @@ must fit their available width without horizontal scrolling: preserve identity
|
|
|
86
86
|
and actions in columns and place supporting facts in native detail rows before
|
|
87
87
|
the full schema becomes cramped. Test the table container itself, not only the
|
|
88
88
|
document width; retaining the overflow safety boundary must not conceal a
|
|
89
|
-
layout defect.
|
|
89
|
+
layout defect. Body rows use the full `bg-accent` fill on hover, keyboard focus
|
|
90
|
+
within, and while a descendant menu is expanded. Headers and footers do not gain
|
|
91
|
+
the body-row hover treatment. Keep cell backgrounds transparent so they do not
|
|
92
|
+
hide the shared highlight. The design system's interaction states own the
|
|
93
|
+
cross-product table and action affordances.
|
|
90
94
|
|
|
91
95
|
`CollectionScope` chooses the parent of one record collection. It places the
|
|
92
96
|
scope selector and optional detail action above the collection toolbar. Empty
|
|
@@ -101,7 +105,8 @@ Its caption names the table. Callers supply data and labels, not column-hiding C
|
|
|
101
105
|
### Record action menus
|
|
102
106
|
|
|
103
107
|
`ActionMenu` is the shared three-dot composition of `Button` and `DropdownMenu`:
|
|
104
|
-
a ghost icon trigger, horizontal ellipsis, and end-aligned popup.
|
|
108
|
+
a ghost icon trigger, horizontal ellipsis, and end-aligned popup. The shared
|
|
109
|
+
stylesheet gives enabled buttons a pointer cursor, including this trigger. It inherits the
|
|
105
110
|
menu's glass, elevation, motion, keyboard behavior, and focus return. Supply
|
|
106
111
|
`label` as a localized, record-specific accessible name; `triggerId` supports
|
|
107
112
|
focus return from an app-owned confirmation, and `children` supplies menu items.
|
|
@@ -238,3 +243,22 @@ package or Portal-kit imports. A new repeated pattern is consolidated at its
|
|
|
238
243
|
owner and pinned with a focused source or rendering test; generic JSX
|
|
239
244
|
similarity warnings are outside this contract because they cannot distinguish
|
|
240
245
|
valid domain composition from a fork without false positives.
|
|
246
|
+
|
|
247
|
+
### Explanations belong to the content they explain
|
|
248
|
+
|
|
249
|
+
Compose a card or settings section around a real task, collection, or form. Its
|
|
250
|
+
header names that content and can explain scope or consequences; its footer
|
|
251
|
+
can carry secondary guidance or the save action. Field help belongs beside the
|
|
252
|
+
field. Do not create a paragraph-only card to conceal an orphan introduction.
|
|
253
|
+
Portal placement is owned by its [context contract](../../../apps/portal/docs/information-architecture.md#context-breadcrumbs-headings-and-labels);
|
|
254
|
+
`DataTable.heading`, `CardHeader` and `SettingsSection` are its composition
|
|
255
|
+
seams. Empty states and operational notices remain distinct message owners.
|
|
256
|
+
|
|
257
|
+
### Account popup composition
|
|
258
|
+
|
|
259
|
+
`DropdownMenuContent density="comfortable"` supplies roomier command rows
|
|
260
|
+
through the shared owner. Account-menu consumers put the label first and the
|
|
261
|
+
icon at the trailing edge. `ThemeModeMenu` supplies the named inline theme
|
|
262
|
+
row with three exclusive menu radio items; `iconOnly` retains each radio's
|
|
263
|
+
accessible name and checked state without a second checkmark. Theme selection
|
|
264
|
+
keeps the menu open. Consumers bind preference persistence and localized labels.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@assistant-ui/react": "0.15.18",
|
|
71
71
|
"@assistant-ui/react-markdown": "0.14.14",
|
|
72
72
|
"@base-ui/react": "^1.8.0",
|
|
73
|
-
"@nadicodeai/design-system": "6.3.
|
|
73
|
+
"@nadicodeai/design-system": "6.3.3",
|
|
74
74
|
"@paper-design/shaders": "0.0.80",
|
|
75
75
|
"class-variance-authority": "^0.7.1",
|
|
76
76
|
"clsx": "^2.1.1",
|