@snksergio/design-system 0.39.1 → 0.41.0

package/dist-lib/chunks/{tooltip-DVxIC67b.mjs → toggle-group-XMO6ReVo.mjs}

@@ -1,13 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { c as cn, t as tv, B as Button } from "./avatar-DQYiVRlE.mjs";
+import { c as cn, t as tv, B as Button } from "./avatar-DFWEwBKu.mjs";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown, MoreHorizontal, ChevronRight, ArrowLeft, ArrowRight, Check, Circle, Dot } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";
 import useEmblaCarousel from "embla-carousel-react";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Drawer as Drawer$1 } from "vaul";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
@@ -22,7 +21,6 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 const Separator = React.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
@@ -520,9 +518,6 @@ const CarouselNext = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselNext.displayName = "CarouselNext";
-const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 const ContextMenu = ContextMenuPrimitive.Root;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
@@ -759,43 +754,153 @@ const HoverCardContent = React.forwardRef(({ className, align = "center", sideOf
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
-  OTPInput,
+const DEFAULTS = {
+  variant: "connected",
+  size: "md",
+  state: "default"
+};
+const InputOTPStyleContext = React.createContext(DEFAULTS);
+const slotVariants = cva(
+  [
+    "relative flex items-center justify-center",
+    // Mesma superfície do input.tsx — ver o cabeçalho.
+    "bg-bg-input dark:bg-bg-muted",
+    "text-fg-default tabular-nums",
+    "transition-[border-color,box-shadow,background-color] outline-none"
+  ],
   {
-    ref,
-    containerClassName: cn(
-      "flex items-center gap-gp-xs has-[:disabled]:opacity-50",
-      containerClassName
-    ),
-    className: cn("disabled:cursor-not-allowed", className),
-    ...props
+    variants: {
+      // Quadrado: a altura vem do MESMO token do Input, e a largura acompanha
+      // pra o slot não virar retângulo. `size-form-*` = height e width juntos.
+      size: {
+        xxs: "size-form-xs text-body-sm",
+        xs: "size-form-sm text-body-sm",
+        sm: "size-form-md text-body-md",
+        md: "size-form-lg text-body-md"
+      },
+      variant: {
+        // Colados: cada slot desenha 3 lados; o 1º devolve a borda esquerda, e
+        // as pontas recebem radius. Sem isso a fileira mostra borda dupla entre
+        // slots vizinhos.
+        connected: "border-y border-r first:border-l",
+        outlined: "border",
+        filled: "border border-transparent",
+        // Sem fundo: a linha de baixo É o campo. `rounded-none` explícito
+        // porque o radius das pontas do `connected` viria do grupo.
+        underline: "border-0 border-b-2 rounded-none bg-transparent dark:bg-transparent"
+      },
+      // Cor de borda e anel de foco — os MESMOS pares do Input.
+      state: {
+        default: "border-border-input",
+        error: "border-border-danger-muted",
+        warning: "border-border-warning-muted",
+        success: "border-border-success-muted"
+      },
+      /** Slot que o cursor está ocupando. O Radix não dá `:focus` aqui: o input
+       *  real é único e invisível, então o "foco" é estado do contexto do
+       *  `input-otp`, não do DOM. Daí ser variante e não `focus-visible:`. */
+      active: { true: "z-10", false: "" }
+    },
+    compoundVariants: [
+      // Foco = borda verde + anel, igual ao `focus-visible` do Input. Em erro/
+      // aviso/sucesso a borda semântica MANDA (o usuário precisa continuar
+      // vendo que o campo está inválido enquanto digita), e só o anel muda.
+      { active: true, state: "default", class: "border-border-brand shadow-sh-ring" },
+      { active: true, state: "error", class: "shadow-sh-ring-danger" },
+      { active: true, state: "warning", class: "shadow-sh-ring-warning" },
+      { active: true, state: "success", class: "shadow-sh-ring-success" },
+      // Hover só onde há superfície pra reagir.
+      { variant: "connected", class: "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover" },
+      { variant: "outlined", class: "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover" },
+      { variant: "filled", class: "bg-bg-muted dark:bg-bg-muted hover:bg-bg-muted-hover" }
+    ],
+    defaultVariants: { size: "md", variant: "connected", state: "default", active: false }
   }
-));
+);
+const groupVariants = cva("flex items-center", {
+  variants: {
+    variant: {
+      // Colados: zero gap, e o radius das pontas é do GRUPO (o slot não sabe se
+      // é primeiro/último de um grupo quando há mais de um grupo na tela).
+      connected: "gap-0 [&>*:first-child]:rounded-l-radius-lg [&>*:last-child]:rounded-r-radius-lg",
+      outlined: "gap-gp-md [&>*]:rounded-radius-lg",
+      filled: "gap-gp-md [&>*]:rounded-radius-lg",
+      underline: "gap-gp-md"
+    },
+    // Radius acompanha o size, como no Input: os dois menores usam radius-md.
+    size: { xxs: "", xs: "", sm: "", md: "" }
+  },
+  compoundVariants: [
+    { variant: "connected", size: "xxs", class: "[&>*:first-child]:rounded-l-radius-md [&>*:last-child]:rounded-r-radius-md" },
+    { variant: "connected", size: "xs", class: "[&>*:first-child]:rounded-l-radius-md [&>*:last-child]:rounded-r-radius-md" },
+    { variant: "outlined", size: "xxs", class: "[&>*]:rounded-radius-md" },
+    { variant: "outlined", size: "xs", class: "[&>*]:rounded-radius-md" },
+    { variant: "filled", size: "xxs", class: "[&>*]:rounded-radius-md" },
+    { variant: "filled", size: "xs", class: "[&>*]:rounded-radius-md" }
+  ],
+  defaultVariants: { variant: "connected", size: "md" }
+});
+const InputOTP = React.forwardRef(
+  ({ className, containerClassName, variant, size, state, ...props }, ref) => {
+    const ctx = React.useMemo(
+      () => ({
+        variant: variant ?? DEFAULTS.variant,
+        size: size ?? DEFAULTS.size,
+        state: state ?? DEFAULTS.state
+      }),
+      [variant, size, state]
+    );
+    return /* @__PURE__ */ jsx(InputOTPStyleContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      OTPInput,
+      {
+        ref,
+        containerClassName: cn(
+          "flex items-center gap-gp-md has-[:disabled]:opacity-50",
+          containerClassName
+        ),
+        className: cn("disabled:cursor-not-allowed", className),
+        ...props
+      }
+    ) });
+  }
+);
 InputOTP.displayName = "InputOTP";
