@photon-ai/pho-ui 0.1.1 → 0.2.0

package/dist/chunks/button-GQALfaly.js

@@ -0,0 +1,325 @@
+"use client";
+import { t as l } from "./cn-7uGUzCOM.js";
+import { n as S, r as w } from "./link-provider-9TFNyDqO.js";
+import { t as f } from "./resolve-variant-CcD8iG5l.js";
+import { isValidElement as _, useMemo as I } from "react";
+import { Fragment as k, jsx as n, jsxs as x } from "react/jsx-runtime";
+import { motion as y } from "motion/react";
+var R = 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"), q = {
+  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 T(e) {
+  const { variant: t = "primary", size: o = "md", shape: i = "rounded", className: r } = e ?? {};
+  return l(R, f(A, i), f(q, o), f(M, t), r);
+}
+var z = "transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-5 [&>svg]:shrink-0";
+function v({ position: e, children: t }) {
+  return /* @__PURE__ */ n("span", {
+    "data-icon": e,
+    className: z,
+    children: t
+  });
+}
+function m() {
+  return /* @__PURE__ */ x("svg", {
+    fill: "none",
+    viewBox: "0 0 20 20",
+    "aria-hidden": "true",
+    children: [/* @__PURE__ */ n("circle", {
+      className: "stroke-current opacity-30",
+      cx: "10",
+      cy: "10",
+      r: "8",
+      fill: "none",
+      strokeWidth: "2"
+    }), /* @__PURE__ */ n("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 g(e, t) {
+  return e == null || e === !1 ? null : w(e) ? /* @__PURE__ */ n(v, {
+    position: t,
+    children: /* @__PURE__ */ n(e, {})
+  }) : _(e) ? /* @__PURE__ */ n(v, {
+    position: t,
+    children: e
+  }) : null;
+}
+function B({ svgOnly: e, loading: t, prefix: o, suffix: i, children: r }) {
+  return e ? t ? /* @__PURE__ */ n(m, {}) : r : /* @__PURE__ */ x(k, { children: [
+    t ? /* @__PURE__ */ n(v, {
+      position: "loading",
+      children: /* @__PURE__ */ n(m, {})
+    }) : g(o, "prefix"),
+    r != null && r !== !1 && /* @__PURE__ */ n("span", {
+      "data-text": !0,
+      className: "transition-inherit-all px-0.5",
+      children: r
+    }),
+    g(i, "suffix")
+  ] });
+}
+function b(e, t) {
+  e && !t && 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: t, shape: o, prefix: i, suffix: r, svgOnly: a, loading: s, children: p, className: u, ref: d, ...c }) {
+  return b(a, c["aria-label"]), /* @__PURE__ */ n("button", {
+    ref: d,
+    type: "button",
+    ...c,
+    "aria-busy": s || void 0,
+    "data-loading": s ? "true" : void 0,
+    "data-svg-only": a ? "true" : void 0,
+    className: l(T({
+      variant: e,
+      size: t,
+      shape: o
+    }), s && "pointer-events-none", a && "[&>svg]:size-5 [&>svg]:shrink-0", u),
+    children: B({
+      svgOnly: a,
+      loading: s,
+      prefix: i,
+      suffix: r,
+      children: p
+    })
+  });
+}
+H.displayName = "Button";
+function j({ variant: e, size: t, shape: o, prefix: i, suffix: r, svgOnly: a, loading: s, disabled: p, href: u, children: d, className: c, ...h }) {
+  return b(a, h["aria-label"]), /* @__PURE__ */ n(S(), {
+    href: u,
+    ...h,
+    "aria-disabled": p || s || void 0,
+    "aria-busy": s || void 0,
+    "data-loading": s ? "true" : void 0,
+    "data-svg-only": a ? "true" : void 0,
+    className: l(T({
+      variant: e,
+      size: t,
+      shape: o
+    }), s && "pointer-events-none", a && "[&>svg]:size-5 [&>svg]:shrink-0", c),
+    children: B({
+      svgOnly: a,
+      loading: s,
+      prefix: i,
+      suffix: r,
+      children: d
+    })
+  });
+}
+j.displayName = "ButtonLink";
+var O = l("squircle relative inline-flex h-max cursor-pointer items-center justify-center overflow-hidden rounded-full border font-medium whitespace-nowrap", "border-pho-on-brand bg-pho-brand-solid text-pho-on-brand", "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"), F = {
+  type: "spring",
+  stiffness: 200,
+  damping: 30,
+  mass: 0.1
+}, P = l("[--pho-sheen:light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.12))]", "shadow-[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"
+}, D = {
+  sm: {
+    "--pho-sheen-y": "-3px",
+    "--pho-sheen-blur": "8px",
+    "--pho-sheen-spread": "2px",
+    gap: 0
+  },
+  md: {
+    "--pho-sheen-y": "-6px",
+    "--pho-sheen-blur": "14px",
+    "--pho-sheen-spread": "1px",
+    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)"
+  }
+};
+function C(e) {
+  const { size: t = "md", fullWidth: o, className: i } = e ?? {};
+  return l(O, P, f(W, t), o && "w-full", i);
+}
+function G(e) {
+  return {
+    rest: {
+      ...U,
+      gap: 0
+    },
+    hover: { ...D[e] }
+  };
+}
+var Z = {
+  rest: {
+    opacity: 0,
+    width: 1,
+    height: 10
+  },
+  hover: {
+    opacity: 1,
+    width: 20,
+    height: 21
+  }
+};
+function E({ position: e, children: t }) {
+  return /* @__PURE__ */ n(y.span, {
+    "data-icon": e,
+    variants: Z,
+    transition: F,
+    style: {
+      display: "inline-flex",
+      flex: "none",
+      alignItems: "center",
+      overflow: "hidden"
+    },
+    className: "pointer-events-none [&>svg]:block [&>svg]:size-full",
+    children: t
+  });
+}
+function N(e, t) {
+  return e == null || e === !1 ? null : w(e) ? /* @__PURE__ */ n(E, {
+    position: t,
+    children: /* @__PURE__ */ n(e, {})
+  }) : _(e) ? /* @__PURE__ */ n(E, {
+    position: t,
+    children: e
+  }) : null;
+}
+function L({ svgOnly: e, loading: t, prefix: o, suffix: i, children: r }) {
+  return e ? t ? /* @__PURE__ */ n(m, {}) : r : /* @__PURE__ */ x(k, { children: [
+    t ? /* @__PURE__ */ n(v, {
+      position: "loading",
+      children: /* @__PURE__ */ n(m, {})
+    }) : N(o, "prefix"),
+    r != null && r !== !1 && /* @__PURE__ */ n("span", {
+      "data-text": !0,
+      className: "px-0.5",
+      children: r
+    }),
+    N(i, "suffix")
+  ] });
+}
+function V(e, t) {
+  return {
+    initial: !1,
+    animate: "rest",
+    whileHover: t ? void 0 : "hover",
+    variants: G(e),
+    transition: F
+  };
+}
+function J({ size: e = "md", fullWidth: t, prefix: o, suffix: i, svgOnly: r, loading: a, children: s, className: p, ref: u, ...d }) {
+  return b(r, d["aria-label"]), /* @__PURE__ */ n(y.button, {
+    ref: u,
+    type: "button",
+    ...V(e, d.disabled || a),
+    ...d,
+    "aria-busy": a || void 0,
+    "data-loading": a ? "true" : void 0,
+    "data-svg-only": r ? "true" : void 0,
+    className: l(C({
+      size: e,
+      fullWidth: t
+    }), a && "pointer-events-none", r && "[&>svg]:size-5 [&>svg]:shrink-0", p),
+    children: L({
+      svgOnly: r,
+      loading: a,
+      prefix: o,
+      suffix: i,
+      children: s
+    })
+  });
+}
+J.displayName = "EffectButton";
+function K({ size: e = "md", fullWidth: t, prefix: o, suffix: i, svgOnly: r, loading: a, disabled: s, href: p, children: u, className: d, ...c }) {
+  b(r, c["aria-label"]);
+  const h = S();
+  return /* @__PURE__ */ n(I(() => y.create(h), [h]), {
+    href: p,
+    ...V(e, s || a),
+    ...c,
+    "aria-disabled": s || a || void 0,
+    "aria-busy": a || void 0,
+    "data-loading": a ? "true" : void 0,
+    "data-svg-only": r ? "true" : void 0,
+    className: l(C({
+      size: e,
+      fullWidth: t
+    }), a && "pointer-events-none", r && "[&>svg]:size-5 [&>svg]:shrink-0", d),
+    children: L({
+      svgOnly: r,
+      loading: a,
+      prefix: o,
+      suffix: i,
+      children: u
+    })
+  });
+}
+K.displayName = "EffectButtonLink";
+export {
+  j as a,
+  K as c,
+  H as i,
+  T as l,
+  q as n,
+  W as o,
+  M as r,
+  J as s,
+  A as t,
+  C as u
+};
+
+//# sourceMappingURL=button-GQALfaly.js.map

package/dist/chunks/button-GQALfaly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-GQALfaly.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`. `loading` is declarative. There is no `shadow`: buttons\n *   are flat on photon.codes — elevation belongs to floating layers.\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 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.5 py-1.5 text-sm font-medium data-svg-only:p-2\",\n    description: \"Small — compact rows, tables, and toolbars\",\n  },\n  md: {\n    classes: \"gap-1 px-4 py-2 text-sm font-medium data-svg-only:p-2.5\",\n    description: \"Medium — the default\",\n  },\n  lg: {\n    classes: \"gap-1.5 px-5 py-2.5 text-md font-medium data-svg-only:p-3\",\n    description: \"Large — prominent and marketing actions\",\n  },\n} satisfies VariantMap;\n\n/** Shape axis — corner treatment. Pills are the photon.codes default. */\nexport const BUTTON_SHAPES = {\n  rounded: {\n    classes: \"rounded-full\",\n    description: \"Pill — the default; every button on photon.codes\",\n  },\n  square: {\n    classes: \"rounded-lg\",\n    description: \"Gently rounded corners for dense app chrome\",\n  },\n  circle: {\n    classes: \"rounded-full\",\n    description: \"Circular — pair with svgOnly for round icon buttons\",\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-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\",\n    description: \"High-emphasis primary action (default)\",\n  },\n  secondary: {\n    classes:\n      \"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\",\n    description: \"Neutral, supporting action\",\n  },\n  tertiary: {\n    classes:\n      \"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\",\n    description: \"Low-emphasis, borderless action\",\n  },\n  error: {\n    classes:\n      \"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\",\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  className?: string;\n}): string {\n  const {\n    variant = \"primary\",\n    size = \"md\",\n    shape = \"rounded\",\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    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 \"rounded\" */\n  shape?: ButtonShape;\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  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 }),\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  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 }),\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 sheen (mode-aware: white gloss on the black pill,\n * dark shading on dark mode's white pill) reshapes toward the bottom edge,\n * the gap 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): the contrast pill (black in light mode, white in dark —\n * photon.codes' button fill) with the glossy sheen. There is deliberately no\n * variant axis — an EffectButton without its sheen is just a pill-shaped\n * `Button`; reach for `<Button variant=\"secondary\">` for supporting/OAuth\n * actions. `size` maps to the two source variants: `md` = \"Variant 1\"\n * (16px label, 12×16 padding), `sm` = \"Variant 2\" (14px label, 8px padding).\n */\nconst EFFECT_ROOT = cn(\n  // The 1px border keeps the pill geometry stable; fill/text are the static\n  // contrast treatment the sheen is designed for.\n  \"squircle relative inline-flex h-max cursor-pointer items-center justify-center overflow-hidden rounded-full border font-medium whitespace-nowrap\",\n  \"border-pho-on-brand bg-pho-brand-solid text-pho-on-brand\",\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/**\n * The sheen is drawn by a CSS box-shadow that reads three custom properties\n * (offset-y / blur / spread) — Motion springs the *properties*, not an inline\n * box-shadow string, so the sheen COLOR can stay mode-aware in CSS:\n * white gloss on the black pill in light mode, a soft dark shading on the\n * white pill in dark mode (where a white glow would be invisible).\n * Geometry values are sampled 1:1 from the Framer source variants.\n */\nconst EFFECT_SHEEN_CLASSES = cn(\n  \"[--pho-sheen:light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.12))]\",\n  \"shadow-[inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]\",\n);\n\nconst EFFECT_SHEEN_REST = {\n  \"--pho-sheen-y\": \"0px\",\n  \"--pho-sheen-blur\": \"5px\",\n  \"--pho-sheen-spread\": \"2px\",\n} as const;\n\n/** Per-size hover targets (sheen geometry + gap), from the source variants. */\nconst EFFECT_HOVER = {\n  sm: {\n    \"--pho-sheen-y\": \"-3px\",\n    \"--pho-sheen-blur\": \"8px\",\n    \"--pho-sheen-spread\": \"2px\",\n    gap: 0,\n  },\n  md: {\n    \"--pho-sheen-y\": \"-6px\",\n    \"--pho-sheen-blur\": \"14px\",\n    \"--pho-sheen-spread\": \"1px\",\n    gap: 4,\n  },\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\nexport type EffectButtonSize = keyof typeof EFFECT_BUTTON_SIZES;\n\n/** Compose the static class string for an effect button — exported for reuse. */\nexport function effectButtonVariants(opts?: {\n  size?: EffectButtonSize;\n  fullWidth?: boolean;\n  className?: string;\n}): string {\n  const { size = \"md\", fullWidth, className } = opts ?? {};\n  return cn(\n    EFFECT_ROOT,\n    EFFECT_SHEEN_CLASSES,\n    resolveVariant(EFFECT_BUTTON_SIZES, size),\n    fullWidth && \"w-full\",\n    className,\n  );\n}\n\n/** Motion variants for the pill root — the sheen (+ gap on md) spring on hover. */\nfunction effectRootVariants(size: EffectButtonSize) {\n  return {\n    rest: { ...EFFECT_SHEEN_REST, 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(size: EffectButtonSize, inert: boolean | undefined) {\n  return {\n    initial: false as const,\n    animate: \"rest\",\n    // Browsers still dispatch pointerenter on a disabled <button>, so Motion's\n    // hover gesture would run the sheen / gap / icon-reveal springs on a pill\n    // that must read as inert. Omitting `whileHover` while disabled or loading\n    // is Motion's intended off-switch: the gesture never engages (no inline\n    // styles mutate), an in-flight hover springs back to `rest`, and restoring\n    // the prop re-arms hover in place — no remount, no rest-state change.\n    whileHover: inert ? undefined : \"hover\",\n    variants: effectRootVariants(size),\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  /** 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. `fullWidth` stretches the pill\n * across its container. There is no variant axis — for a supporting/OAuth\n * pill without the sheen, use `<Button variant=\"secondary\">`.\n * Triggers an action; for navigation use {@link EffectButtonLink}.\n */\nexport function EffectButton({\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, props.disabled || loading)}\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({ 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  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, disabled || loading)}\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({ 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 → close-button-DKaNIndU.js}

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

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

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

package/dist/chunks/{cn-D6jQqeRj.js → cn-7uGUzCOM.js}

@@ -1749,8 +1749,7 @@ var $e = (e, t) => {
   "display-sm",
   "display-md",
   "display-lg",
-  "display-xl",
-  "display-2xl"
+  "display-xl"
 ] } } });
 function Nr(...e) {
   return Lr(Be(e));
@@ -1759,4 +1758,4 @@ export {
   Nr as t
 };
 
-//# sourceMappingURL=cn-D6jQqeRj.js.map
+//# sourceMappingURL=cn-7uGUzCOM.js.map