{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "A simple button component",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "files": [
    {
      "path": "registry/cs/ui/button/button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\n/** Available button colors matching the CS design system. */\nexport type CsBtnColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"grey\"\n  | \"dark\"\n  | \"red\"\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n\n/** Icon component type (FC accepting SVG props). */\nexport type CsIcon = React.FC<React.SVGProps<SVGSVGElement>> | React.ReactNode\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        fill: \"\",\n        outline: \"border-2 bg-transparent\",\n        inline: \"bg-transparent\",\n        hover: \"bg-transparent\",\n      },\n      size: {\n        xs: \"h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1.5 px-3 text-sm [&_svg:not([class*='size-'])]:size-3.5\",\n        md: \"h-9 gap-2 px-4 py-2 text-sm\",\n        lg: \"h-10 gap-2 px-6 text-base\",\n        xl: \"h-12 gap-2.5 px-8 text-base [&_svg:not([class*='size-'])]:size-5\",\n      },\n      radius: {\n        xs: \"rounded-none\",\n        sm: \"rounded-sm\",\n        md: \"rounded-md\",\n        lg: \"rounded-lg\",\n        xl: \"rounded-full\",\n      },\n      color: {\n        primary: \"\",\n        secondary: \"\",\n        grey: \"\",\n        dark: \"\",\n        red: \"\",\n        blue: \"\",\n        green: \"\",\n        yellow: \"\",\n        orange: \"\",\n      },\n      w100: {\n        true: \"w-full\",\n        false: \"\",\n      },\n      bold: {\n        true: \"font-bold\",\n        false: \"font-medium\",\n      },\n      italic: {\n        true: \"italic\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      // Fill variants\n      { variant: \"fill\", color: \"primary\", className: \"bg-cs-primary text-cs-primary-text hover:bg-cs-primary-h\" },\n      { variant: \"fill\", color: \"secondary\", className: \"bg-cs-secondary text-cs-secondary-text hover:bg-cs-secondary-h\" },\n      { variant: \"fill\", color: \"grey\", className: \"bg-cs-grey text-cs-grey-text hover:bg-cs-grey-h\" },\n      { variant: \"fill\", color: \"dark\", className: \"bg-cs-dark text-cs-dark-text hover:bg-cs-dark-h\" },\n      { variant: \"fill\", color: \"red\", className: \"bg-cs-red text-cs-red-text hover:bg-cs-red-h\" },\n      { variant: \"fill\", color: \"blue\", className: \"bg-cs-blue text-cs-blue-text hover:bg-cs-blue-h\" },\n      { variant: \"fill\", color: \"green\", className: \"bg-cs-green text-cs-green-text hover:bg-cs-green-h\" },\n      { variant: \"fill\", color: \"yellow\", className: \"bg-cs-yellow text-cs-yellow-text hover:bg-cs-yellow-h\" },\n      { variant: \"fill\", color: \"orange\", className: \"bg-cs-orange text-cs-orange-text hover:bg-cs-orange-h\" },\n      // Outline variants\n      { variant: \"outline\", color: \"primary\", className: \"border-cs-primary text-cs-primary hover:bg-cs-primary hover:text-cs-primary-text\" },\n      { variant: \"outline\", color: \"secondary\", className: \"border-cs-secondary text-cs-secondary hover:bg-cs-secondary hover:text-cs-secondary-text\" },\n      { variant: \"outline\", color: \"grey\", className: \"border-cs-grey text-cs-grey hover:bg-cs-grey hover:text-cs-grey-text\" },\n      { variant: \"outline\", color: \"dark\", className: \"border-cs-dark text-cs-dark hover:bg-cs-dark hover:text-cs-dark-text\" },\n      { variant: \"outline\", color: \"red\", className: \"border-cs-red text-cs-red hover:bg-cs-red hover:text-cs-red-text\" },\n      { variant: \"outline\", color: \"blue\", className: \"border-cs-blue text-cs-blue hover:bg-cs-blue hover:text-cs-blue-text\" },\n      { variant: \"outline\", color: \"green\", className: \"border-cs-green text-cs-green hover:bg-cs-green hover:text-cs-green-text\" },\n      { variant: \"outline\", color: \"yellow\", className: \"border-cs-yellow text-cs-yellow hover:bg-cs-yellow hover:text-cs-yellow-text\" },\n      { variant: \"outline\", color: \"orange\", className: \"border-cs-orange text-cs-orange hover:bg-cs-orange hover:text-cs-orange-text\" },\n      // Inline variants (no background, just colored text)\n      { variant: \"inline\", color: \"primary\", className: \"text-cs-primary hover:text-cs-primary-h\" },\n      { variant: \"inline\", color: \"secondary\", className: \"text-cs-secondary hover:text-cs-secondary-h\" },\n      { variant: \"inline\", color: \"grey\", className: \"text-cs-grey hover:text-cs-grey-h\" },\n      { variant: \"inline\", color: \"dark\", className: \"text-cs-dark hover:text-cs-dark-h\" },\n      { variant: \"inline\", color: \"red\", className: \"text-cs-red hover:text-cs-red-h\" },\n      { variant: \"inline\", color: \"blue\", className: \"text-cs-blue hover:text-cs-blue-h\" },\n      { variant: \"inline\", color: \"green\", className: \"text-cs-green hover:text-cs-green-h\" },\n      { variant: \"inline\", color: \"yellow\", className: \"text-cs-yellow hover:text-cs-yellow-h\" },\n      { variant: \"inline\", color: \"orange\", className: \"text-cs-orange hover:text-cs-orange-h\" },\n      // Hover variants (transparent, shows bg on hover)\n      { variant: \"hover\", color: \"primary\", className: \"text-cs-primary hover:bg-cs-primary/10\" },\n      { variant: \"hover\", color: \"secondary\", className: \"text-cs-secondary hover:bg-cs-secondary/10\" },\n      { variant: \"hover\", color: \"grey\", className: \"text-cs-grey hover:bg-cs-grey/10\" },\n      { variant: \"hover\", color: \"dark\", className: \"text-cs-dark hover:bg-cs-dark/10\" },\n      { variant: \"hover\", color: \"red\", className: \"text-cs-red hover:bg-cs-red/10\" },\n      { variant: \"hover\", color: \"blue\", className: \"text-cs-blue hover:bg-cs-blue/10\" },\n      { variant: \"hover\", color: \"green\", className: \"text-cs-green hover:bg-cs-green/10\" },\n      { variant: \"hover\", color: \"yellow\", className: \"text-cs-yellow hover:bg-cs-yellow/10\" },\n      { variant: \"hover\", color: \"orange\", className: \"text-cs-orange hover:bg-cs-orange/10\" },\n    ],\n    defaultVariants: {\n      variant: \"fill\",\n      size: \"md\",\n      radius: \"md\",\n      color: \"primary\",\n      w100: false,\n      bold: false,\n      italic: false,\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends Omit<React.ComponentProps<\"button\">, \"color\">,\n    Omit<VariantProps<typeof buttonVariants>, \"color\"> {\n  /** Use Slot for composition. */\n  asChild?: boolean\n  /** Button color. */\n  color?: CsBtnColor\n  /** Button icon (component or element). */\n  icon?: CsIcon\n  /** Button label text. */\n  label?: string\n  /** Icon position relative to label. */\n  iconPosition?: \"left\" | \"right\"\n  /** Propagate click event to parent. */\n  propagateClick?: boolean\n}\n\nfunction Button({\n  className,\n  variant = \"fill\",\n  size = \"md\",\n  radius = \"md\",\n  color = \"primary\",\n  w100 = false,\n  bold = false,\n  italic = false,\n  asChild = false,\n  icon: Icon,\n  label,\n  iconPosition = \"left\",\n  propagateClick = false,\n  children,\n  onClick,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!propagateClick) e.stopPropagation()\n    onClick?.(e)\n  }\n\n  const isIconComponent =\n    !!Icon &&\n    (typeof Icon === \"function\" ||\n      (typeof Icon === \"object\" && \"$$typeof\" in (Icon as object)))\n  const hasOnlyIcon = Icon && !label && !children\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      data-color={color}\n      onClick={handleClick}\n      className={cn(\n        buttonVariants({ variant, size, radius, color, w100, bold, italic }),\n        hasOnlyIcon && \"aspect-square px-0\",\n        className\n      )}\n      {...props}\n    >\n      {iconPosition === \"left\" && isIconComponent && React.createElement(Icon as React.ComponentType)}\n      {iconPosition === \"left\" && !isIconComponent && Icon}\n      {label && <span>{label}</span>}\n      {children}\n      {iconPosition === \"right\" && isIconComponent && React.createElement(Icon as React.ComponentType)}\n      {iconPosition === \"right\" && !isIconComponent && Icon}\n    </Comp>\n  )\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}