@snksergio/design-system 0.48.0 → 0.50.0

package/dist-lib/src/components/ui/CardOption/card-option.styles.d.ts

@@ -0,0 +1,381 @@
+import { VariantProps } from '../../../utils/tv';
+/**
+ * CardOption — controle de formulário apresentado como card clicável, com o controle
+ * (checkbox, radio ou switch) trocável por prop.
+ *
+ * ## Por que um componente e não três
+ *
+ * Medido em 2026-08-27: dos três padrões de "card com controle" que o DS mostrava, **só um
+ * era componente** (`CardCheckbox`). O "Card Selection" do radio e o "Card Toggle" do switch
+ * eram markup solto dentro das páginas de doc — e por isso divergiam em 11 dimensões:
+ * alinhamento (`items-start` vs `items-center`), padding (20px vs 12px), radius, preset do
+ * label (`body-md medium` vs `body-sm semibold`), preset da descrição (`body-md` onde devia
+ * ser `caption`), cor do selecionado, lado do input, e por aí.
+ *
+ * O que produziu a divergência foi a ausência de componente, não falta de disciplina: cada
+ * exemplo foi escrito à mão, em momentos diferentes, e quem copiasse da doc levava a versão
+ * daquele dia. `has-[[data-state=checked]]` aparecia 5× no repo, **todas** em página de doc e
+ * nenhuma em tela real — ou seja, a janela pra unificar era esta, sem migração.
+ *
+ * ## As duas assimetrias que o `type` carrega
+ *
+ * Não é "o mesmo card com controle diferente" em tudo:
+ *
+ *   1. **Lado do controle.** Checkbox/radio à esquerda, switch à direita — convenção de linha
+ *      de configuração. Um default único erraria metade dos casos, então o default deriva do
+ *      `type` (ver `card-option.tsx`).
+ *   2. **Destaque de selecionado.** Radio/checkbox SELECIONAM uma opção e ganham o destaque
+ *      (`bg-success-muted` + `border-brand`). Switch é ESTADO, não seleção: uma lista de
+ *      settings toda verde é ruído, e é exatamente por isso que o exemplo antigo do switch
+ *      não tinha estado nenhum. Daí `highlightSelected` derivar do `type`.
+ *
+ * ## Foco — corrige defeito do CardCheckbox
+ *
+ * O anel vai no card por **`has-[:focus-visible]`**, não por `focus-visible:` no root. O
+ * `CardCheckbox` declarava `focus-visible:ring-4` no `<label>`, e **label não recebe foco**:
+ * era CSS morto (verificado no browser em 2026-08-27 — o anel que aparecia era só o do
+ * controle de 16px, do `shadcn/checkbox`). Com `has-`, o card inteiro reage ao foco do
+ * controle interno, que é o que a área clicável grande promete.
+ */
+export declare const cardOption: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+            description: string;
+        };
+    };
+    /**
+     * Onde o CONTROLE fica — e só ele.
+     *
+     * ⚠️ Era `flex-row-reverse` no root, que invertia TODOS os filhos e levava o ícone pra
+     * direita junto. O ícone tem de ficar sempre à esquerda: ele identifica a opção (junto do
+     * texto), enquanto o controle é a ação. `order-last` move apenas o controle, mantendo
+     * ícone → texto na ordem de leitura em qualquer orientação.
+     */
+    orientation: {
+        left: {};
+        right: {
+            control: string;
+        };
+    };
+    /**
+     * O destaque de selecionado vem do **data attribute do controle**, não de prop.
+     *
+     * ⚠️ A 1ª versão derivava de `checked === true` em JS e o card de **radio nunca
+     * destacava** — a seleção do radio mora no `value` do grupo, não numa prop do item, então
+     * a condição era falsa por construção. Pego no browser: o item com
+     * `data-state="checked"` seguia branco.
+     *
+     * `has-[[data-state=checked]]` resolve os três tipos de uma vez e funciona também em uso
+     * NÃO-CONTROLADO (`defaultValue`/`defaultChecked`), onde nenhuma prop diz o estado. É a
+     * L-012: Radix marca estado por data attribute, não por atributo HTML.
+     *
+     * ⚠️ Quem decide se esta variante entra é o `card-option.tsx`, e o default DEPENDE DO
+     * CONTEXTO: em card solto vem do `type`; **em lista vem desligado**, porque a única borda
+     * do item ali é a de baixo — a divisória — e pintá-la colore a linha que separa o
+     * selecionado do vizinho, não o contorno dele.
+     */
+    highlight: {
+        true: {
+            root: string[];
+        };
+        false: {
+            root: string;
+        };
+    };
+    /**
+     * Dentro de um grupo `layout="list"`: sem cantos e sem borda em volta — quem desenha o
+     * contorno é o grupo. O que sobra é a **linha divisória**, feita pela borda de baixo de
+     * cada item, com o último suprimido.
+     *
+     * ⚠️ A 1ª versão era `border-0` no item + `divide-y` no grupo, e **não desenhava divisória
+     * nenhuma**: o `divide-y` funciona pondo `border-top` nos filhos a partir do 2º, e o
+     * `border-0` do item zerava justamente essa borda. Medido no browser — `border-top: 0px`
+     * nos três itens. Desenhar a borda no próprio item não depende dessa ordem de cascata.
+     */
+    inList: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    control: string;
+    iconWrap: string;
+    body: string;
+    label: string;
+    description: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+            description: string;
+        };
+    };
+    /**
+     * Onde o CONTROLE fica — e só ele.
+     *
+     * ⚠️ Era `flex-row-reverse` no root, que invertia TODOS os filhos e levava o ícone pra
+     * direita junto. O ícone tem de ficar sempre à esquerda: ele identifica a opção (junto do
+     * texto), enquanto o controle é a ação. `order-last` move apenas o controle, mantendo
+     * ícone → texto na ordem de leitura em qualquer orientação.
+     */
+    orientation: {
+        left: {};
+        right: {
+            control: string;
+        };
+    };
+    /**
+     * O destaque de selecionado vem do **data attribute do controle**, não de prop.
+     *
+     * ⚠️ A 1ª versão derivava de `checked === true` em JS e o card de **radio nunca
+     * destacava** — a seleção do radio mora no `value` do grupo, não numa prop do item, então
+     * a condição era falsa por construção. Pego no browser: o item com
+     * `data-state="checked"` seguia branco.
+     *
+     * `has-[[data-state=checked]]` resolve os três tipos de uma vez e funciona também em uso
+     * NÃO-CONTROLADO (`defaultValue`/`defaultChecked`), onde nenhuma prop diz o estado. É a
+     * L-012: Radix marca estado por data attribute, não por atributo HTML.
+     *
+     * ⚠️ Quem decide se esta variante entra é o `card-option.tsx`, e o default DEPENDE DO
+     * CONTEXTO: em card solto vem do `type`; **em lista vem desligado**, porque a única borda
+     * do item ali é a de baixo — a divisória — e pintá-la colore a linha que separa o
+     * selecionado do vizinho, não o contorno dele.
+     */
+    highlight: {
+        true: {
+            root: string[];
+        };
+        false: {
+            root: string;
+        };
+    };
+    /**
+     * Dentro de um grupo `layout="list"`: sem cantos e sem borda em volta — quem desenha o
+     * contorno é o grupo. O que sobra é a **linha divisória**, feita pela borda de baixo de
+     * cada item, com o último suprimido.
+     *
+     * ⚠️ A 1ª versão era `border-0` no item + `divide-y` no grupo, e **não desenhava divisória
+     * nenhuma**: o `divide-y` funciona pondo `border-top` nos filhos a partir do 2º, e o
+     * `border-0` do item zerava justamente essa borda. Medido no browser — `border-top: 0px`
+     * nos três itens. Desenhar a borda no próprio item não depende dessa ordem de cascata.
+     */
+    inList: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    control: string;
+    iconWrap: string;
+    body: string;
+    label: string;
+    description: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+            description: string;
+        };
+    };
+    /**
+     * Onde o CONTROLE fica — e só ele.
+     *
+     * ⚠️ Era `flex-row-reverse` no root, que invertia TODOS os filhos e levava o ícone pra
+     * direita junto. O ícone tem de ficar sempre à esquerda: ele identifica a opção (junto do
+     * texto), enquanto o controle é a ação. `order-last` move apenas o controle, mantendo
+     * ícone → texto na ordem de leitura em qualquer orientação.
+     */
+    orientation: {
+        left: {};
+        right: {
+            control: string;
+        };
+    };
+    /**
+     * O destaque de selecionado vem do **data attribute do controle**, não de prop.
+     *
+     * ⚠️ A 1ª versão derivava de `checked === true` em JS e o card de **radio nunca
+     * destacava** — a seleção do radio mora no `value` do grupo, não numa prop do item, então
+     * a condição era falsa por construção. Pego no browser: o item com
+     * `data-state="checked"` seguia branco.
+     *
+     * `has-[[data-state=checked]]` resolve os três tipos de uma vez e funciona também em uso
+     * NÃO-CONTROLADO (`defaultValue`/`defaultChecked`), onde nenhuma prop diz o estado. É a
+     * L-012: Radix marca estado por data attribute, não por atributo HTML.
+     *
+     * ⚠️ Quem decide se esta variante entra é o `card-option.tsx`, e o default DEPENDE DO
+     * CONTEXTO: em card solto vem do `type`; **em lista vem desligado**, porque a única borda
+     * do item ali é a de baixo — a divisória — e pintá-la colore a linha que separa o
+     * selecionado do vizinho, não o contorno dele.
+     */
+    highlight: {
+        true: {
+            root: string[];
+        };
+        false: {
+            root: string;
+        };
+    };
+    /**
+     * Dentro de um grupo `layout="list"`: sem cantos e sem borda em volta — quem desenha o
+     * contorno é o grupo. O que sobra é a **linha divisória**, feita pela borda de baixo de
+     * cada item, com o último suprimido.
+     *
+     * ⚠️ A 1ª versão era `border-0` no item + `divide-y` no grupo, e **não desenhava divisória
+     * nenhuma**: o `divide-y` funciona pondo `border-top` nos filhos a partir do 2º, e o
+     * `border-0` do item zerava justamente essa borda. Medido no browser — `border-top: 0px`
+     * nos três itens. Desenhar a borda no próprio item não depende dessa ordem de cascata.
+     */
+    inList: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    control: string;
+    iconWrap: string;
+    body: string;
+    label: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * O container. Guarda a borda e o arredondamento quando `layout="list"`, porque nesse modo
+ * os itens não têm os seus.
+ */
+export declare const cardOptionGroup: import('tailwind-variants').TVReturnType<{
+    layout: {
+        spaced: string;
+        /**
+         * O grupo desenha só o contorno; a divisória entre linhas é a borda de baixo de cada
+         * item (ver `inList`). Não usa `divide-y`: ele põe `border-top` nos filhos e brigava
+         * com o reset de borda do item.
+         *
+         * Vale pros TRÊS tipos, não só switch — radio em lista é um seletor de linha única, e
+         * checkbox em lista é uma lista de permissões.
+         *
+         * ⚠️ O `gap-0` é obrigatório e não é redundante: com `type="radio"` o grupo É o
+         * `RadioGroup` do DS, que traz `grid w-full gap-gp-xl` no base. Sem declarar gap aqui,
+         * o `gap-gp-xl` (12px) sobrevivia e a lista de radio saía com 12px entre as linhas —
+         * medido. (A 1ª tentativa foi um `grid-none` que eu inventei; classe inexistente é
+         * inerte e não zera nada.)
+         */
+        list: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "flex w-full flex-col", {
+    layout: {
+        spaced: string;
+        /**
+         * O grupo desenha só o contorno; a divisória entre linhas é a borda de baixo de cada
+         * item (ver `inList`). Não usa `divide-y`: ele põe `border-top` nos filhos e brigava
+         * com o reset de borda do item.
+         *
+         * Vale pros TRÊS tipos, não só switch — radio em lista é um seletor de linha única, e
+         * checkbox em lista é uma lista de permissões.
+         *
+         * ⚠️ O `gap-0` é obrigatório e não é redundante: com `type="radio"` o grupo É o
+         * `RadioGroup` do DS, que traz `grid w-full gap-gp-xl` no base. Sem declarar gap aqui,
+         * o `gap-gp-xl` (12px) sobrevivia e a lista de radio saía com 12px entre as linhas —
+         * medido. (A 1ª tentativa foi um `grid-none` que eu inventei; classe inexistente é
+         * inerte e não zera nada.)
+         */
+        list: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    layout: {
+        spaced: string;
+        /**
+         * O grupo desenha só o contorno; a divisória entre linhas é a borda de baixo de cada
+         * item (ver `inList`). Não usa `divide-y`: ele põe `border-top` nos filhos e brigava
+         * com o reset de borda do item.
+         *
+         * Vale pros TRÊS tipos, não só switch — radio em lista é um seletor de linha única, e
+         * checkbox em lista é uma lista de permissões.
+         *
+         * ⚠️ O `gap-0` é obrigatório e não é redundante: com `type="radio"` o grupo É o
+         * `RadioGroup` do DS, que traz `grid w-full gap-gp-xl` no base. Sem declarar gap aqui,
+         * o `gap-gp-xl` (12px) sobrevivia e a lista de radio saía com 12px entre as linhas —
+         * medido. (A 1ª tentativa foi um `grid-none` que eu inventei; classe inexistente é
+         * inerte e não zera nada.)
+         */
+        list: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "flex w-full flex-col", unknown, unknown, undefined>>;
+export type CardOptionVariants = VariantProps<typeof cardOption>;
+export type CardOptionGroupVariants = VariantProps<typeof cardOptionGroup>;
+//# sourceMappingURL=card-option.styles.d.ts.map

package/dist-lib/src/components/ui/CardOption/card-option.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-option.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/CardOption/card-option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;IAmCnB;;;;;;;OAOG;;;;;;;IAKH;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;IAcH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAnDH;;;;;;;OAOG;;;;;;;IAKH;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;IAcH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAnDH;;;;;;;OAOG;;;;;;;IAKH;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;IAcH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;2CAoCL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,eAAe;;;QAKtB;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;QAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;QAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;mEAsBP,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACjE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist-lib/src/components/ui/CardOption/card-option.types.d.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { CardOptionVariants } from './card-option.styles';
+/** Qual controle o card embrulha. Ponto de extensão pra tipos futuros. */
+export type CardOptionType = "checkbox" | "radio" | "switch";
+export type CardOptionSize = NonNullable<CardOptionVariants["size"]>;
+/** Lado em que o controle fica. Omitido → derivado do `type`. */
+export type CardOptionOrientation = NonNullable<CardOptionVariants["orientation"]>;
+/** `spaced` = cards separados · `list` = uma lista com divisórias, sem gap. */
+export type CardOptionLayout = "spaced" | "list";
+export interface CardOptionProps {
+    /**
+     * Controle embrulhado pelo card. Default: herda do grupo, ou `"checkbox"`.
+     *
+     * ⚠️ `"radio"` exige um `CardOptionGroup` em volta — é ele que vira o `RadioGroup` do
+     * Radix e dá navegação por seta + agrupamento por `name`. Checkbox e switch funcionam
+     * soltos.
+     */
+    type?: CardOptionType;
+    /** Obrigatório quando `type="radio"` — é o valor que o grupo seleciona. */
+    value?: string;
+    size?: CardOptionSize;
+    /**
+     * Lado do controle. **Omita**: o default deriva do `type` — `left` pra checkbox/radio,
+     * `right` pro switch (convenção de linha de configuração).
+     */
+    orientation?: CardOptionOrientation;
+    /**
+     * Pinta o card quando selecionado — fundo (`bg-success-muted`) + borda (`border-brand`).
+     *
+     * **Omita**: o default deriva do contexto.
+     * - card solto → do `type`: ligado em checkbox/radio, desligado no switch (switch é estado,
+     *   não seleção — lista de settings toda verde é ruído);
+     * - dentro de `layout="list"` → **desligado**, inclusive pra checkbox e radio: em lista a
+     *   única borda do item é a de baixo, a **divisória**, então a cor não contorna o
+     *   selecionado, pinta a linha que o separa do vizinho.
+     *
+     * Ligue explicitamente (aqui ou no grupo) se quiser a linha pintada em lista.
+     */
+    highlightSelected?: boolean;
+    label: ReactNode;
+    description?: ReactNode;
+    /** Ícone entre o controle e o texto. */
+    icon?: ReactNode;
+    /** Controlado. No `radio`, quem manda é o `value` do grupo. */
+    checked?: boolean;
+    /** Não-controlado. Funciona com o destaque, porque ele vem do data-state e não de prop. */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** id do controle — gerado se omitido (o `<label htmlFor>` precisa dele). */
+    id?: string;
+    className?: string;
+}
+export interface CardOptionGroupProps {
+    /** Aplicado a todos os filhos. `radio` faz o grupo virar `RadioGroup` do Radix. */
+    type?: CardOptionType;
+    size?: CardOptionSize;
+    orientation?: CardOptionOrientation;
+    layout?: CardOptionLayout;
+    /**
+     * Liga/desliga o destaque de selecionado (fundo + cor de borda) em todos os filhos de uma
+     * vez. Omitido → cada item usa o default do contexto (ver `CardOptionProps`); em
+     * `layout="list"` esse default é **desligado**, e é aqui que se liga.
+     */
+    highlightSelected?: boolean;
+    /** Só `type="radio"`: valor selecionado (controlado). */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Só `type="radio"`: nome do campo no submit nativo. */
+    name?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=card-option.types.d.ts.map

package/dist-lib/src/components/ui/CardOption/card-option.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-option.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/CardOption/card-option.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,0EAA0E;AAC1E,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7D,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC;AAErE,iEAAiE;AACjE,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;AAEnF,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,mFAAmF;IACnF,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist-lib/src/components/ui/CardOption/index.d.ts

@@ -0,0 +1,4 @@
+export { CardOption, CardOptionGroup } from './card-option';
+export { cardOption, cardOptionGroup } from './card-option.styles';
+export type { CardOptionProps, CardOptionGroupProps, CardOptionType, CardOptionSize, CardOptionOrientation, CardOptionLayout, } from './card-option.types';
+//# sourceMappingURL=index.d.ts.map

package/dist-lib/src/components/ui/CardOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/CardOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACnE,YAAY,EACV,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC"}

package/dist-lib/src/components/ui/ColorPicker/color-picker.styles.d.ts

@@ -21,6 +21,12 @@ import { VariantProps } from '../../../utils/tv';
  */
 export declare const colorPickerStyles: import('tailwind-variants').TVReturnType<{
     size: {
+        xxs: {
+            swatch: string;
+        };
+        xs: {
+            swatch: string;
+        };
         sm: {
             swatch: string;
         };
@@ -58,6 +64,12 @@ export declare const colorPickerStyles: import('tailwind-variants').TVReturnType
     customRow: string;
 }, undefined, {
     size: {
+        xxs: {
+            swatch: string;
+        };
+        xs: {
+            swatch: string;
+        };
         sm: {
             swatch: string;
         };
@@ -95,6 +107,12 @@ export declare const colorPickerStyles: import('tailwind-variants').TVReturnType
     customRow: string;
 }, import('tailwind-variants').TVReturnType<{
     size: {
+        xxs: {
+            swatch: string;
+        };
+        xs: {
+            swatch: string;
+        };
         sm: {
             swatch: string;
         };

package/dist-lib/src/components/ui/ColorPicker/color-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/ColorPicker/color-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmD5B,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"color-picker.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/ColorPicker/color-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwD5B,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist-lib/src/components/ui/ColorPicker/color-picker.types.d.ts

@@ -17,7 +17,10 @@ export interface ColorPickerProps {
     id?: string;
     /** Estado semântico — colore SÓ a borda do trigger swatch. Default `"default"`. */
     state?: ColorPickerState;
-    /** Tamanho do trigger. `sm` = form-md (36px) · `md` = form-lg (40px, default). */
+    /**
+     * Tamanho do trigger — **mesma escala do `Input`**, e repassado a ele:
+     * `xxs` 28px · `xs` 32px · `sm` 36px · `md` 40px (default).
+     */
     size?: ColorPickerSize;
     /** Desabilita o seletor inteiro. */
     disabled?: boolean;

package/dist-lib/src/components/ui/ColorPicker/color-picker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/ColorPicker/color-picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAErE,+DAA+D;AAC/D,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7E,qDAAqD;AACrD,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,6DAA6D;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mFAAmF;IACnF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,kFAAkF;IAClF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"color-picker.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/ColorPicker/color-picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAErE,+DAA+D;AAC/D,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7E,qDAAqD;AACrD,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,6DAA6D;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mFAAmF;IACnF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snksergio/design-system",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "//distribuicao": "Canal PRIMARIO = registry shadcn (copy-in) + CLI @snksergio/create-design-system; sobe sozinho no merge (Vercel). Canal SECUNDARIO = este pacote npm (@snksergio/design-system), publicado por passo MANUAL do mantenedor, entao costuma ficar atras do registry. SECUNDARIO descreve a ORDEM DE PUBLICACAO, nao o nivel de suporte: NAO e depreciado, e desde a 0.37.0 entrega 41 dos 42 componentes ui/ no barrel raiz + os 41 primitivos shadcn no subpath ./shadcn (so TabelaTeste, demo interno, fica de fora). Publish so pelo Passo 7 do .claude/skills/ds-dev/release.md (valida com `npm run lib:verify`, pede o token, publica, revoga). Ver DISTRIBUICAO.md.",
   "description": "iGreen Design System — internal library for SaaS CRM, admin panels and dashboards. React 19 + Tailwind v4 + Shadcn + Radix.",
   "license": "UNLICENSED",