@mastra/playground-ui 37.0.1-alpha.2 → 37.1.0-alpha.4

package/dist/multi-column-RwdQ5PRt.js

@@ -0,0 +1,152 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import './index.css';/* empty css               */
+import '@base-ui/react/combobox';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import './components/DataDetailsPanel.es.js';
+import './toast-BKsfnapA.js';
+import { c as cn } from './cn-BakJzhuv.js';
+import 'react-resizable-panels';
+import './resize/panel-icon-button.es.js';
+import './resize/separator.es.js';
+import './store/playground-store.es.js';
+import './domains/metrics/hooks/use-metrics.es.js';
+import './domains/metrics/components/latency-card-view.es.js';
+import './domains/metrics/components/scores-card-view.es.js';
+import './domains/metrics/components/token-usage-timeline-card-view.es.js';
+import '@mastra/react';
+import '@tanstack/react-query';
+import './domains/logs/log-filters.es.js';
+import './domains/traces/trace-filters.es.js';
+import './domains/metrics/metrics-filters.es.js';
+import 'date-fns/format';
+import 'date-fns';
+import './domains/traces/components/span-details-view.es.js';
+import '@tanstack/react-virtual';
+import './domains/logs/components/log-details-view.es.js';
+import 'recharts';
+import { B as Button } from './Button-Bq0VuEbC.js';
+
+function ColumnContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(`grid overflow-y-auto gap-8 content-start`, className), children });
+}
+
+function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex overflow-y-auto w-full", children: [
+    withLeftSeparator && /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx("div", { className: cn(`grid gap-8 content-start w-full overflow-y-auto`, className), children }),
+    withRightSeparator && /* @__PURE__ */ jsx(Separator, {})
+  ] });
+}
+function Separator() {
+  return /* @__PURE__ */ jsx("div", { className: cn("bg-surface5 w-[3px] shrink-0 mx-[1.5vw]") });
+}
+
+function ColumnToolbar({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className), children });
+}
+
+const Column = Object.assign(ColumnRoot, {
+  Content: ColumnContent,
+  Toolbar: ColumnToolbar
+});
+
+function Columns({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className), children });
+}
+
+function MultiColumn({ children, numOfColumns = 1, minColumnWidth }) {
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateScrollState = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setCanScrollLeft(scrollLeft > 1);
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+  }, []);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    updateScrollState();
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState]);
+  const prevColumnsRef = useRef(numOfColumns);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (numOfColumns > prevColumnsRef.current) {
+      requestAnimationFrame(() => {
+        el.scrollTo({ left: el.scrollWidth, behavior: "smooth" });
+      });
+    }
+    prevColumnsRef.current = numOfColumns;
+  }, [numOfColumns]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault();
+        scrollToColumn(e.key === "ArrowLeft" ? "left" : "right");
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  const scrollToColumn = (direction) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const columns = Array.from(el.children);
+    const containerLeft = el.scrollLeft;
+    const containerRight = containerLeft + el.clientWidth;
+    if (direction === "right") {
+      const target = columns.find((col) => col.offsetLeft + col.offsetWidth > containerRight + 1);
+      if (target) {
+        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: "smooth" });
+      }
+    } else {
+      const target = [...columns].reverse().find((col) => col.offsetLeft < containerLeft - 1);
+      if (target) {
+        el.scrollTo({ left: target.offsetLeft, behavior: "smooth" });
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("MULTI_COLUMN relative w-full h-full overflow-hidden"), children: [
+    canScrollLeft && /* @__PURE__ */ jsx(ScrollArrow, { direction: "left", onClick: () => scrollToColumn("left") }),
+    canScrollRight && /* @__PURE__ */ jsx(ScrollArrow, { direction: "right", onClick: () => scrollToColumn("right") }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "grid overflow-x-auto w-full overflow-y-auto h-full",
+        style: {
+          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? "0"}, 1fr))`
+        },
+        children
+      }
+    )
+  ] });
+}
+function ScrollArrow({ direction, onClick }) {
+  const Icon = direction === "left" ? ChevronLeftIcon : ChevronRightIcon;
+  const isLeft = direction === "left";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2",
+        isLeft ? "left-0" : "right-0"
+      ),
+      children: /* @__PURE__ */ jsx(Button, { onClick, className: "w-full h-full px-0", "aria-label": `Scroll ${direction}`, children: /* @__PURE__ */ jsx(Icon, {}) })
+    }
+  );
+}
+
+export { Column as C, MultiColumn as M, Columns as a };
+//# sourceMappingURL=multi-column-RwdQ5PRt.js.map

package/dist/multi-column-RwdQ5PRt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-RwdQ5PRt.js","sources":["../src/ds/components/Columns/column-content.tsx","../src/ds/components/Columns/column-root.tsx","../src/ds/components/Columns/column-toolbar.tsx","../src/ds/components/Columns/column.tsx","../src/ds/components/Columns/columns.tsx","../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid overflow-y-auto gap-8 content-start`, className)}>{children}</div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex overflow-y-auto w-full\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid gap-8 content-start w-full overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('bg-surface5 w-[3px] shrink-0 mx-[1.5vw]')}></div>;\n}\n","import { cn } from '@/index';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex items-center justify-between w-full flex-wrap gap-4 gap-x-6`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/index';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid w-full h-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative w-full h-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid overflow-x-auto w-full overflow-y-auto h-full\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute top-0 bottom-0 z-20 w-20 flex items-center justify-center px-5 bg-surface2',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"w-full h-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/popover-CfOWA0et.js

@@ -0,0 +1,95 @@
+import { jsx } from 'react/jsx-runtime';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import * as React from 'react';
+import { usePortalContainer } from './primitives/portal-container.es.js';
+import { a as asChildRenderProps } from './as-child-N1qMDCr8.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const Popover = Popover$1.Root;
+const PopoverTrigger = React.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Popover$1.Trigger, { ref, ...asChildRenderProps(asChild, children), ...props, children: asChild ? void 0 : children });
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+const PopoverContent = React.forwardRef(
+  ({
+    className,
+    container,
+    align = "center",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    anchor,
+    positionMethod,
+    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 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]",
+          "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 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 : `py-3.5 px-3`,
+          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-CfOWA0et.js.map

package/dist/popover-CfOWA0et.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-CfOWA0et.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 { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { asChildRenderProps } from '@/lib/as-child';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\ntype PopoverTriggerProps = PopoverPrimitive.Trigger.Props & {\n  /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */\n  asChild?: boolean;\n};\n\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ asChild, children, ...props }, ref) => {\n    return (\n      <PopoverPrimitive.Trigger ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n        {asChild ? undefined : 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,\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 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]',\n              'data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 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 : `py-3.5 px-3`,\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/popover-fpyU6qei.cjs

@@ -0,0 +1,119 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const popover = require('@base-ui/react/popover');
+const React = require('react');
+const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
+const asChild = require('./as-child-Dgr1RHLO.cjs');
+const utils_cn = require('./cn-vA5sWo9W.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(
+  ({ asChild: asChild$1, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ref, ...asChild.asChildRenderProps(asChild$1, children), ...props, children: asChild$1 ? void 0 : children });
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+const PopoverContent = React__namespace.forwardRef(
+  ({
+    className,
+    container,
+    align = "center",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    anchor,
+    positionMethod,
+    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 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]",
+          "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 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 : `py-3.5 px-3`,
+          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-fpyU6qei.cjs.map

package/dist/popover-fpyU6qei.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-fpyU6qei.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 { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { asChildRenderProps } from '@/lib/as-child';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\ntype PopoverTriggerProps = PopoverPrimitive.Trigger.Props & {\n  /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */\n  asChild?: boolean;\n};\n\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ asChild, children, ...props }, ref) => {\n    return (\n      <PopoverPrimitive.Trigger ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n        {asChild ? undefined : 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,\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 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]',\n              'data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 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 : `py-3.5 px-3`,\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","asChild","jsx","asChildRenderProps","usePortalContainer","cn"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const controlHeight = {
+  xs: "h-form-xs",
+  sm: "h-form-sm",
+  md: "h-form-md",
+  default: "h-form-default",
+  lg: "h-form-lg"
+};
+const controlSizeClasses = {
+  xs: "h-form-xs text-ui-xs",
+  sm: "h-form-sm text-ui-sm",
+  md: "h-form-md text-ui-md",
+  default: "h-form-default text-ui-md",
+  lg: "h-form-lg text-ui-lg"
+};
+const controlTriggerOpenState = {
+  default: "data-[popup-open]:bg-surface5 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"
+};
+
+exports.controlHeight = controlHeight;
+exports.controlSizeClasses = controlSizeClasses;
+exports.controlTriggerOpenState = controlTriggerOpenState;
+//# sourceMappingURL=control-size.cjs.js.map

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

@@ -0,0 +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' | 'default' | '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  default: 'h-form-default',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\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-md',\n  default: 'h-form-default text-ui-md',\n  lg: 'h-form-lg text-ui-lg',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-surface5 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"],"names":[],"mappings":";;;;AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,OAAA,EAAS,gBAAA;AAAA,EACT,EAAA,EAAI;AACN;AAGO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,OAAA,EAAS,2BAAA;AAAA,EACT,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,+DAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;;;;;;"}

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

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

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

@@ -0,0 +1,22 @@
+const controlHeight = {
+  xs: "h-form-xs",
+  sm: "h-form-sm",
+  md: "h-form-md",
+  default: "h-form-default",
+  lg: "h-form-lg"
+};
+const controlSizeClasses = {
+  xs: "h-form-xs text-ui-xs",
+  sm: "h-form-sm text-ui-sm",
+  md: "h-form-md text-ui-md",
+  default: "h-form-default text-ui-md",
+  lg: "h-form-lg text-ui-lg"
+};
+const controlTriggerOpenState = {
+  default: "data-[popup-open]:bg-surface5 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"
+};
+
+export { controlHeight, controlSizeClasses, controlTriggerOpenState };
+//# sourceMappingURL=control-size.es.js.map

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

@@ -0,0 +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' | 'default' | '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  default: 'h-form-default',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\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-md',\n  default: 'h-form-default text-ui-md',\n  lg: 'h-form-lg text-ui-lg',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-surface5 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"],"names":[],"mappings":"AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,OAAA,EAAS,gBAAA;AAAA,EACT,EAAA,EAAI;AACN;AAGO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,OAAA,EAAS,2BAAA;AAAA,EACT,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,+DAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;;;;"}

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
+const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
+const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
+const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
+const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
+
+exports.controlFocusBorderVisible = controlFocusBorderVisible;
+exports.inputFocusBorderVisible = inputFocusBorderVisible;
+exports.inputFocusBorderWithin = inputFocusBorderWithin;
+exports.inputHoverBorderVisible = inputHoverBorderVisible;
+exports.inputHoverBorderWithin = inputHoverBorderWithin;
+exports.inputOutlineAndFocusStyle = inputOutlineAndFocusStyle;
+exports.inputSurfaceAndFocusStyle = inputSurfaceAndFocusStyle;
+exports.sharedFormElementDisabledStyle = sharedFormElementDisabledStyle;
+exports.unstyledFormElementStyle = unstyledFormElementStyle;
+//# sourceMappingURL=form-element.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-element.cjs.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["export const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent neutral\n// (theme-aware neutral5 — light on dark surfaces, dark on light) that clears WCAG\n// 1.4.11 non-text contrast (3:1) on any surface, where the border1→border2 shift\n// alone (white/7%→11%) does not. `focus-visible` for the bare control,\n// `focus-within` for wrapper variants (InputGroup, Searchbar) whose focus lives on\n// a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'focus-within:border-neutral5/50';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible)]:border-border2';\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within)]:border-border2';\n\n// Background-agnostic surface + focus recipe shared by Input and Textarea.\n// Uses theme-aware opacity overlays so it reads on any underlying surface, with\n// no accent (green) on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\nexport const inputSurfaceAndFocusStyle =\n  'bg-surface-overlay-soft border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 hover:bg-surface-overlay-strong ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong ' +\n  inputFocusBorderVisible;\n\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":";;;;AAAO,MAAM,8BAAA,GAAiC;AASvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAM/B,MAAM,yBAAA,GACX,kHAAA,GAEA,uBAAA,GACA,uFAAA,GAEA;AAEK,MAAM,yBAAA,GACX,yEAAA,GAEA,uBAAA,GACA,+CAAA,GAEA;AAIK,MAAM,wBAAA,GAA2B;;;;;;;;;;;;"}

package/dist/primitives/form-element.d.ts

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

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

@@ -0,0 +1,12 @@
+const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
+const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
+const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
+const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
+const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
+
+export { controlFocusBorderVisible, inputFocusBorderVisible, inputFocusBorderWithin, inputHoverBorderVisible, inputHoverBorderWithin, inputOutlineAndFocusStyle, inputSurfaceAndFocusStyle, sharedFormElementDisabledStyle, unstyledFormElementStyle };
+//# sourceMappingURL=form-element.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-element.es.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["export const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent neutral\n// (theme-aware neutral5 — light on dark surfaces, dark on light) that clears WCAG\n// 1.4.11 non-text contrast (3:1) on any surface, where the border1→border2 shift\n// alone (white/7%→11%) does not. `focus-visible` for the bare control,\n// `focus-within` for wrapper variants (InputGroup, Searchbar) whose focus lives on\n// a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'focus-within:border-neutral5/50';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible)]:border-border2';\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within)]:border-border2';\n\n// Background-agnostic surface + focus recipe shared by Input and Textarea.\n// Uses theme-aware opacity overlays so it reads on any underlying surface, with\n// no accent (green) on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\nexport const inputSurfaceAndFocusStyle =\n  'bg-surface-overlay-soft border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 hover:bg-surface-overlay-strong ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong ' +\n  inputFocusBorderVisible;\n\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":"AAAO,MAAM,8BAAA,GAAiC;AASvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAM/B,MAAM,yBAAA,GACX,kHAAA,GAEA,uBAAA,GACA,uFAAA,GAEA;AAEK,MAAM,yBAAA,GACX,yEAAA,GAEA,uBAAA,GACA,+CAAA,GAEA;AAIK,MAAM,wBAAA,GAA2B;;;;"}

package/dist/primitives/portal-container.cjs.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+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 PortalContainerContext = React__namespace.createContext(void 0);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(container) {
+  const fromContext = React__namespace.useContext(PortalContainerContext);
+  return container ?? fromContext ?? void 0;
+}
+
+exports.PortalContainerProvider = PortalContainerProvider;
+exports.usePortalContainer = usePortalContainer;
+//# sourceMappingURL=portal-container.cjs.js.map

package/dist/primitives/portal-container.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-container.cjs.js","sources":["../../src/ds/primitives/portal-container.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react';\n\n/** Anything Base UI's `*.Portal` `container` accepts. */\nexport type PortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | React.RefObject<HTMLElement | ShadowRoot | null>\n  | null\n  | undefined;\n\n// Why: modal SideDialog/Drawer traps focus+clicks inside its region. Popups portal to\n// document.body by default → land outside the trap → unclickable. SideDialog publishes a\n// node inside the trap; popups portal there instead.\n//\n// Sentinel is `undefined`, never `null`: Base UI reads container={undefined} as \"portal to\n// body\", but container={null} as \"not ready, render nothing\" — a leaked null opens the popup\n// in state but mounts it nowhere (the model-picker bug).\nconst PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);\n\nexport function PortalContainerProvider({\n  container,\n  children,\n}: {\n  container: HTMLElement | null;\n  children: React.ReactNode;\n}) {\n  // Accept null for callers; normalize so null never reaches a portal.\n  return <PortalContainerContext.Provider value={container ?? undefined}>{children}</PortalContainerContext.Provider>;\n}\n\n/** Resolve a popup's portal target: explicit `container` → provider → `undefined` (body). Never null. */\nexport function usePortalContainer(container?: PortalContainer): Exclude<PortalContainer, null> {\n  const fromContext = React.useContext(PortalContainerContext);\n  return container ?? fromContext ?? undefined;\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,sBAAA,GAAyBA,gBAAA,CAAM,aAAA,CAAuC,MAAS,CAAA;AAE9E,SAAS,uBAAA,CAAwB;AAAA,EACtC,SAAA;AAAA,EACA;AACF,CAAA,EAGG;AAED,EAAA,sCAAQ,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,KAAA,EAAO,SAAA,IAAa,QAAY,QAAA,EAAS,CAAA;AACnF;AAGO,SAAS,mBAAmB,SAAA,EAA6D;AAC9F,EAAA,MAAM,WAAA,GAAcA,gBAAA,CAAM,UAAA,CAAW,sBAAsB,CAAA;AAC3D,EAAA,OAAO,aAAa,WAAA,IAAe,MAAA;AACrC;;;;;"}

package/dist/primitives/portal-container.d.ts

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

package/dist/primitives/portal-container.es.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+
+const PortalContainerContext = React.createContext(void 0);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(container) {
+  const fromContext = React.useContext(PortalContainerContext);
+  return container ?? fromContext ?? void 0;
+}
+
+export { PortalContainerProvider, usePortalContainer };
+//# sourceMappingURL=portal-container.es.js.map