@photon-ai/pho-ui 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# @photon-ai/pho-ui
+
+Photon's React component library — the Pho Design System. Built on
+[Base UI](https://base-ui.com) and Tailwind v4.
+
+## Install
+
+```bash
+pnpm add @photon-ai/pho-ui
+```
+
+Peer dependencies: `react`, `react-dom`, `@phosphor-icons/react`.
+
+## Styles (Tailwind v4)
+
+In your app's CSS:
+
+```css
+@import "tailwindcss";
+@import "@photon-ai/pho-ui/styles";
+@import "@photon-ai/pho-ui/styles/fonts"; /* optional: PolySans + Azeret Mono */
+@source "../node_modules/@photon-ai/pho-ui/dist";
+```
+
+Toggle dark mode by setting `data-mode="dark"` (or a `.dark` class) on a wrapper.
+
+## Usage
+
+```tsx
+import { Button } from "@photon-ai/pho-ui/components/button";
+import { Input } from "@photon-ai/pho-ui/components/input";
+import { Dialog } from "@photon-ai/pho-ui/components/dialog";
+
+<Button color="primary">Save</Button>;
+```
+
+Prefer the granular entry points (`@photon-ai/pho-ui/components/*`,
+`@photon-ai/pho-ui/primitives/*`, `@photon-ai/pho-ui/utils`) for best tree-shaking; a
+root barrel (`@photon-ai/pho-ui`) is also available.
+
+### Links
+
+Pho is router-agnostic. Inject your router's link component once:
+
+```tsx
+import { LinkProvider } from "@photon-ai/pho-ui/utils";
+
+<LinkProvider component={MyRouterLink}>{app}</LinkProvider>;
+```

package/dist/chunks/button-9pp4g7en.js

@@ -0,0 +1,334 @@
+"use client";
+import { t as p } from "./cn-D6jQqeRj.js";
+import { n as T, r as S } from "./link-provider-9TFNyDqO.js";
+import { t as m } from "./resolve-variant-CcD8iG5l.js";
+import { isValidElement as B, useMemo as R } from "react";
+import { Fragment as _, jsx as t, jsxs as g } from "react/jsx-runtime";
+import { motion as y } from "motion/react";
+var q = p("group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-pho-brand transition duration-100 ease-linear before:absolute 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"), M = {
+  sm: {
+    classes: "gap-1 px-3 py-2 text-sm font-semibold data-svg-only:p-2",
+    description: "Small — compact rows, tables, and toolbars"
+  },
+  md: {
+    classes: "gap-1 px-3.5 py-2.5 text-sm font-semibold data-svg-only:p-2.5",
+    description: "Medium — the default"
+  },
+  lg: {
+    classes: "gap-1.5 px-4 py-2.5 text-md font-semibold data-svg-only:p-3",
+    description: "Large — prominent and marketing actions"
+  }
+}, O = {
+  square: {
+    classes: "rounded-lg before:rounded-[7px]",
+    description: "Default — gently rounded corners"
+  },
+  circle: {
+    classes: "rounded-full before:rounded-full",
+    description: "Circular — pair with svgOnly for round icon buttons"
+  },
+  rounded: {
+    classes: "rounded-full before:rounded-full",
+    description: "Pill — marketing CTAs, often with shadow"
+  }
+}, z = {
+  primary: {
+    classes: "bg-pho-brand-solid text-white shadow-pho-skeuo-xs ring-1 ring-transparent ring-inset hover:bg-pho-brand-solid-hover data-loading:bg-pho-brand-solid-hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-white/60 hover:*:data-icon:text-white/70",
+    description: "High-emphasis primary action (default)"
+  },
+  secondary: {
+    classes: "bg-pho-primary text-pho-secondary shadow-pho-skeuo-xs ring-1 ring-pho-primary 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-primary-hover hover:text-pho-tertiary-hover data-loading:bg-pho-primary-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 shadow-pho-skeuo-xs ring-1 ring-transparent outline-pho-error ring-inset hover:bg-pho-error-solid-hover data-loading:bg-pho-error-solid-hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-white/60 hover:*:data-icon:text-white/70",
+    description: "Destructive confirmation"
+  }
+};
+function C(e) {
+  const { variant: r = "primary", size: i = "md", shape: n = "square", shadow: a, className: s } = e ?? {};
+  return p(q, m(O, n), m(M, i), m(z, r), a && "shadow-pho-md", s);
+}
+var D = "transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-5 [&>svg]:shrink-0";
+function b({ position: e, children: r }) {
+  return /* @__PURE__ */ t("span", {
+    "data-icon": e,
+    className: D,
+    children: r
+  });
+}
+function v() {
+  return /* @__PURE__ */ g("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 w(e, r) {
+  return e == null || e === !1 ? null : S(e) ? /* @__PURE__ */ t(b, {
+    position: r,
+    children: /* @__PURE__ */ t(e, {})
+  }) : B(e) ? /* @__PURE__ */ t(b, {
+    position: r,
+    children: e
+  }) : null;
+}
+function F({ svgOnly: e, loading: r, prefix: i, suffix: n, children: a }) {
+  return e ? r ? /* @__PURE__ */ t(v, {}) : a : /* @__PURE__ */ g(_, { children: [
+    r ? /* @__PURE__ */ t(b, {
+      position: "loading",
+      children: /* @__PURE__ */ t(v, {})
+    }) : w(i, "prefix"),
+    a != null && a !== !1 && /* @__PURE__ */ t("span", {
+      "data-text": !0,
+      className: "transition-inherit-all px-0.5",
+      children: a
+    }),
+    w(n, "suffix")
+  ] });
+}
+function x(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 H({ variant: e, size: r, shape: i, shadow: n, prefix: a, suffix: s, svgOnly: o, loading: d, children: u, className: c, ref: l, ...h }) {
+  return x(o, h["aria-label"]), /* @__PURE__ */ t("button", {
+    ref: l,
+    type: "button",
+    ...h,
+    "aria-busy": d || void 0,
+    "data-loading": d ? "true" : void 0,
+    "data-svg-only": o ? "true" : void 0,
+    className: p(C({
+      variant: e,
+      size: r,
+      shape: i,
+      shadow: n
+    }), d && "pointer-events-none", o && "[&>svg]:size-5 [&>svg]:shrink-0", c),
+    children: F({
+      svgOnly: o,
+      loading: d,
+      prefix: a,
+      suffix: s,
+      children: u
+    })
+  });
+}
+H.displayName = "Button";
+function U({ variant: e, size: r, shape: i, shadow: n, prefix: a, suffix: s, svgOnly: o, loading: d, disabled: u, href: c, children: l, className: h, ...f }) {
+  return x(o, f["aria-label"]), /* @__PURE__ */ t(T(), {
+    href: c,
+    ...f,
+    "aria-disabled": u || d || void 0,
+    "aria-busy": d || void 0,
+    "data-loading": d ? "true" : void 0,
+    "data-svg-only": o ? "true" : void 0,
+    className: p(C({
+      variant: e,
+      size: r,
+      shape: i,
+      shadow: n
+    }), d && "pointer-events-none", o && "[&>svg]:size-5 [&>svg]:shrink-0", h),
+    children: F({
+      svgOnly: o,
+      loading: d,
+      prefix: a,
+      suffix: s,
+      children: l
+    })
+  });
+}
+U.displayName = "ButtonLink";
+var j = p("squircle relative inline-flex h-max cursor-pointer items-center justify-center overflow-hidden rounded-full border font-medium whitespace-nowrap", "outline-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"), A = {
+  type: "spring",
+  stiffness: 200,
+  damping: 30,
+  mass: 0.1
+}, P = "inset 0px 0px 5px 2px rgba(255, 255, 255, 0.5)", N = {
+  sm: {
+    boxShadow: "inset 0px -3px 8px 2px rgba(255, 255, 255, 0.5)",
+    gap: 0
+  },
+  md: {
+    boxShadow: "inset 0px -6px 14px 1px rgba(255, 255, 255, 0.5)",
+    gap: 4
+  }
+}, W = {
+  sm: {
+    classes: "p-2 text-sm data-svg-only:p-2",
+    description: "Small — the compact 'Variant 2' (14px label, 8px padding)"
+  },
+  md: {
+    classes: "px-4 py-3 text-md data-svg-only:p-3",
+    description: "Medium — the 'Variant 1' (16px label, 12×16 padding)"
+  }
+}, Z = {
+  primary: {
+    classes: "border-white/15 bg-pho-brand-solid text-white",
+    description: "Brand fill with the glossy inset sheen (default)"
+  },
+  secondary: {
+    classes: "border-transparent bg-pho-primary text-pho-secondary shadow-pho-skeuo-xs ring-1 ring-pho-primary ring-inset transition-colors duration-100 ease-linear hover:bg-pho-primary-hover hover:text-pho-secondary-hover data-loading:bg-pho-primary-hover",
+    description: "Neutral white-card pill (OAuth / supporting CTA), no sheen"
+  }
+};
+function L(e) {
+  const { variant: r = "primary", size: i = "md", fullWidth: n, className: a } = e ?? {};
+  return p(j, m(W, i), m(Z, r), n && "w-full", a);
+}
+function G(e, r) {
+  return r === "secondary" ? {
+    rest: { gap: 0 },
+    hover: { gap: N[e].gap }
+  } : {
+    rest: {
+      boxShadow: P,
+      gap: 0
+    },
+    hover: N[e]
+  };
+}
+var J = {
+  rest: {
+    opacity: 0,
+    width: 1,
+    height: 10
+  },
+  hover: {
+    opacity: 1,
+    width: 20,
+    height: 21
+  }
+};
+function E({ position: e, children: r }) {
+  return /* @__PURE__ */ t(y.span, {
+    "data-icon": e,
+    variants: J,
+    transition: A,
+    style: {
+      display: "inline-flex",
+      flex: "none",
+      alignItems: "center",
+      overflow: "hidden"
+    },
+    className: "pointer-events-none [&>svg]:block [&>svg]:size-full",
+    children: r
+  });
+}
+function k(e, r) {
+  return e == null || e === !1 ? null : S(e) ? /* @__PURE__ */ t(E, {
+    position: r,
+    children: /* @__PURE__ */ t(e, {})
+  }) : B(e) ? /* @__PURE__ */ t(E, {
+    position: r,
+    children: e
+  }) : null;
+}
+function V({ svgOnly: e, loading: r, prefix: i, suffix: n, children: a }) {
+  return e ? r ? /* @__PURE__ */ t(v, {}) : a : /* @__PURE__ */ g(_, { children: [
+    r ? /* @__PURE__ */ t(b, {
+      position: "loading",
+      children: /* @__PURE__ */ t(v, {})
+    }) : k(i, "prefix"),
+    a != null && a !== !1 && /* @__PURE__ */ t("span", {
+      "data-text": !0,
+      className: "px-0.5",
+      children: a
+    }),
+    k(n, "suffix")
+  ] });
+}
+function I(e, r) {
+  return {
+    initial: !1,
+    animate: "rest",
+    whileHover: "hover",
+    variants: G(e, r),
+    transition: A
+  };
+}
+function K({ variant: e = "primary", size: r = "md", fullWidth: i, prefix: n, suffix: a, svgOnly: s, loading: o, children: d, className: u, ref: c, ...l }) {
+  return x(s, l["aria-label"]), /* @__PURE__ */ t(y.button, {
+    ref: c,
+    type: "button",
+    ...I(r, e),
+    ...l,
+    "aria-busy": o || void 0,
+    "data-loading": o ? "true" : void 0,
+    "data-svg-only": s ? "true" : void 0,
+    className: p(L({
+      variant: e,
+      size: r,
+      fullWidth: i
+    }), o && "pointer-events-none", s && "[&>svg]:size-5 [&>svg]:shrink-0", u),
+    children: V({
+      svgOnly: s,
+      loading: o,
+      prefix: n,
+      suffix: a,
+      children: d
+    })
+  });
+}
+K.displayName = "EffectButton";
+function Q({ variant: e = "primary", size: r = "md", fullWidth: i, prefix: n, suffix: a, svgOnly: s, loading: o, disabled: d, href: u, children: c, className: l, ...h }) {
+  x(s, h["aria-label"]);
+  const f = T();
+  return /* @__PURE__ */ t(R(() => y.create(f), [f]), {
+    href: u,
+    ...I(r, e),
+    ...h,
+    "aria-disabled": d || o || void 0,
+    "aria-busy": o || void 0,
+    "data-loading": o ? "true" : void 0,
+    "data-svg-only": s ? "true" : void 0,
+    className: p(L({
+      variant: e,
+      size: r,
+      fullWidth: i
+    }), o && "pointer-events-none", s && "[&>svg]:size-5 [&>svg]:shrink-0", l),
+    children: V({
+      svgOnly: s,
+      loading: o,
+      prefix: n,
+      suffix: a,
+      children: c
+    })
+  });
+}
+Q.displayName = "EffectButtonLink";
+export {
+  U as a,
+  K as c,
+  L as d,
+  H as i,
+  Q as l,
+  M as n,
+  W as o,
+  z as r,
+  Z as s,
+  O as t,
+  C as u
+};
+
+//# sourceMappingURL=button-9pp4g7en.js.map

package/dist/chunks/button-9pp4g7en.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-9pp4g7en.js","names":[],"sources":["../../src/components/button/button.tsx"],"sourcesContent":["import {\n  isValidElement,\n  useMemo,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type FC,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { motion, type HTMLMotionProps } from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\nimport { isReactComponent } from \"../../utils/is-react-component\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE emphasis axis, kept deliberately small. `variant` is a closed,\n *   semantic set — a single high-emphasis default plus the supporting and\n *   intent variants you actually reach for. There is no `ghost`, no `link`,\n *   and no second destructive: navigation belongs to `ButtonLink`, and an\n *   inline text link is an anchor, not a button.\n * - THREE sizes (`sm` / `md` / `lg`, default `md`). No `xs` / `xl`.\n * - `prefix` / `suffix` are generic slots (icon, spinner, count…), not\n *   icon-only props. `svgOnly` makes an icon button and *requires* an\n *   `aria-label`. Boolean flags (`loading`, `shadow`) are declarative.\n */\n\nconst COMMON_ROOT = cn(\n  \"group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-pho-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2\",\n  // Disabled (native `disabled` on <button>, `aria-disabled` on links).\n  \"disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none\",\n);\n\n/** Size axis — padding, text size, and icon-only (svgOnly) padding. */\nexport const BUTTON_SIZES = {\n  sm: {\n    classes: \"gap-1 px-3 py-2 text-sm font-semibold data-svg-only:p-2\",\n    description: \"Small — compact rows, tables, and toolbars\",\n  },\n  md: {\n    classes: \"gap-1 px-3.5 py-2.5 text-sm font-semibold data-svg-only:p-2.5\",\n    description: \"Medium — the default\",\n  },\n  lg: {\n    classes: \"gap-1.5 px-4 py-2.5 text-md font-semibold data-svg-only:p-3\",\n    description: \"Large — prominent and marketing actions\",\n  },\n} satisfies VariantMap;\n\n/** Shape axis — corner treatment. `square` is the default text-button shape. */\nexport const BUTTON_SHAPES = {\n  square: {\n    classes: \"rounded-lg before:rounded-[7px]\",\n    description: \"Default — gently rounded corners\",\n  },\n  circle: {\n    classes: \"rounded-full before:rounded-full\",\n    description: \"Circular — pair with svgOnly for round icon buttons\",\n  },\n  rounded: {\n    classes: \"rounded-full before:rounded-full\",\n    description: \"Pill — marketing CTAs, often with shadow\",\n  },\n} satisfies VariantMap;\n\n/** Emphasis axis — a tight, semantic set. `primary` is the default. */\nexport const BUTTON_VARIANTS = {\n  primary: {\n    classes:\n      \"bg-pho-brand-solid text-white shadow-pho-skeuo-xs ring-1 ring-transparent ring-inset hover:bg-pho-brand-solid-hover data-loading:bg-pho-brand-solid-hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-white/60 hover:*:data-icon:text-white/70\",\n    description: \"High-emphasis primary action (default)\",\n  },\n  secondary: {\n    classes:\n      \"bg-pho-primary text-pho-secondary shadow-pho-skeuo-xs ring-1 ring-pho-primary 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\",\n    description: \"Neutral, supporting action\",\n  },\n  tertiary: {\n    classes:\n      \"text-pho-tertiary hover:bg-pho-primary-hover hover:text-pho-tertiary-hover data-loading:bg-pho-primary-hover *:data-icon:text-fg-pho-quaternary hover:*:data-icon:text-fg-pho-quaternary-hover\",\n    description: \"Low-emphasis, borderless action\",\n  },\n  error: {\n    classes:\n      \"bg-pho-error-solid text-white shadow-pho-skeuo-xs ring-1 ring-transparent outline-pho-error ring-inset hover:bg-pho-error-solid-hover data-loading:bg-pho-error-solid-hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-white/60 hover:*:data-icon:text-white/70\",\n    description: \"Destructive confirmation\",\n  },\n} satisfies VariantMap;\n\nexport type ButtonSize = keyof typeof BUTTON_SIZES;\nexport type ButtonShape = keyof typeof BUTTON_SHAPES;\nexport type ButtonVariant = keyof typeof BUTTON_VARIANTS;\n\n/** Compose the full class string for a button — exported for reuse/testing. */\nexport function buttonVariants(opts?: {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  shape?: ButtonShape;\n  shadow?: boolean;\n  className?: string;\n}): string {\n  const {\n    variant = \"primary\",\n    size = \"md\",\n    shape = \"square\",\n    shadow,\n    className,\n  } = opts ?? {};\n  return cn(\n    COMMON_ROOT,\n    resolveVariant(BUTTON_SHAPES, shape),\n    resolveVariant(BUTTON_SIZES, size),\n    resolveVariant(BUTTON_VARIANTS, variant),\n    shadow && \"shadow-pho-md\",\n    className,\n  );\n}\n\n/** An icon/element slot rendered before or after the label. */\ntype Slottable = ReactNode | FC<{ className?: string }>;\n\ninterface ButtonBaseProps {\n  /** Emphasis variant. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Size variant. @default \"md\" */\n  size?: ButtonSize;\n  /** Corner shape. @default \"square\" */\n  shape?: ButtonShape;\n  /** Add an elevation shadow (marketing / `rounded`). */\n  shadow?: boolean;\n  /** Slot before the label — a component (`Plus`) or element (`<Plus />`). */\n  prefix?: Slottable;\n  /** Slot after the label. */\n  suffix?: Slottable;\n  /** Render as an icon-only button. Requires an `aria-label`. */\n  svgOnly?: boolean;\n  /** Show a spinner and block interaction while staying readable. */\n  loading?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface ButtonProps\n  extends\n    ButtonBaseProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport interface ButtonLinkProps\n  extends\n    ButtonBaseProps,\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> {\n  /** Navigate to this URL (rendered via the host's `LinkProvider`). */\n  href: string;\n  /** Visually and semantically disable the link. */\n  disabled?: boolean;\n}\n\nconst SLOT_CLASS =\n  \"transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-5 [&>svg]:shrink-0\";\n\nfunction Slot({\n  position,\n  children,\n}: {\n  position: \"prefix\" | \"suffix\" | \"loading\";\n  children: ReactNode;\n}) {\n  return (\n    <span data-icon={position} className={SLOT_CLASS}>\n      {children}\n    </span>\n  );\n}\n\nfunction Spinner() {\n  return (\n    <svg fill=\"none\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <circle\n        className=\"stroke-current opacity-30\"\n        cx=\"10\"\n        cy=\"10\"\n        r=\"8\"\n        fill=\"none\"\n        strokeWidth=\"2\"\n      />\n      <circle\n        className=\"origin-center animate-spin stroke-current\"\n        cx=\"10\"\n        cy=\"10\"\n        r=\"8\"\n        fill=\"none\"\n        strokeWidth=\"2\"\n        strokeDasharray=\"12.5 50\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction renderSlot(icon: Slottable, position: \"prefix\" | \"suffix\") {\n  if (icon == null || icon === false) return null;\n  if (isReactComponent(icon)) {\n    const Icon = icon;\n    return (\n      <Slot position={position}>\n        <Icon />\n      </Slot>\n    );\n  }\n  if (isValidElement(icon)) return <Slot position={position}>{icon}</Slot>;\n  return null;\n}\n\nfunction buttonInner({\n  svgOnly,\n  loading,\n  prefix,\n  suffix,\n  children,\n}: Pick<\n  ButtonBaseProps,\n  \"svgOnly\" | \"loading\" | \"prefix\" | \"suffix\" | \"children\"\n>) {\n  if (svgOnly) {\n    return loading ? <Spinner /> : children;\n  }\n  return (\n    <>\n      {loading ? (\n        <Slot position=\"loading\">\n          <Spinner />\n        </Slot>\n      ) : (\n        renderSlot(prefix, \"prefix\")\n      )}\n      {children != null && children !== false && (\n        <span data-text className=\"transition-inherit-all px-0.5\">\n          {children}\n        </span>\n      )}\n      {renderSlot(suffix, \"suffix\")}\n    </>\n  );\n}\n\nfunction warnMissingLabel(svgOnly: boolean | undefined, label: unknown) {\n  if (\n    svgOnly &&\n    !label &&\n    typeof process !== \"undefined\" &&\n    process.env?.NODE_ENV !== \"production\"\n  ) {\n    console.warn(\n      \"Button: `svgOnly` buttons require an `aria-label` that names the action.\",\n    );\n  }\n}\n\n/**\n * Button — triggers an action that mutates state (submit, save, delete).\n * For navigation that changes the URL, use {@link ButtonLink}.\n */\nexport function Button({\n  variant,\n  size,\n  shape,\n  shadow,\n  prefix,\n  suffix,\n  svgOnly,\n  loading,\n  children,\n  className,\n  ref,\n  ...props\n}: ButtonProps) {\n  warnMissingLabel(svgOnly, props[\"aria-label\"]);\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      {...props}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"true\" : undefined}\n      data-svg-only={svgOnly ? \"true\" : undefined}\n      className={cn(\n        buttonVariants({ variant, size, shape, shadow }),\n        loading && \"pointer-events-none\",\n        svgOnly && \"[&>svg]:size-5 [&>svg]:shrink-0\",\n        className,\n      )}\n    >\n      {buttonInner({ svgOnly, loading, prefix, suffix, children })}\n    </button>\n  );\n}\n\nButton.displayName = \"Button\";\n\n/**\n * ButtonLink — a link styled as a button, for navigation that changes the URL.\n * Shares every visual prop with {@link Button}; renders the host router's link\n * via `LinkProvider`.\n */\nexport function ButtonLink({\n  variant,\n  size,\n  shape,\n  shadow,\n  prefix,\n  suffix,\n  svgOnly,\n  loading,\n  disabled,\n  href,\n  children,\n  className,\n  ...props\n}: ButtonLinkProps) {\n  warnMissingLabel(svgOnly, props[\"aria-label\"]);\n  const Link = useLinkComponent();\n  return (\n    <Link\n      href={href}\n      {...props}\n      aria-disabled={disabled || loading || undefined}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"true\" : undefined}\n      data-svg-only={svgOnly ? \"true\" : undefined}\n      className={cn(\n        buttonVariants({ variant, size, shape, shadow }),\n        loading && \"pointer-events-none\",\n        svgOnly && \"[&>svg]:size-5 [&>svg]:shrink-0\",\n        className,\n      )}\n    >\n      {buttonInner({ svgOnly, loading, prefix, suffix, children })}\n    </Link>\n  );\n}\n\nButtonLink.displayName = \"ButtonLink\";\n\n/* ============================= Effect button ============================= */\n\n/**\n * A frame-exact port of Photon's Framer \"Button - Effect\", driven by Motion\n * (the same engine Framer renders with) so every frame matches the source — not\n * a CSS approximation. On hover, three things spring together on the *identical*\n * transition (`spring-physics 200 30 0.1` → stiffness 200 / damping 30 / mass\n * 0.1): a glossy inset white sheen reshapes toward the bottom edge, the gap\n * eases open (md), and any icon grows and fades in from nothing.\n *\n * Because it's a real spring — not a fixed-duration tween — it's also velocity-\n * correct: hovering out mid-animation continues from the current velocity,\n * exactly like Framer.\n *\n * Fill and stroke are STATIC (the source keeps them identical between the base\n * and hover variants); `variant` picks the treatment — `primary` is the source\n * brand pill with the glossy sheen, `secondary` the neutral white-card pill\n * (Button's secondary surface tokens) with the sheen omitted. The gap + icon\n * reveal springs are shared. `size` maps to the two source variants: `md` =\n * \"Variant 1\" (16px label, 12×16 padding), `sm` = \"Variant 2\" (14px label,\n * 8px padding).\n */\nconst EFFECT_ROOT = cn(\n  // Every variant keeps the 1px border so the pill geometry never shifts.\n  \"squircle relative inline-flex h-max cursor-pointer items-center justify-center overflow-hidden rounded-full border font-medium whitespace-nowrap\",\n  \"outline-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2\",\n  \"disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50\",\n);\n\n/** The exact source transition: `spring-physics 200 30 0.1` (stiffness/damping/mass). */\nconst EFFECT_SPRING = {\n  type: \"spring\",\n  stiffness: 200,\n  damping: 30,\n  mass: 0.1,\n} as const;\n\n/** Resting inset sheen — identical across both sizes (source base variants). */\nconst EFFECT_REST_SHADOW = \"inset 0px 0px 5px 2px rgba(255, 255, 255, 0.5)\";\n\n/** Per-size hover targets, sampled 1:1 from the source hover (gesture) variants. */\nconst EFFECT_HOVER = {\n  sm: { boxShadow: \"inset 0px -3px 8px 2px rgba(255, 255, 255, 0.5)\", gap: 0 },\n  md: { boxShadow: \"inset 0px -6px 14px 1px rgba(255, 255, 255, 0.5)\", gap: 4 },\n} as const;\n\n/** Size axis for {@link EffectButton} — padding + label size per source variant. */\nexport const EFFECT_BUTTON_SIZES = {\n  sm: {\n    classes: \"p-2 text-sm data-svg-only:p-2\",\n    description: \"Small — the compact 'Variant 2' (14px label, 8px padding)\",\n  },\n  md: {\n    classes: \"px-4 py-3 text-md data-svg-only:p-3\",\n    description: \"Medium — the 'Variant 1' (16px label, 12×16 padding)\",\n  },\n} satisfies VariantMap;\n\n/**\n * Emphasis axis for {@link EffectButton} — the static fill + edge treatment.\n * `secondary` reuses the white-card surface tokens of Button's `secondary`\n * (white card, hairline ring, quiet hover) and skips the glossy sheen — that\n * inset shine is the brand-fill treatment.\n */\nexport const EFFECT_BUTTON_VARIANTS = {\n  primary: {\n    classes: \"border-white/15 bg-pho-brand-solid text-white\",\n    description: \"Brand fill with the glossy inset sheen (default)\",\n  },\n  secondary: {\n    classes:\n      \"border-transparent bg-pho-primary text-pho-secondary shadow-pho-skeuo-xs ring-1 ring-pho-primary ring-inset transition-colors duration-100 ease-linear hover:bg-pho-primary-hover hover:text-pho-secondary-hover data-loading:bg-pho-primary-hover\",\n    description: \"Neutral white-card pill (OAuth / supporting CTA), no sheen\",\n  },\n} satisfies VariantMap;\n\nexport type EffectButtonSize = keyof typeof EFFECT_BUTTON_SIZES;\nexport type EffectButtonVariant = keyof typeof EFFECT_BUTTON_VARIANTS;\n\n/** Compose the static class string for an effect button — exported for reuse. */\nexport function effectButtonVariants(opts?: {\n  variant?: EffectButtonVariant;\n  size?: EffectButtonSize;\n  fullWidth?: boolean;\n  className?: string;\n}): string {\n  const { variant = \"primary\", size = \"md\", fullWidth, className } = opts ?? {};\n  return cn(\n    EFFECT_ROOT,\n    resolveVariant(EFFECT_BUTTON_SIZES, size),\n    resolveVariant(EFFECT_BUTTON_VARIANTS, variant),\n    fullWidth && \"w-full\",\n    className,\n  );\n}\n\n/**\n * Motion variants for the pill root — the sheen (+ gap on md) spring on hover.\n * `secondary` springs only the gap: its box-shadow stays with the CSS classes\n * (ring + skeuomorphic shadow), so Motion must never write an inline one.\n */\nfunction effectRootVariants(\n  size: EffectButtonSize,\n  variant: EffectButtonVariant,\n) {\n  if (variant === \"secondary\") {\n    return {\n      rest: { gap: 0 },\n      hover: { gap: EFFECT_HOVER[size].gap },\n    };\n  }\n  return {\n    rest: { boxShadow: EFFECT_REST_SHADOW, gap: 0 },\n    hover: EFFECT_HOVER[size],\n  };\n}\n\n/**\n * Icon reveal — a 1:1 port of the source \"Arrow Right\" instance: collapsed and\n * invisible at rest (opacity 0, 1×10px), grown to full size on hover (opacity 1,\n * 20×21px). The child inherits the pill's `rest`/`hover` variant label, so it\n * springs in perfect lockstep with the sheen and gap.\n */\nconst EFFECT_ICON_VARIANTS = {\n  rest: { opacity: 0, width: 1, height: 10 },\n  hover: { opacity: 1, width: 20, height: 21 },\n} as const;\n\nfunction EffectSlot({\n  position,\n  children,\n}: {\n  position: \"prefix\" | \"suffix\";\n  children: ReactNode;\n}) {\n  return (\n    <motion.span\n      data-icon={position}\n      variants={EFFECT_ICON_VARIANTS}\n      transition={EFFECT_SPRING}\n      style={{\n        display: \"inline-flex\",\n        flex: \"none\",\n        alignItems: \"center\",\n        overflow: \"hidden\",\n      }}\n      className=\"pointer-events-none [&>svg]:block [&>svg]:size-full\"\n    >\n      {children}\n    </motion.span>\n  );\n}\n\nfunction renderEffectSlot(icon: Slottable, position: \"prefix\" | \"suffix\") {\n  if (icon == null || icon === false) return null;\n  if (isReactComponent(icon)) {\n    const Icon = icon;\n    return (\n      <EffectSlot position={position}>\n        <Icon />\n      </EffectSlot>\n    );\n  }\n  if (isValidElement(icon))\n    return <EffectSlot position={position}>{icon}</EffectSlot>;\n  return null;\n}\n\nfunction effectButtonInner({\n  svgOnly,\n  loading,\n  prefix,\n  suffix,\n  children,\n}: Pick<\n  EffectButtonBaseProps,\n  \"svgOnly\" | \"loading\" | \"prefix\" | \"suffix\" | \"children\"\n>) {\n  // An icon-only button keeps its icon always visible (nothing to reveal).\n  if (svgOnly) return loading ? <Spinner /> : children;\n  return (\n    <>\n      {loading ? (\n        <Slot position=\"loading\">\n          <Spinner />\n        </Slot>\n      ) : (\n        renderEffectSlot(prefix, \"prefix\")\n      )}\n      {children != null && children !== false && (\n        <span data-text className=\"px-0.5\">\n          {children}\n        </span>\n      )}\n      {renderEffectSlot(suffix, \"suffix\")}\n    </>\n  );\n}\n\n/** Motion props (initial/animate/hover/variants/transition) shared by both roots. */\nfunction effectMotionProps(\n  size: EffectButtonSize,\n  variant: EffectButtonVariant,\n) {\n  return {\n    initial: false as const,\n    animate: \"rest\",\n    whileHover: \"hover\",\n    variants: effectRootVariants(size, variant),\n    transition: EFFECT_SPRING,\n  };\n}\n\n// Motion redefines these DOM handlers; drop them from our public props so\n// spreading onto a motion element type-checks cleanly.\ntype MotionConflicts =\n  | \"onAnimationStart\"\n  | \"onAnimationEnd\"\n  | \"onAnimationIteration\"\n  | \"onDrag\"\n  | \"onDragStart\"\n  | \"onDragEnd\"\n  | \"onDragEnter\"\n  | \"onDragExit\"\n  | \"onDragLeave\"\n  | \"onDragOver\"\n  | \"onDrop\"\n  | \"style\";\n\ninterface EffectButtonBaseProps {\n  /** Emphasis variant. @default \"primary\" */\n  variant?: EffectButtonVariant;\n  /** Size variant. @default \"md\" */\n  size?: EffectButtonSize;\n  /** Stretch to the container's full width (stacked login / OAuth pills). */\n  fullWidth?: boolean;\n  /** Slot before the label — a component (`Plus`) or element (`<Plus />`). */\n  prefix?: Slottable;\n  /** Slot after the label. */\n  suffix?: Slottable;\n  /** Render as an icon-only button. Requires an `aria-label`. */\n  svgOnly?: boolean;\n  /** Show a spinner and block interaction while staying readable. */\n  loading?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface EffectButtonProps\n  extends\n    EffectButtonBaseProps,\n    Omit<\n      ButtonHTMLAttributes<HTMLButtonElement>,\n      keyof EffectButtonBaseProps | MotionConflicts\n    > {\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport interface EffectButtonLinkProps\n  extends\n    EffectButtonBaseProps,\n    Omit<\n      AnchorHTMLAttributes<HTMLAnchorElement>,\n      keyof EffectButtonBaseProps | MotionConflicts\n    > {\n  /** Navigate to this URL (rendered via the host's `LinkProvider`). */\n  href: string;\n  /** Visually and semantically disable the link. */\n  disabled?: boolean;\n}\n\n/**\n * EffectButton — the glossy, springy pill ported frame-for-frame from Photon's\n * Framer \"Button - Effect\", driven by Motion. `variant=\"secondary\"` swaps the\n * brand fill for the neutral white-card surface without the sheen (the login /\n * OAuth pill), and `fullWidth` stretches the pill across its container.\n * Triggers an action; for navigation use {@link EffectButtonLink}.\n */\nexport function EffectButton({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth,\n  prefix,\n  suffix,\n  svgOnly,\n  loading,\n  children,\n  className,\n  ref,\n  ...props\n}: EffectButtonProps) {\n  warnMissingLabel(svgOnly, props[\"aria-label\"]);\n  return (\n    <motion.button\n      ref={ref}\n      type=\"button\"\n      {...effectMotionProps(size, variant)}\n      {...props}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"true\" : undefined}\n      data-svg-only={svgOnly ? \"true\" : undefined}\n      className={cn(\n        effectButtonVariants({ variant, size, fullWidth }),\n        loading && \"pointer-events-none\",\n        svgOnly && \"[&>svg]:size-5 [&>svg]:shrink-0\",\n        className,\n      )}\n    >\n      {effectButtonInner({ svgOnly, loading, prefix, suffix, children })}\n    </motion.button>\n  );\n}\n\nEffectButton.displayName = \"EffectButton\";\n\n/**\n * EffectButtonLink — {@link EffectButton} as a link, for navigation that changes\n * the URL. Renders the host router's link (via `LinkProvider`) wrapped by Motion,\n * so the pill animates identically to the button.\n */\nexport function EffectButtonLink({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth,\n  prefix,\n  suffix,\n  svgOnly,\n  loading,\n  disabled,\n  href,\n  children,\n  className,\n  ...props\n}: EffectButtonLinkProps) {\n  warnMissingLabel(svgOnly, props[\"aria-label\"]);\n  const Link = useLinkComponent();\n  // Wrap the host link once per link identity so Motion can drive the DOM node.\n  const MotionLink = useMemo(() => motion.create(Link), [Link]);\n  return (\n    <MotionLink\n      href={href}\n      {...effectMotionProps(size, variant)}\n      {...(props as HTMLMotionProps<\"a\">)}\n      aria-disabled={disabled || loading || undefined}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"true\" : undefined}\n      data-svg-only={svgOnly ? \"true\" : undefined}\n      className={cn(\n        effectButtonVariants({ variant, size, fullWidth }),\n        loading && \"pointer-events-none\",\n        svgOnly && \"[&>svg]:size-5 [&>svg]:shrink-0\",\n        className,\n      )}\n    >\n      {effectButtonInner({ svgOnly, loading, prefix, suffix, children })}\n    </MotionLink>\n  );\n}\n\nEffectButtonLink.displayName = \"EffectButtonLink\";\n"],"mappings":"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"}

package/dist/chunks/close-button-CbQNfpxU.js

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

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

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