{"name":"button","type":"registry:ui","files":[{"path":"button.tsx","type":"registry:ui","content":"import * as React from \"react\"\nimport { mergeProps } from \"@base-ui-components/react/merge-props\"\nimport { useRender } from \"@base-ui-components/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"relative inline-flex w-fit shrink-0 cursor-pointer items-center justify-center gap-[var(--hui-space-3)] whitespace-nowrap rounded-[var(--hui-radius-2)] border-0 bg-transparent px-[var(--hui-space-4)] py-[var(--hui-space-3)] [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] outline-none motion-safe:[transition:var(--hui-transition-interactive)] motion-safe:active:[transition:var(--hui-transition-pressed)] focus-visible:[outline:var(--hui-focus-ring)] not-disabled:active:scale-[var(--hui-scale-pressed)] disabled:pointer-events-auto disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:after:pointer-events-none pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-[var(--hui-color-background-accent-emphasis)] text-[var(--hui-color-foreground-accent-emphasis)] shadow-[var(--hui-shadow-feather)] hover:bg-[var(--hui-color-background-accent-emphasis-hover)] active:bg-[var(--hui-color-background-accent-emphasis-hover)] focus-visible:outline-offset-[var(--hui-focus-ring-offset-accent)] disabled:hover:bg-[var(--hui-color-background-accent-emphasis)]\",\n        outline:\n          \"border-[0.5px] border-[var(--hui-color-border-accent-emphasis)] bg-[var(--hui-color-background-base-primary)] text-[var(--hui-color-foreground-accent-primary)] shadow-[var(--hui-shadow-feather)] hover:bg-[var(--hui-color-background-accent-primary)] active:bg-[var(--hui-color-background-accent-primary)] disabled:bg-transparent disabled:hover:border-[var(--hui-color-border-accent-emphasis)] disabled:hover:bg-transparent disabled:hover:text-[var(--hui-color-foreground-accent-primary)]\",\n        secondary:\n          \"bg-[var(--hui-color-background-neutral-secondary)] text-[var(--hui-color-foreground-base-primary)] shadow-[var(--hui-shadow-feather)] hover:bg-[var(--hui-color-background-neutral-secondary-hover)] active:bg-[var(--hui-color-background-neutral-secondary-hover)] disabled:hover:bg-[var(--hui-color-background-neutral-secondary)] disabled:hover:text-[var(--hui-color-foreground-base-primary)]\",\n        destructive:\n          \"bg-[var(--hui-color-background-danger-emphasis)] text-[var(--hui-color-foreground-danger-emphasis)] shadow-[var(--hui-shadow-feather)] hover:bg-[var(--hui-color-background-danger-emphasis-hover)] active:bg-[var(--hui-color-background-danger-emphasis-hover)] focus-visible:[outline-color:var(--hui-color-border-danger-emphasis)] focus-visible:outline-offset-[var(--hui-focus-ring-offset-accent)] disabled:hover:bg-[var(--hui-color-background-danger-emphasis)]\",\n        \"destructive-outline\":\n          \"border-[0.5px] border-[var(--hui-color-border-danger-emphasis)] bg-[var(--hui-color-background-base-primary)] text-[var(--hui-color-foreground-danger-primary)] shadow-[var(--hui-shadow-feather)] hover:border-[var(--hui-color-border-danger-emphasis-hover)] hover:bg-[var(--hui-color-background-danger-primary)] active:border-[var(--hui-color-border-danger-emphasis-hover)] active:bg-[var(--hui-color-background-danger-primary)] focus-visible:[outline-color:var(--hui-color-border-danger-emphasis)] disabled:bg-transparent disabled:hover:border-[var(--hui-color-border-danger-emphasis)] disabled:hover:bg-transparent disabled:hover:text-[var(--hui-color-foreground-danger-primary)]\",\n        ghost:\n          \"border border-dashed border-[var(--hui-color-border-base-primary)] text-[var(--hui-color-foreground-base-primary)] hover:bg-[var(--hui-color-background-base-primary-hover)] active:bg-[var(--hui-color-background-base-primary-hover)] disabled:hover:border-[var(--hui-color-border-base-primary)] disabled:hover:bg-transparent disabled:hover:text-[var(--hui-color-foreground-base-primary)]\",\n        link: \"text-[var(--hui-color-foreground-base-primary)] hover:bg-[var(--hui-color-background-base-primary-hover)] active:bg-[var(--hui-color-background-base-primary-hover)] disabled:hover:bg-transparent disabled:hover:text-[var(--hui-color-foreground-base-primary)]\",\n      },\n      size: {\n        default:\n          \"px-[var(--hui-space-4)] py-[var(--hui-space-3)] [font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]\",\n        xs: \"gap-[var(--hui-space-2)] rounded-[var(--hui-radius-1)] px-[var(--hui-space-2)] py-[var(--hui-space-1)] [font-size:var(--hui-font-size-micro)] [letter-spacing:var(--hui-letter-spacing-micro)] [line-height:var(--hui-line-height-micro)] [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"gap-[var(--hui-space-2)] px-[var(--hui-space-3)] py-[var(--hui-space-2)] [font-size:var(--hui-font-size-mini)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)]\",\n        lg: \"px-[var(--hui-space-5)] py-[var(--hui-space-3)] [font-size:var(--hui-font-size-regular)] [letter-spacing:var(--hui-letter-spacing-regular)] [line-height:var(--hui-line-height-regular)]\",\n        xl: \"px-[var(--hui-space-6)] py-[var(--hui-space-4)] [font-size:var(--hui-font-size-large)] [letter-spacing:var(--hui-letter-spacing-large)] [line-height:var(--hui-line-height-large)] [&_svg:not([class*='size-'])]:size-4.5\",\n        icon: \"size-8 p-0\",\n        \"icon-sm\": \"size-6 p-0\",\n        \"icon-lg\": \"size-9 p-0\",\n      },\n      appearance: {\n        flat: null,\n        glossy:\n          \"bg-[linear-gradient(180deg,rgba(255,255,255,.46)_0%,rgba(255,255,255,.12)_38%,transparent_39%),linear-gradient(180deg,rgba(255,255,255,.12)_0%,transparent_54%,rgba(0,0,0,.18)_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,.5),inset_0_0_5px_rgba(255,255,255,.18),inset_0_-18px_15px_-14px_rgba(0,0,0,.35),0_0_0_.75px_rgba(0,0,0,.24),0_3px_8px_rgba(0,0,0,.24)]! [text-shadow:0_1px_2px_rgba(0,0,0,.35)] transition-[filter,box-shadow] duration-200 hover:brightness-[1.06]\",\n        glow:\n          \"bg-[linear-gradient(180deg,rgba(0,0,0,.18)_0%,rgba(255,255,255,.08)_100%)] shadow-[inset_0_-1.5px_2px_rgba(255,255,255,.45),inset_0_0_12px_rgba(255,255,255,.22),inset_0_0_8px_rgba(255,255,255,.18),0_2px_6px_rgba(0,0,0,.28)]! [text-shadow:0_1px_2px_rgba(0,0,0,.4)] transition-[filter,box-shadow] duration-200 hover:brightness-[1.12]\",\n        bevel:\n          \"bg-[linear-gradient(180deg,rgba(255,255,255,.2)_0%,transparent_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,.4),0_1px_0_rgba(0,0,0,.28),0_2px_0_rgba(0,0,0,.28),0_3px_0_rgba(0,0,0,.38),0_4px_0_rgba(0,0,0,.38),0_6px_8px_rgba(0,0,0,.3)]! [text-shadow:0_1px_0_rgba(0,0,0,.4)] transition-[transform,box-shadow] duration-120 hover:-translate-y-px [&:is(:active,[data-pressed])]:translate-y-1 [&:is(:active,[data-pressed])]:shadow-[inset_0_1px_0_rgba(255,255,255,.35),0_1px_0_rgba(0,0,0,.38),0_2px_4px_rgba(0,0,0,.28)]!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      appearance: \"flat\",\n    },\n  }\n)\n\ninterface ButtonProps extends useRender.ComponentProps<\"button\"> {\n  variant?: VariantProps<typeof buttonVariants>[\"variant\"]\n  size?: VariantProps<typeof buttonVariants>[\"size\"]\n  appearance?: VariantProps<typeof buttonVariants>[\"appearance\"]\n  asChild?: boolean\n}\n\nfunction Button({\n  className,\n  variant,\n  size,\n  appearance,\n  render,\n  asChild = false,\n  children,\n  ...props\n}: ButtonProps) {\n  const renderValue = asChild\n    ? (React.Children.only(children) as React.ReactElement<\n        Record<string, unknown>\n      >)\n    : render\n\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    renderValue ? undefined : \"button\"\n\n  const defaultProps = {\n    \"data-slot\": \"button\",\n    className: cn(buttonVariants({ variant, size, appearance, className })),\n    type: typeValue,\n  }\n\n  return useRender({\n    defaultTagName: \"button\",\n    render: renderValue,\n    props: mergeProps<\"button\">(\n      defaultProps,\n      asChild ? props : { ...props, children }\n    ),\n  })\n}\n\nexport { Button, buttonVariants }\n","target":"components/ui/button.tsx"}],"dependencies":["@base-ui-components/react","class-variance-authority"]}