@iclips/ui 3.0.0 → 3.1.0

package/DESIGN.md

@@ -0,0 +1,246 @@
+---
+version: 3.0.0
+name: iClips Design Language
+description: The visual language of @iclips/ui 3.0.0 — one purple for action, a lot of grey for structure, and colour only where it means something, set in Inter.
+source: "@iclips/ui 3.0.0 — tokens/*.json, src/styles/tokens.css and the components under src/components/ui"
+scope: Colour, type, radius, buttons and surfaces. Spacing lives in tokens/spacing.json; elevation and motion live in the component styles.
+
+colors:
+  # semantic tokens — light theme value (dark theme value in the comment)
+  background: "#FFFFFF" # dark #1A1F26
+  foreground: "#1A1F26" # dark #F2F6FA
+  card: "#FFFFFF" # dark #2F3640
+  muted: "#E9EEF5" # dark #464E59
+  muted-foreground: "#464E59" # dark #C5CDD9
+  accent: "#E9EEF5" # hover — dark #464E59
+  border: "#DAE1EB" # dark #464E59
+  input: "#DAE1EB" # dark #464E59
+  primary: "#7F26BF" # dark #DAA6FF (purple-100: passa AA sobre card/popover gray-700)
+  primary-foreground: "#FFFFFF" # dark #000000
+  secondary: "#F6E9FF" # selection — dark #420F66
+  secondary-foreground: "#420F66" # dark #DAA6FF
+  ring: "#7F26BF" # dark #BB6DF2
+  destructive: "#AB4A43"
+  success: "#427748"
+  warning: "#E4BB78" # dark #CFA066
+  info: "#315687"
+
+typography:
+  body:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 400
+  caption:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: 400
+  label:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 500
+  button:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 600
+  title:
+    fontFamily: Inter
+    fontWeight: 600
+    lineHeight: 1.2
+
+rounded:
+  sm: 6px
+  md: 8px
+  lg: 10px
+  xl: 14px
+  full: 9999px
+
+components:
+  button-default:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.primary-foreground}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+  button-secondary:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.secondary-foreground}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+  button-outline:
+    backgroundColor: "{colors.background}"
+    textColor: "{colors.foreground}"
+    borderColor: "{colors.border}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+  button-ghost:
+    textColor: "{colors.foreground}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+  button-link:
+    textColor: "{colors.primary}"
+    typography: "{typography.button}"
+  button-destructive:
+    backgroundColor: "color-mix({colors.destructive} 10%)"
+    textColor: "{colors.destructive-emphasis}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+  button-success:
+    backgroundColor: "color-mix({colors.success} 10%)"
+    textColor: "{colors.success-emphasis}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+  card:
+    backgroundColor: "{colors.card}"
+    borderColor: "{colors.border}"
+    textColor: "{colors.foreground}"
+    rounded: "{rounded.xl}"
+---
+
+> **Precedência.** Este documento resume o que a `@iclips/ui` 3.0.0 entrega. A
+> fonte de verdade são `tokens/*.json` (e o `src/styles/tokens.css` gerado) e o
+> código dos componentes; se algo aqui divergir deles, o código vence e este
+> arquivo está desatualizado. Os nomes em `colors.*`, `rounded.*` e
+> `components.*` acima correspondem aos tokens semânticos e às variantes reais —
+> no código, escreva `bg-primary`, `rounded-md`, `<Button variant="outline">`.
+> A página Storybook `Fundamentos/Cores` mostra cada par com o contraste medido.
+
+## Overview
+
+**Um roxo, muito cinza, e cor só onde ela significa algo.** Roxo é ação — botão
+primário, link, seleção, foco. Cinza é estrutura — fundo, card, borda, texto, onde
+fica a maior parte da tela. Vermelho, verde, amarelo e azul são estado — feedback,
+nunca decoração. Nenhuma outra cor existe na lib: só tokens semânticos viram
+classe, e o `npm run lint` reprova cor crua.
+
+**Key characteristics**
+
+- Quatro camadas de cor com permissão fechada: estrutura (cinza), ação (roxo),
+  estado (feedback), categoria (só em gráfico)
+- Uma cor de ação; a hierarquia entre ações vem do preenchimento
+- Hover é cinza; lavanda significa selecionado
+- Peso 600 marca ação e título; o corpo fica em 400
+- Raios de 6 a 10px no que se clica e no que flutua; 14px nos contêineres
+
+## Colours
+
+Só existem tokens semânticos como classe. Os primitivos por trás deles — gray
+50–900, purple 50–500 e 700, e o preenchimento de cada estado — são custom
+properties de fiação, sem classe. Os valores estão no cabeçalho deste arquivo,
+claro e escuro.
+
+### Estrutura — neutros
+
+| Token | Uso |
+| --- | --- |
+| `background` / `foreground` | canvas e texto padrão |
+| `card`, `popover` | superfícies elevadas |
+| `muted` / `muted-foreground` | fundo sutil e texto de apoio |
+| `accent` | hover e realce de item de menu — cinza, sem peso |
+| `border`, `input` | divisória e borda de campo |
+
+### Ação — roxo, exclusivo
+
+| Token | Uso |
+| --- | --- |
+| `primary` / `primary-foreground` | botão primário, link, foco, progresso |
+| `secondary` / `secondary-foreground` | item selecionado, ação secundária |
+| `ring` | anel de foco |
+| `sidebar-selected` | item ativo da sidebar |
+
+Selecionado > focado > sob o cursor: seleção em `secondary` (matiz, tinta e peso
+500), foco em anel, hover em `accent` cinza. Fundo lavanda decorativo só em tela
+sem lista, tabela, menu ou calendário — onde há o que selecionar, ele se lê como
+seleção.
+
+### Estado — feedback, nunca decoração
+
+Estado é sempre suave: o token cru (`destructive`, `success`, `warning`,
+`info`) nunca é fundo. A receita única é
+`bg-<status>/10 text-<status>-emphasis border-<status>/20`, em Button e Badge de
+estado, Alert e selo. A cor cheia fica só no ícone e na borda de campo inválido.
+Status nunca é roxo e sempre vem com ícone ou rótulo.
+
+### Categoria — só dados
+
+`chart-1..8` alternam roxo e cinza em luminância, começando pelo roxo. Nunca em
+botão, link, ícone de navegação ou fundo de seção.
+
+## Typography
+
+A lib não embarca fonte: o app instala **Inter**, e o `body` usa
+`var(--font-sans)`. A lib não estiliza elementos soltos (`h1`…`h6`, `p`, `label`)
+— só o `body` e os próprios componentes.
+
+| Papel | Tamanho | Peso | Onde |
+| --- | --- | --- | --- |
+| `{typography.body}` | 14px (`text-sm`) | 400 | texto de componente, campos, menus |
+| `{typography.caption}` | 12px (`text-xs`) | 400 | badge, ajuda, metadado |
+| `{typography.label}` | 14px | 500 | rótulo, item selecionado |
+| `{typography.button}` | 14px | 600 | todas as variantes do `Button` |
+| `{typography.title}` | — | 600 | `CardTitle` e títulos de seção |
+
+**Peso 600 significa ação ou título.** Negrito no corpo do texto não tem papel.
+
+## Shape
+
+Tudo deriva de `--radius` (10px).
+
+| Token | Valor | Uso |
+| --- | --- | --- |
+| `{rounded.sm}` | 6px | item de menu, chips, tags |
+| `{rounded.md}` | 8px | botão, input, popover, menu, tooltip |
+| `{rounded.lg}` | 10px | dialog |
+| `{rounded.xl}` | 14px | contêiner — `Card` e painéis grandes |
+| `{rounded.full}` | 9999px | avatar, badge, indicadores |
+
+Quanto maior a superfície, maior o raio; não há botão em pílula.
+
+## Buttons
+
+Sete variantes, todas em `{typography.button}` e `{rounded.md}`, com altura de
+32 (`sm`), 36 (`default`) ou 40px (`lg`); `icon` é 36×36.
+
+- **`default`** — roxo cheio. A ação principal da tela; uma por tela.
+- **`secondary`** — lavanda com texto roxo. Ação secundária.
+- **`outline`** — fundo neutro com borda; hover cinza.
+- **`ghost`** — sem fundo; hover cinza. Barras de ferramenta e ações densas.
+- **`link`** — texto roxo sublinhado no hover.
+- **`destructive`** — suave: tinta vermelha a 10%, texto `destructive-emphasis`,
+  borda leve. Excluir, ação irreversível.
+- **`success`** — suave, mesma receita em verde. Confirmar um estado positivo.
+
+Clique: no `default` o preenchimento vai a 90% (hover) e 80% (pressionado); no
+`destructive`/`success` a tinta sobe de 10% para 15% (hover) e 20% (pressionado).
+O foco é um anel de 3px em `ring`.
+
+## Surfaces
+
+**`card`** — `bg-card` com borda `border` e `{rounded.xl}`. O contêiner padrão;
+a definição vem da borda, não de sombra.
+
+Popover, menus e dialog usam `popover` e sombra; o `Tooltip` é neutro invertido
+(`bg-foreground text-background`).
+
+## Do and don't
+
+**Do**
+
+- Use roxo para a ação principal, links, seleção e foco — e só para isso.
+- Use `text-<status>-emphasis` para texto de estado, sempre com ícone ou rótulo.
+- Use no máximo dois fundos por tela: `muted` e `background`; o terceiro, quando
+  existir, é `secondary`.
+- Mantenha um botão `default` por tela; o segundo vira `secondary` ou `outline`.
+
+**Don't**
+
+- Não escreva cor crua (`bg-gray-100`, `text-purple-600`): ela não gera CSS e o
+  lint reprova. Use o token semântico.
+- Não pinte fundo de seção com cor de estado — o badge carrega o estado, não o card.
+- Não use cor de gráfico (`chart-N`) fora de dados.
+- Não use negrito para dar ênfase no corpo do texto.
+
+## Scope and limits
+
+Este arquivo cobre **cor, tipo, raio, botões e superfícies** da lib. Espaçamento
+está em `tokens/spacing.json`; elevação e movimento, nos estilos dos
+componentes. A régua de cada componente (anatomia, variantes, acessibilidade)
+está em `src/components/ui/AGENTS.md`.

