@snksergio/design-system 0.48.0 → 0.50.0

package/dist-lib/index.mjs

@@ -1,18 +1,18 @@
-import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List } from "./chunks/panel-DlZeQw7G.mjs";
-import { t, A, B, u, C, v, w, x, D, y, z, E, G, H, I, J, K, M, d, N, O, Q, R, S, F, b, U, c, V, W, P, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, p, ai, aj, ak, al, am } from "./chunks/panel-DlZeQw7G.mjs";
+import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List } from "./chunks/panel-DA6K3a3n.mjs";
+import { t, A, B, u, C, v, w, x, D, y, z, E, G, H, I, J, K, M, d, N, O, Q, R, S, F, b, U, c, V, W, P, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, p, ai, aj, ak, al, am } from "./chunks/panel-DA6K3a3n.mjs";
 import { C as Chip } from "./chunks/useTheme-Bk8AYqLr.mjs";
 import { A as A2, a, b as b2, H as H2, c as c2, d as d2, e, f, g, M as M2, S as S2, h, i, j, k, l, m, n, U as U2, o, p as p2, q, r, s, t as t2, v as v2, w as w2, u as u2 } from "./chunks/useTheme-Bk8AYqLr.mjs";
-import { a8 as tv, V as Popover, Z as PopoverTrigger, Y as PopoverContent, a7 as Button, D as Dialog, w as DialogTrigger, c as cn, p as DialogContent, v as DialogTitle, W as PopoverAnchor, o as DialogClose, q as DialogDescription, x as DropdownMenu, O as DropdownMenuTrigger, z as DropdownMenuContent, J as DropdownMenuSeparator, E as DropdownMenuItem } from "./chunks/avatar-FPbG1TRy.mjs";
+import { a8 as tv, c as cn, V as Popover, Z as PopoverTrigger, Y as PopoverContent, a7 as Button, D as Dialog, w as DialogTrigger, p as DialogContent, v as DialogTitle, W as PopoverAnchor, o as DialogClose, q as DialogDescription, x as DropdownMenu, O as DropdownMenuTrigger, z as DropdownMenuContent, J as DropdownMenuSeparator, E as DropdownMenuItem } from "./chunks/avatar-FPbG1TRy.mjs";
 import { P as P2, Q as Q2, R as R2, S as S3, T, U as U3, y as y2, F as F2, H as H3, I as I2, a9 as a92, a6 as a62 } from "./chunks/avatar-FPbG1TRy.mjs";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { forwardRef, useId, useState, Fragment as Fragment$1, isValidElement, useCallback, useMemo, createElement, useRef, useEffect, useLayoutEffect } from "react";
-import { l as Checkbox, C as Calendar, T as Textarea } from "./chunks/sheet-7v5vamnP.mjs";
-import { G as G2, H as H4, F as F3, O as O2 } from "./chunks/sheet-7v5vamnP.mjs";
+import { createContext, forwardRef, useContext, useId, useState, Fragment as Fragment$1, isValidElement, useCallback, useMemo, createElement, useRef, useEffect, useLayoutEffect } from "react";
+import { Q as Switch, l as Checkbox, C as Calendar, T as Textarea } from "./chunks/sheet-DIpYkRYS.mjs";
+import { G as G2, H as H4, F as F3, O as O2 } from "./chunks/sheet-DIpYkRYS.mjs";
+import { av as RadioGroup, aw as RadioGroupItem, az as Separator, aA as Skeleton } from "./chunks/toggle-group-mXbG8_Jm.mjs";
+import { B as B2, aJ } from "./chunks/toggle-group-mXbG8_Jm.mjs";
 import { Check, MoreHorizontal, SlidersHorizontal, Calendar as Calendar$1, AlertCircle, CheckCheck, Clock, MoreVertical, Ban, X as X2, CalendarDays, ChevronDown, ChevronLeft, ChevronRight, RefreshCw, OctagonX, TriangleAlert, CircleCheck, Info, Bell } from "lucide-react";
 import { Reply } from "lucide-react";
