@photon-ai/pho-ui 0.3.0 → 0.4.0

package/dist/chunks/IconX-pZ9vrtSr.js

@@ -0,0 +1,14 @@
+"use client";
+import { t as e } from "./createReactComponent-BqCmnqfX.js";
+var t = [["path", {
+  d: "M18 6l-12 12",
+  key: "svg-0"
+}], ["path", {
+  d: "M6 6l12 12",
+  key: "svg-1"
+}]], a = e("outline", "x", "X", t);
+export {
+  a as t
+};
+
+//# sourceMappingURL=IconX-pZ9vrtSr.js.map

package/dist/chunks/IconX-pZ9vrtSr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconX-pZ9vrtSr.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs"],"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\": \"M18 6l-12 12\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M6 6l12 12\", \"key\": \"svg-1\" }]];\nconst IconX = createReactComponent(\"outline\", \"x\", \"X\", __iconNode);\n\nexport { __iconNode, IconX as default };\n//# sourceMappingURL=IconX.mjs.map\n"],"x_google_ignoreList":[0],"mappings":";;AASA,IAAM,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAgB,KAAO;AAAQ,CAAC,GAAG,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAc,KAAO;AAAQ,CAAC,CAAC,GAChH,IAAQ,EAAqB,WAAW,KAAK,KAAK,CAAU"}

package/dist/chunks/{close-button-DKaNIndU.js → close-button-CRiiwy6K.js}

@@ -1,23 +1,22 @@
 "use client";
 import { t as r } from "./cn-7uGUzCOM.js";
 import { t as n } from "./resolve-variant-CcD8iG5l.js";
+import { t as a } from "./IconX-pZ9vrtSr.js";
 import "react";
 import { jsx as e } from "react/jsx-runtime";
-import { X as a } from "@phosphor-icons/react";
 var l = {
   sm: { classes: "size-9 *:size-5" },
   md: { classes: "size-10 *:size-5" },
   lg: { classes: "size-11 *:size-6" }
 };
-function u({ size: t = "sm", label: s, className: i, ...o }) {
+function u({ size: s = "sm", label: t, className: i, ...o }) {
   return /* @__PURE__ */ e("button", {
     type: "button",
-    "aria-label": s || "Close",
+    "aria-label": t || "Close",
     ...o,
-    className: r("squircle text-fg-pho-quaternary outline-pho-brand hover:bg-pho-ghost-hover hover:text-fg-pho-quaternary-hover inline-flex cursor-pointer items-center justify-center rounded-md p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", n(l, t), i),
+    className: r("squircle text-fg-pho-quaternary outline-pho-brand hover:bg-pho-ghost-hover hover:text-fg-pho-quaternary-hover inline-flex cursor-pointer items-center justify-center rounded-md p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", n(l, s), i),
     children: /* @__PURE__ */ e(a, {
       "aria-hidden": "true",
-      weight: "bold",
       className: "transition-inherit-all shrink-0"
     })
   });
@@ -27,4 +26,4 @@ export {
   u as t
 };
 
-//# sourceMappingURL=close-button-DKaNIndU.js.map
+//# sourceMappingURL=close-button-CRiiwy6K.js.map

package/dist/chunks/close-button-CRiiwy6K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close-button-CRiiwy6K.js","names":[],"sources":["../../src/components/button/close-button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes } from \"react\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\nconst CLOSE_SIZES = {\n  sm: { classes: \"size-9 *:size-5\" },\n  md: { classes: \"size-10 *:size-5\" },\n  lg: { classes: \"size-11 *:size-6\" },\n} satisfies VariantMap;\n\nexport interface CloseButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"color\"\n> {\n  /** Size variant. @default \"sm\" */\n  size?: keyof typeof CLOSE_SIZES;\n  /** Accessible label. @default \"Close\" */\n  label?: string;\n}\n\n/**\n * Icon-only dismiss control — a squircle chip that fills on hover. Adapts to\n * light/dark automatically via semantic tokens. Used by Dialog and dismissible\n * surfaces.\n */\nexport function CloseButton({\n  size = \"sm\",\n  label,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label || \"Close\"}\n      {...props}\n      className={cn(\n        \"squircle text-fg-pho-quaternary outline-pho-brand hover:bg-pho-ghost-hover hover:text-fg-pho-quaternary-hover inline-flex cursor-pointer items-center justify-center rounded-md p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\",\n        resolveVariant(CLOSE_SIZES, size),\n        className,\n      )}\n    >\n      <IconX aria-hidden=\"true\" className=\"transition-inherit-all shrink-0\" />\n    </button>\n  );\n}\n\nCloseButton.displayName = \"CloseButton\";\n"],"mappings":";;;;;;AAKA,IAAM,IAAc;AAAA,EAClB,IAAI,EAAE,SAAS,kBAAkB;AAAA,EACjC,IAAI,EAAE,SAAS,mBAAmB;AAAA,EAClC,IAAI,EAAE,SAAS,mBAAmB;AACpC;AAiBA,SAAgB,EAAY,EAC1B,MAAA,IAAO,MACP,OAAA,GACA,WAAA,GACA,GAAG,EAAA,GACgB;AACnB,SACE,gBAAA,EAAC,UAAD;AAAA,IACE,MAAK;AAAA,IACL,cAAY,KAAS;AAAA,IACrB,GAAI;AAAA,IACJ,WAAW,EACT,kRACA,EAAe,GAAa,CAAI,GAChC,CACF;AAAA,cAEA,gBAAA,EAAC,GAAD;AAAA,MAAO,eAAY;AAAA,MAAO,WAAU;AAAA,IAAmC,CAAA;AAAA,EACjE,CAAA;AAEZ;AAEA,EAAY,cAAc"}

package/dist/chunks/createReactComponent-BqCmnqfX.js

@@ -0,0 +1,50 @@
+"use client";
+import { createElement as e, forwardRef as g } from "react";
+var k = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+}, v = (r, s, a, w) => {
+  const o = g(({ color: i = "currentColor", size: n = 24, stroke: h = 2, title: l, className: d, children: t, ...m }, u) => e("svg", {
+    ref: u,
+    ...k[r],
+    width: n,
+    height: n,
+    className: [
+      "tabler-icon",
+      `tabler-icon-${s}`,
+      d
+    ].join(" "),
+    ...r === "filled" ? { fill: i } : {
+      strokeWidth: h,
+      stroke: i
+    },
+    ...m
+  }, [
+    l && e("title", { key: "svg-title" }, l),
+    ...w.map(([c, f]) => e(c, f)),
+    ...Array.isArray(t) ? t : [t]
+  ]));
+  return o.displayName = `${a}`, o;
+};
+export {
+  v as t
+};
+
+//# sourceMappingURL=createReactComponent-BqCmnqfX.js.map

package/dist/chunks/createReactComponent-BqCmnqfX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createReactComponent-BqCmnqfX.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs"],"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\nvar defaultAttributes = {\n  outline: {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: 24,\n    height: 24,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 2,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  },\n  filled: {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: 24,\n    height: 24,\n    viewBox: \"0 0 24 24\",\n    fill: \"currentColor\",\n    stroke: \"none\"\n  }\n};\n\nexport { defaultAttributes as default };\n//# sourceMappingURL=defaultAttributes.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 { forwardRef, createElement } from 'react';\nimport defaultAttributes from './defaultAttributes.mjs';\n\nconst createReactComponent = (type, iconName, iconNamePascal, iconNode) => {\n  const Component = forwardRef(\n    ({ color = \"currentColor\", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(\n      \"svg\",\n      {\n        ref,\n        ...defaultAttributes[type],\n        width: size,\n        height: size,\n        className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(\" \"),\n        ...type === \"filled\" ? {\n          fill: color\n        } : {\n          strokeWidth: stroke,\n          stroke: color\n        },\n        ...rest\n      },\n      [\n        title && createElement(\"title\", { key: \"svg-title\" }, title),\n        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),\n        ...Array.isArray(children) ? children : [children]\n      ]\n    )\n  );\n  Component.displayName = `${iconNamePascal}`;\n  return Component;\n};\n\nexport { createReactComponent as default };\n//# sourceMappingURL=createReactComponent.mjs.map\n"],"x_google_ignoreList":[0,1],"mappings":";;AAOA,IAAI,IAAoB;AAAA,EACtB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF,GCjBM,IAAA,CAAwB,GAAM,GAAU,GAAgB,MAAa;AACzE,QAAM,IAAY,EAAA,CACf,EAAE,OAAA,IAAQ,gBAAgB,MAAA,IAAO,IAAI,QAAA,IAAS,GAAG,OAAA,GAAO,WAAA,GAAW,UAAA,GAAU,GAAG,EAAA,GAAQ,MAAQ,EAC/F,OACA;AAAA,IACE,KAAA;AAAA,IACA,GAAG,EAAkB,CAAA;AAAA,IACrB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MAAC;AAAA,MAAe,eAAe,CAAA;AAAA,MAAY;AAAA,IAAS,EAAE,KAAK,GAAG;AAAA,IACzE,GAAG,MAAS,WAAW,EACrB,MAAM,EACR,IAAI;AAAA,MACF,aAAa;AAAA,MACb,QAAQ;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GACA;AAAA,IACE,KAAS,EAAc,SAAS,EAAE,KAAK,YAAY,GAAG,CAAK;AAAA,IAC3D,GAAG,EAAS,IAAA,CAAK,CAAC,GAAK,CAAA,MAAW,EAAc,GAAK,CAAK,CAAC;AAAA,IAC3D,GAAG,MAAM,QAAQ,CAAQ,IAAI,IAAW,CAAC,CAAQ;AAAA,EACnD,CACF,CACF;AACA,SAAA,EAAU,cAAc,GAAG,CAAA,IACpB;AACT"}

package/dist/chunks/{dialog-CyyL5VCc.js → dialog-sTOaOEB2.js}

@@ -1,6 +1,6 @@
 "use client";
 import { t as n } from "./cn-7uGUzCOM.js";
-import { t as f } from "./close-button-DKaNIndU.js";
+import { t as f } from "./close-button-CRiiwy6K.js";
 import "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Dialog as r } from "@base-ui/react/dialog";
@@ -60,4 +60,4 @@ export {
   T as t
 };
 
-//# sourceMappingURL=dialog-CyyL5VCc.js.map
+//# sourceMappingURL=dialog-sTOaOEB2.js.map

