@nationaldesignstudio/react 0.5.0 → 0.5.1

package/dist/components/atoms/popover/popover.js

@@ -0,0 +1,230 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import { tv as $, cnBase as i } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { floatingArrowVariants as C, FloatingArrowSvg as A } from "../../shared/floating-arrow.js";
+import { PopoverArrow as B } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/arrow/PopoverArrow.js";
+import { PopoverBackdrop as D } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/backdrop/PopoverBackdrop.js";
+import { PopoverClose as V } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/close/PopoverClose.js";
+import { PopoverDescription as j } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/description/PopoverDescription.js";
+import { PopoverPopup as z } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/popup/PopoverPopup.js";
+import { PopoverPortal as E } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/portal/PopoverPortal.js";
+import { PopoverPositioner as L } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/positioner/PopoverPositioner.js";
+import { PopoverRoot as S } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/root/PopoverRoot.js";
+import { PopoverTitle as M } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/title/PopoverTitle.js";
+import { PopoverTrigger as g } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/popover/trigger/PopoverTrigger.js";
+const F = $({
+  base: [
+    // Layout - uses component overlay tokens
+    "p-spatial-component-overlay-padding",
+    // Background - uses overlay background token
+    "bg-overlay-background",
+    // Border - uses overlay border token
+    "border border-overlay-border",
+    // Text - uses overlay text token
+    "text-overlay-text",
+    // Border radius - uses surface overlay token
+    "rounded-surface-overlay",
+    // Shadow for elevation
+    "shadow-lg",
+    // Allow arrow to extend outside popup bounds
+    "overflow-visible",
+    // Animation
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity] duration-150",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Ensure it's above other content (higher than backdrop z-40)
+    "z-50",
+    // Max width for reasonable content display
+    "max-w-[320px]"
+  ],
+  variants: {
+    variant: {
+      default: ""
+      // Future variants can be added here
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), O = C, l = ({ children: o, ...r }) => /* @__PURE__ */ e(S, { ...r, children: o }), d = a.forwardRef(
+  ({ className: o, children: r, ...t }, s) => a.isValidElement(r) ? /* @__PURE__ */ e(
+    g,
+    {
+      ref: s,
+      className: o,
+      render: r,
+      ...t
+    }
+  ) : /* @__PURE__ */ e(g, { ref: s, className: o, ...t, children: r })
+);
+d.displayName = "PopoverTrigger";
+const y = ({ children: o, ...r }) => /* @__PURE__ */ e(E, { ...r, children: o }), b = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    D,
+    {
+      ref: t,
+      className: i("fixed inset-0 z-40", o),
+      ...r
+    }
+  )
+);
+b.displayName = "PopoverBackdrop";
+const v = a.forwardRef(({ className: o, side: r = "bottom", sideOffset: t = 8, ...s }, p) => /* @__PURE__ */ e(
+  L,
+  {
+    ref: p,
+    side: r,
+    sideOffset: t,
+    className: i("z-50", o),
+    ...s
+  }
+));
+v.displayName = "PopoverPositioner";
+const m = a.forwardRef(
+  ({ className: o, variant: r, ...t }, s) => /* @__PURE__ */ e(
+    z,
+    {
+      ref: s,
+      className: i(F({ variant: r }), o),
+      ...t
+    }
+  )
+);
+m.displayName = "PopoverPopup";
+const c = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    B,
+    {
+      ref: t,
+      className: i(O(), o),
+      ...r,
+      children: /* @__PURE__ */ e(
+        A,
+        {
+          fillClassName: "fill-overlay-background",
+          borderClassName: "fill-overlay-border"
+        }
+      )
+    }
+  )
+);
+c.displayName = "PopoverArrow";
+const P = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    M,
+    {
+      ref: t,
+      className: i("typography-body-md-md font-semibold", o),
+      ...r
+    }
+  )
+);
+P.displayName = "PopoverTitle";
+const f = a.forwardRef(({ className: o, ...r }, t) => /* @__PURE__ */ e(
+  j,
+  {
+    ref: t,
+    className: i(
+      "typography-body-sm-md text-overlay-text-muted mt-8",
+      o
+    ),
+    ...r
+  }
+));
+f.displayName = "PopoverDescription";
+const u = a.forwardRef(
+  ({ className: o, ...r }, t) => /* @__PURE__ */ e(
+    V,
+    {
+      ref: t,
+      className: i(
+        "absolute right-8 top-8 rounded-surface-ui-small p-4",
+        "text-overlay-text-muted hover:text-overlay-text",
+        "hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+        o
+      ),
+      ...r
+    }
+  )
+);
+u.displayName = "PopoverClose";
+const oo = ({
+  children: o,
+  trigger: r,
+  title: t,
+  side: s = "bottom",
+  sideOffset: p = 8,
+  align: w = "center",
+  showArrow: h = !0,
+  showClose: N = !1,
+  open: x,
+  defaultOpen: R,
+  onOpenChange: k,
+  className: T
+}) => /* @__PURE__ */ n(
+  l,
+  {
+    open: x,
+    defaultOpen: R,
+    onOpenChange: k,
+    children: [
+      /* @__PURE__ */ e(d, { children: r }),
+      /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(v, { side: s, sideOffset: p, align: w, children: /* @__PURE__ */ n(m, { className: T, children: [
+        h && /* @__PURE__ */ e(c, {}),
+        N && /* @__PURE__ */ n(u, { children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  d: "M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
+        ] }),
+        t && /* @__PURE__ */ e(P, { children: t }),
+        t ? /* @__PURE__ */ e(f, { children: o }) : o
+      ] }) }) })
+    ]
+  }
+), ro = Object.assign(l, {
+  Root: l,
+  Trigger: d,
+  Portal: y,
+  Backdrop: b,
+  Positioner: v,
+  Popup: m,
+  Arrow: c,
+  Title: P,
+  Description: f,
+  Close: u
+});
+export {
+  oo as Popover,
+  c as PopoverArrow,
+  b as PopoverBackdrop,
+  u as PopoverClose,
+  f as PopoverDescription,
+  ro as PopoverParts,
+  m as PopoverPopup,
+  y as PopoverPortal,
+  v as PopoverPositioner,
+  l as PopoverRoot,
+  P as PopoverTitle,
+  d as PopoverTrigger,
+  O as popoverArrowVariants,
+  F as popoverPopupVariants
+};
+//# sourceMappingURL=popover.js.map

