{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "Versatile button with filled/outlined/tonal/text variants, primary/success/destructive themes, sm/md/lg sizes, icon support, and loading state.",
  "dependencies": ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/button.tsx",
      "content": "import { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\n\nimport { Body1, Label1, Label2 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\ninterface IButtonProps extends ComponentProps<'button'>, VariantProps<typeof BUTTON_VARIANTS> {\n  asChild?: boolean;\n  loading?: boolean;\n  prefixIcon?: ReactNode;\n  suffixIcon?: ReactNode;\n  contentContainerClassName?: string;\n  iconButton?: boolean;\n}\n\nconst BUTTON_VARIANTS = cva(\n  'inline-flex cursor-pointer items-center justify-center gap-2 rounded disabled:opacity-50 disabled:pointer-events-none transition-[color,background-color,border-color,box-shadow] duration-150 ease-in-out flex-nowrap focus:ring-0 focus:outline-0',\n  {\n    variants: {\n      theme: {\n        primary:\n          'text-primary [--btn-bg:var(--color-primary)] [--btn-bg-tonal:var(--color-primary-100)] [--btn-border-color:var(--color-primary)] [--btn-text-color:var(--color-primary)] focus:shadow-focus-primary',\n        success:\n          'text-success [--btn-bg:var(--color-success)] [--btn-bg-tonal:var(--color-success-100)] [--btn-border-color:var(--color-success-300)] [--btn-text-color:var(--color-success)] focus:shadow-focus-success',\n        destructive:\n          'text-danger [--btn-bg:var(--color-danger)] [--btn-bg-tonal:var(--color-danger-100)] [--btn-border-color:var(--color-danger-300)] [--btn-text-color:var(--color-danger)] focus:shadow-focus-danger',\n      },\n      variant: {\n        filled: 'bg-(--btn-bg) text-neutral-0 hover:shadow-xs active:opacity-90',\n        outlined:\n          'border border-(--btn-border-color) bg-transparent hover:bg-(--btn-bg)/8 active:bg-(--btn-bg)/16 text-(--btn-text-color)',\n        tonal: 'bg-(--btn-bg-tonal) text-neutral active:opacity-90 hover:shadow-xs',\n        text: 'bg-transparent hover:bg-(--btn-bg)/8 active:bg-(--btn-bg)/16 text-(--btn-text-color)',\n      },\n      size: {\n        sm: 'py-2 px-4 text-sm',\n        md: 'py-2.5 px-6 text-base',\n        lg: 'py-3 px-6 text-base',\n      },\n      iconButton: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      { iconButton: false, className: '[&>svg]:size-4.5' },\n      // Regular button padding (when iconOnly is false)\n      {\n        iconButton: false,\n        size: 'sm',\n        className: 'py-2 px-4 has-[>svg:first-child]:pl-3 has-[>svg:last-child]:pr-3',\n      },\n      {\n        iconButton: false,\n        size: 'md',\n        className: 'py-2.5 px-6 has-[>svg:first-child]:pl-4 has-[>svg:last-child]:pr-4',\n      },\n      {\n        iconButton: false,\n        size: 'lg',\n        className: 'py-3 px-6 has-[>svg:first-child]:pl-4 has-[>svg:last-child]:pr-4',\n      },\n\n      // Icon button padding (when iconButton is true)\n      { iconButton: true, size: 'sm', className: 'p-1.5 [&>svg]:size-5' },\n      { iconButton: true, size: 'md', className: 'p-2 [&>svg]:size-6' },\n      { iconButton: true, size: 'lg', className: 'p-2 [&>svg]:size-8' },\n    ],\n\n    defaultVariants: {\n      theme: 'primary',\n      variant: 'filled',\n      size: 'md',\n      iconButton: false,\n    },\n  },\n);\n\n/**\n * A versatile button component with multiple variants, themes, and sizes.\n *\n * Supports:\n * - Multiple visual variants: filled, outlined, text, tonal\n * - Theme colors: primary, success, destructive\n * - Three sizes: sm, md, lg\n * - Icon support with prefix/suffix positioning\n * - Icon-only button mode\n * - Loading state with spinner\n * - Full accessibility with ARIA attributes\n * - Polymorphic rendering via Radix UI Slot\n *\n * @component\n * @example\n * ```tsx\n * // Basic button\n * <Button>Click me</Button>\n *\n * // Button with icons\n * <Button prefixIcon={<Icon />} suffixIcon={<Icon />}>\n *   Click me\n * </Button>\n *\n * // Icon-only button\n * <Button iconButton>\n *   <Icon />\n * </Button>\n *\n * // Loading state\n * <Button loading>Submitting...</Button>\n *\n * // As a different element\n * <Button asChild>\n *   <a href=\"/link\">Link Button</a>\n * </Button>\n * ```\n *\n * @param  props - The button component props\n * @returns The rendered button element\n */\nfunction Button({\n  className,\n  variant,\n  theme,\n  size,\n  asChild = false,\n  disabled,\n  loading = false,\n  children,\n  prefixIcon,\n  suffixIcon,\n  contentContainerClassName,\n  iconButton = false,\n  ...props\n}: IButtonProps) {\n  const Comp = asChild ? Slot : 'button';\n  const TextComponent = (() => {\n    if (size === 'sm') return Label2;\n    if (size === 'md') return Label1;\n    if (size === 'lg') return Body1;\n    else return Label1;\n  })();\n\n  const buttonEl = (\n    <Comp\n      data-slot='button'\n      className={cn(BUTTON_VARIANTS({ variant, size, className, theme, iconButton }))}\n      disabled={disabled || loading}\n      aria-disabled={disabled || loading}\n      {...props}\n    >\n      {loading ? (\n        <div\n          className='border-neutral-0/60 inline-block size-4.5 animate-spin rounded-full border-2 border-t-transparent'\n          aria-hidden='true'\n        />\n      ) : (\n        prefixIcon\n      )}\n      {!iconButton && (\n        <TextComponent className={cn('text-nowrap', contentContainerClassName)}>\n          {children}\n        </TextComponent>\n      )}\n\n      {iconButton && children}\n\n      {suffixIcon}\n    </Comp>\n  );\n\n  return buttonEl;\n}\n\nexport { Button, BUTTON_VARIANTS };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}