@snksergio/design-system 0.19.1 → 0.30.2

package/dist-lib/chunks/{app-shell-CPx9X7zP.cjs → app-shell-Cyh8AUJT.cjs}

@@ -1,10 +1,13 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const chipGroup = require("./chip-group-2-f_Yo7Y.cjs");
+const clsx = require("clsx");
+const tailwindMerge = require("tailwind-merge");
 const lucideReact = require("lucide-react");
+const tailwindVariants = require("tailwind-variants");
 const cmdk = require("cmdk");
 const SheetPrimitive = require("@radix-ui/react-dialog");
+const ToggleGroupPrimitive = require("@radix-ui/react-toggle-group");
 const PopoverPrimitive = require("@radix-ui/react-popover");
 const classVarianceAuthority = require("class-variance-authority");
 const DropdownMenuPrimitive = require("@radix-ui/react-dropdown-menu");
@@ -27,10 +30,430 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const SheetPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SheetPrimitive);
+const ToggleGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(ToggleGroupPrimitive);
 const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const DropdownMenuPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenuPrimitive);
 const AvatarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AvatarPrimitive);
-const headerRoot = chipGroup.tv({
+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",
+            // Stat (número de métrica/KPI — estático, bold, leading tight)
+            "stat-xl",
+            "stat-lg",
+            "stat-md",
+            "stat-sm",
+            // 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 headerRoot = tv({
   base: [
     "flex items-center justify-between gap-gp-lg",
     "h-[60px] flex-none px-pad-2xl",
@@ -38,16 +461,16 @@ const headerRoot = chipGroup.tv({
     "text-fg-default font-sans"
   ]
 });
-const headerLeft = chipGroup.tv({
+const headerLeft = tv({
   base: "flex items-center gap-gp-md min-w-0 flex-1"
 });
-const headerRight = chipGroup.tv({
+const headerRight = tv({
   base: "flex items-center gap-gp-sm shrink-0"
 });
-const headerDivider = chipGroup.tv({
+const headerDivider = tv({
   base: "h-[24px] w-px bg-border-default shrink-0 mx-pad-xs"
 });
-const headerIconBtn = chipGroup.tv({
+const headerIconBtn = tv({
   base: [
     "relative inline-flex items-center justify-center",
     "w-form-md h-form-md rounded-radius-md",
@@ -62,7 +485,7 @@ const headerIconBtn = chipGroup.tv({
   },
   defaultVariants: { variant: "ghost" }
 });
-const headerIconBtnBadge = chipGroup.tv({
+const headerIconBtnBadge = tv({
   base: "absolute top-[4px] right-[4px] w-[8px] h-[8px] rounded-full ring-2 ring-bg-canvas",
   variants: {
     kind: {
@@ -72,10 +495,10 @@ const headerIconBtnBadge = chipGroup.tv({
   },
   defaultVariants: { kind: "brand" }
 });
-const breadcrumbRoot = chipGroup.tv({
+const breadcrumbRoot = tv({
   base: "flex items-center gap-gp-sm min-w-0"
 });
-const breadcrumbItem = chipGroup.tv({
+const breadcrumbItem = tv({
   base: "font-medium truncate transition-colors leading-none",
   variants: {
     current: {
@@ -90,10 +513,10 @@ const breadcrumbItem = chipGroup.tv({
   },
   defaultVariants: { current: false, standalone: false }
 });
-const breadcrumbSeparator = chipGroup.tv({
+const breadcrumbSeparator = tv({
   base: "text-fg-subtle shrink-0"
 });
-const searchFakeInput = chipGroup.tv({
+const searchFakeInput = tv({
   base: [
     "inline-flex items-center gap-gp-md h-form-md w-[180px]",
     "px-pad-xl rounded-radius-md",
@@ -104,13 +527,13 @@ const searchFakeInput = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
   ]
 });
-const searchFakeInputIcon = chipGroup.tv({
+const searchFakeInputIcon = tv({
   base: "size-[14px] text-fg-subtle shrink-0"
 });
-const searchFakeInputText = chipGroup.tv({
+const searchFakeInputText = tv({
   base: "flex-1 text-left truncate"
 });
-const searchFakeInputKbd = chipGroup.tv({
+const searchFakeInputKbd = tv({
   base: [
     "ml-auto inline-flex items-center justify-center",
     "h-[20px] px-pad-xs rounded-radius-xs",
@@ -118,10 +541,10 @@ const searchFakeInputKbd = chipGroup.tv({
     "text-caption-xs font-semibold text-fg-muted tabular-nums shrink-0"
   ]
 });
-chipGroup.tv({
+tv({
   base: "relative inline-flex"
 });
-chipGroup.tv({
+tv({
   base: [
     "absolute top-[calc(100%+8px)] right-0 z-50",
     "w-[380px] max-w-[calc(100vw-32px)] max-h-[520px] flex flex-col",
@@ -135,26 +558,26 @@ chipGroup.tv({
     "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
   ]
 });
-const hdTop = chipGroup.tv({
+const hdTop = tv({
   base: "flex flex-col gap-gp-md p-pad-xl border-b border-border-subtle bg-bg-canvas/40"
 });
-const hdHeader = chipGroup.tv({
+const hdHeader = tv({
   base: "flex items-center justify-between"
 });
-const hdTitle = chipGroup.tv({
+const hdTitle = tv({
   base: "flex items-center gap-gp-sm text-body-lg font-semibold text-fg-default"
 });
-const hdTitleCount = chipGroup.tv({
+const hdTitleCount = tv({
   base: [
     "inline-flex items-center justify-center min-w-[20px] h-[20px] px-pad-xs",
     "rounded-radius-xs bg-bg-brand text-fg-on-brand",
     "text-caption-sm font-bold tabular-nums"
   ]
 });
-const hdHeaderActions = chipGroup.tv({
+const hdHeaderActions = tv({
   base: "flex items-center gap-gp-xs"
 });
-chipGroup.tv({
+tv({
   base: [
     "inline-flex items-center gap-gp-sm h-form-sm w-full",
     "px-pad-lg rounded-radius-md",
@@ -163,16 +586,16 @@ chipGroup.tv({
     "focus-within:border-border-brand focus-within:ring-4 focus-within:ring-ring-brand"
   ]
 });
-chipGroup.tv({
+tv({
   base: "size-[14px] text-fg-muted shrink-0"
 });
-chipGroup.tv({
+tv({
   base: "flex-1 min-w-0 bg-transparent border-0 outline-none text-body-sm font-normal text-fg-default placeholder:text-fg-subtle"
 });
-chipGroup.tv({
+tv({
   base: "flex items-center gap-gp-2xs p-[3px] rounded-radius-lg bg-bg-muted"
 });
-chipGroup.tv({
+tv({
   base: [
     "inline-flex items-center justify-center gap-gp-xs",
     "h-[28px] px-[10px] rounded-radius-sm",
@@ -188,19 +611,19 @@ chipGroup.tv({
     }
   }
 });
-chipGroup.tv({
+tv({
   base: "text-caption-xs font-bold tabular-nums opacity-70"
 });
-const hdBody = chipGroup.tv({
+const hdBody = tv({
   base: "flex-1 overflow-y-auto p-pad-sm flex flex-col gap-px"
 });
-const hdEmpty = chipGroup.tv({
+const hdEmpty = tv({
   base: "flex flex-col items-center justify-center gap-gp-md py-pad-7xl text-fg-subtle"
 });
-const hdEmptyText = chipGroup.tv({
+const hdEmptyText = tv({
   base: "text-body-md"
 });
-const hdNotif = chipGroup.tv({
+const hdNotif = tv({
   base: [
     "relative flex items-start gap-gp-lg p-pad-lg rounded-radius-md text-left w-full",
     "bg-transparent border-0 cursor-pointer",
@@ -209,25 +632,25 @@ const hdNotif = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
   ]
 });
-const hdNotifIcon = chipGroup.tv({
+const hdNotifIcon = tv({
   base: "flex-none w-[28px] h-[28px] rounded-radius-md grid place-items-center"
 });
-const hdNotifBody = chipGroup.tv({
+const hdNotifBody = tv({
   base: "flex-1 min-w-0 flex flex-col gap-gp-2xs"
 });
-const hdNotifTitle = chipGroup.tv({
+const hdNotifTitle = tv({
   base: "text-body-sm font-semibold text-fg-default leading-tight"
 });
-const hdNotifText = chipGroup.tv({
+const hdNotifText = tv({
   base: "text-body-xs font-normal text-fg-muted leading-snug line-clamp-2"
 });
-const hdNotifTime = chipGroup.tv({
+const hdNotifTime = tv({
   base: "text-caption-sm text-fg-subtle"
 });
-const hdNotifDot = chipGroup.tv({
+const hdNotifDot = tv({
   base: "shrink-0 mt-pad-xs w-[8px] h-[8px] rounded-full bg-bg-brand"
 });
-const hdMsg = chipGroup.tv({
+const hdMsg = tv({
   base: [
     "relative flex items-center gap-gp-lg p-pad-lg rounded-radius-md text-left w-full",
     "bg-transparent border-0 cursor-pointer",
@@ -236,37 +659,37 @@ const hdMsg = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
   ]
 });
-const hdMsgAvatar = chipGroup.tv({
+const hdMsgAvatar = tv({
   base: [
     "flex-none grid place-items-center w-icon-lg h-icon-lg rounded-full",
     "text-white text-caption-sm font-bold uppercase tracking-[0.02em] leading-none"
   ]
 });
-const hdMsgBody = chipGroup.tv({
+const hdMsgBody = tv({
   base: "flex-1 min-w-0 flex flex-col gap-gp-2xs"
 });
-const hdMsgRow = chipGroup.tv({
+const hdMsgRow = tv({
   base: "flex items-center justify-between gap-gp-sm"
 });
-const hdMsgName = chipGroup.tv({
+const hdMsgName = tv({
   base: "text-body-sm font-semibold text-fg-default truncate"
 });
-const hdMsgTime = chipGroup.tv({
+const hdMsgTime = tv({
   base: "text-caption-sm text-fg-subtle shrink-0"
 });
-const hdMsgPreviewRow = chipGroup.tv({
+const hdMsgPreviewRow = tv({
   base: "flex items-center gap-gp-sm"
 });
-const hdMsgPreview = chipGroup.tv({
+const hdMsgPreview = tv({
   base: "flex-1 min-w-0 text-body-xs font-normal text-fg-muted truncate"
 });
-const hdMsgDot = chipGroup.tv({
+const hdMsgDot = tv({
   base: "shrink-0 w-[8px] h-[8px] rounded-full bg-bg-brand"
 });
-const hdFooter = chipGroup.tv({
+const hdFooter = tv({
   base: "flex-none p-pad-md border-t border-border-subtle text-center"
 });
-const hdFooterLink = chipGroup.tv({
+const hdFooterLink = tv({
   base: [
     "inline-flex items-center justify-center gap-gp-sm",
     "h-form-sm px-pad-lg rounded-radius-md w-full",
@@ -288,7 +711,7 @@ function HeaderBreadcrumb({
     /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
       {
-        className: chipGroup.cn(
+        className: cn(
           breadcrumbRoot(),
           mobileShowLastOnly && "hidden md:flex",
           className
@@ -339,7 +762,7 @@ function HeaderBreadcrumb({
     mobileShowLastOnly && /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
       {
-        className: chipGroup.cn(breadcrumbRoot(), "md:hidden", className),
+        className: cn(breadcrumbRoot(), "md:hidden", className),
         "aria-label": "Seção atual",
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -361,7 +784,7 @@ const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref)
   SheetPrimitive__namespace.Overlay,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "fixed inset-0 z-50 bg-black/30 supports-[backdrop-filter]:backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
@@ -375,7 +798,7 @@ const DialogContent = React__namespace.forwardRef(({ className, children, hideCl
     SheetPrimitive__namespace.Content,
     {
       ref,
-      className: chipGroup.cn(
+      className: cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-gp-4xl rounded-radius-base bg-bg-surface p-pad-4xl text-body-md text-fg-default shadow-sh-xl outline-float duration-200 sm:max-w-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       ),
@@ -395,7 +818,7 @@ const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) =
   SheetPrimitive__namespace.Title,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "text-title-md font-medium text-fg-default leading-none",
       className
     ),
@@ -407,7 +830,7 @@ const DialogDescription = React__namespace.forwardRef(({ className, ...props },
   SheetPrimitive__namespace.Description,
   {
     ref,
-    className: chipGroup.cn("text-body-md text-fg-muted", className),
+    className: cn("text-body-md text-fg-muted", className),
     ...props
   }
 ));
@@ -416,7 +839,7 @@ const Command = React__namespace.forwardRef(({ className, ...props }, ref) => /*
   cmdk.Command,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "flex h-full w-full flex-col overflow-hidden p-pad-xl bg-popover text-popover-foreground",
       className
     ),
@@ -425,17 +848,21 @@ const Command = React__namespace.forwardRef(({ className, ...props }, ref) => /*
 ));
 Command.displayName = cmdk.Command.displayName;
 const CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(
     DialogContent,
     {
       hideClose: true,
-      className: chipGroup.cn(
+      "aria-describedby": void 0,
+      className: cn(
         "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
         "rounded-[12px] border border-border-default",
         // Outline padrão de elementos flutuantes
         "outline-float"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Command, { children })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "sr-only", children: "Comando" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Command, { children })
+      ]
     }
   ) });
 };
@@ -443,7 +870,7 @@ const CommandInput = React__namespace.forwardRef(({ className, ...props }, ref)
   "div",
   {
     "cmdk-input-wrapper": "",
-    className: chipGroup.cn(
+    className: cn(
       "flex items-center gap-gp-md h-form-md px-pad-xl rounded-radius-lg",
       "bg-bg-input border border-border-subtle shadow-sh-sm",
       "transition-[border-color,box-shadow,background-color] duration-150",
@@ -456,7 +883,7 @@ const CommandInput = React__namespace.forwardRef(({ className, ...props }, ref)
         cmdk.Command.Input,
         {
           ref,
-          className: chipGroup.cn(
+          className: cn(
             "flex-1 min-w-0 bg-transparent border-0 outline-none",
             "text-body-sm font-normal text-fg-default placeholder:text-fg-muted",
             "disabled:cursor-not-allowed disabled:opacity-50",
@@ -473,7 +900,7 @@ const CommandList = React__namespace.forwardRef(({ className, ...props }, ref) =
   cmdk.Command.List,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "max-h-[300px] overflow-y-auto overflow-x-hidden mt-pad-md scrollbar-thin",
       className
     ),
@@ -494,7 +921,7 @@ const CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref)
   cmdk.Command.Group,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "overflow-hidden text-fg-default",
       "[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center",
       "[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl",
@@ -511,7 +938,7 @@ const CommandSeparator = React__namespace.forwardRef(({ className, ...props }, r
   cmdk.Command.Separator,
   {
     ref,
-    className: chipGroup.cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
+    className: cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
     ...props
   }
 ));
@@ -520,7 +947,7 @@ const CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) =
   cmdk.Command.Item,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "relative flex cursor-default select-none items-center gap-gp-md",
       "rounded-radius-lg px-pad-xl py-pad-md",
       "text-body-sm font-medium text-fg-muted",
@@ -541,7 +968,7 @@ const CommandShortcut = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: chipGroup.cn(
+      className: cn(
         "ml-auto text-caption-sm tracking-wider text-fg-subtle",
         className
       ),
@@ -578,7 +1005,7 @@ function HeaderSearch({
       "button",
       {
         type: "button",
-        className: chipGroup.cn(searchFakeInput(), "hidden md:inline-flex", className),
+        className: cn(searchFakeInput(), "hidden md:inline-flex", className),
         onClick: () => setOpen(true),
         "aria-label": "Abrir busca",
         children: [
@@ -589,7 +1016,7 @@ function HeaderSearch({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      Button,
       {
         color: "secondary",
         variant: "outline",
@@ -648,6 +1075,321 @@ function CommandGroupBlock({
     !isLast && /* @__PURE__ */ jsxRuntime.jsx(CommandSeparator, {})
   ] });
 }
+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
+      }
+    );
+  }
+);
 const Popover = PopoverPrimitive__namespace.Root;
 const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 const PopoverAnchor = PopoverPrimitive__namespace.Anchor;
@@ -679,7 +1421,7 @@ const PopoverContent = React__namespace.forwardRef(
         align,
         sideOffset,
         "data-mobile-sheet": mobileSheet ? "" : void 0,
-        className: chipGroup.cn(
+        className: cn(
           "relative z-50",
           // Unificado com DropdownMenu/Select: bg-bg-dropdown (frosted no dark)
           // + border-border-default + outline-float. O `before` pseudo-element
@@ -736,7 +1478,7 @@ function HeaderNotifications({ config, className }) {
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      chipGroup.Button,
+      Button,
       {
         color: "secondary",
         variant: "outline",
@@ -754,7 +1496,7 @@ function HeaderNotifications({ config, className }) {
       PopoverContent,
       {
         align: "end",
-        className: chipGroup.cn(
+        className: cn(
           "w-[380px] max-w-[calc(100vw-32px)] max-h-[520px] p-0 flex flex-col overflow-hidden",
           className
         ),
@@ -768,7 +1510,7 @@ function HeaderNotifications({ config, className }) {
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdHeaderActions(), children: [
                 onMarkAllRead && /* @__PURE__ */ jsxRuntime.jsx(
-                  chipGroup.Button,
+                  Button,
                   {
                     color: "secondary",
                     variant: "ghost",
@@ -780,7 +1522,7 @@ function HeaderNotifications({ config, className }) {
                   }
                 ),
                 onMoreActions && /* @__PURE__ */ jsxRuntime.jsx(
-                  chipGroup.Button,
+                  Button,
                   {
                     color: "secondary",
                     variant: "ghost",
@@ -794,7 +1536,7 @@ function HeaderNotifications({ config, className }) {
               ] })
             ] }),
             filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              chipGroup.ChipGroup,
+              ChipGroup,
               {
                 type: "single",
                 value: activeFilter,
@@ -803,7 +1545,7 @@ function HeaderNotifications({ config, className }) {
                 ariaLabel: "Filtrar notificações",
                 children: filters.map((f) => {
                   const count = items.filter(f.predicate ?? (() => true)).length;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: f.id, children: [
+                  return /* @__PURE__ */ jsxRuntime.jsxs(ChipGroupItem, { value: f.id, children: [
                     f.label,
                     count > 0 && ` (${count})`
                   ] }, f.id);
@@ -895,7 +1637,7 @@ const InputGroup = React__namespace.forwardRef(
       ref,
       role: "group",
       "data-slot": "input-group",
-      className: chipGroup.cn(inputGroupVariants({ size, state }), className),
+      className: cn(inputGroupVariants({ size, state }), className),
       ...props
     }
   )
@@ -913,7 +1655,7 @@ const InputGroupInput = React__namespace.forwardRef(({ className, type, ...props
     ref,
     type,
     "data-slot": "input-group-input",
-    className: chipGroup.cn(inputGroupInputVariants(), className),
+    className: cn(inputGroupInputVariants(), className),
     ...props
   }
 ));
@@ -929,7 +1671,7 @@ const InputGroupTextarea = React__namespace.forwardRef(({ className, ...props },
   {
     ref,
     "data-slot": "input-group-textarea",
-    className: chipGroup.cn(inputGroupTextareaVariants(), className),
+    className: cn(inputGroupTextareaVariants(), className),
     ...props
   }
 ));
@@ -957,7 +1699,7 @@ const InputGroupAddon = React__namespace.forwardRef(({ className, align = "inlin
     role: "group",
     "data-slot": "input-group-addon",
     "data-align": align,
-    className: chipGroup.cn(inputGroupAddonVariants({ align }), className),
+    className: cn(inputGroupAddonVariants({ align }), className),
     onClick: (e) => {
       if (e.target.closest("button")) {
         onClick?.(e);
@@ -977,7 +1719,7 @@ const InputGroupText = React__namespace.forwardRef(({ className, ...props }, ref
   {
     ref,
     "data-slot": "input-group-text",
-    className: chipGroup.cn(
+    className: cn(
       "text-body-xs text-fg-muted whitespace-nowrap",
       className
     ),
@@ -1019,7 +1761,7 @@ const InputGroupButton = React__namespace.forwardRef(({ className, size, variant
     ref,
     type,
     "data-slot": "input-group-button",
-    className: chipGroup.cn(inputGroupButtonVariants({ size, variant }), className),
+    className: cn(inputGroupButtonVariants({ size, variant }), className),
     ...props
   }
 ));
@@ -1050,7 +1792,7 @@ function HeaderMessages({ config, className }) {
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      chipGroup.Button,
+      Button,
       {
         color: "secondary",
         variant: "outline",
@@ -1068,7 +1810,7 @@ function HeaderMessages({ config, className }) {
       PopoverContent,
       {
         align: "end",
-        className: chipGroup.cn(
+        className: cn(
           "w-[380px] max-w-[calc(100vw-32px)] max-h-[520px] p-0 flex flex-col overflow-hidden",
           className
         ),
@@ -1082,7 +1824,7 @@ function HeaderMessages({ config, className }) {
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdHeaderActions(), children: [
                 onNewMessage && /* @__PURE__ */ jsxRuntime.jsx(
-                  chipGroup.Button,
+                  Button,
                   {
                     color: "secondary",
                     variant: "ghost",
@@ -1094,7 +1836,7 @@ function HeaderMessages({ config, className }) {
                   }
                 ),
                 onExpand && /* @__PURE__ */ jsxRuntime.jsx(
-                  chipGroup.Button,
+                  Button,
                   {
                     color: "secondary",
                     variant: "ghost",
@@ -1120,7 +1862,7 @@ function HeaderMessages({ config, className }) {
               )
             ] }),
             filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              chipGroup.ChipGroup,
+              ChipGroup,
               {
                 type: "single",
                 value: activeFilter,
@@ -1129,7 +1871,7 @@ function HeaderMessages({ config, className }) {
                 ariaLabel: "Filtrar mensagens",
                 children: filters.map((f) => {
                   const count = items.filter(f.predicate ?? (() => true)).length;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: f.id, children: [
+                  return /* @__PURE__ */ jsxRuntime.jsxs(ChipGroupItem, { value: f.id, children: [
                     f.label,
                     count > 0 && ` (${count})`
                   ] }, f.id);
@@ -1242,7 +1984,7 @@ const DropdownMenuSubTrigger = React__namespace.forwardRef(({ className, inset,
   DropdownMenuPrimitive__namespace.SubTrigger,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       ITEM_BASE,
       ITEM_VARIANT_DEFAULT,
       "data-[state=open]:bg-bg-muted data-[state=open]:text-fg-default",
@@ -1261,7 +2003,7 @@ const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...prop
   DropdownMenuPrimitive__namespace.SubContent,
   {
     ref,
-    className: chipGroup.cn(CONTAINER_CLASSES, className),
+    className: cn(CONTAINER_CLASSES, className),
     ...props
   }
 ));
@@ -1280,7 +2022,7 @@ const DropdownMenuContent = React__namespace.forwardRef(({ className, sideOffset
       ref,
       sideOffset,
       "data-mobile-sheet": mobileSheet ? "" : void 0,
-      className: chipGroup.cn(
+      className: cn(
         CONTAINER_CLASSES,
         "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden",
         mobileSheet && MOBILE_SHEET_CLASSES,
@@ -1295,7 +2037,7 @@ const DropdownMenuItem = React__namespace.forwardRef(({ className, inset, varian
   DropdownMenuPrimitive__namespace.Item,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       ITEM_BASE,
       variant === "destructive" ? ITEM_VARIANT_DESTRUCTIVE : ITEM_VARIANT_DEFAULT,
       inset && "pl-8",
@@ -1309,7 +2051,7 @@ const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, child
   DropdownMenuPrimitive__namespace.CheckboxItem,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       ITEM_BASE,
       ITEM_VARIANT_DEFAULT,
       "pl-8 pr-pad-lg",
@@ -1328,7 +2070,7 @@ const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children
   DropdownMenuPrimitive__namespace.RadioItem,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       ITEM_BASE,
       ITEM_VARIANT_DEFAULT,
       "pl-8 pr-pad-lg",
@@ -1350,7 +2092,7 @@ const DropdownMenuLabel = React__namespace.forwardRef(({ className, inset, ...pr
   DropdownMenuPrimitive__namespace.Label,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "px-pad-lg py-pad-sm text-caption-sm font-semibold uppercase tracking-wider text-fg-subtle",
       inset && "pl-8",
       className
@@ -1363,7 +2105,7 @@ const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props
   DropdownMenuPrimitive__namespace.Separator,
   {
     ref,
-    className: chipGroup.cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
+    className: cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
     ...props
   }
 ));
@@ -1382,12 +2124,12 @@ function HeaderThemeSwitcher({
   const CurrentIcon = current?.icon ?? lucideReact.Sun;
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      Button,
       {
         color: "secondary",
         variant: "outline",
         size: "icon-sm",
-        className: chipGroup.cn("rounded-radius-md", className),
+        className: cn("rounded-radius-md", className),
         "aria-label": "Trocar tema",
         title: `Tema: ${current?.label ?? ""}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(CurrentIcon, {})
@@ -1429,14 +2171,14 @@ function Header({
   rightSlot,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: chipGroup.cn(headerRoot(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn(headerRoot(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerLeft(), children: [
       onCollapseMenu && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            className: chipGroup.cn(
+            className: cn(
               headerIconBtn({ variant: "ghost" }),
               "hidden md:inline-flex text-fg-muted hover:text-fg-default"
             ),
@@ -1450,7 +2192,7 @@ function Header({
           "button",
           {
             type: "button",
-            className: chipGroup.cn(
+            className: cn(
               headerIconBtn({ variant: "ghost" }),
               "md:hidden text-fg-muted hover:text-fg-default"
             ),
@@ -1463,7 +2205,7 @@ function Header({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: chipGroup.cn(headerDivider(), "hidden md:block"),
+            className: cn(headerDivider(), "hidden md:block"),
             "aria-hidden": "true"
           }
         )
@@ -1501,7 +2243,7 @@ function Header({
     ] })
   ] });
 }
-const sidebarRoot = chipGroup.tv({
+const sidebarRoot = tv({
   base: "relative flex h-screen w-fit bg-bg-sidebar text-fg-default font-sans",
   variants: {
     mobile: {
@@ -1519,13 +2261,13 @@ const sidebarRoot = chipGroup.tv({
     { mobile: true, mobileOpen: false, class: "-translate-x-full" }
   ]
 });
-chipGroup.tv({
+tv({
   base: "relative flex h-full w-fit bg-bg-sidebar text-fg-default font-sans"
 });
-const sidebarMobileBackdrop = chipGroup.tv({
+const sidebarMobileBackdrop = tv({
   base: "fixed inset-0 z-40 bg-overlay-scrim transition-opacity duration-200"
 });
-const sidebarMobileCloseBtn = chipGroup.tv({
+const sidebarMobileCloseBtn = tv({
   base: [
     "absolute top-[14px] right-[14px] z-10",
     "w-form-sm h-form-sm rounded-radius-md grid place-items-center",
@@ -1536,7 +2278,7 @@ const sidebarMobileCloseBtn = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
   ]
 });
-const sidebarRail = chipGroup.tv({
+const sidebarRail = tv({
   base: [
     "flex flex-col items-center w-[64px] flex-none",
     "h-full sticky top-0 z-30",
@@ -1544,17 +2286,17 @@ const sidebarRail = chipGroup.tv({
     "bg-bg-sidebar border-r border-border-sidebar"
   ]
 });
-const sidebarRailBrand = chipGroup.tv({
+const sidebarRailBrand = tv({
   base: [
     "w-form-lg h-form-lg rounded-radius-xl grid place-items-center",
     "bg-bg-brand text-fg-on-brand mb-pad-sm",
     "transition-opacity hover:opacity-90"
   ]
 });
-const sidebarRailList = chipGroup.tv({
+const sidebarRailList = tv({
   base: "flex flex-col items-center gap-gp-sm flex-1"
 });
-const sidebarRailItem = chipGroup.tv({
+const sidebarRailItem = tv({
   base: [
     "group/rail-item relative w-form-lg h-form-lg rounded-radius-xl grid place-items-center",
     "bg-transparent border-0 cursor-pointer",
@@ -1571,13 +2313,13 @@ const sidebarRailItem = chipGroup.tv({
     }
   }
 });
-const sidebarRailActiveBar = chipGroup.tv({
+const sidebarRailActiveBar = tv({
   base: [
     "absolute -left-pad-2xl top-pad-md bottom-pad-md w-[3px]",
     "rounded-r-radius-sm bg-bg-brand"
   ]
 });
-const sidebarRailTooltip = chipGroup.tv({
+const sidebarRailTooltip = tv({
   base: [
     "pointer-events-none absolute left-full ml-[14px] top-1/2 -translate-y-1/2",
     "px-pad-md py-[5px] rounded-radius-sm",
@@ -1588,7 +2330,7 @@ const sidebarRailTooltip = chipGroup.tv({
     "shadow-sh-md"
   ]
 });
-const sidebarRailAdd = chipGroup.tv({
+const sidebarRailAdd = tv({
   base: [
     "w-form-lg h-form-lg rounded-radius-xl grid place-items-center",
     "text-fg-muted bg-transparent border-0 cursor-pointer mt-pad-xs opacity-70",
@@ -1597,17 +2339,17 @@ const sidebarRailAdd = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
   ]
 });
-const sidebarRailUser = chipGroup.tv({
+const sidebarRailUser = tv({
   base: "mt-auto"
 });
-const sidebarRailUserDefault = chipGroup.tv({
+const sidebarRailUserDefault = tv({
   base: [
-    "grid place-items-center w-9 h-9 rounded-full",
+    "grid place-items-center size-comp-lg rounded-full",
     // tracking-[0.02em] preserva tracking original (preset usa +0.06em)
     "bg-bg-brand text-fg-on-brand font-bold text-caption-sm uppercase tracking-[0.02em]"
   ]
 });
-const sidebarPanel = chipGroup.tv({
+const sidebarPanel = tv({
   base: [
     "w-[264px] flex-none h-full sticky top-0 flex flex-col overflow-hidden",
     "bg-bg-sidebar border-r border-border-sidebar",
@@ -1627,10 +2369,10 @@ const sidebarPanel = chipGroup.tv({
     }
   }
 });
-const sidebarPanelHeader = chipGroup.tv({
+const sidebarPanelHeader = tv({
   base: "flex items-center h-[60px] flex-none px-[14px] border-b border-border-sidebar"
 });
-const sidebarPanelTitle = chipGroup.tv({
+const sidebarPanelTitle = tv({
   base: [
     "flex-1 min-w-0 inline-flex items-center gap-gp-sm",
     "py-pad-sm px-pad-md rounded-radius-md",
@@ -1640,13 +2382,13 @@ const sidebarPanelTitle = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
   ]
 });
-const sidebarPanelBody = chipGroup.tv({
+const sidebarPanelBody = tv({
   base: "flex-1 overflow-y-auto p-[14px] scrollbar-thin"
 });
-const sidebarPanelGroup = chipGroup.tv({
+const sidebarPanelGroup = tv({
   base: "flex flex-col gap-px"
 });
-const sidebarItem = chipGroup.tv({
+const sidebarItem = tv({
   base: [
     "flex items-center gap-[11px] h-form-lg w-full px-pad-xl rounded-radius-md",
     "text-fg-default text-body-sm font-medium text-left no-underline cursor-pointer",
@@ -1678,7 +2420,7 @@ const sidebarItem = chipGroup.tv({
     }
   ]
 });
-const sidebarItemIcon = chipGroup.tv({
+const sidebarItemIcon = tv({
   base: "flex-none w-[17px] h-[17px] text-fg-muted transition-colors",
   variants: {
     active: {
@@ -1689,10 +2431,10 @@ const sidebarItemIcon = chipGroup.tv({
     }
   }
 });
-const sidebarItemText = chipGroup.tv({
+const sidebarItemText = tv({
   base: "flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis"
 });
-const sidebarPill = chipGroup.tv({
+const sidebarPill = tv({
   base: [
     "inline-flex items-center justify-center flex-none",
     "min-w-[22px] h-[22px] px-[7px] rounded-radius-sm",
@@ -1713,10 +2455,10 @@ const sidebarPill = chipGroup.tv({
   },
   defaultVariants: { kind: "default" }
 });
-const sidebarSubgroupRoot = chipGroup.tv({
+const sidebarSubgroupRoot = tv({
   base: "flex flex-col gap-px"
 });
-const sidebarSubgroupChev = chipGroup.tv({
+const sidebarSubgroupChev = tv({
   base: "flex-none w-[13px] h-[13px] text-fg-muted ml-auto transition-transform duration-200",
   variants: {
     collapsed: {
@@ -1724,7 +2466,7 @@ const sidebarSubgroupChev = chipGroup.tv({
     }
   }
 });
-const sidebarSubgroupList = chipGroup.tv({
+const sidebarSubgroupList = tv({
   base: [
     "flex flex-col gap-px overflow-hidden",
     "ml-pad-xl pl-[14px] py-pad-2xs",
@@ -1739,10 +2481,10 @@ const sidebarSubgroupList = chipGroup.tv({
   },
   defaultVariants: { collapsed: false }
 });
-const sidebarSection = chipGroup.tv({
+const sidebarSection = tv({
   base: "flex flex-col gap-px pt-[18px] mt-pad-xl border-t border-border-sidebar"
 });
-const sidebarSectionHeader = chipGroup.tv({
+const sidebarSectionHeader = tv({
   base: [
     "flex items-center gap-gp-sm px-pad-lg pt-pad-sm pb-pad-md",
     "bg-transparent border-0 text-left cursor-pointer select-none w-full",
@@ -1753,7 +2495,7 @@ const sidebarSectionHeader = chipGroup.tv({
     "dark:text-fg-muted dark:font-medium dark:opacity-70"
   ]
 });
-const sidebarSectionChev = chipGroup.tv({
+const sidebarSectionChev = tv({
   base: "flex-none w-[12px] h-[12px] transition-transform duration-200",
   variants: {
     collapsed: {
@@ -1761,7 +2503,7 @@ const sidebarSectionChev = chipGroup.tv({
     }
   }
 });
-const sidebarSectionAdd = chipGroup.tv({
+const sidebarSectionAdd = tv({
   base: [
     "ml-auto w-[18px] h-[18px] grid place-items-center rounded-radius-xs",
     "text-fg-muted bg-transparent border-0 cursor-pointer text-body-md leading-none",
@@ -1769,7 +2511,7 @@ const sidebarSectionAdd = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
   ]
 });
-const sidebarSectionList = chipGroup.tv({
+const sidebarSectionList = tv({
   base: "flex flex-col gap-px overflow-hidden transition-[max-height,opacity] duration-200 ease-out",
   variants: {
     collapsed: {
@@ -1783,7 +2525,7 @@ const sidebarSectionList = chipGroup.tv({
   },
   defaultVariants: { collapsed: false, variant: "bookmark" }
 });
-const sidebarSectionItem = chipGroup.tv({
+const sidebarSectionItem = tv({
   base: [
     "flex items-center gap-[11px] h-form-sm w-full px-pad-lg rounded-radius-md",
     "text-body-xs font-medium text-fg-muted no-underline cursor-pointer",
@@ -1793,17 +2535,26 @@ const sidebarSectionItem = chipGroup.tv({
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
   ]
 });
-const sidebarBookmarkDot = chipGroup.tv({
+const sidebarBookmarkDot = tv({
   base: "flex-none w-[10px] h-[10px] rounded-full"
 });
-const sidebarChatAvatar = chipGroup.tv({
+const sidebarBookmarkIcon = tv({
+  base: [
+    // mesmo footprint do dot/avatar → alinhamento consistente; ícone herda a
+    // cor via `color` inline (currentColor), sem caixa de fundo
+    "flex-none grid place-items-center w-icon-lg h-icon-lg",
+    // menor que o ícone de categoria (17px) → menos destaque, perto do peso do dot
+    "[&>svg]:size-icon-xs"
+  ]
+});
+const sidebarChatAvatar = tv({
   base: [
     "flex-none grid place-items-center w-icon-lg h-icon-lg rounded-full",
     // tracking-[0.02em] preserva o tracking original (preset usa +0.06em); leading-none mantém centralização vertical
     "text-white text-caption-xs font-bold uppercase tracking-[0.02em] leading-none"
   ]
 });
-const sidebarChatStatus = chipGroup.tv({
+const sidebarChatStatus = tv({
   base: "flex-none w-[7px] h-[7px] rounded-full ml-auto",
   variants: {
     status: {
@@ -1856,7 +2607,7 @@ function SidebarRail({
   onAddClick,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: chipGroup.cn(sidebarRail(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: cn(sidebarRail(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", className: sidebarRailBrand(), "aria-label": "Home", children: brand ?? /* @__PURE__ */ jsxRuntime.jsx(SidebarBrandIcon, {}) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: sidebarRailList(), children: [
       contexts.map((ctx) => {
@@ -1896,7 +2647,7 @@ function SidebarRail({
 const SidebarItem = React.forwardRef(
   ({ item, active, subitem, iconBrand, onClick, className }, ref) => {
     const Icon = item.icon;
-    const classes = chipGroup.cn(sidebarItem({ active, subitem }), className);
+    const classes = cn(sidebarItem({ active, subitem }), className);
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       Icon && /* @__PURE__ */ jsxRuntime.jsx(
         Icon,
@@ -1946,7 +2697,7 @@ function SidebarPill({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: chipGroup.cn(sidebarPill({ kind, active }), className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(sidebarPill({ kind, active }), className), children });
 }
 function SidebarSubgroup({
   item,
@@ -1970,12 +2721,12 @@ function SidebarSubgroup({
     onOpenChange?.(next);
   };
   const Icon = item.icon;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(sidebarSubgroupRoot(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(sidebarSubgroupRoot(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
-        className: chipGroup.cn(sidebarItem(), "select-none"),
+        className: cn(sidebarItem(), "select-none"),
         onClick: () => setOpen(!isOpen),
         "aria-expanded": isOpen,
         "aria-controls": `subgroup-${item.name}`,
@@ -2025,7 +2776,7 @@ function SidebarSection({
     if (open === void 0) setInternalOpen(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(sidebarSection(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(sidebarSection(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -2073,26 +2824,37 @@ function SidebarSection({
         id: `section-${section.id}`,
         className: sidebarSectionList({ collapsed, variant: section.variant }),
         children: [
-          section.variant === "bookmark" && section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-            SidebarSectionLink,
-            {
-              href: item.href,
-              onClick: item.onClick,
-              title: item.name,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: sidebarBookmarkDot(),
-                    style: { backgroundColor: item.color },
-                    "aria-hidden": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarItemText(), children: item.name })
-              ]
-            },
-            item.name
-          )),
+          section.variant === "bookmark" && section.items.map((item) => {
+            const Icon = item.icon;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              SidebarSectionLink,
+              {
+                href: item.href,
+                onClick: item.onClick,
+                title: item.name,
+                children: [
+                  Icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: sidebarBookmarkIcon(),
+                      style: { color: item.color },
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {})
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: sidebarBookmarkDot(),
+                      style: { backgroundColor: item.color },
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarItemText(), children: item.name })
+                ]
+              },
+              item.name
+            );
+          }),
           section.variant === "chat" && section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
             SidebarSectionLink,
             {
@@ -2163,7 +2925,7 @@ function SidebarPanel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
-      className: chipGroup.cn(sidebarPanel({ collapsed, floating, mobile }), className),
+      className: cn(sidebarPanel({ collapsed, floating, mobile }), className),
       "aria-hidden": collapsed,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: sidebarPanelHeader(), children: hasSwitcher ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
@@ -2336,7 +3098,7 @@ function MenuSidebar({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: chipGroup.cn(
+        className: cn(
           sidebarRoot({ mobile: isMobile, mobileOpen: isMobile && openMobile }),
           className
         ),
@@ -2407,7 +3169,7 @@ const Avatar = React__namespace.forwardRef(({ className, ...props }, ref) => /*
   AvatarPrimitive__namespace.Root,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "relative flex size-8 shrink-0 overflow-hidden rounded-full",
       className
     ),
@@ -2419,7 +3181,7 @@ const AvatarImage = React__namespace.forwardRef(({ className, ...props }, ref) =
   AvatarPrimitive__namespace.Image,
   {
     ref,
-    className: chipGroup.cn("aspect-square h-full w-full", className),
+    className: cn("aspect-square h-full w-full", className),
     ...props
   }
 ));
@@ -2428,7 +3190,7 @@ const AvatarFallback = React__namespace.forwardRef(({ className, ...props }, ref
   AvatarPrimitive__namespace.Fallback,
   {
     ref,
-    className: chipGroup.cn(
+    className: cn(
       "flex h-full w-full items-center justify-center rounded-full bg-bg-muted text-fg-muted text-body-sm font-normal",
       className
     ),
@@ -2469,7 +3231,7 @@ function UserMenu({
           type: "button",
           "aria-label": `Menu do usuário (${user.name})`,
           className: [
-            "grid place-items-center w-9 h-9 rounded-full shrink-0",
+            "grid place-items-center size-comp-lg rounded-full shrink-0",
             "bg-bg-brand text-fg-on-brand text-caption-sm font-bold uppercase tracking-[0.02em]",
             "cursor-pointer transition-opacity duration-150",
             "hover:opacity-90",
@@ -2477,7 +3239,7 @@ function UserMenu({
             "data-[state=open]:ring-4 data-[state=open]:ring-ring-secondary"
           ].join(" "),
           style: user.avatarColor ? { background: user.avatarColor } : void 0,
-          children: user.avatarSrc ? /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-9", children: [
+          children: user.avatarSrc ? /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-comp-lg", children: [
             /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
             /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-transparent text-fg-on-brand", children: initials })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: initials })
@@ -2495,7 +3257,7 @@ function UserMenu({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 Avatar,
                 {
-                  className: "size-9 shrink-0",
+                  className: "size-comp-lg shrink-0",
                   style: user.avatarColor ? { background: user.avatarColor } : void 0,
                   children: [
                     user.avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
@@ -2568,26 +3330,26 @@ function UserMenu({
     ] })
   );
 }
-const root = chipGroup.tv({
+const root = tv({
   base: [
     "flex h-screen w-full bg-bg-canvas",
     "overflow-hidden"
     // garante que sidebar + main não vazem viewport
   ]
 });
-const main = chipGroup.tv({
+const main = tv({
   base: [
     "flex flex-col flex-1 min-w-0",
     "overflow-hidden"
   ]
 });
-const body = chipGroup.tv({
+const body = tv({
   base: [
     "flex flex-col flex-1 min-h-0",
     "overflow-auto scrollbar-thin"
   ]
 });
-const bodyInner = chipGroup.tv({
+const bodyInner = tv({
   base: [
     "flex flex-col flex-1 min-h-0 w-full mx-auto",
     "gap-gp-4xl p-pad-6xl"
@@ -2680,7 +3442,7 @@ function AppShell({
       onLogout
     }
   ) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(root(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(root(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuSidebar,
       {
@@ -2720,7 +3482,7 @@ function AppShell({
           rightSlot: headerRightSlot
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: chipGroup.cn(body(), bodyClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: cn(body(), bodyClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: bodyInner({
@@ -2737,6 +3499,10 @@ AppShell.displayName = "AppShell";
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
+exports.Button = Button;
+exports.Chip = Chip;
+exports.ChipGroup = ChipGroup;
+exports.ChipGroupItem = ChipGroupItem;
 exports.Command = Command;
 exports.CommandDialog = CommandDialog;
 exports.CommandEmpty = CommandEmpty;
@@ -2785,7 +3551,12 @@ exports.SidebarRail = SidebarRail;
 exports.SidebarSection = SidebarSection;
 exports.SidebarSubgroup = SidebarSubgroup;
 exports.UserMenu = UserMenu;
+exports.buttonVariants = buttonVariants;
+exports.chipCount = chipCount;
+exports.chipVariants = chipVariants;
+exports.cn = cn;
 exports.inputGroupVariants = inputGroupVariants;
+exports.tv = tv;
 exports.useControllable = useControllable;
 exports.useMediaQuery = useMediaQuery;
-//# sourceMappingURL=app-shell-CPx9X7zP.cjs.map
+//# sourceMappingURL=app-shell-Cyh8AUJT.cjs.map