@photon-ai/pho-ui 0.7.2 → 1.0.0

package/dist/components/slider.js

@@ -1,47 +1,47 @@
 "use client";
-import { t as r } from "../chunks/cn-7uGUzCOM.js";
+import { t as o } from "../chunks/cn-DTiB6ek_.js";
 import "react";
-import { jsx as o } from "react/jsx-runtime";
-import { Slider as n } from "@base-ui/react/slider";
+import { jsx as n } from "react/jsx-runtime";
+import { Slider as r } from "@base-ui/react/slider";
 function l({ className: e, ...t }) {
-  return /* @__PURE__ */ o(n.Root, {
-    className: r("flex w-full flex-col gap-3", e),
+  return /* @__PURE__ */ n(r.Root, {
+    className: o("flex w-full flex-col gap-3", e),
     ...t
   });
 }
 function a({ className: e, ...t }) {
-  return /* @__PURE__ */ o(n.Label, {
-    className: r("text-pho-secondary text-sm font-medium", e),
+  return /* @__PURE__ */ n(r.Label, {
+    className: o("text-pho-secondary text-base font-medium", e),
     ...t
   });
 }
 function i({ className: e, ...t }) {
-  return /* @__PURE__ */ o(n.Value, {
-    className: r("text-pho-tertiary text-sm tabular-nums", e),
+  return /* @__PURE__ */ n(r.Value, {
+    className: o("text-pho-secondary text-base tabular-nums", e),
     ...t
   });
 }
 function u({ className: e, ...t }) {
-  return /* @__PURE__ */ o(n.Control, {
-    className: r("relative flex w-full touch-none items-center py-2 select-none", e),
+  return /* @__PURE__ */ n(r.Control, {
+    className: o("relative flex w-full touch-none items-center py-2 select-none", e),
     ...t
   });
 }
 function s({ className: e, ...t }) {
-  return /* @__PURE__ */ o(n.Track, {
-    className: r("bg-pho-tertiary relative h-1.5 w-full rounded-full", e),
+  return /* @__PURE__ */ n(r.Track, {
+    className: o("bg-pho-secondary relative h-1.5 w-full rounded-full", e),
     ...t
   });
 }
 function c({ className: e, ...t }) {
-  return /* @__PURE__ */ o(n.Indicator, {
-    className: r("bg-pho-brand-solid rounded-full", e),
+  return /* @__PURE__ */ n(r.Indicator, {
+    className: o("bg-pho-brand-solid rounded-full", e),
     ...t
   });
 }
 function f({ className: e, ...t }) {
-  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),
+  return /* @__PURE__ */ n(r.Thumb, {
+    className: o("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      // 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"}
+{"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-base 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-secondary text-base 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-secondary 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,4CAA4C,CAAS;AAAA,IACnE,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,6CAA6C,CAAS;AAAA,IACpE,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,uDACA,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/spinner.js

@@ -0,0 +1,6 @@
+"use client";
+import { n, t as r } from "../chunks/spinner-Cy8bkyJf.js";
+export {
+  r as SPINNER_SIZES,
+  n as Spinner
+};

package/dist/components/switch.js

@@ -1,9 +1,9 @@
 "use client";
-import { t as e } from "../chunks/cn-7uGUzCOM.js";
+import { t as e } from "../chunks/cn-DTiB6ek_.js";
 import "react";
 import { jsx as a } from "react/jsx-runtime";
-import { Switch as o } from "@base-ui/react/switch";
-var r = {
+import { Switch as i } from "@base-ui/react/switch";
+var o = {
   sm: {
     track: "h-5 w-9",
     thumb: "size-4 data-[checked]:translate-x-4"
@@ -13,16 +13,16 @@ var r = {
     thumb: "size-5 data-[checked]:translate-x-5"
   }
 };
-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) })
+function n({ className: r, size: t = "md", ...s }) {
+  return /* @__PURE__ */ a(i.Root, {
+    className: e("bg-pho-secondary 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-success-solid", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", o[t].track, r),
+    ...s,
+    children: /* @__PURE__ */ a(i.Thumb, { className: e("pointer-events-none block rounded-full bg-white ring-1 ring-black/15 transition-[translate,box-shadow] duration-150 ease-out ring-inset data-[checked]:ring-0", o[t].thumb) })
   });
 }
-s.displayName = "Switch";
+n.displayName = "Switch";
 export {
-  s as Switch
+  n 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      {/* 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"}
+{"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-secondary 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        // Success solid (green) — not brand-solid. Brand flips to white in dark\n        // mode and the whole switch reads as a photographic negative.\n        \"data-[checked]:bg-pho-success-solid\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        SIZE[size].track,\n        className,\n      )}\n      {...props}\n    >\n      {/* Thumb stays white in both states — success-solid is green in light and\n          dark, so white always contrasts. Off-track is near-white in light mode,\n          so a hairline keeps the thumb from vanishing; drop it when checked or\n          the inset black/15 muddies the white circle on green. Tailwind v4's\n          translate-x-* animates via `translate`, so it must be in the list. */}\n      <BaseSwitch.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-white ring-1 ring-black/15 transition-[translate,box-shadow] duration-150 ease-out ring-inset data-[checked]:ring-0\",\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,kNAGA,uCACA,iEACA,EAAK,CAAA,EAAM,OACX,CACF;AAAA,IACA,GAAI;AAAA,cAOJ,gBAAA,EAAC,EAAW,OAAZ,EACE,WAAW,EACT,iKACA,EAAK,CAAA,EAAM,KACb,EACD,CAAA;AAAA,EACc,CAAA;AAErB;AAEA,EAAO,cAAc"}

package/dist/components/tabs.js

@@ -1,42 +1,42 @@
 "use client";
-import { t as r } from "../chunks/cn-7uGUzCOM.js";
+import { t as a } from "../chunks/cn-DTiB6ek_.js";
 import "react";
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { Tabs as o } from "@base-ui/react/tabs";
-var i = o.Root;
-function s({ className: e, ...t }) {
-  return /* @__PURE__ */ a(o.List, {
-    className: r("relative flex items-center gap-1", e),
+var s = o.Root;
+function i({ className: e, ...t }) {
+  return /* @__PURE__ */ r(o.List, {
+    className: a("relative flex items-center gap-1", e),
     ...t
   });
 }
 function n({ className: e, ...t }) {
-  return /* @__PURE__ */ a(o.Tab, {
-    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),
+  return /* @__PURE__ */ r(o.Tab, {
+    className: a("outline-pho-brand text-pho-secondary hover:bg-pho-ghost-hover hover:text-pho-secondary-hover rounded-base relative z-10 cursor-pointer px-3 py-1.5 text-base 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: e, ...t }) {
-  return /* @__PURE__ */ a(o.Indicator, {
-    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),
+  return /* @__PURE__ */ r(o.Indicator, {
+    className: a("bg-pho-inverse rounded-base 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 transition-[translate,width] duration-200 ease-out", e),
     ...t
   });
 }
 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", e),
+  return /* @__PURE__ */ r(o.Panel, {
+    className: a("outline-pho-brand text-pho-secondary py-4 text-base focus-visible:outline-2 focus-visible:-outline-offset-2", e),
     ...t
   });
 }
-var b = {
-  Root: i,
-  List: s,
+var p = {
+  Root: s,
+  List: i,
   Tab: n,
   Indicator: l,
   Panel: c
 };
 export {
-  b as Tabs
+  p 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        // 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"}
+{"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-secondary hover:bg-pho-ghost-hover hover:text-pho-secondary-hover rounded-base relative z-10 cursor-pointer px-3 py-1.5 text-base 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 rounded-base 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 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-base 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,sPAGA,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,6NACA,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,+GACA,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/theme-toggle.js

@@ -0,0 +1,199 @@
+"use client";
+import { t as _ } from "../chunks/cn-DTiB6ek_.js";
+import { t as y } from "../chunks/createReactComponent-BqCmnqfX.js";
+import { useEffect as v, useSyncExternalStore as $ } from "react";
+import { jsx as h } from "react/jsx-runtime";
+var j = [
+  ["path", {
+    d: "M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10",
+    key: "svg-0"
+  }],
+  ["path", {
+    d: "M7 20h10",
+    key: "svg-1"
+  }],
+  ["path", {
+    d: "M9 16v4",
+    key: "svg-2"
+  }],
+  ["path", {
+    d: "M15 16v4",
+    key: "svg-3"
+  }]
+], G = y("outline", "device-desktop", "DeviceDesktop", j), U = [["path", {
+  d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008",
+  key: "svg-0"
+}]], V = y("outline", "moon", "Moon", U), Y = [["path", {
+  d: "M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",
+  key: "svg-0"
+}], ["path", {
+  d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7",
+  key: "svg-1"
+}]], Z = y("outline", "sun", "Sun", Y), b = "pho-mode", u = "pho-themechange", p = [
+  {
+    value: "device",
+    label: "Device",
+    Icon: G
+  },
+  {
+    value: "light",
+    label: "Light",
+    Icon: Z
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    Icon: V
+  }
+], B = {
+  sm: {
+    track: "gap-0.5 rounded-base p-0.5",
+    item: "size-7 rounded-[calc(var(--radius-base)-2px)] [&>svg]:size-3.5"
+  },
+  md: {
+    track: "gap-0.5 rounded-base p-0.5",
+    item: "size-8 rounded-[calc(var(--radius-base)-2px)] [&>svg]:size-4"
+  },
+  lg: {
+    track: "gap-1 rounded-base p-1",
+    item: "size-9 rounded-[calc(var(--radius-base)-4px)] [&>svg]:size-5"
+  }
+};
+function F(e) {
+  return e === "light" || e === "dark" || e === "device" ? e : "device";
+}
+function M(e, n = typeof window < "u" ? window.matchMedia("(prefers-color-scheme: dark)") : { matches: !1 }) {
+  return e === "light" || e === "dark" ? e : n.matches ? "dark" : "light";
+}
+function l(e) {
+  return typeof e == "function" ? e() : e !== void 0 ? e : typeof document > "u" ? null : document.documentElement;
+}
+var s = null, g = null, k = /* @__PURE__ */ new Map();
+function w(e) {
+  if (e == null || typeof localStorage > "u") return null;
+  const n = localStorage.getItem(e);
+  return n == null ? null : F(n);
+}
+function J(e = b) {
+  return s ?? w(e) ?? "device";
+}
+function re(e = typeof document > "u" ? null : document.documentElement) {
+  return e?.dataset.mode === "dark" ? "dark" : "light";
+}
+function T(e, n) {
+  n && (e === "dark" ? n.dataset.mode = "dark" : delete n.dataset.mode);
+}
+function Q(e) {
+  if (g?.(), g = null, typeof window > "u" || J(e) !== "device") return;
+  const n = window.matchMedia("(prefers-color-scheme: dark)"), r = () => {
+    T(M("device", n), document.documentElement), window.dispatchEvent(new Event(u));
+  };
+  n.addEventListener("change", r), g = () => n.removeEventListener("change", r);
+}
+function W(e, n) {
+  if (N(e), typeof window > "u" || n !== "device") return;
+  const r = window.matchMedia("(prefers-color-scheme: dark)"), t = () => {
+    T(M("device", r), e);
+  };
+  r.addEventListener("change", t), k.set(e, () => r.removeEventListener("change", t));
+}
+function N(e) {
+  e && (k.get(e)?.(), k.delete(e));
+}
+function E(e, n) {
+  const r = n && "storageKey" in n ? n.storageKey : b, t = n?.target ?? (typeof document > "u" ? null : document.documentElement), i = typeof document > "u" || t == null || t === document.documentElement;
+  if (T(M(e), t), !i) {
+    t && W(t, e);
+    return;
+  }
+  s = e, r != null && typeof localStorage < "u" && localStorage.setItem(r, e), Q(r ?? null), typeof window < "u" && window.dispatchEvent(new Event(u));
+}
+function X(e) {
+  return typeof window > "u" ? () => {
+  } : (window.addEventListener(u, e), () => window.removeEventListener(u, e));
+}
+function D(e, n) {
+  n.modeProp === void 0 && E(e, {
+    target: l(n.target),
+    storageKey: n.storageKey
+  }), n.onModeChange?.(e);
+}
+function K({ mode: e, defaultMode: n = "device", onModeChange: r, storageKey: t = b, target: i, size: z = "md", className: A, "aria-label": C = "Theme", ...H }) {
+  const O = $(X, () => s ?? w(t) ?? n, () => n);
+  v(() => {
+    e === void 0 && E(s ?? w(t) ?? n, {
+      target: l(i),
+      storageKey: t
+    });
+  }, [
+    e,
+    t,
+    i,
+    n
+  ]), v(() => {
+    e !== void 0 && E(e, {
+      target: l(i),
+      storageKey: t
+    });
+  }, [
+    e,
+    t,
+    i
+  ]), v(() => () => {
+    const a = l(i);
+    a && a !== document.documentElement && N(a);
+  }, [i]);
+  const x = e ?? O, S = B[z];
+  return /* @__PURE__ */ h("div", {
+    role: "radiogroup",
+    "aria-label": C,
+    ...H,
+    className: _("ring-pho-interactive inline-flex items-center ring-1 ring-inset", S.track, A),
+    children: p.map(({ value: a, label: R, Icon: q }) => {
+      const f = x === a;
+      return /* @__PURE__ */ h("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": f,
+        "aria-label": R,
+        tabIndex: f ? 0 : -1,
+        onClick: () => D(a, {
+          modeProp: e,
+          storageKey: t,
+          target: i,
+          onModeChange: r
+        }),
+        onKeyDown: (d) => {
+          const o = p.map((m) => m.value), L = o.indexOf(x);
+          let c;
+          if (d.key === "ArrowRight" || d.key === "ArrowDown" ? c = o[(L + 1) % o.length] : d.key === "ArrowLeft" || d.key === "ArrowUp" ? c = o[(L - 1 + o.length) % o.length] : d.key === "Home" ? c = o[0] : d.key === "End" && (c = o[o.length - 1]), !c) return;
+          d.preventDefault(), D(c, {
+            modeProp: e,
+            storageKey: t,
+            target: i,
+            onModeChange: r
+          });
+          const I = d.currentTarget.parentElement?.querySelector(`[aria-label="${p.find((m) => m.value === c)?.label}"]`);
+          I instanceof HTMLElement && I.focus();
+        },
+        className: _("outline-pho-brand inline-flex flex-1 cursor-pointer items-center justify-center transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", f ? "bg-pho-inverse text-pho-inverse" : "text-pho-description hover:text-pho-primary", S.item),
+        children: /* @__PURE__ */ h(q, {
+          "aria-hidden": "true",
+          className: "shrink-0"
+        })
+      }, a);
+    })
+  });
+}
+K.displayName = "ThemeToggle";
+export {
+  b as THEME_STORAGE_KEY,
+  K as ThemeToggle,
+  re as getThemeMode,
+  J as getThemePreference,
+  F as parseThemeMode,
+  M as resolveThemeMode,
+  E as setThemeMode
+};
+
+//# sourceMappingURL=theme-toggle.js.map

package/dist/components/theme-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.js","names":["__iconNode","__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceDesktop.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconMoon.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconSun.mjs","../../src/components/theme-toggle/theme-toggle.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M7 20h10\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M9 16v4\", \"key\": \"svg-2\" }], [\"path\", { \"d\": \"M15 16v4\", \"key\": \"svg-3\" }]];\nconst IconDeviceDesktop = createReactComponent(\"outline\", \"device-desktop\", \"DeviceDesktop\", __iconNode);\n\nexport { __iconNode, IconDeviceDesktop as default };\n//# sourceMappingURL=IconDeviceDesktop.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008\", \"key\": \"svg-0\" }]];\nconst IconMoon = createReactComponent(\"outline\", \"moon\", \"Moon\", __iconNode);\n\nexport { __iconNode, IconMoon as default };\n//# sourceMappingURL=IconMoon.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7\", \"key\": \"svg-1\" }]];\nconst IconSun = createReactComponent(\"outline\", \"sun\", \"Sun\", __iconNode);\n\nexport { __iconNode, IconSun as default };\n//# sourceMappingURL=IconSun.mjs.map\n","import { useEffect, useSyncExternalStore, type HTMLAttributes } from \"react\";\nimport { IconDeviceDesktop, IconMoon, IconSun } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Appearance preference — `device` follows `prefers-color-scheme`; `light` /\n * `dark` force the scheme via `data-mode`.\n */\nexport type ThemeMode = \"device\" | \"light\" | \"dark\";\n\n/** Resolved color-scheme after applying a preference. */\nexport type ResolvedTheme = \"light\" | \"dark\";\n\n/** Default `localStorage` key used by the docs site and this component. */\nexport const THEME_STORAGE_KEY = \"pho-mode\";\n\nconst THEME_CHANGE_EVENT = \"pho-themechange\";\n\nconst OPTIONS = [\n  { value: \"device\" as const, label: \"Device\", Icon: IconDeviceDesktop },\n  { value: \"light\" as const, label: \"Light\", Icon: IconSun },\n  { value: \"dark\" as const, label: \"Dark\", Icon: IconMoon },\n];\n\n// Concentric correction (see /scale): inner = outer − gap, derived from the\n// radius token with calc so it tracks theme changes. Track is `base`; the gap\n// is the track padding (sm/md p-0.5 = 2px, lg p-1 = 4px). Plain round, no\n// squircle (the track carries a ring-inset).\nconst THEME_SIZES = {\n  sm: {\n    track: \"gap-0.5 rounded-base p-0.5\",\n    item: \"size-7 rounded-[calc(var(--radius-base)-2px)] [&>svg]:size-3.5\",\n  },\n  md: {\n    track: \"gap-0.5 rounded-base p-0.5\",\n    item: \"size-8 rounded-[calc(var(--radius-base)-2px)] [&>svg]:size-4\",\n  },\n  lg: {\n    track: \"gap-1 rounded-base p-1\",\n    item: \"size-9 rounded-[calc(var(--radius-base)-4px)] [&>svg]:size-5\",\n  },\n} as const;\n\nexport type ThemeToggleSize = keyof typeof THEME_SIZES;\n\nexport interface ThemeToggleProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"color\" | \"onChange\" | \"defaultValue\"\n> {\n  /** Controlled preference. */\n  mode?: ThemeMode;\n  /** Uncontrolled initial preference. @default \"device\" */\n  defaultMode?: ThemeMode;\n  /** Fired when the user picks a segment. */\n  onModeChange?: (mode: ThemeMode) => void;\n  /**\n   * Persist the preference under this `localStorage` key. Pass `null` to skip\n   * persistence. @default \"pho-mode\"\n   */\n  storageKey?: string | null;\n  /**\n   * Element that receives `data-mode=\"dark\"`. Defaults to\n   * `document.documentElement`.\n   */\n  target?: HTMLElement | null | (() => HTMLElement | null);\n  /** Size variant. @default \"md\" */\n  size?: ThemeToggleSize;\n}\n\n/** Parse a stored preference; unknown / missing values fall back to `device`. */\nexport function parseThemeMode(value: string | null | undefined): ThemeMode {\n  if (value === \"light\" || value === \"dark\" || value === \"device\") return value;\n  return \"device\";\n}\n\n/** Resolve a preference against the OS color-scheme. */\nexport function resolveThemeMode(\n  mode: ThemeMode,\n  query: { matches: boolean } = typeof window !== \"undefined\"\n    ? window.matchMedia(\"(prefers-color-scheme: dark)\")\n    : { matches: false },\n): ResolvedTheme {\n  if (mode === \"light\" || mode === \"dark\") return mode;\n  return query.matches ? \"dark\" : \"light\";\n}\n\nfunction resolveTarget(\n  target?: ThemeToggleProps[\"target\"],\n): HTMLElement | null {\n  if (typeof target === \"function\") return target();\n  if (target !== undefined) return target;\n  return typeof document === \"undefined\" ? null : document.documentElement;\n}\n\n/** Preference mirrored across document-level ThemeToggle instances. */\nlet storedPreference: ThemeMode | null = null;\nlet mediaCleanup: (() => void) | null = null;\n/** Per-target `prefers-color-scheme` listeners (scoped `target` instances). */\nconst targetMediaCleanups = new Map<HTMLElement, () => void>();\n\n/** Drop in-memory preference + media listener (tests / full remounts). */\nexport function clearThemePreference() {\n  storedPreference = null;\n  mediaCleanup?.();\n  mediaCleanup = null;\n  for (const cleanup of targetMediaCleanups.values()) cleanup();\n  targetMediaCleanups.clear();\n}\n\n/** Read a persisted preference, or `null` when nothing is stored. */\nfunction readStoredPreference(storageKey: string | null): ThemeMode | null {\n  if (storageKey == null || typeof localStorage === \"undefined\") return null;\n  const raw = localStorage.getItem(storageKey);\n  if (raw == null) return null;\n  return parseThemeMode(raw);\n}\n\n/** Current document preference (memory, then storage, else `device`). */\nexport function getThemePreference(\n  storageKey: string | null = THEME_STORAGE_KEY,\n): ThemeMode {\n  return storedPreference ?? readStoredPreference(storageKey) ?? \"device\";\n}\n\n/** Read the resolved light/dark mode from an element (or `<html>`). */\nexport function getThemeMode(\n  target: HTMLElement | null = typeof document === \"undefined\"\n    ? null\n    : document.documentElement,\n): ResolvedTheme {\n  return target?.dataset.mode === \"dark\" ? \"dark\" : \"light\";\n}\n\nfunction applyResolved(resolved: ResolvedTheme, target: HTMLElement | null) {\n  if (!target) return;\n  if (resolved === \"dark\") target.dataset.mode = \"dark\";\n  else delete target.dataset.mode;\n}\n\nfunction bindMediaListener(storageKey: string | null) {\n  mediaCleanup?.();\n  mediaCleanup = null;\n  if (typeof window === \"undefined\") return;\n  if (getThemePreference(storageKey) !== \"device\") return;\n\n  const mql = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  const onChange = () => {\n    applyResolved(resolveThemeMode(\"device\", mql), document.documentElement);\n    window.dispatchEvent(new Event(THEME_CHANGE_EVENT));\n  };\n  mql.addEventListener(\"change\", onChange);\n  mediaCleanup = () => mql.removeEventListener(\"change\", onChange);\n}\n\n/** Track OS scheme changes for a scoped target (docs previews, etc.). */\nfunction bindTargetMediaListener(target: HTMLElement, mode: ThemeMode) {\n  unbindTargetMediaListener(target);\n  if (typeof window === \"undefined\" || mode !== \"device\") return;\n\n  const mql = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  const onChange = () => {\n    applyResolved(resolveThemeMode(\"device\", mql), target);\n  };\n  mql.addEventListener(\"change\", onChange);\n  targetMediaCleanups.set(target, () =>\n    mql.removeEventListener(\"change\", onChange),\n  );\n}\n\nfunction unbindTargetMediaListener(target: HTMLElement | null) {\n  if (!target) return;\n  targetMediaCleanups.get(target)?.();\n  targetMediaCleanups.delete(target);\n}\n\n/**\n * Apply an appearance preference: persist it, resolve against the OS when\n * `device`, set `data-mode` on the target, and notify document-level toggles.\n */\nexport function setThemeMode(\n  mode: ThemeMode,\n  options?: {\n    target?: HTMLElement | null;\n    storageKey?: string | null;\n  },\n): void {\n  const storageKey =\n    options && \"storageKey\" in options ? options.storageKey : THEME_STORAGE_KEY;\n  const target =\n    options?.target ??\n    (typeof document === \"undefined\" ? null : document.documentElement);\n  const syncDocument =\n    typeof document === \"undefined\" ||\n    target == null ||\n    target === document.documentElement;\n\n  applyResolved(resolveThemeMode(mode), target);\n\n  if (!syncDocument) {\n    if (target) bindTargetMediaListener(target, mode);\n    return;\n  }\n\n  storedPreference = mode;\n  if (storageKey != null && typeof localStorage !== \"undefined\") {\n    localStorage.setItem(storageKey, mode);\n  }\n  bindMediaListener(storageKey ?? null);\n\n  if (typeof window !== \"undefined\") {\n    window.dispatchEvent(new Event(THEME_CHANGE_EVENT));\n  }\n}\n\nfunction subscribeTheme(onChange: () => void) {\n  if (typeof window === \"undefined\") return () => {};\n  window.addEventListener(THEME_CHANGE_EVENT, onChange);\n  return () => window.removeEventListener(THEME_CHANGE_EVENT, onChange);\n}\n\nfunction selectMode(\n  value: ThemeMode,\n  options: {\n    modeProp?: ThemeMode;\n    storageKey: string | null;\n    target: ThemeToggleProps[\"target\"];\n    onModeChange?: (mode: ThemeMode) => void;\n  },\n) {\n  if (options.modeProp === undefined) {\n    setThemeMode(value, {\n      target: resolveTarget(options.target),\n      storageKey: options.storageKey,\n    });\n  }\n  options.onModeChange?.(value);\n}\n\n/**\n * Segmented appearance control — Device / Light / Dark. Forces\n * `data-mode=\"dark\"` (or clears it) so Pho's `light-dark()` tokens follow\n * `color-scheme`. `device` tracks `prefers-color-scheme`. Persists under\n * `pho-mode` by default; pair with a blocking `<head>` script to avoid a\n * flash (see docs).\n */\nexport function ThemeToggle({\n  mode: modeProp,\n  defaultMode = \"device\",\n  onModeChange,\n  storageKey = THEME_STORAGE_KEY,\n  target,\n  size = \"md\",\n  className,\n  \"aria-label\": ariaLabel = \"Theme\",\n  ...props\n}: ThemeToggleProps) {\n  const storeMode = useSyncExternalStore(\n    subscribeTheme,\n    () => storedPreference ?? readStoredPreference(storageKey) ?? defaultMode,\n    () => defaultMode,\n  );\n\n  // Uncontrolled — hydrate from storage (or `defaultMode`) on mount.\n  useEffect(() => {\n    if (modeProp !== undefined) return;\n    const initial =\n      storedPreference ?? readStoredPreference(storageKey) ?? defaultMode;\n    setThemeMode(initial, {\n      target: resolveTarget(target),\n      storageKey,\n    });\n  }, [modeProp, storageKey, target, defaultMode]);\n\n  // Controlled — keep the target in sync with the prop.\n  useEffect(() => {\n    if (modeProp === undefined) return;\n    setThemeMode(modeProp, {\n      target: resolveTarget(target),\n      storageKey,\n    });\n  }, [modeProp, storageKey, target]);\n\n  // Drop scoped-target media listeners on unmount (document listener is shared).\n  useEffect(() => {\n    return () => {\n      const el = resolveTarget(target);\n      if (el && el !== document.documentElement) {\n        unbindTargetMediaListener(el);\n      }\n    };\n  }, [target]);\n\n  const mode = modeProp ?? storeMode;\n  const sizes = THEME_SIZES[size];\n\n  return (\n    // Segmented control: styled buttons with radiogroup semantics. Native\n    // `<input type=\"radio\">` cannot express the inverse-chip track layout.\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      {...props}\n      className={cn(\n        \"ring-pho-interactive inline-flex items-center ring-1 ring-inset\",\n        sizes.track,\n        className,\n      )}\n    >\n      {OPTIONS.map(({ value, label, Icon }) => {\n        const selected = mode === value;\n        return (\n          <button\n            key={value}\n            type=\"button\"\n            role=\"radio\" // oxlint-disable-line jsx-a11y/prefer-tag-over-role -- segment needs button chrome\n            aria-checked={selected}\n            aria-label={label}\n            tabIndex={selected ? 0 : -1}\n            onClick={() =>\n              selectMode(value, { modeProp, storageKey, target, onModeChange })\n            }\n            onKeyDown={(event) => {\n              const order = OPTIONS.map((o) => o.value);\n              const index = order.indexOf(mode);\n              let next: ThemeMode | undefined;\n              if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n                next = order[(index + 1) % order.length];\n              } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n                next = order[(index - 1 + order.length) % order.length];\n              } else if (event.key === \"Home\") {\n                next = order[0];\n              } else if (event.key === \"End\") {\n                next = order[order.length - 1];\n              }\n              if (!next) return;\n              event.preventDefault();\n              selectMode(next, { modeProp, storageKey, target, onModeChange });\n              const el = event.currentTarget.parentElement?.querySelector(\n                `[aria-label=\"${OPTIONS.find((o) => o.value === next)?.label}\"]`,\n              );\n              if (el instanceof HTMLElement) el.focus();\n            }}\n            className={cn(\n              \"outline-pho-brand inline-flex flex-1 cursor-pointer items-center justify-center transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\",\n              // No hover wash — in a segmented control the only filled element\n              // is the selected chip. Unselected segments rest at the dim\n              // description ink and jump to primary on hover for a clear cue.\n              selected\n                ? \"bg-pho-inverse text-pho-inverse\"\n                : \"text-pho-description hover:text-pho-primary\",\n              sizes.item,\n            )}\n          >\n            <Icon aria-hidden=\"true\" className=\"shrink-0\" />\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nThemeToggle.displayName = \"ThemeToggle\";\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}

package/dist/components/toast.js

@@ -1,60 +1,60 @@
 "use client";
-import { t as a } from "../chunks/cn-7uGUzCOM.js";
+import { t as r } from "../chunks/cn-DTiB6ek_.js";
 import "react";
-import { jsx as o } from "react/jsx-runtime";
-import { Toast as r } from "@base-ui/react/toast";
-var n = r.Provider, s = r.Portal, i = r.Action, l = r.useToastManager, c = r.createToastManager;
+import { jsx as a } from "react/jsx-runtime";
+import { Toast as o } from "@base-ui/react/toast";
+var n = o.Provider, s = o.Portal, i = o.Action, l = o.useToastManager, c = o.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),
+  return /* @__PURE__ */ a(o.Viewport, {
+    className: r("fixed right-4 bottom-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2 outline-none", 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-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),
+  return /* @__PURE__ */ a(o.Root, {
+    className: r("bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base relative w-full 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
   });
 }
 function m({ className: t, ...e }) {
-  return /* @__PURE__ */ o(r.Content, {
-    className: a("flex flex-col gap-1 p-4 pr-10", t),
+  return /* @__PURE__ */ a(o.Content, {
+    className: r("flex flex-col gap-1 p-4 pr-10", t),
     ...e
   });
 }
-function f({ className: t, ...e }) {
-  return /* @__PURE__ */ o(r.Title, {
-    className: a("text-pho-primary text-sm font-semibold", t),
+function d({ className: t, ...e }) {
+  return /* @__PURE__ */ a(o.Title, {
+    className: r("text-pho-primary text-base font-medium", t),
     ...e
   });
 }
-function g({ className: t, ...e }) {
-  return /* @__PURE__ */ o(r.Description, {
-    className: a("text-pho-tertiary text-sm", t),
+function f({ className: t, ...e }) {
+  return /* @__PURE__ */ a(o.Description, {
+    className: r("text-pho-description text-base", 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-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),
+function g({ className: t, ...e }) {
+  return /* @__PURE__ */ a(o.Close, {
+    className: r("text-pho-secondary hover:text-pho-secondary-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-sm transition focus-visible:outline-2 [&>svg]:size-4", t),
     ...e
   });
 }
-var w = {
+var b = {
   Provider: n,
   Portal: s,
   Viewport: p,
   Root: u,
   Content: m,
-  Title: f,
-  Description: g,
-  Close: d,
+  Title: d,
+  Description: f,
+  Close: g,
   Action: i,
   useToastManager: l,
   createToastManager: c
 };
 export {
-  w as Toast
+  b as Toast
 };
 
 //# sourceMappingURL=toast.js.map

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        // 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"}
+{"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        \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base relative w-full 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-base font-medium\", 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-description text-base\", 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-pho-secondary hover:text-pho-secondary-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-sm 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,+HACA,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,kCAAkC,CAAS;AAAA,IACzD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC3E,SACE,gBAAA,EAAC,EAAU,OAAX;AAAA,IACE,WAAW,EACT,+OACA,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-7uGUzCOM.js";
+import { t as r } from "../chunks/cn-DTiB6ek_.js";
 import "react";
 import { jsx as p } from "react/jsx-runtime";
 import { ToggleGroup as t } from "@base-ui/react/toggle-group";