@snksergio/design-system 0.49.0 → 0.50.0

package/dist-lib/index.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const panel = require("./chunks/panel-57Pt_bL9.cjs");
+const panel = require("./chunks/panel-Bly-rNP9.cjs");
 const useTheme = require("./chunks/useTheme-Dh3POjCr.cjs");
 const avatar = require("./chunks/avatar-DAmZ7fBZ.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const sheet = require("./chunks/sheet-BZlQ0gKA.cjs");
+const sheet = require("./chunks/sheet-rg6uupt1.cjs");
+const toggleGroup = require("./chunks/toggle-group-C9rrkkmh.cjs");
 const lucideReact = require("lucide-react");
-const toggleGroup = require("./chunks/toggle-group-DkCrzjfE.cjs");
 const input = require("./chunks/input-Ci_2-5Te.cjs");
 const kpiDelta = require("./chunks/kpi-delta-1-gsPFvU.cjs");
 const pageHeader = require("./chunks/page-header-DrKDiVFN.cjs");
@@ -36,76 +36,325 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const RechartsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RechartsPrimitive);
-const cardCheckbox = avatar.tv({
+const cardOption = avatar.tv({
   slots: {
     root: [
-      "flex items-center gap-gp-lg w-full",
-      "p-pad-xl rounded-radius-lg border text-left cursor-pointer",
+      "flex w-full items-center",
+      "border text-left cursor-pointer",
       "transition-[border-color,background-color,box-shadow] duration-150",
-      "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
+      // O anel é do CARD, disparado pelo foco do controle dentro dele.
+      "has-[:focus-visible]:ring-4 has-[:focus-visible]:ring-ring-brand"
     ],
-    body: "flex flex-col flex-1 min-w-0 gap-gp-2xs",
-    label: "text-body-sm font-semibold text-fg-default leading-tight truncate",
-    description: "text-caption-md text-fg-muted"
+    control: "shrink-0",
+    // Piso de 20px nos dois eixos: ícone menor que isso não se lê ao lado de um texto de
+    // 13px, e o `place-items-center` mantém centrado quando o conteúdo é menor que a caixa.
+    iconWrap: "grid shrink-0 place-items-center min-h-comp-2xs min-w-comp-2xs",
+    body: "flex min-w-0 flex-1 flex-col gap-gp-2xs",
+    label: "truncate font-semibold leading-tight text-fg-default",
+    description: "text-fg-muted"
   },
   variants: {
-    selected: {
-      true: { root: "border-border-brand bg-bg-success-muted shadow-sh-sm" },
+    size: {
+      sm: {
+        root: "p-pad-md gap-gp-md rounded-radius-md",
+        label: "text-body-sm",
+        description: "text-caption-sm"
+      },
+      md: {
+        root: "p-pad-xl gap-gp-lg rounded-radius-lg",
+        label: "text-body-sm",
+        description: "text-caption-md"
+      },
+      lg: {
+        root: "p-pad-2xl gap-gp-xl rounded-radius-xl",
+        label: "text-body-md",
+        description: "text-caption-md"
+      }
+    },
+    /**
+     * 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: "order-last" }
+    },
+    /**
+     * 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: [
+          "border-border-default bg-bg-surface hover:border-border-input hover:bg-bg-muted",
+          "has-[[data-state=checked]]:border-border-brand",
+          "has-[[data-state=checked]]:bg-bg-success-muted",
+          "has-[[data-state=checked]]:shadow-sh-sm"
+        ]
+      },
       false: {
         root: "border-border-default bg-bg-surface hover:border-border-input hover:bg-bg-muted"
       }
     },
+    /**
+     * 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: "rounded-radius-none border-x-0 border-t-0 border-b last:border-b-0"
+      }
+    },
     disabled: {
+      // Não existe token bg/border de disabled no DS — o padrão é opacidade.
       true: { root: "opacity-50 cursor-not-allowed pointer-events-none" }
     }
   },
+  compoundVariants: [
+    /**
+     * Em LISTA com destaque ligado, a sombra sai.
+     *
+     * `shadow-sh-sm` num card solto o levanta da página; numa linha de lista ele vaza por
+     * cima da linha vizinha e some atrás do `overflow-hidden` do grupo — sombra dentro de
+     * caixa cortada é ruído, não elevação. Fundo e cor de borda continuam (é justamente o que
+     * o `highlightSelected` promete); só a elevação não faz sentido aqui.
+     */
+    {
+      inList: true,
+      highlight: true,
+      class: { root: "has-[[data-state=checked]]:shadow-sh-none" }
+    },
+    // disabled SEMPRE por último (L-006), senão as classes de selected/hover o sobrescrevem
+    {
+      disabled: true,
+      class: { root: "border-border-default bg-bg-surface hover:bg-bg-surface" }
+    }
+  ],
   defaultVariants: {
-    selected: false
+    size: "md",
+    orientation: "left",
+    highlight: true
   }
 });
-const CardCheckbox = React.forwardRef(
-  ({
+const cardOptionGroup = avatar.tv({
+  base: "flex w-full flex-col",
+  variants: {
+    layout: {
+      spaced: "gap-gp-lg",
+      /**
+       * 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: "gap-0 overflow-hidden border border-border-default"
+    },
+    size: {
+      // O radius do grupo acompanha o do item, senão o canto da lista destoa do card solto.
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    disabled: {
+      true: "opacity-50 pointer-events-none"
+    }
+  },
+  compoundVariants: [
+    { layout: "list", size: "sm", class: "rounded-radius-md" },
+    { layout: "list", size: "md", class: "rounded-radius-lg" },
+    { layout: "list", size: "lg", class: "rounded-radius-xl" }
+  ],
+  defaultVariants: {
+    layout: "spaced",
+    size: "md"
+  }
+});
+const PADRAO_POR_TIPO = {
+  checkbox: { orientation: "left", highlightSelected: true },
+  radio: { orientation: "left", highlightSelected: true },
+  switch: { orientation: "right", highlightSelected: false }
+};
+const CardOptionCtx = React.createContext(null);
+const CardOptionGroup = React.forwardRef(
+  function CardOptionGroup2({
+    type = "checkbox",
+    size = "md",
+    orientation,
+    layout = "spaced",
+    highlightSelected,
+    value,
+    defaultValue,
+    onValueChange,
+    name,
+    disabled,
+    children,
+    className,
+    ...rest
+  }, ref) {
+    const classes = cardOptionGroup({ layout, size, disabled: disabled ? true : void 0 });
+    const ctx = { type, size, orientation, layout, highlightSelected, disabled };
+    if (type === "radio") {
+      return /* @__PURE__ */ jsxRuntime.jsx(CardOptionCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+        toggleGroup.RadioGroup,
+        {
+          ref,
+          value,
+          defaultValue,
+          onValueChange,
+          name,
+          disabled,
+          className: avatar.cn(classes, className),
+          ...rest,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(CardOptionCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: avatar.cn(classes, className), ...rest, children }) });
+  }
+);
+const CardOption = React.forwardRef(
+  function CardOption2({
+    type: typeProp,
+    value,
+    size: sizeProp,
+    orientation: orientationProp,
+    highlightSelected: highlightProp,
     label,
     description: description2,
     icon,
     checked,
-    disabled,
+    defaultChecked,
+    onCheckedChange,
+    disabled: disabledProp,
+    id: idProp,
     className,
-    ...checkboxProps
-  }, ref) => {
+    ...rest
+  }, ref) {
+    const ctx = React.useContext(CardOptionCtx);
     const autoId = React.useId();
-    const isSelected = checked === true;
-    const styles2 = cardCheckbox({
-      selected: isSelected,
+    const id = idProp ?? autoId;
+    const type = typeProp ?? ctx?.type ?? "checkbox";
+    const size = sizeProp ?? ctx?.size ?? "md";
+    const disabled = disabledProp ?? ctx?.disabled;
+    const padroes = PADRAO_POR_TIPO[type];
+    const orientation = orientationProp ?? ctx?.orientation ?? padroes.orientation;
+    const emLista = ctx?.layout === "list";
+    const highlight = highlightProp ?? ctx?.highlightSelected ?? (emLista ? false : padroes.highlightSelected);
+    const styles2 = cardOption({
+      size,
+      orientation,
+      highlight,
+      inList: emLista ? true : void 0,
       disabled: disabled ? true : void 0
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
+    const controle = type === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
+      toggleGroup.RadioGroupItem,
       {
-        htmlFor: autoId,
-        className: [styles2.root(), className].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            sheet.Checkbox,
-            {
-              ref,
-              id: autoId,
-              checked,
-              disabled,
-              ...checkboxProps
-            }
-          ),
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid place-items-center shrink-0", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.body(), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.label(), children: label }),
-            description2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.description(), children: description2 })
-          ] })
-        ]
+        ref,
+        id,
+        value: value ?? "",
+        disabled,
+        className: styles2.control(),
+        ...rest
+      }
+    ) : type === "switch" ? /* @__PURE__ */ jsxRuntime.jsx(
+      sheet.Switch,
+      {
+        ref,
+        id,
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        disabled,
+        className: styles2.control(),
+        ...rest
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      sheet.Checkbox,
+      {
+        ref,
+        id,
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        disabled,
+        className: styles2.control(),
+        ...rest
       }
     );
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: avatar.cn(styles2.root(), className), children: [
+      controle,
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.iconWrap(), "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.body(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.label(), children: label }),
+        description2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.description(), children: description2 })
+      ] })
+    ] });
   }
 );