package/dist/components/atoms/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../../src/components/atoms/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui-components/react/popover\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport {\n\tFloatingArrowSvg,\n\tfloatingArrowVariants,\n} from \"../../shared/floating-arrow\";\n\n/**\n * Popover popup variants\n *\n * Uses semantic overlay tokens for themeable styling:\n * - color.overlay.background - Light background\n * - color.overlay.border - Subtle border\n * - color.overlay.text - Primary text\n * - surface.overlay.radius - Rounded corners\n * - spatial.component.overlay.padding/gap - Consistent spacing\n */\nconst popoverPopupVariants = tv({\n\tbase: [\n\t\t// Layout - uses component overlay tokens\n\t\t\"p-spatial-component-overlay-padding\",\n\t\t// Background - uses overlay background token\n\t\t\"bg-overlay-background\",\n\t\t// Border - uses overlay border token\n\t\t\"border border-overlay-border\",\n\t\t// Text - uses overlay text token\n\t\t\"text-overlay-text\",\n\t\t// Border radius - uses surface overlay token\n\t\t\"rounded-surface-overlay\",\n\t\t// Shadow for elevation\n\t\t\"shadow-lg\",\n\t\t// Allow arrow to extend outside popup bounds\n\t\t\"overflow-visible\",\n\t\t// Animation\n\t\t\"origin-[var(--transform-origin)]\",\n\t\t\"transition-[transform,scale,opacity] duration-150\",\n\t\t\"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n\t\t// Ensure it's above other content (higher than backdrop z-40)\n\t\t\"z-50\",\n\t\t// Max width for reasonable content display\n\t\t\"max-w-[320px]\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"\",\n\t\t\t// Future variants can be added here\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\n/**\n * Popover arrow variants - uses shared floating arrow variants\n */\nconst popoverArrowVariants = floatingArrowVariants;\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\nexport interface PopoverRootProps extends BasePopover.Root.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Popover Root\n *\n * Groups all popover parts. Does not render an element.\n */\nconst PopoverRoot = ({ children, ...props }: PopoverRootProps) => {\n\treturn <BasePopover.Root {...props}>{children}</BasePopover.Root>;\n};\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\nexport interface PopoverTriggerProps\n\textends React.ComponentProps<typeof BasePopover.Trigger> {\n\tclassName?: string;\n}\n\n/**\n * Popover Trigger\n *\n * The element that triggers the popover on click.\n * Renders as the child element with popover behavior attached.\n * When children is a single React element, uses `render` prop to avoid wrapper element.\n */\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n\t({ className, children, ...props }, ref) => {\n\t\t// If children is a single React element, use render prop to avoid wrapper\n\t\tconst isSingleElement = React.isValidElement(children);\n\n\t\tif (isSingleElement) {\n\t\t\treturn (\n\t\t\t\t<BasePopover.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\trender={children}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BasePopover.Trigger ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BasePopover.Trigger>\n\t\t);\n\t},\n);\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n// ============================================================================\n// Popover Portal\n// ============================================================================\n\nexport interface PopoverPortalProps extends BasePopover.Portal.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Popover Portal\n *\n * Renders the popover popup in a portal outside the DOM hierarchy.\n */\nconst PopoverPortal = ({ children, ...props }: PopoverPortalProps) => {\n\treturn <BasePopover.Portal {...props}>{children}</BasePopover.Portal>;\n};\n\n// ============================================================================\n// Popover Backdrop\n// ============================================================================\n\nexport interface PopoverBackdropProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Backdrop>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Backdrop\n *\n * Optional backdrop element that can be used to close the popover on click.\n */\nconst PopoverBackdrop = React.forwardRef<HTMLDivElement, PopoverBackdropProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Backdrop\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"fixed inset-0 z-40\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverBackdrop.displayName = \"PopoverBackdrop\";\n\n// ============================================================================\n// Popover Positioner\n// ============================================================================\n\nexport interface PopoverPositionerProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BasePopover.Positioner>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Popover Positioner\n *\n * Positions the popover popup relative to the trigger.\n */\nconst PopoverPositioner = React.forwardRef<\n\tHTMLDivElement,\n\tPopoverPositionerProps\n>(({ className, side = \"bottom\", sideOffset = 8, ...props }, ref) => {\n\treturn (\n\t\t<BasePopover.Positioner\n\t\t\tref={ref}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\"z-50\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nPopoverPositioner.displayName = \"PopoverPositioner\";\n\n// ============================================================================\n// Popover Popup\n// ============================================================================\n\nexport interface PopoverPopupProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Popup>, \"className\">,\n\t\tVariantProps<typeof popoverPopupVariants> {\n\tclassName?: string;\n}\n\n/**\n * Popover Popup\n *\n * The popover content container with styled appearance.\n */\nconst PopoverPopup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(\n\t({ className, variant, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Popup\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(popoverPopupVariants({ variant }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverPopup.displayName = \"PopoverPopup\";\n\n// ============================================================================\n// Popover Arrow\n// ============================================================================\n\nexport interface PopoverArrowProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Arrow>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Arrow\n *\n * Visual pointer element for the popover.\n * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.\n */\nconst PopoverArrow = React.forwardRef<HTMLDivElement, PopoverArrowProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Arrow\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(popoverArrowVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<FloatingArrowSvg\n\t\t\t\t\tfillClassName=\"fill-overlay-background\"\n\t\t\t\t\tborderClassName=\"fill-overlay-border\"\n\t\t\t\t/>\n\t\t\t</BasePopover.Arrow>\n\t\t);\n\t},\n);\nPopoverArrow.displayName = \"PopoverArrow\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\nexport interface PopoverTitleProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Title>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Title\n *\n * Title element for the popover content.\n */\nconst PopoverTitle = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Title\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"typography-body-md-md font-semibold\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverTitle.displayName = \"PopoverTitle\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\nexport interface PopoverDescriptionProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BasePopover.Description>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Popover Description\n *\n * Description element for the popover content.\n */\nconst PopoverDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tPopoverDescriptionProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<BasePopover.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"typography-body-sm-md text-overlay-text-muted mt-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nPopoverDescription.displayName = \"PopoverDescription\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\nexport interface PopoverCloseProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Close>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Close\n *\n * Close button for the popover.\n */\nconst PopoverClose = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Close\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-8 top-8 rounded-surface-ui-small p-4\",\n\t\t\t\t\t\"text-overlay-text-muted hover:text-overlay-text\",\n\t\t\t\t\t\"hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverClose.displayName = \"PopoverClose\";\n\n// ============================================================================\n// Simple Popover Component\n// ============================================================================\n\nexport interface PopoverProps {\n\t/** The content to show in the popover */\n\tchildren: React.ReactNode;\n\t/** The element that triggers the popover */\n\ttrigger: React.ReactNode;\n\t/** Title for the popover (optional) */\n\ttitle?: React.ReactNode;\n\t/** Side of the trigger to show the popover */\n\tside?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\t/** Offset from the trigger */\n\tsideOffset?: number;\n\t/** Alignment along the side */\n\talign?: \"start\" | \"center\" | \"end\";\n\t/** Whether to show an arrow */\n\tshowArrow?: boolean;\n\t/** Whether to show a close button */\n\tshowClose?: boolean;\n\t/** Controlled open state */\n\topen?: boolean;\n\t/** Default open state */\n\tdefaultOpen?: boolean;\n\t/** Callback when open state changes */\n\tonOpenChange?: (open: boolean) => void;\n\t/** Additional className for the popup */\n\tclassName?: string;\n}\n\n/**\n * Popover\n *\n * A simple, pre-composed popover component for common use cases.\n * For more complex needs, use the compound components directly.\n *\n * @example\n * ```tsx\n * <Popover\n *   trigger={<Button>Click me</Button>}\n *   title=\"Popover Title\"\n * >\n *   <p>This is the popover content.</p>\n * </Popover>\n * ```\n */\nconst Popover = ({\n\tchildren,\n\ttrigger,\n\ttitle,\n\tside = \"bottom\",\n\tsideOffset = 8,\n\talign = \"center\",\n\tshowArrow = true,\n\tshowClose = false,\n\topen,\n\tdefaultOpen,\n\tonOpenChange,\n\tclassName,\n}: PopoverProps) => {\n\treturn (\n\t\t<PopoverRoot\n\t\t\topen={open}\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t>\n\t\t\t<PopoverTrigger>{trigger}</PopoverTrigger>\n\t\t\t<PopoverPortal>\n\t\t\t\t<PopoverPositioner side={side} sideOffset={sideOffset} align={align}>\n\t\t\t\t\t<PopoverPopup className={className}>\n\t\t\t\t\t\t{showArrow && <PopoverArrow />}\n\t\t\t\t\t\t{showClose && (\n\t\t\t\t\t\t\t<PopoverClose>\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 12 12\"\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t\t\t</PopoverClose>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{title && <PopoverTitle>{title}</PopoverTitle>}\n\t\t\t\t\t\t{title ? (\n\t\t\t\t\t\t\t<PopoverDescription>{children}</PopoverDescription>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tchildren\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PopoverPopup>\n\t\t\t\t</PopoverPositioner>\n\t\t\t</PopoverPortal>\n\t\t</PopoverRoot>\n\t);\n};\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const PopoverParts = Object.assign(PopoverRoot, {\n\tRoot: PopoverRoot,\n\tTrigger: PopoverTrigger,\n\tPortal: PopoverPortal,\n\tBackdrop: PopoverBackdrop,\n\tPositioner: PopoverPositioner,\n\tPopup: PopoverPopup,\n\tArrow: PopoverArrow,\n\tTitle: PopoverTitle,\n\tDescription: PopoverDescription,\n\tClose: PopoverClose,\n});\n\nexport {\n\tPopover,\n\tPopoverRoot,\n\tPopoverTrigger,\n\tPopoverPortal,\n\tPopoverBackdrop,\n\tPopoverPositioner,\n\tPopoverPopup,\n\tPopoverArrow,\n\tPopoverTitle,\n\tPopoverDescription,\n\tPopoverClose,\n\tpopoverPopupVariants,\n\tpopoverArrowVariants,\n};\n"],"names":["popoverPopupVariants","tv","popoverArrowVariants","floatingArrowVariants","PopoverRoot","children","props","BasePopover.Root","PopoverTrigger","React","className","ref","jsx","BasePopover.Trigger","PopoverPortal","BasePopover.Portal","PopoverBackdrop","BasePopover.Backdrop","cn","PopoverPositioner","side","sideOffset","BasePopover.Positioner","PopoverPopup","variant","BasePopover.Popup","PopoverArrow","BasePopover.Arrow","FloatingArrowSvg","PopoverTitle","BasePopover.Title","PopoverDescription","BasePopover.Description","PopoverClose","BasePopover.Close","Popover","trigger","title","align","showArrow","showClose","open","defaultOpen","onOpenChange","jsxs","PopoverParts"],"mappings":"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"}