package/README.md

@@ -17,6 +17,10 @@ import { Button, Dialog } from "@iclips/ui";
 import { DocumentEditor } from "@iclips/ui/editor";
 ```
 
+**Para agentes de IA (e para quem monta tela):** o guia de uso — qual componente
+em cada situação, com código pronto — vem no pacote, na versão instalada, em
+`node_modules/@iclips/ui/docs/`. Comece por `docs/README.md`.
+
 O JS já é tree-shakeable (um módulo por componente). Falta só o CSS — dois modos:
 
 ### Modo A — CSS pré-compilado (qualquer stack, sem Tailwind)

package/dist/components/ui/primitives/badge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("react"),b=require("@radix-ui/react-slot"),v=require("class-variance-authority"),p=require("../utils.cjs");function m(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const x=m(f),s=v.cva("inline-flex items-center justify-center rounded-full border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-destructive/20 bg-destructive/10 text-destructive-emphasis [a&]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",muted:"border-transparent bg-muted text-foreground/70 [a&]:hover:bg-muted/80"},size:{default:"px-2 py-0.5 text-xs",xs:"px-2 py-px text-[9px] uppercase tracking-wide"},dashed:{true:"border-dashed",false:""}},defaultVariants:{variant:"default",size:"default",dashed:!1}}),o=x.forwardRef(({className:e,variant:t,size:r,dashed:a,dot:d,asChild:i=!1,children:c,...u},l)=>{const g=i?b.Slot:"span";return n.jsxs(g,{ref:l,"data-slot":"badge",className:p.cn(s({variant:t,size:r,dashed:a}),e),...u,children:[d&&!i&&n.jsx("span",{"aria-hidden":"true",className:"inline-block size-1.5 shrink-0 rounded-full bg-current"}),c]})});o.displayName="Badge";exports.Badge=o;exports.badgeVariants=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),b=require("react"),f=require("@radix-ui/react-slot"),v=require("class-variance-authority"),p=require("../utils.cjs");function m(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const x=m(b),o=v.cva("inline-flex items-center justify-center rounded-full border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-destructive/20 bg-destructive/10 text-destructive-emphasis [a&]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",success:"border-success/20 bg-success/10 text-success-emphasis [a&]:hover:bg-success/15 focus-visible:ring-success/20 dark:focus-visible:ring-success/40",warning:"border-warning/20 bg-warning/10 text-warning-emphasis [a&]:hover:bg-warning/15 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40",info:"border-info/20 bg-info/10 text-info-emphasis [a&]:hover:bg-info/15 focus-visible:ring-info/20 dark:focus-visible:ring-info/40",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",muted:"border-transparent bg-muted text-foreground/70 [a&]:hover:bg-muted/80"},size:{default:"px-2 py-0.5 text-xs",xs:"px-2 py-px text-[9px] uppercase tracking-wide"},dashed:{true:"border-dashed",false:""}},defaultVariants:{variant:"default",size:"default",dashed:!1}}),c=x.forwardRef(({className:e,variant:t,size:r,dashed:i,dot:d,asChild:a=!1,children:n,...u},g)=>{const l=a?f.Slot:"span";return s.jsx(l,{ref:g,"data-slot":"badge",className:p.cn(o({variant:t,size:r,dashed:i}),e),...u,children:a?n:s.jsxs(s.Fragment,{children:[d&&s.jsx("span",{"aria-hidden":"true",className:"inline-block size-1.5 shrink-0 rounded-full bg-current"}),n]})})});c.displayName="Badge";exports.Badge=c;exports.badgeVariants=o;
 //# sourceMappingURL=badge.cjs.map

package/dist/components/ui/primitives/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","sources":["../../../../src/components/ui/primitives/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-destructive/20 bg-destructive/10 text-destructive-emphasis [a&]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        muted:\n          \"border-transparent bg-muted text-foreground/70 [a&]:hover:bg-muted/80\",\n      },\n      size: {\n        default: \"px-2 py-0.5 text-xs\",\n        xs: \"px-2 py-px text-[9px] uppercase tracking-wide\",\n      },\n      dashed: {\n        true: \"border-dashed\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      dashed: false,\n    },\n  },\n);\n\nconst Badge = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\"> &\n    VariantProps<typeof badgeVariants> & {\n      asChild?: boolean;\n      /** Exibe um indicador circular (dot) antes do conteúdo, na cor do texto. @default false */\n      dot?: boolean;\n    }\n>(({ className, variant, size, dashed, dot, asChild = false, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, size, dashed }), className)}\n      {...props}\n    >\n      {/* asChild passa por Slot, que exige um único filho — o dot iria junto e\n          quebraria React.Children.only; nesse modo o consumidor põe o dot. */}\n      {dot && !asChild && (\n        <span aria-hidden=\"true\" className=\"inline-block size-1.5 shrink-0 rounded-full bg-current\" />\n      )}\n      {children}\n    </Comp>\n  );\n});\nBadge.displayName = \"Badge\";\n\nexport { Badge, badgeVariants };"],"names":["badgeVariants","cva","Badge","React","className","variant","size","dashed","dot","asChild","children","props","ref","Comp","Slot","jsxs","cn","jsx"],"mappings":"ogBAMMA,EAAgBC,EAAAA,IACpB,+XACA,CACE,SAAU,CACR,QAAS,CACP,QACE,iFACF,UACE,uFACF,YACE,0KACF,QACE,yEACF,MACE,uEAAA,EAEJ,KAAM,CACJ,QAAS,sBACT,GAAI,+CAAA,EAEN,OAAQ,CACN,KAAM,gBACN,MAAO,EAAA,CACT,EAEF,gBAAiB,CACf,QAAS,UACT,KAAM,UACN,OAAQ,EAAA,CACV,CAEJ,EAEMC,EAAQC,EAAM,WAQlB,CAAC,CAAE,UAAAC,EAAW,QAAAC,EAAS,KAAAC,EAAM,OAAAC,EAAQ,IAAAC,EAAK,QAAAC,EAAU,GAAO,SAAAC,EAAU,GAAGC,CAAA,EAASC,IAAQ,CACzF,MAAMC,EAAOJ,EAAUK,EAAAA,KAAO,OAE9B,OACEC,EAAAA,KAACF,EAAA,CACC,IAAAD,EACA,YAAU,QACV,UAAWI,EAAAA,GAAGhB,EAAc,CAAE,QAAAK,EAAS,KAAAC,EAAM,OAAAC,CAAA,CAAQ,EAAGH,CAAS,EAChE,GAAGO,EAIH,SAAA,CAAAH,GAAO,CAACC,GACPQ,EAAAA,IAAC,QAAK,cAAY,OAAO,UAAU,yDAAyD,EAE7FP,CAAA,CAAA,CAAA,CAGP,CAAC,EACDR,EAAM,YAAc"}
+{"version":3,"file":"badge.cjs","sources":["../../../../src/components/ui/primitives/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-destructive/20 bg-destructive/10 text-destructive-emphasis [a&]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        success:\n          \"border-success/20 bg-success/10 text-success-emphasis [a&]:hover:bg-success/15 focus-visible:ring-success/20 dark:focus-visible:ring-success/40\",\n        warning:\n          \"border-warning/20 bg-warning/10 text-warning-emphasis [a&]:hover:bg-warning/15 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40\",\n        info:\n          \"border-info/20 bg-info/10 text-info-emphasis [a&]:hover:bg-info/15 focus-visible:ring-info/20 dark:focus-visible:ring-info/40\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        muted:\n          \"border-transparent bg-muted text-foreground/70 [a&]:hover:bg-muted/80\",\n      },\n      size: {\n        default: \"px-2 py-0.5 text-xs\",\n        xs: \"px-2 py-px text-[9px] uppercase tracking-wide\",\n      },\n      dashed: {\n        true: \"border-dashed\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      dashed: false,\n    },\n  },\n);\n\nconst Badge = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\"> &\n    VariantProps<typeof badgeVariants> & {\n      asChild?: boolean;\n      /** Exibe um indicador circular (dot) antes do conteúdo, na cor do texto. @default false */\n      dot?: boolean;\n    }\n>(({ className, variant, size, dashed, dot, asChild = false, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, size, dashed }), className)}\n      {...props}\n    >\n      {/* asChild passa por Slot, que exige um único filho — o dot iria junto e\n          quebraria React.Children.only; nesse modo o consumidor põe o dot. */}\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {dot && <span aria-hidden=\"true\" className=\"inline-block size-1.5 shrink-0 rounded-full bg-current\" />}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n});\nBadge.displayName = \"Badge\";\n\nexport { Badge, badgeVariants };"],"names":["badgeVariants","cva","Badge","React","className","variant","size","dashed","dot","asChild","children","props","ref","Comp","Slot","jsx","cn","jsxs","Fragment"],"mappings":"ogBAMMA,EAAgBC,EAAAA,IACpB,+XACA,CACE,SAAU,CACR,QAAS,CACP,QACE,iFACF,UACE,uFACF,YACE,0KACF,QACE,kJACF,QACE,kJACF,KACE,gIACF,QACE,yEACF,MACE,uEAAA,EAEJ,KAAM,CACJ,QAAS,sBACT,GAAI,+CAAA,EAEN,OAAQ,CACN,KAAM,gBACN,MAAO,EAAA,CACT,EAEF,gBAAiB,CACf,QAAS,UACT,KAAM,UACN,OAAQ,EAAA,CACV,CAEJ,EAEMC,EAAQC,EAAM,WAQlB,CAAC,CAAE,UAAAC,EAAW,QAAAC,EAAS,KAAAC,EAAM,OAAAC,EAAQ,IAAAC,EAAK,QAAAC,EAAU,GAAO,SAAAC,EAAU,GAAGC,CAAA,EAASC,IAAQ,CACzF,MAAMC,EAAOJ,EAAUK,EAAAA,KAAO,OAE9B,OACEC,EAAAA,IAACF,EAAA,CACC,IAAAD,EACA,YAAU,QACV,UAAWI,EAAAA,GAAGhB,EAAc,CAAE,QAAAK,EAAS,KAAAC,EAAM,OAAAC,CAAA,CAAQ,EAAGH,CAAS,EAChE,GAAGO,EAIH,SAAAF,EACCC,EAEAO,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAV,GAAOO,EAAAA,IAAC,OAAA,CAAK,cAAY,OAAO,UAAU,yDAAyD,EACnGL,CAAA,CAAA,CACH,CAAA,CAAA,CAIR,CAAC,EACDR,EAAM,YAAc"}

package/dist/components/ui/primitives/badge.js

@@ -1,8 +1,8 @@
-import { jsxs as c, jsx as u } from "react/jsx-runtime";
+import { jsx as i, jsxs as u, Fragment as g } from "react/jsx-runtime";
 import * as f from "react";
-import { Slot as l } from "@radix-ui/react-slot";
+import { Slot as b } from "@radix-ui/react-slot";
 import { cva as v } from "class-variance-authority";
-import { cn as g } from "../utils.js";
+import { cn as l } from "../utils.js";
 const p = v(
   "inline-flex items-center justify-center rounded-full border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -11,6 +11,9 @@ const p = v(
         default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive: "border-destructive/20 bg-destructive/10 text-destructive-emphasis [a&]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        success: "border-success/20 bg-success/10 text-success-emphasis [a&]:hover:bg-success/15 focus-visible:ring-success/20 dark:focus-visible:ring-success/40",
+        warning: "border-warning/20 bg-warning/10 text-warning-emphasis [a&]:hover:bg-warning/15 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40",
+        info: "border-info/20 bg-info/10 text-info-emphasis [a&]:hover:bg-info/15 focus-visible:ring-info/20 dark:focus-visible:ring-info/40",
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         muted: "border-transparent bg-muted text-foreground/70 [a&]:hover:bg-muted/80"
       },
@@ -29,22 +32,22 @@ const p = v(
       dashed: !1
     }
   }
-), b = f.forwardRef(({ className: r, variant: t, size: a, dashed: i, dot: s, asChild: e = !1, children: o, ...d }, n) => /* @__PURE__ */ c(
-  e ? l : "span",
+), m = f.forwardRef(({ className: s, variant: a, size: t, dashed: n, dot: o, asChild: e = !1, children: r, ...d }, c) => /* @__PURE__ */ i(
+  e ? b : "span",
   {
-    ref: n,
+    ref: c,
     "data-slot": "badge",
-    className: g(p({ variant: t, size: a, dashed: i }), r),
+    className: l(p({ variant: a, size: t, dashed: n }), s),
     ...d,
-    children: [
-      s && !e && /* @__PURE__ */ u("span", { "aria-hidden": "true", className: "inline-block size-1.5 shrink-0 rounded-full bg-current" }),
-      o
-    ]
+    children: e ? r : /* @__PURE__ */ u(g, { children: [
+      o && /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "inline-block size-1.5 shrink-0 rounded-full bg-current" }),
+      r
+    ] })
   }
 ));
-b.displayName = "Badge";
+m.displayName = "Badge";
 export {
-  b as Badge,
+  m as Badge,
   p as badgeVariants
 };
 //# sourceMappingURL=badge.js.map

package/dist/components/ui/primitives/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../../src/components/ui/primitives/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-destructive/20 bg-destructive/10 text-destructive-emphasis [a&]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        muted:\n          \"border-transparent bg-muted text-foreground/70 [a&]:hover:bg-muted/80\",\n      },\n      size: {\n        default: \"px-2 py-0.5 text-xs\",\n        xs: \"px-2 py-px text-[9px] uppercase tracking-wide\",\n      },\n      dashed: {\n        true: \"border-dashed\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      dashed: false,\n    },\n  },\n);\n\nconst Badge = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\"> &\n    VariantProps<typeof badgeVariants> & {\n      asChild?: boolean;\n      /** Exibe um indicador circular (dot) antes do conteúdo, na cor do texto. @default false */\n      dot?: boolean;\n    }\n>(({ className, variant, size, dashed, dot, asChild = false, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, size, dashed }), className)}\n      {...props}\n    >\n      {/* asChild passa por Slot, que exige um único filho — o dot iria junto e\n          quebraria React.Children.only; nesse modo o consumidor põe o dot. */}\n      {dot && !asChild && (\n        <span aria-hidden=\"true\" className=\"inline-block size-1.5 shrink-0 rounded-full bg-current\" />\n      )}\n      {children}\n    </Comp>\n  );\n});\nBadge.displayName = \"Badge\";\n\nexport { Badge, badgeVariants };"],"names":["badgeVariants","cva","Badge","React","className","variant","size","dashed","dot","asChild","children","props","ref","jsxs","Slot","cn","jsx"],"mappings":";;;;;AAMA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,MAEN,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GAEMC,IAAQC,EAAM,WAQlB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,KAAAC,GAAK,SAAAC,IAAU,IAAO,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAI/E,gBAAAC;AAAA,EAHWJ,IAAUK,IAAO;AAAA,EAG3B;AAAA,IACC,KAAAF;AAAA,IACA,aAAU;AAAA,IACV,WAAWG,EAAGf,EAAc,EAAE,SAAAK,GAAS,MAAAC,GAAM,QAAAC,EAAA,CAAQ,GAAGH,CAAS;AAAA,IAChE,GAAGO;AAAA,IAIH,UAAA;AAAA,MAAAH,KAAO,CAACC,KACP,gBAAAO,EAAC,UAAK,eAAY,QAAO,WAAU,0DAAyD;AAAA,MAE7FN;AAAA,IAAA;AAAA,EAAA;AAAA,CAGN;AACDR,EAAM,cAAc;"}
+{"version":3,"file":"badge.js","sources":["../../../../src/components/ui/primitives/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-destructive/20 bg-destructive/10 text-destructive-emphasis [a&]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        success:\n          \"border-success/20 bg-success/10 text-success-emphasis [a&]:hover:bg-success/15 focus-visible:ring-success/20 dark:focus-visible:ring-success/40\",\n        warning:\n          \"border-warning/20 bg-warning/10 text-warning-emphasis [a&]:hover:bg-warning/15 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40\",\n        info:\n          \"border-info/20 bg-info/10 text-info-emphasis [a&]:hover:bg-info/15 focus-visible:ring-info/20 dark:focus-visible:ring-info/40\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        muted:\n          \"border-transparent bg-muted text-foreground/70 [a&]:hover:bg-muted/80\",\n      },\n      size: {\n        default: \"px-2 py-0.5 text-xs\",\n        xs: \"px-2 py-px text-[9px] uppercase tracking-wide\",\n      },\n      dashed: {\n        true: \"border-dashed\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      dashed: false,\n    },\n  },\n);\n\nconst Badge = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\"> &\n    VariantProps<typeof badgeVariants> & {\n      asChild?: boolean;\n      /** Exibe um indicador circular (dot) antes do conteúdo, na cor do texto. @default false */\n      dot?: boolean;\n    }\n>(({ className, variant, size, dashed, dot, asChild = false, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, size, dashed }), className)}\n      {...props}\n    >\n      {/* asChild passa por Slot, que exige um único filho — o dot iria junto e\n          quebraria React.Children.only; nesse modo o consumidor põe o dot. */}\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {dot && <span aria-hidden=\"true\" className=\"inline-block size-1.5 shrink-0 rounded-full bg-current\" />}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n});\nBadge.displayName = \"Badge\";\n\nexport { Badge, badgeVariants };"],"names":["badgeVariants","cva","Badge","React","className","variant","size","dashed","dot","asChild","children","props","ref","jsx","Slot","cn","jsxs","Fragment"],"mappings":";;;;;AAMA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,SACE;AAAA,QACF,MACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,MAEN,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GAEMC,IAAQC,EAAM,WAQlB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,KAAAC,GAAK,SAAAC,IAAU,IAAO,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAI/E,gBAAAC;AAAA,EAHWJ,IAAUK,IAAO;AAAA,EAG3B;AAAA,IACC,KAAAF;AAAA,IACA,aAAU;AAAA,IACV,WAAWG,EAAGf,EAAc,EAAE,SAAAK,GAAS,MAAAC,GAAM,QAAAC,EAAA,CAAQ,GAAGH,CAAS;AAAA,IAChE,GAAGO;AAAA,IAIH,UAAAF,IACCC,IAEA,gBAAAM,EAAAC,GAAA,EACG,UAAA;AAAA,MAAAT,KAAO,gBAAAK,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,0DAAyD;AAAA,MACnGH;AAAA,IAAA,EAAA,CACH;AAAA,EAAA;AAAA,CAIP;AACDR,EAAM,cAAc;"}