@snksergio/design-system 0.19.1 → 0.30.2

package/dist-lib/chunks/chip-group-2-f_Yo7Y.cjs

@@ -1,763 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const ToggleGroupPrimitive = require("@radix-ui/react-toggle-group");
-const clsx = require("clsx");
-const tailwindMerge = require("tailwind-merge");
-const tailwindVariants = require("tailwind-variants");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const ToggleGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(ToggleGroupPrimitive);
-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 = tailwindMerge.extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          // Lista 1:1 com tokens/brands/default/semantic/typography.ts.
-          // Manter sincronizado com src/utils/tv.ts. Ver L-016.
-          text: [
-            // Displays (fluid clamp)
-            "display-2xl",
-            "display-xl",
-            "display-lg",
-            "display-md",
-            // Headings (xs estático, sm-xl fluid clamp)
-            "heading-xl",
-            "heading-lg",
-            "heading-md",
-            "heading-sm",
-            "heading-xs",
-            // Titles (weight 600 default)
-            "title-lg",
-            "title-md",
-            "title-sm",
-            // Body (xs/sm = weight 500 interactive; md-2xl = 400 corrido)
-            "body-2xl",
-            "body-xl",
-            "body-lg",
-            "body-md",
-            "body-sm",
-            "body-xs",
-            // Captions (weight 400)
-            "caption-md",
-            "caption-sm",
-            "caption-xs",
-            // Code (mono regular)
-            "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.clsx(inputs));
-}
-const twMergeConfig = {
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            // Displays (fluid clamp)
-            "display-2xl",
-            "display-xl",
-            "display-lg",
-            "display-md",
-            // Headings (xs estático, sm-xl fluid clamp)
-            "heading-xl",
-            "heading-lg",
-            "heading-md",
-            "heading-sm",
-            "heading-xs",
-            // Titles (weight 600 default)
-            "title-lg",
-            "title-md",
-            "title-sm",
-            // Body (xs/sm = weight 500 interactive; md-2xl = 400 corrido)
-            "body-2xl",
-            "body-xl",
-            "body-lg",
-            "body-md",
-            "body-sm",
-            "body-xs",
-            // Captions (weight 400)
-            "caption-md",
-            "caption-sm",
-            "caption-xs",
-            // Code (mono regular)
-            "code-md",
-            "code-sm"
-          ]
-        }
-      ]
-    }
-  }
-};
-const tv = (options, config) => tailwindVariants.tv(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-body-sm 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 = React.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__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        ref,
-        type,
-        disabled: isDisabled,
-        className: buttonVariants({
-          color,
-          variant,
-          size,
-          shape,
-          fullWidth,
-          disabled: isDisabled,
-          className
-        }),
-        ...rest,
-        children: [
-          loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-          !loading && iconLeft,
-          children,
-          !loading && iconRight
-        ]
-      }
-    );
-  }
-);
-function Spinner() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      className: "animate-spin",
-      children: /* @__PURE__ */ jsxRuntime.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-caption-sm [&_svg]:size-[12px]",
-      md: "h-form-xs px-pad-lg text-body-xs font-normal [&_svg]:size-[12px]",
-      // 28px
-      lg: "h-form-sm px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]",
-      // 32px
-      xl: "h-form-md px-pad-xl text-body-sm font-normal [&_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-caption-xs font-semibold leading-none",
-    "bg-bg-muted text-fg-default"
-  ]
-});
-const Chip = React.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__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref,
-        type: type ?? "button",
-        onClick,
-        className: classes,
-        "aria-pressed": selected,
-        ...rest,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.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 = React.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__ */ jsxRuntime.jsx(ChipGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-        ToggleGroupPrimitive__namespace.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__ */ jsxRuntime.jsx(ChipGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ToggleGroupPrimitive__namespace.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 = React.createContext({
-  inactiveColor: "neutral",
-  inactiveVariant: "outline",
-  activeColor: "primary",
-  activeVariant: "soft-outline",
-  size: "md",
-  shape: "pill"
-});
-const ChipGroupItem = React.forwardRef(
-  function ChipGroupItem2({ className, children, ...rest }, ref) {
-    const {
-      inactiveColor,
-      inactiveVariant,
-      activeColor,
-      activeVariant,
-      size,
-      shape
-    } = React.useContext(ChipGroupContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ToggleGroupPrimitive__namespace.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
-      }
-    );
-  }
-);
-exports.Button = Button;
-exports.Chip = Chip;
-exports.ChipGroup = ChipGroup;
-exports.ChipGroupItem = ChipGroupItem;
-exports.buttonVariants = buttonVariants;
-exports.chipCount = chipCount;
-exports.chipVariants = chipVariants;
-exports.cn = cn;
-exports.tv = tv;
-//# sourceMappingURL=chip-group-2-f_Yo7Y.cjs.map