@moldable-ai/ui 0.2.29 → 0.2.31

package/dist/components/ui/dropdown-menu.js

@@ -75,22 +75,22 @@ function DropdownMenuTrigger({ onClick, onKeyDown, onPointerDown, ...props }) {
         }, ...props }));
 }
 function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground shadow-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) rounded-overlay z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden border p-1', className), ...props }) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground shadow-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) rounded-overlay z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden border px-1 py-[var(--m-ui-menu-padding-block)]', className), ...props }) }));
 }
 function DropdownMenuGroup({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
 }
 function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] px-2 py-1.5 data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
 }
 function DropdownMenuCheckboxItem({ className, children, checked, variant = 'default', ...props }) {
-    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
 }
 function DropdownMenuRadioGroup({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
 }
 function DropdownMenuRadioItem({ className, children, variant = 'default', ...props }) {
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
     return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('text-ui-body px-2 py-1.5 font-medium data-[inset]:pl-8', className), ...props }));
@@ -105,10 +105,10 @@ function DropdownMenuSub({ ...props }) {
     return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({ className, inset, children, variant = 'default', ...props }) {
-    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden rounded-control text-ui-body flex cursor-default select-none items-center gap-2 px-2 py-1.5 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden text-ui-body flex cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] px-2 py-1.5 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
 }
 function DropdownMenuSubContent({ className, ...props }) {
-    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn('bg-popover text-popover-foreground shadow-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) rounded-overlay z-50 min-w-[8rem] overflow-hidden border p-1', className), ...props }));
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn('bg-popover text-popover-foreground shadow-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) rounded-overlay z-50 min-w-[8rem] overflow-hidden border px-1 py-[var(--m-ui-menu-padding-block)]', className), ...props }));
 }
 function DropdownMenuGeneratedItems({ items, onSelectItem, }) {
     return items.map((item) => {

package/dist/components/ui/icon-button.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from './button.js';
-type IconButtonSize = 'xs' | 'sm' | 'default' | 'lg';
+type IconButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
 interface IconButtonProps extends Omit<React.ComponentProps<typeof Button>, 'aria-label' | 'asChild' | 'size'> {
     /** Required accessible name for the icon-only control. */
     label: string;

package/dist/components/ui/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;AASpD,UAAU,eACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,YAAY,GAAG,SAAS,GAAG,MAAM,CAClC;IACD,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B;AAED,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAe,EACf,KAAiB,EACjB,IAAgB,EAChB,OAAO,EACP,IAAe,EACf,GAAG,KAAK,EACT,EAAE,eAAe,2CAgBjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,CAAA"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAU3D,UAAU,eACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,YAAY,GAAG,SAAS,GAAG,MAAM,CAClC;IACD,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B;AAED,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAe,EACf,KAAiB,EACjB,IAAgB,EAChB,OAAO,EACP,IAAe,EACf,GAAG,KAAK,EACT,EAAE,eAAe,2CAgBjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,CAAA"}

package/dist/components/ui/icon-button.js

@@ -7,6 +7,7 @@ const buttonSizeByIconSize = {
     sm: 'icon-sm',
     default: 'icon',
     lg: 'icon-lg',
+    xl: 'icon-xl',
 };
 function IconButton({ children, className, disabled, label, loading = false, shape = 'rounded', size = 'default', tooltip, type = 'button', ...props }) {
     return (_jsx(Button, { "data-slot": "icon-button", "aria-label": label, title: tooltip === true ? label : tooltip || undefined, type: type, size: buttonSizeByIconSize[size], disabled: disabled, loading: loading, className: cn(shape === 'circle' && 'rounded-pill', className), ...props, children: children }));

package/dist/components/ui/input.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
-declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
-export { Input };
+import type { ControlSize } from '../../tokens/contracts.js';
+interface InputProps extends React.ComponentProps<'input'> {
+    controlSize?: ControlSize;
+}
+declare function Input({ className, controlSize, type, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export { Input, type InputProps };
 //# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACxD,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAepE;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAA"}

package/dist/components/ui/input.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
-function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs rounded-control text-16 file:text-ui-body md:text-ui-body h-control-md px-control-inline file:h-control-xs w-full min-w-0 border bg-transparent py-1 outline-none transition-[color,box-shadow] file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-1', 'aria-invalid:border-destructive', className), ...props }));
+function Input({ className, controlSize, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", "data-control-size": controlSize, className: cn('file:text-foreground border-input shadow-xs text-ui-body file:text-ui-body file:h-control-xs h-[var(--m-ui-control-height)] w-full min-w-0 rounded-[var(--m-ui-control-radius)] border bg-transparent px-[var(--m-ui-field-inset-inline)] outline-none transition-[color,box-shadow] selection:bg-[var(--m-ui-color-accent)] selection:text-white file:inline-flex file:border-0 file:bg-transparent file:font-medium placeholder:text-[var(--m-ui-color-text-secondary)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-[var(--m-ui-color-text-tertiary)]', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive', className), ...props }));
 }
 export { Input };

package/dist/components/ui/material.d.ts

@@ -3,15 +3,20 @@ import { type VariantProps } from 'class-variance-authority';
 declare const materialVariants: (props?: ({
     shape?: "circle" | "rounded" | "capsule" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type MaterialVariant = 'regular' | 'clear';
+export type MaterialVariant = 'regular' | 'clear' | 'ultra-thick' | 'thick' | 'medium' | 'thin' | 'ultra-thin';
 export type MaterialShape = NonNullable<VariantProps<typeof materialVariants>['shape']>;
 export type MaterialElevation = 'none' | 'panel' | 'overlay';
 export interface MaterialProps extends React.ComponentPropsWithoutRef<'div'>, VariantProps<typeof materialVariants> {
     /**
-     * `regular` is the default for toolbars and control chrome. Reserve `clear`
-     * for compact controls floating above media or a richly colored canvas.
+     * `regular` aliases the medium standard material and `clear` aliases the
+     * ultra-thin material for backwards compatibility. Prefer a named standard
+     * material when the hierarchy is known.
      */
     variant?: MaterialVariant;
+    /**
+     * Material thickness controls translucency only. Add an elevation explicitly
+     * when the surface is a floating panel, overlay, or dialog.
+     */
     elevation?: MaterialElevation;
     interactive?: boolean;
     asChild?: boolean;

package/dist/components/ui/material.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../../../src/components/ui/material.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,gBAAgB;;8EAWpB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AACjD,MAAM,MAAM,aAAa,GAAG,WAAW,CACrC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAC/C,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAE5D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC3C,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAe,EACf,SAAS,EACT,SAAmB,EACnB,WAAmB,EACnB,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,2CAcf;AAED,QAAA,MAAM,oBAAoB;;;;CAIhB,CAAA;AAEV,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,aAAa,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,oBAAoB,CAAA;CAC5C;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../../../src/components/ui/material.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,gBAAgB;;8EAWpB,CAAA;AAEF,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,OAAO,GACP,aAAa,GACb,OAAO,GACP,QAAQ,GACR,MAAM,GACN,YAAY,CAAA;AAChB,MAAM,MAAM,aAAa,GAAG,WAAW,CACrC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAC/C,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAE5D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC3C,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAe,EACf,SAAS,EACT,SAAkB,EAClB,WAAmB,EACnB,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,2CAcf;AAED,QAAA,MAAM,oBAAoB;;;;CAIhB,CAAA;AAEV,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,aAAa,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,oBAAoB,CAAA;CAC5C;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/material.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const materialVariants = cva('moldable-material border text-inherit', {
+const materialVariants = cva('moldable-material text-inherit', {
     variants: {
         shape: {
             rounded: 'rounded-overlay',
@@ -15,7 +15,7 @@ const materialVariants = cva('moldable-material border text-inherit', {
         shape: 'rounded',
     },
 });
-function Material({ asChild = false, className, elevation = 'panel', interactive = false, shape, variant = 'regular', ...props }) {
+function Material({ asChild = false, className, elevation = 'none', interactive = false, shape, variant = 'regular', ...props }) {
     const Comp = asChild ? Slot : 'div';
     return (_jsx(Comp, { "data-slot": asChild ? undefined : 'material', "data-material": variant, "data-material-elevation": elevation, "data-material-interactive": interactive || undefined, "data-material-shape": shape ?? 'rounded', className: cn(materialVariants({ shape }), className), ...props }));
 }

package/dist/components/ui/search-field.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import type { ControlSize } from '../../tokens/contracts.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const searchFieldVariants: (props?: ({
     variant?: "default" | "filled" | null | undefined;
     density?: "compact" | "default" | "comfortable" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SearchFieldProps extends Omit<React.ComponentProps<'input'>, 'defaultValue' | 'size' | 'type' | 'value'>, VariantProps<typeof searchFieldVariants> {
+    controlSize?: ControlSize;
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -14,6 +16,6 @@ interface SearchFieldProps extends Omit<React.ComponentProps<'input'>, 'defaultV
     loading?: boolean;
     inputClassName?: string;
 }
-declare function SearchField({ className, inputClassName, value, defaultValue, onChange, onValueChange, onClear, onKeyDown, clearable, clearLabel, loading, variant, density, disabled, readOnly, ref, ...props }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function SearchField({ className, controlSize, inputClassName, value, defaultValue, onChange, onValueChange, onClear, onKeyDown, clearable, clearLabel, loading, variant, density, disabled, readOnly, ref, ...props }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
 export { SearchField, searchFieldVariants, type SearchFieldProps };
 //# sourceMappingURL=search-field.d.ts.map

package/dist/components/ui/search-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/search-field.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,mBAAmB;;;8EAmBxB,CAAA;AAED,UAAU,gBACR,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAC3C,EACD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,cAAc,EACd,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAS,EACT,SAAgB,EAChB,UAA2B,EAC3B,OAAe,EACf,OAAmB,EACnB,OAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAmGlB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/search-field.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,mBAAmB;;;8EAmBxB,CAAA;AAED,UAAU,gBACR,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAC3C,EACD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,WAAW,EACX,cAAc,EACd,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAS,EACT,SAAgB,EAChB,UAA2B,EAC3B,OAAe,EACf,OAAmB,EACnB,OAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAmHlB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/search-field.js

@@ -12,9 +12,9 @@ const searchFieldVariants = cva('group/search-field border-input has-[:focus-vis
             filled: 'border-transparent bg-muted/70 shadow-none',
         },
         density: {
-            compact: 'h-control-sm',
-            default: 'h-control-md',
-            comfortable: 'h-control-md',
+            compact: 'h-control-md',
+            default: 'h-control-lg',
+            comfortable: 'h-control-xl',
         },
     },
     defaultVariants: {
@@ -22,7 +22,13 @@ const searchFieldVariants = cva('group/search-field border-input has-[:focus-vis
         density: 'default',
     },
 });
-function SearchField({ className, inputClassName, value, defaultValue = '', onChange, onValueChange, onClear, onKeyDown, clearable = true, clearLabel = 'Clear search', loading = false, variant = 'default', density = 'default', disabled, readOnly, ref, ...props }) {
+function SearchField({ className, controlSize, inputClassName, value, defaultValue = '', onChange, onValueChange, onClear, onKeyDown, clearable = true, clearLabel = 'Clear search', loading = false, variant = 'default', density = 'default', disabled, readOnly, ref, ...props }) {
+    const resolvedControlSize = controlSize ??
+        {
+            compact: 'medium',
+            default: 'large',
+            comfortable: 'xl',
+        }[density ?? 'default'];
     const controlled = value !== undefined;
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const inputRef = React.useRef(null);
@@ -46,8 +52,12 @@ function SearchField({ className, inputClassName, value, defaultValue = '', onCh
         onClear?.();
         inputRef.current?.focus();
     }, [commitValue, currentValue, onClear]);
-    const iconSize = density === 'compact' ? 'size-3.5' : 'size-4';
-    return (_jsxs("div", { "data-slot": "search-field", "data-density": density, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn(searchFieldVariants({ variant, density }), disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground pointer-events-none flex shrink-0 items-center pl-2.5", children: loading ? (_jsx(LoaderCircleIcon, { className: cn(iconSize, 'animate-spin') })) : (_jsx(SearchIcon, { className: iconSize })) }), _jsx("input", { ref: setRefs, "data-slot": "search-field-input", type: "search", value: currentValue, disabled: disabled, readOnly: readOnly, className: cn('placeholder:text-muted-foreground text-ui-body min-w-0 flex-1 appearance-none bg-transparent px-2 outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden', density === 'compact' && 'text-ui-caption', inputClassName), onChange: (event) => {
+    const iconSize = density === 'comfortable'
+        ? 'size-4.5'
+        : density === 'compact'
+            ? 'size-3.5'
+            : 'size-4';
+    return (_jsxs("div", { "data-slot": "search-field", "data-density": density, "data-control-size": resolvedControlSize, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn(searchFieldVariants({ variant, density }), 'h-[var(--m-ui-control-height)] rounded-[var(--m-ui-control-radius)]', disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground pointer-events-none flex shrink-0 items-center pl-[var(--m-ui-field-inset-inline)]", children: loading ? (_jsx(LoaderCircleIcon, { className: cn(iconSize, 'animate-spin') })) : (_jsx(SearchIcon, { className: iconSize })) }), _jsx("input", { ref: setRefs, "data-slot": "search-field-input", type: "search", value: currentValue, disabled: disabled, readOnly: readOnly, className: cn('placeholder:text-muted-foreground text-ui-body min-w-0 flex-1 appearance-none bg-transparent px-2 outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden', density === 'compact' && 'text-ui-body', inputClassName), onChange: (event) => {
                     onChange?.(event);
                     commitValue(event.currentTarget.value);
                 }, onKeyDown: (event) => {

package/dist/components/ui/segmented-control.d.ts

@@ -1,5 +1,6 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
+import type { ControlSize } from '../../tokens/contracts.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const segmentedControlVariants: (props?: ({
     variant?: "outline" | "muted" | null | undefined;
@@ -11,8 +12,9 @@ declare const segmentedControlItemVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SegmentedControlProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root>, VariantProps<typeof segmentedControlVariants> {
+    controlSize?: ControlSize;
 }
-declare function SegmentedControl({ className, variant, density, fullWidth, orientation, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ className, controlSize, variant, density, fullWidth, orientation, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
 interface SegmentedControlItemProps extends React.ComponentProps<typeof RadioGroupPrimitive.Item> {
     iconOnly?: boolean;
 }

package/dist/components/ui/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/ui/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,wBAAwB;;;;8EAwB7B,CAAA;AAED,QAAA,MAAM,4BAA4B;;;8EAsBjC,CAAA;AAaD,UAAU,qBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,EAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAiB,EACjB,OAAmB,EACnB,SAAiB,EACjB,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAoBvB;AAED,UAAU,yBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAqB3B;AAED,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,4BAA4B,EAC5B,wBAAwB,GACzB,CAAA"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/ui/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,wBAAwB;;;;8EAwB7B,CAAA;AAED,QAAA,MAAM,4BAA4B;;;8EAsBjC,CAAA;AAeD,UAAU,qBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,EAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,WAAW,EACX,OAAiB,EACjB,OAAmB,EACnB,SAAiB,EACjB,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAmCvB;AAED,UAAU,yBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAmB3B;AAED,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,4BAA4B,EAC5B,wBAAwB,GACzB,CAAA"}

package/dist/components/ui/segmented-control.js

@@ -4,16 +4,16 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const segmentedControlVariants = cva('inline-flex w-fit items-center overflow-x-auto rounded-group p-0.5 text-muted-foreground', {
+const segmentedControlVariants = cva('inline-flex h-[var(--m-ui-control-height)] w-fit items-center overflow-x-auto rounded-[var(--m-ui-control-radius)] bg-[var(--m-ui-color-fill-quinary)] p-0 text-[var(--m-ui-color-text-secondary)]', {
     variants: {
         variant: {
             muted: 'bg-muted/70',
             outline: 'border border-border/80 bg-background shadow-xs',
         },
         density: {
-            compact: 'min-h-control-sm',
-            default: 'min-h-control-md',
-            comfortable: 'min-h-control-sm',
+            compact: '',
+            default: '',
+            comfortable: '',
         },
         fullWidth: {
             true: 'flex w-full',
@@ -26,12 +26,12 @@ const segmentedControlVariants = cva('inline-flex w-fit items-center overflow-x-
         fullWidth: false,
     },
 });
-const segmentedControlItemVariants = cva('relative inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-control font-medium outline-none transition-[background-color,color,box-shadow] hover:bg-control-hover hover:text-foreground active:bg-control-pressed active:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:z-10 focus-visible:ring-1 focus-visible:ring-ring data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:shadow-xs data-[state=checked]:hover:bg-control-hover data-[state=checked]:active:bg-control-pressed [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+const segmentedControlItemVariants = cva('relative -ml-px inline-flex h-[var(--m-ui-control-height)] cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-[var(--m-ui-control-radius)] px-[var(--m-ui-segment-margin)] font-medium outline-none transition-[background-color,color,box-shadow] first:ml-0 hover:bg-control-hover hover:text-foreground active:bg-control-pressed active:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring data-[state=checked]:bg-[var(--m-ui-color-accent)] data-[state=checked]:text-white data-[state=checked]:shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0', {
     variants: {
         density: {
-            compact: 'min-h-6 gap-1 px-2 text-ui-caption [&_svg:not([class*="size-"])]:size-3',
-            default: 'min-h-7 gap-1.5 px-2.5 text-ui-body [&_svg:not([class*="size-"])]:size-3.5',
-            comfortable: 'min-h-8 gap-1.5 px-3 text-ui-body [&_svg:not([class*="size-"])]:size-4',
+            compact: 'gap-1 text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*="size-"])]:size-3',
+            default: 'gap-1.5 text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*="size-"])]:size-3.5',
+            comfortable: 'gap-1.5 text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*="size-"])]:size-4',
         },
         fullWidth: {
             true: 'min-w-0 flex-1',
@@ -46,17 +46,23 @@ const segmentedControlItemVariants = cva('relative inline-flex cursor-pointer se
 const SegmentedControlContext = React.createContext({
     density: 'default',
     fullWidth: false,
+    controlSize: undefined,
 });
-function SegmentedControl({ className, variant = 'muted', density = 'default', fullWidth = false, orientation = 'horizontal', ...props }) {
-    return (_jsx(SegmentedControlContext.Provider, { value: { density: density ?? 'default', fullWidth: Boolean(fullWidth) }, children: _jsx(RadioGroupPrimitive.Root, { "data-slot": "segmented-control", "data-variant": variant, "data-density": density, "data-full-width": fullWidth, orientation: orientation, className: cn(segmentedControlVariants({ variant, density, fullWidth }), orientation === 'vertical' && 'flex-col', className), ...props }) }));
+function SegmentedControl({ className, controlSize, variant = 'muted', density = 'default', fullWidth = false, orientation = 'horizontal', ...props }) {
+    const resolvedControlSize = controlSize ??
+        {
+            compact: 'small',
+            default: 'medium',
+            comfortable: 'large',
+        }[density ?? 'default'];
+    return (_jsx(SegmentedControlContext.Provider, { value: {
+            controlSize: resolvedControlSize,
+            density: density ?? 'default',
+            fullWidth: Boolean(fullWidth),
+        }, children: _jsx(RadioGroupPrimitive.Root, { "data-slot": "segmented-control", "data-variant": variant, "data-density": density, "data-control-size": resolvedControlSize, "data-full-width": fullWidth, orientation: orientation, className: cn(segmentedControlVariants({ variant, density, fullWidth }), orientation === 'vertical' && 'flex-col', className), ...props }) }));
 }
 function SegmentedControlItem({ className, iconOnly = false, ...props }) {
-    const { density, fullWidth } = React.useContext(SegmentedControlContext);
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "segmented-control-item", "data-density": density, "data-icon-only": iconOnly, className: cn(segmentedControlItemVariants({ density, fullWidth }), iconOnly &&
-            {
-                compact: 'size-6 p-0',
-                default: 'size-7 p-0',
-                comfortable: 'size-8 p-0',
-            }[density], className), ...props }));
+    const { controlSize, density, fullWidth } = React.useContext(SegmentedControlContext);
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "segmented-control-item", "data-density": density, "data-control-size": controlSize, "data-icon-only": iconOnly, className: cn(segmentedControlItemVariants({ density, fullWidth }), iconOnly && 'size-[var(--m-ui-control-height)] p-0', className), ...props }));
 }
 export { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants, segmentedControlVariants, };

package/dist/components/ui/select.js

@@ -17,14 +17,14 @@ function SelectTrigger({ className, size = 'default', children, ...props }) {
 }
 function SelectContent({ className, children, position = 'item-aligned', align = 'center', ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) rounded-overlay shadow-overlay relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden border', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { role: "group", tabIndex: 0, className: cn('p-1', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { role: "group", tabIndex: 0, className: cn('px-1 py-[var(--m-ui-menu-padding-block)]', position === 'popper' &&
                         'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn('text-muted-foreground text-ui-caption px-2 py-1.5', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 rounded-control text-ui-body relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pl-2 pr-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 text-ui-body relative flex w-full cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] py-1.5 pl-2 pr-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('bg-border pointer-events-none -mx-1 my-1 h-px', className), ...props }));

package/dist/components/ui/sidebar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { UISidebarStyle } from '../../tokens/contracts.js';
 import { Button } from './button.js';
 import { Input } from './input.js';
 import { Separator } from './separator.js';
@@ -19,9 +20,10 @@ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: se
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
-declare function Sidebar({ side, variant, collapsible, className, children, ref, ...props }: React.ComponentProps<'div'> & {
+declare function Sidebar({ side, variant, sidebarStyle, collapsible, className, children, ref, ...props }: React.ComponentProps<'div'> & {
     side?: 'left' | 'right';
     variant?: 'sidebar' | 'floating' | 'inset';
+    sidebarStyle?: UISidebarStyle;
     collapsible?: 'offcanvas' | 'icon' | 'none';
 }): import("react/jsx-runtime").JSX.Element;
 declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
@@ -33,7 +35,7 @@ declare function SidebarFooter({ className, ...props }: React.ComponentProps<'di
 declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
+declare function SidebarGroupLabel({ className, asChild, style, ...props }: React.ComponentProps<'div'> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
@@ -46,7 +48,7 @@ declare const sidebarMenuButtonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, style, ...props }: React.ComponentProps<'button'> & {
     asChild?: boolean;
     isActive?: boolean;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;

package/dist/components/ui/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/sidebar.js

@@ -4,6 +4,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { PanelLeftIcon } from 'lucide-react';
 import * as React from 'react';
 import { MOLDABLE_MATERIAL_REGION_MESSAGE_TYPE } from '../../lib/frame-lifecycle.js';
+import { useOptionalTheme } from '../../lib/theme.js';
 import { cn } from '../../lib/utils.js';
 import { useIsMobile } from '../../hooks/use-mobile.js';
 import { useAppFrameRuntime } from './app-frame.js';
@@ -16,7 +17,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './too
 import { cva } from 'class-variance-authority';
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH = 'var(--m-ui-sidebar-width, 16rem)';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
@@ -41,6 +42,7 @@ function useSidebarMaterialRegion({ enabled, forwardedRef, }) {
     }, [forwardedRef]);
     const canDeclare = enabled &&
         appFrame?.mode === 'window' &&
+        appFrame.sidebarMaterialEnabled === true &&
         appFrame.sidebarMaterialAvailable === true;
     React.useEffect(() => {
         const element = elementRef.current;
@@ -158,32 +160,49 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
                     ...style,
                 }, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className), ...props, children: children }) }) }));
 }
-function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ref, ...props }) {
+function Sidebar({ side = 'left', variant = 'sidebar', sidebarStyle, collapsible = 'offcanvas', className, children, ref, ...props }) {
+    const theme = useOptionalTheme();
+    const resolvedSidebarStyle = sidebarStyle ?? theme?.sidebarStyle ?? 'edge-to-edge';
+    const resolvedVariant = resolvedSidebarStyle === 'floating'
+        ? 'floating'
+        : resolvedSidebarStyle === 'edge-to-edge'
+            ? 'sidebar'
+            : variant;
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     const materialRegion = useSidebarMaterialRegion({
         enabled: !isMobile &&
             side === 'left' &&
-            variant === 'sidebar' &&
+            resolvedVariant === 'sidebar' &&
             !(state === 'collapsed' && collapsible === 'offcanvas'),
         forwardedRef: ref,
     });
     if (collapsible === 'none') {
-        return (_jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'text-sidebar-foreground w-(--sidebar-width) flex flex-col self-stretch', className), ...props, children: children }));
+        return (_jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'text-sidebar-foreground w-(--sidebar-width) flex flex-col self-stretch', resolvedVariant === 'floating' &&
+                'border-[length:var(--m-ui-sidebar-border-width,0px)] [border-color:var(--m-ui-sidebar-border-color,var(--sidebar-border))]', className), ...props, children: children }));
     }
     if (isMobile) {
-        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
     }
-    return (_jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+    return (_jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": resolvedVariant, "data-side": side, "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', resolvedVariant === 'floating' || resolvedVariant === 'inset'
                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
                     : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar-container", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn('w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
                 // Adjust the padding for floating and inset variants.
-                variant === 'floating' || variant === 'inset'
-                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-container flex h-full w-full flex-col group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'), children: children }) })] }));
+                resolvedVariant === 'floating' || resolvedVariant === 'inset'
+                    ? 'p-[var(--m-ui-sidebar-window-inset,0.5rem)] group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) [border-color:var(--m-ui-sidebar-divider-color,var(--sidebar-border))] group-data-[side=left]:border-r-[length:var(--m-ui-sidebar-divider-width,1px)] group-data-[side=right]:border-l-[length:var(--m-ui-sidebar-divider-width,1px)]', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'flex h-full w-full flex-col'), style: resolvedVariant === 'floating'
+                        ? {
+                            borderRadius: 'var(--m-ui-sidebar-shell-radius, var(--shape-container))',
+                            borderStyle: 'solid',
+                            borderWidth: 'var(--m-ui-sidebar-border-width, 0px)',
+                            borderColor: 'var(--m-ui-sidebar-border-color, var(--sidebar-border))',
+                            boxShadow: 'var(--m-ui-sidebar-shadow, var(--material-shadow-sidebar))',
+                            backdropFilter: 'blur(var(--m-ui-sidebar-glass-effect-radius, 0px))',
+                        }
+                        : undefined, children: children }) })] }));
 }
 function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar();
@@ -217,9 +236,14 @@ function SidebarContent({ className, ...props }) {
 function SidebarGroup({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
 }
-function SidebarGroupLabel({ className, asChild = false, ...props }) {
+function SidebarGroupLabel({ className, asChild = false, style, ...props }) {
     const Comp = asChild ? Slot : 'div';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden rounded-control text-ui-caption flex h-8 shrink-0 items-center px-2 font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden text-ui-caption flex shrink-0 items-center font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), style: {
+            minHeight: 'var(--m-ui-sidebar-section-height-medium, 2rem)',
+            paddingInline: 'var(--m-ui-sidebar-row-inset-inline, 0.5rem)',
+            borderRadius: 'var(--m-ui-sidebar-item-radius, var(--shape-control))',
+            ...style,
+        }, ...props }));
 }
 function SidebarGroupAction({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
@@ -236,7 +260,7 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
 }
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-control p-2 text-left text-ui-body outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-control p-2 text-left text-ui-body outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
@@ -253,10 +277,24 @@ const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center
         size: 'default',
     },
 });
-function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }) {
+function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, style, ...props }) {
     const Comp = asChild ? Slot : 'button';
     const { isMobile, state } = useSidebar();
-    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    const heightToken = size === 'sm'
+        ? '--m-ui-sidebar-row-height-small'
+        : size === 'lg'
+            ? '--m-ui-sidebar-row-height-large'
+            : '--m-ui-sidebar-row-height-medium';
+    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), style: {
+            height: `var(${heightToken})`,
+            minHeight: `var(${heightToken})`,
+            paddingBlock: 0,
+            paddingInline: 'var(--m-ui-sidebar-row-inset-inline, 0.5rem)',
+            borderRadius: isActive
+                ? 'var(--m-ui-sidebar-selection-radius, var(--shape-control))'
+                : 'var(--m-ui-sidebar-item-radius, var(--shape-control))',
+            ...style,
+        }, ...props }));
     if (!tooltip) {
         return button;
     }
@@ -294,6 +332,6 @@ function SidebarMenuSubItem({ className, ...props }) {
 }
 function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, className, ...props }) {
     const Comp = asChild ? Slot : 'a';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden rounded-control flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden px-2 focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-ui-caption', size === 'md' && 'text-ui-body', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground outline-hidden rounded-control data-[active=true]:[&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden px-2 focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-ui-caption', size === 'md' && 'text-ui-body', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };