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

package/dist/page-layout-DXFMbJi3.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+const pageHeadingContext = require('./page-heading-context-Du-CpxAx.cjs');
+const index = require('./index-gbqoNdVM.cjs');
+
+function PageLayoutColumn({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid content-start", className), children });
+}
+
+function PageLayoutMainArea({ children, className, isCentered = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        "overflow-auto",
+        {
+          "flex items-center justify-center": isCentered
+        },
+        className
+      ),
+      children
+    }
+  );
+}
+
+function PageLayoutRoot({
+  children,
+  className,
+  width = "default",
+  height = "default"
+}) {
+  const pageHeading = pageHeadingContext.usePageHeading();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      className: utils_cn.cn(
+        "grid w-full grid-rows-[auto_auto] content-start p-4",
+        {
+          "max-w-screen-lg mx-auto pt-6": width === "narrow",
+          "h-full grid-rows-[auto_minmax(0,1fr)] overflow-y-auto": height === "full"
+        },
+        className
+        //   'LAYOUT_ROOT border border-dashed border-orange-400',
+      ),
+      children: [
+        pageHeading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sr-only", children: pageHeading }),
+        children
+      ]
+    }
+  );
+}
+
+const pageLayoutRowVariants = index.cva("flex justify-between gap-3", {
+  variants: {
+    align: {
+      start: "items-start",
+      center: "items-center"
+    },
+    stack: {
+      horizontal: "flex-row",
+      responsive: "flex-col items-stretch sm:flex-row"
+    }
+  },
+  compoundVariants: [
+    {
+      stack: "responsive",
+      align: "start",
+      class: "sm:items-start"
+    },
+    {
+      stack: "responsive",
+      align: "center",
+      class: "sm:items-center"
+    }
+  ],
+  defaultVariants: {
+    align: "start",
+    stack: "horizontal"
+  }
+});
+function PageLayoutRow({ children, className, align, stack }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(pageLayoutRowVariants({ align, stack }), className), children });
+}
+
+function PageLayoutTopArea({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid gap-3 pb-3", className), children });
+}
+
+const PageLayout = Object.assign(PageLayoutRoot, {
+  TopArea: PageLayoutTopArea,
+  MainArea: PageLayoutMainArea,
+  Column: PageLayoutColumn,
+  Row: PageLayoutRow
+});
+
+exports.PageLayout = PageLayout;
+//# sourceMappingURL=page-layout-DXFMbJi3.cjs.map

package/dist/page-layout-DXFMbJi3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout-DXFMbJi3.cjs","sources":["../src/ds/components/PageLayout/page-layout-column.tsx","../src/ds/components/PageLayout/page-layout-main-area.tsx","../src/ds/components/PageLayout/page-layout-root.tsx","../src/ds/components/PageLayout/page-layout-row.tsx","../src/ds/components/PageLayout/page-layout-top-area.tsx","../src/ds/components/PageLayout/page-layout.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type PageLayoutColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function PageLayoutColumn({ children, className }: PageLayoutColumnProps) {\n  return <div className={cn('grid content-start', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type PageLayoutMainAreaProps = {\n  children: ReactNode;\n  className?: string;\n  isCentered?: boolean;\n};\n\nexport function PageLayoutMainArea({ children, className, isCentered = false }: PageLayoutMainAreaProps) {\n  return (\n    <div\n      className={cn(\n        'overflow-auto',\n        {\n          'flex items-center justify-center': isCentered,\n        },\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { usePageHeading } from './page-heading-context';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutRoot({\n  children,\n  className,\n  width = 'default',\n  height = 'default',\n}: {\n  children: ReactNode;\n  className?: string;\n  width?: 'default' | 'narrow' | 'wide';\n  height?: 'default' | 'full';\n}) {\n  const pageHeading = usePageHeading();\n\n  return (\n    <main\n      className={cn(\n        'grid w-full grid-rows-[auto_auto] content-start p-4',\n        {\n          'max-w-screen-lg mx-auto pt-6': width === 'narrow',\n          'h-full grid-rows-[auto_minmax(0,1fr)] overflow-y-auto': height === 'full',\n        },\n        className,\n        //   'LAYOUT_ROOT border border-dashed border-orange-400',\n      )}\n    >\n      {pageHeading && <h1 className=\"sr-only\">{pageHeading}</h1>}\n      {children}\n    </main>\n  );\n}\n","import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst pageLayoutRowVariants = cva('flex justify-between gap-3', {\n  variants: {\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n    },\n    stack: {\n      horizontal: 'flex-row',\n      responsive: 'flex-col items-stretch sm:flex-row',\n    },\n  },\n  compoundVariants: [\n    {\n      stack: 'responsive',\n      align: 'start',\n      class: 'sm:items-start',\n    },\n    {\n      stack: 'responsive',\n      align: 'center',\n      class: 'sm:items-center',\n    },\n  ],\n  defaultVariants: {\n    align: 'start',\n    stack: 'horizontal',\n  },\n});\n\nexport type PageLayoutRowProps = {\n  children?: React.ReactNode;\n  className?: string;\n} & VariantProps<typeof pageLayoutRowVariants>;\n\nexport function PageLayoutRow({ children, className, align, stack }: PageLayoutRowProps) {\n  return <div className={cn(pageLayoutRowVariants({ align, stack }), className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutTopArea({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('grid gap-3 pb-3', className)}>{children}</div>;\n}\n","import { PageLayoutColumn } from './page-layout-column';\nimport { PageLayoutMainArea } from './page-layout-main-area';\nimport { PageLayoutRoot } from './page-layout-root';\nimport { PageLayoutRow } from './page-layout-row';\nimport { PageLayoutTopArea } from './page-layout-top-area';\n\nexport const PageLayout = Object.assign(PageLayoutRoot, {\n  TopArea: PageLayoutTopArea,\n  MainArea: PageLayoutMainArea,\n  Column: PageLayoutColumn,\n  Row: PageLayoutRow,\n});\n"],"names":["cn","jsx","usePageHeading","jsxs","cva"],"mappings":";;;;;;;AAOO,SAAS,gBAAA,CAAiB,EAAE,QAAA,EAAU,SAAA,EAAU,EAA0B;AAC/E,EAAA,sCAAQ,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,oBAAA,EAAsB,SAAS,GAAI,QAAA,EAAS,CAAA;AACxE;;ACAO,SAAS,mBAAmB,EAAE,QAAA,EAAU,SAAA,EAAW,UAAA,GAAa,OAAM,EAA4B;AACvG,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA;AAAA,QACT,eAAA;AAAA,QACA;AAAA,UACE,kCAAA,EAAoC;AAAA,SACtC;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;ACnBO,SAAS,cAAA,CAAe;AAAA,EAC7B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA,GAAS;AACX,CAAA,EAKG;AACD,EAAA,MAAM,cAAcE,iCAAA,EAAe;AAEnC,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWH,WAAA;AAAA,QACT,qDAAA;AAAA,QACA;AAAA,UACE,gCAAgC,KAAA,KAAU,QAAA;AAAA,UAC1C,yDAAyD,MAAA,KAAW;AAAA,SACtE;AAAA,QACA;AAAA;AAAA,OAEF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA,oBAAeC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QACpD;AAAA;AAAA;AAAA,GACH;AAEJ;;AC7BA,MAAM,qBAAA,GAAwBG,UAAI,4BAAA,EAA8B;AAAA,EAC9D,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,KAAA,EAAO;AAAA,MACL,UAAA,EAAY,UAAA;AAAA,MACZ,UAAA,EAAY;AAAA;AACd,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB;AAAA,MACE,KAAA,EAAO,YAAA;AAAA,MACP,KAAA,EAAO,OAAA;AAAA,MACP,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,KAAA,EAAO,YAAA;AAAA,MACP,KAAA,EAAO,QAAA;AAAA,MACP,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,OAAA;AAAA,IACP,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAOM,SAAS,cAAc,EAAE,QAAA,EAAU,SAAA,EAAW,KAAA,EAAO,OAAM,EAAuB;AACvF,EAAA,uBAAOH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,WAAA,CAAG,qBAAA,CAAsB,EAAE,KAAA,EAAO,KAAA,EAAO,CAAA,EAAG,SAAS,CAAA,EAAI,QAAA,EAAS,CAAA;AAC3F;;ACrCO,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AACtG,EAAA,sCAAQ,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,iBAAA,EAAmB,SAAS,GAAI,QAAA,EAAS,CAAA;AACrE;;ACCO,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,cAAA,EAAgB;AAAA,EACtD,OAAA,EAAS,iBAAA;AAAA,EACT,QAAA,EAAU,kBAAA;AAAA,EACV,MAAA,EAAQ,gBAAA;AAAA,EACR,GAAA,EAAK;AACP,CAAC;;;;"}

package/dist/popover-CGB4qBAn.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const popover = require('@base-ui/react/popover');
+const React = require('react');
+const primitives_floating = require('./primitives/floating.cjs.js');
+const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
+const primitives_triggerButton = require('./primitives/trigger-button.cjs.js');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Popover = popover.Popover.Root;
+const PopoverTrigger = React__namespace.forwardRef(
+  ({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {
+    const resolved = primitives_triggerButton.resolveTriggerRender({ render, asChild, children, variant, size, tooltip, className });
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ref, className: resolved.className, render: resolved.render, ...props, children: resolved.children });
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+const PopoverContent = React__namespace.forwardRef(
+  ({
+    className,
+    container,
+    align = "center",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    anchor,
+    positionMethod = primitives_floating.FLOATING_POSITION_METHOD,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+    ...props
+  }, ref) => {
+    const classNameString = typeof className === "string" ? className : void 0;
+    const resolvedContainer = primitives_portalContainer.usePortalContainer(container);
+    const positionerProps = {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      anchor,
+      positionMethod,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      arrowPadding,
+      disableAnchorTracking,
+      collisionAvoidance
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Positioner, { className: "z-50 outline-none", ...positionerProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+      popover.Popover.Popup,
+      {
+        ref,
+        "data-slot": "popover-content",
+        className: utils_cn.cn(
+          "z-50 w-72 origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden",
+          "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",
+          classNameString && /\bp[trblxy]?-\S+/.test(classNameString) ? false : `px-3 py-3.5`,
+          className
+        ),
+        ...props
+      }
+    ) }) });
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+function HoverPopover({
+  children,
+  ...props
+}) {
+  const [open, setOpen] = React__namespace.useState(false);
+  const timeoutRef = React__namespace.useRef(void 0);
+  const handleOpen = React__namespace.useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    setOpen(true);
+  }, []);
+  const handleClose = React__namespace.useCallback(() => {
+    timeoutRef.current = setTimeout(() => setOpen(false), 150);
+  }, []);
+  React__namespace.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onFocusCapture: handleOpen,
+      onBlurCapture: handleClose,
+      style: { display: "contents" },
+      children
+    }
+  ) });
+}
+
+exports.HoverPopover = HoverPopover;
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+//# sourceMappingURL=popover-CGB4qBAn.cjs.map

package/dist/popover-CGB4qBAn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-CGB4qBAn.cjs","sources":["../src/ds/components/Popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport type { PopoverPopupProps, PopoverPositionerProps } from '@base-ui/react/popover';\nimport * as React from 'react';\n\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { resolveTriggerRender } from '@/ds/primitives/trigger-button';\nimport type { TriggerButtonProps } from '@/ds/primitives/trigger-button';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\nexport type PopoverTriggerProps = Omit<PopoverPrimitive.Trigger.Props, 'className'> & TriggerButtonProps;\n\n/**\n * The button that opens the popover. Renders a design-system `<Button>` by\n * default, so it takes Button's `variant` / `size` / `tooltip`. Pass `render`\n * to project the behavior onto your own element (then the look is yours).\n */\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {\n    const resolved = resolveTriggerRender({ render, asChild, children, variant, size, tooltip, className });\n\n    return (\n      <PopoverPrimitive.Trigger ref={ref} className={resolved.className} render={resolved.render} {...props}>\n        {resolved.children}\n      </PopoverPrimitive.Trigger>\n    );\n  },\n);\nPopoverTrigger.displayName = 'PopoverTrigger';\n\ntype PopoverContentPositionerProps = Omit<PopoverPositionerProps, keyof PopoverPopupProps>;\n\ntype PopoverContentProps = PopoverPopupProps &\n  PopoverContentPositionerProps & {\n    /** Optional portal container, forwarded to `Popover.Portal`. */\n    container?: HTMLElement | null;\n  };\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  (\n    {\n      className,\n      container,\n      align = 'center',\n      alignOffset = 0,\n      side = 'bottom',\n      sideOffset = 4,\n      anchor,\n      positionMethod = FLOATING_POSITION_METHOD,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNameString = typeof className === 'string' ? className : undefined;\n    // Default to the nearest SideDialog/Drawer popup so the content stays\n    // interactive inside a modal drawer; an explicit `container` still wins.\n    const resolvedContainer = usePortalContainer(container);\n    const positionerProps: PopoverContentPositionerProps = {\n      align,\n      alignOffset,\n      side,\n      sideOffset,\n      anchor,\n      positionMethod,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n    };\n\n    return (\n      <PopoverPrimitive.Portal container={resolvedContainer}>\n        <PopoverPrimitive.Positioner className=\"z-50 outline-none\" {...positionerProps}>\n          <PopoverPrimitive.Popup\n            ref={ref}\n            data-slot=\"popover-content\"\n            className={cn(\n              'z-50 w-72 origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden',\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              classNameString && /\\bp[trblxy]?-\\S+/.test(classNameString) ? false : `px-3 py-3.5`,\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nPopoverContent.displayName = 'PopoverContent';\n\nfunction HoverPopover({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof Popover>, 'children'> & { children?: React.ReactNode }) {\n  const [open, setOpen] = React.useState(false);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const handleOpen = React.useCallback(() => {\n    clearTimeout(timeoutRef.current);\n    setOpen(true);\n  }, []);\n\n  const handleClose = React.useCallback(() => {\n    timeoutRef.current = setTimeout(() => setOpen(false), 150);\n  }, []);\n\n  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <span\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        style={{ display: 'contents' }}\n      >\n        {children}\n      </span>\n    </Popover>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, HoverPopover };\n"],"names":["PopoverPrimitive","React","resolveTriggerRender","jsx","FLOATING_POSITION_METHOD","usePortalContainer","cn"],"mappings":"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"}

package/dist/popover-lj-OpKKH.js

@@ -0,0 +1,97 @@
+import { jsx } from 'react/jsx-runtime';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import * as React from 'react';
+import { FLOATING_POSITION_METHOD } from './primitives/floating.es.js';
+import { usePortalContainer } from './primitives/portal-container.es.js';
+import { resolveTriggerRender } from './primitives/trigger-button.es.js';
+import { c as cn } from './cn-C6s2yXwM.js';
+
+const Popover = Popover$1.Root;
+const PopoverTrigger = React.forwardRef(
+  ({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {
+    const resolved = resolveTriggerRender({ render, asChild, children, variant, size, tooltip, className });
+    return /* @__PURE__ */ jsx(Popover$1.Trigger, { ref, className: resolved.className, render: resolved.render, ...props, children: resolved.children });
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+const PopoverContent = React.forwardRef(
+  ({
+    className,
+    container,
+    align = "center",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    anchor,
+    positionMethod = FLOATING_POSITION_METHOD,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+    ...props
+  }, ref) => {
+    const classNameString = typeof className === "string" ? className : void 0;
+    const resolvedContainer = usePortalContainer(container);
+    const positionerProps = {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      anchor,
+      positionMethod,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      arrowPadding,
+      disableAnchorTracking,
+      collisionAvoidance
+    };
+    return /* @__PURE__ */ jsx(Popover$1.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(Popover$1.Positioner, { className: "z-50 outline-none", ...positionerProps, children: /* @__PURE__ */ jsx(
+      Popover$1.Popup,
+      {
+        ref,
+        "data-slot": "popover-content",
+        className: cn(
+          "z-50 w-72 origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden",
+          "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",
+          classNameString && /\bp[trblxy]?-\S+/.test(classNameString) ? false : `px-3 py-3.5`,
+          className
+        ),
+        ...props
+      }
+    ) }) });
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+function HoverPopover({
+  children,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const timeoutRef = React.useRef(void 0);
+  const handleOpen = React.useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    setOpen(true);
+  }, []);
+  const handleClose = React.useCallback(() => {
+    timeoutRef.current = setTimeout(() => setOpen(false), 150);
+  }, []);
+  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onFocusCapture: handleOpen,
+      onBlurCapture: handleClose,
+      style: { display: "contents" },
+      children
+    }
+  ) });
+}
+
+export { HoverPopover as H, Popover as P, PopoverContent as a, PopoverTrigger as b };
+//# sourceMappingURL=popover-lj-OpKKH.js.map

package/dist/popover-lj-OpKKH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-lj-OpKKH.js","sources":["../src/ds/components/Popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport type { PopoverPopupProps, PopoverPositionerProps } from '@base-ui/react/popover';\nimport * as React from 'react';\n\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { resolveTriggerRender } from '@/ds/primitives/trigger-button';\nimport type { TriggerButtonProps } from '@/ds/primitives/trigger-button';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\nexport type PopoverTriggerProps = Omit<PopoverPrimitive.Trigger.Props, 'className'> & TriggerButtonProps;\n\n/**\n * The button that opens the popover. Renders a design-system `<Button>` by\n * default, so it takes Button's `variant` / `size` / `tooltip`. Pass `render`\n * to project the behavior onto your own element (then the look is yours).\n */\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ className, asChild, render, children, variant, size, tooltip, ...props }, ref) => {\n    const resolved = resolveTriggerRender({ render, asChild, children, variant, size, tooltip, className });\n\n    return (\n      <PopoverPrimitive.Trigger ref={ref} className={resolved.className} render={resolved.render} {...props}>\n        {resolved.children}\n      </PopoverPrimitive.Trigger>\n    );\n  },\n);\nPopoverTrigger.displayName = 'PopoverTrigger';\n\ntype PopoverContentPositionerProps = Omit<PopoverPositionerProps, keyof PopoverPopupProps>;\n\ntype PopoverContentProps = PopoverPopupProps &\n  PopoverContentPositionerProps & {\n    /** Optional portal container, forwarded to `Popover.Portal`. */\n    container?: HTMLElement | null;\n  };\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  (\n    {\n      className,\n      container,\n      align = 'center',\n      alignOffset = 0,\n      side = 'bottom',\n      sideOffset = 4,\n      anchor,\n      positionMethod = FLOATING_POSITION_METHOD,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNameString = typeof className === 'string' ? className : undefined;\n    // Default to the nearest SideDialog/Drawer popup so the content stays\n    // interactive inside a modal drawer; an explicit `container` still wins.\n    const resolvedContainer = usePortalContainer(container);\n    const positionerProps: PopoverContentPositionerProps = {\n      align,\n      alignOffset,\n      side,\n      sideOffset,\n      anchor,\n      positionMethod,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n    };\n\n    return (\n      <PopoverPrimitive.Portal container={resolvedContainer}>\n        <PopoverPrimitive.Positioner className=\"z-50 outline-none\" {...positionerProps}>\n          <PopoverPrimitive.Popup\n            ref={ref}\n            data-slot=\"popover-content\"\n            className={cn(\n              'z-50 w-72 origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden',\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              classNameString && /\\bp[trblxy]?-\\S+/.test(classNameString) ? false : `px-3 py-3.5`,\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nPopoverContent.displayName = 'PopoverContent';\n\nfunction HoverPopover({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof Popover>, 'children'> & { children?: React.ReactNode }) {\n  const [open, setOpen] = React.useState(false);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const handleOpen = React.useCallback(() => {\n    clearTimeout(timeoutRef.current);\n    setOpen(true);\n  }, []);\n\n  const handleClose = React.useCallback(() => {\n    timeoutRef.current = setTimeout(() => setOpen(false), 150);\n  }, []);\n\n  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <span\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        style={{ display: 'contents' }}\n      >\n        {children}\n      </span>\n    </Popover>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, HoverPopover };\n"],"names":["PopoverPrimitive"],"mappings":"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"}

package/dist/primitives/control-size.cjs.js

@@ -14,16 +14,24 @@ const controlSizeClasses = {
   md: "h-form-md text-ui-smd",
   lg: "h-form-lg text-ui-md"
 };
+const controlIconClasses = {
+  xs: "[&>svg]:size-3 [&>svg]:[stroke-width:2]",
+  sm: "[&>svg]:size-3.5 [&>svg]:[stroke-width:1.75]",
+  md: "[&>svg]:size-4 [&>svg]:[stroke-width:1.5]",
+  lg: "[&>svg]:size-5 [&>svg]:[stroke-width:1.25]"
+};
 const controlTriggerOpenState = {
-  default: "data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6",
-  outline: "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
-  ghost: "data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6"
+  default: "data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground",
+  field: "data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground",
+  outline: "data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground data-[popup-open]:border-foreground/45",
+  ghost: "data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground"
 };
 function controlTriggerOpenStateFor(variant) {
   return variant === "default" || variant === "outline" || variant === "ghost" ? controlTriggerOpenState[variant] : void 0;
 }
 
 exports.controlHeight = controlHeight;
+exports.controlIconClasses = controlIconClasses;
 exports.controlSizeClasses = controlSizeClasses;
 exports.controlTriggerOpenState = controlTriggerOpenState;
 exports.controlTriggerOpenStateFor = controlTriggerOpenStateFor;

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

@@ -1 +1 @@
-{"version":3,"file":"control-size.cjs.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 28px; text 10/12/13/14px.\n// `md` and `lg` share a height on purpose: `lg` only bumps the text size and\n// per-component padding, so a large button and a large input still align.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6',\n  outline: 'data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2',\n  ghost: 'data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAMO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,8EAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;;;;"}
+{"version":3,"file":"control-size.cjs.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 32px; text 10/12/13/14px.\n// Every step gains height, so `lg` is a genuinely larger control and an icon-only\n// `lg` matches a labelled one in the same row.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\n// Icon geometry for a bare `<svg>` child, keyed by control size so it matches what\n// `<Icon>` renders for the same control. Sizes are integers (12/14/16/20) because an\n// em-relative icon lands on fractions like 14.3px and renders soft, and the stroke is\n// pinned per size so every icon holds a ~1px line. Icon size names live on `<Icon>`;\n// these classes exist only for children the DS does not wrap.\nexport const controlIconClasses: Record<ControlSize, string> = {\n  xs: '[&>svg]:size-3 [&>svg]:[stroke-width:2]',\n  sm: '[&>svg]:size-3.5 [&>svg]:[stroke-width:1.75]',\n  md: '[&>svg]:size-4 [&>svg]:[stroke-width:1.5]',\n  lg: '[&>svg]:size-5 [&>svg]:[stroke-width:1.25]',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` is the Button's own hover\n// (for Button-shaped triggers: DropdownMenu, Popover, DateTimePicker); `field`\n// is the Input-family overlay used by the filled Select/Combobox triggers.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant | 'field', string> = {\n  default: 'data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground',\n  field: 'data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground',\n  outline: 'data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground data-[popup-open]:border-foreground/45',\n  ghost: 'data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAYO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAOO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,yCAAA;AAAA,EACJ,EAAA,EAAI,8CAAA;AAAA,EACJ,EAAA,EAAI,2CAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAOO,MAAM,uBAAA,GAAiF;AAAA,EAC5F,OAAA,EAAS,sEAAA;AAAA,EACT,KAAA,EAAO,sEAAA;AAAA,EACP,OAAA,EAAS,4GAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;;;;;"}

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

@@ -10,14 +10,21 @@ const controlSizeClasses = {
   md: "h-form-md text-ui-smd",
   lg: "h-form-lg text-ui-md"
 };
+const controlIconClasses = {
+  xs: "[&>svg]:size-3 [&>svg]:[stroke-width:2]",
+  sm: "[&>svg]:size-3.5 [&>svg]:[stroke-width:1.75]",
+  md: "[&>svg]:size-4 [&>svg]:[stroke-width:1.5]",
+  lg: "[&>svg]:size-5 [&>svg]:[stroke-width:1.25]"
+};
 const controlTriggerOpenState = {
-  default: "data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6",
-  outline: "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
-  ghost: "data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6"
+  default: "data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground",
+  field: "data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground",
+  outline: "data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground data-[popup-open]:border-foreground/45",
+  ghost: "data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground"
 };
 function controlTriggerOpenStateFor(variant) {
   return variant === "default" || variant === "outline" || variant === "ghost" ? controlTriggerOpenState[variant] : void 0;
 }
 
-export { controlHeight, controlSizeClasses, controlTriggerOpenState, controlTriggerOpenStateFor };
+export { controlHeight, controlIconClasses, controlSizeClasses, controlTriggerOpenState, controlTriggerOpenStateFor };
 //# sourceMappingURL=control-size.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-size.es.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 28px; text 10/12/13/14px.\n// `md` and `lg` share a height on purpose: `lg` only bumps the text size and\n// per-component padding, so a large button and a large input still align.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6',\n  outline: 'data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2',\n  ghost: 'data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":"AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAMO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,8EAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;"}
+{"version":3,"file":"control-size.es.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 32px; text 10/12/13/14px.\n// Every step gains height, so `lg` is a genuinely larger control and an icon-only\n// `lg` matches a labelled one in the same row.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\n// Icon geometry for a bare `<svg>` child, keyed by control size so it matches what\n// `<Icon>` renders for the same control. Sizes are integers (12/14/16/20) because an\n// em-relative icon lands on fractions like 14.3px and renders soft, and the stroke is\n// pinned per size so every icon holds a ~1px line. Icon size names live on `<Icon>`;\n// these classes exist only for children the DS does not wrap.\nexport const controlIconClasses: Record<ControlSize, string> = {\n  xs: '[&>svg]:size-3 [&>svg]:[stroke-width:2]',\n  sm: '[&>svg]:size-3.5 [&>svg]:[stroke-width:1.75]',\n  md: '[&>svg]:size-4 [&>svg]:[stroke-width:1.5]',\n  lg: '[&>svg]:size-5 [&>svg]:[stroke-width:1.25]',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` is the Button's own hover\n// (for Button-shaped triggers: DropdownMenu, Popover, DateTimePicker); `field`\n// is the Input-family overlay used by the filled Select/Combobox triggers.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant | 'field', string> = {\n  default: 'data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground',\n  field: 'data-[popup-open]:bg-foreground/14 data-[popup-open]:text-foreground',\n  outline: 'data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground data-[popup-open]:border-foreground/45',\n  ghost: 'data-[popup-open]:bg-foreground/4 data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":"AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAYO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAOO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,yCAAA;AAAA,EACJ,EAAA,EAAI,8CAAA;AAAA,EACJ,EAAA,EAAI,2CAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAOO,MAAM,uBAAA,GAAiF;AAAA,EAC5F,OAAA,EAAS,sEAAA;AAAA,EACT,KAAA,EAAO,sEAAA;AAAA,EACP,OAAA,EAAS,4GAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;"}

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

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components_fluidHoverHighlight = require('../components/fluid-hover-highlight.cjs.js');
+const hooks_useFluidHover = require('../hooks/use-fluid-hover.cjs.js');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const FluidMenuContext = React__namespace.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__namespace.useRef(null);
+  const hover = hooks_useFluidHover.useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled });
+  const counterRef = React__namespace.useRef(0);
+  const { registerItem, setActiveIndex, handlers } = hover;
+  const context = React__namespace.useMemo(
+    () => ({ registerItem, setActiveIndex, activeAttr, allocateIndex: () => counterRef.current++ }),
+    [registerItem, setActiveIndex, activeAttr]
+  );
+  const getContainerProps = React__namespace.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__ */ jsxRuntime.jsxs(FluidMenuContext.Provider, { value: menu.context, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_fluidHoverHighlight.FluidHoverHighlight, { hover: menu.hover, className: utils_cn.cn("-z-1 rounded-lg bg-foreground/10", className) }),
+    children
+  ] });
+}
+function useFluidMenuItemRef(forwardedRef) {
+  const ctx = React__namespace.useContext(FluidMenuContext);
+  const indexRef = React__namespace.useRef(null);
+  const observerRef = React__namespace.useRef(null);
+  return React__namespace.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]
+  );
+}
+
+exports.FluidMenuItems = FluidMenuItems;
+exports.useFluidMenu = useFluidMenu;
+exports.useFluidMenuItemRef = useFluidMenuItemRef;
+//# sourceMappingURL=fluid-menu.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fluid-menu.cjs.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":["React","useFluidHover","jsx","FluidHoverHighlight","cn"],"mappings":"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"}

package/dist/primitives/fluid-menu.d.ts

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