package/dist/chunks/{dialog-CyyL5VCc.js.map → dialog-sTOaOEB2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-CyyL5VCc.js","names":[],"sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType, type ReactNode } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../../utils/cn\";\nimport { CloseButton } from \"../button/close-button\";\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 = BaseDialog.Root;\nconst Trigger = BaseDialog.Trigger;\nconst Portal = BaseDialog.Portal;\nconst Close = BaseDialog.Close;\n\nfunction Backdrop({\n  className,\n  ...props\n}: StyledProps<typeof BaseDialog.Backdrop>) {\n  return (\n    <BaseDialog.Backdrop\n      className={cn(\n        \"bg-pho-overlay fixed inset-0 z-50 backdrop-blur-[2px] transition-opacity duration-200 ease-out\",\n        \"data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>) {\n  return (\n    <BaseDialog.Popup\n      className={cn(\n        // Floating layer: bg-pho-primary + border-pho-secondary hairline, elevation kept.\n        \"squircle border-pho-secondary bg-pho-primary shadow-pho-xl fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl border outline-none\",\n        \"transition-all duration-200 ease-out\",\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 Title({ className, ...props }: StyledProps<typeof BaseDialog.Title>) {\n  return (\n    <BaseDialog.Title\n      className={cn(\"text-pho-primary text-lg font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseDialog.Description>) {\n  return (\n    <BaseDialog.Description\n      className={cn(\"text-pho-tertiary text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\ninterface ContentProps extends Omit<\n  StyledProps<typeof BaseDialog.Popup>,\n  \"title\"\n> {\n  /** Heading rendered in the panel header. */\n  title?: ReactNode;\n  /** Supporting text under the title. */\n  description?: ReactNode;\n  /** Show the top-right close button. @default true */\n  showClose?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Convenience panel: renders the portal, backdrop, and styled popup with an\n * optional header (title/description + close). For full control, compose the\n * parts directly (`Dialog.Portal` / `Dialog.Backdrop` / `Dialog.Popup`).\n */\nfunction Content({\n  title,\n  description,\n  showClose = true,\n  children,\n  className,\n  ...props\n}: ContentProps) {\n  const hasHeader = Boolean(title || description || showClose);\n  return (\n    <Portal>\n      <Backdrop />\n      <Popup className={className} {...props}>\n        {hasHeader && (\n          <div className=\"flex items-start justify-between gap-4 px-6 pt-5\">\n            <div className=\"flex flex-col gap-1\">\n              {title && <Title>{title}</Title>}\n              {description && <Description>{description}</Description>}\n            </div>\n            {showClose && <Close render={<CloseButton />} />}\n          </div>\n        )}\n        <div className=\"px-6 py-5\">{children}</div>\n      </Popup>\n    </Portal>\n  );\n}\n\n/**\n * Modal dialog built on Base UI `Dialog`. Controlled or uncontrolled via\n * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`).\n */\nexport const Dialog = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Popup,\n  Title,\n  Description,\n  Close,\n  Content,\n};\n"],"mappings":";;;;;;AAaA,IAAM,IAAO,EAAW,MAClB,IAAU,EAAW,SACrB,IAAS,EAAW,QACpB,IAAQ,EAAW;AAEzB,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACuC;AAC1C,SACE,gBAAA,EAAC,EAAW,UAAZ;AAAA,IACE,WAAW,EACT,kGACA,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,EAET,yMACA,wCACA,kEACA,8DACA,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,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAW,aAAZ;AAAA,IACE,WAAW,EAAG,6BAA6B,CAAS;AAAA,IACpD,GAAI;AAAA,EACL,CAAA;AAEL;AAoBA,SAAS,EAAQ,EACf,OAAA,GACA,aAAA,GACA,WAAA,IAAY,IACZ,UAAA,GACA,WAAA,GACA,GAAG,EAAA,GACY;AAEf,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,CAAW,CAAA,GACX,gBAAA,EAAC,GAAD;AAAA,IAAkB,WAAA;AAAA,IAAW,GAAI;AAAA,cAAjC,CAJc,GAAQ,KAAS,KAAe,MAM1C,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,gBAAf,CACE,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBAAf,CACG,KAAS,gBAAA,EAAC,GAAD,EAAA,UAAQ,EAAa,CAAA,GAC9B,KAAe,gBAAA,EAAC,GAAD,EAAA,UAAc,EAAyB,CAAA,CACpD;AAAA,UACJ,KAAa,gBAAA,EAAC,GAAD,EAAO,QAAQ,gBAAA,EAAC,GAAD,CAAc,CAAA,EAAI,CAAA,CAC5C;AAAA,QAEP,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,MAAa,UAAA;AAAA,IAAc,CAAA,CACrC;AAAA,IACD,EAAA,CAAA;AAEZ;AAMA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AACF"}
+{"version":3,"file":"dialog-sTOaOEB2.js","names":[],"sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType, type ReactNode } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../../utils/cn\";\nimport { CloseButton } from \"../button/close-button\";\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 = BaseDialog.Root;\nconst Trigger = BaseDialog.Trigger;\nconst Portal = BaseDialog.Portal;\nconst Close = BaseDialog.Close;\n\nfunction Backdrop({\n  className,\n  ...props\n}: StyledProps<typeof BaseDialog.Backdrop>) {\n  return (\n    <BaseDialog.Backdrop\n      className={cn(\n        \"bg-pho-overlay fixed inset-0 z-50 backdrop-blur-[2px] transition-opacity duration-200 ease-out\",\n        \"data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>) {\n  return (\n    <BaseDialog.Popup\n      className={cn(\n        // Floating layer: bg-pho-primary + border-pho-secondary hairline, elevation kept.\n        \"squircle border-pho-secondary bg-pho-primary shadow-pho-xl fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl border outline-none\",\n        \"transition-all duration-200 ease-out\",\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 Title({ className, ...props }: StyledProps<typeof BaseDialog.Title>) {\n  return (\n    <BaseDialog.Title\n      className={cn(\"text-pho-primary text-lg font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Description({\n  className,\n  ...props\n}: StyledProps<typeof BaseDialog.Description>) {\n  return (\n    <BaseDialog.Description\n      className={cn(\"text-pho-tertiary text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\ninterface ContentProps extends Omit<\n  StyledProps<typeof BaseDialog.Popup>,\n  \"title\"\n> {\n  /** Heading rendered in the panel header. */\n  title?: ReactNode;\n  /** Supporting text under the title. */\n  description?: ReactNode;\n  /** Show the top-right close button. @default true */\n  showClose?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Convenience panel: renders the portal, backdrop, and styled popup with an\n * optional header (title/description + close). For full control, compose the\n * parts directly (`Dialog.Portal` / `Dialog.Backdrop` / `Dialog.Popup`).\n */\nfunction Content({\n  title,\n  description,\n  showClose = true,\n  children,\n  className,\n  ...props\n}: ContentProps) {\n  const hasHeader = Boolean(title || description || showClose);\n  return (\n    <Portal>\n      <Backdrop />\n      <Popup className={className} {...props}>\n        {hasHeader && (\n          <div className=\"flex items-start justify-between gap-4 px-6 pt-5\">\n            <div className=\"flex flex-col gap-1\">\n              {title && <Title>{title}</Title>}\n              {description && <Description>{description}</Description>}\n            </div>\n            {showClose && <Close render={<CloseButton />} />}\n          </div>\n        )}\n        <div className=\"px-6 py-5\">{children}</div>\n      </Popup>\n    </Portal>\n  );\n}\n\n/**\n * Modal dialog built on Base UI `Dialog`. Controlled or uncontrolled via\n * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`).\n */\nexport const Dialog = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Popup,\n  Title,\n  Description,\n  Close,\n  Content,\n};\n"],"mappings":";;;;;;AAaA,IAAM,IAAO,EAAW,MAClB,IAAU,EAAW,SACrB,IAAS,EAAW,QACpB,IAAQ,EAAW;AAEzB,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACuC;AAC1C,SACE,gBAAA,EAAC,EAAW,UAAZ;AAAA,IACE,WAAW,EACT,kGACA,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,EAET,yMACA,wCACA,kEACA,8DACA,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,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAW,aAAZ;AAAA,IACE,WAAW,EAAG,6BAA6B,CAAS;AAAA,IACpD,GAAI;AAAA,EACL,CAAA;AAEL;AAoBA,SAAS,EAAQ,EACf,OAAA,GACA,aAAA,GACA,WAAA,IAAY,IACZ,UAAA,GACA,WAAA,GACA,GAAG,EAAA,GACY;AAEf,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,CAAW,CAAA,GACX,gBAAA,EAAC,GAAD;AAAA,IAAkB,WAAA;AAAA,IAAW,GAAI;AAAA,cAAjC,CAJc,GAAQ,KAAS,KAAe,MAM1C,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,gBAAf,CACE,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBAAf,CACG,KAAS,gBAAA,EAAC,GAAD,EAAA,UAAQ,EAAa,CAAA,GAC9B,KAAe,gBAAA,EAAC,GAAD,EAAA,UAAc,EAAyB,CAAA,CACpD;AAAA,UACJ,KAAa,gBAAA,EAAC,GAAD,EAAO,QAAQ,gBAAA,EAAC,GAAD,CAAc,CAAA,EAAI,CAAA,CAC5C;AAAA,QAEP,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,MAAa,UAAA;AAAA,IAAc,CAAA,CACrC;AAAA,IACD,EAAA,CAAA;AAEZ;AAMA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AACF"}

package/dist/chunks/input-e1k2gbET.js

@@ -0,0 +1,102 @@
+"use client";
+import { t as r } from "./cn-7uGUzCOM.js";
+import { t as n } from "./createReactComponent-BqCmnqfX.js";
+import { useState as E } from "react";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { Field as s } from "@base-ui/react/field";
+var k = [
+  ["path", {
+    d: "M10.585 10.587a2 2 0 0 0 2.829 2.828",
+    key: "svg-0"
+  }],
+  ["path", {
+    d: "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87",
+    key: "svg-1"
+  }],
+  ["path", {
+    d: "M3 3l18 18",
+    key: "svg-2"
+  }]
+], D = n("outline", "eye-off", "EyeOff", k), S = [["path", {
+  d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0",
+  key: "svg-0"
+}], ["path", {
+  d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6",
+  key: "svg-1"
+}]], C = n("outline", "eye", "Eye", S), L = [["path", {
+  d: "M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z",
+  key: "svg-0"
+}]], M = n("filled", "alert-circle-filled", "AlertCircleFilled", L), z = {
+  sm: "px-3 py-2 text-sm",
+  md: "px-3 py-2 text-md",
+  lg: "px-3.5 py-2.5 text-md"
+}, O = {
+  sm: "pl-9",
+  md: "pl-10",
+  lg: "pl-10.5"
+}, R = {
+  sm: "left-3 size-4",
+  md: "left-3 size-5",
+  lg: "left-3.5 size-5"
+}, q = {
+  sm: "rounded-lg",
+  md: "rounded-lg",
+  lg: "squircle rounded-xl"
+}, F = {
+  sm: "autofill:rounded-lg",
+  md: "autofill:rounded-lg",
+  lg: "squircle autofill:rounded-xl"
+};
+function P({ label: d, hint: c, size: t = "md", invalid: a, icon: i, labelTrailing: f, disabled: g, required: p, type: m = "text", className: h, wrapperClassName: v, id: x, ref: y, ...b }) {
+  const [u, N] = E(!1), l = m === "password", I = l && u ? "text" : m, _ = !!i, w = l || a;
+  return /* @__PURE__ */ o(s.Root, {
+    disabled: g,
+    className: "group/field flex w-full flex-col gap-1.5",
+    children: [
+      d && /* @__PURE__ */ o("div", {
+        className: "flex items-center justify-between gap-2",
+        children: [/* @__PURE__ */ o(s.Label, {
+          className: "text-pho-secondary flex cursor-default items-center gap-0.5 text-sm font-medium",
+          children: [d, p && /* @__PURE__ */ e("span", {
+            className: "text-pho-brand",
+            children: "*"
+          })]
+        }), f]
+      }),
+      /* @__PURE__ */ o("div", {
+        "data-invalid": a || void 0,
+        className: r("bg-pho-primary ring-pho-primary relative flex w-full items-center ring-1 transition-shadow duration-100 ease-linear ring-inset", q[t], "has-[input:focus-visible]:ring-pho-brand has-[input:focus-visible]:ring-2", "data-[invalid]:ring-pho-error-subtle data-[invalid]:has-[input:focus-visible]:ring-pho-error", "group-data-[disabled]/field:cursor-not-allowed group-data-[disabled]/field:opacity-50", v),
+        children: [
+          i && /* @__PURE__ */ e(i, { className: r("text-fg-pho-quaternary pointer-events-none absolute", R[t]) }),
+          /* @__PURE__ */ e(s.Control, {
+            ref: y,
+            id: x,
+            type: I,
+            required: p,
+            ...b,
+            className: r("text-pho-primary placeholder:text-pho-placeholder m-0 w-full bg-transparent outline-none disabled:cursor-not-allowed", z[t], F[t], _ && O[t], w && "pr-9", h)
+          }),
+          a && !l && /* @__PURE__ */ e(M, { className: "text-fg-pho-error pointer-events-none absolute right-3 size-4" }),
+          l && /* @__PURE__ */ e("button", {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": "Toggle password visibility",
+            onClick: () => N((A) => !A),
+            className: "text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover absolute right-3 flex cursor-pointer items-center transition duration-100 ease-linear focus:outline-none",
+            children: u ? /* @__PURE__ */ e(D, { className: "size-4" }) : /* @__PURE__ */ e(C, { className: "size-4" })
+          })
+        ]
+      }),
+      c && /* @__PURE__ */ e(s.Description, {
+        className: r("text-pho-tertiary text-sm", a && "text-pho-error"),
+        children: c
+      })
+    ]
+  });
+}
+P.displayName = "Input";
+export {
+  P as t
+};
+
+//# sourceMappingURL=input-e1k2gbET.js.map

