{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "Button component styled with StyleX on Base UI primitives.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "stylex-tokens",
    "stylex-utils"
  ],
  "files": [
    {
      "path": "registry/bases/stylex/ui/button.tsx",
      "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\n\nimport { colors, radius } from \"@/lib/tokens.stylex\";\nimport { customClassName } from \"@/lib/utils.stylex\";\n\nconst styles = stylex.create({\n  base: {\n    alignItems: \"center\",\n    borderRadius: radius.md,\n    borderStyle: \"solid\",\n    borderWidth: 0,\n    cursor: { \":disabled\": \"not-allowed\", default: \"pointer\" },\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontSize: \"0.875rem\",\n    fontWeight: 500,\n    gap: \"0.5rem\",\n    justifyContent: \"center\",\n    opacity: { \":disabled\": 0.5, default: 1 },\n    outline: \"none\",\n    pointerEvents: { \":disabled\": \"none\", default: null },\n    transition:\n      \"color 0.15s, background-color 0.15s, box-shadow 0.15s, border-color 0.15s\",\n    whiteSpace: \"nowrap\",\n  },\n  default: {\n    backgroundColor: {\n      \":hover\": `color-mix(in oklab, ${colors.primary} 90%, transparent)`,\n      default: colors.primary,\n    },\n    boxShadow: \"0 1px 2px 0 rgb(0 0 0 / 0.05)\",\n    color: colors.primaryForeground,\n  },\n  destructive: {\n    backgroundColor: {\n      \":hover\": `color-mix(in oklab, ${colors.destructive} 90%, transparent)`,\n      default: colors.destructive,\n    },\n    boxShadow: \"0 1px 2px 0 rgb(0 0 0 / 0.05)\",\n    color: colors.primaryForeground,\n  },\n  focusable: {\n    boxShadow: {\n      \":focus-visible\": `0 0 0 3px color-mix(in oklab, ${colors.ring} 50%, transparent)`,\n      default: null,\n    },\n  },\n  ghost: {\n    backgroundColor: { \":hover\": colors.accent, default: \"transparent\" },\n    color: { \":hover\": colors.accentForeground, default: colors.foreground },\n  },\n  link: {\n    backgroundColor: \"transparent\",\n    color: colors.primary,\n    textDecorationLine: { \":hover\": \"underline\", default: \"none\" },\n    textUnderlineOffset: \"4px\",\n  },\n  outline: {\n    backgroundColor: {\n      \":hover\": colors.accent,\n      default: colors.background,\n    },\n    borderColor: colors.border,\n    borderWidth: \"1px\",\n    boxShadow: \"0 1px 2px 0 rgb(0 0 0 / 0.05)\",\n    color: { \":hover\": colors.accentForeground, default: colors.foreground },\n  },\n  secondary: {\n    backgroundColor: {\n      \":hover\": `color-mix(in oklab, ${colors.secondary} 80%, transparent)`,\n      default: colors.secondary,\n    },\n    boxShadow: \"0 1px 2px 0 rgb(0 0 0 / 0.05)\",\n    color: colors.secondaryForeground,\n  },\n  sizeDefault: { height: \"2.25rem\", paddingInline: \"1rem\" },\n  sizeIcon: {\n    height: \"2.25rem\",\n    paddingInline: 0,\n    width: \"2.25rem\",\n  },\n  sizeIconLg: {\n    height: \"2.5rem\",\n    paddingInline: 0,\n    width: \"2.5rem\",\n  },\n  sizeIconSm: {\n    height: \"2rem\",\n    paddingInline: 0,\n    width: \"2rem\",\n  },\n  sizeLg: { height: \"2.5rem\", paddingInline: \"2rem\" },\n  sizeSm: {\n    height: \"2rem\",\n    paddingInline: \"0.75rem\",\n  },\n});\n\ntype ButtonVariant =\n  | \"default\"\n  | \"destructive\"\n  | \"outline\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"link\";\ntype ButtonSize = \"default\" | \"sm\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\";\n\nconst variantStyles: Record<ButtonVariant, StyleXStyles> = {\n  default: styles.default,\n  destructive: styles.destructive,\n  ghost: styles.ghost,\n  link: styles.link,\n  outline: styles.outline,\n  secondary: styles.secondary,\n};\n\nconst sizeStyles: Record<ButtonSize, StyleXStyles> = {\n  default: styles.sizeDefault,\n  icon: styles.sizeIcon,\n  \"icon-lg\": styles.sizeIconLg,\n  \"icon-sm\": styles.sizeIconSm,\n  lg: styles.sizeLg,\n  sm: styles.sizeSm,\n};\n\nexport interface ButtonProps extends Omit<\n  React.ComponentProps<\"button\">,\n  \"className\"\n> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n  /** Render as a different element (Base UI render API). */\n  render?: useRender.RenderProp;\n}\n\nconst Button = ({\n  className,\n  style,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: ButtonProps) =>\n  useRender({\n    props: {\n      ...stylex.props(\n        styles.base,\n        styles.focusable,\n        variantStyles[variant],\n        sizeStyles[size],\n        customClassName(className),\n        style as StyleXStyles\n      ),\n      \"data-size\": size,\n      \"data-slot\": \"button\",\n      \"data-variant\": variant,\n      ...props,\n    },\n    render: render ?? <button type=\"button\" />,\n  });\n\nexport { Button, styles as buttonStyles };\n",
      "type": "registry:ui",
      "target": "components/ui/button.tsx"
    }
  ],
  "type": "registry:ui"
}