@photon-ai/pho-ui 0.3.0 → 0.5.0

package/dist/chunks/input-DbJpdu6v.js

@@ -0,0 +1,106 @@
+"use client";
+import { t as r } from "./cn-7uGUzCOM.js";
+import { t as n } from "./createReactComponent-BqCmnqfX.js";
+import { useState as A } from "react";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { Field as s } from "@base-ui/react/field";
+var S = [
+  ["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"
+  }]
+], k = n("outline", "eye-off", "EyeOff", S), C = [["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"
+}]], D = n("outline", "eye", "Eye", C), R = [["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"
+}]], L = n("filled", "alert-circle-filled", "AlertCircleFilled", R), M = {
+  sm: "px-2.5 py-1.5 text-sm",
+  md: "px-2.5 py-1.5 text-md",
+  lg: "px-3 py-2 text-md"
+}, O = {
+  sm: "pl-8.5",
+  md: "pl-9.5",
+  lg: "pl-10"
+}, z = {
+  sm: "left-3 size-4",
+  md: "left-3 size-5",
+  lg: "left-3.5 size-5"
+}, F = {
+  sm: "rounded-lg",
+  md: "rounded-lg",
+  lg: "squircle rounded-xl"
+}, P = {
+  sm: "",
+  md: "",
+  lg: r("isolate before:pointer-events-none before:absolute before:-z-10 before:content-['']", "before:bg-pho-primary before:inset-px before:rounded-[11px]", "has-[input:focus-visible]:before:inset-0.5 has-[input:focus-visible]:before:rounded-[10px]", "before:transition-[inset,border-radius] before:duration-100 before:ease-linear")
+}, T = {
+  sm: "autofill:rounded-md",
+  md: "autofill:rounded-md",
+  lg: "autofill:rounded-[10px]"
+};
+function Z({ label: d, hint: p, size: t = "md", invalid: a, icon: i, labelTrailing: m, disabled: h, required: c, type: u = "text", className: g, wrapperClassName: v, id: b, ref: x, ...y }) {
+  const [f, N] = A(!1), o = u === "password", I = o && f ? "text" : u, _ = !!i, E = o || a;
+  return /* @__PURE__ */ l(s.Root, {
+    disabled: h,
+    className: "group/field flex w-full flex-col gap-1.5",
+    children: [
+      d && /* @__PURE__ */ l("div", {
+        className: "flex items-center justify-between gap-2",
+        children: [/* @__PURE__ */ l(s.Label, {
+          className: "text-pho-secondary flex cursor-default items-center gap-0.5 text-sm font-medium",
+          children: [d, c && /* @__PURE__ */ e("span", {
+            className: "text-pho-brand",
+            children: "*"
+          })]
+        }), m]
+      }),
+      /* @__PURE__ */ l("div", {
+        "data-invalid": a || void 0,
+        className: r("bg-pho-primary ring-pho-primary relative flex w-full items-center p-0.5 ring-1 transition-shadow duration-100 ease-linear ring-inset", F[t], P[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", z[t]) }),
+          /* @__PURE__ */ e(s.Control, {
+            ref: x,
+            id: b,
+            type: I,
+            required: c,
+            ...y,
+            className: r("text-pho-primary placeholder:text-pho-placeholder m-0 w-full bg-transparent outline-none disabled:cursor-not-allowed", M[t], T[t], _ && O[t], E && "pr-8.5", g)
+          }),
+          a && !o && /* @__PURE__ */ e(L, { className: "text-fg-pho-error pointer-events-none absolute right-3 size-4" }),
+          o && /* @__PURE__ */ e("button", {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": "Toggle password visibility",
+            onClick: () => N((w) => !w),
+            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: f ? /* @__PURE__ */ e(k, { className: "size-4" }) : /* @__PURE__ */ e(D, { className: "size-4" })
+          })
+        ]
+      }),
+      p && /* @__PURE__ */ e(s.Description, {
+        className: r("text-pho-tertiary text-sm", a && "text-pho-error"),
+        children: p
+      })
+    ]
+  });
+}
+Z.displayName = "Input";
+export {
+  Z as t
+};
+
+//# sourceMappingURL=input-DbJpdu6v.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-DbJpdu6v.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\n// Control padding per size. The wrapper carries a 2px inset (`p-0.5`) so the\n// control's border box — and the browser's autofill fill it paints — sits\n// inside the ring instead of over it; these paddings are the documented\n// effective padding (sm/md 12/8px, lg 14/10px) minus that 2px inset, so the\n// text position and total field height are unchanged.\nconst SIZE_PAD: Record<InputSize, string> = {\n  sm: \"px-2.5 py-1.5 text-sm\",\n  md: \"px-2.5 py-1.5 text-md\",\n  lg: \"px-3 py-2 text-md\",\n};\n// Effective icon clearance minus the wrapper's 2px inset.\nconst LEADING_PAD: Record<InputSize, string> = {\n  sm: \"pl-8.5\",\n  md: \"pl-9.5\",\n  lg: \"pl-10\",\n};\n// Icons are absolutely positioned, so they're placed from the wrapper's\n// padding edge — which, with no border, is the visible field edge; the\n// wrapper's `p-0.5` does not offset them.\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// Concentric inner-curve cover, `lg` only. Nested corner radii must follow\n// innerRadius = outerRadius − inset, so the hairline's inner edge at a 12px\n// outer radius is 11px at rest (ring-1) and 10px when focused (ring-2).\n// Browsers derive that automatically for plain round corners, but with\n// `corner-shape: superellipse(...)` shipping engines still scale (rather than\n// offset) the inner shadow curve, which renders the ring visibly thicker at\n// the four corners (see w3c/csswg-drafts#12961). This ::before repaints the\n// field surface over everything inside the correct concentric curve — a round\n// radius is the right parallel-offset approximation of the mild superellipse —\n// so the ring reads as a uniform hairline in every engine. `isolate` +\n// `-z-10` slot the cover above the wrapper's background/ring but below the\n// control's text, icons, and autofill fill. `sm`/`md` have no corner-shape,\n// so the native (already concentric) rendering is kept there.\n// The ::before is absolutely positioned, so its inset is measured from the\n// wrapper's border box (border 0): 1px in at rest, 2px in when focused.\nconst SIZE_RING_COVER: Record<InputSize, string> = {\n  sm: \"\",\n  md: \"\",\n  lg: cn(\n    \"isolate before:pointer-events-none before:absolute before:-z-10 before:content-['']\",\n    \"before:bg-pho-primary before:inset-px before:rounded-[11px]\",\n    \"has-[input:focus-visible]:before:inset-0.5 has-[input:focus-visible]:before:rounded-[10px]\",\n    \"before:transition-[inset,border-radius] before:duration-100 before:ease-linear\",\n  ),\n};\n// The control's border box sits 2px inside the wrapper (its `p-0.5` inset),\n// clear of both ring widths, so the browser's autofill fill paints inside the\n// hairline instead of over it. Its rounding follows the same concentric\n// formula (innerRadius = outerRadius − 2px inset): 8 − 2 = 6px (`rounded-md`)\n// at sm/md, 12 − 2 = 10px at lg. Round (not squircle) — the parallel offset\n// of the wrapper's mild superellipse is effectively circular.\nconst SIZE_AUTOFILL_RADIUS: Record<InputSize, string> = {\n  sm: \"autofill:rounded-md\",\n  md: \"autofill:rounded-md\",\n  lg: \"autofill:rounded-[10px]\",\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). `p-0.5`\n          // insets the control 2px (the focused ring width) so its background\n          // and the browser's autofill fill nest inside the ring; the size\n          // maps compensate so effective padding/height are unchanged.\n          \"bg-pho-primary ring-pho-primary relative flex w-full items-center p-0.5 ring-1 transition-shadow duration-100 ease-linear ring-inset\",\n          SIZE_RADIUS[size],\n          SIZE_RING_COVER[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            // 34px + the wrapper's 2px inset = the previous 36px clearance.\n            hasTrailingIcon && \"pr-8.5\",\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 { 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-CQ4cZvkC.js";
+import { t as E } from "../chunks/close-button-CNhn8z0w.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-7oOe-eaO.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-DbJpdu6v.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

@@ -3,22 +3,22 @@ import { t as o } from "./chunks/cn-7uGUzCOM.js";
 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 { 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-CQ4cZvkC.js";
+import { t as C } from "./chunks/input-DbJpdu6v.js";
+import { t as L } from "./chunks/close-button-CNhn8z0w.js";
+import { t as U } from "./chunks/dialog-7oOe-eaO.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/button/button.d.ts

@@ -1,5 +1,15 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
-/** Size axis — padding, text size, and icon-only (svgOnly) padding. */
+/**
+ * Size axis — padding, text size, and icon-only (svgOnly) padding.
+ *
+ * Icon-side tuck (LiftKit-derived optical correction): a side that carries an
+ * icon gets its padding divided by the golden ratio — an icon's rounded form
+ * brings its own whitespace, so the full text-edge padding reads as a hole.
+ * LiftKit: `--button-padX-sideWithIcon: calc(font-size / 1.618)`. Applied to
+ * Pho's paddings: sm 14px/φ ≈ 8px · md 16px/φ ≈ 10px · lg 20px/φ ≈ 12px,
+ * selected structurally via `:has()` on the slot markers (`data-icon` is
+ * `prefix`, `suffix`, or `loading` — the spinner is an icon too).
+ */
 export declare const BUTTON_SIZES: {
     sm: {
         classes: string;

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.5.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",