-const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
-InputOTPGroup.displayName = "InputOTPGroup";
-const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cn(
-        "relative flex size-form-lg items-center justify-center border-y border-r border-border-default text-body-md text-fg-default transition-all first:rounded-l-radius-md first:border-l last:rounded-r-radius-md",
-        isActive && "z-10 ring-4 ring-ring-brand",
-        className
-      ),
-      ...props,
-      children: [
-        char,
-        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-fg-default duration-1000" }) })
-      ]
-    }
-  );
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => {
+  const { variant, size } = React.useContext(InputOTPStyleContext);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(groupVariants({ variant, size }), className), ...props });
 });
+InputOTPGroup.displayName = "InputOTPGroup";
+const InputOTPSlot = React.forwardRef(
+  ({ index, className, variant, size, state, ...props }, ref) => {
+    const ctx = React.useContext(InputOTPStyleContext);
+    const otp = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = otp.slots[index];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "input-otp-slot",
+        "data-active": isActive ? "true" : void 0,
+        className: cn(
+          slotVariants({
+            variant: variant ?? ctx.variant,
+            size: size ?? ctx.size,
+            state: state ?? ctx.state,
+            active: isActive
+          }),
+          className
+        ),
+        ...props,
+        children: [
+          char,
+          hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-fg-default duration-1000" }) })
+        ]
+      }
+    );
+  }
+);
 InputOTPSlot.displayName = "InputOTPSlot";
