@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

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  // 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;;;;"}
+{"version":3,"file":"menu-item.es.js","sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\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  // An item may carry a second line (a name over its description). The Button\n  // height becomes the floor so single-line rows keep the control rhythm and a\n  // taller item grows instead of overflowing into its neighbour.\n  'h-auto min-h-control-md py-1',\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(--spacing-dropdown),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  cn('rounded-xl p-1 text-foreground/90 outline-none', overlaySurfaceStyle),\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-meta 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-meta 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-control-md items-center gap-[.75em] px-[.9em] py-0.5 text-body-sm text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // The input is a full control rung and the row adds `py-0.5` on top, so the search\n  // row sits one notch taller than an item: the divider does not crowd the first\n  // option while the text stays on the item grid.\n  container:\n    'flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-body-sm focus-within:bg-fill-subtle',\n  icon: 'size-[1.1em] shrink-0 text-muted-foreground',\n  input:\n    'h-control-md w-full bg-transparent text-body-sm text-foreground outline-hidden placeholder:text-muted-foreground',\n};\n"],"names":[],"mappings":";;;;AAYA,MAAM,mBAAA,GAAsB,EAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA;AAAA;AAAA,EAIA,8BAAA;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,mEAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,EAAA,CAAG,kDAAkD,mBAAmB,CAAA;AAAA,EACxE,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;AAAA,EAI/B,SAAA,EACE,gHAAA;AAAA,EACF,IAAA,EAAM,6CAAA;AAAA,EACN,KAAA,EACE;AACJ;;;;"}

package/dist/primitives/raised-surface.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const raisedSurfaceStyle = "bg-card hover:bg-card active:bg-card shadow-raised";
+const overlaySurfaceStyle = "bg-card shadow-overlay";
+const frameSurfaceStyle = "bg-background shadow-raised";
+const surfaceStateLayerStyle = "state-layer";
+const surfaceGroupStateLayerStyle = "relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle";
+
+exports.frameSurfaceStyle = frameSurfaceStyle;
+exports.overlaySurfaceStyle = overlaySurfaceStyle;
+exports.raisedSurfaceStyle = raisedSurfaceStyle;
+exports.surfaceGroupStateLayerStyle = surfaceGroupStateLayerStyle;
+exports.surfaceStateLayerStyle = surfaceStateLayerStyle;
+//# sourceMappingURL=raised-surface.cjs.js.map

package/dist/primitives/raised-surface.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"raised-surface.cjs.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both tokens carry the rim as well as the elevation (the rim is `--border`\n * itself, plus a top inset highlight in dark), so neither draws a border of its\n * own: adding `border` on top doubles the edge.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised';\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay';\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised';\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `src/index.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":";;;;AA4BO,MAAM,kBAAA,GAAqB;AAE3B,MAAM,mBAAA,GAAsB;AAQ5B,MAAM,iBAAA,GAAoB;AAO1B,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;;;;;"}

package/dist/primitives/raised-surface.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/raised-surface'
+export {}

package/dist/primitives/raised-surface.es.js

@@ -0,0 +1,8 @@
+const raisedSurfaceStyle = "bg-card hover:bg-card active:bg-card shadow-raised";
+const overlaySurfaceStyle = "bg-card shadow-overlay";
+const frameSurfaceStyle = "bg-background shadow-raised";
+const surfaceStateLayerStyle = "state-layer";
+const surfaceGroupStateLayerStyle = "relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle";
+
+export { frameSurfaceStyle, overlaySurfaceStyle, raisedSurfaceStyle, surfaceGroupStateLayerStyle, surfaceStateLayerStyle };
+//# sourceMappingURL=raised-surface.es.js.map

