@snksergio/design-system 0.19.1 → 0.30.2

package/dist-lib/chunks/{app-shell-Cy9be0Zx.mjs → app-shell-78w0pYdP.mjs}

@@ -1,14 +1,436 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Fragment as Fragment$1, useState, useEffect, forwardRef, useCallback, useRef } from "react";
-import { t as tv, c as cn, B as Button, a as ChipGroup, b as ChipGroupItem } from "./chip-group-_e-yh1Zq.mjs";
+import { forwardRef, Fragment as Fragment$1, useState, useEffect, createContext, useContext, useCallback, useRef } from "react";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
 import { ChevronRight, X, Search, Bell, CheckCheck, MoreHorizontal, MessageSquare, PenLine, Maximize2, Check, Sun, Moon, PanelLeftOpen, PanelLeftClose, Menu, Plus, ChevronDown, LayoutGrid, SunMoon, Settings, LogOut } from "lucide-react";
+import { tv as tv$1 } from "tailwind-variants";
 import { Command as Command$1 } from "cmdk";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cva } from "class-variance-authority";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+const isDsPad = (v) => /^(pad|sp)-/.test(v);
+const isDsGap = (v) => /^gp-/.test(v);
+const isDsRadius = (v) => /^radius-/.test(v);
+const isDsShadow = (v) => /^sh-/.test(v);
+const isDsForm = (v) => /^form-/.test(v);
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          // 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(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) => tv$1(options, {
+  ...config,
+  twMergeConfig
+});
+const buttonVariants = tv({
+  base: [
+    "inline-flex items-center justify-center",
+    "select-none whitespace-nowrap",
+    "focus-visible:outline-none",
+    "border border-transparent",
+    "text-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 = forwardRef(
+  function Button2({
+    color,
+    variant,
+    size,
+    shape,
+    fullWidth,
+    loading = false,
+    disabled = false,
+    iconLeft,
+    iconRight,
+    children,
+    className,
+    type = "button",
+    ...rest
+  }, ref) {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        disabled: isDisabled,
+        className: buttonVariants({
+          color,
+          variant,
+          size,
+          shape,
+          fullWidth,
+          disabled: isDisabled,
+          className
+        }),
+        ...rest,
+        children: [
+          loading && /* @__PURE__ */ jsx(Spinner, {}),
+          !loading && iconLeft,
+          children,
+          !loading && iconRight
+        ]
+      }
+    );
+  }
+);
+function Spinner() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: "animate-spin",
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "8",
+          cy: "8",
+          r: "6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeDasharray: "28",
+          strokeDashoffset: "8",
+          className: "opacity-70"
+        }
+      )
+    }
+  );
+}
 const headerRoot = tv({
   base: [
     "flex items-center justify-between gap-gp-lg",
@@ -404,17 +826,21 @@ const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = Command$1.displayName;
 const CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
       hideClose: true,
+      "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__ */ jsx(Command, { children })
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Comando" }),
+        /* @__PURE__ */ jsx(Command, { children })
+      ]
     }
   ) });
 };