-import { ay as Separator, az as Skeleton } from "./chunks/toggle-group-CnAN6ZnT.mjs";
-import { B as B2, aI } from "./chunks/toggle-group-CnAN6ZnT.mjs";
 import { I as Input } from "./chunks/input-tjIT8HNE.mjs";
 import { i as i2 } from "./chunks/input-tjIT8HNE.mjs";
 import { a as a10, b as b3, K as K2 } from "./chunks/kpi-delta-BRTgTaO1.mjs";
@@ -24,76 +24,325 @@ import { toast as toast$1 } from "sonner";
 import "@radix-ui/react-aspect-ratio";
 import "react-day-picker";
 import "@radix-ui/react-collapsible";
-const cardCheckbox = tv({
+const cardOption = 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 = forwardRef(
-  ({
+const cardOptionGroup = 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 = createContext(null);
+const CardOptionGroup = 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__ */ jsx(CardOptionCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          ref,
+          value,
+          defaultValue,
+          onValueChange,
+          name,
+          disabled,
+          className: cn(classes, className),
+          ...rest,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(CardOptionCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn(classes, className), ...rest, children }) });
+  }
+);
+const CardOption = 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 = useContext(CardOptionCtx);
     const autoId = 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__ */ jsxs(
-      "label",
+    const controle = type === "radio" ? /* @__PURE__ */ jsx(
+      RadioGroupItem,
       {
-        htmlFor: autoId,
-        className: [styles2.root(), className].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              ref,
-              id: autoId,
-              checked,
-              disabled,
-              ...checkboxProps
-            }
-          ),
-          icon && /* @__PURE__ */ jsx("span", { className: "grid place-items-center shrink-0", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ jsxs("div", { className: styles2.body(), children: [
-            /* @__PURE__ */ jsx("span", { className: styles2.label(), children: label }),
-            description2 && /* @__PURE__ */ jsx("span", { className: styles2.description(), children: description2 })
-          ] })
-        ]
+        ref,
+        id,
+        value: value ?? "",
+        disabled,
+        className: styles2.control(),
+        ...rest
+      }
+    ) : type === "switch" ? /* @__PURE__ */ jsx(
+      Switch,
+      {
+        ref,
+        id,
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        disabled,
+        className: styles2.control(),
+        ...rest
+      }
+    ) : /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        ref,
+        id,
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        disabled,
+        className: styles2.control(),
+        ...rest
       }
     );
+    return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: cn(styles2.root(), className), children: [
+      controle,
+      icon && /* @__PURE__ */ jsx("span", { className: styles2.iconWrap(), "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: styles2.body(), children: [
+        /* @__PURE__ */ jsx("span", { className: styles2.label(), children: label }),
+        description2 && /* @__PURE__ */ jsx("span", { className: styles2.description(), children: description2 })
+      ] })
+    ] });
   }
 );
-CardCheckbox.displayName = "CardCheckbox";
+const CardCheckbox = forwardRef(
+  function CardCheckbox2(props, ref) {
+    return /* @__PURE__ */ jsx(CardOption, { ref, type: "checkbox", ...props });
+  }
+);
+const cardCheckbox = 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 = tv({
   slots: {
     root: "inline-flex w-full items-center gap-gp-md",
@@ -119,7 +368,12 @@ const colorPickerStyles = tv({
     customRow: "flex flex-col gap-gp-md"
   },
   variants: {
+    /* Espelha a escala do Input (`shadcn/input.tsx`) degrau por degrau. O `size` é
+       repassado pro Input interno, então uma escala menor aqui deixava combinação válida
+       no Input inalcançável pelo ColorPicker — era o caso de `xxs` e `xs`. */
     size: {
+      xxs: { swatch: "size-form-xs" },
+      xs: { swatch: "size-form-sm" },
       sm: { swatch: "size-form-md" },
       md: { swatch: "size-form-lg" }
     },
@@ -8048,6 +8302,8 @@ export {
   Button,
   ButtonGroup,
   CardCheckbox,
+  CardOption,
+  CardOptionGroup,
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
@@ -8179,9 +8435,11 @@ export {
   ae as ViewsPopover,
   actionColumn,
   af as avatarVariants,
-  aI as badgeVariants,
+  aJ as badgeVariants,
   a92 as buttonVariants,
   cardCheckbox,
+  cardOption,
+  cardOptionGroup,
   o as chipCount,
   p2 as chipVariants,
   colorPickerStyles,