package/dist/primitives/raised-surface.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"raised-surface.es.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both tokens carry the rim as well as the elevation (the rim is `--border`\n * itself, plus a top inset highlight in dark), so neither draws a border of its\n * own: adding `border` on top doubles the edge.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised';\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay';\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised';\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `src/index.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":"AA4BO,MAAM,kBAAA,GAAqB;AAE3B,MAAM,mBAAA,GAAsB;AAQ5B,MAAM,iBAAA,GAAoB;AAO1B,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;"}

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-gbqoNdVM.cjs');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const index = require('../index-C-fBJhpb.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 const indicatorVariants = index.cva(
   "pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none",
   {
     variants: {
       variant: {
-        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"
+        line: "h-3/4 w-px bg-linear-to-b from-transparent via-foreground/30 to-transparent opacity-0",
+        pill: "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: '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;;;;"}
+{"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-foreground/30 to-transparent opacity-0',\n        pill: '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,uFAAA;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-Cp3ZQQze.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cva } from '../index-Dubp6Qv4.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 const indicatorVariants = cva(
   "pointer-events-none block transition-all duration-150 ease-out motion-reduce:transition-none",
   {
     variants: {
       variant: {
-        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"
+        line: "h-3/4 w-px bg-linear-to-b from-transparent via-foreground/30 to-transparent opacity-0",
+        pill: "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: '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;;;;"}
+{"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-foreground/30 to-transparent opacity-0',\n        pill: '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,uFAAA;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/selection-control.cjs.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const primitives_transitions = require('./transitions.cjs.js');
+
+const selectionControlStyle = [
+  "flex size-4 shrink-0 cursor-pointer items-center justify-center",
+  "border border-border bg-fill-hover text-background outline-hidden",
+  primitives_transitions.transitions.all,
+  "hover:border-border-strong hover:bg-fill-active",
+  "active:scale-95 active:border-border-hover active:bg-fill-strong",
+  "focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid",
+  "data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background",
+  "data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90",
+  "data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100",
+  "data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background"
+].join(" ");
+
+exports.selectionControlStyle = selectionControlStyle;
+//# sourceMappingURL=selection-control.cjs.js.map

package/dist/primitives/selection-control.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control.cjs.js","sources":["../../src/ds/primitives/selection-control.ts"],"sourcesContent":["import { transitions } from './transitions';\n\n// Surface language shared by Checkbox and Radio. The two differ only in radius\n// and indicator glyph, so the surface lives here rather than in both files.\n//\n// Selection controls sit one rung brighter than field-sized surfaces: 16px of\n// fill needs more weight than a full-width input to read. Checked flips to the\n// solid `--foreground` chip; disabled resolves to muted roles (never opacity)\n// so an off and an on control stay distinguishable while both read inert.\n//\n// Base UI renders both roots as `<span>`, so `:disabled` never matches and the\n// disabled states hang off `data-disabled`.\nexport const selectionControlStyle = [\n  'flex size-4 shrink-0 cursor-pointer items-center justify-center',\n  'border border-border bg-fill-hover text-background outline-hidden',\n  transitions.all,\n  'hover:border-border-strong hover:bg-fill-active',\n  'active:scale-95 active:border-border-hover active:bg-fill-strong',\n  'focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid',\n  'data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background',\n  'data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90',\n  'data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100',\n  'data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background',\n].join(' ');\n"],"names":["transitions"],"mappings":";;;;;;AAYO,MAAM,qBAAA,GAAwB;AAAA,EACnC,iEAAA;AAAA,EACA,mEAAA;AAAA,EACAA,kCAAA,CAAY,GAAA;AAAA,EACZ,iDAAA;AAAA,EACA,kEAAA;AAAA,EACA,yJAAA;AAAA,EACA,8FAAA;AAAA,EACA,iFAAA;AAAA,EACA,mFAAA;AAAA,EACA,kIAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;;;;"}

package/dist/primitives/selection-control.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/selection-control'
+export {}

package/dist/primitives/selection-control.es.js

@@ -0,0 +1,18 @@
+import { transitions } from './transitions.es.js';
+
+const selectionControlStyle = [
+  "flex size-4 shrink-0 cursor-pointer items-center justify-center",
+  "border border-border bg-fill-hover text-background outline-hidden",
+  transitions.all,
+  "hover:border-border-strong hover:bg-fill-active",
+  "active:scale-95 active:border-border-hover active:bg-fill-strong",
+  "focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid",
+  "data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background",
+  "data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90",
+  "data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100",
+  "data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background"
+].join(" ");
+
+export { selectionControlStyle };
+//# sourceMappingURL=selection-control.es.js.map

package/dist/primitives/selection-control.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control.es.js","sources":["../../src/ds/primitives/selection-control.ts"],"sourcesContent":["import { transitions } from './transitions';\n\n// Surface language shared by Checkbox and Radio. The two differ only in radius\n// and indicator glyph, so the surface lives here rather than in both files.\n//\n// Selection controls sit one rung brighter than field-sized surfaces: 16px of\n// fill needs more weight than a full-width input to read. Checked flips to the\n// solid `--foreground` chip; disabled resolves to muted roles (never opacity)\n// so an off and an on control stay distinguishable while both read inert.\n//\n// Base UI renders both roots as `<span>`, so `:disabled` never matches and the\n// disabled states hang off `data-disabled`.\nexport const selectionControlStyle = [\n  'flex size-4 shrink-0 cursor-pointer items-center justify-center',\n  'border border-border bg-fill-hover text-background outline-hidden',\n  transitions.all,\n  'hover:border-border-strong hover:bg-fill-active',\n  'active:scale-95 active:border-border-hover active:bg-fill-strong',\n  'focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid',\n  'data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background',\n  'data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90',\n  'data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100',\n  'data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background',\n].join(' ');\n"],"names":[],"mappings":";;AAYO,MAAM,qBAAA,GAAwB;AAAA,EACnC,iEAAA;AAAA,EACA,mEAAA;AAAA,EACA,WAAA,CAAY,GAAA;AAAA,EACZ,iDAAA;AAAA,EACA,kEAAA;AAAA,EACA,yJAAA;AAAA,EACA,8FAAA;AAAA,EACA,iFAAA;AAAA,EACA,mFAAA;AAAA,EACA,kIAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;;;;"}

package/dist/primitives/transitions.cjs.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const controlStateColorTransition = "transition-[color] duration-fast ease-out-custom motion-reduce:transition-none";
 const transitions = {
   // For color changes (background, text, border)
   colors: "transition-colors duration-normal ease-out-custom",
@@ -35,6 +36,7 @@ const focusRing = {
   visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
 };
 
+exports.controlStateColorTransition = controlStateColorTransition;
 exports.focusRing = focusRing;
 exports.hoverEffects = hoverEffects;
 exports.transitions = transitions;

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-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;;;;;;"}
+{"version":3,"file":"transitions.cjs.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Motion policy for interactive state (hover / press / open / focus)\n//\n// A control's BACKGROUND switches instantly; only its COLOUR fades, over\n// 150ms. Hover fires more than any other interaction — sweeping a cursor\n// across a nav crosses ten rows a second — and fading the fill leaves the\n// surface trailing the pointer, while the colour crossfade is what stops the\n// label from snapping. This is measured from Linear, whose rows carry exactly\n// `transition: color 0.15s` and no background transition.\n//\n// Animate what moves or arrives instead: overlays entering, panels collapsing,\n// a switch thumb travelling. Those happen once per intent, not ten times a\n// second. https://craft.gustavofior.com/hover-restraint\nexport const controlStateColorTransition =\n  'transition-[color] duration-fast ease-out-custom motion-reduce:transition-none';\n\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":";;;;AAYO,MAAM,2BAAA,GACX;AAEK,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

@@ -1,3 +1,4 @@
+const controlStateColorTransition = "transition-[color] duration-fast ease-out-custom motion-reduce:transition-none";
 const transitions = {
   // For color changes (background, text, border)
   colors: "transition-colors duration-normal ease-out-custom",
@@ -31,5 +32,5 @@ const focusRing = {
   visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
 };
 
-export { focusRing, hoverEffects, transitions };
+export { controlStateColorTransition, focusRing, hoverEffects, transitions };
 //# sourceMappingURL=transitions.es.js.map

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-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;;;;"}
+{"version":3,"file":"transitions.es.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Motion policy for interactive state (hover / press / open / focus)\n//\n// A control's BACKGROUND switches instantly; only its COLOUR fades, over\n// 150ms. Hover fires more than any other interaction — sweeping a cursor\n// across a nav crosses ten rows a second — and fading the fill leaves the\n// surface trailing the pointer, while the colour crossfade is what stops the\n// label from snapping. This is measured from Linear, whose rows carry exactly\n// `transition: color 0.15s` and no background transition.\n//\n// Animate what moves or arrives instead: overlays entering, panels collapsing,\n// a switch thumb travelling. Those happen once per intent, not ten times a\n// second. https://craft.gustavofior.com/hover-restraint\nexport const controlStateColorTransition =\n  'transition-[color] duration-fast ease-out-custom motion-reduce:transition-none';\n\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":"AAYO,MAAM,2BAAA,GACX;AAEK,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-C2dx_QZN.cjs');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const Button = require('../Button-CVewl8nT.cjs');
+const utils_cn = require('../cn-DG0X1KEP.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-DS6O6fvU.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { B as Button } from '../Button-cWcBEd-G.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 function resolveTriggerRender({
   render,

package/dist/primitives/typography.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const quietTextHover = "text-muted-foreground hover:text-foreground";
+const quietTextHoverInGroup = "text-muted-foreground group-hover:text-foreground";
+
+exports.quietTextHover = quietTextHover;
+exports.quietTextHoverInGroup = quietTextHoverInGroup;
+//# sourceMappingURL=typography.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.cjs.js","sources":["../../src/ds/primitives/typography.ts"],"sourcesContent":["/**\n * A quiet control that resolves to ink when pointed at — the two-tone rule\n * every row, nav item and icon button follows. Colour is the only thing a\n * hover animates (see `controlStateColorTransition`).\n *\n * Size and weight are not here: they arrive as one `text-<role>` class from\n * the roles in theme/typography.css, so a component never assembles a text style.\n */\nexport const quietTextHover = 'text-muted-foreground hover:text-foreground';\n\n/** Same rule, driven by the hover of an enclosing `group`. */\nexport const quietTextHoverInGroup = 'text-muted-foreground group-hover:text-foreground';\n"],"names":[],"mappings":";;;;AAQO,MAAM,cAAA,GAAiB;AAGvB,MAAM,qBAAA,GAAwB;;;;;"}

package/dist/primitives/typography.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/typography'
+export {}

package/dist/primitives/typography.es.js

@@ -0,0 +1,5 @@
+const quietTextHover = "text-muted-foreground hover:text-foreground";
+const quietTextHoverInGroup = "text-muted-foreground group-hover:text-foreground";
+
+export { quietTextHover, quietTextHoverInGroup };
+//# sourceMappingURL=typography.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.es.js","sources":["../../src/ds/primitives/typography.ts"],"sourcesContent":["/**\n * A quiet control that resolves to ink when pointed at — the two-tone rule\n * every row, nav item and icon button follows. Colour is the only thing a\n * hover animates (see `controlStateColorTransition`).\n *\n * Size and weight are not here: they arrive as one `text-<role>` class from\n * the roles in theme/typography.css, so a component never assembles a text style.\n */\nexport const quietTextHover = 'text-muted-foreground hover:text-foreground';\n\n/** Same rule, driven by the hover of an enclosing `group`. */\nexport const quietTextHoverInGroup = 'text-muted-foreground group-hover:text-foreground';\n"],"names":[],"mappings":"AAQO,MAAM,cAAA,GAAiB;AAGvB,MAAM,qBAAA,GAAwB;;;;"}