{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "Button in solid, soft, outline, ghost and link variants, any palette color, loading state.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "@ikas/spinner",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ui/button.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Spinner } from \"@/components/ui/spinner\"\n\n/**\n * Each color points the local --c-* variables at one palette color. Variants\n * only read --c-*, so any variant works with any color.\n */\nconst colors = {\n  neutral:\n    \"[--c:var(--neutral)] [--c-fg:var(--neutral-foreground)] [--c-subtle:var(--neutral-subtle)] [--c-subtle-fg:var(--neutral-subtle-foreground)] [--c-text:var(--foreground)]\",\n  blue: \"[--c:var(--blue)] [--c-fg:var(--blue-foreground)] [--c-subtle:var(--blue-subtle)] [--c-subtle-fg:var(--blue-subtle-foreground)] [--c-text:var(--blue-subtle-foreground)]\",\n  violet:\n    \"[--c:var(--violet)] [--c-fg:var(--violet-foreground)] [--c-subtle:var(--violet-subtle)] [--c-subtle-fg:var(--violet-subtle-foreground)] [--c-text:var(--violet-subtle-foreground)]\",\n  green:\n    \"[--c:var(--green)] [--c-fg:var(--green-foreground)] [--c-subtle:var(--green-subtle)] [--c-subtle-fg:var(--green-subtle-foreground)] [--c-text:var(--green-subtle-foreground)]\",\n  lime: \"[--c:var(--lime)] [--c-fg:var(--lime-foreground)] [--c-subtle:var(--lime-subtle)] [--c-subtle-fg:var(--lime-subtle-foreground)] [--c-text:var(--lime-subtle-foreground)]\",\n  amber:\n    \"[--c:var(--amber)] [--c-fg:var(--amber-foreground)] [--c-subtle:var(--amber-subtle)] [--c-subtle-fg:var(--amber-subtle-foreground)] [--c-text:var(--amber-subtle-foreground)]\",\n  red: \"[--c:var(--red)] [--c-fg:var(--red-foreground)] [--c-subtle:var(--red-subtle)] [--c-subtle-fg:var(--red-subtle-foreground)] [--c-text:var(--red-subtle-foreground)]\",\n} as const\n\nconst buttonVariants = cva(\n  \"group/button relative inline-flex shrink-0 items-center justify-center rounded-lg text-sm font-medium whitespace-nowrap transition-[color,background-color,box-shadow,translate,scale] duration-150 ease-out outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none aria-busy:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        /** Filled, raised and softly glowing in its own color. The main action of a view. */\n        solid:\n          \"bg-(--c) bg-linear-to-b from-white/14 to-transparent text-(--c-fg) shadow-solid hover:bg-[color-mix(in_oklab,var(--c),white_7%)] hover:shadow-solid-hover active:translate-y-px active:bg-none active:shadow-pressed\",\n        /** Tinted fill, no elevation. Secondary actions that still carry color. */\n        soft: \"bg-(--c-subtle) text-(--c-subtle-fg) hover:bg-[color-mix(in_oklab,var(--c-subtle),var(--c)_9%)] active:bg-[color-mix(in_oklab,var(--c-subtle),var(--c)_14%)] aria-expanded:bg-[color-mix(in_oklab,var(--c-subtle),var(--c)_9%)]\",\n        /** White raised surface. Neutral actions next to a solid one: Cancel, Export, Edit. */\n        outline:\n          \"bg-card text-(--c-text) shadow-raised hover:bg-[color-mix(in_oklab,var(--card),var(--foreground)_3%)] hover:shadow-raised-hover active:translate-y-px active:shadow-inset aria-expanded:bg-muted\",\n        /** No container. Toolbars, table rows and icon buttons. */\n        ghost:\n          \"text-(--c-text) hover:bg-(--c-subtle) active:bg-[color-mix(in_oklab,var(--c-subtle),var(--c)_8%)] aria-expanded:bg-(--c-subtle)\",\n        link: \"h-auto! px-0! text-(--c-text) underline decoration-current/30 underline-offset-4 hover:decoration-current\",\n      },\n      /** Palette color. Works with every variant. Use red for destructive actions. */\n      color: colors,\n      size: {\n        xs: \"h-7 gap-1 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5\",\n        sm: \"h-8 gap-1.5 px-3 text-[13px] has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        default: \"h-9 gap-2 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5\",\n        \"icon-xs\": \"size-7 rounded-md [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-sm\": \"size-8\",\n        icon: \"size-9\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n      color: \"neutral\",\n      size: \"default\",\n    },\n  }\n)\n\ntype ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>[\"variant\"]>\ntype ButtonColor = keyof typeof colors\n\n/** shadcn/ui variant names, kept so blocks written for stock shadcn keep working. */\nconst aliases = {\n  default: { variant: \"solid\" },\n  secondary: { variant: \"soft\" },\n  destructive: { variant: \"solid\", color: \"red\" },\n  \"destructive-outline\": { variant: \"outline\", color: \"red\" },\n} as const satisfies Record<string, { variant: ButtonVariant; color?: ButtonColor }>\n\ntype ButtonProps = Omit<React.ComponentProps<\"button\">, \"color\"> &\n  Omit<VariantProps<typeof buttonVariants>, \"variant\"> & {\n    /** solid for the main action. shadcn names like destructive still work. */\n    variant?: ButtonVariant | keyof typeof aliases\n    asChild?: boolean\n    /** Shows a spinner, keeps the button width and blocks clicks. */\n    loading?: boolean\n  }\n\nfunction resolveVariant(variant: ButtonProps[\"variant\"], color: ButtonProps[\"color\"]) {\n  if (variant && variant in aliases) {\n    const alias: { variant: ButtonVariant; color?: ButtonColor } = aliases[variant as keyof typeof aliases]\n    return { variant: alias.variant, color: color ?? alias.color ?? \"neutral\" }\n  }\n  return { variant: (variant ?? \"solid\") as ButtonVariant, color: color ?? \"neutral\" }\n}\n\nfunction Button({\n  className,\n  variant: variantProp,\n  color: colorProp,\n  size = \"default\",\n  asChild = false,\n  loading = false,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { variant, color } = resolveVariant(variantProp, colorProp)\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-color={color}\n      data-size={size}\n      aria-busy={loading || undefined}\n      disabled={asChild ? undefined : disabled}\n      className={cn(buttonVariants({ variant, color, size, className }))}\n      {...props}\n    >\n      {loading && !asChild ? (\n        <>\n          <span className=\"invisible contents\">{children}</span>\n          <span className=\"absolute inset-0 flex items-center justify-center\">\n            <Spinner />\n          </span>\n        </>\n      ) : (\n        children\n      )}\n    </Comp>\n  )\n}\n\nexport { Button, buttonVariants, type ButtonProps, type ButtonColor, type ButtonVariant }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/button",
  "categories": [
    "primitives",
    "forms"
  ],
  "type": "registry:ui"
}