@snksergio/design-system 0.1.0

package/dist-lib/chunks/chip-group-D3D0i72q.mjs

@@ -0,0 +1,780 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, createContext, useContext } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import { tv as tv$1 } from "tailwind-variants";
+const isDsPad = (v) => /^(pad|sp)-/.test(v);
+const isDsGap = (v) => /^gp-/.test(v);
+const isDsRadius = (v) => /^radius-/.test(v);
+const isDsShadow = (v) => /^sh-/.test(v);
+const isDsForm = (v) => /^form-/.test(v);
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            // Displays
+            "display-2xl",
+            "display-xl",
+            "display-lg",
+            "display-md",
+            // Headings
+            "heading-xl",
+            "heading-lg",
+            "heading-md",
+            "heading-sm",
+            "heading-xs",
+            "heading-2xs",
+            // Titles
+            "title-lg",
+            "title-md",
+            "title-sm",
+            // Labels
+            "label-xl",
+            "label-lg",
+            "label-md",
+            "label-sm",
+            "label-xs",
+            // Paragraphs
+            "paragraph-xl",
+            "paragraph-lg",
+            "paragraph-md",
+            "paragraph-sm",
+            "paragraph-xs",
+            // Body
+            "body-lg",
+            "body-md",
+            "body-sm",
+            "body-lg-medium",
+            "body-md-medium",
+            "body-sm-medium",
+            // Captions
+            "caption-md",
+            "caption-sm",
+            // Subheadings
+            "subheading-md",
+            "subheading-sm",
+            "subheading-xs",
+            "subheading-2xs",
+            // Overlines
+            "overline-md",
+            "overline-sm",
+            // Code
+            "code-md",
+            "code-sm"
+          ]
+        }
+      ],
+      /* ── Padding ──────────────────────────────────────────────────────── */
+      p: [{ p: [isDsPad] }],
+      px: [{ px: [isDsPad] }],
+      py: [{ py: [isDsPad] }],
+      pt: [{ pt: [isDsPad] }],
+      pr: [{ pr: [isDsPad] }],
+      pb: [{ pb: [isDsPad] }],
+      pl: [{ pl: [isDsPad] }],
+      ps: [{ ps: [isDsPad] }],
+      pe: [{ pe: [isDsPad] }],
+      /* ── Margin (usa mesmo sp-*) ──────────────────────────────────────── */
+      m: [{ m: [isDsPad] }],
+      mx: [{ mx: [isDsPad] }],
+      my: [{ my: [isDsPad] }],
+      mt: [{ mt: [isDsPad] }],
+      mr: [{ mr: [isDsPad] }],
+      mb: [{ mb: [isDsPad] }],
+      ml: [{ ml: [isDsPad] }],
+      ms: [{ ms: [isDsPad] }],
+      me: [{ me: [isDsPad] }],
+      /* ── Inset / position (top/right/bottom/left) ─────────────────────── */
+      inset: [{ inset: [isDsPad] }],
+      "inset-x": [{ "inset-x": [isDsPad] }],
+      "inset-y": [{ "inset-y": [isDsPad] }],
+      "top": [{ top: [isDsPad] }],
+      "right": [{ right: [isDsPad] }],
+      "bottom": [{ bottom: [isDsPad] }],
+      "left": [{ left: [isDsPad] }],
+      "start": [{ start: [isDsPad] }],
+      "end": [{ end: [isDsPad] }],
+      /* ── Gap ──────────────────────────────────────────────────────────── */
+      gap: [{ gap: [isDsGap] }],
+      "gap-x": [{ "gap-x": [isDsGap] }],
+      "gap-y": [{ "gap-y": [isDsGap] }],
+      /* ── Rounded (todas as cantos) ────────────────────────────────────── */
+      rounded: [{ rounded: [isDsRadius] }],
+      "rounded-s": [{ "rounded-s": [isDsRadius] }],
+      "rounded-e": [{ "rounded-e": [isDsRadius] }],
+      "rounded-t": [{ "rounded-t": [isDsRadius] }],
+      "rounded-r": [{ "rounded-r": [isDsRadius] }],
+      "rounded-b": [{ "rounded-b": [isDsRadius] }],
+      "rounded-l": [{ "rounded-l": [isDsRadius] }],
+      "rounded-ss": [{ "rounded-ss": [isDsRadius] }],
+      "rounded-se": [{ "rounded-se": [isDsRadius] }],
+      "rounded-ee": [{ "rounded-ee": [isDsRadius] }],
+      "rounded-es": [{ "rounded-es": [isDsRadius] }],
+      "rounded-tl": [{ "rounded-tl": [isDsRadius] }],
+      "rounded-tr": [{ "rounded-tr": [isDsRadius] }],
+      "rounded-br": [{ "rounded-br": [isDsRadius] }],
+      "rounded-bl": [{ "rounded-bl": [isDsRadius] }],
+      /* ── Shadow ───────────────────────────────────────────────────────── */
+      shadow: [{ shadow: [isDsShadow] }],
+      /* ── Form sizes (min-h, h, w, size) ───────────────────────────────── */
+      "min-h": [{ "min-h": [isDsForm] }],
+      h: [{ h: [isDsForm] }],
+      w: [{ w: [isDsForm] }],
+      size: [{ size: [isDsForm] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const twMergeConfig = {
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            // Displays
+            "display-2xl",
+            "display-xl",
+            "display-lg",
+            "display-md",
+            // Headings (heading-2xs removido — duplicata de title-lg)
+            "heading-xl",
+            "heading-lg",
+            "heading-md",
+            "heading-sm",
+            "heading-xs",
+            // Titles
+            "title-lg",
+            "title-md",
+            "title-sm",
+            // Labels (+ label-base 13px e label-2xs 11px)
+            "label-xl",
+            "label-lg",
+            "label-md",
+            "label-sm",
+            "label-base",
+            "label-xs",
+            "label-2xs",
+            // Paragraphs (+ paragraph-base 13px)
+            "paragraph-xl",
+            "paragraph-lg",
+            "paragraph-md",
+            "paragraph-sm",
+            "paragraph-base",
+            "paragraph-xs",
+            // Captions (+ caption-xs 10px)
+            "caption-md",
+            "caption-sm",
+            "caption-xs",
+            // Subheadings (+ strong-md/sm com weight 700 + tracking apertado)
+            "subheading-md",
+            "subheading-sm",
+            "subheading-xs",
+            "subheading-2xs",
+            "subheading-strong-md",
+            "subheading-strong-sm",
+            // Code
+            "code-md",
+            "code-sm"
+          ]
+        }
+      ]
+    }
+  }
+};
+const tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig
+});
+const buttonVariants = tv({
+  base: [
+    "inline-flex items-center justify-center",
+    "select-none whitespace-nowrap",
+    "focus-visible:outline-none",
+    "border border-transparent",
+    "text-[13px] font-semibold leading-none",
+    // 13px / 600 — alinhado com sandbox btn
+    "[&_svg]:shrink-0",
+    // SVG não diminui; tamanho controlado por size
+    "transition-all duration-200 ease-out",
+    "cursor-pointer",
+    "focus-visible:ring-4"
+  ],
+  variants: {
+    color: {
+      primary: "focus-visible:ring-ring-brand",
+      secondary: "focus-visible:ring-ring-secondary",
+      critical: "focus-visible:ring-ring-danger",
+      success: "focus-visible:ring-ring-success",
+      warning: "focus-visible:ring-ring-warning"
+    },
+    variant: {
+      filled: "",
+      outline: "",
+      soft: "",
+      ghost: "bg-transparent"
+    },
+    size: {
+      // h28 / pad 10 / gap 6 / radius 8 / icon 12
+      "2xs": "min-h-form-xs px-pad-lg gap-gp-sm rounded-radius-md [&_svg]:size-[12px]",
+      // h32 / pad 12 / gap 6 / radius 8 / icon 14
+      xs: "min-h-form-sm px-pad-xl gap-gp-sm rounded-radius-md [&_svg]:size-[14px]",
+      // h36 / pad 12 / gap 6 / radius 10 / icon 14
+      sm: "min-h-form-md px-pad-xl gap-gp-sm rounded-radius-lg [&_svg]:size-[14px]",
+      // h40 / pad 16 / gap 6 / radius 10 / icon 14 (alinhado com sandbox Exportar)
+      md: "min-h-form-lg px-pad-2xl gap-gp-sm rounded-radius-lg [&_svg]:size-[14px]",
+      // h44 / pad 16 / gap 8 / radius 10 / icon 16
+      lg: "min-h-form-xl px-pad-2xl gap-gp-md rounded-radius-lg [&_svg]:size-[16px]",
+      // Icon buttons — width = height (square). Regra: SVG +2px vs versão com label
+      // (precisa preencher mais o quadrado sem o texto carregando peso visual).
+      "icon-2xs": "size-form-xs rounded-radius-md p-0 [&_svg]:size-[14px]",
+      // 28×28 / +2 (12→14)
+      "icon-xs": "size-form-sm rounded-radius-md p-0 [&_svg]:size-[16px]",
+      // 32×32 / +2 (14→16)
+      "icon-sm": "size-form-md rounded-radius-lg p-0 [&_svg]:size-[16px]",
+      // 36×36 / +2 (14→16)
+      "icon-md": "size-form-lg rounded-radius-lg p-0 [&_svg]:size-[16px]",
+      // 40×40 / +2 (14→16)
+      "icon-lg": "size-form-xl rounded-radius-lg p-0 [&_svg]:size-[18px]"
+      // 44×44 / +2 (16→18)
+    },
+    fullWidth: {
+      true: "w-full flex-1"
+    },
+    /**
+     * Shape do botão:
+     *   - rounded (default): mantém o radius da `size` (varia por tamanho)
+     *   - pill: força `rounded-full` (override com `!` pra ganhar do size)
+     */
+    shape: {
+      rounded: "",
+      pill: "!rounded-full"
+    },
+    disabled: {
+      true: "pointer-events-none opacity-50"
+    }
+  },
+  compoundVariants: [
+    // ── Primary (brand) ─────────────────────────────────────────────
+    {
+      color: "primary",
+      variant: "filled",
+      class: "bg-bg-brand text-fg-on-brand hover:bg-bg-brand-hover"
+    },
+    {
+      color: "primary",
+      variant: "outline",
+      class: "bg-bg-surface border-border-brand text-fg-brand shadow-sh-sm hover:bg-bg-brand-subtle hover:border-transparent hover:shadow-sh-none"
+    },
+    {
+      color: "primary",
+      variant: "soft",
+      class: "bg-bg-brand-subtle text-fg-brand hover:bg-bg-brand-subtle-hover"
+    },
+    {
+      color: "primary",
+      variant: "ghost",
+      class: "text-fg-brand hover:bg-bg-brand-subtle"
+    },
+    // ── Secondary (neutro) ──────────────────────────────────────────
+    {
+      color: "secondary",
+      variant: "filled",
+      class: "bg-bg-muted text-fg-muted hover:bg-bg-muted-hover hover:text-fg-default"
+    },
+    {
+      // Outline alinhado com `.btn.tbl-tool-btn` do design-and-table-v2:
+      // light = bg-surface + border-subtle + fg-default + shadow-sm (mantém no hover)
+      // dark  = bg-muted + border-input + fg-muted + sem shadow
+      color: "secondary",
+      variant: "outline",
+      class: [
+        "bg-bg-surface border-border-subtle text-fg-default shadow-sh-sm",
+        "dark:bg-bg-muted dark:border-border-input dark:text-fg-muted dark:shadow-sh-none",
+        "hover:bg-bg-muted-hover hover:text-fg-default",
+        "dark:hover:bg-bg-muted-hover dark:hover:text-fg-default"
+      ].join(" ")
+    },
+    {
+      color: "secondary",
+      variant: "soft",
+      class: "bg-bg-muted text-fg-muted hover:bg-bg-muted-hover hover:text-fg-default"
+    },
+    {
+      color: "secondary",
+      variant: "ghost",
+      class: "text-fg-muted hover:bg-bg-muted hover:text-fg-default"
+    },
+    // ── Critical (danger) ───────────────────────────────────────────
+    {
+      color: "critical",
+      variant: "filled",
+      class: "bg-bg-danger text-fg-on-danger hover:bg-bg-danger-hover"
+    },
+    {
+      color: "critical",
+      variant: "outline",
+      class: "bg-bg-surface border-border-danger-muted text-fg-danger shadow-sh-sm hover:bg-bg-danger-muted hover:shadow-sh-none"
+    },
+    {
+      color: "critical",
+      variant: "soft",
+      class: "bg-bg-danger-muted text-fg-danger hover:bg-bg-danger-muted-hover"
+    },
+    {
+      color: "critical",
+      variant: "ghost",
+      class: "text-fg-danger hover:bg-bg-danger-muted"
+    },
+    // ── Success ─────────────────────────────────────────────────────
+    {
+      color: "success",
+      variant: "filled",
+      class: "bg-bg-success text-fg-on-success hover:bg-bg-success-hover"
+    },
+    {
+      color: "success",
+      variant: "outline",
+      class: "bg-bg-surface border-border-success-muted text-fg-success shadow-sh-sm hover:bg-bg-success-muted hover:shadow-sh-none"
+    },
+    {
+      color: "success",
+      variant: "soft",
+      class: "bg-bg-success-muted text-fg-success hover:bg-bg-success-muted-hover"
+    },
+    {
+      color: "success",
+      variant: "ghost",
+      class: "text-fg-success hover:bg-bg-success-muted"
+    },
+    // ── Warning ─────────────────────────────────────────────────────
+    {
+      color: "warning",
+      variant: "filled",
+      class: "bg-bg-warning text-fg-on-warning hover:bg-bg-warning-hover"
+    },
+    {
+      color: "warning",
+      variant: "outline",
+      class: "bg-bg-surface border-border-warning-muted text-fg-warning shadow-sh-sm hover:bg-bg-warning-muted hover:shadow-sh-none"
+    },
+    {
+      color: "warning",
+      variant: "soft",
+      class: "bg-bg-warning-muted text-fg-warning hover:bg-bg-warning-muted-hover"
+    },
+    {
+      color: "warning",
+      variant: "ghost",
+      class: "text-fg-warning hover:bg-bg-warning-muted"
+    },
+    // ── Disabled — SEMPRE por último ────────────────────────────────
+    { disabled: true, class: "pointer-events-none opacity-50" }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "filled",
+    size: "md",
+    shape: "rounded"
+  }
+});
+const Button = forwardRef(
+  function Button2({
+    color,
+    variant,
+    size,
+    shape,
+    fullWidth,
+    loading = false,
+    disabled = false,
+    iconLeft,
+    iconRight,
+    children,
+    className,
+    type = "button",
+    ...rest
+  }, ref) {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        disabled: isDisabled,
+        className: buttonVariants({
+          color,
+          variant,
+          size,
+          shape,
+          fullWidth,
+          disabled: isDisabled,
+          className
+        }),
+        ...rest,
+        children: [
+          loading && /* @__PURE__ */ jsx(Spinner, {}),
+          !loading && iconLeft,
+          children,
+          !loading && iconRight
+        ]
+      }
+    );
+  }
+);
+function Spinner() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: "animate-spin",
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "8",
+          cy: "8",
+          r: "6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeDasharray: "28",
+          strokeDashoffset: "8",
+          className: "opacity-70"
+        }
+      )
+    }
+  );
+}
+const chipVariants = tv({
+  base: [
+    "inline-flex items-center justify-center gap-gp-xs shrink-0",
+    "font-semibold whitespace-nowrap select-none",
+    "transition-[background-color,color,border-color,box-shadow] duration-150",
+    "[&_svg]:shrink-0"
+  ],
+  variants: {
+    size: {
+      sm: "h-[24px] px-pad-md text-[11px] [&_svg]:size-[12px]",
+      md: "h-form-xs px-pad-lg text-[12px] [&_svg]:size-[12px]",
+      // 28px
+      lg: "h-form-sm px-pad-xl text-[13px] [&_svg]:size-[14px]",
+      // 32px
+      xl: "h-form-md px-pad-xl text-[13px] [&_svg]:size-[14px]"
+      // 36px (= Button md)
+    },
+    /**
+     * `pill` = rounded-full (default — chip pílula clássico).
+     * `rounded` = canto arredondado igual ao Button (radius-md em sm/md, radius-lg em lg/xl).
+     */
+    shape: {
+      pill: "rounded-radius-full",
+      rounded: ""
+      // aplica via compoundVariants por size
+    },
+    color: {
+      primary: "",
+      neutral: "",
+      danger: "",
+      warning: "",
+      success: "",
+      info: ""
+    },
+    variant: {
+      solid: "",
+      outline: "border",
+      soft: "",
+      "soft-outline": "border"
+    },
+    interactive: {
+      true: "cursor-pointer outline-none focus-visible:shadow-sh-ring",
+      false: ""
+    },
+    selected: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    /* ── Shape rounded × size — radius proporcional ao Button ──── */
+    { shape: "rounded", size: "sm", class: "rounded-radius-md" },
+    { shape: "rounded", size: "md", class: "rounded-radius-md" },
+    { shape: "rounded", size: "lg", class: "rounded-radius-lg" },
+    { shape: "rounded", size: "xl", class: "rounded-radius-lg" },
+    /* ── Solid ──────────────────────────────────────────────────── */
+    { color: "primary", variant: "solid", class: "bg-bg-brand text-fg-on-brand" },
+    { color: "neutral", variant: "solid", class: "bg-bg-muted text-fg-default" },
+    { color: "danger", variant: "solid", class: "bg-bg-danger text-fg-on-danger" },
+    { color: "warning", variant: "solid", class: "bg-bg-warning text-fg-on-warning" },
+    { color: "success", variant: "solid", class: "bg-bg-success text-fg-on-success" },
+    { color: "info", variant: "solid", class: "bg-bg-info text-fg-on-info" },
+    /* ── Outline ────────────────────────────────────────────────── */
+    { color: "primary", variant: "outline", class: "bg-transparent border-border-brand text-fg-brand" },
+    { color: "neutral", variant: "outline", class: "bg-transparent border-border-default text-fg-default" },
+    { color: "danger", variant: "outline", class: "bg-transparent border-border-danger-muted text-fg-danger" },
+    { color: "warning", variant: "outline", class: "bg-transparent border-border-warning-muted text-fg-warning" },
+    { color: "success", variant: "outline", class: "bg-transparent border-border-success-muted text-fg-success" },
+    { color: "info", variant: "outline", class: "bg-transparent border-border-info-muted text-fg-info" },
+    /* ── Soft ───────────────────────────────────────────────────── */
+    { color: "primary", variant: "soft", class: "bg-bg-brand-subtle text-fg-brand" },
+    { color: "neutral", variant: "soft", class: "bg-bg-muted text-fg-muted" },
+    { color: "danger", variant: "soft", class: "bg-bg-danger-muted text-fg-danger" },
+    { color: "warning", variant: "soft", class: "bg-bg-warning-muted text-fg-warning" },
+    { color: "success", variant: "soft", class: "bg-bg-success-muted text-fg-success" },
+    { color: "info", variant: "soft", class: "bg-bg-info-muted text-fg-info" },
+    /* ── Soft + Outline (bg sutil + borda definida) ─────────────── */
+    { color: "primary", variant: "soft-outline", class: "bg-bg-brand-subtle border-border-brand text-fg-brand" },
+    { color: "neutral", variant: "soft-outline", class: "bg-bg-muted border-border-default text-fg-muted" },
+    { color: "danger", variant: "soft-outline", class: "bg-bg-danger-muted border-border-danger-muted text-fg-danger" },
+    { color: "warning", variant: "soft-outline", class: "bg-bg-warning-muted border-border-warning-muted text-fg-warning" },
+    { color: "success", variant: "soft-outline", class: "bg-bg-success-muted border-border-success-muted text-fg-success" },
+    { color: "info", variant: "soft-outline", class: "bg-bg-info-muted border-border-info-muted text-fg-info" },
+    /* ── Hover (somente quando interactive) ────────────────────── */
+    { interactive: true, color: "primary", variant: "solid", class: "hover:bg-bg-brand-hover" },
+    { interactive: true, color: "neutral", variant: "solid", class: "hover:bg-bg-muted-hover" },
+    { interactive: true, color: "danger", variant: "solid", class: "hover:bg-bg-danger-hover" },
+    { interactive: true, color: "warning", variant: "solid", class: "hover:bg-bg-warning-hover" },
+    { interactive: true, color: "success", variant: "solid", class: "hover:bg-bg-success-hover" },
+    { interactive: true, color: "info", variant: "solid", class: "hover:bg-bg-info-hover" },
+    { interactive: true, color: "primary", variant: "outline", class: "hover:bg-bg-brand-subtle" },
+    { interactive: true, color: "neutral", variant: "outline", class: "hover:bg-bg-muted" },
+    { interactive: true, color: "danger", variant: "outline", class: "hover:bg-bg-danger-muted" },
+    { interactive: true, color: "warning", variant: "outline", class: "hover:bg-bg-warning-muted" },
+    { interactive: true, color: "success", variant: "outline", class: "hover:bg-bg-success-muted" },
+    { interactive: true, color: "info", variant: "outline", class: "hover:bg-bg-info-muted" },
+    { interactive: true, color: "primary", variant: "soft", class: "hover:bg-bg-brand-subtle-hover" },
+    { interactive: true, color: "neutral", variant: "soft", class: "hover:bg-bg-muted-hover hover:text-fg-default" },
+    { interactive: true, color: "danger", variant: "soft", class: "hover:bg-bg-danger-muted-hover" },
+    { interactive: true, color: "warning", variant: "soft", class: "hover:bg-bg-warning-muted-hover" },
+    { interactive: true, color: "success", variant: "soft", class: "hover:bg-bg-success-muted-hover" },
+    { interactive: true, color: "info", variant: "soft", class: "hover:bg-bg-info-muted-hover" },
+    { interactive: true, color: "primary", variant: "soft-outline", class: "hover:bg-bg-brand-subtle-hover" },
+    { interactive: true, color: "neutral", variant: "soft-outline", class: "hover:bg-bg-muted-hover hover:text-fg-default" },
+    { interactive: true, color: "danger", variant: "soft-outline", class: "hover:bg-bg-danger-muted-hover" },
+    { interactive: true, color: "warning", variant: "soft-outline", class: "hover:bg-bg-warning-muted-hover" },
+    { interactive: true, color: "success", variant: "soft-outline", class: "hover:bg-bg-success-muted-hover" },
+    { interactive: true, color: "info", variant: "soft-outline", class: "hover:bg-bg-info-muted-hover" },
+    /* ── Selected (ChipGroup) — força "soft" da color como visual ativo ── */
+    { selected: true, color: "primary", class: "bg-bg-brand-subtle text-fg-brand border-transparent" },
+    { selected: true, color: "neutral", class: "bg-bg-accent text-fg-default font-semibold border-transparent shadow-sh-sm" },
+    { selected: true, color: "danger", class: "bg-bg-danger-muted text-fg-danger border-transparent" },
+    { selected: true, color: "warning", class: "bg-bg-warning-muted text-fg-warning border-transparent" },
+    { selected: true, color: "success", class: "bg-bg-success-muted text-fg-success border-transparent" },
+    { selected: true, color: "info", class: "bg-bg-info-muted text-fg-info border-transparent" }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    variant: "soft",
+    size: "md",
+    shape: "pill",
+    interactive: false,
+    selected: false
+  }
+});
+const chipCount = tv({
+  base: [
+    "inline-flex items-center justify-center min-w-[16px] h-[16px] px-[4px]",
+    "rounded-radius-full text-[10px] font-semibold leading-none",
+    "bg-bg-muted text-fg-default"
+  ]
+});
+const Chip = forwardRef(function Chip2({
+  children,
+  color,
+  variant,
+  size,
+  shape,
+  selected,
+  onClick,
+  asButton,
+  className,
+  type,
+  ...rest
+}, ref) {
+  const interactive = Boolean(onClick) || asButton === true;
+  const classes = cn(
+    chipVariants({ color, variant, size, shape, interactive, selected }),
+    className
+  );
+  if (interactive) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        onClick,
+        className: classes,
+        "aria-pressed": selected,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: classes,
+      ...rest,
+      children
+    }
+  );
+});
+const SELECTED_CLASSES = {
+  primary: {
+    solid: "data-[state=on]:bg-bg-brand data-[state=on]:text-fg-on-brand data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-brand data-[state=on]:text-fg-brand data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-brand-subtle data-[state=on]:text-fg-brand data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-brand-subtle data-[state=on]:border-border-brand data-[state=on]:text-fg-brand"
+  },
+  neutral: {
+    solid: "data-[state=on]:bg-bg-muted data-[state=on]:text-fg-default data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-default data-[state=on]:text-fg-default data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-accent data-[state=on]:text-fg-default data-[state=on]:border-transparent data-[state=on]:shadow-sh-sm",
+    "soft-outline": "data-[state=on]:bg-bg-muted data-[state=on]:border-border-default data-[state=on]:text-fg-default"
+  },
+  danger: {
+    solid: "data-[state=on]:bg-bg-danger data-[state=on]:text-fg-on-danger data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-danger-muted data-[state=on]:text-fg-danger data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-danger-muted data-[state=on]:text-fg-danger data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-danger-muted data-[state=on]:border-border-danger-muted data-[state=on]:text-fg-danger"
+  },
+  warning: {
+    solid: "data-[state=on]:bg-bg-warning data-[state=on]:text-fg-on-warning data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-warning-muted data-[state=on]:text-fg-warning data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-warning-muted data-[state=on]:text-fg-warning data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-warning-muted data-[state=on]:border-border-warning-muted data-[state=on]:text-fg-warning"
+  },
+  success: {
+    solid: "data-[state=on]:bg-bg-success data-[state=on]:text-fg-on-success data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-success-muted data-[state=on]:text-fg-success data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-success-muted data-[state=on]:text-fg-success data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-success-muted data-[state=on]:border-border-success-muted data-[state=on]:text-fg-success"
+  },
+  info: {
+    solid: "data-[state=on]:bg-bg-info data-[state=on]:text-fg-on-info data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-info-muted data-[state=on]:text-fg-info data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-info-muted data-[state=on]:text-fg-info data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-info-muted data-[state=on]:border-border-info-muted data-[state=on]:text-fg-info"
+  }
+};
+const ChipGroup = forwardRef(
+  function ChipGroup2(props, ref) {
+    const {
+      inactiveColor = "neutral",
+      inactiveVariant = "outline",
+      activeColor = "primary",
+      activeVariant = "soft-outline",
+      size = "md",
+      shape = "pill",
+      orientation = "horizontal",
+      ariaLabel,
+      className,
+      children
+    } = props;
+    const contextValue = {
+      inactiveColor,
+      inactiveVariant,
+      activeColor,
+      activeVariant,
+      size,
+      shape
+    };
+    if (props.type === "single") {
+      return /* @__PURE__ */ jsx(ChipGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        ToggleGroupPrimitive.Root,
+        {
+          ref,
+          type: "single",
+          value: props.value,
+          defaultValue: props.defaultValue,
+          onValueChange: props.onValueChange,
+          orientation,
+          "aria-label": ariaLabel,
+          className: cn(
+            "inline-flex items-center gap-gp-sm",
+            orientation === "vertical" && "flex-col",
+            className
+          ),
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(ChipGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      ToggleGroupPrimitive.Root,
+      {
+        ref,
+        type: "multiple",
+        value: props.value,
+        defaultValue: props.defaultValue,
+        onValueChange: props.onValueChange,
+        orientation,
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex items-center gap-gp-sm",
+          orientation === "vertical" && "flex-col",
+          className
+        ),
+        children
+      }
+    ) });
+  }
+);
+const ChipGroupContext = createContext({
+  inactiveColor: "neutral",
+  inactiveVariant: "outline",
+  activeColor: "primary",
+  activeVariant: "soft-outline",
+  size: "md",
+  shape: "pill"
+});
+const ChipGroupItem = forwardRef(
+  function ChipGroupItem2({ className, children, ...rest }, ref) {
+    const {
+      inactiveColor,
+      inactiveVariant,
+      activeColor,
+      activeVariant,
+      size,
+      shape
+    } = useContext(ChipGroupContext);
+    return /* @__PURE__ */ jsx(
+      ToggleGroupPrimitive.Item,
+      {
+        ref,
+        className: cn(
+          // Estado OFF — visual inativo (passa pelo chipVariants normal)
+          chipVariants({
+            color: inactiveColor,
+            variant: inactiveVariant,
+            size,
+            shape,
+            interactive: true
+          }),
+          // Estado ON — override via data-state=on com classes do active*
+          SELECTED_CLASSES[activeColor][activeVariant],
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+export {
+  Button as B,
+  Chip as C,
+  ChipGroup as a,
+  ChipGroupItem as b,
+  cn as c,
+  buttonVariants as d,
+  chipCount as e,
+  chipVariants as f,
+  tv as t
+};
+//# sourceMappingURL=chip-group-D3D0i72q.mjs.map