@unisane/ui 0.1.2-next.20261108.1 → 0.1.2-next.20261110.2
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/index.css
CHANGED
|
@@ -128,6 +128,7 @@
|
|
|
128
128
|
--ease-emphasized: var(--ease-emphasized);
|
|
129
129
|
--ease-decelerate: var(--ease-decelerate);
|
|
130
130
|
--ease-accelerate: var(--ease-accelerate);
|
|
131
|
+
--spacing-1: calc(var(--unit) * 1);
|
|
131
132
|
--spacing-2: calc(var(--unit) * 2);
|
|
132
133
|
--spacing-3: calc(var(--unit) * 3);
|
|
133
134
|
--spacing-5: calc(var(--unit) * 5);
|
|
@@ -144,6 +145,7 @@
|
|
|
144
145
|
--z-drawer: var(--z-drawer);
|
|
145
146
|
--z-popover: var(--z-popover);
|
|
146
147
|
--z-modal: var(--z-modal);
|
|
148
|
+
--size-icon-sm: var(--icon-sm);
|
|
147
149
|
--opacity-hover: var(--opacity-hover);
|
|
148
150
|
--opacity-focus: var(--opacity-focus);
|
|
149
151
|
--opacity-pressed: var(--opacity-pressed);
|
|
@@ -1873,12 +1875,15 @@
|
|
|
1873
1875
|
.px-12 {
|
|
1874
1876
|
padding-inline: calc(var(--unit) * 12);
|
|
1875
1877
|
}
|
|
1876
|
-
.px-\[calc\(var\(--unit\)\*3\)\] {
|
|
1877
|
-
padding-inline: calc(var(--unit) * 3);
|
|
1878
|
-
}
|
|
1879
1878
|
.px-\[var\(--layout-margin\)\] {
|
|
1880
1879
|
padding-inline: var(--layout-margin);
|
|
1881
1880
|
}
|
|
1881
|
+
.px-\[var\(--menu-item-content-inset\,calc\(var\(--unit\)\*3\)\)\] {
|
|
1882
|
+
padding-inline: var(--menu-item-content-inset,calc(var(--unit) * 3));
|
|
1883
|
+
}
|
|
1884
|
+
.px-\[var\(--menu-item-content-inset\,calc\(var\(--unit\)\*8\)\)\] {
|
|
1885
|
+
padding-inline: var(--menu-item-content-inset,calc(var(--unit) * 8));
|
|
1886
|
+
}
|
|
1882
1887
|
.px-\[var\(--space-action-padding-x-lg\)\] {
|
|
1883
1888
|
padding-inline: var(--space-action-padding-x-lg);
|
|
1884
1889
|
}
|
|
@@ -15,6 +15,10 @@ export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
selected?: boolean;
|
|
17
17
|
icon?: React.ReactNode;
|
|
18
|
+
/** Decorative selection mark in the leading gutter, independent of content icons.
|
|
19
|
+
* Pass an aria-hidden mark (including an invisible mark on unselected rows).
|
|
20
|
+
* The row's role and checked state remain the caller's responsibility. */
|
|
21
|
+
selectionIndicator?: React.ReactNode;
|
|
18
22
|
trailingIcon?: React.ReactNode;
|
|
19
23
|
href?: string;
|
|
20
24
|
asChild?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/primitives/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAWnD,QAAA,MAAM,YAAY;;8EAgBjB,CAAC;AAKF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAC/E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAkBpC,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/primitives/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAWnD,QAAA,MAAM,YAAY;;8EAgBjB,CAAC;AAKF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAC/E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAkBpC,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;8EAE0E;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4F5C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEpE,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAElD,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsC5D,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4BtD,CAAC"}
|
package/dist/primitives/menu.js
CHANGED
|
@@ -30,13 +30,18 @@ export const Menu = ({ open = true, size, rounded, className, children, ...props
|
|
|
30
30
|
return null;
|
|
31
31
|
return (_jsx(MenuSizeContext.Provider, { value: size ?? inheritedSize, children: _jsx("div", { className: cn(menuVariants({ rounded }), 'py-2', className), role: "menu", ...props, children: children }) }));
|
|
32
32
|
};
|
|
33
|
-
export const MenuItem = ({ children, disabled = false, selected = false, icon, trailingIcon, className, href, asChild, ...props }) => {
|
|
33
|
+
export const MenuItem = ({ children, disabled = false, selected = false, icon, selectionIndicator, trailingIcon, className, href, asChild, ...props }) => {
|
|
34
34
|
const size = React.useContext(MenuSizeContext);
|
|
35
35
|
const label = asChild && isValidElement(children)
|
|
36
36
|
? children.props.children
|
|
37
37
|
: children;
|
|
38
|
-
const itemClasses = cn('text-body-medium relative flex w-full cursor-pointer items-center gap-[calc(var(--unit)*3)] overflow-hidden px-[calc(var(--unit)*3)] text-left select-none', 'text-on-surface transition-colors duration-short ease-standard', 'hover:bg-state-hover focus-visible:bg-state-focus focus-visible:outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
|
|
39
|
-
|
|
38
|
+
const itemClasses = cn('text-body-medium relative flex w-full cursor-pointer items-center gap-[calc(var(--unit)*3)] overflow-hidden px-[var(--menu-item-content-inset,calc(var(--unit)*3))] text-left select-none', 'text-on-surface transition-colors duration-short ease-standard', 'hover:bg-state-hover focus-visible:bg-state-focus focus-visible:outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
|
|
39
|
+
// A selection mark occupies the inset rather than a content-icon column.
|
|
40
|
+
// The public inset token aligns mixed plain, selectable and icon rows.
|
|
41
|
+
selectionIndicator != null && 'px-[var(--menu-item-content-inset,calc(var(--unit)*8))]', menuRowSizes[size], disabled && 'opacity-38 cursor-not-allowed hover:bg-transparent', selected && 'bg-state-selected text-on-surface', className);
|
|
42
|
+
const innerContent = (_jsxs(_Fragment, { children: [_jsx(Ripple, { disabled: disabled }), selectionIndicator != null && (_jsx("span", { "data-slot": "menu-item-selection-indicator", "aria-hidden": "true", className: "size-icon-sm [&>svg]:size-icon-sm pointer-events-none absolute top-1/2 z-10 flex -translate-y-1/2 items-center justify-center", style: {
|
|
43
|
+
insetInlineStart: 'max(0px, calc(var(--menu-item-content-inset, calc(var(--unit) * 8)) - var(--size-icon-sm) - var(--menu-item-indicator-gap, var(--spacing-1))))',
|
|
44
|
+
}, children: selectionIndicator })), icon && _jsx("div", { className: menuIconSlotClasses, children: icon }), _jsx("span", { className: "relative z-10 flex min-w-0 flex-1 translate-y-px items-center truncate", children: label }), trailingIcon && (_jsx("div", { className: cn(menuIconSlotClasses, 'text-on-surface-variant'), children: trailingIcon }))] }));
|
|
40
45
|
// asChild pattern: render user's Link component
|
|
41
46
|
if (asChild && isValidElement(children)) {
|
|
42
47
|
return (_jsx(Slot, { className: itemClasses, role: "menuitem", children: cloneElement(children, {}, innerContent) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/primitives/menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAY,IAAI,CAAC,CAAC;AAC7D,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;CAChC,CAAC;AAEX,MAAM,YAAY,GAAG,GAAG,CACtB,yEAAyE,EACzE;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,KAAK,EAAE,aAAa;SACrB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;KACd;CACF,CACF,CAAC;AAEF,MAAM,mBAAmB,GACvB,+NAA+N,CAAC;AASlO,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACxD,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,IAAI,aAAa,YACpD,cAAK,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,MAAM,KAAK,KAAK,YACpF,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/primitives/menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAY,IAAI,CAAC,CAAC;AAC7D,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;CAChC,CAAC;AAEX,MAAM,YAAY,GAAG,GAAG,CACtB,yEAAyE,EACzE;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,KAAK,EAAE,aAAa;SACrB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;KACd;CACF,CACF,CAAC;AAEF,MAAM,mBAAmB,GACvB,+NAA+N,CAAC;AASlO,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACxD,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,IAAI,aAAa,YACpD,cAAK,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,MAAM,KAAK,KAAK,YACpF,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC,CAAC;AAgBF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,kBAAkB,EAClB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAC/C,MAAM,KAAK,GACT,OAAO,IAAI,cAAc,CAAiC,QAAQ,CAAC;QACjE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ;QACzB,CAAC,CAAC,QAAQ,CAAC;IAEf,MAAM,WAAW,GAAG,EAAE,CACpB,2LAA2L,EAC3L,gEAAgE,EAChE,gJAAgJ;IAChJ,yEAAyE;IACzE,uEAAuE;IACvE,kBAAkB,IAAI,IAAI,IAAI,yDAAyD,EACvF,YAAY,CAAC,IAAI,CAAC,EAClB,QAAQ,IAAI,oDAAoD,EAChE,QAAQ,IAAI,mCAAmC,EAC/C,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,CACnB,8BACE,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,GAAI,EAC7B,kBAAkB,IAAI,IAAI,IAAI,CAC7B,4BACY,+BAA+B,iBAC7B,MAAM,EAClB,SAAS,EAAC,+HAA+H,EACzI,KAAK,EAAE;oBACL,gBAAgB,EACd,gJAAgJ;iBACnJ,YAEA,kBAAkB,GACd,CACR,EACA,IAAI,IAAI,cAAK,SAAS,EAAE,mBAAmB,YAAG,IAAI,GAAO,EAC1D,eAAM,SAAS,EAAC,wEAAwE,YACrF,KAAK,GACD,EACN,YAAY,IAAI,CACf,cAAK,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,yBAAyB,CAAC,YAAG,YAAY,GAAO,CACzF,IACA,CACJ,CAAC;IAEF,gDAAgD;IAChD,IAAI,OAAO,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACxC,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,YAC1C,YAAY,CAAC,QAA8B,EAAE,EAAE,EAAE,YAAY,CAAC,GAC1D,CACR,CAAC;IACJ,CAAC;IAED,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QACtB,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,WAAW,EACtB,IAAI,EAAC,UAAU,mBACA,QAAQ,mBACR,QAAQ,YAEtB,YAAY,GACX,CACL,CAAC;IACJ,CAAC;IAED,OAAO,CACL,iBACE,SAAS,EAAE,WAAW,EACtB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,mBACH,QAAQ,mBACR,QAAQ,KACnB,KAAK,YAER,YAAY,GACN,CACV,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,WAAW,KAAK,KAAK,GAAI,CAAC;AACpG,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,OAAO,GAAG,KAAK,EACf,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,QAAQ,IACP,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YAC5B,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC,EACD,IAAI,EACF,cACE,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,OAAO,IAAI,2CAA2C,CACvD,YAEA,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,eAAe,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,YAC5D,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,GACG,KAEJ,KAAK,YAER,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,OAAO,GAAG,KAAK,EACf,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,QAAQ,IACP,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YAC5B,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC,EACD,IAAI,EACF,cACE,SAAS,EAAE,EAAE,CACX,oFAAoF,EACpF,OAAO,IAAI,2BAA2B,CACvC,YAEA,OAAO,IAAI,cAAK,SAAS,EAAC,wCAAwC,GAAG,GAClE,KAEJ,KAAK,YAER,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unisane/ui",
|
|
3
|
-
"version": "0.1.2-next.
|
|
3
|
+
"version": "0.1.2-next.20261110.2",
|
|
4
4
|
"description": "Open-code React component registry and optional runtime distribution for product interfaces",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
@@ -456,7 +456,7 @@
|
|
|
456
456
|
"cmdk": "^1.1.1",
|
|
457
457
|
"tailwind-merge": "^3.4.0",
|
|
458
458
|
"vaul": "^1.1.2",
|
|
459
|
-
"@unisane/tokens": "0.1.2-next.
|
|
459
|
+
"@unisane/tokens": "0.1.2-next.20261110.2"
|
|
460
460
|
},
|
|
461
461
|
"unisane": {
|
|
462
462
|
"kind": "ui",
|
|
@@ -64,6 +64,10 @@ export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
64
64
|
disabled?: boolean;
|
|
65
65
|
selected?: boolean;
|
|
66
66
|
icon?: React.ReactNode;
|
|
67
|
+
/** Decorative selection mark in the leading gutter, independent of content icons.
|
|
68
|
+
* Pass an aria-hidden mark (including an invisible mark on unselected rows).
|
|
69
|
+
* The row's role and checked state remain the caller's responsibility. */
|
|
70
|
+
selectionIndicator?: React.ReactNode;
|
|
67
71
|
trailingIcon?: React.ReactNode;
|
|
68
72
|
href?: string;
|
|
69
73
|
asChild?: boolean;
|
|
@@ -74,6 +78,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
|
|
|
74
78
|
disabled = false,
|
|
75
79
|
selected = false,
|
|
76
80
|
icon,
|
|
81
|
+
selectionIndicator,
|
|
77
82
|
trailingIcon,
|
|
78
83
|
className,
|
|
79
84
|
href,
|
|
@@ -87,9 +92,12 @@ export const MenuItem: React.FC<MenuItemProps> = ({
|
|
|
87
92
|
: children;
|
|
88
93
|
|
|
89
94
|
const itemClasses = cn(
|
|
90
|
-
'text-body-medium relative flex w-full cursor-pointer items-center gap-[calc(var(--unit)*3)] overflow-hidden px-[calc(var(--unit)*3)] text-left select-none',
|
|
95
|
+
'text-body-medium relative flex w-full cursor-pointer items-center gap-[calc(var(--unit)*3)] overflow-hidden px-[var(--menu-item-content-inset,calc(var(--unit)*3))] text-left select-none',
|
|
91
96
|
'text-on-surface transition-colors duration-short ease-standard',
|
|
92
97
|
'hover:bg-state-hover focus-visible:bg-state-focus focus-visible:outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
|
|
98
|
+
// A selection mark occupies the inset rather than a content-icon column.
|
|
99
|
+
// The public inset token aligns mixed plain, selectable and icon rows.
|
|
100
|
+
selectionIndicator != null && 'px-[var(--menu-item-content-inset,calc(var(--unit)*8))]',
|
|
93
101
|
menuRowSizes[size],
|
|
94
102
|
disabled && 'opacity-38 cursor-not-allowed hover:bg-transparent',
|
|
95
103
|
selected && 'bg-state-selected text-on-surface',
|
|
@@ -99,6 +107,19 @@ export const MenuItem: React.FC<MenuItemProps> = ({
|
|
|
99
107
|
const innerContent = (
|
|
100
108
|
<>
|
|
101
109
|
<Ripple disabled={disabled} />
|
|
110
|
+
{selectionIndicator != null && (
|
|
111
|
+
<span
|
|
112
|
+
data-slot="menu-item-selection-indicator"
|
|
113
|
+
aria-hidden="true"
|
|
114
|
+
className="size-icon-sm [&>svg]:size-icon-sm pointer-events-none absolute top-1/2 z-10 flex -translate-y-1/2 items-center justify-center"
|
|
115
|
+
style={{
|
|
116
|
+
insetInlineStart:
|
|
117
|
+
'max(0px, calc(var(--menu-item-content-inset, calc(var(--unit) * 8)) - var(--size-icon-sm) - var(--menu-item-indicator-gap, var(--spacing-1))))',
|
|
118
|
+
}}
|
|
119
|
+
>
|
|
120
|
+
{selectionIndicator}
|
|
121
|
+
</span>
|
|
122
|
+
)}
|
|
102
123
|
{icon && <div className={menuIconSlotClasses}>{icon}</div>}
|
|
103
124
|
<span className="relative z-10 flex min-w-0 flex-1 translate-y-px items-center truncate">
|
|
104
125
|
{label}
|