@snksergio/design-system 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group-D3D0i72q.mjs","sources":["../../src/lib/utils.ts","../../src/utils/tv.ts","../../src/components/ui/Button/button.styles.ts","../../src/components/ui/Button/button.tsx","../../src/components/ui/Chip/chip.styles.ts","../../src/components/ui/Chip/chip.tsx","../../src/components/ui/Chip/chip-group.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * tw-merge configurado pra reconhecer:\n *\n * 1) Presets tipográficos do iGreen DS como `font-size` (e não text-color).\n *    Sem isso, `text-title-md` e `text-fg-default` colidem e um é removido.\n *\n * 2) Prefixos DS (pad-*, sp-*, gp-*, radius-*, sh-*, form-*) como conflitantes\n *    com utilitários nativos do Tailwind. Sem isso, `p-pad-4xl` + `p-0` no cn()\n *    deixava AMBOS no className final (24px + 0 = 24px ganhava).\n */\n\n/** Padding/Margin spacing: pad-* (padding contexts), sp-* (geral) */\nconst isDsPad = (v: string) => /^(pad|sp)-/.test(v);\n/** Gap: gp-* */\nconst isDsGap = (v: string) => /^gp-/.test(v);\n/** Border-radius: radius-* */\nconst isDsRadius = (v: string) => /^radius-/.test(v);\n/** Shadow: sh-* */\nconst isDsShadow = (v: string) => /^sh-/.test(v);\n/** Form heights: form-* (min-h, h, w, size) */\nconst isDsForm = (v: string) => /^form-/.test(v);\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [\n        {\n          text: [\n            // Displays\n            \"display-2xl\", \"display-xl\", \"display-lg\", \"display-md\",\n            // Headings\n            \"heading-xl\", \"heading-lg\", \"heading-md\", \"heading-sm\",\n            \"heading-xs\", \"heading-2xs\",\n            // Titles\n            \"title-lg\", \"title-md\", \"title-sm\",\n            // Labels\n            \"label-xl\", \"label-lg\", \"label-md\", \"label-sm\", \"label-xs\",\n            // Paragraphs\n            \"paragraph-xl\", \"paragraph-lg\", \"paragraph-md\",\n            \"paragraph-sm\", \"paragraph-xs\",\n            // Body\n            \"body-lg\", \"body-md\", \"body-sm\",\n            \"body-lg-medium\", \"body-md-medium\", \"body-sm-medium\",\n            // Captions\n            \"caption-md\", \"caption-sm\",\n            // Subheadings\n            \"subheading-md\", \"subheading-sm\",\n            \"subheading-xs\", \"subheading-2xs\",\n            // Overlines\n            \"overline-md\", \"overline-sm\",\n            // Code\n            \"code-md\", \"code-sm\",\n          ],\n        },\n      ],\n\n      /* ── Padding ──────────────────────────────────────────────────────── */\n      p:  [{ p:  [isDsPad] }],\n      px: [{ px: [isDsPad] }],\n      py: [{ py: [isDsPad] }],\n      pt: [{ pt: [isDsPad] }],\n      pr: [{ pr: [isDsPad] }],\n      pb: [{ pb: [isDsPad] }],\n      pl: [{ pl: [isDsPad] }],\n      ps: [{ ps: [isDsPad] }],\n      pe: [{ pe: [isDsPad] }],\n\n      /* ── Margin (usa mesmo sp-*) ──────────────────────────────────────── */\n      m:  [{ m:  [isDsPad] }],\n      mx: [{ mx: [isDsPad] }],\n      my: [{ my: [isDsPad] }],\n      mt: [{ mt: [isDsPad] }],\n      mr: [{ mr: [isDsPad] }],\n      mb: [{ mb: [isDsPad] }],\n      ml: [{ ml: [isDsPad] }],\n      ms: [{ ms: [isDsPad] }],\n      me: [{ me: [isDsPad] }],\n\n      /* ── Inset / position (top/right/bottom/left) ─────────────────────── */\n      inset:          [{ inset:          [isDsPad] }],\n      \"inset-x\":      [{ \"inset-x\":      [isDsPad] }],\n      \"inset-y\":      [{ \"inset-y\":      [isDsPad] }],\n      \"top\":          [{ top:            [isDsPad] }],\n      \"right\":        [{ right:          [isDsPad] }],\n      \"bottom\":       [{ bottom:         [isDsPad] }],\n      \"left\":         [{ left:           [isDsPad] }],\n      \"start\":        [{ start:          [isDsPad] }],\n      \"end\":          [{ end:            [isDsPad] }],\n\n      /* ── Gap ──────────────────────────────────────────────────────────── */\n      gap:     [{ gap:     [isDsGap] }],\n      \"gap-x\": [{ \"gap-x\": [isDsGap] }],\n      \"gap-y\": [{ \"gap-y\": [isDsGap] }],\n\n      /* ── Rounded (todas as cantos) ────────────────────────────────────── */\n      rounded:       [{ rounded:       [isDsRadius] }],\n      \"rounded-s\":   [{ \"rounded-s\":   [isDsRadius] }],\n      \"rounded-e\":   [{ \"rounded-e\":   [isDsRadius] }],\n      \"rounded-t\":   [{ \"rounded-t\":   [isDsRadius] }],\n      \"rounded-r\":   [{ \"rounded-r\":   [isDsRadius] }],\n      \"rounded-b\":   [{ \"rounded-b\":   [isDsRadius] }],\n      \"rounded-l\":   [{ \"rounded-l\":   [isDsRadius] }],\n      \"rounded-ss\":  [{ \"rounded-ss\":  [isDsRadius] }],\n      \"rounded-se\":  [{ \"rounded-se\":  [isDsRadius] }],\n      \"rounded-ee\":  [{ \"rounded-ee\":  [isDsRadius] }],\n      \"rounded-es\":  [{ \"rounded-es\":  [isDsRadius] }],\n      \"rounded-tl\":  [{ \"rounded-tl\":  [isDsRadius] }],\n      \"rounded-tr\":  [{ \"rounded-tr\":  [isDsRadius] }],\n      \"rounded-br\":  [{ \"rounded-br\":  [isDsRadius] }],\n      \"rounded-bl\":  [{ \"rounded-bl\":  [isDsRadius] }],\n\n      /* ── Shadow ───────────────────────────────────────────────────────── */\n      shadow: [{ shadow: [isDsShadow] }],\n\n      /* ── Form sizes (min-h, h, w, size) ───────────────────────────────── */\n      \"min-h\": [{ \"min-h\": [isDsForm] }],\n      h:       [{ h:       [isDsForm] }],\n      w:       [{ w:       [isDsForm] }],\n      size:    [{ size:    [isDsForm] }],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","// src/utils/tv.ts\n// tv() customizado que ensina o tailwind-merge a reconhecer\n// os presets tipográficos do iGreen como font-size, não text-color.\nimport { tv as tvBase, type TVConfig } from \"tailwind-variants\";\n\n// Objeto de config — NÃO é o resultado de extendTailwindMerge()\n// TV3 recebe o config diretamente e aplica o merge internamente\nconst twMergeConfig = {\n  extend: {\n    classGroups: {\n      \"font-size\": [\n        {\n          text: [\n            // Displays\n            \"display-2xl\", \"display-xl\", \"display-lg\", \"display-md\",\n            // Headings (heading-2xs removido — duplicata de title-lg)\n            \"heading-xl\", \"heading-lg\", \"heading-md\", \"heading-sm\",\n            \"heading-xs\",\n            // Titles\n            \"title-lg\", \"title-md\", \"title-sm\",\n            // Labels (+ label-base 13px e label-2xs 11px)\n            \"label-xl\", \"label-lg\", \"label-md\", \"label-sm\", \"label-base\", \"label-xs\", \"label-2xs\",\n            // Paragraphs (+ paragraph-base 13px)\n            \"paragraph-xl\", \"paragraph-lg\", \"paragraph-md\",\n            \"paragraph-sm\", \"paragraph-base\", \"paragraph-xs\",\n            // Captions (+ caption-xs 10px)\n            \"caption-md\", \"caption-sm\", \"caption-xs\",\n            // Subheadings (+ strong-md/sm com weight 700 + tracking apertado)\n            \"subheading-md\", \"subheading-sm\",\n            \"subheading-xs\", \"subheading-2xs\",\n            \"subheading-strong-md\", \"subheading-strong-sm\",\n            // Code\n            \"code-md\", \"code-sm\",\n          ],\n        },\n      ],\n    },\n  },\n};\n\nexport const tv: typeof tvBase = (options, config) =>\n  tvBase(options, {\n    ...config,\n    twMergeConfig,\n  } as TVConfig);\n\nexport type { VariantProps } from \"tailwind-variants\";\n","import { tv, type VariantProps } from \"@/utils/tv\";\n\n/**\n * Button styles — V3 tokens (alinhado com /design-and-table-v2)\n *\n * Specs base:\n *   - font-size 13px (text-label-sm = 0.8125rem / 600)\n *   - border-radius 10px (rounded-radius-lg)\n *   - secondary usa fg-secondary\n *   - rings cor-pura via ring.{brand|danger|success|warning|secondary}\n *\n * Variants color: primary/secondary/critical/success/warning\n *   - primary  → bg-brand / fg-brand / border-brand\n *   - critical → bg-danger / fg-danger / border-danger-muted\n *   - secondary → neutros (bg-muted, fg-secondary, border-default)\n *\n * Variants visual: filled/outline/soft/ghost\n *\n * Sizes mantidas (largura/espaçamento como estavam).\n *\n * Disabled: opacity-50 (v3 não tem bg-disabled token).\n */\nexport const buttonVariants = tv({\n  base: [\n    \"inline-flex items-center justify-center\",\n    \"select-none whitespace-nowrap\",\n    \"focus-visible:outline-none\",\n    \"border border-transparent\",\n    \"text-[13px] font-semibold leading-none\",  // 13px / 600 — alinhado com sandbox btn\n    \"[&_svg]:shrink-0\",                        // SVG não diminui; tamanho controlado por size\n    \"transition-all duration-200 ease-out\",\n    \"cursor-pointer\",\n    \"focus-visible:ring-4\",\n  ],\n\n  variants: {\n    color: {\n      primary:   \"focus-visible:ring-ring-brand\",\n      secondary: \"focus-visible:ring-ring-secondary\",\n      critical:  \"focus-visible:ring-ring-danger\",\n      success:   \"focus-visible:ring-ring-success\",\n      warning:   \"focus-visible:ring-ring-warning\",\n    },\n\n    variant: {\n      filled: \"\",\n      outline: \"\",\n      soft: \"\",\n      ghost: \"bg-transparent\",\n    },\n\n    size: {\n      // h28 / pad 10 / gap 6 / radius 8 / icon 12\n      \"2xs\": \"min-h-form-xs px-pad-lg gap-gp-sm rounded-radius-md [&_svg]:size-[12px]\",\n      // h32 / pad 12 / gap 6 / radius 8 / icon 14\n      xs:    \"min-h-form-sm px-pad-xl gap-gp-sm rounded-radius-md [&_svg]:size-[14px]\",\n      // h36 / pad 12 / gap 6 / radius 10 / icon 14\n      sm:    \"min-h-form-md px-pad-xl gap-gp-sm rounded-radius-lg [&_svg]:size-[14px]\",\n      // h40 / pad 16 / gap 6 / radius 10 / icon 14 (alinhado com sandbox Exportar)\n      md:    \"min-h-form-lg px-pad-2xl gap-gp-sm rounded-radius-lg [&_svg]:size-[14px]\",\n      // h44 / pad 16 / gap 8 / radius 10 / icon 16\n      lg:    \"min-h-form-xl px-pad-2xl gap-gp-md rounded-radius-lg [&_svg]:size-[16px]\",\n\n      // Icon buttons — width = height (square). Regra: SVG +2px vs versão com label\n      // (precisa preencher mais o quadrado sem o texto carregando peso visual).\n      \"icon-2xs\": \"size-form-xs rounded-radius-md p-0 [&_svg]:size-[14px]\",  // 28×28 / +2 (12→14)\n      \"icon-xs\":  \"size-form-sm rounded-radius-md p-0 [&_svg]:size-[16px]\",  // 32×32 / +2 (14→16)\n      \"icon-sm\":  \"size-form-md rounded-radius-lg p-0 [&_svg]:size-[16px]\",  // 36×36 / +2 (14→16)\n      \"icon-md\":  \"size-form-lg rounded-radius-lg p-0 [&_svg]:size-[16px]\",  // 40×40 / +2 (14→16)\n      \"icon-lg\":  \"size-form-xl rounded-radius-lg p-0 [&_svg]:size-[18px]\",  // 44×44 / +2 (16→18)\n    },\n\n    fullWidth: {\n      true: \"w-full flex-1\",\n    },\n\n    /**\n     * Shape do botão:\n     *   - rounded (default): mantém o radius da `size` (varia por tamanho)\n     *   - pill: força `rounded-full` (override com `!` pra ganhar do size)\n     */\n    shape: {\n      rounded: \"\",\n      pill:    \"!rounded-full\",\n    },\n\n    disabled: {\n      true: \"pointer-events-none opacity-50\",\n    },\n  },\n\n  compoundVariants: [\n    // ── Primary (brand) ─────────────────────────────────────────────\n    {\n      color: \"primary\", variant: \"filled\",\n      class: \"bg-bg-brand text-fg-on-brand hover:bg-bg-brand-hover\",\n    },\n    {\n      color: \"primary\", variant: \"outline\",\n      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\",\n    },\n    {\n      color: \"primary\", variant: \"soft\",\n      class: \"bg-bg-brand-subtle text-fg-brand hover:bg-bg-brand-subtle-hover\",\n    },\n    {\n      color: \"primary\", variant: \"ghost\",\n      class: \"text-fg-brand hover:bg-bg-brand-subtle\",\n    },\n\n    // ── Secondary (neutro) ──────────────────────────────────────────\n    {\n      color: \"secondary\", variant: \"filled\",\n      class: \"bg-bg-muted text-fg-muted hover:bg-bg-muted-hover hover:text-fg-default\",\n    },\n    {\n      // Outline alinhado com `.btn.tbl-tool-btn` do design-and-table-v2:\n      // light = bg-surface + border-subtle + fg-default + shadow-sm (mantém no hover)\n      // dark  = bg-muted + border-input + fg-muted + sem shadow\n      color: \"secondary\", variant: \"outline\",\n      class: [\n        \"bg-bg-surface border-border-subtle text-fg-default shadow-sh-sm\",\n        \"dark:bg-bg-muted dark:border-border-input dark:text-fg-muted dark:shadow-sh-none\",\n        \"hover:bg-bg-muted-hover hover:text-fg-default\",\n        \"dark:hover:bg-bg-muted-hover dark:hover:text-fg-default\",\n      ].join(\" \"),\n    },\n    {\n      color: \"secondary\", variant: \"soft\",\n      class: \"bg-bg-muted text-fg-muted hover:bg-bg-muted-hover hover:text-fg-default\",\n    },\n    {\n      color: \"secondary\", variant: \"ghost\",\n      class: \"text-fg-muted hover:bg-bg-muted hover:text-fg-default\",\n    },\n\n    // ── Critical (danger) ───────────────────────────────────────────\n    {\n      color: \"critical\", variant: \"filled\",\n      class: \"bg-bg-danger text-fg-on-danger hover:bg-bg-danger-hover\",\n    },\n    {\n      color: \"critical\", variant: \"outline\",\n      class: \"bg-bg-surface border-border-danger-muted text-fg-danger shadow-sh-sm hover:bg-bg-danger-muted hover:shadow-sh-none\",\n    },\n    {\n      color: \"critical\", variant: \"soft\",\n      class: \"bg-bg-danger-muted text-fg-danger hover:bg-bg-danger-muted-hover\",\n    },\n    {\n      color: \"critical\", variant: \"ghost\",\n      class: \"text-fg-danger hover:bg-bg-danger-muted\",\n    },\n\n    // ── Success ─────────────────────────────────────────────────────\n    {\n      color: \"success\", variant: \"filled\",\n      class: \"bg-bg-success text-fg-on-success hover:bg-bg-success-hover\",\n    },\n    {\n      color: \"success\", variant: \"outline\",\n      class: \"bg-bg-surface border-border-success-muted text-fg-success shadow-sh-sm hover:bg-bg-success-muted hover:shadow-sh-none\",\n    },\n    {\n      color: \"success\", variant: \"soft\",\n      class: \"bg-bg-success-muted text-fg-success hover:bg-bg-success-muted-hover\",\n    },\n    {\n      color: \"success\", variant: \"ghost\",\n      class: \"text-fg-success hover:bg-bg-success-muted\",\n    },\n\n    // ── Warning ─────────────────────────────────────────────────────\n    {\n      color: \"warning\", variant: \"filled\",\n      class: \"bg-bg-warning text-fg-on-warning hover:bg-bg-warning-hover\",\n    },\n    {\n      color: \"warning\", variant: \"outline\",\n      class: \"bg-bg-surface border-border-warning-muted text-fg-warning shadow-sh-sm hover:bg-bg-warning-muted hover:shadow-sh-none\",\n    },\n    {\n      color: \"warning\", variant: \"soft\",\n      class: \"bg-bg-warning-muted text-fg-warning hover:bg-bg-warning-muted-hover\",\n    },\n    {\n      color: \"warning\", variant: \"ghost\",\n      class: \"text-fg-warning hover:bg-bg-warning-muted\",\n    },\n\n    // ── Disabled — SEMPRE por último ────────────────────────────────\n    { disabled: true, class: \"pointer-events-none opacity-50\" },\n  ],\n\n  defaultVariants: {\n    color: \"primary\",\n    variant: \"filled\",\n    size: \"md\",\n    shape: \"rounded\",\n  },\n});\n\nexport type ButtonVariantProps = VariantProps<typeof buttonVariants>;\n","import { forwardRef } from \"react\";\nimport type { ButtonProps } from \"./button.types\";\nimport { buttonVariants } from \"./button.styles\";\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      color,\n      variant,\n      size,\n      shape,\n      fullWidth,\n      loading = false,\n      disabled = false,\n      iconLeft,\n      iconRight,\n      children,\n      className,\n      type = \"button\",\n      ...rest\n    },\n    ref,\n  ) {\n    const isDisabled = disabled || loading;\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        disabled={isDisabled}\n        className={buttonVariants({\n          color,\n          variant,\n          size,\n          shape,\n          fullWidth,\n          disabled: isDisabled,\n          className,\n        })}\n        {...rest}\n      >\n        {loading && <Spinner />}\n        {!loading && iconLeft}\n        {children}\n        {!loading && iconRight}\n      </button>\n    );\n  },\n);\n\nfunction Spinner() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      className=\"animate-spin\"\n    >\n      <circle\n        cx=\"8\"\n        cy=\"8\"\n        r=\"6\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"28\"\n        strokeDashoffset=\"8\"\n        className=\"opacity-70\"\n      />\n    </svg>\n  );\n}\n","import { tv, type VariantProps } from \"@/utils/tv\";\n\n/**\n * Chip styles — pílula compacta pra status, tags, filtros, abas.\n *\n * Pode ser estático (span) ou interativo (button via `onClick` / dentro de ChipGroup).\n *\n * Variantes:\n *   - color: primary | neutral | danger | warning | success | info\n *   - variant: solid | outline | soft\n *   - size: sm (24px) | md (28px = form-xs) | lg (32px = form-sm)\n *\n * Padding/font-size escalam por size — alturas coerentes com o sistema (sm < form-xs\n * pra ficar mais compacto que o menor botão; md/lg alinham com Button).\n */\nexport const chipVariants = tv({\n  base: [\n    \"inline-flex items-center justify-center gap-gp-xs shrink-0\",\n    \"font-semibold whitespace-nowrap select-none\",\n    \"transition-[background-color,color,border-color,box-shadow] duration-150\",\n    \"[&_svg]:shrink-0\",\n  ],\n  variants: {\n    size: {\n      sm: \"h-[24px] px-pad-md text-[11px] [&_svg]:size-[12px]\",\n      md: \"h-form-xs px-pad-lg text-[12px] [&_svg]:size-[12px]\",  // 28px\n      lg: \"h-form-sm px-pad-xl text-[13px] [&_svg]:size-[14px]\",  // 32px\n      xl: \"h-form-md px-pad-xl text-[13px] [&_svg]:size-[14px]\",  // 36px (= Button md)\n    },\n    /**\n     * `pill` = rounded-full (default — chip pílula clássico).\n     * `rounded` = canto arredondado igual ao Button (radius-md em sm/md, radius-lg em lg/xl).\n     */\n    shape: {\n      pill:    \"rounded-radius-full\",\n      rounded: \"\",  // aplica via compoundVariants por size\n    },\n    color: {\n      primary:  \"\",\n      neutral:  \"\",\n      danger:   \"\",\n      warning:  \"\",\n      success:  \"\",\n      info:     \"\",\n    },\n    variant: {\n      solid:        \"\",\n      outline:      \"border\",\n      soft:         \"\",\n      \"soft-outline\": \"border\",\n    },\n    interactive: {\n      true:  \"cursor-pointer outline-none focus-visible:shadow-sh-ring\",\n      false: \"\",\n    },\n    selected: {\n      true:  \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    /* ── Shape rounded × size — radius proporcional ao Button ──── */\n    { shape: \"rounded\", size: \"sm\", class: \"rounded-radius-md\" },\n    { shape: \"rounded\", size: \"md\", class: \"rounded-radius-md\" },\n    { shape: \"rounded\", size: \"lg\", class: \"rounded-radius-lg\" },\n    { shape: \"rounded\", size: \"xl\", class: \"rounded-radius-lg\" },\n\n    /* ── Solid ──────────────────────────────────────────────────── */\n    { color: \"primary\", variant: \"solid\", class: \"bg-bg-brand text-fg-on-brand\" },\n    { color: \"neutral\", variant: \"solid\", class: \"bg-bg-muted text-fg-default\" },\n    { color: \"danger\",  variant: \"solid\", class: \"bg-bg-danger text-fg-on-danger\" },\n    { color: \"warning\", variant: \"solid\", class: \"bg-bg-warning text-fg-on-warning\" },\n    { color: \"success\", variant: \"solid\", class: \"bg-bg-success text-fg-on-success\" },\n    { color: \"info\",    variant: \"solid\", class: \"bg-bg-info text-fg-on-info\" },\n\n    /* ── Outline ────────────────────────────────────────────────── */\n    { color: \"primary\", variant: \"outline\", class: \"bg-transparent border-border-brand text-fg-brand\" },\n    { color: \"neutral\", variant: \"outline\", class: \"bg-transparent border-border-default text-fg-default\" },\n    { color: \"danger\",  variant: \"outline\", class: \"bg-transparent border-border-danger-muted text-fg-danger\" },\n    { color: \"warning\", variant: \"outline\", class: \"bg-transparent border-border-warning-muted text-fg-warning\" },\n    { color: \"success\", variant: \"outline\", class: \"bg-transparent border-border-success-muted text-fg-success\" },\n    { color: \"info\",    variant: \"outline\", class: \"bg-transparent border-border-info-muted text-fg-info\" },\n\n    /* ── Soft ───────────────────────────────────────────────────── */\n    { color: \"primary\", variant: \"soft\", class: \"bg-bg-brand-subtle text-fg-brand\" },\n    { color: \"neutral\", variant: \"soft\", class: \"bg-bg-muted text-fg-muted\" },\n    { color: \"danger\",  variant: \"soft\", class: \"bg-bg-danger-muted text-fg-danger\" },\n    { color: \"warning\", variant: \"soft\", class: \"bg-bg-warning-muted text-fg-warning\" },\n    { color: \"success\", variant: \"soft\", class: \"bg-bg-success-muted text-fg-success\" },\n    { color: \"info\",    variant: \"soft\", class: \"bg-bg-info-muted text-fg-info\" },\n\n    /* ── Soft + Outline (bg sutil + borda definida) ─────────────── */\n    { color: \"primary\", variant: \"soft-outline\", class: \"bg-bg-brand-subtle border-border-brand text-fg-brand\" },\n    { color: \"neutral\", variant: \"soft-outline\", class: \"bg-bg-muted border-border-default text-fg-muted\" },\n    { color: \"danger\",  variant: \"soft-outline\", class: \"bg-bg-danger-muted border-border-danger-muted text-fg-danger\" },\n    { color: \"warning\", variant: \"soft-outline\", class: \"bg-bg-warning-muted border-border-warning-muted text-fg-warning\" },\n    { color: \"success\", variant: \"soft-outline\", class: \"bg-bg-success-muted border-border-success-muted text-fg-success\" },\n    { color: \"info\",    variant: \"soft-outline\", class: \"bg-bg-info-muted border-border-info-muted text-fg-info\" },\n\n    /* ── Hover (somente quando interactive) ────────────────────── */\n    { interactive: true, color: \"primary\", variant: \"solid\", class: \"hover:bg-bg-brand-hover\" },\n    { interactive: true, color: \"neutral\", variant: \"solid\", class: \"hover:bg-bg-muted-hover\" },\n    { interactive: true, color: \"danger\",  variant: \"solid\", class: \"hover:bg-bg-danger-hover\" },\n    { interactive: true, color: \"warning\", variant: \"solid\", class: \"hover:bg-bg-warning-hover\" },\n    { interactive: true, color: \"success\", variant: \"solid\", class: \"hover:bg-bg-success-hover\" },\n    { interactive: true, color: \"info\",    variant: \"solid\", class: \"hover:bg-bg-info-hover\" },\n\n    { interactive: true, color: \"primary\", variant: \"outline\", class: \"hover:bg-bg-brand-subtle\" },\n    { interactive: true, color: \"neutral\", variant: \"outline\", class: \"hover:bg-bg-muted\" },\n    { interactive: true, color: \"danger\",  variant: \"outline\", class: \"hover:bg-bg-danger-muted\" },\n    { interactive: true, color: \"warning\", variant: \"outline\", class: \"hover:bg-bg-warning-muted\" },\n    { interactive: true, color: \"success\", variant: \"outline\", class: \"hover:bg-bg-success-muted\" },\n    { interactive: true, color: \"info\",    variant: \"outline\", class: \"hover:bg-bg-info-muted\" },\n\n    { interactive: true, color: \"primary\", variant: \"soft\", class: \"hover:bg-bg-brand-subtle-hover\" },\n    { interactive: true, color: \"neutral\", variant: \"soft\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\n    { interactive: true, color: \"danger\",  variant: \"soft\", class: \"hover:bg-bg-danger-muted-hover\" },\n    { interactive: true, color: \"warning\", variant: \"soft\", class: \"hover:bg-bg-warning-muted-hover\" },\n    { interactive: true, color: \"success\", variant: \"soft\", class: \"hover:bg-bg-success-muted-hover\" },\n    { interactive: true, color: \"info\",    variant: \"soft\", class: \"hover:bg-bg-info-muted-hover\" },\n\n    { interactive: true, color: \"primary\", variant: \"soft-outline\", class: \"hover:bg-bg-brand-subtle-hover\" },\n    { interactive: true, color: \"neutral\", variant: \"soft-outline\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\n    { interactive: true, color: \"danger\",  variant: \"soft-outline\", class: \"hover:bg-bg-danger-muted-hover\" },\n    { interactive: true, color: \"warning\", variant: \"soft-outline\", class: \"hover:bg-bg-warning-muted-hover\" },\n    { interactive: true, color: \"success\", variant: \"soft-outline\", class: \"hover:bg-bg-success-muted-hover\" },\n    { interactive: true, color: \"info\",    variant: \"soft-outline\", class: \"hover:bg-bg-info-muted-hover\" },\n\n    /* ── Selected (ChipGroup) — força \"soft\" da color como visual ativo ── */\n    { selected: true, color: \"primary\", class: \"bg-bg-brand-subtle text-fg-brand border-transparent\" },\n    { selected: true, color: \"neutral\", class: \"bg-bg-accent text-fg-default font-semibold border-transparent shadow-sh-sm\" },\n    { selected: true, color: \"danger\",  class: \"bg-bg-danger-muted text-fg-danger border-transparent\" },\n    { selected: true, color: \"warning\", class: \"bg-bg-warning-muted text-fg-warning border-transparent\" },\n    { selected: true, color: \"success\", class: \"bg-bg-success-muted text-fg-success border-transparent\" },\n    { selected: true, color: \"info\",    class: \"bg-bg-info-muted text-fg-info border-transparent\" },\n  ],\n  defaultVariants: {\n    color: \"neutral\",\n    variant: \"soft\",\n    size: \"md\",\n    shape: \"pill\",\n    interactive: false,\n    selected: false,\n  },\n});\n\nexport type ChipVariantProps = VariantProps<typeof chipVariants>;\n\n/** Contador inline pra usar como adornment no Chip (ex: \"Não lidas (3)\") */\nexport const chipCount = tv({\n  base: [\n    \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-[4px]\",\n    \"rounded-radius-full text-[10px] font-semibold leading-none\",\n    \"bg-bg-muted text-fg-default\",\n  ],\n});\n","import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { chipVariants, type ChipVariantProps } from \"./chip.styles\";\n\nexport type ChipProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n    React.HTMLAttributes<HTMLSpanElement>,\n  \"color\"\n> &\n  ChipVariantProps & {\n    /** Conteúdo (label, ícone, etc) */\n    children: ReactNode;\n    /**\n     * Quando passado, o chip vira `<button>` clicável. Se omitido,\n     * renderiza como `<span>` estático (pra status/tag).\n     */\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    /** Força renderizar como button mesmo sem onClick */\n    asButton?: boolean;\n  };\n\n/**\n * Chip — pílula compacta pra status/tags/filtros/abas.\n *\n * Dual-mode:\n *   - **Span estático** (default): usado pra Badge-like (status, categoria, count)\n *   - **Button interativo**: quando recebe `onClick` OU `asButton`\n *\n * Pra grupo de seleção (radio/checkbox via chips), use `<ChipGroup>`.\n *\n * Variantes:\n *   - `color`: primary | neutral | danger | warning | success | info (default `neutral`)\n *   - `variant`: solid | outline | soft (default `soft`)\n *   - `size`: sm (24px) | md (28px) | lg (32px) (default `md`)\n */\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\n  {\n    children,\n    color,\n    variant,\n    size,\n    shape,\n    selected,\n    onClick,\n    asButton,\n    className,\n    type,\n    ...rest\n  },\n  ref,\n) {\n  const interactive = Boolean(onClick) || asButton === true;\n  const classes = cn(\n    chipVariants({ color, variant, size, shape, interactive, selected }),\n    className,\n  );\n\n  if (interactive) {\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type={type ?? \"button\"}\n        onClick={onClick}\n        className={classes}\n        aria-pressed={selected}\n        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      >\n        {children}\n      </button>\n    );\n  }\n\n  return (\n    <span\n      ref={ref as React.Ref<HTMLSpanElement>}\n      className={classes}\n      {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\n    >\n      {children}\n    </span>\n  );\n});\n","import { createContext, forwardRef, useContext, type ReactNode } from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { cn } from \"@/lib/utils\";\nimport { chipVariants, type ChipVariantProps } from \"./chip.styles\";\n\ntype ChipColor = NonNullable<ChipVariantProps[\"color\"]>;\ntype ChipVariant = NonNullable<ChipVariantProps[\"variant\"]>;\ntype ChipSize = NonNullable<ChipVariantProps[\"size\"]>;\ntype ChipShape = NonNullable<ChipVariantProps[\"shape\"]>;\n\n/* ── Classes do estado SELECTED (data-state=on) por color × variant ── */\n/**\n * Mapeamento color × variant → classes aplicadas em items selecionados\n * (Radix dá `data-state=\"on\"` quando ativo).\n *\n * Inclui todas as 4 variants × 6 cores = 24 combos.\n */\nconst SELECTED_CLASSES: Record<ChipColor, Record<ChipVariant, string>> = {\n  primary: {\n    solid:         \"data-[state=on]:bg-bg-brand data-[state=on]:text-fg-on-brand data-[state=on]:border-transparent\",\n    outline:       \"data-[state=on]:border-border-brand data-[state=on]:text-fg-brand data-[state=on]:bg-transparent\",\n    soft:          \"data-[state=on]:bg-bg-brand-subtle data-[state=on]:text-fg-brand data-[state=on]:border-transparent\",\n    \"soft-outline\":\"data-[state=on]:bg-bg-brand-subtle data-[state=on]:border-border-brand data-[state=on]:text-fg-brand\",\n  },\n  neutral: {\n    solid:         \"data-[state=on]:bg-bg-muted data-[state=on]:text-fg-default data-[state=on]:border-transparent\",\n    outline:       \"data-[state=on]:border-border-default data-[state=on]:text-fg-default data-[state=on]:bg-transparent\",\n    soft:          \"data-[state=on]:bg-bg-accent data-[state=on]:text-fg-default data-[state=on]:border-transparent data-[state=on]:shadow-sh-sm\",\n    \"soft-outline\":\"data-[state=on]:bg-bg-muted data-[state=on]:border-border-default data-[state=on]:text-fg-default\",\n  },\n  danger: {\n    solid:         \"data-[state=on]:bg-bg-danger data-[state=on]:text-fg-on-danger data-[state=on]:border-transparent\",\n    outline:       \"data-[state=on]:border-border-danger-muted data-[state=on]:text-fg-danger data-[state=on]:bg-transparent\",\n    soft:          \"data-[state=on]:bg-bg-danger-muted data-[state=on]:text-fg-danger data-[state=on]:border-transparent\",\n    \"soft-outline\":\"data-[state=on]:bg-bg-danger-muted data-[state=on]:border-border-danger-muted data-[state=on]:text-fg-danger\",\n  },\n  warning: {\n    solid:         \"data-[state=on]:bg-bg-warning data-[state=on]:text-fg-on-warning data-[state=on]:border-transparent\",\n    outline:       \"data-[state=on]:border-border-warning-muted data-[state=on]:text-fg-warning data-[state=on]:bg-transparent\",\n    soft:          \"data-[state=on]:bg-bg-warning-muted data-[state=on]:text-fg-warning data-[state=on]:border-transparent\",\n    \"soft-outline\":\"data-[state=on]:bg-bg-warning-muted data-[state=on]:border-border-warning-muted data-[state=on]:text-fg-warning\",\n  },\n  success: {\n    solid:         \"data-[state=on]:bg-bg-success data-[state=on]:text-fg-on-success data-[state=on]:border-transparent\",\n    outline:       \"data-[state=on]:border-border-success-muted data-[state=on]:text-fg-success data-[state=on]:bg-transparent\",\n    soft:          \"data-[state=on]:bg-bg-success-muted data-[state=on]:text-fg-success data-[state=on]:border-transparent\",\n    \"soft-outline\":\"data-[state=on]:bg-bg-success-muted data-[state=on]:border-border-success-muted data-[state=on]:text-fg-success\",\n  },\n  info: {\n    solid:         \"data-[state=on]:bg-bg-info data-[state=on]:text-fg-on-info data-[state=on]:border-transparent\",\n    outline:       \"data-[state=on]:border-border-info-muted data-[state=on]:text-fg-info data-[state=on]:bg-transparent\",\n    soft:          \"data-[state=on]:bg-bg-info-muted data-[state=on]:text-fg-info data-[state=on]:border-transparent\",\n    \"soft-outline\":\"data-[state=on]:bg-bg-info-muted data-[state=on]:border-border-info-muted data-[state=on]:text-fg-info\",\n  },\n};\n\n/* ── ChipGroup root ──────────────────────────────────────────────── */\n\ntype CommonProps = {\n  /** Cor do estado INATIVO (default `\"neutral\"`) */\n  inactiveColor?: ChipColor;\n  /** Variant do estado INATIVO (default `\"outline\"`) */\n  inactiveVariant?: ChipVariant;\n  /** Cor do estado ATIVO (default `\"primary\"`) */\n  activeColor?: ChipColor;\n  /** Variant do estado ATIVO (default `\"soft-outline\"`) */\n  activeVariant?: ChipVariant;\n  /** Size aplicado em todos os chips do grupo */\n  size?: ChipSize;\n  /** Shape aplicado em todos os chips (default `\"pill\"`) */\n  shape?: ChipShape;\n  /** Direção do grupo */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Aria-label do grupo */\n  ariaLabel?: string;\n  className?: string;\n  children: ReactNode;\n};\n\ntype SingleProps = CommonProps & {\n  type: \"single\";\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\n\ntype MultipleProps = CommonProps & {\n  type: \"multiple\";\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n};\n\nexport type ChipGroupProps = SingleProps | MultipleProps;\n\n/**\n * ChipGroup — agrupa chips com seleção controlada.\n *\n *   - `type=\"single\"`: escolha única (radio-like)\n *   - `type=\"multiple\"`: escolha múltipla (checkbox-like)\n *\n * **Estado visual configurável independentemente:**\n *   - `inactiveColor` + `inactiveVariant` → estilo dos items NÃO selecionados\n *     (default: `neutral` + `outline`)\n *   - `activeColor` + `activeVariant` → estilo dos items SELECIONADOS\n *     (default: `primary` + `soft-outline`)\n *\n * Usa `@radix-ui/react-toggle-group` por baixo.\n */\nexport const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(\n  function ChipGroup(props, ref) {\n    const {\n      inactiveColor = \"neutral\",\n      inactiveVariant = \"outline\",\n      activeColor = \"primary\",\n      activeVariant = \"soft-outline\",\n      size = \"md\",\n      shape = \"pill\",\n      orientation = \"horizontal\",\n      ariaLabel,\n      className,\n      children,\n    } = props;\n\n    const contextValue = {\n      inactiveColor,\n      inactiveVariant,\n      activeColor,\n      activeVariant,\n      size,\n      shape,\n    };\n\n    if (props.type === \"single\") {\n      return (\n        <ChipGroupContext.Provider value={contextValue}>\n          <ToggleGroupPrimitive.Root\n            ref={ref}\n            type=\"single\"\n            value={props.value}\n            defaultValue={props.defaultValue}\n            onValueChange={props.onValueChange as (v: string) => void}\n            orientation={orientation}\n            aria-label={ariaLabel}\n            className={cn(\n              \"inline-flex items-center gap-gp-sm\",\n              orientation === \"vertical\" && \"flex-col\",\n              className,\n            )}\n          >\n            {children}\n          </ToggleGroupPrimitive.Root>\n        </ChipGroupContext.Provider>\n      );\n    }\n\n    return (\n      <ChipGroupContext.Provider value={contextValue}>\n        <ToggleGroupPrimitive.Root\n          ref={ref}\n          type=\"multiple\"\n          value={props.value}\n          defaultValue={props.defaultValue}\n          onValueChange={props.onValueChange as (v: string[]) => void}\n          orientation={orientation}\n          aria-label={ariaLabel}\n          className={cn(\n            \"inline-flex items-center gap-gp-sm\",\n            orientation === \"vertical\" && \"flex-col\",\n            className,\n          )}\n        >\n          {children}\n        </ToggleGroupPrimitive.Root>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n/* ── Context ─────────────────────────────────────────────────────── */\ntype ChipGroupContextValue = {\n  inactiveColor: ChipColor;\n  inactiveVariant: ChipVariant;\n  activeColor: ChipColor;\n  activeVariant: ChipVariant;\n  size: ChipSize;\n  shape: ChipShape;\n};\n\nconst ChipGroupContext = createContext<ChipGroupContextValue>({\n  inactiveColor: \"neutral\",\n  inactiveVariant: \"outline\",\n  activeColor: \"primary\",\n  activeVariant: \"soft-outline\",\n  size: \"md\",\n  shape: \"pill\",\n});\n\n/* ── ChipGroupItem ───────────────────────────────────────────────── */\n\nexport type ChipGroupItemProps = Omit<\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,\n  \"color\"\n>;\n\n/**\n * ChipGroupItem — item dentro do `<ChipGroup>`. Visual gerenciado pelo\n * grupo via context: estilo `inactive*` quando OFF e `active*` quando ON.\n *\n *   <ChipGroup type=\"single\" inactiveVariant=\"outline\" activeVariant=\"soft-outline\">\n *     <ChipGroupItem value=\"all\">Todas</ChipGroupItem>\n *     <ChipGroupItem value=\"unread\">Não lidas</ChipGroupItem>\n *   </ChipGroup>\n */\nexport const ChipGroupItem = forwardRef<HTMLButtonElement, ChipGroupItemProps>(\n  function ChipGroupItem({ className, children, ...rest }, ref) {\n    const {\n      inactiveColor,\n      inactiveVariant,\n      activeColor,\n      activeVariant,\n      size,\n      shape,\n    } = useContext(ChipGroupContext);\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref}\n        className={cn(\n          // Estado OFF — visual inativo (passa pelo chipVariants normal)\n          chipVariants({\n            color: inactiveColor,\n            variant: inactiveVariant,\n            size,\n            shape,\n            interactive: true,\n          }),\n          // Estado ON — override via data-state=on com classes do active*\n          SELECTED_CLASSES[activeColor][activeVariant],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n"],"names":["tvBase","Button","Chip","ChipGroup","ChipGroupItem"],"mappings":"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"}

package/dist-lib/chunks/clientes-showcase-mocks-BMfbNNJh.mjs

@@ -0,0 +1,185 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+require("lucide-react");
+require("./badge-DKpXURa1.mjs");
+const chipGroup = require("./chip-group-CsKBBHW2.mjs");
+const SeparatorPrimitive = require("@radix-ui/react-separator");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SeparatorPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SeparatorPrimitive);
+const Separator = React__namespace.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    SeparatorPrimitive__namespace.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: chipGroup.cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
+React.createContext({ onNavigate: () => {
+} });
+const STATUSES = {
+  active: { label: "Ativo", color: "var(--color-fg-success)" },
+  pending: { label: "Pendente", color: "var(--color-fg-warning)" },
+  paused: { label: "Pausado", color: "var(--color-fg-info)" },
+  inactive: { label: "Inativo", color: "var(--color-fg-muted)" }
+};
+const CATEGORIES = {
+  royal: { label: "Royal", kind: "warning" },
+  licenciado: { label: "Licenciado", kind: "info" },
+  lead: { label: "Lead", kind: "success" }
+};
+const AGENTS = {
+  you: { name: "Voce", initials: "VC", color: "#0a3a2e" },
+  aline: { name: "Aline Castro", initials: "AC", color: "#f59e0b" },
+  carlos: { name: "Carlos Souza", initials: "CS", color: "#8754ec" },
+  maria: { name: "Maria Lima", initials: "ML", color: "#ef4444" }
+};
+const BASE_DATE = (/* @__PURE__ */ new Date("2026-04-15T12:00:00Z")).getTime();
+const DAY_MS = 864e5;
+const CLIENTS_MOCK = [
+  { id: "CLI-2401", name: "Maria Silva", initials: "MS", avatarColor: "#f59e0b", email: "maria.silva@example.com", phone: "+55 11 91234-5678", statusId: "active", categoryId: "royal", location: "São Paulo, SP", value: 4800, agentId: "you", createdAt: BASE_DATE - 65 * DAY_MS, lastContact: BASE_DATE - 2 * DAY_MS },
+  { id: "CLI-2402", name: "João Santos", initials: "JS", avatarColor: "#0a3a2e", email: "joao.santos@example.com", phone: "+55 11 92345-6789", statusId: "pending", categoryId: "licenciado", location: "Rio de Janeiro, RJ", value: 12300, agentId: "aline", createdAt: BASE_DATE - 58 * DAY_MS, lastContact: BASE_DATE - 5 * DAY_MS },
+  { id: "CLI-2403", name: "Carlos Oliveira", initials: "CO", avatarColor: "#8754ec", email: "carlos.oliveira@example.com", phone: "+55 11 93456-7890", statusId: "active", categoryId: "lead", location: "Belo Horizonte, MG", value: 2150, agentId: "carlos", createdAt: BASE_DATE - 51 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2404", name: "Ana Costa", initials: "AC", avatarColor: "#1cb280", email: "ana.costa@example.com", phone: "+55 11 94567-8901", statusId: "paused", categoryId: "royal", location: "Porto Alegre, RS", value: 8900, agentId: "maria", createdAt: BASE_DATE - 44 * DAY_MS, lastContact: BASE_DATE - 12 * DAY_MS },
+  { id: "CLI-2405", name: "Pedro Pereira", initials: "PP", avatarColor: "#ef4444", email: "pedro.pereira@example.com", phone: "+55 11 95678-9012", statusId: "inactive", categoryId: "lead", location: "Curitiba, PR", value: 1100, agentId: "you", createdAt: BASE_DATE - 37 * DAY_MS, lastContact: BASE_DATE - 30 * DAY_MS },
+  { id: "CLI-2406", name: "Lúcia Almeida", initials: "LA", avatarColor: "#f9a47a", email: "lucia.almeida@example.com", phone: "+55 11 96789-0123", statusId: "active", categoryId: "licenciado", location: "Recife, PE", value: 6750, agentId: "aline", createdAt: BASE_DATE - 30 * DAY_MS, lastContact: BASE_DATE - 3 * DAY_MS },
+  { id: "CLI-2407", name: "Roberto Souza", initials: "RS", avatarColor: "#0088cc", email: "roberto.souza@example.com", phone: "+55 11 97890-1234", statusId: "pending", categoryId: "royal", location: "São Paulo, SP", value: 15200, agentId: "carlos", createdAt: BASE_DATE - 23 * DAY_MS, lastContact: BASE_DATE - 7 * DAY_MS },
+  { id: "CLI-2408", name: "Fernanda Lima", initials: "FL", avatarColor: "#e1306c", email: "fernanda.lima@example.com", phone: "+55 11 98901-2345", statusId: "active", categoryId: "lead", location: "Rio de Janeiro, RJ", value: 3400, agentId: "maria", createdAt: BASE_DATE - 16 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2409", name: "Bruno Rodrigues", initials: "BR", avatarColor: "#70c748", email: "bruno.rodrigues@example.com", phone: "+55 11 99012-3456", statusId: "paused", categoryId: "licenciado", location: "Belo Horizonte, MG", value: 5600, agentId: "you", createdAt: BASE_DATE - 9 * DAY_MS, lastContact: BASE_DATE - 6 * DAY_MS },
+  { id: "CLI-2410", name: "Camila Ribeiro", initials: "CR", avatarColor: "#8754ec", email: "camila.ribeiro@example.com", phone: "+55 11 90123-4567", statusId: "active", categoryId: "royal", location: "Porto Alegre, RS", value: 9800, agentId: "aline", createdAt: BASE_DATE - 2 * DAY_MS, lastContact: BASE_DATE }
+];
+const CLIENTS_87 = Array.from(
+  { length: 9 },
+  (_, batch) => CLIENTS_MOCK.map((row, i) => ({
+    ...row,
+    id: `CLI-${2400 + batch * 10 + i}`
+  }))
+).flat().slice(0, 87);
+const STATUS_COLOR_MAP = {
+  active: "success",
+  pending: "warning",
+  paused: "info",
+  inactive: "neutral"
+};
+const STATUS_DOT = {
+  active: "var(--color-fg-success)",
+  pending: "var(--color-fg-warning)",
+  paused: "var(--color-fg-info)",
+  inactive: "var(--color-fg-muted)"
+};
+const CATEGORY_KIND = {
+  royal: "warning",
+  licenciado: "info",
+  lead: "success"
+};
+const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: STATUS_COLOR_MAP[v] ?? "neutral"
+}));
+const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: m.kind === "neutral" ? "neutral" : m.kind
+}));
+const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({
+  value: v,
+  label: a.name
+}));
+const AGENTS_LOOKUP = Object.fromEntries(
+  Object.entries(AGENTS).map(([id, a]) => [
+    id,
+    {
+      name: a.name,
+      initials: a.name.split(" ").map((s) => s[0]).join("").slice(0, 2),
+      color: a.color
+    }
+  ])
+);
+const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({
+  id,
+  label: s.label,
+  dotColor: STATUS_DOT[id] ?? "var(--color-fg-muted)"
+}));
+const CITIES = [
+  "São Paulo, SP",
+  "Rio de Janeiro, RJ",
+  "Belo Horizonte, MG",
+  "Porto Alegre, RS",
+  "Curitiba, PR",
+  "Recife, PE",
+  "Salvador, BA",
+  "Fortaleza, CE",
+  "Brasília, DF",
+  "Manaus, AM"
+];
+function formatBRL(value) {
+  return value.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    minimumFractionDigits: 2
+  });
+}
+function formatShortDate(ms) {
+  if (!ms) return "—";
+  const d = new Date(ms);
+  const day = d.getDate().toString().padStart(2, "0");
+  const months = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
+  return `${day} ${months[d.getMonth()]}`;
+}
+const clientesShowcaseMocks = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AGENTS_LOOKUP,
+  AGENT_OPTIONS,
+  CATEGORY_KIND,
+  CATEGORY_OPTIONS,
+  CITIES,
+  CLIENTS_87,
+  KANBAN_COLUMNS,
+  STATUS_COLOR_MAP,
+  STATUS_DOT,
+  STATUS_OPTIONS,
+  formatBRL,
+  formatShortDate
+}, Symbol.toStringTag, { value: "Module" }));
+exports.AGENTS = AGENTS;
+exports.AGENTS_LOOKUP = AGENTS_LOOKUP;
+exports.AGENT_OPTIONS = AGENT_OPTIONS;
+exports.CATEGORIES = CATEGORIES;
+exports.CATEGORY_KIND = CATEGORY_KIND;
+exports.CATEGORY_OPTIONS = CATEGORY_OPTIONS;
+exports.CITIES = CITIES;
+exports.CLIENTS_87 = CLIENTS_87;
+exports.KANBAN_COLUMNS = KANBAN_COLUMNS;
+exports.STATUSES = STATUSES;
+exports.STATUS_DOT = STATUS_DOT;
+exports.STATUS_OPTIONS = STATUS_OPTIONS;
+exports.clientesShowcaseMocks = clientesShowcaseMocks;
+exports.formatBRL = formatBRL;
+exports.formatShortDate = formatShortDate;
+//# sourceMappingURL=clientes-showcase-mocks-BMfbNNJh.mjs.map

package/dist-lib/chunks/clientes-showcase-mocks-BMfbNNJh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clientes-showcase-mocks-BMfbNNJh.mjs","sources":["../../src/components/shadcn/separator.tsx","../../src/preview/components/doc-context.tsx","../../src/preview/pages/TableDoc.tsx","../../src/preview/pages/ClientesShowcase/clientes-showcase-mocks.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n","import { createContext, useContext } from \"react\";\n\ntype DocNavContext = {\n  onNavigate: (pageId: string) => void;\n};\n\nconst DocNavCtx = createContext<DocNavContext>({ onNavigate: () => {} });\n\nexport function DocNavProvider({ onNavigate, children }: { onNavigate: (pageId: string) => void; children: React.ReactNode }) {\n  return <DocNavCtx.Provider value={{ onNavigate }}>{children}</DocNavCtx.Provider>;\n}\n\nexport function useDocNav() {\n  return useContext(DocNavCtx);\n}\n","import { useMemo, useState } from \"react\";\nimport {\n  Hash,\n  User,\n  AtSign,\n  Phone,\n  CheckCircle2,\n  Tag,\n  Users as UsersIcon,\n  DollarSign,\n  Calendar,\n  Type,\n  MoreVertical,\n  MoreHorizontal,\n  Pencil,\n} from \"lucide-react\";\nimport {\n  Table,\n  TableBody,\n  TableCardRow,\n  TableCell,\n  TableHead,\n  TableHeadCell,\n  TableRow,\n  useColumnWidths,\n  type SortDirection,\n  type TableDensity,\n} from \"@/components/ui/Table\";\nimport { Badge } from \"@/components/shadcn/badge\";\nimport { Checkbox } from \"@/components/shadcn/checkbox\";\nimport { Button } from \"@/components/ui/Button/button\";\nimport { Chip } from \"@/components/ui/Chip\";\nimport {\n  DocLayout,\n  DocHeader,\n  DocSeparator,\n  SectionH2,\n  ExampleSection,\n  PropsTable,\n  type PropItem,\n} from \"../components\";\n\n/* ═══════════════════════════════════════════════════════════════════════════\n   Table Documentation Page\n   ═══════════════════════════════════════════════════════════════════════════ */\n\nconst TOC = [\n  { id: \"examples\", label: \"Examples\" },\n  { id: \"ex-density\", label: \"Densidades\" },\n  { id: \"ex-sticky\", label: \"Sticky header\" },\n  { id: \"ex-pin-sort-resize\", label: \"Pin + Sort + Resize\" },\n  { id: \"ex-selection\", label: \"Selection / hover\" },\n  { id: \"ex-card-mode\", label: \"Card mode (responsive)\" },\n  { id: \"ex-full\", label: \"Tabela completa\" },\n  { id: \"api\", label: \"API Reference\" },\n  { id: \"api-table\", label: \"<Table>\" },\n  { id: \"api-head\", label: \"<TableHead>\" },\n  { id: \"api-headcell\", label: \"<TableHeadCell>\" },\n  { id: \"api-row\", label: \"<TableRow>\" },\n  { id: \"api-cell\", label: \"<TableCell>\" },\n  { id: \"api-cardrow\", label: \"<TableCardRow>\" },\n];\n\nconst TABLE_PROPS: PropItem[] = [\n  { name: \"density\", type: '\"compact\" | \"standard\" | \"comfortable\"', defaultVal: '\"standard\"' },\n  { name: \"cardBreakpoint\", type: \"number | false\", defaultVal: \"768\" },\n  { name: \"ariaLabel\", type: \"string\", defaultVal: \"—\" },\n  { name: \"className\", type: \"string\", defaultVal: \"—\" },\n  { name: \"children\", type: \"ReactNode\", defaultVal: \"—\" },\n];\n\nconst HEAD_PROPS: PropItem[] = [\n  { name: \"sticky\", type: \"boolean\", defaultVal: \"true\" },\n  { name: \"className\", type: \"string\", defaultVal: \"—\" },\n];\n\nconst HEAD_CELL_PROPS: PropItem[] = [\n  { name: \"width\", type: \"number\", defaultVal: \"—\" },\n  { name: \"pinned\", type: '\"left\" | \"right\"', defaultVal: \"—\" },\n  { name: \"pinOffset\", type: \"number\", defaultVal: \"—\" },\n  { name: \"align\", type: '\"left\" | \"center\" | \"right\"', defaultVal: '\"left\"' },\n  { name: \"sortable\", type: \"boolean\", defaultVal: \"false\" },\n  { name: \"sortDirection\", type: '\"asc\" | \"desc\" | null', defaultVal: \"null\" },\n  { name: \"onSortClick\", type: \"() => void\", defaultVal: \"—\" },\n  { name: \"resizable\", type: \"boolean\", defaultVal: \"—\" },\n  { name: \"onResize\", type: \"(widthPx: number) => void\", defaultVal: \"—\" },\n  { name: \"onResizeEnd\", type: \"(widthPx: number) => void\", defaultVal: \"—\" },\n];\n\nconst ROW_PROPS: PropItem[] = [\n  { name: \"selected\", type: \"boolean\", defaultVal: \"false\" },\n  { name: \"clickable\", type: \"boolean\", defaultVal: \"auto (true se onClick)\" },\n  { name: \"onClick\", type: \"(e: MouseEvent) => void\", defaultVal: \"—\" },\n];\n\nconst CELL_PROPS: PropItem[] = [\n  { name: \"width\", type: \"number\", defaultVal: \"—\" },\n  { name: \"pinned\", type: '\"left\" | \"right\"', defaultVal: \"—\" },\n  { name: \"pinOffset\", type: \"number\", defaultVal: \"—\" },\n  { name: \"align\", type: '\"left\" | \"center\" | \"right\"', defaultVal: '\"left\"' },\n  { name: \"ellipsis\", type: \"boolean\", defaultVal: \"false\" },\n  { name: \"label\", type: \"string (usado no card mode)\", defaultVal: \"—\" },\n];\n\nconst CARD_ROW_PROPS: PropItem[] = [\n  { name: \"header\", type: \"ReactNode (esquerda)\", defaultVal: \"—\" },\n  { name: \"headerActions\", type: \"ReactNode (direita)\", defaultVal: \"—\" },\n  { name: \"items\", type: \"ReadonlyArray<{ label, value, key? }>\", defaultVal: \"—\" },\n  { name: \"selected\", type: \"boolean\", defaultVal: \"false\" },\n  { name: \"clickable\", type: \"boolean\", defaultVal: \"auto\" },\n  { name: \"onClick\", type: \"(e: MouseEvent) => void\", defaultVal: \"—\" },\n];\n\ntype User = {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n  status: \"active\" | \"inactive\" | \"pending\";\n};\n\nconst SEED_USERS: User[] = [\n  { id: 1, name: \"Ana Souza\",     email: \"ana@igreen.com\",     role: \"Admin\",    status: \"active\" },\n  { id: 2, name: \"Bruno Lima\",    email: \"bruno@igreen.com\",   role: \"Manager\",  status: \"active\" },\n  { id: 3, name: \"Carla Mendes\",  email: \"carla@igreen.com\",   role: \"Analyst\",  status: \"pending\" },\n  { id: 4, name: \"Diego Rocha\",   email: \"diego@igreen.com\",   role: \"Analyst\",  status: \"inactive\" },\n  { id: 5, name: \"Eduarda Lima\",  email: \"eduarda@igreen.com\", role: \"Admin\",    status: \"active\" },\n  { id: 6, name: \"Felipe Costa\",  email: \"felipe@igreen.com\",  role: \"Manager\",  status: \"active\" },\n  { id: 7, name: \"Giovana Reis\",  email: \"giovana@igreen.com\", role: \"Analyst\",  status: \"active\" },\n  { id: 8, name: \"Henrique Sá\",   email: \"henrique@igreen.com\", role: \"Viewer\",  status: \"pending\" },\n];\n\nconst statusColor: Record<User[\"status\"], \"success\" | \"warning\" | \"secondary\"> = {\n  active: \"success\",\n  pending: \"warning\",\n  inactive: \"secondary\",\n};\n\n/* App.tsx uses: import TableDoc from \"./preview/pages/TableDoc\" (default import)\n   Therefore: export default function TableDoc() */\nexport default function TableDoc() {\n  return (\n    <DocLayout toc={TOC}>\n      <DocHeader\n        category=\"Tables\"\n        title=\"Table\"\n        description=\"Primitivo de tabela em divs. API 'lego' controlada — você gerencia widths, sort, selection. Para tabelas feature-completas use <DataTable>.\"\n      />\n\n      <DocSeparator />\n\n      {/* Hero preview */}\n      <ExampleSection id=\"ex-hero\" title=\"\" description=\"\">\n        <div className=\"w-full\">\n          <HeroExample />\n        </div>\n      </ExampleSection>\n\n      <SectionH2 id=\"examples\" title=\"Examples\" />\n\n      <ExampleSection\n        id=\"ex-density\"\n        title=\"Densidades\"\n        description=\"Três modos: compact (32px), standard (40px, default) e comfortable (44px). Density propaga automaticamente pelos subcomponentes via Context interno.\"\n        code={`<Table density=\"compact\">\n  <TableHead>{/* ... */}</TableHead>\n  <TableBody>{/* ... */}</TableBody>\n</Table>`}\n      >\n        <div className=\"w-full\">\n          <DensityExample />\n        </div>\n      </ExampleSection>\n\n      <ExampleSection\n        id=\"ex-sticky\"\n        title=\"Sticky header\"\n        description=\"Header sticky no topo durante scroll vertical (default). Use altura fixa no container pra ativar o scroll.\"\n        code={`<div style={{ height: 320 }}>\n  <Table>\n    <TableHead sticky>{/* ... */}</TableHead>\n    <TableBody>{/* ... */}</TableBody>\n  </Table>\n</div>`}\n      >\n        <div className=\"w-full\">\n          <StickyExample />\n        </div>\n      </ExampleSection>\n\n      <ExampleSection\n        id=\"ex-pin-sort-resize\"\n        title=\"Pin + Sort + Resize\"\n        description=\"Coluna fixa à esquerda (checkbox + nome) e à direita (actions). Headers clicáveis ciclam asc → desc → none. Drag no edge direito do header redimensiona.\"\n        code={`const { widths, offsets } = useColumnWidths(cols);\n\n<TableHeadCell\n  width={widths.name}\n  pinned=\"left\"\n  pinOffset={offsets.name}\n  sortable\n  sortDirection={sort.field === \"name\" ? sort.dir : null}\n  onSortClick={() => toggleSort(\"name\")}\n  resizable\n  onResize={(w) => setWidth(\"name\", w)}\n>\n  Nome\n</TableHeadCell>`}\n      >\n        <div className=\"w-full\">\n          <PinSortResizeExample />\n        </div>\n      </ExampleSection>\n\n      <ExampleSection\n        id=\"ex-selection\"\n        title=\"Selection / hover / clickable\"\n        description=\"A row tem visual de selected (bg brand alpha) e hover. Combinar clickable + onClick faz a linha toda virar trigger.\"\n        code={`<TableRow\n  selected={isSelected(row.id)}\n  clickable\n  onClick={() => toggleRow(row.id)}\n>\n  {/* cells */}\n</TableRow>`}\n      >\n        <div className=\"w-full\">\n          <SelectionExample />\n        </div>\n      </ExampleSection>\n\n      <ExampleSection\n        id=\"ex-card-mode\"\n        title=\"Card mode (responsive)\"\n        description=\"No `<Table>` puro, o consumer renderiza `<TableCardRow>` manualmente em vez de `<TableRow>` quando o container fica estreito (decide via ResizeObserver/matchMedia). Já no `<DataTable>`, o switch é automático: abaixo de `cardBreakpoint` (default 768px), todas as rows viram cards automaticamente — sem trabalho extra.\"\n        code={`<TableCardRow\n  header={<strong>{row.name}</strong>}\n  headerActions={<Button size=\"icon-xs\"><Pencil /></Button>}\n  items={[\n    { label: \"Email\", value: row.email },\n    { label: \"Cargo\", value: row.role },\n  ]}\n/>`}\n      >\n        <div className=\"w-full\">\n          <CardModeExample />\n        </div>\n      </ExampleSection>\n\n      <ExampleSection\n        id=\"ex-full\"\n        title=\"Tabela completa (estilo design-and-table-v2)\"\n        description=\"Replica visual da tabela de CRUD: 13 colunas com icone de tipo, sort badge, cell borders, sticky right action column, strip lateral brand em selected, hover '...' na row, status/category/person/agent cells customizadas.\"\n        code={`<Table cellBorders density=\"comfortable\">\n  <TableHead>\n    <TableHeadCell icon={Hash} width={120}>ID</TableHeadCell>\n    <TableHeadCell icon={User} sortable sortDirection=\"asc\">Nome</TableHeadCell>\n    <TableHeadCell icon={AtSign} headMenu={<Button>...</Button>}>Email</TableHeadCell>\n  </TableHead>\n  <TableBody>\n    {rows.map(row => (\n      <TableRow key={row.id} selected={isSelected(row.id)}>\n        <TableCell>{row.id}</TableCell>\n        <TableCell><PersonCell row={row} /></TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>`}\n      >\n        <div className=\"w-full\">\n          <ClientsTableExample />\n        </div>\n      </ExampleSection>\n\n      {/* ── API Reference ───────────────────────────────────────────── */}\n      <SectionH2 id=\"api\" title=\"API Reference\" />\n\n      <div id=\"api-table\" className=\"mb-12\">\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;Table&gt;</h3>\n        <PropsTable items={TABLE_PROPS} />\n      </div>\n\n      <div id=\"api-head\" className=\"mb-12\">\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableHead&gt;</h3>\n        <PropsTable items={HEAD_PROPS} />\n      </div>\n\n      <div id=\"api-headcell\" className=\"mb-12\">\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableHeadCell&gt;</h3>\n        <PropsTable items={HEAD_CELL_PROPS} />\n      </div>\n\n      <div id=\"api-row\" className=\"mb-12\">\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableRow&gt;</h3>\n        <PropsTable items={ROW_PROPS} />\n      </div>\n\n      <div id=\"api-cell\" className=\"mb-12\">\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableCell&gt;</h3>\n        <PropsTable items={CELL_PROPS} />\n      </div>\n\n      <div id=\"api-cardrow\" className=\"mb-12\">\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableCardRow&gt;</h3>\n        <PropsTable items={CARD_ROW_PROPS} />\n      </div>\n    </DocLayout>\n  );\n}\n\n/* ── Examples ─────────────────────────────────────────────────────── */\n\nfunction HeroExample() {\n  const columns = useMemo(() => [\n    { field: \"name\",   headerName: \"Nome\",   width: 180 },\n    { field: \"email\",  headerName: \"Email\",  width: 220 },\n    { field: \"status\", headerName: \"Status\", width: 100 },\n  ], []);\n  const { widths } = useColumnWidths(columns);\n\n  return (\n    <Table ariaLabel=\"Hero example\">\n      <TableHead>\n        {columns.map((c) => (\n          <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\n        ))}\n      </TableHead>\n      <TableBody>\n        {SEED_USERS.slice(0, 3).map((row) => (\n          <TableRow key={row.id}>\n            <TableCell width={widths.name}>{row.name}</TableCell>\n            <TableCell width={widths.email}>{row.email}</TableCell>\n            <TableCell width={widths.status}>\n              <Badge color={statusColor[row.status]} variant=\"soft\" size=\"sm\">{row.status}</Badge>\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n\nfunction DensityExample() {\n  const [density, setDensity] = useState<TableDensity>(\"standard\");\n  const columns = useMemo(() => [\n    { field: \"name\",   headerName: \"Nome\",   width: 180 },\n    { field: \"email\",  headerName: \"Email\",  width: 220 },\n    { field: \"role\",   headerName: \"Cargo\",  width: 120 },\n    { field: \"status\", headerName: \"Status\", width: 110 },\n  ], []);\n  const { widths } = useColumnWidths(columns);\n\n  return (\n    <div className=\"flex flex-col gap-gp-md\">\n      <div className=\"flex gap-gp-md\">\n        {([\"compact\", \"standard\", \"comfortable\"] as const).map((d) => (\n          <Button\n            key={d}\n            size=\"xs\"\n            variant={density === d ? \"filled\" : \"outline\"}\n            color={density === d ? \"primary\" : \"secondary\"}\n            onClick={() => setDensity(d)}\n          >\n            {d}\n          </Button>\n        ))}\n      </div>\n\n      <Table density={density} ariaLabel=\"Density example\">\n        <TableHead>\n          {columns.map((c) => (\n            <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\n          ))}\n        </TableHead>\n        <TableBody>\n          {SEED_USERS.slice(0, 4).map((row) => (\n            <TableRow key={row.id}>\n              <TableCell width={widths.name}>{row.name}</TableCell>\n              <TableCell width={widths.email}>{row.email}</TableCell>\n              <TableCell width={widths.role}>{row.role}</TableCell>\n              <TableCell width={widths.status}>\n                <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\nfunction StickyExample() {\n  const columns = useMemo(() => [\n    { field: \"name\",  headerName: \"Nome\",  width: 180 },\n    { field: \"email\", headerName: \"Email\", width: 220 },\n    { field: \"role\",  headerName: \"Cargo\", width: 120 },\n  ], []);\n  const { widths } = useColumnWidths(columns);\n  const bigRows = useMemo(\n    () => Array.from({ length: 30 }, (_, i) => SEED_USERS[i % SEED_USERS.length]),\n    [],\n  );\n\n  return (\n    <div style={{ height: 320 }}>\n      <Table ariaLabel=\"Sticky example\">\n        <TableHead>\n          {columns.map((c) => (\n            <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\n          ))}\n        </TableHead>\n        <TableBody>\n          {bigRows.map((row, i) => (\n            <TableRow key={`${row.id}-${i}`}>\n              <TableCell width={widths.name}>{row.name}</TableCell>\n              <TableCell width={widths.email}>{row.email}</TableCell>\n              <TableCell width={widths.role}>{row.role}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\nfunction PinSortResizeExample() {\n  const initialCols = useMemo(\n    () => [\n      { field: \"select\", headerName: \"\",       width: 56,  pinned: \"left\" as const,  resizable: false, sortable: false },\n      { field: \"name\",   headerName: \"Nome\",   width: 160, pinned: \"left\" as const,  resizable: true,  sortable: true },\n      { field: \"email\",  headerName: \"Email\",  width: 200,                            resizable: true,  sortable: true },\n      { field: \"role\",   headerName: \"Cargo\",  width: 120,                            resizable: true,  sortable: true },\n      { field: \"status\", headerName: \"Status\", width: 110,                            resizable: true,  sortable: true },\n      { field: \"actions\", headerName: \"\",      width: 56,  pinned: \"right\" as const, resizable: false, sortable: false },\n    ],\n    [],\n  );\n\n  const [widthMap, setWidthMap] = useState<Record<string, number>>({});\n  const cols = useMemo(\n    () => initialCols.map((c) => ({ ...c, width: widthMap[c.field] ?? c.width })),\n    [initialCols, widthMap],\n  );\n  const { widths, offsets } = useColumnWidths(cols);\n\n  const [sort, setSort] = useState<{ field: string; dir: SortDirection }>({ field: \"\", dir: null });\n  const onSort = (field: string) => {\n    setSort((prev) => {\n      if (prev.field !== field) return { field, dir: \"asc\" };\n      if (prev.dir === \"asc\") return { field, dir: \"desc\" };\n      return { field: \"\", dir: null };\n    });\n  };\n\n  return (\n    <Table ariaLabel=\"Pin + sort + resize example\">\n      <TableHead>\n        {cols.map((c) => (\n          <TableHeadCell\n            key={c.field}\n            width={widths[c.field]}\n            pinned={c.pinned}\n            pinOffset={offsets[c.field]}\n            sortable={c.sortable}\n            sortDirection={sort.field === c.field ? sort.dir : null}\n            onSortClick={() => onSort(c.field)}\n            resizable={c.resizable}\n            onResize={(w) => setWidthMap((m) => ({ ...m, [c.field]: w }))}\n          >\n            {c.headerName}\n          </TableHeadCell>\n        ))}\n      </TableHead>\n      <TableBody>\n        {SEED_USERS.map((row) => (\n          <TableRow key={row.id}>\n            <TableCell width={widths.select} pinned=\"left\" pinOffset={offsets.select}>\n              <Checkbox aria-label={`Selecionar ${row.name}`} />\n            </TableCell>\n            <TableCell width={widths.name} pinned=\"left\" pinOffset={offsets.name} ellipsis>{row.name}</TableCell>\n            <TableCell width={widths.email} ellipsis>{row.email}</TableCell>\n            <TableCell width={widths.role}>{row.role}</TableCell>\n            <TableCell width={widths.status}>\n              <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>\n            </TableCell>\n            <TableCell width={widths.actions} pinned=\"right\" pinOffset={offsets.actions} align=\"center\">\n              <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Mais\">\n                <MoreVertical />\n              </Button>\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n\nfunction SelectionExample() {\n  const [selected, setSelected] = useState<Set<number>>(new Set([2, 5]));\n  const columns = useMemo(() => [\n    { field: \"select\", headerName: \"\",     width: 56 },\n    { field: \"name\",   headerName: \"Nome\", width: 180 },\n    { field: \"email\",  headerName: \"Email\", width: 220 },\n  ], []);\n  const { widths } = useColumnWidths(columns);\n\n  const toggle = (id: number) => {\n    setSelected((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id); else next.add(id);\n      return next;\n    });\n  };\n\n  const rows = SEED_USERS.slice(0, 6);\n  const allSelected = selected.size === rows.length;\n  const someSelected = selected.size > 0 && !allSelected;\n  const toggleAll = () => {\n    if (selected.size > 0) setSelected(new Set());\n    else setSelected(new Set(rows.map((r) => r.id)));\n  };\n\n  return (\n    <Table ariaLabel=\"Selection example\">\n      <TableHead>\n        <TableHeadCell width={widths.select} align=\"center\">\n          <Checkbox\n            checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\n            onCheckedChange={toggleAll}\n            aria-label=\"Selecionar todos\"\n          />\n        </TableHeadCell>\n        {columns.slice(1).map((c) => (\n          <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\n        ))}\n      </TableHead>\n      <TableBody>\n        {rows.map((row) => (\n          <TableRow\n            key={row.id}\n            selected={selected.has(row.id)}\n            clickable\n            onClick={() => toggle(row.id)}\n          >\n            <TableCell width={widths.select} align=\"center\">\n              <Checkbox\n                checked={selected.has(row.id)}\n                aria-label={`Selecionar ${row.name}`}\n                onClick={(e) => e.stopPropagation()}\n                onCheckedChange={() => toggle(row.id)}\n              />\n            </TableCell>\n            <TableCell width={widths.name}>{row.name}</TableCell>\n            <TableCell width={widths.email}>{row.email}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n\nfunction CardModeExample() {\n  return (\n    <Table cardBreakpoint={768} ariaLabel=\"Card mode example\">\n      <TableBody>\n        {SEED_USERS.slice(0, 4).map((row) => (\n          <TableCardRow\n            key={row.id}\n            header={\n              <>\n                <Checkbox aria-label={`Selecionar ${row.name}`} />\n                <strong className=\"text-paragraph-md text-fg-strong\">{row.name}</strong>\n              </>\n            }\n            headerActions={\n              <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Editar\">\n                <Pencil />\n              </Button>\n            }\n            items={[\n              { label: \"Email\", value: row.email },\n              { label: \"Cargo\", value: row.role },\n              {\n                label: \"Status\",\n                value: <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>,\n              },\n            ]}\n          />\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n\n/* ═══════════════════════════════════════════════════════════════════════════\n   ClientsTable example: replica do design-and-table-v2\n   ═══════════════════════════════════════════════════════════════════════════ */\n\nexport const STATUSES: Record<string, { label: string; color: string }> = {\n  active:   { label: \"Ativo\",    color: \"var(--color-fg-success)\" },\n  pending:  { label: \"Pendente\", color: \"var(--color-fg-warning)\" },\n  paused:   { label: \"Pausado\",  color: \"var(--color-fg-info)\" },\n  inactive: { label: \"Inativo\",  color: \"var(--color-fg-muted)\" },\n};\n\nexport type CategoryKind = \"warning\" | \"info\" | \"success\" | \"neutral\";\nexport const CATEGORIES: Record<string, { label: string; kind: CategoryKind }> = {\n  royal:      { label: \"Royal\",      kind: \"warning\" },\n  licenciado: { label: \"Licenciado\", kind: \"info\" },\n  lead:       { label: \"Lead\",       kind: \"success\" },\n};\n\nexport const AGENTS: Record<string, { name: string; initials: string; color: string }> = {\n  you:    { name: \"Voce\",         initials: \"VC\", color: \"#0a3a2e\" },\n  aline:  { name: \"Aline Castro\", initials: \"AC\", color: \"#f59e0b\" },\n  carlos: { name: \"Carlos Souza\", initials: \"CS\", color: \"#8754ec\" },\n  maria:  { name: \"Maria Lima\",   initials: \"ML\", color: \"#ef4444\" },\n};\n\nexport type ClientRow = {\n  id: string;\n  name: string;\n  initials: string;\n  avatarColor: string;\n  email: string;\n  phone: string;\n  statusId: keyof typeof STATUSES;\n  categoryId: keyof typeof CATEGORIES;\n  location: string;\n  value: number;\n  agentId: keyof typeof AGENTS;\n  createdAt: number;\n  lastContact: number;\n};\n\nconst BASE_DATE = new Date(\"2026-04-15T12:00:00Z\").getTime();\nconst DAY_MS = 86400000;\n\nexport const CLIENTS_MOCK: ClientRow[] = [\n  { id: \"CLI-2401\", name: \"Maria Silva\",     initials: \"MS\", avatarColor: \"#f59e0b\", email: \"maria.silva@example.com\",     phone: \"+55 11 91234-5678\", statusId: \"active\",   categoryId: \"royal\",      location: \"São Paulo, SP\",      value: 4800,  agentId: \"you\",    createdAt: BASE_DATE - 65 * DAY_MS, lastContact: BASE_DATE - 2 * DAY_MS  },\n  { id: \"CLI-2402\", name: \"João Santos\",     initials: \"JS\", avatarColor: \"#0a3a2e\", email: \"joao.santos@example.com\",     phone: \"+55 11 92345-6789\", statusId: \"pending\",  categoryId: \"licenciado\", location: \"Rio de Janeiro, RJ\", value: 12300, agentId: \"aline\",  createdAt: BASE_DATE - 58 * DAY_MS, lastContact: BASE_DATE - 5 * DAY_MS  },\n  { id: \"CLI-2403\", name: \"Carlos Oliveira\", initials: \"CO\", avatarColor: \"#8754ec\", email: \"carlos.oliveira@example.com\", phone: \"+55 11 93456-7890\", statusId: \"active\",   categoryId: \"lead\",       location: \"Belo Horizonte, MG\", value: 2150,  agentId: \"carlos\", createdAt: BASE_DATE - 51 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS  },\n  { id: \"CLI-2404\", name: \"Ana Costa\",       initials: \"AC\", avatarColor: \"#1cb280\", email: \"ana.costa@example.com\",       phone: \"+55 11 94567-8901\", statusId: \"paused\",   categoryId: \"royal\",      location: \"Porto Alegre, RS\",   value: 8900,  agentId: \"maria\",  createdAt: BASE_DATE - 44 * DAY_MS, lastContact: BASE_DATE - 12 * DAY_MS },\n  { id: \"CLI-2405\", name: \"Pedro Pereira\",   initials: \"PP\", avatarColor: \"#ef4444\", email: \"pedro.pereira@example.com\",   phone: \"+55 11 95678-9012\", statusId: \"inactive\", categoryId: \"lead\",       location: \"Curitiba, PR\",       value: 1100,  agentId: \"you\",    createdAt: BASE_DATE - 37 * DAY_MS, lastContact: BASE_DATE - 30 * DAY_MS },\n  { id: \"CLI-2406\", name: \"Lúcia Almeida\",   initials: \"LA\", avatarColor: \"#f9a47a\", email: \"lucia.almeida@example.com\",   phone: \"+55 11 96789-0123\", statusId: \"active\",   categoryId: \"licenciado\", location: \"Recife, PE\",         value: 6750,  agentId: \"aline\",  createdAt: BASE_DATE - 30 * DAY_MS, lastContact: BASE_DATE - 3 * DAY_MS  },\n  { id: \"CLI-2407\", name: \"Roberto Souza\",   initials: \"RS\", avatarColor: \"#0088cc\", email: \"roberto.souza@example.com\",   phone: \"+55 11 97890-1234\", statusId: \"pending\",  categoryId: \"royal\",      location: \"São Paulo, SP\",      value: 15200, agentId: \"carlos\", createdAt: BASE_DATE - 23 * DAY_MS, lastContact: BASE_DATE - 7 * DAY_MS  },\n  { id: \"CLI-2408\", name: \"Fernanda Lima\",   initials: \"FL\", avatarColor: \"#e1306c\", email: \"fernanda.lima@example.com\",   phone: \"+55 11 98901-2345\", statusId: \"active\",   categoryId: \"lead\",       location: \"Rio de Janeiro, RJ\", value: 3400,  agentId: \"maria\",  createdAt: BASE_DATE - 16 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS  },\n  { id: \"CLI-2409\", name: \"Bruno Rodrigues\", initials: \"BR\", avatarColor: \"#70c748\", email: \"bruno.rodrigues@example.com\", phone: \"+55 11 99012-3456\", statusId: \"paused\",   categoryId: \"licenciado\", location: \"Belo Horizonte, MG\", value: 5600,  agentId: \"you\",    createdAt: BASE_DATE - 9 * DAY_MS,  lastContact: BASE_DATE - 6 * DAY_MS  },\n  { id: \"CLI-2410\", name: \"Camila Ribeiro\",  initials: \"CR\", avatarColor: \"#8754ec\", email: \"camila.ribeiro@example.com\",  phone: \"+55 11 90123-4567\", statusId: \"active\",   categoryId: \"royal\",      location: \"Porto Alegre, RS\",   value: 9800,  agentId: \"aline\",  createdAt: BASE_DATE - 2 * DAY_MS,  lastContact: BASE_DATE              },\n];\n\nconst MONTHS_SHORT = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\nexport function formatDateShort(value: number): string {\n  const d = new Date(value);\n  const day = d.getDate().toString().padStart(2, \"0\");\n  return `${day} de ${MONTHS_SHORT[d.getMonth()]}`;\n}\nexport function formatCurrency(value: number): string {\n  return value.toLocaleString(\"pt-BR\", { style: \"currency\", currency: \"BRL\", minimumFractionDigits: 2 });\n}\n\nexport function ClientAvatar({ initials, color, sm = false }: { initials: string; color: string; sm?: boolean }) {\n  return (\n    <span\n      className={`inline-grid place-items-center rounded-radius-full text-white font-bold shrink-0 ${sm ? \"size-[22px] text-[10px]\" : \"size-[28px] text-[11px]\"}`}\n      style={{ background: color }}\n      aria-hidden\n    >\n      {initials}\n    </span>\n  );\n}\n\nexport function PersonCell({ row }: { row: ClientRow }) {\n  return (\n    <span className=\"inline-flex items-center gap-gp-md whitespace-nowrap overflow-hidden\" title={row.name}>\n      <ClientAvatar initials={row.initials} color={row.avatarColor} />\n      <span className=\"truncate font-medium text-fg-default\">{row.name}</span>\n    </span>\n  );\n}\n\nexport function AgentCell({ agentId }: { agentId: keyof typeof AGENTS }) {\n  const a = AGENTS[agentId];\n  return (\n    <span className=\"inline-flex items-center gap-gp-md whitespace-nowrap\" title={a.name}>\n      <ClientAvatar initials={a.initials} color={a.color} sm />\n      <span className=\"text-fg-default\">{a.name}</span>\n    </span>\n  );\n}\n\nexport function StatusDot({ statusId }: { statusId: keyof typeof STATUSES }) {\n  const s = STATUSES[statusId];\n  return (\n    <span className=\"inline-flex items-center gap-gp-md text-fg-default\">\n      <span className=\"size-[8px] rounded-radius-full shrink-0\" style={{ background: s.color }} aria-hidden />\n      {s.label}\n    </span>\n  );\n}\n\nexport function CategoryChip({ categoryId }: { categoryId: keyof typeof CATEGORIES }) {\n  const c = CATEGORIES[categoryId];\n  const colorMap = {\n    warning: \"warning\",\n    info: \"info\",\n    success: \"success\",\n    neutral: \"neutral\",\n  } as const;\n  return (\n    <Chip color={colorMap[c.kind]} variant=\"soft\" size=\"sm\">\n      {c.label}\n    </Chip>\n  );\n}\n\nexport function ClientsTableExample() {\n  const [selected, setSelected] = useState<Set<string>>(new Set([\"CLI-2401\"]));\n  const [openRowId, setOpenRowId] = useState<string | null>(null);\n  const [sortDir, setSortDir] = useState<SortDirection>(\"asc\");\n\n  const toggle = (id: string) => {\n    setSelected((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id); else next.add(id);\n      return next;\n    });\n  };\n\n  const allSelected = selected.size === CLIENTS_MOCK.length;\n  const someSelected = selected.size > 0 && !allSelected;\n  const toggleAll = () => {\n    if (selected.size > 0) setSelected(new Set());\n    else setSelected(new Set(CLIENTS_MOCK.map((r) => r.id)));\n  };\n\n  const cycleSort = () => {\n    setSortDir((prev) => (prev === \"asc\" ? \"desc\" : prev === \"desc\" ? null : \"asc\"));\n  };\n\n  const initialCols = useMemo(() => [\n    { field: \"select\",      headerName: \"\",                width: 56 },\n    { field: \"id\",          headerName: \"ID\",              width: 120,    icon: Hash },\n    { field: \"name\",        headerName: \"Nome\",            width: 220,    icon: User },\n    { field: \"email\",       headerName: \"Email\",           width: 240,    icon: AtSign },\n    { field: \"phone\",       headerName: \"Telefone\",        width: 170,    icon: Phone },\n    { field: \"status\",      headerName: \"Status\",          width: 140,    icon: CheckCircle2 },\n    { field: \"category\",    headerName: \"Categoria\",       width: 130,    icon: Tag },\n    { field: \"agent\",       headerName: \"Atribuido\",       width: 170,    icon: UsersIcon },\n    { field: \"value\",       headerName: \"Valor\",           width: 130,    icon: DollarSign },\n    { field: \"createdAt\",   headerName: \"Criado em\",       width: 130,    icon: Calendar },\n    { field: \"lastContact\", headerName: \"Ultimo contato\",  width: 150,    icon: Calendar },\n    { field: \"location\",    headerName: \"Localizacao\",     width: 150,    icon: Type },\n    { field: \"actions\",     headerName: \"\",                width: 44 },\n  ], []);\n\n  const [widthMap, setWidthMap] = useState<Record<string, number>>({});\n  const cols = useMemo(\n    () => initialCols.map((c) => ({ ...c, width: widthMap[c.field] ?? c.width })),\n    [initialCols, widthMap],\n  );\n\n  const { widths } = useColumnWidths(cols);\n\n  return (\n    <Table cellBorders density=\"comfortable\" ariaLabel=\"Tabela de clientes\">\n      <TableHead>\n        <TableHeadCell width={widths.select} align=\"center\">\n          <Checkbox\n            checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\n            onCheckedChange={toggleAll}\n            aria-label=\"Selecionar todos\"\n          />\n        </TableHeadCell>\n\n        {cols.slice(1, -1).map((c) => (\n          <TableHeadCell\n            key={c.field}\n            width={widths[c.field]}\n            icon={c.icon}\n            sortable={c.field === \"name\"}\n            sortDirection={c.field === \"name\" ? sortDir : null}\n            sortIndex={1}\n            onSortClick={c.field === \"name\" ? cycleSort : undefined}\n            resizable\n            onResize={(w) => setWidthMap((m) => ({ ...m, [c.field]: w }))}\n            headMenu={\n              <Button size=\"icon-2xs\" variant=\"ghost\" color=\"secondary\" aria-label={`Menu da coluna ${c.headerName}`} onClick={(e: React.MouseEvent) => e.stopPropagation()}>\n                <MoreVertical />\n              </Button>\n            }\n          >\n            {c.headerName}\n          </TableHeadCell>\n        ))}\n\n        <TableHeadCell width={widths.actions} align=\"center\" />\n      </TableHead>\n\n      <TableBody>\n        {CLIENTS_MOCK.map((row) => {\n          const isSelected = selected.has(row.id);\n          return (\n            <TableRow\n              key={row.id}\n              selected={isSelected}\n              open={openRowId === row.id}\n              clickable\n              onClick={() => setOpenRowId((cur) => (cur === row.id ? null : row.id))}\n            >\n              <TableCell width={widths.select} align=\"center\">\n                <Checkbox\n                  checked={isSelected}\n                  onCheckedChange={() => toggle(row.id)}\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\n                  aria-label={`Selecionar ${row.name}`}\n                />\n              </TableCell>\n\n              <TableCell width={widths.id}>\n                <span className=\"text-fg-muted tabular-nums\">{row.id}</span>\n              </TableCell>\n\n              <TableCell width={widths.name}>\n                <PersonCell row={row} />\n              </TableCell>\n\n              <TableCell width={widths.email}>\n                <a\n                  href={`mailto:${row.email}`}\n                  className=\"text-fg-brand hover:underline\"\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\n                >\n                  {row.email}\n                </a>\n              </TableCell>\n\n              <TableCell width={widths.phone}>\n                <a\n                  href={`tel:${row.phone.replace(/\\D/g, \"\")}`}\n                  className=\"text-fg-brand hover:underline\"\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\n                >\n                  {row.phone}\n                </a>\n              </TableCell>\n\n              <TableCell width={widths.status}>\n                <StatusDot statusId={row.statusId} />\n              </TableCell>\n\n              <TableCell width={widths.category}>\n                <CategoryChip categoryId={row.categoryId} />\n              </TableCell>\n\n              <TableCell width={widths.agent}>\n                <AgentCell agentId={row.agentId} />\n              </TableCell>\n\n              <TableCell width={widths.value}>\n                <span className=\"font-semibold tabular-nums\">{formatCurrency(row.value)}</span>\n              </TableCell>\n\n              <TableCell width={widths.createdAt}>\n                <span className=\"text-fg-muted tabular-nums\">{formatDateShort(row.createdAt)}</span>\n              </TableCell>\n\n              <TableCell width={widths.lastContact}>\n                <span className=\"text-fg-muted tabular-nums\">{formatDateShort(row.lastContact)}</span>\n              </TableCell>\n\n              <TableCell width={widths.location}>{row.location}</TableCell>\n\n              <TableCell width={widths.actions} align=\"center\" className=\"!px-0 opacity-0 group-hover/row:opacity-100 transition-opacity\">\n                <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Acoes\" onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>\n                  <MoreHorizontal />\n                </Button>\n              </TableCell>\n            </TableRow>\n          );\n        })}\n      </TableBody>\n    </Table>\n  );\n}\n","import {\n  CLIENTS_MOCK,\n  STATUSES,\n  CATEGORIES,\n  AGENTS,\n  type ClientRow,\n} from \"../TableDoc\";\n\n/* ── Dataset 87 clientes (bate com badge do print) ─────────────── */\n\nexport const CLIENTS_87: ClientRow[] = Array.from({ length: 9 }, (_, batch) =>\n  CLIENTS_MOCK.map((row, i) => ({\n    ...row,\n    id: `CLI-${2400 + batch * 10 + i}`,\n  })),\n)\n  .flat()\n  .slice(0, 87);\n\n/* ── Lookups por categoria de status (column color mapping) ────── */\n\nexport const STATUS_COLOR_MAP: Record<string, string> = {\n  active: \"success\",\n  pending: \"warning\",\n  paused: \"info\",\n  inactive: \"neutral\",\n};\n\nexport const STATUS_DOT: Record<string, string> = {\n  active: \"var(--color-fg-success)\",\n  pending: \"var(--color-fg-warning)\",\n  paused: \"var(--color-fg-info)\",\n  inactive: \"var(--color-fg-muted)\",\n};\n\nexport const CATEGORY_KIND: Record<string, \"warning\" | \"info\" | \"success\"> = {\n  royal: \"warning\",\n  licenciado: \"info\",\n  lead: \"success\",\n};\n\n/* ── Options pra filters/selects ───────────────────────────────── */\n\nexport const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({\n  value: v,\n  label: m.label,\n  color: STATUS_COLOR_MAP[v] ?? \"neutral\",\n}));\n\nexport const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({\n  value: v,\n  label: m.label,\n  color: m.kind === \"neutral\" ? \"neutral\" : m.kind,\n}));\n\nexport const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({\n  value: v,\n  label: a.name,\n}));\n\n/* ── Avatar lookup pro column type \"user\" ──────────────────────── */\n\nexport const AGENTS_LOOKUP = Object.fromEntries(\n  Object.entries(AGENTS).map(([id, a]) => [\n    id,\n    {\n      name: a.name,\n      initials: a.name\n        .split(\" \")\n        .map((s) => s[0])\n        .join(\"\")\n        .slice(0, 2),\n      color: a.color,\n    },\n  ]),\n);\n\n/* ── Kanban columns (1 por status) ─────────────────────────────── */\n\nexport const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({\n  id,\n  label: s.label,\n  dotColor: STATUS_DOT[id] ?? \"var(--color-fg-muted)\",\n}));\n\n/* ── Cidades pro select do drawer ──────────────────────────────── */\n\nexport const CITIES = [\n  \"São Paulo, SP\",\n  \"Rio de Janeiro, RJ\",\n  \"Belo Horizonte, MG\",\n  \"Porto Alegre, RS\",\n  \"Curitiba, PR\",\n  \"Recife, PE\",\n  \"Salvador, BA\",\n  \"Fortaleza, CE\",\n  \"Brasília, DF\",\n  \"Manaus, AM\",\n];\n\n/* ── Helpers de formatação ─────────────────────────────────────── */\n\nexport function formatBRL(value: number) {\n  return value.toLocaleString(\"pt-BR\", {\n    style: \"currency\",\n    currency: \"BRL\",\n    minimumFractionDigits: 2,\n  });\n}\n\nexport function formatShortDate(ms: number) {\n  if (!ms) return \"—\";\n  const d = new Date(ms);\n  const day = d.getDate().toString().padStart(2, \"0\");\n  const months = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\n  return `${day} ${months[d.getMonth()]}`;\n}\n"],"names":["React","jsx","SeparatorPrimitive","cn","createContext"],"mappings":"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"}

package/dist-lib/chunks/clientes-showcase-mocks-Cq9u3nGZ.mjs

@@ -0,0 +1,169 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createContext } from "react";
+import "lucide-react";
+import "./badge-B_2Zt52o.mjs";
+import { c as cn } from "./chip-group-D3D0i72q.mjs";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+const Separator = React.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+createContext({ onNavigate: () => {
+} });
+const STATUSES = {
+  active: { label: "Ativo", color: "var(--color-fg-success)" },
+  pending: { label: "Pendente", color: "var(--color-fg-warning)" },
+  paused: { label: "Pausado", color: "var(--color-fg-info)" },
+  inactive: { label: "Inativo", color: "var(--color-fg-muted)" }
+};
+const CATEGORIES = {
+  royal: { label: "Royal", kind: "warning" },
+  licenciado: { label: "Licenciado", kind: "info" },
+  lead: { label: "Lead", kind: "success" }
+};
+const AGENTS = {
+  you: { name: "Voce", initials: "VC", color: "#0a3a2e" },
+  aline: { name: "Aline Castro", initials: "AC", color: "#f59e0b" },
+  carlos: { name: "Carlos Souza", initials: "CS", color: "#8754ec" },
+  maria: { name: "Maria Lima", initials: "ML", color: "#ef4444" }
+};
+const BASE_DATE = (/* @__PURE__ */ new Date("2026-04-15T12:00:00Z")).getTime();
+const DAY_MS = 864e5;
+const CLIENTS_MOCK = [
+  { id: "CLI-2401", name: "Maria Silva", initials: "MS", avatarColor: "#f59e0b", email: "maria.silva@example.com", phone: "+55 11 91234-5678", statusId: "active", categoryId: "royal", location: "São Paulo, SP", value: 4800, agentId: "you", createdAt: BASE_DATE - 65 * DAY_MS, lastContact: BASE_DATE - 2 * DAY_MS },
+  { id: "CLI-2402", name: "João Santos", initials: "JS", avatarColor: "#0a3a2e", email: "joao.santos@example.com", phone: "+55 11 92345-6789", statusId: "pending", categoryId: "licenciado", location: "Rio de Janeiro, RJ", value: 12300, agentId: "aline", createdAt: BASE_DATE - 58 * DAY_MS, lastContact: BASE_DATE - 5 * DAY_MS },
+  { id: "CLI-2403", name: "Carlos Oliveira", initials: "CO", avatarColor: "#8754ec", email: "carlos.oliveira@example.com", phone: "+55 11 93456-7890", statusId: "active", categoryId: "lead", location: "Belo Horizonte, MG", value: 2150, agentId: "carlos", createdAt: BASE_DATE - 51 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2404", name: "Ana Costa", initials: "AC", avatarColor: "#1cb280", email: "ana.costa@example.com", phone: "+55 11 94567-8901", statusId: "paused", categoryId: "royal", location: "Porto Alegre, RS", value: 8900, agentId: "maria", createdAt: BASE_DATE - 44 * DAY_MS, lastContact: BASE_DATE - 12 * DAY_MS },
+  { id: "CLI-2405", name: "Pedro Pereira", initials: "PP", avatarColor: "#ef4444", email: "pedro.pereira@example.com", phone: "+55 11 95678-9012", statusId: "inactive", categoryId: "lead", location: "Curitiba, PR", value: 1100, agentId: "you", createdAt: BASE_DATE - 37 * DAY_MS, lastContact: BASE_DATE - 30 * DAY_MS },
+  { id: "CLI-2406", name: "Lúcia Almeida", initials: "LA", avatarColor: "#f9a47a", email: "lucia.almeida@example.com", phone: "+55 11 96789-0123", statusId: "active", categoryId: "licenciado", location: "Recife, PE", value: 6750, agentId: "aline", createdAt: BASE_DATE - 30 * DAY_MS, lastContact: BASE_DATE - 3 * DAY_MS },
+  { id: "CLI-2407", name: "Roberto Souza", initials: "RS", avatarColor: "#0088cc", email: "roberto.souza@example.com", phone: "+55 11 97890-1234", statusId: "pending", categoryId: "royal", location: "São Paulo, SP", value: 15200, agentId: "carlos", createdAt: BASE_DATE - 23 * DAY_MS, lastContact: BASE_DATE - 7 * DAY_MS },
+  { id: "CLI-2408", name: "Fernanda Lima", initials: "FL", avatarColor: "#e1306c", email: "fernanda.lima@example.com", phone: "+55 11 98901-2345", statusId: "active", categoryId: "lead", location: "Rio de Janeiro, RJ", value: 3400, agentId: "maria", createdAt: BASE_DATE - 16 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2409", name: "Bruno Rodrigues", initials: "BR", avatarColor: "#70c748", email: "bruno.rodrigues@example.com", phone: "+55 11 99012-3456", statusId: "paused", categoryId: "licenciado", location: "Belo Horizonte, MG", value: 5600, agentId: "you", createdAt: BASE_DATE - 9 * DAY_MS, lastContact: BASE_DATE - 6 * DAY_MS },
+  { id: "CLI-2410", name: "Camila Ribeiro", initials: "CR", avatarColor: "#8754ec", email: "camila.ribeiro@example.com", phone: "+55 11 90123-4567", statusId: "active", categoryId: "royal", location: "Porto Alegre, RS", value: 9800, agentId: "aline", createdAt: BASE_DATE - 2 * DAY_MS, lastContact: BASE_DATE }
+];
+const CLIENTS_87 = Array.from(
+  { length: 9 },
+  (_, batch) => CLIENTS_MOCK.map((row, i) => ({
+    ...row,
+    id: `CLI-${2400 + batch * 10 + i}`
+  }))
+).flat().slice(0, 87);
+const STATUS_COLOR_MAP = {
+  active: "success",
+  pending: "warning",
+  paused: "info",
+  inactive: "neutral"
+};
+const STATUS_DOT = {
+  active: "var(--color-fg-success)",
+  pending: "var(--color-fg-warning)",
+  paused: "var(--color-fg-info)",
+  inactive: "var(--color-fg-muted)"
+};
+const CATEGORY_KIND = {
+  royal: "warning",
+  licenciado: "info",
+  lead: "success"
+};
+const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: STATUS_COLOR_MAP[v] ?? "neutral"
+}));
+const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: m.kind === "neutral" ? "neutral" : m.kind
+}));
+const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({
+  value: v,
+  label: a.name
+}));
+const AGENTS_LOOKUP = Object.fromEntries(
+  Object.entries(AGENTS).map(([id, a]) => [
+    id,
+    {
+      name: a.name,
+      initials: a.name.split(" ").map((s) => s[0]).join("").slice(0, 2),
+      color: a.color
+    }
+  ])
+);
+const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({
+  id,
+  label: s.label,
+  dotColor: STATUS_DOT[id] ?? "var(--color-fg-muted)"
+}));
+const CITIES = [
+  "São Paulo, SP",
+  "Rio de Janeiro, RJ",
+  "Belo Horizonte, MG",
+  "Porto Alegre, RS",
+  "Curitiba, PR",
+  "Recife, PE",
+  "Salvador, BA",
+  "Fortaleza, CE",
+  "Brasília, DF",
+  "Manaus, AM"
+];
+function formatBRL(value) {
+  return value.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    minimumFractionDigits: 2
+  });
+}
+function formatShortDate(ms) {
+  if (!ms) return "—";
+  const d = new Date(ms);
+  const day = d.getDate().toString().padStart(2, "0");
+  const months = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
+  return `${day} ${months[d.getMonth()]}`;
+}
+const clientesShowcaseMocks = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AGENTS_LOOKUP,
+  AGENT_OPTIONS,
+  CATEGORY_KIND,
+  CATEGORY_OPTIONS,
+  CITIES,
+  CLIENTS_87,
+  KANBAN_COLUMNS,
+  STATUS_COLOR_MAP,
+  STATUS_DOT,
+  STATUS_OPTIONS,
+  formatBRL,
+  formatShortDate
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  AGENTS as A,
+  CATEGORIES as C,
+  KANBAN_COLUMNS as K,
+  STATUSES as S,
+  STATUS_DOT as a,
+  CITIES as b,
+  clientesShowcaseMocks as c,
+  CATEGORY_KIND as d,
+  formatShortDate as e,
+  formatBRL as f,
+  CLIENTS_87 as g,
+  STATUS_OPTIONS as h,
+  CATEGORY_OPTIONS as i,
+  AGENTS_LOOKUP as j,
+  AGENT_OPTIONS as k
+};
+//# sourceMappingURL=clientes-showcase-mocks-Cq9u3nGZ.mjs.map