@photon-ai/pho-ui 0.4.0 → 0.5.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"button-BMDHIgZh.js","names":[],"sources":["../../src/components/button/button.tsx"],"sourcesContent":["import {\n  isValidElement,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type FC,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { motion } 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  // Icons scale with the label: 1.125em tracks the button's font size\n  // (16px icon beside 14px text, 18px beside 16px) so small buttons never\n  // carry an oversized glyph.\n  \"transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-[1.125em] [&>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-[1.25em] [&>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-[1.25em] [&>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 * EffectButton is {@link Button}, not a parallel primitive: it renders the\n * real `Button` component (Motion-wrapped via `motion.create` when animated)\n * with `variant=\"primary\"` / `shape=\"rounded\"` and layers ONLY the effect\n * treatment on top through `className`. That means it shares Button's size\n * scale 1:1 — `sm` / `md` / `lg` at 32 / 36 / 44px — so effect pills pair with\n * plain Buttons at equal heights.\n *\n * The effect itself is the Motion port of Photon's Framer \"Button - Effect\"\n * (the same engine Framer renders with, so every frame matches the source).\n * On hover, three things spring together on the *identical* transition\n * (`spring-physics 200 30 0.1` → stiffness 200 / damping 30 / mass 0.1): a\n * glossy inset sheen (mode-aware: white gloss on the black pill, dark shading\n * on dark mode's white pill) reshapes toward the bottom edge, the gap eases\n * open (lg), and any icon grows and fades in from nothing. Because it's a real\n * spring — not a fixed-duration tween — it's velocity-correct: hovering out\n * mid-animation continues from the current velocity, exactly like Framer.\n *\n * `animated` (default `true`) gates the whole Motion treatment. When `false`,\n * the pill renders as a plain static `Button` with the effect styling: no\n * springs at all, and a passed icon is simply visible from the start in\n * Button's normal slot instead of hiding until hover.\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.\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 effect treatment, layered over Button's `primary` pill (tailwind-merge\n * lets the later class win within each group):\n * - `squircle` corners + `overflow-hidden` so the sheen clips to the pill.\n * - The fill is pinned static: the source keeps fill identical between base\n *   and hover, so primary's hover/loading darken is overridden back to the\n *   resting brand fill, and primary's icon dimming is lifted to full strength.\n * - `transition-none`: Motion drives every animated property; Button's CSS\n *   transition would chase the spring's box-shadow each frame.\n */\nconst EFFECT_OVERRIDES = cn(\n  \"squircle overflow-hidden\",\n  \"hover:bg-pho-brand-solid data-loading:bg-pho-brand-solid\",\n  \"*:data-icon:opacity-100 hover:*:data-icon:opacity-100\",\n  \"transition-none\",\n);\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: white\n * gloss on the black pill in light mode, a soft dark shading on the white pill\n * in dark mode (where a white glow would be invisible). The `var()` fallbacks\n * ARE the rest geometry, so a non-animated pill shows the resting sheen with\n * no inline styles at all.\n *\n * The first shadow layer is the pill's 1px on-brand hairline. It used to be a\n * layout `border`, which added 2px to the height and broke equal-height\n * pairing with `Button`; as an inset shadow ring it reads identically but\n * keeps Button's exact 32/36/44 geometry.\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_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)]\",\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/**\n * Per-size hover targets (sheen geometry + gap), sampled from the Framer\n * source variants. `sm`/`md` carry the compact treatment (the source's 14px-\n * label variant); `lg` carries the large one (16px label), including its\n * gap easing open on hover.\n */\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\": \"-3px\",\n    \"--pho-sheen-blur\": \"8px\",\n    \"--pho-sheen-spread\": \"2px\",\n    gap: 0,\n  },\n  lg: {\n    \"--pho-sheen-y\": \"-6px\",\n    \"--pho-sheen-blur\": \"14px\",\n    \"--pho-sheen-spread\": \"1px\",\n    gap: 4,\n  },\n} as const;\n\n/**\n * EffectButton shares Button's size axis verbatim — same padding, text size,\n * and svgOnly geometry, so effect pills line up with plain Buttons.\n * Kept as a named export for API compatibility.\n */\nexport const EFFECT_BUTTON_SIZES = BUTTON_SIZES;\n\nexport type EffectButtonSize = ButtonSize;\n\n/** Compose the full 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 buttonVariants({\n    variant: \"primary\",\n    size,\n    shape: \"rounded\",\n    className: effectClassName(fullWidth, className),\n  });\n}\n\n/** The effect layer handed to Button's `className` (merged after its own). */\nfunction effectClassName(fullWidth?: boolean, className?: string): string {\n  return cn(\n    EFFECT_OVERRIDES,\n    EFFECT_SHEEN_CLASSES,\n    fullWidth && \"w-full\",\n    className,\n  );\n}\n\n/** Motion variants for the pill root — the sheen (+ gap on lg) spring on hover. */\nfunction effectRootVariants(size: EffectButtonSize) {\n  return {\n    // Rest closes the gap so the hidden icon leaves no hole beside the label.\n    rest: { ...EFFECT_SHEEN_REST, gap: 0 },\n    hover: { ...EFFECT_HOVER[size] },\n  };\n}\n\n/**\n * Icon reveal — a port of the source \"Arrow Right\" instance: collapsed and\n * invisible at rest, grown to full size on hover. The child inherits the\n * pill's `rest`/`hover` variant label through Motion context (the plain Slot\n * span Button wraps it in doesn't break propagation), so it springs in perfect\n * lockstep with the sheen and gap. `lg` keeps the frame-exact 20×21 from the\n * Framer source (16px label); `sm`/`md` scale the target down with their 14px\n * label so the icon stays visually matched to the text.\n */\nconst EFFECT_ICON_VARIANTS = {\n  sm: {\n    rest: { opacity: 0, width: 1, height: 9 },\n    hover: { opacity: 1, width: 17, height: 18 },\n  },\n  md: {\n    rest: { opacity: 0, width: 1, height: 9 },\n    hover: { opacity: 1, width: 17, height: 18 },\n  },\n  lg: {\n    rest: { opacity: 0, width: 1, height: 10 },\n    hover: { opacity: 1, width: 20, height: 21 },\n  },\n} as const;\n\nfunction EffectSlot({\n  position,\n  size,\n  children,\n}: {\n  position: \"prefix\" | \"suffix\";\n  size: EffectButtonSize;\n  children: ReactNode;\n}) {\n  return (\n    <motion.span\n      data-icon={position}\n      variants={EFFECT_ICON_VARIANTS[size]}\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\n/**\n * Pre-wrap an icon in its reveal slot so Button's own slot plumbing renders\n * it as a regular element prefix/suffix. Only used on the animated path — a\n * non-animated pill hands the icon to Button untouched, so it's simply\n * visible from the start.\n */\nfunction wrapEffectIcon(\n  icon: Slottable,\n  position: \"prefix\" | \"suffix\",\n  size: EffectButtonSize,\n): ReactNode | undefined {\n  if (icon == null || icon === false) return undefined;\n  if (isReactComponent(icon)) {\n    const Icon = icon;\n    return (\n      <EffectSlot position={position} size={size}>\n        <Icon />\n      </EffectSlot>\n    );\n  }\n  if (isValidElement(icon))\n    return (\n      <EffectSlot position={position} size={size}>\n        {icon}\n      </EffectSlot>\n    );\n  return undefined;\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 — Button's scale (32 / 36 / 44px). @default \"md\" */\n  size?: EffectButtonSize;\n  /** Stretch to the container's full width (stacked login / OAuth pills). */\n  fullWidth?: boolean;\n  /**\n   * Play the Motion treatment. When `true` (the default), hovering springs the\n   * sheen, gap, and icon reveal — at rest the pill reads as a normal button\n   * with the icon hidden. When `false` there is no animation at all: the pill\n   * is a plain static `Button` with the effect styling, and a passed icon is\n   * simply displayed from the start.\n   * @default true\n   */\n  animated?: 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// The Motion-driven Button/ButtonLink: `motion.create` extracts the motion\n// props (variants/whileHover/transition/…) and forwards everything else, so\n// the effect pill IS a Button — same size presets, slots, loading, and\n// disabled plumbing — with Motion animating the underlying DOM node.\nconst MotionButton = motion.create(Button);\nconst MotionButtonLink = motion.create(ButtonLink);\n\n/**\n * EffectButton — {@link Button} wearing the glossy, springy effect treatment\n * ported frame-for-frame from Photon's Framer \"Button - Effect\". Shares\n * Button's size scale (`sm`/`md`/`lg` at 32/36/44px) so it pairs with plain\n * Buttons at equal heights. `animated` (default `true`) gates the Motion\n * treatment: off, it's a static effect-styled Button whose icon is always\n * visible. `fullWidth` stretches the pill across its container. There is no\n * variant axis — for a supporting/OAuth pill without the sheen, use\n * `<Button variant=\"secondary\">`. Triggers an action; for navigation use\n * {@link EffectButtonLink}.\n */\nexport function EffectButton({\n  size = \"md\",\n  fullWidth,\n  animated = true,\n  prefix,\n  suffix,\n  svgOnly,\n  loading,\n  children,\n  className,\n  ref,\n  ...props\n}: EffectButtonProps) {\n  if (!animated) {\n    return (\n      <Button\n        ref={ref}\n        variant=\"primary\"\n        size={size}\n        shape=\"rounded\"\n        prefix={prefix}\n        suffix={suffix}\n        svgOnly={svgOnly}\n        loading={loading}\n        className={effectClassName(fullWidth, className)}\n        {...props}\n      >\n        {children}\n      </Button>\n    );\n  }\n  return (\n    <MotionButton\n      ref={ref}\n      variant=\"primary\"\n      size={size}\n      shape=\"rounded\"\n      // svgOnly keeps its icon always visible (nothing to reveal), so only\n      // labeled pills get the reveal-wrapped slots.\n      prefix={svgOnly ? prefix : wrapEffectIcon(prefix, \"prefix\", size)}\n      suffix={svgOnly ? suffix : wrapEffectIcon(suffix, \"suffix\", size)}\n      svgOnly={svgOnly}\n      loading={loading}\n      {...effectMotionProps(size, props.disabled || loading)}\n      {...props}\n      className={effectClassName(fullWidth, className)}\n    >\n      {children}\n    </MotionButton>\n  );\n}\n\nEffectButton.displayName = \"EffectButton\";\n\n/**\n * EffectButtonLink — {@link EffectButton} as a link, for navigation that\n * changes the URL. Composes {@link ButtonLink} (Motion-wrapped when animated),\n * which renders the host router's link via `LinkProvider`, so the pill\n * animates identically to the button.\n */\nexport function EffectButtonLink({\n  size = \"md\",\n  fullWidth,\n  animated = true,\n  prefix,\n  suffix,\n  svgOnly,\n  loading,\n  disabled,\n  href,\n  children,\n  className,\n  ...props\n}: EffectButtonLinkProps) {\n  if (!animated) {\n    return (\n      <ButtonLink\n        href={href}\n        variant=\"primary\"\n        size={size}\n        shape=\"rounded\"\n        prefix={prefix}\n        suffix={suffix}\n        svgOnly={svgOnly}\n        loading={loading}\n        disabled={disabled}\n        className={effectClassName(fullWidth, className)}\n        {...props}\n      >\n        {children}\n      </ButtonLink>\n    );\n  }\n  return (\n    <MotionButtonLink\n      href={href}\n      variant=\"primary\"\n      size={size}\n      shape=\"rounded\"\n      prefix={svgOnly ? prefix : wrapEffectIcon(prefix, \"prefix\", size)}\n      suffix={svgOnly ? suffix : wrapEffectIcon(suffix, \"suffix\", size)}\n      svgOnly={svgOnly}\n      loading={loading}\n      disabled={disabled}\n      {...effectMotionProps(size, disabled || loading)}\n      {...props}\n      className={effectClassName(fullWidth, className)}\n    >\n      {children}\n    </MotionButtonLink>\n  );\n}\n\nEffectButtonLink.displayName = \"EffectButtonLink\";\n"],"mappings":"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"}

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

@@ -1,29 +0,0 @@
-"use client";
-import { t as r } from "./cn-7uGUzCOM.js";
-import { t as n } from "./resolve-variant-CcD8iG5l.js";
-import { t as a } from "./IconX-pZ9vrtSr.js";
-import "react";
-import { jsx as e } from "react/jsx-runtime";
-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, ...o }) {
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    "aria-label": t || "Close",
-    ...o,
-    className: r("squircle text-fg-pho-quaternary outline-pho-brand hover:bg-pho-ghost-hover hover:text-fg-pho-quaternary-hover inline-flex cursor-pointer items-center justify-center rounded-md p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", n(l, s), i),
-    children: /* @__PURE__ */ e(a, {
-      "aria-hidden": "true",
-      className: "transition-inherit-all shrink-0"
-    })
-  });
-}
-u.displayName = "CloseButton";
-export {
-  u as t
-};
-
-//# sourceMappingURL=close-button-CRiiwy6K.js.map

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

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

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

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