{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Button",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/Button.res",
      "content": "@@directive(\"'use client'\")\n\n@module(\"cn\")\nexternal cn: (string, string, string, option<string>) => string = \"cn\"\n\nmodule Type = BaseUi.Types.ButtonType\n\nmodule Variant = {\n  @unboxed\n  type t =\n    | @as(\"default\") Default\n    | @as(\"secondary\") Secondary\n    | @as(\"destructive\") Destructive\n    | @as(\"outline\") Outline\n    | @as(\"ghost\") Ghost\n    | @as(\"link\") Link\n}\n\nmodule Size = {\n  @unboxed\n  type t =\n    | @as(\"default\") Default\n    | @as(\"xs\") Xs\n    | @as(\"sm\") Sm\n    | @as(\"lg\") Lg\n    | @as(\"icon\") Icon\n    | @as(\"icon-xs\") IconXs\n    | @as(\"icon-sm\") IconSm\n    | @as(\"icon-lg\") IconLg\n}\n\nlet buttonVariantClass = (~variant: Variant.t) =>\n  switch variant {\n  | Default => \"bg-primary text-primary-foreground hover:bg-primary/80\"\n  | Outline => \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\"\n  | Secondary => \"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\"\n  | Ghost => \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\"\n  | Destructive => \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\"\n  | Link => \"text-primary underline-offset-4 hover:underline\"\n  }\n\nlet buttonSizeClass = (~size: Size.t) =>\n  switch size {\n  | Xs => \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\"\n  | Sm => \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\"\n  | Lg => \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\"\n  | Icon => \"size-8\"\n  | IconXs => \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\"\n  | IconSm => \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\"\n  | IconLg => \"size-9\"\n  | Default => \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\"\n  }\n\nlet baseClass = \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n\nlet buttonVariants = (~variant=Variant.Default, ~size=Size.Default, ~className=?) =>\n  cn(baseClass, buttonVariantClass(~variant), buttonSizeClass(~size), className)\n\ntype props = {\n  variant?: Variant.t,\n  size?: Size.t,\n  ...BaseUi.Types.NativeButtonProps.t,\n  focusableWhenDisabled?: bool,\n}\n\nlet toBaseUiProps: props => BaseUi.Button.props = %raw(`({variant, size, ...rest}) => rest`)\n\n@react.componentWithProps(props)\nlet make = (props: props) => {\n  let variant = props.variant->Option.getOr(Default)\n  let size = props.size->Option.getOr(Default)\n  let className = props.className\n  let baseUiProps = props->toBaseUiProps\n  <BaseUi.Button\n    {...baseUiProps}\n    dataSlot={props.dataSlot->Option.getOr(\"button\")}\n    className={buttonVariants(~variant, ~size, ~className?)}\n  />\n}\n",
      "type": "registry:file",
      "target": "@ui/Button.res"
    }
  ],
  "type": "registry:ui"
}