package/dist/chunks/input-e1k2gbET.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-e1k2gbET.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/IconEyeOff.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconEye.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertCircleFilled.mjs","../../src/components/input/input.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\": \"M10.585 10.587a2 2 0 0 0 2.829 2.828\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M3 3l18 18\", \"key\": \"svg-2\" }]];\nconst IconEyeOff = createReactComponent(\"outline\", \"eye-off\", \"EyeOff\", __iconNode);\n\nexport { __iconNode, IconEyeOff as default };\n//# sourceMappingURL=IconEyeOff.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\": \"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\", \"key\": \"svg-1\" }]];\nconst IconEye = createReactComponent(\"outline\", \"eye\", \"Eye\", __iconNode);\n\nexport { __iconNode, IconEye as default };\n//# sourceMappingURL=IconEye.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 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z\", \"key\": \"svg-0\" }]];\nconst IconAlertCircleFilled = createReactComponent(\"filled\", \"alert-circle-filled\", \"AlertCircleFilled\", __iconNode);\n\nexport { __iconNode, IconAlertCircleFilled as default };\n//# sourceMappingURL=IconAlertCircleFilled.mjs.map\n","import {\n  useState,\n  type ComponentType,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport {\n  IconAlertCircleFilled,\n  IconEye,\n  IconEyeOff,\n} from \"@tabler/icons-react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { cn } from \"../../utils/cn\";\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\nconst SIZE_PAD: Record<InputSize, string> = {\n  sm: \"px-3 py-2 text-sm\",\n  md: \"px-3 py-2 text-md\",\n  lg: \"px-3.5 py-2.5 text-md\",\n};\nconst LEADING_PAD: Record<InputSize, string> = {\n  sm: \"pl-9\",\n  md: \"pl-10\",\n  lg: \"pl-10.5\",\n};\nconst LEADING_ICON_POS: Record<InputSize, string> = {\n  sm: \"left-3 size-4\",\n  md: \"left-3 size-5\",\n  lg: \"left-3.5 size-5\",\n};\n// Wrapper corner radius per size. `lg` steps up to 12px with `squircle`\n// superellipse smoothing (the ring is a box-shadow on this wrapper, so it\n// follows the border-radius automatically); `sm`/`md` keep the 8px default.\nconst SIZE_RADIUS: Record<InputSize, string> = {\n  sm: \"rounded-lg\",\n  md: \"rounded-lg\",\n  lg: \"squircle rounded-xl\",\n};\n// Match the wrapper radius on the inner input's autofill background so the\n// browser's autofill fill doesn't square off the wrapper's rounded corners.\nconst SIZE_AUTOFILL_RADIUS: Record<InputSize, string> = {\n  sm: \"autofill:rounded-lg\",\n  md: \"autofill:rounded-lg\",\n  lg: \"squircle autofill:rounded-xl\",\n};\n\nexport interface InputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n> {\n  /** Field label (associated for accessibility). */\n  label?: ReactNode;\n  /** Helper text below the field; rendered in the error color when `invalid`. */\n  hint?: ReactNode;\n  /** Size variant. @default \"md\" */\n  size?: InputSize;\n  /** Render the invalid state (ring + icon + error-colored hint). */\n  invalid?: boolean;\n  /** Leading icon component (e.g. a Tabler icon). */\n  icon?: ComponentType<{ className?: string }>;\n  /** Node rendered at the right edge of the label row (e.g. \"Forgot?\"). */\n  labelTrailing?: ReactNode;\n  /** Class applied to the input wrapper. */\n  wrapperClassName?: string;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * Text input built on Base UI `Field` (label/description a11y wiring) with\n * Pho's bordered surface, leading icon, invalid state, and a built-in password\n * reveal toggle.\n */\nexport function Input({\n  label,\n  hint,\n  size = \"md\",\n  invalid,\n  icon: Icon,\n  labelTrailing,\n  disabled,\n  required,\n  type = \"text\",\n  className,\n  wrapperClassName,\n  id,\n  ref,\n  ...props\n}: InputProps) {\n  const [reveal, setReveal] = useState(false);\n  const isPassword = type === \"password\";\n  const resolvedType = isPassword && reveal ? \"text\" : type;\n  const hasLeadingIcon = Boolean(Icon);\n  const hasTrailingIcon = isPassword || invalid;\n\n  return (\n    <Field.Root\n      disabled={disabled}\n      className=\"group/field flex w-full flex-col gap-1.5\"\n    >\n      {label && (\n        <div className=\"flex items-center justify-between gap-2\">\n          <Field.Label className=\"text-pho-secondary flex cursor-default items-center gap-0.5 text-sm font-medium\">\n            {label}\n            {required && <span className=\"text-pho-brand\">*</span>}\n          </Field.Label>\n          {labelTrailing}\n        </div>\n      )}\n\n      <div\n        data-invalid={invalid || undefined}\n        className={cn(\n          // Flat field surface — hairline ring only; elevation shadows are\n          // reserved for floating layers (menus/popovers/dialogs).\n          \"bg-pho-primary ring-pho-primary relative flex w-full items-center ring-1 transition-shadow duration-100 ease-linear ring-inset\",\n          SIZE_RADIUS[size],\n          \"has-[input:focus-visible]:ring-pho-brand has-[input:focus-visible]:ring-2\",\n          \"data-[invalid]:ring-pho-error-subtle data-[invalid]:has-[input:focus-visible]:ring-pho-error\",\n          \"group-data-[disabled]/field:cursor-not-allowed group-data-[disabled]/field:opacity-50\",\n          wrapperClassName,\n        )}\n      >\n        {Icon && (\n          <Icon\n            className={cn(\n              \"text-fg-pho-quaternary pointer-events-none absolute\",\n              LEADING_ICON_POS[size],\n            )}\n          />\n        )}\n\n        <Field.Control\n          ref={ref}\n          id={id}\n          type={resolvedType}\n          required={required}\n          {...props}\n          className={cn(\n            \"text-pho-primary placeholder:text-pho-placeholder m-0 w-full bg-transparent outline-none disabled:cursor-not-allowed\",\n            SIZE_PAD[size],\n            SIZE_AUTOFILL_RADIUS[size],\n            hasLeadingIcon && LEADING_PAD[size],\n            hasTrailingIcon && \"pr-9\",\n            className,\n          )}\n        />\n\n        {invalid && !isPassword && (\n          <IconAlertCircleFilled className=\"text-fg-pho-error pointer-events-none absolute right-3 size-4\" />\n        )}\n\n        {isPassword && (\n          <button\n            type=\"button\"\n            // Reachable by click but skipped in tab order so Tab moves field→field.\n            tabIndex={-1}\n            aria-label=\"Toggle password visibility\"\n            onClick={() => setReveal((v) => !v)}\n            className=\"text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover absolute right-3 flex cursor-pointer items-center transition duration-100 ease-linear focus:outline-none\"\n          >\n            {reveal ? (\n              <IconEyeOff className=\"size-4\" />\n            ) : (\n              <IconEye className=\"size-4\" />\n            )}\n          </button>\n        )}\n      </div>\n\n      {hint && (\n        <Field.Description\n          className={cn(\n            \"text-pho-tertiary text-sm\",\n            invalid && \"text-pho-error\",\n          )}\n        >\n          {hint}\n        </Field.Description>\n      )}\n    </Field.Root>\n  );\n}\n\nInput.displayName = \"Input\";\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}

