@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/primitives/fluid-menu.es.js

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { FluidHoverHighlight } from '../components/fluid-hover-highlight.es.js';
+import { useFluidHover } from '../hooks/use-fluid-hover.es.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
+
+const FluidMenuContext = React.createContext(null);
+function isMenuItemDisabled(element) {
+  return isAttrActive(element, "data-disabled") || element.getAttribute("aria-disabled") === "true";
+}
+function isAttrActive(element, attr) {
+  const value = element.getAttribute(attr);
+  return value !== null && value !== "false";
+}
+function useFluidMenu({
+  activeAttr = "data-highlighted"
+} = {}) {
+  const containerRef = React.useRef(null);
+  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled });
+  const counterRef = React.useRef(0);
+  const { registerItem, setActiveIndex, handlers } = hover;
+  const context = React.useMemo(
+    () => ({ registerItem, setActiveIndex, activeAttr, allocateIndex: () => counterRef.current++ }),
+    [registerItem, setActiveIndex, activeAttr]
+  );
+  const getContainerProps = React.useCallback(
+    (own, forwardedRef) => ({
+      ref: (element) => {
+        containerRef.current = element;
+        if (typeof forwardedRef === "function") forwardedRef(element);
+        else if (forwardedRef) forwardedRef.current = element;
+      },
+      onMouseMove: (e) => {
+        own.onMouseMove?.(e);
+        handlers.onMouseMove(e);
+      },
+      onMouseEnter: (e) => {
+        own.onMouseEnter?.(e);
+        handlers.onMouseEnter();
+      },
+      onMouseLeave: (e) => {
+        own.onMouseLeave?.(e);
+        handlers.onMouseLeave();
+      },
+      onClick: (e) => {
+        own.onClick?.(e);
+        handlers.onClick(e);
+      }
+    }),
+    [handlers]
+  );
+  return { hover, context, containerClassName: "relative isolate", getContainerProps };
+}
+function FluidMenuItems({
+  menu,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(FluidMenuContext.Provider, { value: menu.context, children: [
+    /* @__PURE__ */ jsx(FluidHoverHighlight, { hover: menu.hover, className: cn("-z-1 rounded-lg bg-foreground/10", className) }),
+    children
+  ] });
+}
+function useFluidMenuItemRef(forwardedRef) {
+  const ctx = React.useContext(FluidMenuContext);
+  const indexRef = React.useRef(null);
+  const observerRef = React.useRef(null);
+  return React.useCallback(
+    (element) => {
+      if (typeof forwardedRef === "function") forwardedRef(element);
+      else if (forwardedRef) forwardedRef.current = element;
+      if (!ctx) return;
+      const { registerItem, setActiveIndex, activeAttr, allocateIndex } = ctx;
+      if (indexRef.current === null) indexRef.current = allocateIndex();
+      const index = indexRef.current;
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+      registerItem(index, element);
+      if (!element) return;
+      const sync = () => {
+        if (isAttrActive(element, activeAttr)) setActiveIndex(index);
+      };
+      sync();
+      if (typeof MutationObserver !== "undefined") {
+        const observer = new MutationObserver(sync);
+        observer.observe(element, { attributes: true, attributeFilter: [activeAttr] });
+        observerRef.current = observer;
+      }
+    },
+    [ctx, forwardedRef]
+  );
+}
+
+export { FluidMenuItems, useFluidMenu, useFluidMenuItemRef };
+//# sourceMappingURL=fluid-menu.es.js.map

package/dist/primitives/fluid-menu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluid-menu.es.js","sources":["../../src/ds/primitives/fluid-menu.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components -- provider and its hooks intentionally share this module */\nimport * as React from 'react';\n\nimport { FluidHoverHighlight } from '@/components/fluid-hover-highlight';\nimport { useFluidHover } from '@/hooks/use-fluid-hover';\nimport type { UseFluidHoverReturn } from '@/hooks/use-fluid-hover';\nimport { cn } from '@/lib/utils';\n\n/**\n * Shared Fluid Hover wiring for every popup that lists items (DropdownMenu,\n * ContextMenu, Select, Combobox, Command). One highlight surface travels\n * between rows instead of each row painting its own hover background.\n *\n * Usage inside a popup component:\n *\n *   const menu = useFluidMenu();\n *   <Popup {...menu.getContainerProps(props, ref)} className={cn(menuPopupClass, menu.containerClassName, className)}>\n *     <FluidMenuItems menu={menu}>{children}</FluidMenuItems>\n *   </Popup>\n *\n * and on each row: `ref={useFluidMenuItemRef(forwardedRef)}`.\n *\n * The keyboard path stays honest: the library sets `activeAttr` on the row it\n * considers highlighted (Base UI: `data-highlighted`, cmdk: `data-selected`),\n * and the item hook mirrors that onto the fluid highlight, so arrow keys move\n * the same surface the mouse does.\n */\ntype FluidMenuContextValue = {\n  registerItem: UseFluidHoverReturn['registerItem'];\n  setActiveIndex: UseFluidHoverReturn['setActiveIndex'];\n  activeAttr: string;\n  allocateIndex: () => number;\n};\n\nconst FluidMenuContext = React.createContext<FluidMenuContextValue | null>(null);\n\n// Base UI sets a bare `data-disabled`; cmdk sets `data-disabled=\"true\" | \"false\"`.\nfunction isMenuItemDisabled(element: HTMLElement) {\n  return isAttrActive(element, 'data-disabled') || element.getAttribute('aria-disabled') === 'true';\n}\n\nfunction isAttrActive(element: HTMLElement, attr: string) {\n  const value = element.getAttribute(attr);\n  return value !== null && value !== 'false';\n}\n\ntype MouseHandlers = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'onMouseMove' | 'onMouseEnter' | 'onMouseLeave' | 'onClick'\n>;\n\nexport type UseFluidMenuOptions = {\n  /** Attribute the underlying library sets on its highlighted row. */\n  activeAttr?: 'data-highlighted' | 'data-selected';\n};\n\nexport type FluidMenu<T extends HTMLElement = HTMLElement> = {\n  hover: UseFluidHoverReturn;\n  context: FluidMenuContextValue;\n  /** `relative isolate`: positions the highlight and stacks it under the rows. */\n  containerClassName: string;\n  /** Ref + pointer handlers for the element that holds the rows, merged with the consumer's own. */\n  getContainerProps: (\n    own: MouseHandlers,\n    forwardedRef?: React.ForwardedRef<T>,\n  ) => MouseHandlers & { ref: React.Ref<T> };\n};\n\nexport function useFluidMenu<T extends HTMLElement = HTMLDivElement>({\n  activeAttr = 'data-highlighted',\n}: UseFluidMenuOptions = {}): FluidMenu<T> {\n  const containerRef = React.useRef<T>(null);\n  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled });\n  const counterRef = React.useRef(0);\n\n  // Only the stable pieces go into context so item callback refs do not churn\n  // (and re-register) on every hover-state render.\n  const { registerItem, setActiveIndex, handlers } = hover;\n  const context = React.useMemo<FluidMenuContextValue>(\n    () => ({ registerItem, setActiveIndex, activeAttr, allocateIndex: () => counterRef.current++ }),\n    [registerItem, setActiveIndex, activeAttr],\n  );\n\n  const getContainerProps = React.useCallback<FluidMenu<T>['getContainerProps']>(\n    (own, forwardedRef) => ({\n      ref: element => {\n        containerRef.current = element;\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      onMouseMove: e => {\n        own.onMouseMove?.(e);\n        handlers.onMouseMove(e);\n      },\n      onMouseEnter: e => {\n        own.onMouseEnter?.(e);\n        handlers.onMouseEnter();\n      },\n      onMouseLeave: e => {\n        own.onMouseLeave?.(e);\n        handlers.onMouseLeave();\n      },\n      onClick: e => {\n        own.onClick?.(e);\n        handlers.onClick(e);\n      },\n    }),\n    [handlers],\n  );\n\n  return { hover, context, containerClassName: 'relative isolate', getContainerProps };\n}\n\n/**\n * Provides the item registry to the rows and renders the travelling surface.\n * Popups are `bg-popover`; the highlight is the control hover surface on top of it.\n * `-z-1` keeps it under the row content while the container's `isolate`\n * keeps it above the popup background.\n */\nexport function FluidMenuItems({\n  menu,\n  className,\n  children,\n}: {\n  menu: Pick<FluidMenu, 'hover' | 'context'>;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <FluidMenuContext.Provider value={menu.context}>\n      <FluidHoverHighlight hover={menu.hover} className={cn('-z-1 rounded-lg bg-foreground/10', className)} />\n      {children}\n    </FluidMenuContext.Provider>\n  );\n}\n\n/**\n * Callback ref for an item row. Registers the row with the popup's hover\n * state and mirrors the library's highlighted attribute onto it. A no-op\n * outside a provider, so rows still render standalone.\n */\nexport function useFluidMenuItemRef<T extends HTMLElement>(forwardedRef: React.ForwardedRef<T>) {\n  const ctx = React.useContext(FluidMenuContext);\n  const indexRef = React.useRef<number | null>(null);\n  const observerRef = React.useRef<MutationObserver | null>(null);\n\n  return React.useCallback(\n    (element: T | null) => {\n      if (typeof forwardedRef === 'function') forwardedRef(element);\n      else if (forwardedRef) forwardedRef.current = element;\n\n      if (!ctx) return;\n      const { registerItem, setActiveIndex, activeAttr, allocateIndex } = ctx;\n      if (indexRef.current === null) indexRef.current = allocateIndex();\n      const index = indexRef.current;\n\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n      registerItem(index, element);\n      if (!element) return;\n\n      const sync = () => {\n        if (isAttrActive(element, activeAttr)) setActiveIndex(index);\n      };\n      sync();\n      if (typeof MutationObserver !== 'undefined') {\n        const observer = new MutationObserver(sync);\n        observer.observe(element, { attributes: true, attributeFilter: [activeAttr] });\n        observerRef.current = observer;\n      }\n    },\n    [ctx, forwardedRef],\n  );\n}\n"],"names":[],"mappings":";;;;;;AAkCA,MAAM,gBAAA,GAAmB,KAAA,CAAM,aAAA,CAA4C,IAAI,CAAA;AAG/E,SAAS,mBAAmB,OAAA,EAAsB;AAChD,EAAA,OAAO,aAAa,OAAA,EAAS,eAAe,KAAK,OAAA,CAAQ,YAAA,CAAa,eAAe,CAAA,KAAM,MAAA;AAC7F;AAEA,SAAS,YAAA,CAAa,SAAsB,IAAA,EAAc;AACxD,EAAA,MAAM,KAAA,GAAQ,OAAA,CAAQ,YAAA,CAAa,IAAI,CAAA;AACvC,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,OAAA;AACrC;AAwBO,SAAS,YAAA,CAAqD;AAAA,EACnE,UAAA,GAAa;AACf,CAAA,GAAyB,EAAC,EAAiB;AACzC,EAAA,MAAM,YAAA,GAAe,KAAA,CAAM,MAAA,CAAU,IAAI,CAAA;AACzC,EAAA,MAAM,QAAQ,aAAA,CAAc,YAAA,EAAc,EAAE,cAAA,EAAgB,oBAAoB,CAAA;AAChF,EAAA,MAAM,UAAA,GAAa,KAAA,CAAM,MAAA,CAAO,CAAC,CAAA;AAIjC,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,QAAA,EAAS,GAAI,KAAA;AACnD,EAAA,MAAM,UAAU,KAAA,CAAM,OAAA;AAAA,IACpB,OAAO,EAAE,YAAA,EAAc,cAAA,EAAgB,YAAY,aAAA,EAAe,MAAM,WAAW,OAAA,EAAA,EAAU,CAAA;AAAA,IAC7F,CAAC,YAAA,EAAc,cAAA,EAAgB,UAAU;AAAA,GAC3C;AAEA,EAAA,MAAM,oBAAoB,KAAA,CAAM,WAAA;AAAA,IAC9B,CAAC,KAAK,YAAA,MAAkB;AAAA,MACtB,KAAK,CAAA,OAAA,KAAW;AACd,QAAA,YAAA,CAAa,OAAA,GAAU,OAAA;AACvB,QAAA,IAAI,OAAO,YAAA,KAAiB,UAAA,EAAY,YAAA,CAAa,OAAO,CAAA;AAAA,aAAA,IACnD,YAAA,eAA2B,OAAA,GAAU,OAAA;AAAA,MAChD,CAAA;AAAA,MACA,aAAa,CAAA,CAAA,KAAK;AAChB,QAAA,GAAA,CAAI,cAAc,CAAC,CAAA;AACnB,QAAA,QAAA,CAAS,YAAY,CAAC,CAAA;AAAA,MACxB,CAAA;AAAA,MACA,cAAc,CAAA,CAAA,KAAK;AACjB,QAAA,GAAA,CAAI,eAAe,CAAC,CAAA;AACpB,QAAA,QAAA,CAAS,YAAA,EAAa;AAAA,MACxB,CAAA;AAAA,MACA,cAAc,CAAA,CAAA,KAAK;AACjB,QAAA,GAAA,CAAI,eAAe,CAAC,CAAA;AACpB,QAAA,QAAA,CAAS,YAAA,EAAa;AAAA,MACxB,CAAA;AAAA,MACA,SAAS,CAAA,CAAA,KAAK;AACZ,QAAA,GAAA,CAAI,UAAU,CAAC,CAAA;AACf,QAAA,QAAA,CAAS,QAAQ,CAAC,CAAA;AAAA,MACpB;AAAA,KACF,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,kBAAA,EAAoB,oBAAoB,iBAAA,EAAkB;AACrF;AAQO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,4BACG,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAK,OAAA,EACrC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAO,IAAA,CAAK,KAAA,EAAO,WAAW,EAAA,CAAG,kCAAA,EAAoC,SAAS,CAAA,EAAG,CAAA;AAAA,IACrG;AAAA,GAAA,EACH,CAAA;AAEJ;AAOO,SAAS,oBAA2C,YAAA,EAAqC;AAC9F,EAAA,MAAM,GAAA,GAAM,KAAA,CAAM,UAAA,CAAW,gBAAgB,CAAA;AAC7C,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,MAAA,CAAsB,IAAI,CAAA;AACjD,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,MAAA,CAAgC,IAAI,CAAA;AAE9D,EAAA,OAAO,KAAA,CAAM,WAAA;AAAA,IACX,CAAC,OAAA,KAAsB;AACrB,MAAA,IAAI,OAAO,YAAA,KAAiB,UAAA,EAAY,YAAA,CAAa,OAAO,CAAA;AAAA,WAAA,IACnD,YAAA,eAA2B,OAAA,GAAU,OAAA;AAE9C,MAAA,IAAI,CAAC,GAAA,EAAK;AACV,MAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,UAAA,EAAY,eAAc,GAAI,GAAA;AACpE,MAAA,IAAI,QAAA,CAAS,OAAA,KAAY,IAAA,EAAM,QAAA,CAAS,UAAU,aAAA,EAAc;AAChE,MAAA,MAAM,QAAQ,QAAA,CAAS,OAAA;AAEvB,MAAA,WAAA,CAAY,SAAS,UAAA,EAAW;AAChC,MAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AACtB,MAAA,YAAA,CAAa,OAAO,OAAO,CAAA;AAC3B,MAAA,IAAI,CAAC,OAAA,EAAS;AAEd,MAAA,MAAM,OAAO,MAAM;AACjB,QAAA,IAAI,YAAA,CAAa,OAAA,EAAS,UAAU,CAAA,iBAAkB,KAAK,CAAA;AAAA,MAC7D,CAAA;AACA,MAAA,IAAA,EAAK;AACL,MAAA,IAAI,OAAO,qBAAqB,WAAA,EAAa;AAC3C,QAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,IAAI,CAAA;AAC1C,QAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,EAAE,UAAA,EAAY,MAAM,eAAA,EAAiB,CAAC,UAAU,CAAA,EAAG,CAAA;AAC7E,QAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,KAAK,YAAY;AAAA,GACpB;AACF;;;;"}

package/dist/primitives/form-element.cjs.js

@@ -2,23 +2,33 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
-const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
-const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
+const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-muted";
+const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
+const inputFocusBorderVisible = "focus-visible:border-foreground/60";
+const inputFocusBorderWithin = "focus-within:border-foreground/60";
 const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
-const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
-const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
-const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
-const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const inputHoverBorderVisible = "[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45";
+const inputSurfaceAndFocusStyle = "bg-foreground/10 border border-border text-foreground not-disabled:hover:bg-foreground/14 outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-foreground/30 text-foreground " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const fieldTriggerSurfaceStyle = "bg-foreground/10 border-border text-foreground not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
+function resolveFieldVariant(variant) {
+  return variant === "filled" ? "default" : variant;
+}
 const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
 exports.controlFocusBorderVisible = controlFocusBorderVisible;
+exports.disabledFilledSurfaceStyle = disabledFilledSurfaceStyle;
+exports.disabledOutlineSurfaceStyle = disabledOutlineSurfaceStyle;
+exports.fieldTriggerSurfaceStyle = fieldTriggerSurfaceStyle;
 exports.inputFocusBorderVisible = inputFocusBorderVisible;
 exports.inputFocusBorderWithin = inputFocusBorderWithin;
 exports.inputHoverBorderVisible = inputHoverBorderVisible;
 exports.inputHoverBorderWithin = inputHoverBorderWithin;
 exports.inputOutlineAndFocusStyle = inputOutlineAndFocusStyle;
 exports.inputSurfaceAndFocusStyle = inputSurfaceAndFocusStyle;
+exports.resolveFieldVariant = resolveFieldVariant;
 exports.sharedFormElementDisabledStyle = sharedFormElementDisabledStyle;
 exports.unstyledFormElementStyle = unstyledFormElementStyle;
 //# sourceMappingURL=form-element.cjs.js.map

package/dist/primitives/form-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-element.cjs.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["export const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent neutral\n// (theme-aware neutral5 — light on dark surfaces, dark on light) that clears WCAG\n// 1.4.11 non-text contrast (3:1) on any surface, where the border1→border2 shift\n// alone (white/7%→11%) does not. `focus-visible` for the bare control,\n// `focus-within` for wrapper variants (InputGroup) whose focus lives on\n// a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'focus-within:border-neutral5/50';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible)]:border-border2';\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within)]:border-border2';\n\n// Background-agnostic surface + focus recipe shared by Input and Textarea.\n// Uses theme-aware opacity overlays so it reads on any underlying surface, with\n// no accent (green) on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\nexport const inputSurfaceAndFocusStyle =\n  'bg-surface-overlay-soft border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 hover:bg-surface-overlay-strong ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong ' +\n  inputFocusBorderVisible;\n\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":";;;;AAAO,MAAM,8BAAA,GAAiC;AASvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAM/B,MAAM,yBAAA,GACX,kHAAA,GAEA,uBAAA,GACA,uFAAA,GAEA;AAEK,MAAM,yBAAA,GACX,yEAAA,GAEA,uBAAA,GACA,+CAAA,GAEA;AAIK,MAAM,wBAAA,GAA2B;;;;;;;;;;;;"}
+{"version":3,"file":"form-element.cjs.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["// Disabled controls resolve to dedicated muted roles rather than a blanket opacity:\n// an opacity wash inherits whatever sits behind the control, so the same disabled\n// field clears contrast on one surface and fails on another. The `not-disabled:`\n// guards on each variant keep hover and active fills from painting over these.\nexport const sharedFormElementDisabledStyle = 'disabled:cursor-not-allowed disabled:text-muted-foreground';\n\n// Surface half of the disabled language, for neutral controls that carry a fill.\n// Variants with their own hue (primary, destructive) keep that hue at reduced\n// emphasis instead, so a disabled destructive action still reads as destructive.\n// Transparent variants (ghost) opt out entirely: a disabled icon button in a\n// toolbar should stay invisible rather than resolve into a muted pill.\nexport const disabledFilledSurfaceStyle = 'disabled:border-border disabled:bg-muted';\nexport const disabledOutlineSurfaceStyle = 'disabled:border-border disabled:bg-transparent';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent\n// `foreground` (theme-aware — light on dark surfaces, dark on light) that clears\n// WCAG 1.4.11 non-text contrast (3:1) on any surface, where the resting `border`\n// token alone does not. `focus-visible` for the bare control, `focus-within` for\n// wrapper variants (InputGroup) whose focus lives on a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-foreground/60';\nexport const inputFocusBorderWithin = 'focus-within:border-foreground/60';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45';\n// The wrapper itself is never `:disabled` — the control it wraps is — so the guard\n// has to ask about descendants. Without it, hovering a group that contains a\n// disabled input repaints the enabled border over the muted disabled one.\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45';\n\n// Background-agnostic surface + focus recipe shared by Input, Textarea and the\n// filled field triggers (Select/Combobox `default`). Reads on any underlying\n// surface, with no accent on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\n// Filled fields carry their affordance in the fill, exactly like a default Button:\n// the resting `border` stays put on hover and only the surface steps up.\nexport const inputSurfaceAndFocusStyle =\n  'bg-foreground/10 border border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// Outline fields share Button's outline ladder exactly: a visible resting border\n// (`foreground/30`), brightening on hover, then the shared focus border.\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-foreground/30 text-foreground ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Filled field trigger (Select/Combobox `default`): the same surface as Input.\n// Applied *after* `buttonVariants` so tailwind-merge replaces the Button's fill\n// and border with the field overlay — a field is not a button. Like every filled\n// control it carries hover in the fill and leaves the resting border alone.\nexport const fieldTriggerSurfaceStyle =\n  'bg-foreground/10 border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 ' +\n  'focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// `filled` was an alias for `default` (both render the filled surface) and has been\n// removed from the variant set. An unknown value makes cva emit nothing for the\n// variant group, so a field would lose its surface entirely rather than fall back;\n// resolve it here instead. Drop this once no published consumer passes `filled`.\nexport type DeprecatedFilledVariant = 'filled';\n\nexport function resolveFieldVariant<TVariant extends string>(\n  variant: TVariant | DeprecatedFilledVariant | null | undefined,\n): TVariant | 'default' | null | undefined {\n  return variant === 'filled' ? 'default' : (variant as TVariant | null | undefined);\n}\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":";;;;AAIO,MAAM,8BAAA,GAAiC;AAOvC,MAAM,0BAAA,GAA6B;AACnC,MAAM,2BAAA,GAA8B;AAQpC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAIhC,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,4BACX,uKAAA,GAGA;AAIK,MAAM,yBAAA,GACX,6DAAA,GACA,uBAAA,GACA,+CAAA,GAEA;AAMK,MAAM,2BACX,yJAAA,GAGA;AAQK,SAAS,oBACd,OAAA,EACyC;AACzC,EAAA,OAAO,OAAA,KAAY,WAAW,SAAA,GAAa,OAAA;AAC7C;AAIO,MAAM,wBAAA,GAA2B;;;;;;;;;;;;;;;;"}

package/dist/primitives/form-element.es.js

@@ -1,12 +1,18 @@
-const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
-const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
-const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
+const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-muted";
+const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
+const inputFocusBorderVisible = "focus-visible:border-foreground/60";
+const inputFocusBorderWithin = "focus-within:border-foreground/60";
 const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
-const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
-const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
-const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
-const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const inputHoverBorderVisible = "[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45";
+const inputSurfaceAndFocusStyle = "bg-foreground/10 border border-border text-foreground not-disabled:hover:bg-foreground/14 outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-foreground/30 text-foreground " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const fieldTriggerSurfaceStyle = "bg-foreground/10 border-border text-foreground not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
+function resolveFieldVariant(variant) {
+  return variant === "filled" ? "default" : variant;
+}
 const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
-export { controlFocusBorderVisible, inputFocusBorderVisible, inputFocusBorderWithin, inputHoverBorderVisible, inputHoverBorderWithin, inputOutlineAndFocusStyle, inputSurfaceAndFocusStyle, sharedFormElementDisabledStyle, unstyledFormElementStyle };
+export { controlFocusBorderVisible, disabledFilledSurfaceStyle, disabledOutlineSurfaceStyle, fieldTriggerSurfaceStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputHoverBorderVisible, inputHoverBorderWithin, inputOutlineAndFocusStyle, inputSurfaceAndFocusStyle, resolveFieldVariant, sharedFormElementDisabledStyle, unstyledFormElementStyle };
 //# sourceMappingURL=form-element.es.js.map

package/dist/primitives/form-element.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-element.es.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["export const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent neutral\n// (theme-aware neutral5 — light on dark surfaces, dark on light) that clears WCAG\n// 1.4.11 non-text contrast (3:1) on any surface, where the border1→border2 shift\n// alone (white/7%→11%) does not. `focus-visible` for the bare control,\n// `focus-within` for wrapper variants (InputGroup) whose focus lives on\n// a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'focus-within:border-neutral5/50';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible)]:border-border2';\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within)]:border-border2';\n\n// Background-agnostic surface + focus recipe shared by Input and Textarea.\n// Uses theme-aware opacity overlays so it reads on any underlying surface, with\n// no accent (green) on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\nexport const inputSurfaceAndFocusStyle =\n  'bg-surface-overlay-soft border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 hover:bg-surface-overlay-strong ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong ' +\n  inputFocusBorderVisible;\n\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":"AAAO,MAAM,8BAAA,GAAiC;AASvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAM/B,MAAM,yBAAA,GACX,kHAAA,GAEA,uBAAA,GACA,uFAAA,GAEA;AAEK,MAAM,yBAAA,GACX,yEAAA,GAEA,uBAAA,GACA,+CAAA,GAEA;AAIK,MAAM,wBAAA,GAA2B;;;;"}
+{"version":3,"file":"form-element.es.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["// Disabled controls resolve to dedicated muted roles rather than a blanket opacity:\n// an opacity wash inherits whatever sits behind the control, so the same disabled\n// field clears contrast on one surface and fails on another. The `not-disabled:`\n// guards on each variant keep hover and active fills from painting over these.\nexport const sharedFormElementDisabledStyle = 'disabled:cursor-not-allowed disabled:text-muted-foreground';\n\n// Surface half of the disabled language, for neutral controls that carry a fill.\n// Variants with their own hue (primary, destructive) keep that hue at reduced\n// emphasis instead, so a disabled destructive action still reads as destructive.\n// Transparent variants (ghost) opt out entirely: a disabled icon button in a\n// toolbar should stay invisible rather than resolve into a muted pill.\nexport const disabledFilledSurfaceStyle = 'disabled:border-border disabled:bg-muted';\nexport const disabledOutlineSurfaceStyle = 'disabled:border-border disabled:bg-transparent';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent\n// `foreground` (theme-aware — light on dark surfaces, dark on light) that clears\n// WCAG 1.4.11 non-text contrast (3:1) on any surface, where the resting `border`\n// token alone does not. `focus-visible` for the bare control, `focus-within` for\n// wrapper variants (InputGroup) whose focus lives on a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-foreground/60';\nexport const inputFocusBorderWithin = 'focus-within:border-foreground/60';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45';\n// The wrapper itself is never `:disabled` — the control it wraps is — so the guard\n// has to ask about descendants. Without it, hovering a group that contains a\n// disabled input repaints the enabled border over the muted disabled one.\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45';\n\n// Background-agnostic surface + focus recipe shared by Input, Textarea and the\n// filled field triggers (Select/Combobox `default`). Reads on any underlying\n// surface, with no accent on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\n// Filled fields carry their affordance in the fill, exactly like a default Button:\n// the resting `border` stays put on hover and only the surface steps up.\nexport const inputSurfaceAndFocusStyle =\n  'bg-foreground/10 border border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// Outline fields share Button's outline ladder exactly: a visible resting border\n// (`foreground/30`), brightening on hover, then the shared focus border.\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-foreground/30 text-foreground ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Filled field trigger (Select/Combobox `default`): the same surface as Input.\n// Applied *after* `buttonVariants` so tailwind-merge replaces the Button's fill\n// and border with the field overlay — a field is not a button. Like every filled\n// control it carries hover in the fill and leaves the resting border alone.\nexport const fieldTriggerSurfaceStyle =\n  'bg-foreground/10 border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 ' +\n  'focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// `filled` was an alias for `default` (both render the filled surface) and has been\n// removed from the variant set. An unknown value makes cva emit nothing for the\n// variant group, so a field would lose its surface entirely rather than fall back;\n// resolve it here instead. Drop this once no published consumer passes `filled`.\nexport type DeprecatedFilledVariant = 'filled';\n\nexport function resolveFieldVariant<TVariant extends string>(\n  variant: TVariant | DeprecatedFilledVariant | null | undefined,\n): TVariant | 'default' | null | undefined {\n  return variant === 'filled' ? 'default' : (variant as TVariant | null | undefined);\n}\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":"AAIO,MAAM,8BAAA,GAAiC;AAOvC,MAAM,0BAAA,GAA6B;AACnC,MAAM,2BAAA,GAA8B;AAQpC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAIhC,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,4BACX,uKAAA,GAGA;AAIK,MAAM,yBAAA,GACX,6DAAA,GACA,uBAAA,GACA,+CAAA,GAEA;AAMK,MAAM,2BACX,yJAAA,GAGA;AAQK,SAAS,oBACd,OAAA,EACyC;AACzC,EAAA,OAAO,OAAA,KAAY,WAAW,SAAA,GAAa,OAAA;AAC7C;AAIO,MAAM,wBAAA,GAA2B;;;;"}

package/dist/primitives/menu-item.cjs.js

@@ -2,15 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const Button = require('../Button-BJOVwaxp.cjs');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const Button = require('../Button-C2dx_QZN.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 const MENU_ITEM_OVERRIDES = utils_cn.cn(
   "flex w-full justify-start rounded-lg text-left select-none",
   // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.
   "focus-visible:border-transparent",
-  "data-highlighted:bg-neutral6/5 data-highlighted:text-neutral6",
-  "data-selected:text-neutral6",
+  // No row background: the popup's FluidMenuItems highlight travels between rows;
+  // the row only lifts its text color.
+  "hover:bg-transparent data-highlighted:text-foreground",
+  "data-selected:text-foreground",
   "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
   "[&>span]:truncate"
 );
@@ -18,10 +20,10 @@ const menuItemClass = utils_cn.cn(Button.buttonVariants({ variant: "ghost", size
 const menuItemDestructiveClass = utils_cn.cn(
   Button.buttonVariants({ variant: "destructive-ghost", size: "md" }),
   MENU_ITEM_OVERRIDES,
-  "data-highlighted:bg-accent2/10 data-highlighted:text-accent2"
+  "data-highlighted:bg-destructive/20 data-highlighted:text-destructive"
 );
 const menuItemTrailingIconClass = "ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full";
-const menuItemCheckClass = utils_cn.cn(menuItemTrailingIconClass, "text-neutral6");
+const menuItemCheckClass = utils_cn.cn(menuItemTrailingIconClass, "text-foreground");
 const menuItemInsetClass = "pl-[calc(.9em+1.1em+.75em)]";
 const MENU_SIDE_OFFSET = 4;
 const menuPositionerClass = "z-50 outline-none data-[anchor-hidden]:hidden";
@@ -29,20 +31,20 @@ const menuPopupClass = utils_cn.cn(
   "z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]",
   "w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]",
   "origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto",
-  "rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog outline-none",
+  "new-theme rounded-xl border border-border bg-popover p-1 text-foreground/90 shadow-dialog outline-none",
   "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
   "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
 );
-const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-neutral3 uppercase";
-const menuSeparatorClass = "-mx-1 my-1 h-px bg-border1";
-const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums";
-const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd leading-ui-sm text-neutral3 box-content";
+const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase";
+const menuSeparatorClass = "-mx-1 my-1 h-px bg-border";
+const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums";
+const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content";
 const menuSearchClasses = {
   // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the
   // divider does not crowd the first option while the text stays on the item grid.
-  container: "flex items-center gap-[.75em] border-b border-border1 px-[.9em] py-0.5 text-ui-smd",
-  icon: "size-[1.1em] shrink-0 text-neutral3",
-  input: "h-form-md w-full bg-transparent text-ui-smd leading-ui-sm text-neutral6 outline-none placeholder:text-neutral3"
+  container: "flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-ui-smd",
+  icon: "size-[1.1em] shrink-0 text-muted-foreground",
+  input: "h-form-md w-full bg-transparent text-ui-smd text-foreground outline-hidden placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-foreground/45 focus-visible:outline-solid"
 };
 
 exports.MENU_SIDE_OFFSET = MENU_SIDE_OFFSET;

package/dist/primitives/menu-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.cjs.js","sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter, DataFilter). An item is a ghost/md Button laid out\n// left-aligned, with `rounded-lg` instead of the pill radius so stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start rounded-lg text-left select-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  'data-highlighted:bg-neutral6/5 data-highlighted:text-neutral6',\n  'data-selected:text-neutral6',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'data-highlighted:bg-accent2/10 data-highlighted:text-accent2',\n);\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, because the Button recipe's `[&>svg]:mx-[-.3em]` would beat `ml-auto`.\nexport const menuItemTrailingIconClass =\n  'ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full';\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-neutral6');\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(.9em+1.1em+.75em)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  'rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog outline-none',\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\nexport const menuLabelClass = 'px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-neutral3 uppercase';\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border1';\n\nexport const menuShortcutClass = 'ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd leading-ui-sm text-neutral3 box-content';\n\nexport const menuSearchClasses = {\n  // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the\n  // divider does not crowd the first option while the text stays on the item grid.\n  container: 'flex items-center gap-[.75em] border-b border-border1 px-[.9em] py-0.5 text-ui-smd',\n  icon: 'size-[1.1em] shrink-0 text-neutral3',\n  input:\n    'h-form-md w-full bg-transparent text-ui-smd leading-ui-sm text-neutral6 outline-none placeholder:text-neutral3',\n};\n"],"names":["cn","buttonVariants"],"mappings":";;;;;;;AAWA,MAAM,mBAAA,GAAsBA,WAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA,EAEA,kCAAA;AAAA,EACA,+DAAA;AAAA,EACA,6BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgBA,WAAA,CAAGC,qBAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2BD,WAAA;AAAA,EACtCC,sBAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqBD,WAAA,CAAG,yBAAA,EAA2B,eAAe;AAGxE,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiBA,WAAA;AAAA,EAC5B,iFAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,2FAAA;AAAA,EACA,kJAAA;AAAA,EACA;AACF;AAEO,MAAM,cAAA,GAAiB;AAEvB,MAAM,kBAAA,GAAqB;AAE3B,MAAM,iBAAA,GAAoB;AAG1B,MAAM,cAAA,GACX;AAEK,MAAM,iBAAA,GAAoB;AAAA;AAAA;AAAA,EAG/B,SAAA,EAAW,oFAAA;AAAA,EACX,IAAA,EAAM,qCAAA;AAAA,EACN,KAAA,EACE;AACJ;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"menu-item.cjs.js","sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter, DataFilter). An item is a ghost/md Button laid out\n// left-aligned, with `rounded-lg` instead of the pill radius so stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start rounded-lg text-left select-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // No row background: the popup's FluidMenuItems highlight travels between rows;\n  // the row only lifts its text color.\n  'hover:bg-transparent data-highlighted:text-foreground',\n  'data-selected:text-foreground',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'data-highlighted:bg-destructive/20 data-highlighted:text-destructive',\n);\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, because the Button recipe's `[&>svg]:mx-[-.3em]` would beat `ml-auto`.\nexport const menuItemTrailingIconClass =\n  'ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full';\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-foreground');\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(.9em+1.1em+.75em)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  'new-theme rounded-xl border border-border bg-popover p-1 text-foreground/90 shadow-dialog outline-none',\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\nexport const menuLabelClass =\n  'px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase';\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the\n  // divider does not crowd the first option while the text stays on the item grid.\n  container: 'flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-ui-smd',\n  icon: 'size-[1.1em] shrink-0 text-muted-foreground',\n  input:\n    'h-form-md w-full bg-transparent text-ui-smd text-foreground outline-hidden placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-foreground/45 focus-visible:outline-solid',\n};\n"],"names":["cn","buttonVariants"],"mappings":";;;;;;;AAWA,MAAM,mBAAA,GAAsBA,WAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA,EAEA,kCAAA;AAAA;AAAA;AAAA,EAGA,uDAAA;AAAA,EACA,+BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgBA,WAAA,CAAGC,qBAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2BD,WAAA;AAAA,EACtCC,sBAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqBD,WAAA,CAAG,yBAAA,EAA2B,iBAAiB;AAG1E,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiBA,WAAA;AAAA,EAC5B,iFAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,wGAAA;AAAA,EACA,kJAAA;AAAA,EACA;AACF;AAEO,MAAM,cAAA,GACX;AAEK,MAAM,kBAAA,GAAqB;AAE3B,MAAM,iBAAA,GAAoB;AAG1B,MAAM,cAAA,GACX;AAEK,MAAM,iBAAA,GAAoB;AAAA;AAAA;AAAA,EAG/B,SAAA,EAAW,mFAAA;AAAA,EACX,IAAA,EAAM,6CAAA;AAAA,EACN,KAAA,EACE;AACJ;;;;;;;;;;;;;;;;"}

package/dist/primitives/menu-item.es.js

@@ -1,12 +1,14 @@
-import { b as buttonVariants } from '../Button-BVGwYwHT.js';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { b as buttonVariants } from '../Button-DS6O6fvU.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 const MENU_ITEM_OVERRIDES = cn(
   "flex w-full justify-start rounded-lg text-left select-none",
   // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.
   "focus-visible:border-transparent",
-  "data-highlighted:bg-neutral6/5 data-highlighted:text-neutral6",
-  "data-selected:text-neutral6",
+  // No row background: the popup's FluidMenuItems highlight travels between rows;
+  // the row only lifts its text color.
+  "hover:bg-transparent data-highlighted:text-foreground",
+  "data-selected:text-foreground",
   "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
   "[&>span]:truncate"
 );
@@ -14,10 +16,10 @@ const menuItemClass = cn(buttonVariants({ variant: "ghost", size: "md" }), MENU_
 const menuItemDestructiveClass = cn(
   buttonVariants({ variant: "destructive-ghost", size: "md" }),
   MENU_ITEM_OVERRIDES,
-  "data-highlighted:bg-accent2/10 data-highlighted:text-accent2"
+  "data-highlighted:bg-destructive/20 data-highlighted:text-destructive"
 );
 const menuItemTrailingIconClass = "ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full";
-const menuItemCheckClass = cn(menuItemTrailingIconClass, "text-neutral6");
+const menuItemCheckClass = cn(menuItemTrailingIconClass, "text-foreground");
 const menuItemInsetClass = "pl-[calc(.9em+1.1em+.75em)]";
 const MENU_SIDE_OFFSET = 4;
 const menuPositionerClass = "z-50 outline-none data-[anchor-hidden]:hidden";
@@ -25,20 +27,20 @@ const menuPopupClass = cn(
   "z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]",
   "w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]",
   "origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto",
-  "rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog outline-none",
+  "new-theme rounded-xl border border-border bg-popover p-1 text-foreground/90 shadow-dialog outline-none",
   "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
   "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
 );
-const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-neutral3 uppercase";
-const menuSeparatorClass = "-mx-1 my-1 h-px bg-border1";
-const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums";
-const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd leading-ui-sm text-neutral3 box-content";
+const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase";
+const menuSeparatorClass = "-mx-1 my-1 h-px bg-border";
+const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums";
+const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content";
 const menuSearchClasses = {
   // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the
   // divider does not crowd the first option while the text stays on the item grid.
-  container: "flex items-center gap-[.75em] border-b border-border1 px-[.9em] py-0.5 text-ui-smd",
-  icon: "size-[1.1em] shrink-0 text-neutral3",
-  input: "h-form-md w-full bg-transparent text-ui-smd leading-ui-sm text-neutral6 outline-none placeholder:text-neutral3"
+  container: "flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-ui-smd",
+  icon: "size-[1.1em] shrink-0 text-muted-foreground",
+  input: "h-form-md w-full bg-transparent text-ui-smd text-foreground outline-hidden placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-foreground/45 focus-visible:outline-solid"
 };
 
 export { MENU_SIDE_OFFSET, menuEmptyClass, menuItemCheckClass, menuItemClass, menuItemDestructiveClass, menuItemInsetClass, menuItemTrailingIconClass, menuLabelClass, menuPopupClass, menuPositionerClass, menuSearchClasses, menuSeparatorClass, menuShortcutClass };

package/dist/primitives/menu-item.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.es.js","sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter, DataFilter). An item is a ghost/md Button laid out\n// left-aligned, with `rounded-lg` instead of the pill radius so stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start rounded-lg text-left select-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  'data-highlighted:bg-neutral6/5 data-highlighted:text-neutral6',\n  'data-selected:text-neutral6',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'data-highlighted:bg-accent2/10 data-highlighted:text-accent2',\n);\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, because the Button recipe's `[&>svg]:mx-[-.3em]` would beat `ml-auto`.\nexport const menuItemTrailingIconClass =\n  'ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full';\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-neutral6');\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(.9em+1.1em+.75em)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  'rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog outline-none',\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\nexport const menuLabelClass = 'px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-neutral3 uppercase';\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border1';\n\nexport const menuShortcutClass = 'ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd leading-ui-sm text-neutral3 box-content';\n\nexport const menuSearchClasses = {\n  // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the\n  // divider does not crowd the first option while the text stays on the item grid.\n  container: 'flex items-center gap-[.75em] border-b border-border1 px-[.9em] py-0.5 text-ui-smd',\n  icon: 'size-[1.1em] shrink-0 text-neutral3',\n  input:\n    'h-form-md w-full bg-transparent text-ui-smd leading-ui-sm text-neutral6 outline-none placeholder:text-neutral3',\n};\n"],"names":[],"mappings":";;;AAWA,MAAM,mBAAA,GAAsB,EAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA,EAEA,kCAAA;AAAA,EACA,+DAAA;AAAA,EACA,6BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgB,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2B,EAAA;AAAA,EACtC,eAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqB,EAAA,CAAG,yBAAA,EAA2B,eAAe;AAGxE,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiB,EAAA;AAAA,EAC5B,iFAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,2FAAA;AAAA,EACA,kJAAA;AAAA,EACA;AACF;AAEO,MAAM,cAAA,GAAiB;AAEvB,MAAM,kBAAA,GAAqB;AAE3B,MAAM,iBAAA,GAAoB;AAG1B,MAAM,cAAA,GACX;AAEK,MAAM,iBAAA,GAAoB;AAAA;AAAA;AAAA,EAG/B,SAAA,EAAW,oFAAA;AAAA,EACX,IAAA,EAAM,qCAAA;AAAA,EACN,KAAA,EACE;AACJ;;;;"}
+{"version":3,"file":"menu-item.es.js","sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter, DataFilter). An item is a ghost/md Button laid out\n// left-aligned, with `rounded-lg` instead of the pill radius so stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start rounded-lg text-left select-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // No row background: the popup's FluidMenuItems highlight travels between rows;\n  // the row only lifts its text color.\n  'hover:bg-transparent data-highlighted:text-foreground',\n  'data-selected:text-foreground',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'data-highlighted:bg-destructive/20 data-highlighted:text-destructive',\n);\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, because the Button recipe's `[&>svg]:mx-[-.3em]` would beat `ml-auto`.\nexport const menuItemTrailingIconClass =\n  'ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full';\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-foreground');\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(.9em+1.1em+.75em)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  'new-theme rounded-xl border border-border bg-popover p-1 text-foreground/90 shadow-dialog outline-none',\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\nexport const menuLabelClass =\n  'px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase';\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the\n  // divider does not crowd the first option while the text stays on the item grid.\n  container: 'flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-ui-smd',\n  icon: 'size-[1.1em] shrink-0 text-muted-foreground',\n  input:\n    'h-form-md w-full bg-transparent text-ui-smd text-foreground outline-hidden placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-foreground/45 focus-visible:outline-solid',\n};\n"],"names":[],"mappings":";;;AAWA,MAAM,mBAAA,GAAsB,EAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA,EAEA,kCAAA;AAAA;AAAA;AAAA,EAGA,uDAAA;AAAA,EACA,+BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgB,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2B,EAAA;AAAA,EACtC,eAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqB,EAAA,CAAG,yBAAA,EAA2B,iBAAiB;AAG1E,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiB,EAAA;AAAA,EAC5B,iFAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,wGAAA;AAAA,EACA,kJAAA;AAAA,EACA;AACF;AAEO,MAAM,cAAA,GACX;AAEK,MAAM,kBAAA,GAAqB;AAE3B,MAAM,iBAAA,GAAoB;AAG1B,MAAM,cAAA,GACX;AAEK,MAAM,iBAAA,GAAoB;AAAA;AAAA;AAAA,EAG/B,SAAA,EAAW,mFAAA;AAAA,EACX,IAAA,EAAM,6CAAA;AAAA,EACN,KAAA,EACE;AACJ;;;;"}

package/dist/primitives/resize-handle-indicator.cjs.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const index = require('../index-BxcigDwC.cjs');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const index = require('../index-gbqoNdVM.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 const indicatorVariants = index.cva(
   "pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none",
   {
     variants: {
       variant: {
-        line: "h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0",
-        pill: "h-10 w-0.5 rounded-full bg-surface5"
+        line: "new-theme h-3/4 w-px bg-linear-to-b from-transparent via-foreground/30 to-transparent opacity-0",
+        pill: "new-theme h-10 w-0.5 rounded-full bg-foreground/30"
       }
     },
     defaultVariants: {

package/dist/primitives/resize-handle-indicator.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle-indicator.cjs.js","sources":["../../src/ds/primitives/resize-handle-indicator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\n// line: gradient hairline, fits a visible container edge.\n// pill: small floating pill, for handles with no container around.\nconst indicatorVariants = cva(\n  'pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        line: 'h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0',\n        pill: 'h-10 w-0.5 rounded-full bg-surface5',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n    },\n  },\n);\n\nexport type ResizeHandleIndicatorProps = VariantProps<typeof indicatorVariants> & {\n  className?: string;\n};\n\n// Shared visual for resize handles (sidebar, panel separators).\n// Consumers reveal/emphasize it via their own state variant classes.\nexport const ResizeHandleIndicator = ({ variant, className }: ResizeHandleIndicatorProps) => (\n  <span aria-hidden className={cn(indicatorVariants({ variant }), className)} />\n);\n"],"names":["cva","cn"],"mappings":";;;;;;;;AAMA,MAAM,iBAAA,GAAoBA,SAAA;AAAA,EACxB,8FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,qFAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAQO,MAAM,wBAAwB,CAAC,EAAE,SAAS,SAAA,EAAU,oCACxD,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAWC,YAAG,iBAAA,CAAkB,EAAE,SAAS,CAAA,EAAG,SAAS,CAAA,EAAG;;;;"}
+{"version":3,"file":"resize-handle-indicator.cjs.js","sources":["../../src/ds/primitives/resize-handle-indicator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\n// line: gradient hairline, fits a visible container edge.\n// pill: small floating pill, for handles with no container around.\nconst indicatorVariants = cva(\n  'pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        line: 'new-theme h-3/4 w-px bg-linear-to-b from-transparent via-foreground/30 to-transparent opacity-0',\n        pill: 'new-theme h-10 w-0.5 rounded-full bg-foreground/30',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n    },\n  },\n);\n\nexport type ResizeHandleIndicatorProps = VariantProps<typeof indicatorVariants> & {\n  className?: string;\n};\n\n// Shared visual for resize handles (sidebar, panel separators).\n// Consumers reveal/emphasize it via their own state variant classes.\nexport const ResizeHandleIndicator = ({ variant, className }: ResizeHandleIndicatorProps) => (\n  <span aria-hidden className={cn(indicatorVariants({ variant }), className)} />\n);\n"],"names":["cva","cn"],"mappings":";;;;;;;;AAMA,MAAM,iBAAA,GAAoBA,SAAA;AAAA,EACxB,8FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,iGAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAQO,MAAM,wBAAwB,CAAC,EAAE,SAAS,SAAA,EAAU,oCACxD,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAWC,YAAG,iBAAA,CAAkB,EAAE,SAAS,CAAA,EAAG,SAAS,CAAA,EAAG;;;;"}

package/dist/primitives/resize-handle-indicator.es.js

@@ -1,14 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { c as cva } from '../index-CZvpHqka.js';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cva } from '../index-Cp3ZQQze.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 const indicatorVariants = cva(
   "pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none",
   {
     variants: {
       variant: {
-        line: "h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0",
-        pill: "h-10 w-0.5 rounded-full bg-surface5"
+        line: "new-theme h-3/4 w-px bg-linear-to-b from-transparent via-foreground/30 to-transparent opacity-0",
+        pill: "new-theme h-10 w-0.5 rounded-full bg-foreground/30"
       }
     },
     defaultVariants: {

package/dist/primitives/resize-handle-indicator.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle-indicator.es.js","sources":["../../src/ds/primitives/resize-handle-indicator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\n// line: gradient hairline, fits a visible container edge.\n// pill: small floating pill, for handles with no container around.\nconst indicatorVariants = cva(\n  'pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        line: 'h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0',\n        pill: 'h-10 w-0.5 rounded-full bg-surface5',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n    },\n  },\n);\n\nexport type ResizeHandleIndicatorProps = VariantProps<typeof indicatorVariants> & {\n  className?: string;\n};\n\n// Shared visual for resize handles (sidebar, panel separators).\n// Consumers reveal/emphasize it via their own state variant classes.\nexport const ResizeHandleIndicator = ({ variant, className }: ResizeHandleIndicatorProps) => (\n  <span aria-hidden className={cn(indicatorVariants({ variant }), className)} />\n);\n"],"names":[],"mappings":";;;;AAMA,MAAM,iBAAA,GAAoB,GAAA;AAAA,EACxB,8FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,qFAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAQO,MAAM,wBAAwB,CAAC,EAAE,SAAS,SAAA,EAAU,yBACxD,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,GAAG,iBAAA,CAAkB,EAAE,SAAS,CAAA,EAAG,SAAS,CAAA,EAAG;;;;"}
+{"version":3,"file":"resize-handle-indicator.es.js","sources":["../../src/ds/primitives/resize-handle-indicator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\n// line: gradient hairline, fits a visible container edge.\n// pill: small floating pill, for handles with no container around.\nconst indicatorVariants = cva(\n  'pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        line: 'new-theme h-3/4 w-px bg-linear-to-b from-transparent via-foreground/30 to-transparent opacity-0',\n        pill: 'new-theme h-10 w-0.5 rounded-full bg-foreground/30',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n    },\n  },\n);\n\nexport type ResizeHandleIndicatorProps = VariantProps<typeof indicatorVariants> & {\n  className?: string;\n};\n\n// Shared visual for resize handles (sidebar, panel separators).\n// Consumers reveal/emphasize it via their own state variant classes.\nexport const ResizeHandleIndicator = ({ variant, className }: ResizeHandleIndicatorProps) => (\n  <span aria-hidden className={cn(indicatorVariants({ variant }), className)} />\n);\n"],"names":[],"mappings":";;;;AAMA,MAAM,iBAAA,GAAoB,GAAA;AAAA,EACxB,8FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,iGAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAQO,MAAM,wBAAwB,CAAC,EAAE,SAAS,SAAA,EAAU,yBACxD,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,GAAG,iBAAA,CAAkB,EAAE,SAAS,CAAA,EAAG,SAAS,CAAA,EAAG;;;;"}

package/dist/primitives/transitions.cjs.js

@@ -24,7 +24,7 @@ const hoverEffects = {
   // Brightness increase
   brightness: "hover:brightness-110",
   // Background lift
-  lift: "hover:bg-surface4"
+  lift: "hover:bg-foreground/10"
 };
 const focusRing = {
   // Standard focus ring with glow

package/dist/primitives/transitions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"transitions.cjs.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Transition utility classes for consistent animations across components\n\n// Base transition presets (Tailwind classes)\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-surface4',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-accent1',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":";;;;AAGO,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,8EAAA;AAAA;AAAA,EAET,MAAA,EAAQ,sDAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;;;"}
+{"version":3,"file":"transitions.cjs.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Transition utility classes for consistent animations across components\n\n// Base transition presets (Tailwind classes)\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-foreground/10',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-accent1',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":";;;;AAGO,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,8EAAA;AAAA;AAAA,EAET,MAAA,EAAQ,sDAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;;;"}

package/dist/primitives/transitions.es.js

@@ -20,7 +20,7 @@ const hoverEffects = {
   // Brightness increase
   brightness: "hover:brightness-110",
   // Background lift
-  lift: "hover:bg-surface4"
+  lift: "hover:bg-foreground/10"
 };
 const focusRing = {
   // Standard focus ring with glow

package/dist/primitives/transitions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"transitions.es.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Transition utility classes for consistent animations across components\n\n// Base transition presets (Tailwind classes)\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-surface4',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-accent1',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":"AAGO,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,8EAAA;AAAA;AAAA,EAET,MAAA,EAAQ,sDAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;"}
+{"version":3,"file":"transitions.es.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Transition utility classes for consistent animations across components\n\n// Base transition presets (Tailwind classes)\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-foreground/10',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-accent1',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":"AAGO,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,8EAAA;AAAA;AAAA,EAET,MAAA,EAAQ,sDAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;"}

package/dist/primitives/trigger-button.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const primitives_controlSize = require('./control-size.cjs.js');
-const Button = require('../Button-BJOVwaxp.cjs');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const Button = require('../Button-C2dx_QZN.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/dist/primitives/trigger-button.es.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { controlTriggerOpenStateFor } from './control-size.es.js';
-import { B as Button } from '../Button-BVGwYwHT.js';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { B as Button } from '../Button-DS6O6fvU.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 function resolveTriggerRender({
   render,