@photon-ai/pho-ui 0.4.0 → 0.5.0

package/dist/chunks/{input-e1k2gbET.js → input-DbJpdu6v.js}

@@ -1,10 +1,10 @@
 "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 { 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 k = [
+var S = [
   ["path", {
     d: "M10.585 10.587a2 2 0 0 0 2.829 2.828",
     key: "svg-0"
@@ -17,86 +17,90 @@ var k = [
     d: "M3 3l18 18",
     key: "svg-2"
   }]
-], D = n("outline", "eye-off", "EyeOff", k), S = [["path", {
+], 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"
-}]], C = n("outline", "eye", "Eye", S), L = [["path", {
+}]], 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"
-}]], 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"
+}]], 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-9",
-  md: "pl-10",
-  lg: "pl-10.5"
-}, R = {
+  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"
-}, q = {
+}, F = {
   sm: "rounded-lg",
   md: "rounded-lg",
   lg: "squircle rounded-xl"
-}, F = {
-  sm: "autofill:rounded-lg",
-  md: "autofill:rounded-lg",
-  lg: "squircle autofill: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 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,
+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__ */ o("div", {
+      d && /* @__PURE__ */ l("div", {
         className: "flex items-center justify-between gap-2",
-        children: [/* @__PURE__ */ o(s.Label, {
+        children: [/* @__PURE__ */ l(s.Label, {
           className: "text-pho-secondary flex cursor-default items-center gap-0.5 text-sm font-medium",
-          children: [d, p && /* @__PURE__ */ e("span", {
+          children: [d, c && /* @__PURE__ */ e("span", {
             className: "text-pho-brand",
             children: "*"
           })]
-        }), f]
+        }), m]
       }),
-      /* @__PURE__ */ o("div", {
+      /* @__PURE__ */ l("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),
+        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", R[t]) }),
+          i && /* @__PURE__ */ e(i, { className: r("text-fg-pho-quaternary pointer-events-none absolute", z[t]) }),
           /* @__PURE__ */ e(s.Control, {
-            ref: y,
-            id: x,
+            ref: x,
+            id: b,
             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)
+            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 && !l && /* @__PURE__ */ e(M, { className: "text-fg-pho-error pointer-events-none absolute right-3 size-4" }),
-          l && /* @__PURE__ */ e("button", {
+          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((A) => !A),
+            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: u ? /* @__PURE__ */ e(D, { className: "size-4" }) : /* @__PURE__ */ e(C, { className: "size-4" })
+            children: f ? /* @__PURE__ */ e(k, { className: "size-4" }) : /* @__PURE__ */ e(D, { className: "size-4" })
           })
         ]
       }),
-      c && /* @__PURE__ */ e(s.Description, {
+      p && /* @__PURE__ */ e(s.Description, {
         className: r("text-pho-tertiary text-sm", a && "text-pho-error"),
-        children: c
+        children: p
       })
     ]
   });
 }
-P.displayName = "Input";
+Z.displayName = "Input";
 export {
-  P as t
+  Z as t
 };
 
-//# sourceMappingURL=input-e1k2gbET.js.map
+//# 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/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-CRiiwy6K.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/dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { t } from "../chunks/dialog-sTOaOEB2.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-e1k2gbET.js";
+import { t as e } from "../chunks/input-DbJpdu6v.js";
 export {
   e as Input
 };

package/dist/index.js

@@ -3,10 +3,10 @@ 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/input-e1k2gbET.js";
-import { t as L } from "./chunks/close-button-CRiiwy6K.js";
-import { t as U } from "./chunks/dialog-sTOaOEB2.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,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {

package/dist/chunks/button-BMDHIgZh.js

@@ -1,360 +0,0 @@
-"use client";
-import { t as l } from "./cn-7uGUzCOM.js";
-import { n as R, r as w } from "./link-provider-9TFNyDqO.js";
-import { t as v } from "./resolve-variant-CcD8iG5l.js";
-import { isValidElement as T } from "react";
-import { Fragment as V, jsx as t, jsxs as k } from "react/jsx-runtime";
-import { motion as b } from "motion/react";
-var q = l("group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"), B = {
-  sm: {
-    classes: "gap-1 px-3.5 py-1.5 text-sm font-medium data-svg-only:p-2",
-    description: "Small — compact rows, tables, and toolbars"
-  },
-  md: {
-    classes: "gap-1 px-4 py-2 text-sm font-medium data-svg-only:p-2.5",
-    description: "Medium — the default"
-  },
-  lg: {
-    classes: "gap-1.5 px-5 py-2.5 text-md font-medium data-svg-only:p-3",
-    description: "Large — prominent and marketing actions"
-  }
-}, A = {
-  rounded: {
-    classes: "rounded-full",
-    description: "Pill — the default; every button on photon.codes"
-  },
-  square: {
-    classes: "rounded-lg",
-    description: "Gently rounded corners for dense app chrome"
-  },
-  circle: {
-    classes: "rounded-full",
-    description: "Circular — pair with svgOnly for round icon buttons"
-  }
-}, M = {
-  primary: {
-    classes: "bg-pho-brand-solid text-pho-on-brand hover:bg-pho-brand-solid-hover data-loading:bg-pho-brand-solid-hover *:data-icon:opacity-60 hover:*:data-icon:opacity-75",
-    description: "High-emphasis primary action (default)"
-  },
-  secondary: {
-    classes: "bg-pho-primary text-pho-secondary ring-1 ring-pho-secondary ring-inset hover:bg-pho-primary-hover hover:text-pho-secondary-hover data-loading:bg-pho-primary-hover *:data-icon:text-fg-pho-quaternary hover:*:data-icon:text-fg-pho-quaternary-hover",
-    description: "Neutral, supporting action"
-  },
-  tertiary: {
-    classes: "text-pho-tertiary hover:bg-pho-ghost-hover hover:text-pho-tertiary-hover data-loading:bg-pho-ghost-hover *:data-icon:text-fg-pho-quaternary hover:*:data-icon:text-fg-pho-quaternary-hover",
-    description: "Low-emphasis, borderless action"
-  },
-  error: {
-    classes: "bg-pho-error-solid text-white outline-pho-error hover:bg-pho-error-solid-hover data-loading:bg-pho-error-solid-hover *:data-icon:opacity-70 hover:*:data-icon:opacity-85",
-    description: "Destructive confirmation"
-  }
-};
-function g(e) {
-  const { variant: r = "primary", size: n = "md", shape: s = "rounded", className: o } = e ?? {};
-  return l(q, v(A, s), v(B, n), v(M, r), o);
-}
-var H = "transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-[1.125em] [&>svg]:shrink-0";
-function y({ position: e, children: r }) {
-  return /* @__PURE__ */ t("span", {
-    "data-icon": e,
-    className: H,
-    children: r
-  });
-}
-function N() {
-  return /* @__PURE__ */ k("svg", {
-    fill: "none",
-    viewBox: "0 0 20 20",
-    "aria-hidden": "true",
-    children: [/* @__PURE__ */ t("circle", {
-      className: "stroke-current opacity-30",
-      cx: "10",
-      cy: "10",
-      r: "8",
-      fill: "none",
-      strokeWidth: "2"
-    }), /* @__PURE__ */ t("circle", {
-      className: "origin-center animate-spin stroke-current",
-      cx: "10",
-      cy: "10",
-      r: "8",
-      fill: "none",
-      strokeWidth: "2",
-      strokeDasharray: "12.5 50",
-      strokeLinecap: "round"
-    })]
-  });
-}
-function _(e, r) {
-  return e == null || e === !1 ? null : w(e) ? /* @__PURE__ */ t(y, {
-    position: r,
-    children: /* @__PURE__ */ t(e, {})
-  }) : T(e) ? /* @__PURE__ */ t(y, {
-    position: r,
-    children: e
-  }) : null;
-}
-function C({ svgOnly: e, loading: r, prefix: n, suffix: s, children: o }) {
-  return e ? r ? /* @__PURE__ */ t(N, {}) : o : /* @__PURE__ */ k(V, { children: [
-    r ? /* @__PURE__ */ t(y, {
-      position: "loading",
-      children: /* @__PURE__ */ t(N, {})
-    }) : _(n, "prefix"),
-    o != null && o !== !1 && /* @__PURE__ */ t("span", {
-      "data-text": !0,
-      className: "transition-inherit-all px-0.5",
-      children: o
-    }),
-    _(s, "suffix")
-  ] });
-}
-function F(e, r) {
-  e && !r && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("Button: `svgOnly` buttons require an `aria-label` that names the action.");
-}
-function x({ variant: e, size: r, shape: n, prefix: s, suffix: o, svgOnly: a, loading: i, children: d, className: h, ref: c, ...p }) {
-  return F(a, p["aria-label"]), /* @__PURE__ */ t("button", {
-    ref: c,
-    type: "button",
-    ...p,
-    "aria-busy": i || void 0,
-    "data-loading": i ? "true" : void 0,
-    "data-svg-only": a ? "true" : void 0,
-    className: l(g({
-      variant: e,
-      size: r,
-      shape: n
-    }), i && "pointer-events-none", a && "[&>svg]:size-[1.25em] [&>svg]:shrink-0", h),
-    children: C({
-      svgOnly: a,
-      loading: i,
-      prefix: s,
-      suffix: o,
-      children: d
-    })
-  });
-}
-x.displayName = "Button";
-function E({ variant: e, size: r, shape: n, prefix: s, suffix: o, svgOnly: a, loading: i, disabled: d, href: h, children: c, className: p, ...u }) {
-  return F(a, u["aria-label"]), /* @__PURE__ */ t(R(), {
-    href: h,
-    ...u,
-    "aria-disabled": d || i || void 0,
-    "aria-busy": i || void 0,
-    "data-loading": i ? "true" : void 0,
-    "data-svg-only": a ? "true" : void 0,
-    className: l(g({
-      variant: e,
-      size: r,
-      shape: n
-    }), i && "pointer-events-none", a && "[&>svg]:size-[1.25em] [&>svg]:shrink-0", p),
-    children: C({
-      svgOnly: a,
-      loading: i,
-      prefix: s,
-      suffix: o,
-      children: c
-    })
-  });
-}
-E.displayName = "ButtonLink";
-var L = {
-  type: "spring",
-  stiffness: 200,
-  damping: 30,
-  mass: 0.1
-}, D = l("squircle overflow-hidden", "hover:bg-pho-brand-solid data-loading:bg-pho-brand-solid", "*:data-icon:opacity-100 hover:*:data-icon:opacity-100", "transition-none"), P = l("[--pho-sheen:light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.12))]", "shadow-[inset_0_0_0_1px_var(--border-color-pho-on-brand),inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]"), U = {
-  "--pho-sheen-y": "0px",
-  "--pho-sheen-blur": "5px",
-  "--pho-sheen-spread": "2px"
-}, j = {
-  sm: {
-    "--pho-sheen-y": "-3px",
-    "--pho-sheen-blur": "8px",
-    "--pho-sheen-spread": "2px",
-    gap: 0
-  },
-  md: {
-    "--pho-sheen-y": "-3px",
-    "--pho-sheen-blur": "8px",
-    "--pho-sheen-spread": "2px",
-    gap: 0
-  },
-  lg: {
-    "--pho-sheen-y": "-6px",
-    "--pho-sheen-blur": "14px",
-    "--pho-sheen-spread": "1px",
-    gap: 4
-  }
-}, re = B;
-function te(e) {
-  const { size: r = "md", fullWidth: n, className: s } = e ?? {};
-  return g({
-    variant: "primary",
-    size: r,
-    shape: "rounded",
-    className: f(n, s)
-  });
-}
-function f(e, r) {
-  return l(D, P, e && "w-full", r);
-}
-function O(e) {
-  return {
-    rest: {
-      ...U,
-      gap: 0
-    },
-    hover: { ...j[e] }
-  };
-}
-var G = {
-  sm: {
-    rest: {
-      opacity: 0,
-      width: 1,
-      height: 9
-    },
-    hover: {
-      opacity: 1,
-      width: 17,
-      height: 18
-    }
-  },
-  md: {
-    rest: {
-      opacity: 0,
-      width: 1,
-      height: 9
-    },
-    hover: {
-      opacity: 1,
-      width: 17,
-      height: 18
-    }
-  },
-  lg: {
-    rest: {
-      opacity: 0,
-      width: 1,
-      height: 10
-    },
-    hover: {
-      opacity: 1,
-      width: 20,
-      height: 21
-    }
-  }
-};
-function S({ position: e, size: r, children: n }) {
-  return /* @__PURE__ */ t(b.span, {
-    "data-icon": e,
-    variants: G[r],
-    transition: L,
-    style: {
-      display: "inline-flex",
-      flex: "none",
-      alignItems: "center",
-      overflow: "hidden"
-    },
-    className: "pointer-events-none [&>svg]:block [&>svg]:size-full",
-    children: n
-  });
-}
-function m(e, r, n) {
-  if (!(e == null || e === !1)) {
-    if (w(e)) return /* @__PURE__ */ t(S, {
-      position: r,
-      size: n,
-      children: /* @__PURE__ */ t(e, {})
-    });
-    if (T(e)) return /* @__PURE__ */ t(S, {
-      position: r,
-      size: n,
-      children: e
-    });
-  }
-}
-function I(e, r) {
-  return {
-    initial: !1,
-    animate: "rest",
-    whileHover: r ? void 0 : "hover",
-    variants: O(e),
-    transition: L
-  };
-}
-var Z = b.create(x), W = b.create(E);
-function J({ size: e = "md", fullWidth: r, animated: n = !0, prefix: s, suffix: o, svgOnly: a, loading: i, children: d, className: h, ref: c, ...p }) {
-  return n ? /* @__PURE__ */ t(Z, {
-    ref: c,
-    variant: "primary",
-    size: e,
-    shape: "rounded",
-    prefix: a ? s : m(s, "prefix", e),
-    suffix: a ? o : m(o, "suffix", e),
-    svgOnly: a,
-    loading: i,
-    ...I(e, p.disabled || i),
-    ...p,
-    className: f(r, h),
-    children: d
-  }) : /* @__PURE__ */ t(x, {
-    ref: c,
-    variant: "primary",
-    size: e,
-    shape: "rounded",
-    prefix: s,
-    suffix: o,
-    svgOnly: a,
-    loading: i,
-    className: f(r, h),
-    ...p,
-    children: d
-  });
-}
-J.displayName = "EffectButton";
-function K({ size: e = "md", fullWidth: r, animated: n = !0, prefix: s, suffix: o, svgOnly: a, loading: i, disabled: d, href: h, children: c, className: p, ...u }) {
-  return n ? /* @__PURE__ */ t(W, {
-    href: h,
-    variant: "primary",
-    size: e,
-    shape: "rounded",
-    prefix: a ? s : m(s, "prefix", e),
-    suffix: a ? o : m(o, "suffix", e),
-    svgOnly: a,
-    loading: i,
-    disabled: d,
-    ...I(e, d || i),
-    ...u,
-    className: f(r, p),
-    children: c
-  }) : /* @__PURE__ */ t(E, {
-    href: h,
-    variant: "primary",
-    size: e,
-    shape: "rounded",
-    prefix: s,
-    suffix: o,
-    svgOnly: a,
-    loading: i,
-    disabled: d,
-    className: f(r, p),
-    ...u,
-    children: c
-  });
-}
-K.displayName = "EffectButtonLink";
-export {
-  E as a,
-  K as c,
-  x as i,
-  g as l,
-  B as n,
-  re as o,
-  M as r,
-  J as s,
-  A as t,
-  te as u
-};
-
-//# sourceMappingURL=button-BMDHIgZh.js.map