package/dist/chunks/link-provider-9TFNyDqO.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-provider-9TFNyDqO.js","names":[],"sources":["../../src/utils/is-react-component.ts","../../src/utils/link-provider.tsx"],"sourcesContent":["import { isValidElement, type ComponentType } from \"react\";\n\n/**\n * Distinguish an icon passed as a *component* (e.g. a Phosphor icon or any\n * `FC`/forwardRef) from one passed as an already-rendered *element*. Lets icon\n * props accept either form: `prefix={Plus}` or `prefix={<Plus />}`.\n */\nexport function isReactComponent(\n  value: unknown,\n): value is ComponentType<{ className?: string }> {\n  if (typeof value === \"function\") return true;\n  // forwardRef / memo components are objects carrying `$$typeof` but, unlike a\n  // rendered element, are not valid React elements.\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    !isValidElement(value)\n  );\n}\n","import {\n  createContext,\n  createElement,\n  forwardRef,\n  useContext,\n  type AnchorHTMLAttributes,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\n\n/**\n * The shape a host app's link component must satisfy. Routers (TanStack Router,\n * React Router, Next.js) expose a `Link` that takes `href` + anchor props; this\n * lets Pho components render real client-side links without depending on any\n * specific router.\n */\nexport type LinkComponent = ComponentType<\n  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>;\n\n// Forwards its ref so wrappers (e.g. Motion) can reach the underlying anchor.\nconst DefaultLink: LinkComponent = forwardRef<\n  HTMLAnchorElement,\n  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>((props, ref) => createElement(\"a\", { ...props, ref }));\nDefaultLink.displayName = \"DefaultLink\";\n\nconst LinkContext = createContext<LinkComponent>(DefaultLink);\n\n/** Inject the host router's link component for all Pho links beneath it. */\nexport function LinkProvider({\n  component,\n  children,\n}: {\n  component: LinkComponent;\n  children: ReactNode;\n}) {\n  return (\n    <LinkContext.Provider value={component}>{children}</LinkContext.Provider>\n  );\n}\n\n/** Read the active link component (falls back to a plain `<a>`). */\nexport function useLinkComponent(): LinkComponent {\n  return useContext(LinkContext);\n}\n"],"mappings":";;;AAOA,SAAgB,EACd,GACgD;AAChD,SAAI,OAAO,KAAU,aAAmB,KAItC,OAAO,KAAU,YACjB,MAAU,QACV,cAAc,KACd,CAAC,EAAe,CAAK;AAEzB;ACEA,IAAM,IAA6B,EAAA,CAGhC,GAAO,MAAQ,EAAc,KAAK;AAAA,EAAE,GAAG;AAAA,EAAO,KAAA;AAAI,CAAC,CAAC;AACvD,EAAY,cAAc;AAE1B,IAAM,IAAc,EAA6B,CAAW;AAG5D,SAAgB,EAAa,EAC3B,WAAA,GACA,UAAA,EAAA,GAIC;AACD,SACE,gBAAA,EAAC,EAAY,UAAb;AAAA,IAAsB,OAAO;AAAA,IAAY,UAAA;AAAA,EAA+B,CAAA;AAE5E;AAGA,SAAgB,IAAkC;AAChD,SAAO,EAAW,CAAW;AAC/B"}
+{"version":3,"file":"link-provider-9TFNyDqO.js","names":[],"sources":["../../src/utils/is-react-component.ts","../../src/utils/link-provider.tsx"],"sourcesContent":["import { isValidElement, type ComponentType } from \"react\";\n\n/**\n * Distinguish an icon passed as a *component* (e.g. a Tabler icon or any\n * `FC`/forwardRef) from one passed as an already-rendered *element*. Lets icon\n * props accept either form: `prefix={Plus}` or `prefix={<Plus />}`.\n */\nexport function isReactComponent(\n  value: unknown,\n): value is ComponentType<{ className?: string }> {\n  if (typeof value === \"function\") return true;\n  // forwardRef / memo components are objects carrying `$$typeof` but, unlike a\n  // rendered element, are not valid React elements.\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    !isValidElement(value)\n  );\n}\n","import {\n  createContext,\n  createElement,\n  forwardRef,\n  useContext,\n  type AnchorHTMLAttributes,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\n\n/**\n * The shape a host app's link component must satisfy. Routers (TanStack Router,\n * React Router, Next.js) expose a `Link` that takes `href` + anchor props; this\n * lets Pho components render real client-side links without depending on any\n * specific router.\n */\nexport type LinkComponent = ComponentType<\n  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>;\n\n// Forwards its ref so wrappers (e.g. Motion) can reach the underlying anchor.\nconst DefaultLink: LinkComponent = forwardRef<\n  HTMLAnchorElement,\n  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>((props, ref) => createElement(\"a\", { ...props, ref }));\nDefaultLink.displayName = \"DefaultLink\";\n\nconst LinkContext = createContext<LinkComponent>(DefaultLink);\n\n/** Inject the host router's link component for all Pho links beneath it. */\nexport function LinkProvider({\n  component,\n  children,\n}: {\n  component: LinkComponent;\n  children: ReactNode;\n}) {\n  return (\n    <LinkContext.Provider value={component}>{children}</LinkContext.Provider>\n  );\n}\n\n/** Read the active link component (falls back to a plain `<a>`). */\nexport function useLinkComponent(): LinkComponent {\n  return useContext(LinkContext);\n}\n"],"mappings":";;;AAOA,SAAgB,EACd,GACgD;AAChD,SAAI,OAAO,KAAU,aAAmB,KAItC,OAAO,KAAU,YACjB,MAAU,QACV,cAAc,KACd,CAAC,EAAe,CAAK;AAEzB;ACEA,IAAM,IAA6B,EAAA,CAGhC,GAAO,MAAQ,EAAc,KAAK;AAAA,EAAE,GAAG;AAAA,EAAO,KAAA;AAAI,CAAC,CAAC;AACvD,EAAY,cAAc;AAE1B,IAAM,IAAc,EAA6B,CAAW;AAG5D,SAAgB,EAAa,EAC3B,WAAA,GACA,UAAA,EAAA,GAIC;AACD,SACE,gBAAA,EAAC,EAAY,UAAb;AAAA,IAAsB,OAAO;AAAA,IAAY,UAAA;AAAA,EAA+B,CAAA;AAE5E;AAGA,SAAgB,IAAkC;AAChD,SAAO,EAAW,CAAW;AAC/B"}

package/dist/components/button.js

@@ -1,6 +1,6 @@
 "use client";
 import { a, c as s, i as o, l as n, n as B, o as T, r as u, s as e, t as f, u as i } from "../chunks/button-BMDHIgZh.js";