package/dist/components/atoms/select/select.js

@@ -0,0 +1,192 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as n from "react";
+import { tv as s, cnBase as i } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { formControlError as S, formControlSizes as h, formControlBase as y } from "../../../lib/form-control.js";
+import { SelectGroup as w } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/group/SelectGroup.js";
+import { SelectGroupLabel as x } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/group-label/SelectGroupLabel.js";
+import { SelectItem as k } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/item/SelectItem.js";
+import { SelectItemText as L } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/item-text/SelectItemText.js";
+import { SelectItemIndicator as N } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/item-indicator/SelectItemIndicator.js";
+import { SelectPortal as v } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/portal/SelectPortal.js";
+import { SelectPositioner as G } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/positioner/SelectPositioner.js";
+import { SelectPopup as R } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/popup/SelectPopup.js";
+import { SelectRoot as P } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/root/SelectRoot.js";
+import { SelectTrigger as j } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/trigger/SelectTrigger.js";
+import { SelectValue as C } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/value/SelectValue.js";
+import { SelectIcon as I } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/icon/SelectIcon.js";
+const T = s({
+  base: [
+    ...y,
+    // Select-specific styles
+    "justify-between cursor-pointer",
+    // Override disabled to use data attribute (Base UI pattern)
+    "data-[disabled]:bg-ui-control-background-disabled data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+    // Open state styling
+    "data-[popup-open]:border-ui-accent-base data-[popup-open]:ring-4 data-[popup-open]:ring-ui-color-focus data-[popup-open]:bg-ui-control-background"
+  ],
+  variants: {
+    size: h,
+    error: S
+  },
+  defaultVariants: {
+    size: "default",
+    error: !1
+  }
+}), z = s({
+  base: [
+    // Layout - match trigger width using CSS custom property from Base UI
+    "flex flex-col gap-2 p-10",
+    "w-[var(--anchor-width)]",
+    // Background and border - uses surface ui radius for theming support
+    "bg-ui-control-background border border-solid border-ui-color-border-active rounded-surface-ui-medium",
+    // Focus ring shadow (ui-focus-state from Figma)
+    "ring-4 ring-ui-color-focus",
+    // Animation
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity] duration-150",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Ensure it's above other content
+    "z-50"
+  ]
+}), O = s({
+  base: [
+    // Layout
+    "flex items-center justify-between px-12 py-8 h-36",
+    // Typography - use semantic tokens
+    "typography-body-md-md font-medium text-ui-menu-item-text",
+    // Background - default
+    "bg-ui-menu-item-bg",
+    // Border radius - uses surface ui radius for theming support
+    "rounded-surface-ui-medium",
+    // Cursor
+    "cursor-pointer outline-none",
+    // Transitions
+    "transition-colors duration-150",
+    // Hover/highlighted state - use semantic token
+    "data-[highlighted]:bg-ui-menu-item-bg-hover",
+    // Selected state - use semantic tokens
+    "data-[selected]:bg-ui-menu-item-bg-selected data-[selected]:text-ui-menu-item-text-selected",
+    // Disabled state
+    "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
+  ]
+}), V = ({ className: t }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: i("size-16 text-gray-500 shrink-0", t),
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), $ = ({ className: t }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: i("size-14 shrink-0", t),
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), B = ({
+  children: t,
+  ...r
+}) => /* @__PURE__ */ e(P, { ...r, children: t }), d = n.forwardRef(
+  ({ className: t, size: r, error: o, placeholder: a = "Select option...", ...g }, b) => /* @__PURE__ */ l(
+    j,
+    {
+      ref: b,
+      className: i(T({ size: r, error: o }), t),
+      ...g,
+      children: [
+        /* @__PURE__ */ e(C, { children: (c) => c || /* @__PURE__ */ e("span", { className: "text-text-muted", children: a }) }),
+        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(V, {}) })
+      ]
+    }
+  )
+);
+d.displayName = "SelectTrigger";
+const p = n.forwardRef(
+  ({ className: t, children: r, ...o }, a) => /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(G, { side: "bottom", sideOffset: 4, align: "start", children: /* @__PURE__ */ e(
+    R,
+    {
+      ref: a,
+      className: i(z(), t),
+      ...o,
+      children: r
+    }
+  ) }) })
+);
+p.displayName = "SelectPopup";
+const m = n.forwardRef(
+  ({ className: t, children: r, ...o }, a) => /* @__PURE__ */ l(
+    k,
+    {
+      ref: a,
+      className: i(O(), t),
+      ...o,
+      children: [
+        /* @__PURE__ */ e(L, { children: r }),
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e($, {}) })
+      ]
+    }
+  )
+);
+m.displayName = "SelectOption";
+const u = n.forwardRef(
+  ({ className: t, children: r, ...o }, a) => /* @__PURE__ */ e(w, { ref: a, className: t, ...o, children: r })
+);
+u.displayName = "SelectGroup";
+const f = n.forwardRef(({ className: t, children: r, ...o }, a) => /* @__PURE__ */ e(
+  x,
+  {
+    ref: a,
+    className: i(
+      "px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide",
+      t
+    ),
+    ...o,
+    children: r
+  }
+));
+f.displayName = "SelectGroupLabel";
+const _ = Object.assign(B, {
+  Trigger: d,
+  Popup: p,
+  Option: m,
+  Group: u,
+  GroupLabel: f
+});
+export {
+  _ as Select,
+  u as SelectGroup,
+  f as SelectGroupLabel,
+  m as SelectOption,
+  p as SelectPopup,
+  B as SelectRoot,
+  d as SelectTrigger,
+  O as selectOptionVariants,
+  z as selectPopupVariants,
+  T as selectTriggerVariants
+};
+//# sourceMappingURL=select.js.map

