{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"fancy-button","type":"registry:file","title":"Fancy Button","dependencies":["@base-ui/react","class-variance-authority","cn"],"files":[{"path":"fancy-button.tsx","type":"registry:file","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nconst buttonVariants = cva(\n  [\n    \"group/button relative inline-flex shrink-0 items-center justify-center rounded-lg bg-clip-padding text-sm font-medium whitespace-nowrap transition duration-200 ease-out outline-none select-none focus-visible:outline-none\",\n    \"bg-primary text-primary-foreground ring-1 ring-primary\",\n    \"dark:bg-foreground dark:text-background dark:ring-foreground\",\n    \"disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:ring-0 disabled:before:hidden disabled:after:hidden\",\n    \"enabled:aria-invalid:bg-destructive enabled:aria-invalid:text-white enabled:aria-invalid:ring-destructive\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    \"**:relative **:z-10 [&_svg]:relative [&_svg]:z-10\",\n    \"before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-linear-to-b before:from-white/12 before:to-transparent before:mask-[linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] before:mask-exclude before:[mask-clip:content-box,border-box] before:p-px before:content-[''] before:[-webkit-mask-composite:xor]\",\n    \"dark:before:from-muted-foreground/30 dark:before:to-transparent\",\n    \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-linear-to-b after:from-white after:to-transparent after:opacity-[.16] after:transition after:duration-200 after:ease-out after:content-['']\",\n    \"hover:after:opacity-[.24] focus-visible:after:opacity-[.24] active:after:opacity-[.24]\",\n  ],\n  {\n    variants: {\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2\",\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]:pe-1.5 has-data-[icon=inline-start]:ps-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]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\ntype FancyButtonProps = React.ComponentProps<typeof ButtonPrimitive> &\n  VariantProps<typeof buttonVariants>\n\nconst FancyButton = React.forwardRef<HTMLButtonElement, FancyButtonProps>(\n  function FancyButton(\n    { className, size = \"default\", render, nativeButton, children, ...props },\n    ref\n  ) {\n    const usesCustomRender = Boolean(render)\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot=\"fancy-button\"\n        nativeButton={usesCustomRender ? false : nativeButton}\n        render={render}\n        className={cn(buttonVariants({ size }), className)}\n        {...props}\n      >\n        {children}\n      </ButtonPrimitive>\n    )\n  }\n)\n\nFancyButton.displayName = \"FancyButton\"\n\nexport { FancyButton, buttonVariants }","target":"components/fancy-button.tsx"}]}