-import { t as E } from "../chunks/close-button-DKaNIndU.js";
+import { t as E } from "../chunks/close-button-CRiiwy6K.js";
 export {
   f as BUTTON_SHAPES,
   B as BUTTON_SIZES,

package/dist/components/checkbox.js

@@ -1,51 +1,51 @@
 "use client";
-import { t } from "../chunks/cn-7uGUzCOM.js";
+import { t as a } from "../chunks/cn-7uGUzCOM.js";
+import { t as d } from "../chunks/createReactComponent-BqCmnqfX.js";
 import "react";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { Check as l, Minus as m } from "@phosphor-icons/react";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { Checkbox as s } from "@base-ui/react/checkbox";
-import { CheckboxGroup as p } from "@base-ui/react/checkbox-group";
-var h = {
+import { CheckboxGroup as m } from "@base-ui/react/checkbox-group";
+var p = [["path", {
+  d: "M5 12l5 5l10 -10",
+  key: "svg-0"
+}]], u = d("outline", "check", "Check", p), h = [["path", {
+  d: "M5 12l14 0",
+  key: "svg-0"
+}]], b = d("outline", "minus", "Minus", h), x = {
   sm: "size-4",
   md: "size-5"
 }, c = {
   sm: "size-3",
   md: "size-3.5"
 };
-function u({ className: o, label: r, size: a = "md", ...d }) {
-  const i = /* @__PURE__ */ e(s.Root, {
-    className: t("group/cb squircle outline-pho-brand bg-pho-primary ring-pho-primary text-pho-on-brand flex shrink-0 cursor-pointer items-center justify-center rounded-md ring-1 transition duration-100 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2", "data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent", "data-[indeterminate]:bg-pho-brand-solid data-[indeterminate]:ring-transparent", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", h[a], o),
-    ...d,
-    children: /* @__PURE__ */ n(s.Indicator, {
+function f({ className: o, label: r, size: t = "md", ...l }) {
+  const n = /* @__PURE__ */ e(s.Root, {
+    className: a("group/cb squircle outline-pho-brand bg-pho-primary ring-pho-primary text-pho-on-brand flex shrink-0 cursor-pointer items-center justify-center rounded-md ring-1 transition duration-100 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2", "data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent", "data-[indeterminate]:bg-pho-brand-solid data-[indeterminate]:ring-transparent", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", x[t], o),
+    ...l,
+    children: /* @__PURE__ */ i(s.Indicator, {
       className: "flex items-center justify-center",
-      children: [/* @__PURE__ */ e(l, {
-        weight: "bold",
-        className: t(c[a], "group-data-[indeterminate]/cb:hidden")
-      }), /* @__PURE__ */ e(m, {
-        weight: "bold",
-        className: t(c[a], "hidden group-data-[indeterminate]/cb:block")
-      })]
+      children: [/* @__PURE__ */ e(u, { className: a(c[t], "group-data-[indeterminate]/cb:hidden") }), /* @__PURE__ */ e(b, { className: a(c[t], "hidden group-data-[indeterminate]/cb:block") })]
     })
   });
-  return r ? /* @__PURE__ */ n("label", {
+  return r ? /* @__PURE__ */ i("label", {
     className: "flex cursor-pointer items-center gap-2 select-none",
-    children: [i, /* @__PURE__ */ e("span", {
+    children: [n, /* @__PURE__ */ e("span", {
       className: "text-pho-secondary text-sm",
       children: r
     })]
-  }) : i;
+  }) : n;
 }
-u.displayName = "Checkbox";
-function b({ className: o, ...r }) {
-  return /* @__PURE__ */ e(p, {
-    className: t("flex flex-col gap-3", o),
+f.displayName = "Checkbox";
+function k({ className: o, ...r }) {
+  return /* @__PURE__ */ e(m, {
+    className: a("flex flex-col gap-3", o),
     ...r
   });
 }
-b.displayName = "CheckboxGroup";
+k.displayName = "CheckboxGroup";
 export {
-  u as Checkbox,
-  b as CheckboxGroup
+  f as Checkbox,
+  k as CheckboxGroup
 };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/components/checkbox/checkbox.tsx","../../src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport { Check, Minus } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CheckboxSize = \"sm\" | \"md\";\n\nconst BOX: Record<CheckboxSize, string> = { sm: \"size-4\", md: \"size-5\" };\nconst ICON: Record<CheckboxSize, string> = { sm: \"size-3\", md: \"size-3.5\" };\n\nexport interface CheckboxProps extends Omit<\n  ComponentProps<typeof BaseCheckbox.Root>,\n  \"className\"\n> {\n  className?: string;\n  /** Text rendered beside the box; the whole row toggles the checkbox. */\n  label?: ReactNode;\n  /** Size variant. @default \"md\" */\n  size?: CheckboxSize;\n}\n\n/**\n * Checkbox built on Base UI `Checkbox`. Supports checked, unchecked, and\n * `indeterminate` states; pass `label` for a clickable text row, or omit it\n * and provide an `aria-label`. For a set of related options that submit\n * together, wrap them in `CheckboxGroup`.\n */\nexport function Checkbox({\n  className,\n  label,\n  size = \"md\",\n  ...props\n}: CheckboxProps) {\n  const box = (\n    <BaseCheckbox.Root\n      className={cn(\n        // Flat field surface with the input-strength ring; the glyph only shows\n        // on the brand-solid checked fill, so it must be on-brand (not white —\n        // brand-solid is white in dark mode).\n        \"group/cb squircle outline-pho-brand bg-pho-primary ring-pho-primary text-pho-on-brand flex shrink-0 cursor-pointer items-center justify-center rounded-md ring-1 transition duration-100 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent\",\n        \"data-[indeterminate]:bg-pho-brand-solid data-[indeterminate]:ring-transparent\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        BOX[size],\n        className,\n      )}\n      {...props}\n    >\n      <BaseCheckbox.Indicator className=\"flex items-center justify-center\">\n        <Check\n          weight=\"bold\"\n          className={cn(ICON[size], \"group-data-[indeterminate]/cb:hidden\")}\n        />\n        <Minus\n          weight=\"bold\"\n          className={cn(\n            ICON[size],\n            \"hidden group-data-[indeterminate]/cb:block\",\n          )}\n        />\n      </BaseCheckbox.Indicator>\n    </BaseCheckbox.Root>\n  );\n\n  if (!label) return box;\n  return (\n    <label className=\"flex cursor-pointer items-center gap-2 select-none\">\n      {box}\n      <span className=\"text-pho-secondary text-sm\">{label}</span>\n    </label>\n  );\n}\n\nCheckbox.displayName = \"Checkbox\";\n","import { type ComponentProps } from \"react\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface CheckboxGroupProps extends Omit<\n  ComponentProps<typeof BaseCheckboxGroup>,\n  \"className\"\n> {\n  className?: string;\n}\n\n/**\n * Groups related `Checkbox`es and tracks their values as one. Built on Base UI\n * `CheckboxGroup` — supports a parent \"select all\" checkbox via `allValues`.\n * Control with `value` / `onValueChange` or leave uncontrolled with\n * `defaultValue`.\n */\nexport function CheckboxGroup({ className, ...props }: CheckboxGroupProps) {\n  return (\n    <BaseCheckboxGroup\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n"],"mappings":";;;;;;;AAOA,IAAM,IAAoC;AAAA,EAAE,IAAI;AAAA,EAAU,IAAI;AAAS,GACjE,IAAqC;AAAA,EAAE,IAAI;AAAA,EAAU,IAAI;AAAW;AAmB1E,SAAgB,EAAS,EACvB,WAAA,GACA,OAAA,GACA,MAAA,IAAO,MACP,GAAG,EAAA,GACa;AAChB,QAAM,IACJ,gBAAA,EAAC,EAAa,MAAd;AAAA,IACE,WAAW,EAIT,0QACA,qEACA,iFACA,iEACA,EAAI,CAAA,GACJ,CACF;AAAA,IACA,GAAI;AAAA,cAEJ,gBAAA,EAAC,EAAa,WAAd;AAAA,MAAwB,WAAU;AAAA,gBAAlC,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,QAAO;AAAA,QACP,WAAW,EAAG,EAAK,CAAA,GAAO,sCAAsC;AAAA,MACjE,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,QAAO;AAAA,QACP,WAAW,EACT,EAAK,CAAA,GACL,4CACF;AAAA,MACD,CAAA,CACqB;AAAA;EACP,CAAA;AAGrB,SAAK,IAEH,gBAAA,EAAC,SAAD;AAAA,IAAO,WAAU;AAAA,cAAjB,CACG,GACD,gBAAA,EAAC,QAAD;AAAA,MAAM,WAAU;AAAA,gBAA8B;AAAA,IAAY,CAAA,CACrD;AAAA,OALU;AAOrB;AAEA,EAAS,cAAc;ACxDvB,SAAgB,EAAc,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6B;AACzE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EAAG,uBAAuB,CAAS;AAAA,IAC9C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,EAAc,cAAc"}
+{"version":3,"file":"checkbox.js","names":["__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconMinus.mjs","../../src/components/checkbox/checkbox.tsx","../../src/components/checkbox/checkbox-group.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\": \"M5 12l5 5l10 -10\", \"key\": \"svg-0\" }]];\nconst IconCheck = createReactComponent(\"outline\", \"check\", \"Check\", __iconNode);\n\nexport { __iconNode, IconCheck as default };\n//# sourceMappingURL=IconCheck.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\": \"M5 12l14 0\", \"key\": \"svg-0\" }]];\nconst IconMinus = createReactComponent(\"outline\", \"minus\", \"Minus\", __iconNode);\n\nexport { __iconNode, IconMinus as default };\n//# sourceMappingURL=IconMinus.mjs.map\n","import { type ComponentProps, type ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport { IconCheck, IconMinus } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CheckboxSize = \"sm\" | \"md\";\n\nconst BOX: Record<CheckboxSize, string> = { sm: \"size-4\", md: \"size-5\" };\nconst ICON: Record<CheckboxSize, string> = { sm: \"size-3\", md: \"size-3.5\" };\n\nexport interface CheckboxProps extends Omit<\n  ComponentProps<typeof BaseCheckbox.Root>,\n  \"className\"\n> {\n  className?: string;\n  /** Text rendered beside the box; the whole row toggles the checkbox. */\n  label?: ReactNode;\n  /** Size variant. @default \"md\" */\n  size?: CheckboxSize;\n}\n\n/**\n * Checkbox built on Base UI `Checkbox`. Supports checked, unchecked, and\n * `indeterminate` states; pass `label` for a clickable text row, or omit it\n * and provide an `aria-label`. For a set of related options that submit\n * together, wrap them in `CheckboxGroup`.\n */\nexport function Checkbox({\n  className,\n  label,\n  size = \"md\",\n  ...props\n}: CheckboxProps) {\n  const box = (\n    <BaseCheckbox.Root\n      className={cn(\n        // Flat field surface with the input-strength ring; the glyph only shows\n        // on the brand-solid checked fill, so it must be on-brand (not white —\n        // brand-solid is white in dark mode).\n        \"group/cb squircle outline-pho-brand bg-pho-primary ring-pho-primary text-pho-on-brand flex shrink-0 cursor-pointer items-center justify-center rounded-md ring-1 transition duration-100 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"data-[checked]:bg-pho-brand-solid data-[checked]:ring-transparent\",\n        \"data-[indeterminate]:bg-pho-brand-solid data-[indeterminate]:ring-transparent\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        BOX[size],\n        className,\n      )}\n      {...props}\n    >\n      <BaseCheckbox.Indicator className=\"flex items-center justify-center\">\n        <IconCheck\n          className={cn(ICON[size], \"group-data-[indeterminate]/cb:hidden\")}\n        />\n        <IconMinus\n          className={cn(\n            ICON[size],\n            \"hidden group-data-[indeterminate]/cb:block\",\n          )}\n        />\n      </BaseCheckbox.Indicator>\n    </BaseCheckbox.Root>\n  );\n\n  if (!label) return box;\n  return (\n    <label className=\"flex cursor-pointer items-center gap-2 select-none\">\n      {box}\n      <span className=\"text-pho-secondary text-sm\">{label}</span>\n    </label>\n  );\n}\n\nCheckbox.displayName = \"Checkbox\";\n","import { type ComponentProps } from \"react\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface CheckboxGroupProps extends Omit<\n  ComponentProps<typeof BaseCheckboxGroup>,\n  \"className\"\n> {\n  className?: string;\n}\n\n/**\n * Groups related `Checkbox`es and tracks their values as one. Built on Base UI\n * `CheckboxGroup` — supports a parent \"select all\" checkbox via `allValues`.\n * Control with `value` / `onValueChange` or leave uncontrolled with\n * `defaultValue`.\n */\nexport function CheckboxGroup({ className, ...props }: CheckboxGroupProps) {\n  return (\n    <BaseCheckboxGroup\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n"],"x_google_ignoreList":[0,1],"mappings":";;;;;;;AASA,IAAMA,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAoB,KAAO;AAAQ,CAAC,CAAC,GACnE,IAAY,EAAqB,WAAW,SAAS,SAASA,CAAU,GCDxE,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAc,KAAO;AAAQ,CAAC,CAAC,GAC7D,IAAY,EAAqB,WAAW,SAAS,SAAS,CAAU,GCHxE,IAAoC;AAAA,EAAE,IAAI;AAAA,EAAU,IAAI;AAAS,GACjE,IAAqC;AAAA,EAAE,IAAI;AAAA,EAAU,IAAI;AAAW;AAmB1E,SAAgB,EAAS,EACvB,WAAA,GACA,OAAA,GACA,MAAA,IAAO,MACP,GAAG,EAAA,GACa;AAChB,QAAM,IACJ,gBAAA,EAAC,EAAa,MAAd;AAAA,IACE,WAAW,EAIT,0QACA,qEACA,iFACA,iEACA,EAAI,CAAA,GACJ,CACF;AAAA,IACA,GAAI;AAAA,cAEJ,gBAAA,EAAC,EAAa,WAAd;AAAA,MAAwB,WAAU;AAAA,gBAAlC,CACE,gBAAA,EAAC,GAAD,EACE,WAAW,EAAG,EAAK,CAAA,GAAO,sCAAsC,EACjE,CAAA,GACD,gBAAA,EAAC,GAAD,EACE,WAAW,EACT,EAAK,CAAA,GACL,4CACF,EACD,CAAA,CACqB;AAAA;EACP,CAAA;AAGrB,SAAK,IAEH,gBAAA,EAAC,SAAD;AAAA,IAAO,WAAU;AAAA,cAAjB,CACG,GACD,gBAAA,EAAC,QAAD;AAAA,MAAM,WAAU;AAAA,gBAA8B;AAAA,IAAY,CAAA,CACrD;AAAA,OALU;AAOrB;AAEA,EAAS,cAAc;ACtDvB,SAAgB,EAAc,EAAE,WAAA,GAAW,GAAG,EAAA,GAA6B;AACzE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EAAG,uBAAuB,CAAS;AAAA,IAC9C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,EAAc,cAAc"}

package/dist/components/dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { t } from "../chunks/dialog-CyyL5VCc.js";
+import { t } from "../chunks/dialog-sTOaOEB2.js";
 export {
   t as Dialog
 };

package/dist/components/input.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../chunks/input-DX7d5MlS.js";
+import { t as e } from "../chunks/input-e1k2gbET.js";
 export {
   e as Input
 };

package/dist/components/notification.js

@@ -1,10 +1,43 @@
 "use client";
 import { t } from "../chunks/cn-7uGUzCOM.js";
-import { t as v } from "../chunks/resolve-variant-CcD8iG5l.js";
+import { t as N } from "../chunks/resolve-variant-CcD8iG5l.js";
+import { t as s } from "../chunks/createReactComponent-BqCmnqfX.js";
+import { t as b } from "../chunks/IconX-pZ9vrtSr.js";
 import "react";
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { CheckCircle as N, Info as a, WarningCircle as l, X as y } from "@phosphor-icons/react";
-var w = {
+var k = [
+  ["path", {
+    d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",
+    key: "svg-0"
+  }],
+  ["path", {
+    d: "M12 8v4",
+    key: "svg-1"
+  }],
+  ["path", {
+    d: "M12 16h.01",
+    key: "svg-2"
+  }]
+], c = s("outline", "alert-circle", "AlertCircle", k), C = [["path", {
+  d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",
+  key: "svg-0"
+}], ["path", {
+  d: "M9 12l2 2l4 -4",
+  key: "svg-1"
+}]], I = s("outline", "circle-check", "CircleCheck", C), w = [
+  ["path", {
+    d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",
+    key: "svg-0"
+  }],
+  ["path", {
+    d: "M12 9h.01",
+    key: "svg-1"
+  }],
+  ["path", {
+    d: "M11 12h1v4h1",
+    key: "svg-2"
+  }]
+], l = s("outline", "info-circle", "InfoCircle", w), M = {
   brand: {
     classes: "text-fg-pho-brand",
     description: "Informational / product update (default)"
@@ -25,23 +58,23 @@ var w = {
     classes: "text-fg-pho-error",
     description: "Something went wrong"
   }
-}, C = {
-  brand: a,
-  gray: a,
-  success: N,
-  warning: l,
-  error: l
-}, c = "cursor-pointer text-sm font-medium outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2";
-function I({ color: i = "brand", title: d, description: s, confirmLabel: n, onConfirm: p, dismissLabel: h = "Dismiss", onClose: o, icon: u, className: m, ref: f, ...x }) {
-  const g = u ?? C[i], b = !!n;
+}, _ = {
+  brand: l,
+  gray: l,
+  success: I,
+  warning: c,
+  error: c
+}, d = "cursor-pointer text-sm font-medium outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2";
+function A({ color: i = "brand", title: h, description: o, confirmLabel: n, onConfirm: p, dismissLabel: u = "Dismiss", onClose: a, icon: m, className: f, ref: v, ...g }) {
+  const x = m ?? _[i], y = !!n;
   return /* @__PURE__ */ r("div", {
-    ref: f,
-    ...x,
-    className: t("squircle ring-pho-secondary bg-pho-primary shadow-pho-lg relative flex w-full max-w-sm gap-4 rounded-xl p-4 ring-1 ring-inset", m),
+    ref: v,
+    ...g,
+    className: t("squircle ring-pho-secondary bg-pho-primary shadow-pho-lg relative flex w-full max-w-sm gap-4 rounded-xl p-4 ring-1 ring-inset", f),
     children: [
-      /* @__PURE__ */ e(g, {
+      /* @__PURE__ */ e(x, {
         "aria-hidden": "true",
-        className: t("mt-0.5 size-5 shrink-0", v(w, i))
+        className: t("mt-0.5 size-5 shrink-0", N(M, i))
       }),
       /* @__PURE__ */ r("div", {
         className: "flex flex-1 flex-col gap-3 pr-6",
@@ -49,43 +82,40 @@ function I({ color: i = "brand", title: d, description: s, confirmLabel: n, onCo
           className: "flex flex-col gap-1",
           children: [/* @__PURE__ */ e("p", {
             className: "text-pho-primary text-sm font-semibold",
-            children: d
-          }), s != null && s !== !1 && /* @__PURE__ */ e("p", {
+            children: h
+          }), o != null && o !== !1 && /* @__PURE__ */ e("p", {
             className: "text-pho-tertiary text-sm",
-            children: s
+            children: o
           })]
-        }), b && /* @__PURE__ */ r("div", {
+        }), y && /* @__PURE__ */ r("div", {
           className: "flex gap-4",
           children: [/* @__PURE__ */ e("button", {
             type: "button",
             onClick: p,
-            className: t(c, "text-pho-brand hover:underline"),
+            className: t(d, "text-pho-brand hover:underline"),
             children: n
           }), /* @__PURE__ */ e("button", {
             type: "button",
-            onClick: o,
-            className: t(c, "text-pho-secondary hover:text-pho-secondary-hover"),
-            children: h
+            onClick: a,
+            className: t(d, "text-pho-secondary hover:text-pho-secondary-hover"),
+            children: u
           })]
         })]
       }),
-      o && /* @__PURE__ */ e("button", {
+      a && /* @__PURE__ */ e("button", {
         type: "button",
-        onClick: o,
+        onClick: a,
         "aria-label": "Dismiss",
         className: "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",
-        children: /* @__PURE__ */ e(y, {
-          "aria-hidden": "true",
-          weight: "bold"
-        })
+        children: /* @__PURE__ */ e(b, { "aria-hidden": "true" })
       })
     ]
   });
 }
-I.displayName = "Notification";
+A.displayName = "Notification";
 export {
-  w as NOTIFICATION_COLORS,
-  I as Notification
+  M as NOTIFICATION_COLORS,
+  A as Notification
 };
 
 //# sourceMappingURL=notification.js.map

package/dist/components/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":[],"sources":["../../src/components/notification/notification.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, type Ref } from \"react\";\nimport {\n  CheckCircle,\n  Info,\n  WarningCircle,\n  X,\n  type Icon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE closed, semantic axis: `color`. It selects a status glyph *and* its\n *   tint together — you never pick an icon and a color separately. This is the\n *   `IconNotification` flavor from the app; the unused avatar/image variants of\n *   the source family are intentionally dropped.\n * - The action row is a single reduced pair: a brand `confirmLabel` link beside\n *   a gray dismiss link. It appears only when there's something to confirm.\n * - `onClose` is the only thing that renders the top-right close button — no\n *   separate boolean flag to keep in sync.\n */\n\n/** Status color → icon tint. A bare status-tinted glyph, no badge surface. */\nexport const NOTIFICATION_COLORS = {\n  brand: {\n    classes: \"text-fg-pho-brand\",\n    description: \"Informational / product update (default)\",\n  },\n  gray: {\n    classes: \"text-fg-pho-secondary\",\n    description: \"Neutral, low-stakes note\",\n  },\n  success: {\n    classes: \"text-pho-success\",\n    description: \"An action completed\",\n  },\n  warning: {\n    classes: \"text-pho-warning\",\n    description: \"Needs attention, not yet failed\",\n  },\n  error: {\n    classes: \"text-fg-pho-error\",\n    description: \"Something went wrong\",\n  },\n} satisfies VariantMap;\n\nexport type NotificationColor = keyof typeof NOTIFICATION_COLORS;\n\n/** Status color → glyph. Mirrors the source's `iconMap` semantics. */\nconst ICON_MAP = {\n  brand: Info,\n  gray: Info,\n  success: CheckCircle,\n  warning: WarningCircle,\n  error: WarningCircle,\n} satisfies Record<NotificationColor, Icon>;\n\nexport interface NotificationProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"title\" | \"color\"\n> {\n  /** Status color — selects the glyph and its tint. @default \"brand\" */\n  color?: NotificationColor;\n  /** Bold heading line. */\n  title: ReactNode;\n  /** Supporting line under the title. */\n  description?: ReactNode;\n  /** Confirm action label — renders a brand link paired with a dismiss link. */\n  confirmLabel?: string;\n  /** Called when the confirm link is clicked. */\n  onConfirm?: () => void;\n  /** Dismiss link label, shown beside the confirm link. @default \"Dismiss\" */\n  dismissLabel?: string;\n  /** Called on dismiss. Its presence also renders the top-right close button. */\n  onClose?: () => void;\n  /** Override the status glyph while keeping the color's tint. */\n  icon?: Icon;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst LINK_CLASS =\n  \"cursor-pointer text-sm font-medium outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\";\n\n/**\n * Notification — the standalone status card ported from the app's\n * `IconNotification`: a status glyph, a title/description, an optional\n * confirm+dismiss link pair, and an optional close button. It is a *card*, not a\n * lifecycle: it owns its surface but nothing about timing or stacking.\n *\n * For a transient, auto-stacking toast, drop it inside pho-ui's Base UI\n * {@link Toast} — render it as the child of a `Toast.Root` whose own surface you\n * neutralize (`className=\"bg-transparent p-0 shadow-none ring-0\"`) so the\n * manager owns motion and swipe while this card owns the look. For a choice the\n * user must make, use `AlertDialog` instead.\n */\nexport function Notification({\n  color = \"brand\",\n  title,\n  description,\n  confirmLabel,\n  onConfirm,\n  dismissLabel = \"Dismiss\",\n  onClose,\n  icon,\n  className,\n  ref,\n  ...props\n}: NotificationProps) {\n  const Glyph = icon ?? ICON_MAP[color];\n  const showActions = Boolean(confirmLabel);\n\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        // Floating layer: keeps its shadow elevation, hairline card edge.\n        \"squircle ring-pho-secondary bg-pho-primary shadow-pho-lg relative flex w-full max-w-sm gap-4 rounded-xl p-4 ring-1 ring-inset\",\n        className,\n      )}\n    >\n      <Glyph\n        aria-hidden=\"true\"\n        className={cn(\n          \"mt-0.5 size-5 shrink-0\",\n          resolveVariant(NOTIFICATION_COLORS, color),\n        )}\n      />\n\n      <div className=\"flex flex-1 flex-col gap-3 pr-6\">\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-pho-primary text-sm font-semibold\">{title}</p>\n          {description != null && description !== false && (\n            <p className=\"text-pho-tertiary text-sm\">{description}</p>\n          )}\n        </div>\n\n        {showActions && (\n          <div className=\"flex gap-4\">\n            <button\n              type=\"button\"\n              onClick={onConfirm}\n              className={cn(\n                LINK_CLASS,\n                // brand text is monochrome now — underline carries the hover.\n                \"text-pho-brand hover:underline\",\n              )}\n            >\n              {confirmLabel}\n            </button>\n            <button\n              type=\"button\"\n              onClick={onClose}\n              className={cn(\n                LINK_CLASS,\n                \"text-pho-secondary hover:text-pho-secondary-hover\",\n              )}\n            >\n              {dismissLabel}\n            </button>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label=\"Dismiss\"\n          className=\"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        >\n          <X aria-hidden=\"true\" weight=\"bold\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nNotification.displayName = \"Notification\";\n"],"mappings":";;;;;;AAwBA,IAAa,IAAsB;AAAA,EACjC,OAAO;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF,GAKM,IAAW;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GA0BM,IACJ;AAcF,SAAgB,EAAa,EAC3B,OAAA,IAAQ,SACR,OAAA,GACA,aAAA,GACA,cAAA,GACA,WAAA,GACA,cAAA,IAAe,WACf,SAAA,GACA,MAAA,GACA,WAAA,GACA,KAAA,GACA,GAAG,EAAA,GACiB;AACpB,QAAM,IAAQ,KAAQ,EAAS,CAAA,GACzB,IAAc,EAAQ;AAE5B,SACE,gBAAA,EAAC,OAAD;AAAA,IACO,KAAA;AAAA,IACL,GAAI;AAAA,IACJ,WAAW,EAET,iIACA,CACF;AAAA,cAPF;AAAA,MASE,gBAAA,EAAC,GAAD;AAAA,QACE,eAAY;AAAA,QACZ,WAAW,EACT,0BACA,EAAe,GAAqB,CAAK,CAC3C;AAAA,MACD,CAAA;AAAA,MAED,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBAAf,CACE,gBAAA,EAAC,OAAD;AAAA,UAAK,WAAU;AAAA,oBAAf,CACE,gBAAA,EAAC,KAAD;AAAA,YAAG,WAAU;AAAA,sBAA0C;AAAA,UAAS,CAAA,GAC/D,KAAe,QAAQ,MAAgB,MACtC,gBAAA,EAAC,KAAD;AAAA,YAAG,WAAU;AAAA,sBAA6B;AAAA,UAAe,CAAA,CAExD;AAAA,YAEJ,KACC,gBAAA,EAAC,OAAD;AAAA,UAAK,WAAU;AAAA,oBAAf,CACE,gBAAA,EAAC,UAAD;AAAA,YACE,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAW,EACT,GAEA,gCACF;AAAA,sBAEC;AAAA,UACK,CAAA,GACR,gBAAA,EAAC,UAAD;AAAA,YACE,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAW,EACT,GACA,mDACF;AAAA,sBAEC;AAAA,UACK,CAAA,CACL;AAAA,UAEJ;AAAA;MAEJ,KACC,gBAAA,EAAC,UAAD;AAAA,QACE,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAW;AAAA,QACX,WAAU;AAAA,kBAEV,gBAAA,EAAC,GAAD;AAAA,UAAG,eAAY;AAAA,UAAO,QAAO;AAAA,QAAQ,CAAA;AAAA,MAC/B,CAAA;AAAA,IAEP;AAAA;AAET;AAEA,EAAa,cAAc"}
+{"version":3,"file":"notification.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/IconAlertCircle.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconCircleCheck.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs","../../src/components/notification/notification.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 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M12 8v4\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M12 16h.01\", \"key\": \"svg-2\" }]];\nconst IconAlertCircle = createReactComponent(\"outline\", \"alert-circle\", \"AlertCircle\", __iconNode);\n\nexport { __iconNode, IconAlertCircle as default };\n//# sourceMappingURL=IconAlertCircle.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\": \"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M9 12l2 2l4 -4\", \"key\": \"svg-1\" }]];\nconst IconCircleCheck = createReactComponent(\"outline\", \"circle-check\", \"CircleCheck\", __iconNode);\n\nexport { __iconNode, IconCircleCheck as default };\n//# sourceMappingURL=IconCircleCheck.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\": \"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M12 9h.01\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M11 12h1v4h1\", \"key\": \"svg-2\" }]];\nconst IconInfoCircle = createReactComponent(\"outline\", \"info-circle\", \"InfoCircle\", __iconNode);\n\nexport { __iconNode, IconInfoCircle as default };\n//# sourceMappingURL=IconInfoCircle.mjs.map\n","import { type HTMLAttributes, type ReactNode, type Ref } from \"react\";\nimport {\n  IconCircleCheck,\n  IconInfoCircle,\n  IconAlertCircle,\n  IconX,\n  type Icon,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE closed, semantic axis: `color`. It selects a status glyph *and* its\n *   tint together — you never pick an icon and a color separately. This is the\n *   `IconNotification` flavor from the app; the unused avatar/image variants of\n *   the source family are intentionally dropped.\n * - The action row is a single reduced pair: a brand `confirmLabel` link beside\n *   a gray dismiss link. It appears only when there's something to confirm.\n * - `onClose` is the only thing that renders the top-right close button — no\n *   separate boolean flag to keep in sync.\n */\n\n/** Status color → icon tint. A bare status-tinted glyph, no badge surface. */\nexport const NOTIFICATION_COLORS = {\n  brand: {\n    classes: \"text-fg-pho-brand\",\n    description: \"Informational / product update (default)\",\n  },\n  gray: {\n    classes: \"text-fg-pho-secondary\",\n    description: \"Neutral, low-stakes note\",\n  },\n  success: {\n    classes: \"text-pho-success\",\n    description: \"An action completed\",\n  },\n  warning: {\n    classes: \"text-pho-warning\",\n    description: \"Needs attention, not yet failed\",\n  },\n  error: {\n    classes: \"text-fg-pho-error\",\n    description: \"Something went wrong\",\n  },\n} satisfies VariantMap;\n\nexport type NotificationColor = keyof typeof NOTIFICATION_COLORS;\n\n/** Status color → glyph. Mirrors the source's `iconMap` semantics. */\nconst ICON_MAP = {\n  brand: IconInfoCircle,\n  gray: IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertCircle,\n  error: IconAlertCircle,\n} satisfies Record<NotificationColor, Icon>;\n\nexport interface NotificationProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"title\" | \"color\"\n> {\n  /** Status color — selects the glyph and its tint. @default \"brand\" */\n  color?: NotificationColor;\n  /** Bold heading line. */\n  title: ReactNode;\n  /** Supporting line under the title. */\n  description?: ReactNode;\n  /** Confirm action label — renders a brand link paired with a dismiss link. */\n  confirmLabel?: string;\n  /** Called when the confirm link is clicked. */\n  onConfirm?: () => void;\n  /** Dismiss link label, shown beside the confirm link. @default \"Dismiss\" */\n  dismissLabel?: string;\n  /** Called on dismiss. Its presence also renders the top-right close button. */\n  onClose?: () => void;\n  /** Override the status glyph while keeping the color's tint. */\n  icon?: Icon;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst LINK_CLASS =\n  \"cursor-pointer text-sm font-medium outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\";\n\n/**\n * Notification — the standalone status card ported from the app's\n * `IconNotification`: a status glyph, a title/description, an optional\n * confirm+dismiss link pair, and an optional close button. It is a *card*, not a\n * lifecycle: it owns its surface but nothing about timing or stacking.\n *\n * For a transient, auto-stacking toast, drop it inside pho-ui's Base UI\n * {@link Toast} — render it as the child of a `Toast.Root` whose own surface you\n * neutralize (`className=\"bg-transparent p-0 shadow-none ring-0\"`) so the\n * manager owns motion and swipe while this card owns the look. For a choice the\n * user must make, use `AlertDialog` instead.\n */\nexport function Notification({\n  color = \"brand\",\n  title,\n  description,\n  confirmLabel,\n  onConfirm,\n  dismissLabel = \"Dismiss\",\n  onClose,\n  icon,\n  className,\n  ref,\n  ...props\n}: NotificationProps) {\n  const Glyph = icon ?? ICON_MAP[color];\n  const showActions = Boolean(confirmLabel);\n\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        // Floating layer: keeps its shadow elevation, hairline card edge.\n        \"squircle ring-pho-secondary bg-pho-primary shadow-pho-lg relative flex w-full max-w-sm gap-4 rounded-xl p-4 ring-1 ring-inset\",\n        className,\n      )}\n    >\n      <Glyph\n        aria-hidden=\"true\"\n        className={cn(\n          \"mt-0.5 size-5 shrink-0\",\n          resolveVariant(NOTIFICATION_COLORS, color),\n        )}\n      />\n\n      <div className=\"flex flex-1 flex-col gap-3 pr-6\">\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-pho-primary text-sm font-semibold\">{title}</p>\n          {description != null && description !== false && (\n            <p className=\"text-pho-tertiary text-sm\">{description}</p>\n          )}\n        </div>\n\n        {showActions && (\n          <div className=\"flex gap-4\">\n            <button\n              type=\"button\"\n              onClick={onConfirm}\n              className={cn(\n                LINK_CLASS,\n                // brand text is monochrome now — underline carries the hover.\n                \"text-pho-brand hover:underline\",\n              )}\n            >\n              {confirmLabel}\n            </button>\n            <button\n              type=\"button\"\n              onClick={onClose}\n              className={cn(\n                LINK_CLASS,\n                \"text-pho-secondary hover:text-pho-secondary-hover\",\n              )}\n            >\n              {dismissLabel}\n            </button>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label=\"Dismiss\"\n          className=\"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        >\n          <IconX aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nNotification.displayName = \"Notification\";\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}

package/dist/index.js

@@ -4,21 +4,21 @@ import { n as s, r, t as n } from "./chunks/link-provider-9TFNyDqO.js";
 import { t as m } from "./chunks/resolve-variant-CcD8iG5l.js";
 import "./utils.js";
 import { a as p, c as u, i as B, l as T, n as c, o as E, r as S, s as l, t as N, u as _ } from "./chunks/button-BMDHIgZh.js";
-import { t as C } from "./chunks/close-button-DKaNIndU.js";
-import { t as L } from "./chunks/input-DX7d5MlS.js";
-import { t as U } from "./chunks/dialog-CyyL5VCc.js";
+import { t as C } from "./chunks/input-e1k2gbET.js";
+import { t as L } from "./chunks/close-button-CRiiwy6K.js";
+import { t as U } from "./chunks/dialog-sTOaOEB2.js";
 export {
   N as BUTTON_SHAPES,
   c as BUTTON_SIZES,
   S as BUTTON_VARIANTS,
   B as Button,
   p as ButtonLink,
-  C as CloseButton,
+  L as CloseButton,
   U as Dialog,
   E as EFFECT_BUTTON_SIZES,
   l as EffectButton,
   u as EffectButtonLink,
-  L as Input,
+  C as Input,
   n as LinkProvider,
   T as buttonVariants,
   o as cn,

package/dist/src/components/input/input.d.ts

@@ -9,7 +9,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     size?: InputSize;
     /** Render the invalid state (ring + icon + error-colored hint). */
     invalid?: boolean;
-    /** Leading icon component (e.g. a Phosphor icon). */
+    /** Leading icon component (e.g. a Tabler icon). */
     icon?: ComponentType<{
         className?: string;
     }>;

package/dist/src/components/notification/notification.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode, Ref } from 'react';
-import { Icon } from '@phosphor-icons/react';
+import { Icon } from '@tabler/icons-react';
 /**
  * Design notes (Geist-aligned):
  * - ONE closed, semantic axis: `color`. It selects a status glyph *and* its

package/dist/src/utils/is-react-component.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 /**
- * Distinguish an icon passed as a *component* (e.g. a Phosphor icon or any
+ * Distinguish an icon passed as a *component* (e.g. a Tabler icon or any
  * `FC`/forwardRef) from one passed as an already-rendered *element*. Lets icon
  * props accept either form: `prefix={Plus}` or `prefix={<Plus />}`.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -362,12 +362,12 @@
     }
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.10",
+    "@tabler/icons-react": "^3.44.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.1.10",
+    "@tabler/icons-react": "^3.44.0",
     "@tailwindcss/vite": "^4.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",

package/dist/chunks/close-button-DKaNIndU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"close-button-DKaNIndU.js","names":[],"sources":["../../src/components/button/close-button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes } from \"react\";\nimport { X } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\nconst CLOSE_SIZES = {\n  sm: { classes: \"size-9 *:size-5\" },\n  md: { classes: \"size-10 *:size-5\" },\n  lg: { classes: \"size-11 *:size-6\" },\n} satisfies VariantMap;\n\nexport interface CloseButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"color\"\n> {\n  /** Size variant. @default \"sm\" */\n  size?: keyof typeof CLOSE_SIZES;\n  /** Accessible label. @default \"Close\" */\n  label?: string;\n}\n\n/**\n * Icon-only dismiss control — a squircle chip that fills on hover. Adapts to\n * light/dark automatically via semantic tokens. Used by Dialog and dismissible\n * surfaces.\n */\nexport function CloseButton({\n  size = \"sm\",\n  label,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label || \"Close\"}\n      {...props}\n      className={cn(\n        \"squircle text-fg-pho-quaternary outline-pho-brand hover:bg-pho-ghost-hover hover:text-fg-pho-quaternary-hover inline-flex cursor-pointer items-center justify-center rounded-md p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\",\n        resolveVariant(CLOSE_SIZES, size),\n        className,\n      )}\n    >\n      <X\n        aria-hidden=\"true\"\n        weight=\"bold\"\n        className=\"transition-inherit-all shrink-0\"\n      />\n    </button>\n  );\n}\n\nCloseButton.displayName = \"CloseButton\";\n"],"mappings":";;;;;;AAKA,IAAM,IAAc;AAAA,EAClB,IAAI,EAAE,SAAS,kBAAkB;AAAA,EACjC,IAAI,EAAE,SAAS,mBAAmB;AAAA,EAClC,IAAI,EAAE,SAAS,mBAAmB;AACpC;AAiBA,SAAgB,EAAY,EAC1B,MAAA,IAAO,MACP,OAAA,GACA,WAAA,GACA,GAAG,EAAA,GACgB;AACnB,SACE,gBAAA,EAAC,UAAD;AAAA,IACE,MAAK;AAAA,IACL,cAAY,KAAS;AAAA,IACrB,GAAI;AAAA,IACJ,WAAW,EACT,kRACA,EAAe,GAAa,CAAI,GAChC,CACF;AAAA,cAEA,gBAAA,EAAC,GAAD;AAAA,MACE,eAAY;AAAA,MACZ,QAAO;AAAA,MACP,WAAU;AAAA,IACX,CAAA;AAAA,EACK,CAAA;AAEZ;AAEA,EAAY,cAAc"}

package/dist/chunks/input-DX7d5MlS.js

@@ -1,75 +0,0 @@
-"use client";
-import { t as r } from "./cn-7uGUzCOM.js";
-import { useState as E } from "react";
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { Eye as z, EyeSlash as A, WarningCircle as C } from "@phosphor-icons/react";
-import { Field as o } from "@base-ui/react/field";
-var L = {
-  sm: "px-3 py-2 text-sm",
-  md: "px-3 py-2 text-md",
-  lg: "px-3.5 py-2.5 text-md"
-}, P = {
-  sm: "pl-9",
-  md: "pl-10",
-  lg: "pl-10.5"
-}, S = {
-  sm: "left-3 size-4",
-  md: "left-3 size-5",
-  lg: "left-3.5 size-5"
-};
-function _({ label: n, hint: p, size: i = "md", invalid: t, icon: l, labelTrailing: u, disabled: h, required: d, type: c = "text", className: f, wrapperClassName: g, id: x, ref: b, ...y }) {
-  const [m, v] = E(!1), a = c === "password", N = a && m ? "text" : c, w = !!l, I = a || t;
-  return /* @__PURE__ */ s(o.Root, {
-    disabled: h,
-    className: "group/field flex w-full flex-col gap-1.5",
-    children: [
-      n && /* @__PURE__ */ s("div", {
-        className: "flex items-center justify-between gap-2",
-        children: [/* @__PURE__ */ s(o.Label, {
-          className: "text-pho-secondary flex cursor-default items-center gap-0.5 text-sm font-medium",
-          children: [n, d && /* @__PURE__ */ e("span", {
-            className: "text-pho-brand",
-            children: "*"
-          })]
-        }), u]
-      }),
-      /* @__PURE__ */ s("div", {
-        "data-invalid": t || void 0,
-        className: r("bg-pho-primary ring-pho-primary relative flex w-full items-center rounded-lg ring-1 transition-shadow duration-100 ease-linear ring-inset", "has-[input:focus-visible]:ring-pho-brand has-[input:focus-visible]:ring-2", "data-[invalid]:ring-pho-error-subtle data-[invalid]:has-[input:focus-visible]:ring-pho-error", "group-data-[disabled]/field:cursor-not-allowed group-data-[disabled]/field:opacity-50", g),
-        children: [
-          l && /* @__PURE__ */ e(l, { className: r("text-fg-pho-quaternary pointer-events-none absolute", S[i]) }),
-          /* @__PURE__ */ e(o.Control, {
-            ref: b,
-            id: x,
-            type: N,
-            required: d,
-            ...y,
-            className: r("text-pho-primary placeholder:text-pho-placeholder m-0 w-full bg-transparent outline-none disabled:cursor-not-allowed", L[i], w && P[i], I && "pr-9", f)
-          }),
-          t && !a && /* @__PURE__ */ e(C, {
-            weight: "fill",
-            className: "text-fg-pho-error pointer-events-none absolute right-3 size-4"
-          }),
-          a && /* @__PURE__ */ e("button", {
-            type: "button",
-            tabIndex: -1,
-            "aria-label": "Toggle password visibility",
-            onClick: () => v((D) => !D),
-            className: "text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover absolute right-3 flex cursor-pointer items-center transition duration-100 ease-linear focus:outline-none",
-            children: m ? /* @__PURE__ */ e(A, { className: "size-4" }) : /* @__PURE__ */ e(z, { className: "size-4" })
-          })
-        ]
-      }),
-      p && /* @__PURE__ */ e(o.Description, {
-        className: r("text-pho-tertiary text-sm", t && "text-pho-error"),
-        children: p
-      })
-    ]
-  });
-}
-_.displayName = "Input";
-export {
-  _ as t
-};
-
-//# sourceMappingURL=input-DX7d5MlS.js.map

package/dist/chunks/input-DX7d5MlS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-DX7d5MlS.js","names":[],"sources":["../../src/components/input/input.tsx"],"sourcesContent":["import {\n  useState,\n  type ComponentType,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { Eye, EyeSlash, WarningCircle } from \"@phosphor-icons/react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { cn } from \"../../utils/cn\";\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\nconst SIZE_PAD: Record<InputSize, string> = {\n  sm: \"px-3 py-2 text-sm\",\n  md: \"px-3 py-2 text-md\",\n  lg: \"px-3.5 py-2.5 text-md\",\n};\nconst LEADING_PAD: Record<InputSize, string> = {\n  sm: \"pl-9\",\n  md: \"pl-10\",\n  lg: \"pl-10.5\",\n};\nconst LEADING_ICON_POS: Record<InputSize, string> = {\n  sm: \"left-3 size-4\",\n  md: \"left-3 size-5\",\n  lg: \"left-3.5 size-5\",\n};\n\nexport interface InputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n> {\n  /** Field label (associated for accessibility). */\n  label?: ReactNode;\n  /** Helper text below the field; rendered in the error color when `invalid`. */\n  hint?: ReactNode;\n  /** Size variant. @default \"md\" */\n  size?: InputSize;\n  /** Render the invalid state (ring + icon + error-colored hint). */\n  invalid?: boolean;\n  /** Leading icon component (e.g. a Phosphor icon). */\n  icon?: ComponentType<{ className?: string }>;\n  /** Node rendered at the right edge of the label row (e.g. \"Forgot?\"). */\n  labelTrailing?: ReactNode;\n  /** Class applied to the input wrapper. */\n  wrapperClassName?: string;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * Text input built on Base UI `Field` (label/description a11y wiring) with\n * Pho's bordered surface, leading icon, invalid state, and a built-in password\n * reveal toggle.\n */\nexport function Input({\n  label,\n  hint,\n  size = \"md\",\n  invalid,\n  icon: Icon,\n  labelTrailing,\n  disabled,\n  required,\n  type = \"text\",\n  className,\n  wrapperClassName,\n  id,\n  ref,\n  ...props\n}: InputProps) {\n  const [reveal, setReveal] = useState(false);\n  const isPassword = type === \"password\";\n  const resolvedType = isPassword && reveal ? \"text\" : type;\n  const hasLeadingIcon = Boolean(Icon);\n  const hasTrailingIcon = isPassword || invalid;\n\n  return (\n    <Field.Root\n      disabled={disabled}\n      className=\"group/field flex w-full flex-col gap-1.5\"\n    >\n      {label && (\n        <div className=\"flex items-center justify-between gap-2\">\n          <Field.Label className=\"text-pho-secondary flex cursor-default items-center gap-0.5 text-sm font-medium\">\n            {label}\n            {required && <span className=\"text-pho-brand\">*</span>}\n          </Field.Label>\n          {labelTrailing}\n        </div>\n      )}\n\n      <div\n        data-invalid={invalid || undefined}\n        className={cn(\n          // Flat field surface — hairline ring only; elevation shadows are\n          // reserved for floating layers (menus/popovers/dialogs).\n          \"bg-pho-primary ring-pho-primary relative flex w-full items-center rounded-lg ring-1 transition-shadow duration-100 ease-linear ring-inset\",\n          \"has-[input:focus-visible]:ring-pho-brand has-[input:focus-visible]:ring-2\",\n          \"data-[invalid]:ring-pho-error-subtle data-[invalid]:has-[input:focus-visible]:ring-pho-error\",\n          \"group-data-[disabled]/field:cursor-not-allowed group-data-[disabled]/field:opacity-50\",\n          wrapperClassName,\n        )}\n      >\n        {Icon && (\n          <Icon\n            className={cn(\n              \"text-fg-pho-quaternary pointer-events-none absolute\",\n              LEADING_ICON_POS[size],\n            )}\n          />\n        )}\n\n        <Field.Control\n          ref={ref}\n          id={id}\n          type={resolvedType}\n          required={required}\n          {...props}\n          className={cn(\n            \"text-pho-primary placeholder:text-pho-placeholder m-0 w-full bg-transparent outline-none disabled:cursor-not-allowed\",\n            SIZE_PAD[size],\n            hasLeadingIcon && LEADING_PAD[size],\n            hasTrailingIcon && \"pr-9\",\n            className,\n          )}\n        />\n\n        {invalid && !isPassword && (\n          <WarningCircle\n            weight=\"fill\"\n            className=\"text-fg-pho-error pointer-events-none absolute right-3 size-4\"\n          />\n        )}\n\n        {isPassword && (\n          <button\n            type=\"button\"\n            // Reachable by click but skipped in tab order so Tab moves field→field.\n            tabIndex={-1}\n            aria-label=\"Toggle password visibility\"\n            onClick={() => setReveal((v) => !v)}\n            className=\"text-fg-pho-quaternary hover:text-fg-pho-quaternary-hover absolute right-3 flex cursor-pointer items-center transition duration-100 ease-linear focus:outline-none\"\n          >\n            {reveal ? (\n              <EyeSlash className=\"size-4\" />\n            ) : (\n              <Eye className=\"size-4\" />\n            )}\n          </button>\n        )}\n      </div>\n\n      {hint && (\n        <Field.Description\n          className={cn(\n            \"text-pho-tertiary text-sm\",\n            invalid && \"text-pho-error\",\n          )}\n        >\n          {hint}\n        </Field.Description>\n      )}\n    </Field.Root>\n  );\n}\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;AAaA,IAAM,IAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GACM,IAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GACM,IAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA4BA,SAAgB,EAAM,EACpB,OAAA,GACA,MAAA,GACA,MAAA,IAAO,MACP,SAAA,GACA,MAAM,GACN,eAAA,GACA,UAAA,GACA,UAAA,GACA,MAAA,IAAO,QACP,WAAA,GACA,kBAAA,GACA,IAAA,GACA,KAAA,GACA,GAAG,EAAA,GACU;AACb,QAAM,CAAC,GAAQ,CAAA,IAAa,EAAS,EAAK,GACpC,IAAa,MAAS,YACtB,IAAe,KAAc,IAAS,SAAS,GAC/C,IAAiB,EAAQ,GACzB,IAAkB,KAAc;AAEtC,SACE,gBAAA,EAAC,EAAM,MAAP;AAAA,IACY,UAAA;AAAA,IACV,WAAU;AAAA,cAFZ;AAAA,MAIG,KACC,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBAAf,CACE,gBAAA,EAAC,EAAM,OAAP;AAAA,UAAa,WAAU;AAAA,oBAAvB,CACG,GACA,KAAY,gBAAA,EAAC,QAAD;AAAA,YAAM,WAAU;AAAA,sBAAiB;AAAA,UAAO,CAAA,CAC1C;AAAA,YACZ,CACE;AAAA;MAGP,gBAAA,EAAC,OAAD;AAAA,QACE,gBAAc,KAAW;AAAA,QACzB,WAAW,EAGT,6IACA,6EACA,gGACA,yFACA,CACF;AAAA,kBAVF;AAAA,UAYG,KACC,gBAAA,EAAC,GAAD,EACE,WAAW,EACT,uDACA,EAAiB,CAAA,CACnB,EACD,CAAA;AAAA,UAGH,gBAAA,EAAC,EAAM,SAAP;AAAA,YACO,KAAA;AAAA,YACD,IAAA;AAAA,YACJ,MAAM;AAAA,YACI,UAAA;AAAA,YACV,GAAI;AAAA,YACJ,WAAW,EACT,wHACA,EAAS,CAAA,GACT,KAAkB,EAAY,CAAA,GAC9B,KAAmB,QACnB,CACF;AAAA,UACD,CAAA;AAAA,UAEA,KAAW,CAAC,KACX,gBAAA,EAAC,GAAD;AAAA,YACE,QAAO;AAAA,YACP,WAAU;AAAA,UACX,CAAA;AAAA,UAGF,KACC,gBAAA,EAAC,UAAD;AAAA,YACE,MAAK;AAAA,YAEL,UAAU;AAAA,YACV,cAAW;AAAA,YACX,SAAA,MAAe,EAAA,CAAW,MAAM,CAAC,CAAC;AAAA,YAClC,WAAU;AAAA,sBAET,IACC,gBAAA,EAAC,GAAD,EAAU,WAAU,SAAU,CAAA,IAE9B,gBAAA,EAAC,GAAD,EAAK,WAAU,SAAU,CAAA;AAAA,UAErB,CAAA;AAAA,QAEP;AAAA;MAEJ,KACC,gBAAA,EAAC,EAAM,aAAP;AAAA,QACE,WAAW,EACT,6BACA,KAAW,gBACb;AAAA,kBAEC;AAAA,MACgB,CAAA;AAAA,IAEX;AAAA;AAEhB;AAEA,EAAM,cAAc"}