@photon-ai/pho-ui 0.1.1 → 0.2.0

package/dist/components/select.js

@@ -1,12 +1,12 @@
 "use client";
-import { t as o } from "../chunks/cn-D6jQqeRj.js";
+import { t as o } from "../chunks/cn-7uGUzCOM.js";
 import "react";
 import { jsx as a } from "react/jsx-runtime";
 import { Select as r } from "@base-ui/react/select";
-var n = r.Root, s = r.Value, p = r.Portal, l = r.List, c = r.Group, u = r.ItemText;
+var i = r.Root, s = r.Value, l = r.Portal, p = r.List, c = r.Group, u = r.ItemText;
 function d({ className: t, ...e }) {
   return /* @__PURE__ */ a(r.Trigger, {
-    className: o("squircle bg-pho-primary shadow-pho-xs ring-pho-primary text-pho-primary outline-pho-brand flex min-w-44 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm ring-1 transition select-none ring-inset", "data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:text-fg-pho-quaternary [&_svg]:size-4", t),
+    className: o("squircle bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand flex min-w-44 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm ring-1 transition select-none ring-inset", "data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:text-fg-pho-quaternary [&_svg]:size-4", t),
     ...e
   });
 }
@@ -16,22 +16,22 @@ function m({ className: t, ...e }) {
     ...e
   });
 }