package/dist/components/atoms/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../../src/components/atoms/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui-components/react/select\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport {\n\tformControlBase,\n\tformControlError,\n\tformControlSizes,\n} from \"@/lib/form-control\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Select trigger variants based on Figma BaseKit / Interface / Dropdown\n *\n * States:\n * - Default: White background, subtle border\n * - Hover: Light gray background\n * - Focus/Open: Accent border with focus ring\n * - Selected: Has a value selected (darker text)\n * - Disabled: Reduced opacity, not interactive\n */\nconst selectTriggerVariants = tv({\n\tbase: [\n\t\t...formControlBase,\n\t\t// Select-specific styles\n\t\t\"justify-between cursor-pointer\",\n\t\t// Override disabled to use data attribute (Base UI pattern)\n\t\t\"data-[disabled]:bg-ui-control-background-disabled data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n\t\t// Open state styling\n\t\t\"data-[popup-open]:border-ui-accent-base data-[popup-open]:ring-4 data-[popup-open]:ring-ui-color-focus data-[popup-open]:bg-ui-control-background\",\n\t],\n\tvariants: {\n\t\tsize: formControlSizes,\n\t\terror: formControlError,\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t\terror: false,\n\t},\n});\n\n/**\n * Select popup/menu variants\n */\nconst selectPopupVariants = tv({\n\tbase: [\n\t\t// Layout - match trigger width using CSS custom property from Base UI\n\t\t\"flex flex-col gap-2 p-10\",\n\t\t\"w-[var(--anchor-width)]\",\n\t\t// Background and border - uses surface ui radius for theming support\n\t\t\"bg-ui-control-background border border-solid border-ui-color-border-active rounded-surface-ui-medium\",\n\t\t// Focus ring shadow (ui-focus-state from Figma)\n\t\t\"ring-4 ring-ui-color-focus\",\n\t\t// Animation\n\t\t\"origin-[var(--transform-origin)]\",\n\t\t\"transition-[transform,scale,opacity] duration-150\",\n\t\t\"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n\t\t// Ensure it's above other content\n\t\t\"z-50\",\n\t],\n});\n\n/**\n * Select option/item variants based on Figma Menu Items\n *\n * States:\n * - Default: White background\n * - Hover/Highlighted: Light indigo tint background\n * - Selected: Stronger indigo tint with blue text and checkmark\n * - Disabled: Reduced opacity\n */\nconst selectOptionVariants = tv({\n\tbase: [\n\t\t// Layout\n\t\t\"flex items-center justify-between px-12 py-8 h-36\",\n\t\t// Typography - use semantic tokens\n\t\t\"typography-body-md-md font-medium text-ui-menu-item-text\",\n\t\t// Background - default\n\t\t\"bg-ui-menu-item-bg\",\n\t\t// Border radius - uses surface ui radius for theming support\n\t\t\"rounded-surface-ui-medium\",\n\t\t// Cursor\n\t\t\"cursor-pointer outline-none\",\n\t\t// Transitions\n\t\t\"transition-colors duration-150\",\n\t\t// Hover/highlighted state - use semantic token\n\t\t\"data-[highlighted]:bg-ui-menu-item-bg-hover\",\n\t\t// Selected state - use semantic tokens\n\t\t\"data-[selected]:bg-ui-menu-item-bg-selected data-[selected]:text-ui-menu-item-text-selected\",\n\t\t// Disabled state\n\t\t\"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n\t],\n});\n\n/**\n * Chevron icon for the select trigger\n */\nconst SelectChevronIcon = ({ className }: { className?: string }) => (\n\t<svg\n\t\tclassName={cn(\"size-16 text-gray-500 shrink-0\", className)}\n\t\tviewBox=\"0 0 16 16\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path\n\t\t\td=\"M4 6L8 10L12 6\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\n/**\n * Checkmark icon for selected options\n */\nconst CheckIcon = ({ className }: { className?: string }) => (\n\t<svg\n\t\tclassName={cn(\"size-14 shrink-0\", className)}\n\t\tviewBox=\"0 0 14 14\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path\n\t\t\td=\"M11.6666 3.5L5.24992 9.91667L2.33325 7\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\n// ============================================================================\n// Select Root\n// ============================================================================\n\nexport interface SelectProps<Value = string>\n\textends BaseSelect.Root.Props<Value> {\n\tchildren: React.ReactNode;\n}\n\nconst SelectRoot = <Value = string>({\n\tchildren,\n\t...props\n}: SelectProps<Value>) => {\n\treturn <BaseSelect.Root {...props}>{children}</BaseSelect.Root>;\n};\n\n// ============================================================================\n// Select Trigger\n// ============================================================================\n\nexport interface SelectTriggerProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Trigger>, \"className\">,\n\t\tVariantProps<typeof selectTriggerVariants> {\n\tclassName?: string;\n\tplaceholder?: string;\n}\n\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n\t(\n\t\t{ className, size, error, placeholder = \"Select option...\", ...props },\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<BaseSelect.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(selectTriggerVariants({ size, error }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<BaseSelect.Value>\n\t\t\t\t\t{(value) =>\n\t\t\t\t\t\tvalue ? (\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"text-text-muted\">{placeholder}</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t</BaseSelect.Value>\n\t\t\t\t<BaseSelect.Icon>\n\t\t\t\t\t<SelectChevronIcon />\n\t\t\t\t</BaseSelect.Icon>\n\t\t\t</BaseSelect.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\n// ============================================================================\n// Select Portal & Popup\n// ============================================================================\n\nexport interface SelectPopupProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Popup>, \"className\"> {\n\tclassName?: string;\n}\n\nconst SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Portal>\n\t\t\t\t<BaseSelect.Positioner side=\"bottom\" sideOffset={4} align=\"start\">\n\t\t\t\t\t<BaseSelect.Popup\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={cn(selectPopupVariants(), className)}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</BaseSelect.Popup>\n\t\t\t\t</BaseSelect.Positioner>\n\t\t\t</BaseSelect.Portal>\n\t\t);\n\t},\n);\nSelectPopup.displayName = \"SelectPopup\";\n\n// ============================================================================\n// Select Option (wraps Base UI's Select.Item)\n// ============================================================================\n\nexport interface SelectOptionProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Item>, \"className\"> {\n\tclassName?: string;\n}\n\nconst SelectOption = React.forwardRef<HTMLDivElement, SelectOptionProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Item\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(selectOptionVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n\t\t\t\t<BaseSelect.ItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</BaseSelect.ItemIndicator>\n\t\t\t</BaseSelect.Item>\n\t\t);\n\t},\n);\nSelectOption.displayName = \"SelectOption\";\n\n// ============================================================================\n// Select Group\n// ============================================================================\n\nexport interface SelectGroupProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Group>, \"className\"> {\n\tclassName?: string;\n}\n\nconst SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Group ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BaseSelect.Group>\n\t\t);\n\t},\n);\nSelectGroup.displayName = \"SelectGroup\";\n\n// ============================================================================\n// Select Group Label\n// ============================================================================\n\nexport interface SelectGroupLabelProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BaseSelect.GroupLabel>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\nconst SelectGroupLabel = React.forwardRef<\n\tHTMLDivElement,\n\tSelectGroupLabelProps\n>(({ className, children, ...props }, ref) => {\n\treturn (\n\t\t<BaseSelect.GroupLabel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</BaseSelect.GroupLabel>\n\t);\n});\nSelectGroupLabel.displayName = \"SelectGroupLabel\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Select = Object.assign(SelectRoot, {\n\tTrigger: SelectTrigger,\n\tPopup: SelectPopup,\n\tOption: SelectOption,\n\tGroup: SelectGroup,\n\tGroupLabel: SelectGroupLabel,\n});\n\n// Also export individual components for flexibility\nexport {\n\tSelectRoot,\n\tSelectTrigger,\n\tSelectPopup,\n\tSelectOption,\n\tSelectGroup,\n\tSelectGroupLabel,\n\tselectTriggerVariants,\n\tselectPopupVariants,\n\tselectOptionVariants,\n};\n"],"names":["selectTriggerVariants","tv","formControlBase","formControlSizes","formControlError","selectPopupVariants","selectOptionVariants","SelectChevronIcon","className","jsx","cn","CheckIcon","SelectRoot","children","props","BaseSelect.Root","SelectTrigger","React","size","error","placeholder","ref","jsxs","BaseSelect.Trigger","BaseSelect.Value","value","BaseSelect.Icon","SelectPopup","BaseSelect.Portal","BaseSelect.Positioner","BaseSelect.Popup","SelectOption","BaseSelect.Item","BaseSelect.ItemText","BaseSelect.ItemIndicator","SelectGroup","BaseSelect.Group","SelectGroupLabel","BaseSelect.GroupLabel","Select"],"mappings":"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"}

