{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fancy-button",
  "title": "Fancy Button",
  "description": "A fancy-button component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/default/fancy-button/fancy-button.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { Button as BaseButton } from \"@base-ui/react/button\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Intentionally non-themeable: hardcoded OKLCH values because this renders as\r\n// a dark glossy button in both light AND dark — it can't map to --neutral,\r\n// which inverts to near-white in dark mode.\r\nconst fancyButtonVariants = cva(\r\n  \"relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap text-sm font-medium transition-[color,background-color,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,transform,scale,opacity,outline-width,outline-offset,outline-color]  outline-0 outline-offset-0 outline-transparent  disabled:pointer-events-none disabled:opacity-60 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 rounded-lg active:scale-[0.98] focus-visible:outline-ring/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          \"bg-[oklch(0.3_0_0)] hover:bg-[oklch(0.35_0_0)] dark:hover:bg-[oklch(0.22_0_0)] dark:bg-[oklch(0.2_0_0)] text-primary-foreground ring-1 ring-[oklch(0.15_0_0)] dark:text-secondary-foreground shadow-[inset_0_1px_1px_oklch(1_0_0_/_0.2),0_1px_2px_0_oklch(0.1_0_0_/_0.07)]\",\r\n        custom:\r\n          \"shadow-[inset_0_1px_1px_oklch(1_0_0_/_0.4),0_1px_2px_0_oklch(0.1_0_0_/_0.07),inset_0_-0.5px_1px_oklch(0_0_0_/_0.1)] dark:shadow-[inset_0_1px_1px_oklch(1_0_0_/_0.2),0_1px_2px_0_oklch(0.1_0_0_/_0.07),inset_0_-1px_1px_oklch(0_0_0_/_0.1)] text-white ring-1 hover:opacity-90\",\r\n      },\r\n      size: {\r\n        default: \"h-10 sm:h-9 px-3 py-2 gap-1\",\r\n        xs: \"h-8 sm:h-7 px-2 py-1.5 gap-0.5 text-xs rounded-md\",\r\n        sm: \"h-9 sm:h-8  px-2 py-1.5 gap-0.5\",\r\n        lg: \"h-11 sm:h-10  px-3.5 py-2.5 gap-1\",\r\n        icon: \"size-10 sm:size-9\",\r\n        icon_xs: \"size-8 sm:size-7 rounded-md\",\r\n        icon_sm: \"size-9 sm:size-8\",\r\n        icon_lg: \"size-11 sm:size-10\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\ntype FancyButtonProps = BaseButton.Props &\r\n  VariantProps<typeof fancyButtonVariants> & {\r\n    color?: string;\r\n    leftSection?: React.ReactNode;\r\n    rightSection?: React.ReactNode;\r\n  };\r\n\r\nexport const FancyButton = ({\r\n  children,\r\n  size,\r\n  color,\r\n  leftSection,\r\n  rightSection,\r\n  className,\r\n  style,\r\n  ...props\r\n}: FancyButtonProps) => {\r\n  const variant = color ? \"custom\" : \"default\";\r\n\r\n  let dynamicClasses = \"\";\r\n  let dynamicStyle: React.CSSProperties = {};\r\n\r\n  if (color && variant === \"custom\") {\r\n    dynamicStyle = {\r\n      \"--btn-from\": `color-mix(in oklch, ${color}, black 0%)`,\r\n      \"--btn-to\": `color-mix(in oklch, ${color}, black 10%)`,\r\n      \"--btn-ring\": `color-mix(in oklch, ${color}, black 10%)`,\r\n      backgroundColor: color,\r\n    } as React.CSSProperties;\r\n\r\n    dynamicClasses =\r\n      \"bg-gradient-to-b from-[var(--btn-from)] to-[var(--btn-to)] ring-[var(--btn-ring)]\";\r\n  }\r\n\r\n  const buttonContent = (\r\n    <>\r\n      {leftSection}\r\n      <span className=\"px-1\">{children}</span>\r\n      {rightSection}\r\n    </>\r\n  );\r\n\r\n  return (\r\n    <BaseButton\r\n      data-slot=\"fancy-button\"\r\n      data-size={size}\r\n      data-variant={variant}\r\n      className={cn(\r\n        fancyButtonVariants({ variant, size }),\r\n        dynamicClasses,\r\n\r\n        className,\r\n      )}\r\n      style={{\r\n        ...dynamicStyle,\r\n        ...style,\r\n      }}\r\n      {...props}\r\n    >\r\n      {buttonContent}\r\n    </BaseButton>\r\n  );\r\n};\r\n\r\nexport default FancyButton;\r\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/fancy-button.tsx"
    }
  ],
  "type": "registry:ui"
}