-function g({ className: t, sideOffset: e = 6, ...i }) {
+function g({ className: t, sideOffset: e = 6, ...n }) {
   return /* @__PURE__ */ a(r.Positioner, {
     sideOffset: e,
     className: o("z-50 outline-none", t),
-    ...i
+    ...n
   });
 }
 function h({ className: t, ...e }) {
   return /* @__PURE__ */ a(r.Popup, {
-    className: o("squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-interactive max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto rounded-xl p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", t),
+    className: o("squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto rounded-xl p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", t),
     ...e
   });
 }
 function f({ className: t, ...e }) {
   return /* @__PURE__ */ a(r.Item, {
-    className: o("text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-lg py-1.5 pr-2.5 pl-2 text-sm outline-none select-none", "data-[highlighted]:bg-pho-secondary data-[highlighted]:text-pho-primary data-[disabled]:opacity-50", t),
+    className: o("text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-lg py-1.5 pr-2.5 pl-2 text-sm outline-none select-none", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50", t),
     ...e
   });
 }
@@ -48,14 +48,14 @@ function x({ className: t, ...e }) {
   });
 }
 var N = {
-  Root: n,
+  Root: i,
   Trigger: d,
   Value: s,
   Icon: m,
-  Portal: p,
+  Portal: l,
   Positioner: g,
   Popup: h,
-  List: l,
+  List: p,
   Item: f,
   ItemText: u,
   ItemIndicator: y,

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Root = BaseSelect.Root;\nconst Value = BaseSelect.Value;\nconst Portal = BaseSelect.Portal;\nconst List = BaseSelect.List;\nconst Group = BaseSelect.Group;\nconst ItemText = BaseSelect.ItemText;\n\nfunction Trigger({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.Trigger>) {\n  return (\n    <BaseSelect.Trigger\n      className={cn(\n        \"squircle bg-pho-primary shadow-pho-xs ring-pho-primary text-pho-primary outline-pho-brand flex min-w-44 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm ring-1 transition select-none ring-inset\",\n        \"data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        \"[&_svg]:text-fg-pho-quaternary [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Icon({ className, ...props }: StyledProps<typeof BaseSelect.Icon>) {\n  return (\n    <BaseSelect.Icon\n      className={cn(\"flex shrink-0 items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseSelect.Positioner>) {\n  return (\n    <BaseSelect.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseSelect.Popup>) {\n  return (\n    <BaseSelect.Popup\n      className={cn(\n        \"squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-interactive max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto rounded-xl p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Item({ className, ...props }: StyledProps<typeof BaseSelect.Item>) {\n  return (\n    <BaseSelect.Item\n      className={cn(\n        \"text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-lg py-1.5 pr-2.5 pl-2 text-sm outline-none select-none\",\n        \"data-[highlighted]:bg-pho-secondary data-[highlighted]:text-pho-primary data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemIndicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.ItemIndicator>) {\n  return (\n    <BaseSelect.ItemIndicator\n      className={cn(\n        \"text-pho-brand col-start-1 flex items-center [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GroupLabel({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.GroupLabel>) {\n  return (\n    <BaseSelect.GroupLabel\n      className={cn(\n        \"text-pho-quaternary px-2.5 py-1.5 text-xs font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Select built on Base UI `Select` — pick one option (or several with\n * `multiple`) from a list that opens on click. Pass `items` to `Select.Root`,\n * render an `Item` per option, and show the selection with `Select.Value`. For\n * a short, always-visible set use `RadioGroup`; to filter a long list by typing\n * use `Combobox`.\n */\nexport const Select = {\n  Root,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Positioner,\n  Popup,\n  List,\n  Item,\n  ItemText,\n  ItemIndicator,\n  Group,\n  GroupLabel,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAS,EAAW,QACpB,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAW,EAAW;AAE5B,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAW,SAAZ;AAAA,IACE,WAAW,EACT,mOACA,4FACA,iEACA,iDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EAAG,8BAA8B,CAAS;AAAA,IACrD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,qBAAqB,CAAS;AAAA,IAC5C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EACT,+RACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,iJACA,sGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAc,EACrB,WAAA,GACA,GAAG,EAAA,GAC4C;AAC/C,SACE,gBAAA,EAAC,EAAW,eAAZ;AAAA,IACE,WAAW,EACT,+DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACE,WAAW,EACT,yDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AACF"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Root = BaseSelect.Root;\nconst Value = BaseSelect.Value;\nconst Portal = BaseSelect.Portal;\nconst List = BaseSelect.List;\nconst Group = BaseSelect.Group;\nconst ItemText = BaseSelect.ItemText;\n\nfunction Trigger({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.Trigger>) {\n  return (\n    <BaseSelect.Trigger\n      className={cn(\n        // Flat field surface — shadows are reserved for floating layers;\n        // the 15% ring-pho-primary hairline is the input edge.\n        \"squircle bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand flex min-w-44 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm ring-1 transition select-none ring-inset\",\n        \"data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        \"[&_svg]:text-fg-pho-quaternary [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Icon({ className, ...props }: StyledProps<typeof BaseSelect.Icon>) {\n  return (\n    <BaseSelect.Icon\n      className={cn(\"flex shrink-0 items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseSelect.Positioner>) {\n  return (\n    <BaseSelect.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseSelect.Popup>) {\n  return (\n    <BaseSelect.Popup\n      className={cn(\n        // Floating layer: keeps its elevation shadow, edged with the site\n        // hairline (ring-pho-secondary, #eee/#202020).\n        \"squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto rounded-xl p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Item({ className, ...props }: StyledProps<typeof BaseSelect.Item>) {\n  return (\n    <BaseSelect.Item\n      className={cn(\n        \"text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-lg py-1.5 pr-2.5 pl-2 text-sm outline-none select-none\",\n        // Highlighted item uses the ghost-hover wash (Font/5%) — visible on\n        // the popup surface in both modes, matching the Menu item idiom.\n        \"data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemIndicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.ItemIndicator>) {\n  return (\n    <BaseSelect.ItemIndicator\n      className={cn(\n        \"text-pho-brand col-start-1 flex items-center [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GroupLabel({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.GroupLabel>) {\n  return (\n    <BaseSelect.GroupLabel\n      className={cn(\n        \"text-pho-quaternary px-2.5 py-1.5 text-xs font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Select built on Base UI `Select` — pick one option (or several with\n * `multiple`) from a list that opens on click. Pass `items` to `Select.Root`,\n * render an `Item` per option, and show the selection with `Select.Value`. For\n * a short, always-visible set use `RadioGroup`; to filter a long list by typing\n * use `Combobox`.\n */\nexport const Select = {\n  Root,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Positioner,\n  Popup,\n  List,\n  Item,\n  ItemText,\n  ItemIndicator,\n  Group,\n  GroupLabel,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAS,EAAW,QACpB,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAW,EAAW;AAE5B,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAW,SAAZ;AAAA,IACE,WAAW,EAGT,qNACA,4FACA,iEACA,iDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EAAG,8BAA8B,CAAS;AAAA,IACrD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,qBAAqB,CAAS;AAAA,IAC5C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAGT,6RACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,iJAGA,wGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAc,EACrB,WAAA,GACA,GAAG,EAAA,GAC4C;AAC/C,SACE,gBAAA,EAAC,EAAW,eAAZ;AAAA,IACE,WAAW,EACT,+DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACE,WAAW,EACT,yDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AACF"}

package/dist/components/separator.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as o } from "../chunks/cn-D6jQqeRj.js";
+import { t as o } from "../chunks/cn-7uGUzCOM.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
 import { Separator as i } from "@base-ui/react/separator";

package/dist/components/slider.js

@@ -1,47 +1,47 @@
 "use client";
-import { t as o } from "../chunks/cn-D6jQqeRj.js";
+import { t as r } from "../chunks/cn-7uGUzCOM.js";
 import "react";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { Slider as n } from "@base-ui/react/slider";
 function l({ className: e, ...t }) {
-  return /* @__PURE__ */ r(n.Root, {
-    className: o("flex w-full flex-col gap-3", e),
+  return /* @__PURE__ */ o(n.Root, {
+    className: r("flex w-full flex-col gap-3", e),
     ...t
   });
 }
 function a({ className: e, ...t }) {
-  return /* @__PURE__ */ r(n.Label, {
-    className: o("text-pho-secondary text-sm font-medium", e),
+  return /* @__PURE__ */ o(n.Label, {
+    className: r("text-pho-secondary text-sm font-medium", e),
     ...t
   });
 }
 function i({ className: e, ...t }) {
-  return /* @__PURE__ */ r(n.Value, {
-    className: o("text-pho-tertiary text-sm tabular-nums", e),
+  return /* @__PURE__ */ o(n.Value, {
+    className: r("text-pho-tertiary text-sm tabular-nums", e),
     ...t
   });
 }
 function u({ className: e, ...t }) {
-  return /* @__PURE__ */ r(n.Control, {
-    className: o("relative flex w-full touch-none items-center py-2 select-none", e),
+  return /* @__PURE__ */ o(n.Control, {
+    className: r("relative flex w-full touch-none items-center py-2 select-none", e),
     ...t
   });
 }
 function s({ className: e, ...t }) {
-  return /* @__PURE__ */ r(n.Track, {
-    className: o("bg-pho-tertiary relative h-1.5 w-full rounded-full", e),
+  return /* @__PURE__ */ o(n.Track, {
+    className: r("bg-pho-tertiary relative h-1.5 w-full rounded-full", e),
     ...t
   });
 }
 function c({ className: e, ...t }) {
-  return /* @__PURE__ */ r(n.Indicator, {
-    className: o("bg-pho-brand-solid rounded-full", e),
+  return /* @__PURE__ */ o(n.Indicator, {
+    className: r("bg-pho-brand-solid rounded-full", e),
     ...t
   });
 }
 function f({ className: e, ...t }) {
-  return /* @__PURE__ */ r(n.Thumb, {
-    className: o("outline-pho-brand ring-pho-primary shadow-pho-sm size-4 rounded-full bg-white ring-1 transition focus-visible:outline-2 focus-visible:outline-offset-2 data-[disabled]:opacity-50", e),
+  return /* @__PURE__ */ o(n.Thumb, {
+    className: r("outline-pho-brand size-4 rounded-full bg-white ring-1 ring-black/15 transition focus-visible:outline-2 focus-visible:outline-offset-2 data-[disabled]:opacity-50", e),
     ...t
   });
 }

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider/slider.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseSlider.Root>) {\n  return (\n    <BaseSlider.Root\n      className={cn(\"flex w-full flex-col gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Label({ className, ...props }: StyledProps<typeof BaseSlider.Label>) {\n  return (\n    <BaseSlider.Label\n      className={cn(\"text-pho-secondary text-sm font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Value({ className, ...props }: StyledProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      className={cn(\"text-pho-tertiary text-sm tabular-nums\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Control({\n  className,\n  ...props\n}: StyledProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      className={cn(\n        \"relative flex w-full touch-none items-center py-2 select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Track({ className, ...props }: StyledProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      className={cn(\n        \"bg-pho-tertiary relative h-1.5 w-full rounded-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Indicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      className={cn(\"bg-pho-brand-solid rounded-full\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Thumb({ className, ...props }: StyledProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      className={cn(\n        \"outline-pho-brand ring-pho-primary shadow-pho-sm size-4 rounded-full bg-white ring-1 transition focus-visible:outline-2 focus-visible:outline-offset-2 data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Slider built on Base UI `Slider` for picking a number (or range) along a\n * track. Compose a header with `Slider.Label` + `Slider.Value`, then\n * `Slider.Control` → `Track` → `Indicator` + `Thumb`. Set `value` /\n * `defaultValue`, `min`, `max`, `step` on `Slider.Root`. For a precise typed\n * number, prefer `NumberField`.\n */\nexport const Slider = {\n  Root,\n  Label,\n  Value,\n  Control,\n  Track,\n  Indicator,\n  Thumb,\n};\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EAAG,8BAA8B,CAAS;AAAA,IACrD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAW,SAAZ;AAAA,IACE,WAAW,EACT,iEACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EACT,sDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACwC;AAC3C,SACE,gBAAA,EAAC,EAAW,WAAZ;AAAA,IACE,WAAW,EAAG,mCAAmC,CAAS;AAAA,IAC1D,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EACT,qLACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AACF"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider/slider.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseSlider.Root>) {\n  return (\n    <BaseSlider.Root\n      className={cn(\"flex w-full flex-col gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Label({ className, ...props }: StyledProps<typeof BaseSlider.Label>) {\n  return (\n    <BaseSlider.Label\n      className={cn(\"text-pho-secondary text-sm font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Value({ className, ...props }: StyledProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      className={cn(\"text-pho-tertiary text-sm tabular-nums\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Control({\n  className,\n  ...props\n}: StyledProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      className={cn(\n        \"relative flex w-full touch-none items-center py-2 select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Track({ className, ...props }: StyledProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      className={cn(\n        \"bg-pho-tertiary relative h-1.5 w-full rounded-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Indicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      className={cn(\"bg-pho-brand-solid rounded-full\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Thumb({ className, ...props }: StyledProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      // Flat white circle in both modes. The edge is a FIXED black/15\n      // hairline: the thumb is always white, and in dark mode it rides a\n      // white filled range (brand-solid), where any light-dark ring would\n      // resolve white-on-white and vanish.\n      className={cn(\n        \"outline-pho-brand size-4 rounded-full bg-white ring-1 ring-black/15 transition focus-visible:outline-2 focus-visible:outline-offset-2 data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Slider built on Base UI `Slider` for picking a number (or range) along a\n * track. Compose a header with `Slider.Label` + `Slider.Value`, then\n * `Slider.Control` → `Track` → `Indicator` + `Thumb`. Set `value` /\n * `defaultValue`, `min`, `max`, `step` on `Slider.Root`. For a precise typed\n * number, prefer `NumberField`.\n */\nexport const Slider = {\n  Root,\n  Label,\n  Value,\n  Control,\n  Track,\n  Indicator,\n  Thumb,\n};\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EAAG,8BAA8B,CAAS;AAAA,IACrD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAW,SAAZ;AAAA,IACE,WAAW,EACT,iEACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EACT,sDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACwC;AAC3C,SACE,gBAAA,EAAC,EAAW,WAAZ;AAAA,IACE,WAAW,EAAG,mCAAmC,CAAS;AAAA,IAC1D,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IAKE,WAAW,EACT,oKACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AACF"}

package/dist/components/switch.js

@@ -1,9 +1,9 @@
 "use client";
-import { t as e } from "../chunks/cn-D6jQqeRj.js";
+import { t as e } from "../chunks/cn-7uGUzCOM.js";
 import "react";
-import { jsx as o } from "react/jsx-runtime";
-import { Switch as a } from "@base-ui/react/switch";
-var i = {
+import { jsx as a } from "react/jsx-runtime";
+import { Switch as o } from "@base-ui/react/switch";
+var r = {
   sm: {
     track: "h-5 w-9",
     thumb: "size-4 data-[checked]:translate-x-4"
@@ -13,16 +13,16 @@ var i = {
     thumb: "size-5 data-[checked]:translate-x-5"
   }
 };
-function n({ className: r, size: t = "md", ...s }) {
-  return /* @__PURE__ */ o(a.Root, {
-    className: e("bg-pho-tertiary outline-pho-brand relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-2", "data-[checked]:bg-pho-brand-solid", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", i[t].track, r),
-    ...s,
-    children: /* @__PURE__ */ o(a.Thumb, { className: e("shadow-pho-sm pointer-events-none block rounded-full bg-white transition-transform duration-150 ease-out", i[t].thumb) })
+function s({ className: i, size: t = "md", ...n }) {
+  return /* @__PURE__ */ a(o.Root, {
+    className: e("bg-pho-tertiary outline-pho-brand relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-2", "data-[checked]:bg-pho-brand-solid", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", r[t].track, i),
+    ...n,
+    children: /* @__PURE__ */ a(o.Thumb, { className: e("data-[checked]:bg-pho-on-brand pointer-events-none block rounded-full bg-white ring-1 ring-black/15 transition-[translate,background-color] duration-150 ease-out ring-inset", r[t].thumb) })
   });
 }
-n.displayName = "Switch";
+s.displayName = "Switch";
 export {
-  n as Switch
+  s as Switch
 };
 
 //# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport { cn } from \"../../utils/cn\";\n\nexport type SwitchSize = \"sm\" | \"md\";\n\nconst SIZE: Record<SwitchSize, { track: string; thumb: string }> = {\n  sm: { track: \"h-5 w-9\", thumb: \"size-4 data-[checked]:translate-x-4\" },\n  md: { track: \"h-6 w-11\", thumb: \"size-5 data-[checked]:translate-x-5\" },\n};\n\nexport interface SwitchProps extends Omit<\n  ComponentProps<typeof BaseSwitch.Root>,\n  \"className\"\n> {\n  className?: string;\n  /** Size variant. @default \"md\" */\n  size?: SwitchSize;\n}\n\n/**\n * On/off toggle built on Base UI `Switch`. Use a switch for a setting that\n * takes effect immediately; use a `Checkbox` for a value confirmed on submit.\n * Controlled via `checked` / `onCheckedChange` or uncontrolled via\n * `defaultChecked`. Always provide a label or `aria-label`.\n */\nexport function Switch({ className, size = \"md\", ...props }: SwitchProps) {\n  return (\n    <BaseSwitch.Root\n      className={cn(\n        \"bg-pho-tertiary outline-pho-brand relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"data-[checked]:bg-pho-brand-solid\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        SIZE[size].track,\n        className,\n      )}\n      {...props}\n    >\n      <BaseSwitch.Thumb\n        className={cn(\n          \"shadow-pho-sm pointer-events-none block rounded-full bg-white transition-transform duration-150 ease-out\",\n          SIZE[size].thumb,\n        )}\n      />\n    </BaseSwitch.Root>\n  );\n}\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;AAMA,IAAM,IAA6D;AAAA,EACjE,IAAI;AAAA,IAAE,OAAO;AAAA,IAAW,OAAO;AAAA,EAAsC;AAAA,EACrE,IAAI;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAsC;AACxE;AAiBA,SAAgB,EAAO,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAsB;AACxE,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,iNACA,qCACA,iEACA,EAAK,CAAA,EAAM,OACX,CACF;AAAA,IACA,GAAI;AAAA,cAEJ,gBAAA,EAAC,EAAW,OAAZ,EACE,WAAW,EACT,4GACA,EAAK,CAAA,EAAM,KACb,EACD,CAAA;AAAA,EACc,CAAA;AAErB;AAEA,EAAO,cAAc"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport { cn } from \"../../utils/cn\";\n\nexport type SwitchSize = \"sm\" | \"md\";\n\nconst SIZE: Record<SwitchSize, { track: string; thumb: string }> = {\n  sm: { track: \"h-5 w-9\", thumb: \"size-4 data-[checked]:translate-x-4\" },\n  md: { track: \"h-6 w-11\", thumb: \"size-5 data-[checked]:translate-x-5\" },\n};\n\nexport interface SwitchProps extends Omit<\n  ComponentProps<typeof BaseSwitch.Root>,\n  \"className\"\n> {\n  className?: string;\n  /** Size variant. @default \"md\" */\n  size?: SwitchSize;\n}\n\n/**\n * On/off toggle built on Base UI `Switch`. Use a switch for a setting that\n * takes effect immediately; use a `Checkbox` for a value confirmed on submit.\n * Controlled via `checked` / `onCheckedChange` or uncontrolled via\n * `defaultChecked`. Always provide a label or `aria-label`.\n */\nexport function Switch({ className, size = \"md\", ...props }: SwitchProps) {\n  return (\n    <BaseSwitch.Root\n      className={cn(\n        \"bg-pho-tertiary outline-pho-brand relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"data-[checked]:bg-pho-brand-solid\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        SIZE[size].track,\n        className,\n      )}\n      {...props}\n    >\n      {/* Thumb is white at rest (both modes), but flips to on-brand when\n          checked: brand-solid is white in dark mode, so a white thumb would\n          vanish on the checked track. Flat — no shadow (elevation is for\n          floating layers only); the fixed black/15 hairline keeps the white\n          thumb legible on the light #eee track (the thumb never needs a light\n          edge — it is white, or black on a white track). Tailwind v4's\n          translate-x-* animates via the `translate` property, so it must be\n          in the transition list. */}\n      <BaseSwitch.Thumb\n        className={cn(\n          \"data-[checked]:bg-pho-on-brand pointer-events-none block rounded-full bg-white ring-1 ring-black/15 transition-[translate,background-color] duration-150 ease-out ring-inset\",\n          SIZE[size].thumb,\n        )}\n      />\n    </BaseSwitch.Root>\n  );\n}\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;AAMA,IAAM,IAA6D;AAAA,EACjE,IAAI;AAAA,IAAE,OAAO;AAAA,IAAW,OAAO;AAAA,EAAsC;AAAA,EACrE,IAAI;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAsC;AACxE;AAiBA,SAAgB,EAAO,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAsB;AACxE,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,iNACA,qCACA,iEACA,EAAK,CAAA,EAAM,OACX,CACF;AAAA,IACA,GAAI;AAAA,cAUJ,gBAAA,EAAC,EAAW,OAAZ,EACE,WAAW,EACT,gLACA,EAAK,CAAA,EAAM,KACb,EACD,CAAA;AAAA,EACc,CAAA;AAErB;AAEA,EAAO,cAAc"}

package/dist/components/tabs.js

@@ -1,34 +1,34 @@
 "use client";
-import { t as r } from "../chunks/cn-D6jQqeRj.js";
+import { t as r } from "../chunks/cn-7uGUzCOM.js";
 import "react";
 import { jsx as a } from "react/jsx-runtime";
 import { Tabs as o } from "@base-ui/react/tabs";
 var i = o.Root;
-function s({ className: t, ...e }) {
+function s({ className: e, ...t }) {
   return /* @__PURE__ */ a(o.List, {
-    className: r("relative flex items-center gap-1 border-b border-[var(--border-color-pho-secondary)]", t),
-    ...e
+    className: r("relative flex items-center gap-1", e),
+    ...t
   });
 }
-function n({ className: t, ...e }) {
+function n({ className: e, ...t }) {
   return /* @__PURE__ */ a(o.Tab, {
-    className: r("outline-pho-brand text-pho-tertiary hover:text-pho-secondary relative z-10 -mb-px cursor-pointer rounded-t-md px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2", "data-[selected]:text-pho-brand", t),
-    ...e
+    className: r("outline-pho-brand text-pho-tertiary hover:bg-pho-ghost-hover hover:text-pho-tertiary-hover relative z-10 cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2", "aria-selected:bg-pho-inverse aria-selected:text-pho-inverse aria-selected:hover:bg-pho-inverse", e),
+    ...t
   });
 }
-function l({ className: t, ...e }) {
+function l({ className: e, ...t }) {
   return /* @__PURE__ */ a(o.Indicator, {
-    className: r("bg-pho-brand-solid absolute bottom-0 left-0 z-0 h-0.5 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] transition-[translate,width] duration-200 ease-out", t),
-    ...e
+    className: r("bg-pho-inverse absolute top-1/2 left-0 z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-1/2 rounded-lg transition-[translate,width] duration-200 ease-out", e),
+    ...t
   });
 }
-function c({ className: t, ...e }) {
+function c({ className: e, ...t }) {
   return /* @__PURE__ */ a(o.Panel, {
-    className: r("outline-pho-brand text-pho-secondary py-4 text-sm focus-visible:outline-2 focus-visible:-outline-offset-2", t),
-    ...e
+    className: r("outline-pho-brand text-pho-secondary py-4 text-sm focus-visible:outline-2 focus-visible:-outline-offset-2", e),
+    ...t
   });
 }
-var m = {
+var b = {
   Root: i,
   List: s,
   Tab: n,
@@ -36,7 +36,7 @@ var m = {
   Panel: c
 };
 export {
-  m as Tabs
+  b as Tabs
 };
 
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Root = BaseTabs.Root;\n\nfunction List({ className, ...props }: StyledProps<typeof BaseTabs.List>) {\n  return (\n    <BaseTabs.List\n      className={cn(\n        \"relative flex items-center gap-1 border-b border-[var(--border-color-pho-secondary)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Tab({ className, ...props }: StyledProps<typeof BaseTabs.Tab>) {\n  return (\n    <BaseTabs.Tab\n      className={cn(\n        \"outline-pho-brand text-pho-tertiary hover:text-pho-secondary relative z-10 -mb-px cursor-pointer rounded-t-md px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2\",\n        \"data-[selected]:text-pho-brand\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Indicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseTabs.Indicator>) {\n  return (\n    <BaseTabs.Indicator\n      className={cn(\n        \"bg-pho-brand-solid absolute bottom-0 left-0 z-0 h-0.5 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] transition-[translate,width] duration-200 ease-out\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Panel({ className, ...props }: StyledProps<typeof BaseTabs.Panel>) {\n  return (\n    <BaseTabs.Panel\n      className={cn(\n        \"outline-pho-brand text-pho-secondary py-4 text-sm focus-visible:outline-2 focus-visible:-outline-offset-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Tabbed sections built on Base UI `Tabs`, with an underline `Indicator` that\n * slides to the active tab. Each `Tabs.Tab` and `Tabs.Panel` share a `value`.\n * Control with `value` / `onValueChange` or leave uncontrolled via\n * `defaultValue`.\n */\nexport const Tabs = { Root, List, Tab, Indicator, Panel };\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAS;AAEtB,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA4C;AACxE,SACE,gBAAA,EAAC,EAAS,MAAV;AAAA,IACE,WAAW,EACT,wFACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAI,EAAE,WAAA,GAAW,GAAG,EAAA,GAA2C;AACtE,SACE,gBAAA,EAAC,EAAS,KAAV;AAAA,IACE,WAAW,EACT,yNACA,kCACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAS,WAAV;AAAA,IACE,WAAW,EACT,6KACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AAC1E,SACE,gBAAA,EAAC,EAAS,OAAV;AAAA,IACE,WAAW,EACT,6GACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAO;AAAA,EAAE,MAAA;AAAA,EAAM,MAAA;AAAA,EAAM,KAAA;AAAA,EAAK,WAAA;AAAA,EAAW,OAAA;AAAM"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Root = BaseTabs.Root;\n\nfunction List({ className, ...props }: StyledProps<typeof BaseTabs.List>) {\n  return (\n    <BaseTabs.List\n      className={cn(\n        // Flat chip row — the site Tab has no underline or hairline.\n        \"relative flex items-center gap-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Tab({ className, ...props }: StyledProps<typeof BaseTabs.Tab>) {\n  return (\n    <BaseTabs.Tab\n      className={cn(\n        // Site Tab spec: 8px radius; inactive = tertiary label with the quiet\n        // ghost-hover wash; active = the inverted chip (dark chip in light\n        // mode, light chip in dark) — visible on any surface.\n        \"outline-pho-brand text-pho-tertiary hover:bg-pho-ghost-hover hover:text-pho-tertiary-hover relative z-10 cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2\",\n        // Base UI marks the active tab with aria-selected/data-active (there\n        // is no data-selected attribute on Tab).\n        \"aria-selected:bg-pho-inverse aria-selected:text-pho-inverse aria-selected:hover:bg-pho-inverse\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Indicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseTabs.Indicator>) {\n  return (\n    <BaseTabs.Indicator\n      // A sliding copy of the active chip, behind the tabs (z-0). Optional:\n      // the Tab paints its own inverse fill, so omitting the Indicator loses\n      // only the slide, never the selected state.\n      className={cn(\n        \"bg-pho-inverse absolute top-1/2 left-0 z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-1/2 rounded-lg transition-[translate,width] duration-200 ease-out\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Panel({ className, ...props }: StyledProps<typeof BaseTabs.Panel>) {\n  return (\n    <BaseTabs.Panel\n      className={cn(\n        \"outline-pho-brand text-pho-secondary py-4 text-sm focus-visible:outline-2 focus-visible:-outline-offset-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Tabbed sections built on Base UI `Tabs`, with an underline `Indicator` that\n * slides to the active tab. Each `Tabs.Tab` and `Tabs.Panel` share a `value`.\n * Control with `value` / `onValueChange` or leave uncontrolled via\n * `defaultValue`.\n */\nexport const Tabs = { Root, List, Tab, Indicator, Panel };\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAS;AAEtB,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA4C;AACxE,SACE,gBAAA,EAAC,EAAS,MAAV;AAAA,IACE,WAAW,EAET,oCACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAI,EAAE,WAAA,GAAW,GAAG,EAAA,GAA2C;AACtE,SACE,gBAAA,EAAC,EAAS,KAAV;AAAA,IACE,WAAW,EAIT,gPAGA,kGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAS,WAAV;AAAA,IAIE,WAAW,EACT,2NACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AAC1E,SACE,gBAAA,EAAC,EAAS,OAAV;AAAA,IACE,WAAW,EACT,6GACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAO;AAAA,EAAE,MAAA;AAAA,EAAM,MAAA;AAAA,EAAM,KAAA;AAAA,EAAK,WAAA;AAAA,EAAW,OAAA;AAAM"}

package/dist/components/toast.js

@@ -1,9 +1,9 @@
 "use client";
-import { t as a } from "../chunks/cn-D6jQqeRj.js";
+import { t as a } from "../chunks/cn-7uGUzCOM.js";
 import "react";
 import { jsx as o } from "react/jsx-runtime";
 import { Toast as r } from "@base-ui/react/toast";
-var n = r.Provider, i = r.Portal, s = r.Action, l = r.useToastManager, c = r.createToastManager;
+var n = r.Provider, s = r.Portal, i = r.Action, l = r.useToastManager, c = r.createToastManager;
 function p({ className: t, ...e }) {
   return /* @__PURE__ */ o(r.Viewport, {
     className: a("fixed right-4 bottom-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2 outline-none", t),
@@ -12,7 +12,7 @@ function p({ className: t, ...e }) {
 }
 function u({ className: t, ...e }) {
   return /* @__PURE__ */ o(r.Root, {
-    className: a("squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-interactive relative w-full rounded-xl ring-1 select-none ring-inset", "[transform:translateX(var(--toast-swipe-movement-x,0px))] transition-[transform,opacity] duration-300 ease-out", "data-[starting-style]:translate-x-full data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-full data-[ending-style]:opacity-0", "data-[swiping]:duration-0", t),
+    className: a("squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary relative w-full rounded-xl ring-1 select-none ring-inset", "[transform:translateX(var(--toast-swipe-movement-x,0px))] transition-[transform,opacity] duration-300 ease-out", "data-[starting-style]:translate-x-full data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-full data-[ending-style]:opacity-0", "data-[swiping]:duration-0", t),
     ...e
   });
 }
@@ -36,20 +36,20 @@ function g({ className: t, ...e }) {
 }
 function d({ className: t, ...e }) {
   return /* @__PURE__ */ o(r.Close, {
-    className: a("text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover hover:bg-pho-secondary outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-md transition focus-visible:outline-2 [&>svg]:size-4", t),
+    className: a("text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover hover:bg-pho-ghost-hover outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-md transition focus-visible:outline-2 [&>svg]:size-4", t),
     ...e
   });
 }
 var w = {
   Provider: n,
-  Portal: i,
+  Portal: s,
   Viewport: p,
   Root: u,
   Content: m,
   Title: f,
   Description: g,
   Close: d,
-  Action: s,
+  Action: i,
   useToastManager: l,
   createToastManager: c
 };

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":[],"sources":["../../src/components/toast/toast.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseToast.Provider;\nconst Portal = BaseToast.Portal;\nconst Action = BaseToast.Action;\n\n/** Imperative toast API: `const toast = useToastManager(); toast.add({ title })`. */\nconst useToastManager = BaseToast.useToastManager;\nconst createToastManager = BaseToast.createToastManager;\n\nfunction Viewport({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Viewport>) {\n  return (\n    <BaseToast.Viewport\n      className={cn(\n        \"fixed right-4 bottom-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToast.Root>) {\n  return (\n    <BaseToast.Root\n      className={cn(\n        \"squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-interactive relative w-full rounded-xl ring-1 select-none ring-inset\",\n        \"[transform:translateX(var(--toast-swipe-movement-x,0px))] transition-[transform,opacity] duration-300 ease-out\",\n        \"data-[starting-style]:translate-x-full data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:translate-x-full data-[ending-style]:opacity-0\",\n        \"data-[swiping]:duration-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Content({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Content>) {\n  return (\n    <BaseToast.Content\n      className={cn(\"flex flex-col gap-1 p-4 pr-10\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Title({ className, ...props }: StyledProps<typeof BaseToast.Title>) {\n  return (\n    <BaseToast.Title\n      className={cn(\"text-pho-primary text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Description>) {\n  return (\n    <BaseToast.Description\n      className={cn(\"text-pho-tertiary text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Close({ className, ...props }: StyledProps<typeof BaseToast.Close>) {\n  return (\n    <BaseToast.Close\n      className={cn(\n        \"text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover hover:bg-pho-secondary outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-md transition focus-visible:outline-2 [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toast built on Base UI `Toast` — a transient, non-blocking notification.\n * Wrap your app in `Toast.Provider`, render a `Toast.Portal` → `Viewport` that\n * maps `useToastManager().toasts` to `Toast.Root`s, then call\n * `useToastManager().add({ title, description })` to show one. Use a toast for\n * confirmation of a background action; for a choice the user must make, use\n * `AlertDialog`.\n */\nexport const Toast = {\n  Provider,\n  Portal,\n  Viewport,\n  Root,\n  Content,\n  Title,\n  Description,\n  Close,\n  Action,\n  useToastManager,\n  createToastManager,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAU,UACrB,IAAS,EAAU,QACnB,IAAS,EAAU,QAGnB,IAAkB,EAAU,iBAC5B,IAAqB,EAAU;AAErC,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAU,UAAX;AAAA,IACE,WAAW,EACT,mGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AACzE,SACE,gBAAA,EAAC,EAAU,MAAX;AAAA,IACE,WAAW,EACT,wIACA,kHACA,0EACA,sEACA,6BACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACqC;AACxC,SACE,gBAAA,EAAC,EAAU,SAAX;AAAA,IACE,WAAW,EAAG,iCAAiC,CAAS;AAAA,IACxD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAU,aAAX;AAAA,IACE,WAAW,EAAG,6BAA6B,CAAS;AAAA,IACpD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EACT,qPACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAUA,IAAa,IAAQ;AAAA,EACnB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AACF"}
+{"version":3,"file":"toast.js","names":[],"sources":["../../src/components/toast/toast.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseToast.Provider;\nconst Portal = BaseToast.Portal;\nconst Action = BaseToast.Action;\n\n/** Imperative toast API: `const toast = useToastManager(); toast.add({ title })`. */\nconst useToastManager = BaseToast.useToastManager;\nconst createToastManager = BaseToast.createToastManager;\n\nfunction Viewport({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Viewport>) {\n  return (\n    <BaseToast.Viewport\n      className={cn(\n        \"fixed right-4 bottom-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToast.Root>) {\n  return (\n    <BaseToast.Root\n      className={cn(\n        // Floating layer: keeps its elevation shadow, sits on the card surface\n        // with the site hairline (ring-pho-secondary).\n        \"squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary relative w-full rounded-xl ring-1 select-none ring-inset\",\n        \"[transform:translateX(var(--toast-swipe-movement-x,0px))] transition-[transform,opacity] duration-300 ease-out\",\n        \"data-[starting-style]:translate-x-full data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:translate-x-full data-[ending-style]:opacity-0\",\n        \"data-[swiping]:duration-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Content({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Content>) {\n  return (\n    <BaseToast.Content\n      className={cn(\"flex flex-col gap-1 p-4 pr-10\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Title({ className, ...props }: StyledProps<typeof BaseToast.Title>) {\n  return (\n    <BaseToast.Title\n      className={cn(\"text-pho-primary text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseToast.Description>) {\n  return (\n    <BaseToast.Description\n      className={cn(\"text-pho-tertiary text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Close({ className, ...props }: StyledProps<typeof BaseToast.Close>) {\n  return (\n    <BaseToast.Close\n      className={cn(\n        \"text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover hover:bg-pho-ghost-hover outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-md transition focus-visible:outline-2 [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toast built on Base UI `Toast` — a transient, non-blocking notification.\n * Wrap your app in `Toast.Provider`, render a `Toast.Portal` → `Viewport` that\n * maps `useToastManager().toasts` to `Toast.Root`s, then call\n * `useToastManager().add({ title, description })` to show one. Use a toast for\n * confirmation of a background action; for a choice the user must make, use\n * `AlertDialog`.\n */\nexport const Toast = {\n  Provider,\n  Portal,\n  Viewport,\n  Root,\n  Content,\n  Title,\n  Description,\n  Close,\n  Action,\n  useToastManager,\n  createToastManager,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAU,UACrB,IAAS,EAAU,QACnB,IAAS,EAAU,QAGnB,IAAkB,EAAU,iBAC5B,IAAqB,EAAU;AAErC,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAU,UAAX;AAAA,IACE,WAAW,EACT,mGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6C;AACzE,SACE,gBAAA,EAAC,EAAU,MAAX;AAAA,IACE,WAAW,EAGT,sIACA,kHACA,0EACA,sEACA,6BACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACqC;AACxC,SACE,gBAAA,EAAC,EAAU,SAAX;AAAA,IACE,WAAW,EAAG,iCAAiC,CAAS;AAAA,IACxD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAU,aAAX;AAAA,IACE,WAAW,EAAG,6BAA6B,CAAS;AAAA,IACpD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EACT,uPACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAUA,IAAa,IAAQ;AAAA,EACnB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AACF"}

package/dist/components/toggle-group.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as r } from "../chunks/cn-D6jQqeRj.js";
+import { t as r } from "../chunks/cn-7uGUzCOM.js";
 import "react";
 import { jsx as p } from "react/jsx-runtime";
 import { ToggleGroup as t } from "@base-ui/react/toggle-group";

package/dist/components/toggle.js

@@ -1,8 +1,8 @@
 "use client";
-import { t as o } from "../chunks/cn-D6jQqeRj.js";
+import { t } from "../chunks/cn-7uGUzCOM.js";
 import { t as i } from "../chunks/resolve-variant-CcD8iG5l.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { Toggle as a } from "@base-ui/react/toggle";
 var l = {
   sm: {
@@ -18,10 +18,10 @@ var l = {
     description: "Large"
   }
 };
-function n({ className: e, size: s = "md", ...r }) {
-  return /* @__PURE__ */ t(a, {
-    className: o("squircle outline-pho-brand text-pho-tertiary inline-flex cursor-pointer items-center justify-center rounded-lg transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "hover:bg-pho-primary-hover hover:text-pho-tertiary-hover", "data-[pressed]:bg-pho-secondary data-[pressed]:text-pho-primary", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", i(l, s), e),
-    ...r
+function n({ className: e, size: s = "md", ...o }) {
+  return /* @__PURE__ */ r(a, {
+    className: t("squircle outline-pho-brand text-pho-tertiary inline-flex cursor-pointer items-center justify-center rounded-lg transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "hover:bg-pho-ghost-hover hover:text-pho-tertiary-hover", "data-[pressed]:bg-pho-inverse data-[pressed]:text-pho-inverse", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", i(l, s), e),
+    ...o
   });
 }
 n.displayName = "Toggle";

package/dist/components/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":[],"sources":["../../src/components/toggle/toggle.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/** Size axis — three square icon sizes. `md` is default. */\nexport const TOGGLE_SIZES = {\n  sm: {\n    classes: \"size-8 [&>svg]:size-4\",\n    description: \"Small — dense toolbars\",\n  },\n  md: { classes: \"size-9 [&>svg]:size-5\", description: \"Medium — the default\" },\n  lg: { classes: \"size-10 [&>svg]:size-5\", description: \"Large\" },\n} satisfies VariantMap;\n\nexport type ToggleSize = keyof typeof TOGGLE_SIZES;\n\nexport interface ToggleProps extends Omit<\n  ComponentProps<typeof BaseToggle>,\n  \"className\"\n> {\n  className?: string;\n  /** Size variant. @default \"md\" */\n  size?: ToggleSize;\n}\n\n/**\n * A two-state button (pressed / not pressed) built on Base UI `Toggle` — the\n * canonical Bold/Italic toolbar control. Controlled via `pressed` /\n * `onPressedChange` or uncontrolled via `defaultPressed`. For a set of related\n * toggles, use `ToggleGroup`.\n */\nexport function Toggle({ className, size = \"md\", ...props }: ToggleProps) {\n  return (\n    <BaseToggle\n      className={cn(\n        \"squircle outline-pho-brand text-pho-tertiary inline-flex cursor-pointer items-center justify-center rounded-lg transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"hover:bg-pho-primary-hover hover:text-pho-tertiary-hover\",\n        \"data-[pressed]:bg-pho-secondary data-[pressed]:text-pho-primary\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        resolveVariant(TOGGLE_SIZES, size),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nToggle.displayName = \"Toggle\";\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;AAAA,EAC1B,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IAAE,SAAS;AAAA,IAAyB,aAAa;AAAA,EAAuB;AAAA,EAC5E,IAAI;AAAA,IAAE,SAAS;AAAA,IAA0B,aAAa;AAAA,EAAQ;AAChE;AAmBA,SAAgB,EAAO,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAsB;AACxE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EACT,6MACA,4DACA,mEACA,iEACA,EAAe,GAAc,CAAI,GACjC,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,EAAO,cAAc"}
+{"version":3,"file":"toggle.js","names":[],"sources":["../../src/components/toggle/toggle.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/** Size axis — three square icon sizes. `md` is default. */\nexport const TOGGLE_SIZES = {\n  sm: {\n    classes: \"size-8 [&>svg]:size-4\",\n    description: \"Small — dense toolbars\",\n  },\n  md: { classes: \"size-9 [&>svg]:size-5\", description: \"Medium — the default\" },\n  lg: { classes: \"size-10 [&>svg]:size-5\", description: \"Large\" },\n} satisfies VariantMap;\n\nexport type ToggleSize = keyof typeof TOGGLE_SIZES;\n\nexport interface ToggleProps extends Omit<\n  ComponentProps<typeof BaseToggle>,\n  \"className\"\n> {\n  className?: string;\n  /** Size variant. @default \"md\" */\n  size?: ToggleSize;\n}\n\n/**\n * A two-state button (pressed / not pressed) built on Base UI `Toggle` — the\n * canonical Bold/Italic toolbar control. Controlled via `pressed` /\n * `onPressedChange` or uncontrolled via `defaultPressed`. For a set of related\n * toggles, use `ToggleGroup`.\n */\nexport function Toggle({ className, size = \"md\", ...props }: ToggleProps) {\n  return (\n    <BaseToggle\n      className={cn(\n        \"squircle outline-pho-brand text-pho-tertiary inline-flex cursor-pointer items-center justify-center rounded-lg transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\",\n        // Ghost control at rest — hover is the alpha wash (Button `tertiary`\n        // idiom), not the card-surface hover token.\n        \"hover:bg-pho-ghost-hover hover:text-pho-tertiary-hover\",\n        // Pressed = the site's inverted chip (Tab active): dark chip in light\n        // mode, light chip in dark mode — visible on any surface.\n        \"data-[pressed]:bg-pho-inverse data-[pressed]:text-pho-inverse\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        resolveVariant(TOGGLE_SIZES, size),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nToggle.displayName = \"Toggle\";\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;AAAA,EAC1B,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IAAE,SAAS;AAAA,IAAyB,aAAa;AAAA,EAAuB;AAAA,EAC5E,IAAI;AAAA,IAAE,SAAS;AAAA,IAA0B,aAAa;AAAA,EAAQ;AAChE;AAmBA,SAAgB,EAAO,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAsB;AACxE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EACT,6MAGA,0DAGA,iEACA,iEACA,EAAe,GAAc,CAAI,GACjC,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,EAAO,cAAc"}

package/dist/components/toolbar.js

@@ -1,15 +1,15 @@
 "use client";
-import { t as o } from "../chunks/cn-D6jQqeRj.js";
+import { t as o } from "../chunks/cn-7uGUzCOM.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
 import { Toolbar as n } from "@base-ui/react/toolbar";
 function i({ className: e, ...r }) {
   return /* @__PURE__ */ t(n.Root, {
-    className: o("squircle border-pho-secondary bg-pho-primary shadow-pho-xs flex items-center gap-1 rounded-lg border p-1", e),
+    className: o("squircle border-pho-secondary bg-pho-primary flex items-center gap-1 rounded-lg border p-1", e),
     ...r
   });
 }
-var a = "inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-pho-tertiary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-secondary hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-secondary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4";
+var a = "inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-pho-tertiary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-ghost-hover hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-tertiary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4";
 function s({ className: e, ...r }) {
   return /* @__PURE__ */ t(n.Button, {
     className: o(a, e),
@@ -28,13 +28,13 @@ function u({ className: e, ...r }) {
     ...r
   });
 }
-function d({ className: e, ...r }) {
+function l({ className: e, ...r }) {
   return /* @__PURE__ */ t(n.Input, {
     className: o("bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand rounded-md px-2 py-1 text-sm ring-1 outline-none ring-inset focus-visible:ring-2", e),
     ...r
   });
 }
-function l({ className: e, ...r }) {
+function c({ className: e, ...r }) {
   return /* @__PURE__ */ t(n.Separator, {
     className: o("mx-1 h-5 w-px bg-[var(--border-color-pho-secondary)]", e),
     ...r
@@ -45,8 +45,8 @@ var b = {
   Button: s,
   Link: p,
   Group: u,
-  Input: d,
-  Separator: l
+  Input: l,
+  Separator: c
 };
 export {
   b as Toolbar

package/dist/components/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toolbar as BaseToolbar } from \"@base-ui/react/toolbar\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToolbar.Root>) {\n  return (\n    <BaseToolbar.Root\n      className={cn(\n        \"squircle border-pho-secondary bg-pho-primary shadow-pho-xs flex items-center gap-1 rounded-lg border p-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst TOOLBAR_BUTTON =\n  \"inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-pho-tertiary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-secondary hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-secondary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4\";\n\nfunction Button({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Button>) {\n  return (\n    <BaseToolbar.Button className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Link({ className, ...props }: StyledProps<typeof BaseToolbar.Link>) {\n  return (\n    <BaseToolbar.Link className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Group({ className, ...props }: StyledProps<typeof BaseToolbar.Group>) {\n  return (\n    <BaseToolbar.Group\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Input({ className, ...props }: StyledProps<typeof BaseToolbar.Input>) {\n  return (\n    <BaseToolbar.Input\n      className={cn(\n        \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand rounded-md px-2 py-1 text-sm ring-1 outline-none ring-inset focus-visible:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Separator({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Separator>) {\n  return (\n    <BaseToolbar.Separator\n      className={cn(\n        \"mx-1 h-5 w-px bg-[var(--border-color-pho-secondary)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toolbar built on Base UI `Toolbar` — a single tab stop grouping related\n * controls with arrow-key navigation between them (formatting bars, editor\n * controls). Holds `Toolbar.Button`, `Link`, `Input`, and `Separator`; for\n * pressable formatting buttons, wrap `Toggle` / `ToggleGroup` with\n * `Toolbar.Button render={…}`.\n */\nexport const Toolbar = { Root, Button, Link, Group, Input, Separator };\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IACE,WAAW,EACT,4GACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,IAAM,IACJ;AAEF,SAAS,EAAO,EACd,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAY,QAAb;AAAA,IAAoB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE9E;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IAAkB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE5E;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAAG,2BAA2B,CAAS;AAAA,IAClD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EACT,mMACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAY,WAAb;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAU;AAAA,EAAE,MAAA;AAAA,EAAM,QAAA;AAAA,EAAQ,MAAA;AAAA,EAAM,OAAA;AAAA,EAAO,OAAA;AAAA,EAAO,WAAA;AAAU"}
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toolbar as BaseToolbar } from \"@base-ui/react/toolbar\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToolbar.Root>) {\n  return (\n    <BaseToolbar.Root\n      className={cn(\n        // Flat card treatment — the hairline border carries the edge; shadows\n        // are reserved for floating layers (menus/popovers/dialogs).\n        \"squircle border-pho-secondary bg-pho-primary flex items-center gap-1 rounded-lg border p-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// Ghost-button idiom: quiet Font/5% hover wash; pressed steps up to the\n// tertiary surface so it stays distinct from hover in both modes.\nconst TOOLBAR_BUTTON =\n  \"inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-pho-tertiary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-ghost-hover hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-tertiary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4\";\n\nfunction Button({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Button>) {\n  return (\n    <BaseToolbar.Button className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Link({ className, ...props }: StyledProps<typeof BaseToolbar.Link>) {\n  return (\n    <BaseToolbar.Link className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Group({ className, ...props }: StyledProps<typeof BaseToolbar.Group>) {\n  return (\n    <BaseToolbar.Group\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Input({ className, ...props }: StyledProps<typeof BaseToolbar.Input>) {\n  return (\n    <BaseToolbar.Input\n      className={cn(\n        \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand rounded-md px-2 py-1 text-sm ring-1 outline-none ring-inset focus-visible:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Separator({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Separator>) {\n  return (\n    <BaseToolbar.Separator\n      className={cn(\n        \"mx-1 h-5 w-px bg-[var(--border-color-pho-secondary)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toolbar built on Base UI `Toolbar` — a single tab stop grouping related\n * controls with arrow-key navigation between them (formatting bars, editor\n * controls). Holds `Toolbar.Button`, `Link`, `Input`, and `Separator`; for\n * pressable formatting buttons, wrap `Toggle` / `ToggleGroup` with\n * `Toolbar.Button render={…}`.\n */\nexport const Toolbar = { Root, Button, Link, Group, Input, Separator };\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IACE,WAAW,EAGT,8FACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAIA,IAAM,IACJ;AAEF,SAAS,EAAO,EACd,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAY,QAAb;AAAA,IAAoB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE9E;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IAAkB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE5E;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAAG,2BAA2B,CAAS;AAAA,IAClD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EACT,mMACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAY,WAAb;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAU;AAAA,EAAE,MAAA;AAAA,EAAM,QAAA;AAAA,EAAQ,MAAA;AAAA,EAAM,OAAA;AAAA,EAAO,OAAA;AAAA,EAAO,WAAA;AAAU"}

package/dist/components/tooltip.js

@@ -1,32 +1,32 @@
 "use client";
-import { t as i } from "../chunks/cn-D6jQqeRj.js";
+import { t as i } from "../chunks/cn-7uGUzCOM.js";
 import "react";
 import { jsx as a } from "react/jsx-runtime";
-import { Tooltip as r } from "@base-ui/react/tooltip";
-var n = r.Provider, s = r.Root, p = r.Trigger, l = r.Portal;
-function g({ className: t, sideOffset: o = 6, ...e }) {
-  return /* @__PURE__ */ a(r.Positioner, {
-    sideOffset: o,
-    className: i("z-50", t),
+import { Tooltip as o } from "@base-ui/react/tooltip";
+var n = o.Provider, s = o.Root, p = o.Trigger, l = o.Portal;
+function g({ className: r, sideOffset: t = 6, ...e }) {
+  return /* @__PURE__ */ a(o.Positioner, {
+    sideOffset: t,
+    className: i("z-50", r),
     ...e
   });
 }
-function c({ className: t, ...o }) {
-  return /* @__PURE__ */ a(r.Popup, {
-    className: i("squircle bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-interactive origin-[var(--transform-origin)] rounded-lg px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", t),
-    ...o
+function d({ className: r, ...t }) {
+  return /* @__PURE__ */ a(o.Popup, {
+    className: i("squircle bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-secondary origin-[var(--transform-origin)] rounded-lg px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", r),
+    ...t
   });
 }
-var v = {
+var f = {
   Provider: n,
   Root: s,
   Trigger: p,
   Portal: l,
   Positioner: g,
-  Popup: c
+  Popup: d
 };
 export {
-  v as Tooltip
+  f as Tooltip
 };
 
 //# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseTooltip.Provider;\nconst Root = BaseTooltip.Root;\nconst Trigger = BaseTooltip.Trigger;\nconst Portal = BaseTooltip.Portal;\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseTooltip.Positioner>) {\n  return (\n    <BaseTooltip.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseTooltip.Popup>) {\n  return (\n    <BaseTooltip.Popup\n      className={cn(\n        \"squircle bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-interactive origin-[var(--transform-origin)] rounded-lg px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Tooltip built on Base UI `Tooltip` — a brief, hover/focus-triggered label for\n * an icon or control. Wrap your app (or a subtree) in `Tooltip.Provider` to\n * share open/close timing. The trigger must be a focusable element. Never put\n * essential or interactive content in a tooltip; use `Popover` for that.\n */\nexport const Tooltip = { Provider, Root, Trigger, Portal, Positioner, Popup };\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAY,UACvB,IAAO,EAAY,MACnB,IAAU,EAAY,SACtB,IAAS,EAAY;AAE3B,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAY,YAAb;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,QAAQ,CAAS;AAAA,IAC/B,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EACT,sOACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAU;AAAA,EAAE,UAAA;AAAA,EAAU,MAAA;AAAA,EAAM,SAAA;AAAA,EAAS,QAAA;AAAA,EAAQ,YAAA;AAAA,EAAY,OAAA;AAAM"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseTooltip.Provider;\nconst Root = BaseTooltip.Root;\nconst Trigger = BaseTooltip.Trigger;\nconst Portal = BaseTooltip.Portal;\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseTooltip.Positioner>) {\n  return (\n    <BaseTooltip.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseTooltip.Popup>) {\n  return (\n    <BaseTooltip.Popup\n      className={cn(\n        // Floating layer: bg-pho-primary surface, pho-secondary hairline ring, keeps shadow elevation.\n        \"squircle bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-secondary origin-[var(--transform-origin)] rounded-lg px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Tooltip built on Base UI `Tooltip` — a brief, hover/focus-triggered label for\n * an icon or control. Wrap your app (or a subtree) in `Tooltip.Provider` to\n * share open/close timing. The trigger must be a focusable element. Never put\n * essential or interactive content in a tooltip; use `Popover` for that.\n */\nexport const Tooltip = { Provider, Root, Trigger, Portal, Positioner, Popup };\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAY,UACvB,IAAO,EAAY,MACnB,IAAU,EAAY,SACtB,IAAS,EAAY;AAE3B,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAY,YAAb;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,QAAQ,CAAS;AAAA,IAC/B,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAET,oOACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAU;AAAA,EAAE,UAAA;AAAA,EAAU,MAAA;AAAA,EAAM,SAAA;AAAA,EAAS,QAAA;AAAA,EAAQ,YAAA;AAAA,EAAY,OAAA;AAAM"}