{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Button",
  "description": "A clear, responsive action with quiet secondary states.",
  "categories": [
    "actions"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://mcp.xzero.co.uk/r/xzero-motion-tokens.json"
  ],
  "files": [
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/xzero/button/button.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode, Ref, RefObject } from \"react\";\nimport { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from \"motion/react\";\nimport type { TargetAndTransition, Variants } from \"motion/react\";\nimport { motionTokens } from \"../lib/motion-tokens\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onDrag\" | \"onDragEnd\" | \"onDragStart\" | \"onAnimationStart\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n}\n\n/** Icon buttons press a little deeper, wide buttons a little less, so every size reads as the same push. */\nconst pressVariants: Variants = {\n  pressed: (button: RefObject<HTMLButtonElement | null>) => {\n    const width = button.current?.offsetWidth ?? 0;\n    return { scale: width > 220 ? .985 : width && width <= 48 ? .96 : .97, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } };\n  },\n};\n\nconst rest: TargetAndTransition = { opacity: 1, y: 0, scale: 1 };\n/** One clean crossfade: the new label rises 2px as it fades in, the outgoing one fades out faster. No blur. */\nconst textIn: TargetAndTransition = { opacity: 0, y: 2 };\nconst textOut: TargetAndTransition = { opacity: 0, transition: { duration: .1, ease: [...motionTokens.ease.standard] } };\nconst iconIn: TargetAndTransition = { opacity: 0, scale: .85 };\nconst iconOut: TargetAndTransition = { opacity: 0, transition: { duration: .1, ease: [...motionTokens.ease.standard] } };\nconst fadeIn: TargetAndTransition = { ...rest, opacity: 0 };\nconst fadeOut: TargetAndTransition = { opacity: 0, transition: { duration: motionTokens.duration.instant } };\n/** Scale rides the spring; opacity tweens. */\nconst iconEnter = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } } as const;\n\n/** A key for the label content: text plus element names, so a new label or icon crossfades while prop-only updates stay in place. */\nfunction labelKey(node: ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\" || typeof node === \"number\" || typeof node === \"bigint\") return String(node);\n  if (Array.isArray(node)) return node.map(labelKey).join(\"\");\n  if (!isValidElement(node)) return \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return `<${typeof type === \"string\" ? type : type?.displayName ?? type?.name ?? \"\"}>${labelKey((node.props as { children?: ReactNode }).children)}`;\n}\n\n/** Springs the slot to the natural width of the incoming label when it changes, so a new label never snaps the button's size.\n *  The outgoing label is popped out of flow at once, so it never holds the old width. Other resizes (a late web font, a parent reflow) jump straight to the new width, so nothing wobbles on first paint. */\nfunction useMorphWidth(content: RefObject<HTMLElement | null>, key: string, reduced: boolean) {\n  const width = useMotionValue<number | \"auto\">(\"auto\");\n  const lastKey = useRef(key), armedUntil = useRef(0);\n  useLayoutEffect(() => {\n    if (lastKey.current === key) return;\n    lastKey.current = key;\n    armedUntil.current = performance.now() + 700;\n  }, [key]);\n  useEffect(() => {\n    const node = content.current, slot = node?.parentElement;\n    if (!node || !slot || typeof ResizeObserver === \"undefined\") return;\n    let measured = false;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const next = entry.contentRect.width;\n      if (!next || !measured || reduced || performance.now() > armedUntil.current) { measured = next > 0; width.jump(next || \"auto\"); delete slot.dataset.morphing; return; }\n      slot.dataset.morphing = \"\";\n      animate(width, next, { ...motionTokens.spring.morph, onComplete: () => { delete slot.dataset.morphing; } });\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [content, reduced, width]);\n  return width;\n}\n\nfunction LabelPhase({ children, icon, reduced, ref }: { children: ReactNode; icon: boolean; reduced: boolean; ref?: Ref<HTMLSpanElement> }) {\n  const present = useIsPresent();\n  return <motion.span ref={ref} className={styles.labelPhase} aria-hidden={present ? undefined : true} initial={reduced ? fadeIn : icon ? iconIn : textIn} animate={rest} exit={reduced ? fadeOut : icon ? iconOut : textOut} transition={reduced ? { duration: motionTokens.duration.instant } : icon ? iconEnter : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }}>{children}</motion.span>;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant = \"primary\", size = \"md\", loading = false, disabled, children, onClick, ...props },\n  ref,\n) {\n  const reduceMotion = useReducedMotion() ?? false;\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const key = labelKey(children);\n  const width = useMorphWidth(contentRef, key, reduceMotion);\n  const setRefs = useCallback((node: HTMLButtonElement | null) => {\n    buttonRef.current = node;\n    if (typeof ref === \"function\") ref(node); else if (ref) ref.current = node;\n  }, [ref]);\n  // A trigger that anchors a menu, popover, or dialog keeps its rect still while pressed, so the layer never measures a scaled anchor.\n  // Radix triggers (asChild) pass aria-haspopup or data-state through; the stylesheet repeats the guard.\n  const popup = props[\"aria-haspopup\"];\n  const anchorsLayer = (popup !== undefined && popup !== false && popup !== \"false\") || props.role === \"combobox\" || (props as Record<string, unknown>)[\"data-state\"] !== undefined;\n  const inert = disabled || loading || props[\"aria-disabled\"] === true || props[\"aria-disabled\"] === \"true\";\n  const classes = [styles.button, styles[variant], styles[size], className].filter(Boolean).join(\" \");\n\n  return (\n    <motion.button\n      ref={setRefs}\n      tabIndex={props.tabIndex ?? 0}\n      className={classes}\n      disabled={disabled}\n      aria-busy={loading || undefined}\n      custom={buttonRef}\n      variants={pressVariants}\n      whileTap={reduceMotion || anchorsLayer || inert ? undefined : \"pressed\"}\n      transition={motionTokens.spring.snappy}\n      {...props}\n      // Loading keeps the button focusable (a disabled button would drop keyboard focus mid-action) and swallows presses instead.\n      aria-disabled={loading || props[\"aria-disabled\"] || undefined}\n      onClick={loading ? event => event.preventDefault() : onClick}\n    >\n      <AnimatePresence initial={false}>\n        {loading ? <motion.span key=\"loader\" className={styles.loader} aria-hidden=\"true\" initial={reduceMotion ? { opacity: 0 } : { opacity: 0, scale: .6 }} animate={{ opacity: 1, scale: 1 }} exit={reduceMotion ? fadeOut : { ...iconOut, scale: .8 }} transition={reduceMotion ? { duration: motionTokens.duration.instant } : iconEnter}><span className={styles.spinner} /></motion.span> : null}\n      </AnimatePresence>\n      <motion.span className={[styles.labelSlot, loading ? styles.loadingLabel : \"\"].filter(Boolean).join(\" \")} style={{ width }}>\n        <span ref={contentRef} className={styles.labelContent}>\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            <LabelPhase key={key} icon={!/\\S/.test(key.replace(/<[^>]*>/g, \"\"))} reduced={reduceMotion}>{children}</LabelPhase>\n          </AnimatePresence>\n        </span>\n      </motion.span>\n    </motion.button>\n  );\n});\n\nButton.displayName = \"Button\";\n\nexport default Button;\n"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/xzero/button/button.module.css",
      "content": "/* Press scale is driven by Motion (whileTap) alone, so transform never gets a CSS transition here. */\n.button { position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-4); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }\n.button:disabled { cursor: not-allowed; opacity: .52; }\n.button[aria-busy=\"true\"] { cursor: progress; }\n/* Anchors of floating layers never scale: Radix opens on pointerdown and would measure a shrunken trigger. */\n.button:is([aria-haspopup]:not([aria-haspopup=\"false\"]), [data-state], [role=\"combobox\"]) { transform: none !important; }\n/* The slot's width follows the incoming label on a spring. The label stays centered and may overflow evenly while the slot catches up;\n   the outgoing label pops out of flow against the slot itself, so it keeps its place instead of following the new content box. */\n.labelSlot { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; transition: opacity var(--duration-fast) var(--ease-standard); }\n.labelSlot[data-morphing] { clip-path: inset(-50% calc(var(--space-3) * -1)); }\n.labelContent { display: inline-flex; flex: none; align-items: center; }\n.labelPhase { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; }\n.labelPhase svg { flex: none; }\n.primary { color: var(--background); background: var(--foreground); border-color: var(--foreground); }\n.secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); }\n.ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }\n.danger { color: var(--danger); background: var(--surface); border-color: var(--border); }\n/* A disabled outlined button keeps its shape and fades only its label, so it still reads as a button that is off, not as plain text. */\n.secondary:disabled, .danger:disabled { opacity: 1; color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }\n.danger:disabled { color: color-mix(in oklab, var(--danger) 55%, var(--surface-muted)); }\n.ghost:disabled { opacity: 1; color: var(--text-muted); }\n@media (hover: hover) and (pointer: fine) {\n  .primary:hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); }\n  .secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); }\n  .ghost:hover:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }\n  .danger:hover:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }\n}\n/* Color feedback on press, so touch and menu triggers (which never scale) still answer the finger. */\n.primary:active:not(:disabled) { opacity: .84; }\n.secondary:active:not(:disabled), .ghost:active:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }\n.danger:active:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }\n.sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); font-size: var(--text-sm); }\n.md { min-height: var(--control-height-md); }\n.lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); font-size: var(--text-sm); }\n.loader { position: absolute; left: 50%; top: 50%; display: grid; width: var(--space-4); height: var(--space-4); margin: calc(var(--space-4) / -2); }\n.spinner { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }\n.loadingLabel { opacity: 0; }\n@keyframes spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) { .button { transition: none; } .labelSlot { transition: opacity var(--duration-instant) linear; } .spinner { animation-duration: .01ms; animation-iteration-count: 1; } }\n"
    }
  ],
  "docs": "Docs and live preview: https://ui.xzero.co.uk/components/button",
  "meta": {
    "tier": "free",
    "kind": "component",
    "tags": [
      "action",
      "control"
    ],
    "docs": "https://ui.xzero.co.uk/components/button",
    "markdown": "https://ui.xzero.co.uk/components/button/markdown"
  }
}