@@ -627,6 +1053,321 @@ function CommandGroupBlock({
     !isLast && /* @__PURE__ */ 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 = forwardRef(function Chip2({
+  children,
+  color,
+  variant,
+  size,
+  shape,
+  selected,
+  onClick,
+  asButton,
+  className,
+  type,
+  ...rest
+}, ref) {
+  const interactive = Boolean(onClick) || asButton === true;
+  const classes = cn(
+    chipVariants({ color, variant, size, shape, interactive, selected }),
+    className
+  );
+  if (interactive) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        onClick,
+        className: classes,
+        "aria-pressed": selected,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: classes,
+      ...rest,
+      children
+    }
+  );
+});
+const SELECTED_CLASSES = {
+  primary: {
+    solid: "data-[state=on]:bg-bg-brand data-[state=on]:text-fg-on-brand data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-brand data-[state=on]:text-fg-brand data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-brand-subtle data-[state=on]:text-fg-brand data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-brand-subtle data-[state=on]:border-border-brand data-[state=on]:text-fg-brand"
+  },
+  neutral: {
+    solid: "data-[state=on]:bg-bg-muted data-[state=on]:text-fg-default data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-default data-[state=on]:text-fg-default data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-accent data-[state=on]:text-fg-default data-[state=on]:border-transparent data-[state=on]:shadow-sh-sm",
+    "soft-outline": "data-[state=on]:bg-bg-muted data-[state=on]:border-border-default data-[state=on]:text-fg-default"
+  },
+  danger: {
+    solid: "data-[state=on]:bg-bg-danger data-[state=on]:text-fg-on-danger data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-danger-muted data-[state=on]:text-fg-danger data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-danger-muted data-[state=on]:text-fg-danger data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-danger-muted data-[state=on]:border-border-danger-muted data-[state=on]:text-fg-danger"
+  },
+  warning: {
+    solid: "data-[state=on]:bg-bg-warning data-[state=on]:text-fg-on-warning data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-warning-muted data-[state=on]:text-fg-warning data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-warning-muted data-[state=on]:text-fg-warning data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-warning-muted data-[state=on]:border-border-warning-muted data-[state=on]:text-fg-warning"
+  },
+  success: {
+    solid: "data-[state=on]:bg-bg-success data-[state=on]:text-fg-on-success data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-success-muted data-[state=on]:text-fg-success data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-success-muted data-[state=on]:text-fg-success data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-success-muted data-[state=on]:border-border-success-muted data-[state=on]:text-fg-success"
+  },
+  info: {
+    solid: "data-[state=on]:bg-bg-info data-[state=on]:text-fg-on-info data-[state=on]:border-transparent",
+    outline: "data-[state=on]:border-border-info-muted data-[state=on]:text-fg-info data-[state=on]:bg-transparent",
+    soft: "data-[state=on]:bg-bg-info-muted data-[state=on]:text-fg-info data-[state=on]:border-transparent",
+    "soft-outline": "data-[state=on]:bg-bg-info-muted data-[state=on]:border-border-info-muted data-[state=on]:text-fg-info"
+  }
+};
+const ChipGroup = forwardRef(
+  function ChipGroup2(props, ref) {
+    const {
+      inactiveColor = "neutral",
+      inactiveVariant = "outline",
+      activeColor = "primary",
+      activeVariant = "soft-outline",
+      size = "md",
+      shape = "pill",
+      orientation = "horizontal",
+      ariaLabel,
+      className,
+      children
+    } = props;
+    const contextValue = {
+      inactiveColor,
+      inactiveVariant,
+      activeColor,
+      activeVariant,
+      size,
+      shape
+    };
+    if (props.type === "single") {
+      return /* @__PURE__ */ jsx(ChipGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        ToggleGroupPrimitive.Root,
+        {
+          ref,
+          type: "single",
+          value: props.value,
+          defaultValue: props.defaultValue,
+          onValueChange: props.onValueChange,
+          orientation,
+          "aria-label": ariaLabel,
+          className: cn(
+            "inline-flex items-center gap-gp-sm",
+            orientation === "vertical" && "flex-col",
+            className
+          ),
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(ChipGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      ToggleGroupPrimitive.Root,
+      {
+        ref,
+        type: "multiple",
+        value: props.value,
+        defaultValue: props.defaultValue,
+        onValueChange: props.onValueChange,
+        orientation,
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex items-center gap-gp-sm",
+          orientation === "vertical" && "flex-col",
+          className
+        ),
+        children
+      }
+    ) });
+  }
+);
+const ChipGroupContext = createContext({
+  inactiveColor: "neutral",
+  inactiveVariant: "outline",
+  activeColor: "primary",
+  activeVariant: "soft-outline",
+  size: "md",
+  shape: "pill"
+});
+const ChipGroupItem = forwardRef(
+  function ChipGroupItem2({ className, children, ...rest }, ref) {
+    const {
+      inactiveColor,
+      inactiveVariant,
+      activeColor,
+      activeVariant,
+      size,
+      shape
+    } = useContext(ChipGroupContext);
+    return /* @__PURE__ */ jsx(
+      ToggleGroupPrimitive.Item,
+      {
+        ref,
+        className: cn(
+          // Estado OFF — visual inativo (passa pelo chipVariants normal)
+          chipVariants({
+            color: inactiveColor,
+            variant: inactiveVariant,
+            size,
+            shape,
+            interactive: true
+          }),
+          // Estado ON — override via data-state=on com classes do active*
+          SELECTED_CLASSES[activeColor][activeVariant],
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
@@ -1581,7 +2322,7 @@ const sidebarRailUser = 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]"
   ]
@@ -1775,6 +2516,15 @@ const sidebarSectionItem = tv({
 const sidebarBookmarkDot = tv({
   base: "flex-none w-[10px] h-[10px] rounded-full"
 });
+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",
@@ -2052,26 +2802,37 @@ function SidebarSection({
         id: `section-${section.id}`,
         className: sidebarSectionList({ collapsed, variant: section.variant }),
         children: [
-          section.variant === "bookmark" && section.items.map((item) => /* @__PURE__ */ jsxs(
-            SidebarSectionLink,
-            {
-              href: item.href,
-              onClick: item.onClick,
-              title: item.name,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: sidebarBookmarkDot(),
-                    style: { backgroundColor: item.color },
-                    "aria-hidden": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: sidebarItemText(), children: item.name })
-              ]
-            },
-            item.name
-          )),
+          section.variant === "bookmark" && section.items.map((item) => {
+            const Icon = item.icon;
+            return /* @__PURE__ */ jsxs(
+              SidebarSectionLink,
+              {
+                href: item.href,
+                onClick: item.onClick,
+                title: item.name,
+                children: [
+                  Icon ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: sidebarBookmarkIcon(),
+                      style: { color: item.color },
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(Icon, {})
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: sidebarBookmarkDot(),
+                      style: { backgroundColor: item.color },
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: sidebarItemText(), children: item.name })
+                ]
+              },
+              item.name
+            );
+          }),
           section.variant === "chat" && section.items.map((item) => /* @__PURE__ */ jsxs(
             SidebarSectionLink,
             {
@@ -2448,7 +3209,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",
@@ -2456,7 +3217,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__ */ jsxs(Avatar, { className: "size-9", children: [
+          children: user.avatarSrc ? /* @__PURE__ */ jsxs(Avatar, { className: "size-comp-lg", children: [
             /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
             /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-fg-on-brand", children: initials })
           ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: initials })
@@ -2474,7 +3235,7 @@ function UserMenu({
               /* @__PURE__ */ 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__ */ jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
@@ -2714,59 +3475,68 @@ function AppShell({
 }
 AppShell.displayName = "AppShell";
 export {
-  PopoverAnchor as $,
+  SidebarSection as $,
   AppShell as A,
-  InputGroupText as B,
-  CommandDialog as C,
+  Button as B,
+  Chip as C,
   DropdownMenu as D,
-  InputGroupTextarea as E,
-  DropdownMenuCheckboxItem as F,
-  DropdownMenuRadioGroup as G,
+  DropdownMenuLabel as E,
+  HeaderBreadcrumb as F,
+  HeaderMessages as G,
   Header as H,
-  InputGroup as I,
-  DropdownMenuRadioItem as J,
-  SidebarItem as K,
-  SidebarPanel as L,
-  MenuSidebar as M,
-  SidebarPill as N,
-  SidebarRail as O,
-  SidebarSection as P,
-  SidebarSubgroup as Q,
-  inputGroupVariants as R,
-  SidebarBrandIcon as S,
-  useControllable as T,
-  UserMenu as U,
-  useMediaQuery as V,
-  Popover as W,
-  PopoverTrigger as X,
-  PopoverContent as Y,
-  Command as Z,
-  DialogDescription as _,
+  HeaderNotifications as I,
+  HeaderSearch as J,
+  HeaderThemeSwitcher as K,
+  InputGroup as L,
+  InputGroupAddon as M,
+  InputGroupButton as N,
+  InputGroupInput as O,
+  Popover as P,
+  InputGroupText as Q,
+  InputGroupTextarea as R,
+  MenuSidebar as S,
+  DropdownMenuCheckboxItem as T,
+  DropdownMenuRadioGroup as U,
+  DropdownMenuRadioItem as V,
+  SidebarBrandIcon as W,
+  SidebarItem as X,
+  SidebarPanel as Y,
+  SidebarPill as Z,
+  SidebarRail as _,
   Avatar as a,
+  SidebarSubgroup as a0,
+  UserMenu as a1,
+  buttonVariants as a2,
+  chipCount as a3,
+  chipVariants as a4,
+  inputGroupVariants as a5,
+  useControllable as a6,
+  useMediaQuery as a7,
+  Command as a8,
   AvatarFallback as b,
-  DropdownMenuTrigger as c,
-  DropdownMenuContent as d,
-  DropdownMenuItem as e,
-  DropdownMenuSeparator as f,
-  Dialog as g,
-  DialogTrigger as h,
-  DialogContent as i,
-  DialogTitle as j,
-  DialogClose as k,
-  CommandInput as l,
-  CommandList as m,
-  CommandEmpty as n,
-  CommandGroup as o,
-  CommandItem as p,
-  DropdownMenuGroup as q,
-  DropdownMenuLabel as r,
-  HeaderBreadcrumb as s,
-  HeaderMessages as t,
-  HeaderNotifications as u,
-  HeaderSearch as v,
-  HeaderThemeSwitcher as w,
-  InputGroupAddon as x,
-  InputGroupButton as y,
-  InputGroupInput as z
+  cn as c,
+  ChipGroup as d,
+  ChipGroupItem as e,
+  DropdownMenuTrigger as f,
+  DropdownMenuContent as g,
+  DropdownMenuItem as h,
+  DropdownMenuSeparator as i,
+  PopoverTrigger as j,
+  PopoverContent as k,
+  Dialog as l,
+  DialogTrigger as m,
+  DialogContent as n,
+  DialogTitle as o,
+  PopoverAnchor as p,
+  DialogClose as q,
+  DialogDescription as r,
+  CommandDialog as s,
+  tv as t,
+  CommandInput as u,
+  CommandList as v,
+  CommandEmpty as w,
+  CommandGroup as x,
+  CommandItem as y,
+  DropdownMenuGroup as z
 };
-//# sourceMappingURL=app-shell-Cy9be0Zx.mjs.map
+//# sourceMappingURL=app-shell-78w0pYdP.mjs.map