-const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", className: "text-fg-muted", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
+const InputOTPSeparator = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", className: cn("text-fg-muted", className), ...props, children: children ?? /* @__PURE__ */ jsx(Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 const labelVariants = cva(
   "text-body-sm font-semibold tracking-[0.01em] text-fg-default dark:text-fg-muted leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -1302,127 +1407,83 @@ const ToggleGroupItem = React.forwardRef(({ className, children, variant, size,
   );
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-const TooltipProvider = TooltipPrimitive.Provider;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const Tooltip = ({ children, ...props }) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props, children }) });
-Tooltip.displayName = "Tooltip";
-const TooltipContent = React.forwardRef(({ className, sideOffset = 6, showArrow = true, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 max-w-[16rem] select-none",
-      "bg-bg-emphasis text-fg-default",
-      "rounded-radius-md px-pad-lg py-pad-xs",
-      "text-caption-sm",
-      "shadow-sh-md",
-      "origin-[--radix-tooltip-content-transform-origin]",
-      "data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      showArrow && /* @__PURE__ */ jsx(
-        TooltipPrimitive.Arrow,
-        {
-          width: 11,
-          height: 5,
-          className: "fill-bg-emphasis"
-        }
-      )
-    ]
-  }
-) }));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export {
-  DrawerTrigger as $,
+  HoverCardTrigger as $,
   Accordion as A,
   Badge as B,
   Card as C,
-  ContextMenu as D,
-  ContextMenuCheckboxItem as E,
-  ContextMenuContent as F,
-  ContextMenuGroup as G,
-  ContextMenuItem as H,
-  ContextMenuLabel as I,
-  ContextMenuPortal as J,
-  ContextMenuRadioGroup as K,
-  ContextMenuRadioItem as L,
-  ContextMenuSeparator as M,
-  ContextMenuShortcut as N,
-  ContextMenuSub as O,
-  ContextMenuSubContent as P,
-  ContextMenuSubTrigger as Q,
-  ContextMenuTrigger as R,
-  Drawer as S,
-  DrawerClose as T,
-  DrawerContent as U,
-  DrawerDescription as V,
-  DrawerFooter as W,
-  DrawerHeader as X,
-  DrawerOverlay as Y,
-  DrawerPortal as Z,
-  DrawerTitle as _,
+  ContextMenuGroup as D,
+  ContextMenuItem as E,
+  ContextMenuLabel as F,
+  ContextMenuPortal as G,
+  ContextMenuRadioGroup as H,
+  ContextMenuRadioItem as I,
+  ContextMenuSeparator as J,
+  ContextMenuShortcut as K,
+  ContextMenuSub as L,
+  ContextMenuSubContent as M,
+  ContextMenuSubTrigger as N,
+  ContextMenuTrigger as O,
+  Drawer as P,
+  DrawerClose as Q,
+  DrawerContent as R,
+  DrawerDescription as S,
+  DrawerFooter as T,
+  DrawerHeader as U,
+  DrawerOverlay as V,
+  DrawerPortal as W,
+  DrawerTitle as X,
+  DrawerTrigger as Y,
+  HoverCard as Z,
+  HoverCardContent as _,
   AccordionContent as a,
-  HoverCard as a0,
-  HoverCardContent as a1,
-  HoverCardTrigger as a2,
-  InputOTP as a3,
-  InputOTPGroup as a4,
-  InputOTPSeparator as a5,
-  InputOTPSlot as a6,
-  Label as a7,
-  Menubar as a8,
-  MenubarCheckboxItem as a9,
-  ScrollBar as aA,
-  Separator as aB,
-  Slider as aC,
-  Tabs as aD,
-  TabsContent as aE,
-  TabsList as aF,
-  TabsTrigger as aG,
-  Toggle as aH,
-  ToggleGroup as aI,
-  ToggleGroupItem as aJ,
-  Tooltip as aK,
-  TooltipContent as aL,
-  TooltipProvider as aM,
-  TooltipTrigger as aN,
-  badgeVariants as aO,
-  navigationMenuTriggerStyle as aP,
-  toggleVariants as aQ,
-  MenubarContent as aa,
-  MenubarGroup as ab,
-  MenubarItem as ac,
-  MenubarLabel as ad,
-  MenubarMenu as ae,
-  MenubarPortal as af,
-  MenubarRadioGroup as ag,
-  MenubarRadioItem as ah,
-  MenubarSeparator as ai,
-  MenubarShortcut as aj,
-  MenubarSub as ak,
-  MenubarSubContent as al,
-  MenubarSubTrigger as am,
-  MenubarTrigger as an,
-  NavigationMenu as ao,
-  NavigationMenuContent as ap,
-  NavigationMenuIndicator as aq,
-  NavigationMenuItem as ar,
-  NavigationMenuLink as as,
-  NavigationMenuList as at,
-  NavigationMenuTrigger as au,
-  NavigationMenuViewport as av,
-  Progress as aw,
-  RadioGroup as ax,
-  RadioGroupItem as ay,
-  ScrollArea as az,
+  InputOTP as a0,
+  InputOTPGroup as a1,
+  InputOTPSeparator as a2,
+  InputOTPSlot as a3,
+  Label as a4,
+  Menubar as a5,
+  MenubarCheckboxItem as a6,
+  MenubarContent as a7,
+  MenubarGroup as a8,
+  MenubarItem as a9,
+  Tabs as aA,
+  TabsContent as aB,
+  TabsList as aC,
+  TabsTrigger as aD,
+  Toggle as aE,
+  ToggleGroup as aF,
+  ToggleGroupItem as aG,
+  badgeVariants as aH,
+  navigationMenuTriggerStyle as aI,
+  slotVariants as aJ,
+  toggleVariants as aK,
+  MenubarLabel as aa,
+  MenubarMenu as ab,
+  MenubarPortal as ac,
+  MenubarRadioGroup as ad,
+  MenubarRadioItem as ae,
+  MenubarSeparator as af,
+  MenubarShortcut as ag,
+  MenubarSub as ah,
+  MenubarSubContent as ai,
+  MenubarSubTrigger as aj,
+  MenubarTrigger as ak,
+  NavigationMenu as al,
+  NavigationMenuContent as am,
+  NavigationMenuIndicator as an,
+  NavigationMenuItem as ao,
+  NavigationMenuLink as ap,
+  NavigationMenuList as aq,
+  NavigationMenuTrigger as ar,
+  NavigationMenuViewport as as,
+  Progress as at,
+  RadioGroup as au,
+  RadioGroupItem as av,
+  ScrollArea as aw,
+  ScrollBar as ax,
+  Separator as ay,
+  Slider as az,
   AccordionItem as b,
   AccordionTrigger as c,
   Alert as d,
@@ -1445,8 +1506,8 @@ export {
   CarouselItem as u,
   CarouselNext as v,
   CarouselPrevious as w,
-  Collapsible as x,
-  CollapsibleContent as y,
-  CollapsibleTrigger as z
+  ContextMenu as x,
+  ContextMenuCheckboxItem as y,
+  ContextMenuContent as z
 };
-//# sourceMappingURL=tooltip-DVxIC67b.mjs.map
+//# sourceMappingURL=toggle-group-XMO6ReVo.mjs.map