-CardCheckbox.displayName = "CardCheckbox";
+const CardCheckbox = React.forwardRef(
+  function CardCheckbox2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CardOption, { ref, type: "checkbox", ...props });
+  }
+);
+const cardCheckbox = avatar.tv({
+  slots: {
+    root: [
+      "flex items-center gap-gp-lg w-full",
+      "p-pad-xl rounded-radius-lg border text-left cursor-pointer",
+      "transition-[border-color,background-color,box-shadow] duration-150",
+      "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
+    ],
+    body: "flex flex-col flex-1 min-w-0 gap-gp-2xs",
+    label: "text-body-sm font-semibold text-fg-default leading-tight truncate",
+    description: "text-caption-md text-fg-muted"
+  },
+  variants: {
+    selected: {
+      true: { root: "border-border-brand bg-bg-success-muted shadow-sh-sm" },
+      false: {
+        root: "border-border-default bg-bg-surface hover:border-border-input hover:bg-bg-muted"
+      }
+    },
+    disabled: {
+      true: { root: "opacity-50 cursor-not-allowed pointer-events-none" }
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+});
 const colorPickerStyles = avatar.tv({
   slots: {
     root: "inline-flex w-full items-center gap-gp-md",
@@ -8175,12 +8424,12 @@ exports.PanelCloseAction = sheet.SheetClose;
 exports.PanelContent = sheet.SheetContent;
 exports.PanelRoot = sheet.Sheet;
 exports.PanelTrigger = sheet.SheetTrigger;
+exports.Badge = toggleGroup.Badge;
+exports.badgeVariants = toggleGroup.badgeVariants;
 Object.defineProperty(exports, "MessageReplyIcon", {
   enumerable: true,
   get: () => lucideReact.Reply
 });
-exports.Badge = toggleGroup.Badge;
-exports.badgeVariants = toggleGroup.badgeVariants;
 exports.Input = input.Input;
 exports.inputVariants = input.inputVariants;
 exports.Kpi = kpiDelta.Kpi;
@@ -8190,6 +8439,8 @@ exports.PageHeader = pageHeader.PageHeader;
 exports.pageHeaderStyles = pageHeader.pageHeaderStyles;
 exports.BRANDS = BRANDS;
 exports.CardCheckbox = CardCheckbox;
+exports.CardOption = CardOption;
+exports.CardOptionGroup = CardOptionGroup;
 exports.ChartContainer = ChartContainer;
 exports.ChartLegend = ChartLegend;
 exports.ChartLegendContent = ChartLegendContent;
@@ -8223,6 +8474,8 @@ exports.ToolbarMobileSection = ToolbarMobileSection;
 exports.ToolbarMobileSheet = ToolbarMobileSheet;
 exports.actionColumn = actionColumn;
 exports.cardCheckbox = cardCheckbox;
+exports.cardOption = cardOption;
+exports.cardOptionGroup = cardOptionGroup;
 exports.colorPickerStyles = colorPickerStyles;
 exports.conversationListItemStyles = conversationListItemStyles;
 exports.currencyColumn = currencyColumn;