{
  "$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 type { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { create, props as stylexProps } 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 = create({\n  base: {\n    \":is(svg)\": {\n      flexShrink: 0,\n      height: \"1rem\",\n      pointerEvents: \"none\",\n      width: \"1rem\",\n    },\n    alignItems: \"center\",\n    backgroundClip: \"padding-box\",\n    borderRadius: radius.md,\n    borderStyle: \"none\",\n    borderWidth: 0,\n    boxShadow: {\n      \":focus-visible\": `0 0 0 3px color-mix(in oklab, ${colors.ring} 50%, transparent)`,\n      default: null,\n    },\n    cursor: {\n      \":disabled\": \"not-allowed\",\n      default: \"pointer\",\n    },\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontSize: \"0.875rem\",\n    fontWeight: 500,\n    justifyContent: \"center\",\n    opacity: {\n      \":disabled\": 0.5,\n      default: 1,\n    },\n    outline: \"none\",\n    pointerEvents: {\n      \":disabled\": \"none\",\n      default: null,\n    },\n    transform: {\n      \":active\": \"translateY(1px)\",\n      default: null,\n    },\n    transitionDuration: \"150ms\",\n    transitionProperty: \"all\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    userSelect: \"none\",\n    whiteSpace: \"nowrap\",\n  },\n  default: {\n    backgroundColor: {\n      \":hover\": `color-mix(in oklab, ${colors.primary} 80%, transparent)`,\n      default: colors.primary,\n    },\n    color: colors.primaryForeground,\n  },\n  destructive: {\n    backgroundColor: {\n      \":hover\": `color-mix(in oklab, ${colors.destructive} 20%, transparent)`,\n      \":is(.dark, .dark *)\": `color-mix(in oklab, ${colors.destructive} 20%, transparent)`,\n      \":is(.dark, .dark *):hover\": `color-mix(in oklab, ${colors.destructive} 30%, transparent)`,\n      default: `color-mix(in oklab, ${colors.destructive} 10%, transparent)`,\n    },\n    boxShadow: {\n      \":focus-visible\": `0 0 0 3px color-mix(in oklab, ${colors.destructive} 20%, transparent)`,\n      \":is(.dark, .dark *):focus-visible\": `0 0 0 3px color-mix(in oklab, ${colors.destructive} 40%, transparent)`,\n      default: null,\n    },\n    color: colors.destructive,\n  },\n  ghost: {\n    backgroundColor: {\n      \":hover\": colors.muted,\n      \":is(.dark, .dark *):hover\": `color-mix(in oklab, ${colors.muted} 50%, transparent)`,\n      default: \"transparent\",\n    },\n    color: {\n      \":hover\": colors.foreground,\n      default: \"inherit\",\n    },\n  },\n  link: {\n    backgroundColor: \"transparent\",\n    color: colors.primary,\n    textDecorationLine: {\n      \":hover\": \"underline\",\n      default: \"none\",\n    },\n    textUnderlineOffset: \"4px\",\n  },\n  outline: {\n    backgroundColor: {\n      \":hover\": colors.muted,\n      \":is(.dark, .dark *)\": `color-mix(in oklab, ${colors.input} 30%, transparent)`,\n      \":is(.dark, .dark *):hover\": `color-mix(in oklab, ${colors.input} 50%, transparent)`,\n      default: colors.background,\n    },\n    borderColor: {\n      \":is(.dark, .dark *)\": colors.input,\n      default: colors.border,\n    },\n    borderStyle: \"solid\",\n    borderWidth: \"1px\",\n    color: {\n      \":hover\": colors.foreground,\n      default: \"inherit\",\n    },\n  },\n  secondary: {\n    backgroundColor: {\n      \":hover\": `color-mix(in oklch, ${colors.secondary}, ${colors.foreground} 5%)`,\n      default: colors.secondary,\n    },\n    color: colors.secondaryForeground,\n  },\n  sizeDefault: {\n    \":is(svg)\": {\n      height: \"1rem\",\n      width: \"1rem\",\n    },\n    gap: \"0.375rem\",\n    height: \"2rem\",\n    paddingInline: \"0.625rem\",\n  },\n  sizeIcon: {\n    \":is(svg)\": {\n      height: \"1rem\",\n      width: \"1rem\",\n    },\n    height: \"2rem\",\n    paddingBlock: 0,\n    paddingInline: 0,\n    width: \"2rem\",\n  },\n  sizeIconLg: {\n    \":is(svg)\": {\n      height: \"1.125rem\",\n      width: \"1.125rem\",\n    },\n    height: \"2.25rem\",\n    paddingBlock: 0,\n    paddingInline: 0,\n    width: \"2.25rem\",\n  },\n  sizeIconSm: {\n    \":is(svg)\": {\n      height: \"0.875rem\",\n      width: \"0.875rem\",\n    },\n    borderRadius: `min(${radius.md}, 12px)`,\n    height: \"1.75rem\",\n    paddingBlock: 0,\n    paddingInline: 0,\n    width: \"1.75rem\",\n  },\n  sizeIconXs: {\n    \":is(svg)\": {\n      height: \"0.75rem\",\n      width: \"0.75rem\",\n    },\n    borderRadius: `min(${radius.md}, 10px)`,\n    height: \"1.5rem\",\n    paddingBlock: 0,\n    paddingInline: 0,\n    width: \"1.5rem\",\n  },\n  sizeLg: {\n    \":is(svg)\": {\n      height: \"1.125rem\",\n      width: \"1.125rem\",\n    },\n    gap: \"0.375rem\",\n    height: \"2.25rem\",\n    paddingInline: \"0.625rem\",\n  },\n  sizeSm: {\n    \":is(svg)\": {\n      height: \"1rem\",\n      width: \"1rem\",\n    },\n    borderRadius: `min(${radius.md}, 12px)`,\n    fontSize: \"0.8rem\",\n    gap: \"0.25rem\",\n    height: \"1.75rem\",\n    paddingInline: \"0.625rem\",\n  },\n  sizeXs: {\n    \":is(svg)\": {\n      height: \"0.75rem\",\n      width: \"0.75rem\",\n    },\n    borderRadius: `min(${radius.md}, 10px)`,\n    fontSize: \"0.75rem\",\n    gap: \"0.25rem\",\n    height: \"1.5rem\",\n    paddingInline: \"0.5rem\",\n  },\n});\n\nexport type ButtonVariant =\n  | \"default\"\n  | \"destructive\"\n  | \"outline\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"link\";\n\nexport type ButtonSize =\n  | \"default\"\n  | \"xs\"\n  | \"sm\"\n  | \"lg\"\n  | \"icon\"\n  | \"icon-xs\"\n  | \"icon-sm\"\n  | \"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  \"icon-xs\": styles.sizeIconXs,\n  lg: styles.sizeLg,\n  sm: styles.sizeSm,\n  xs: styles.sizeXs,\n};\n\nexport type ButtonProps = Omit<ButtonPrimitive.Props, \"style\"> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n  style?: StyleXStyles;\n};\n\nconst Button = ({\n  className,\n  style,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...restProps\n}: ButtonProps) => {\n  const styleProps = stylexProps(\n    styles.base,\n    variantStyles[variant],\n    sizeStyles[size],\n    customClassName(className),\n    style\n  );\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(\n      {\n        className: styleProps.className,\n        \"data-size\": size,\n        \"data-slot\": \"button\",\n        \"data-variant\": variant,\n        style: styleProps.style,\n      },\n      restProps\n    ),\n    render,\n    state: {\n      disabled: restProps.disabled ?? false,\n      size,\n      slot: \"button\" as const,\n      variant,\n    },\n  });\n};\n\nexport { Button, styles as buttonStyles };\n",
      "type": "registry:ui",
      "target": "components/ui/button.tsx"
    }
  ],
  "type": "registry:ui"
}