{
  "$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\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/utils\";\n\n// Intentionally non-themeable: hardcoded OKLCH values because this renders as\n// a dark glossy button in both light AND dark — it can't map to --neutral,\n// which inverts to near-white in dark mode.\nconst fancyButtonVariants = cva(\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\",\n  {\n    variants: {\n      variant: {\n        default:\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)]\",\n        custom:\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\",\n      },\n      size: {\n        default: \"h-10 sm:h-9 px-3 py-2 gap-1\",\n        xs: \"h-8 sm:h-7 px-2 py-1.5 gap-0.5 text-xs rounded-md\",\n        sm: \"h-9 sm:h-8  px-2 py-1.5 gap-0.5\",\n        lg: \"h-11 sm:h-10  px-3.5 py-2.5 gap-1\",\n        icon: \"size-10 sm:size-9\",\n        icon_xs: \"size-8 sm:size-7 rounded-md\",\n        icon_sm: \"size-9 sm:size-8\",\n        icon_lg: \"size-11 sm:size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\ntype FancyButtonProps = BaseButton.Props &\n  VariantProps<typeof fancyButtonVariants> & {\n    color?: string;\n    leftSection?: React.ReactNode;\n    rightSection?: React.ReactNode;\n  };\n\nexport const FancyButton = ({\n  children,\n  size,\n  color,\n  leftSection,\n  rightSection,\n  className,\n  style,\n  ...props\n}: FancyButtonProps) => {\n  const variant = color ? \"custom\" : \"default\";\n\n  let dynamicClasses = \"\";\n  let dynamicStyle: React.CSSProperties = {};\n\n  if (color && variant === \"custom\") {\n    dynamicStyle = {\n      \"--btn-from\": `color-mix(in oklch, ${color}, black 0%)`,\n      \"--btn-to\": `color-mix(in oklch, ${color}, black 10%)`,\n      \"--btn-ring\": `color-mix(in oklch, ${color}, black 10%)`,\n      backgroundColor: color,\n    } as React.CSSProperties;\n\n    dynamicClasses =\n      \"bg-gradient-to-b from-[var(--btn-from)] to-[var(--btn-to)] ring-[var(--btn-ring)]\";\n  }\n\n  const buttonContent = (\n    <>\n      {leftSection}\n      <span className=\"px-1\">{children}</span>\n      {rightSection}\n    </>\n  );\n\n  return (\n    <BaseButton\n      data-slot=\"fancy-button\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        fancyButtonVariants({ variant, size }),\n        dynamicClasses,\n\n        className,\n      )}\n      style={{\n        ...dynamicStyle,\n        ...style,\n      }}\n      {...props}\n    >\n      {buttonContent}\n    </BaseButton>\n  );\n};\n\nexport default FancyButton;\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/fancy-button.tsx"
    }
  ],
  "type": "registry:ui"
}