{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masai-chips",
  "title": "Masai Chips",
  "description": "Masai chips component with regular/large sizes and default/left-icon/right-icon/icon-only variants.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/components/masai-chips.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\ntype MasaiChipsType = \"default\" | \"left-icon\" | \"right-icon\" | \"icon-only\";\ntype MasaiChipsSize = \"regular\" | \"large\";\n\n/** Default Masai LMS chip styling (blue field + blue text). */\nconst chipBrandPaletteClassName =\n  \"bg-blue-50 !text-blue-500 focus-visible:ring-blue-300 hover:bg-blue-100 active:bg-blue-200 disabled:border-gray-200 disabled:bg-gray-100 disabled:!text-gray-400\";\n\n/** Focus + disabled defaults when skipping the Masai blue palette. */\nconst chipCustomPaletteBaseClassName =\n  \"focus-visible:ring-gray-400 disabled:border-gray-200 disabled:bg-gray-100 disabled:!text-gray-400\";\n\nconst masaiChipsVariants = cva(\n  \"inline-flex items-center justify-center rounded-[100px] border border-transparent outline-none transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none\",\n  {\n    variants: {\n      size: {\n        regular: \"px-2 py-1 gap-1.5 type-b3-md\",\n        large: \"px-3 py-2 gap-2 type-b2-md\",\n      },\n      type: {\n        default: \"\",\n        \"left-icon\": \"\",\n        \"right-icon\": \"\",\n        \"icon-only\": \"\",\n      },\n    },\n    compoundVariants: [\n      { size: \"regular\", type: \"icon-only\", className: \"p-1\" },\n      { size: \"large\", type: \"icon-only\", className: \"p-2\" },\n    ],\n    defaultVariants: {\n      size: \"regular\",\n      type: \"default\",\n    },\n  },\n);\n\nexport type MasaiChipsProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> &\n  VariantProps<typeof masaiChipsVariants> & {\n    type?: MasaiChipsType;\n    size?: MasaiChipsSize;\n    label?: string;\n    icon?: React.ReactNode;\n    htmlType?: \"button\" | \"submit\" | \"reset\";\n    /** Chip surface (`bg-*`, borders, `hover:bg-*`, `active:bg-*`, etc.). Drops default blue palette when non-empty unless `forceBrandPalette` is true. */\n    backgroundClassName?: string;\n    /** Label/icon text color (`text-*`; use `!text-*` if a token overrides). Drops default blue palette when non-empty unless `forceBrandPalette` is true. */\n    textClassName?: string;\n    /**\n     * If true, the Masai blue palette is merged in addition to `backgroundClassName` / `textClassName`;\n     * `className` is applied last via `tailwind-merge` for final wins.\n     */\n    forceBrandPalette?: boolean;\n  };\n\nexport function MasaiChips({\n  className,\n  type = \"default\",\n  size = \"regular\",\n  label = \"Chip\",\n  icon,\n  htmlType = \"button\",\n  backgroundClassName,\n  textClassName,\n  forceBrandPalette = false,\n  ...props\n}: MasaiChipsProps) {\n  if ((type === \"left-icon\" || type === \"right-icon\" || type === \"icon-only\") && !icon) {\n    console.warn(\"[MasaiChips] Icon variant selected without passing `icon`.\");\n  }\n\n  const usesCustomPalette =\n    !forceBrandPalette && !!(backgroundClassName?.trim() || textClassName?.trim());\n\n  return (\n    <button\n      type={htmlType}\n      className={cn(\n        masaiChipsVariants({ size, type }),\n        !usesCustomPalette ? chipBrandPaletteClassName : chipCustomPaletteBaseClassName,\n        backgroundClassName,\n        textClassName,\n        className,\n      )}\n      {...props}\n    >\n      {type === \"left-icon\" ? <span className=\"shrink-0\">{icon}</span> : null}\n      {type !== \"icon-only\" ? label : null}\n      {type === \"right-icon\" ? <span className=\"shrink-0\">{icon}</span> : null}\n      {type === \"icon-only\" ? (\n        <span className=\"size-4 shrink-0 [&_svg]:size-4\">{icon}</span>\n      ) : null}\n    </button>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}