package/dist/components/atoms/tooltip/tooltip.js

@@ -0,0 +1,139 @@
+import { jsxs as T, jsx as r } from "react/jsx-runtime";
+import * as p from "react";
+import { tv as b, cnBase as f } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { floatingArrowVariants as x, FloatingArrowSvg as N } from "../../shared/floating-arrow.js";
+import { TooltipArrow as $ } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/arrow/TooltipArrow.js";
+import { TooltipPopup as h } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/popup/TooltipPopup.js";
+import { TooltipPortal as V } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/portal/TooltipPortal.js";
+import { TooltipPositioner as j } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/positioner/TooltipPositioner.js";
+import { TooltipProvider as E } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/provider/TooltipProvider.js";
+import { TooltipRoot as S } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/root/TooltipRoot.js";
+import { TooltipTrigger as c } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/trigger/TooltipTrigger.js";
+const z = b({
+  base: [
+    // Layout - uses component tooltip tokens
+    "px-spatial-component-tooltip-padding-x py-spatial-component-tooltip-padding-y",
+    // Background and text - uses tooltip color tokens
+    "bg-tooltip-bg text-tooltip-text",
+    // Border radius - uses surface tooltip token
+    "rounded-surface-tooltip",
+    // Typography - uses semantic body text composite
+    "typography-body-sm-md font-medium",
+    // Shadow for elevation
+    "shadow-md",
+    // Allow arrow to extend outside popup bounds
+    "overflow-visible",
+    // Animation
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity] duration-150",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Ensure it's above other content
+    "z-50"
+  ],
+  variants: {
+    variant: {
+      default: ""
+      // Future variants can be added here (e.g., light, primary)
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), B = x, C = ({ children: t, ...o }) => /* @__PURE__ */ r(E, { ...o, children: t }), l = ({ children: t, ...o }) => /* @__PURE__ */ r(S, { ...o, children: t }), n = p.forwardRef(
+  ({ className: t, children: o, ...i }, a) => p.isValidElement(o) ? /* @__PURE__ */ r(
+    c,
+    {
+      ref: a,
+      className: t,
+      render: o,
+      ...i
+    }
+  ) : /* @__PURE__ */ r(c, { ref: a, className: t, ...i, children: o })
+);
+n.displayName = "TooltipTrigger";
+const g = ({ children: t, ...o }) => /* @__PURE__ */ r(V, { ...o, children: t }), s = p.forwardRef(({ className: t, side: o = "top", sideOffset: i = 8, ...a }, e) => /* @__PURE__ */ r(
+  j,
+  {
+    ref: e,
+    side: o,
+    sideOffset: i,
+    className: t,
+    ...a
+  }
+));
+s.displayName = "TooltipPositioner";
+const m = p.forwardRef(
+  ({ className: t, variant: o, ...i }, a) => /* @__PURE__ */ r(
+    h,
+    {
+      ref: a,
+      role: "tooltip",
+      className: f(z({ variant: o }), t),
+      ...i
+    }
+  )
+);
+m.displayName = "TooltipPopup";
+const d = p.forwardRef(
+  ({ className: t, ...o }, i) => /* @__PURE__ */ r(
+    $,
+    {
+      ref: i,
+      className: f(B(), t),
+      ...o,
+      children: /* @__PURE__ */ r(N, { fillClassName: "fill-tooltip-bg" })
+    }
+  )
+);
+d.displayName = "TooltipArrow";
+const L = ({
+  content: t,
+  children: o,
+  side: i = "top",
+  sideOffset: a = 8,
+  align: e = "center",
+  delay: u,
+  closeDelay: P,
+  showArrow: y = !0,
+  open: w,
+  defaultOpen: v,
+  onOpenChange: R,
+  className: A
+}) => /* @__PURE__ */ T(
+  l,
+  {
+    open: w,
+    defaultOpen: v,
+    onOpenChange: R,
+    children: [
+      /* @__PURE__ */ r(n, { delay: u, closeDelay: P, children: o }),
+      /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(s, { side: i, sideOffset: a, align: e, children: /* @__PURE__ */ T(m, { className: A, children: [
+        y && /* @__PURE__ */ r(d, {}),
+        t
+      ] }) }) })
+    ]
+  }
+), M = Object.assign(l, {
+  Provider: C,
+  Root: l,
+  Trigger: n,
+  Portal: g,
+  Positioner: s,
+  Popup: m,
+  Arrow: d
+});
+export {
+  L as Tooltip,
+  d as TooltipArrow,
+  M as TooltipParts,
+  m as TooltipPopup,
+  g as TooltipPortal,
+  s as TooltipPositioner,
+  C as TooltipProvider,
+  l as TooltipRoot,
+  n as TooltipTrigger,
+  B as tooltipArrowVariants,
+  z as tooltipPopupVariants
+};
+//# sourceMappingURL=tooltip.js.map