@snksergio/design-system 0.48.0 → 0.50.0

package/dist-lib/chunks/{toggle-group-CnAN6ZnT.mjs → toggle-group-mXbG8_Jm.mjs}

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { c as cn, a8 as tv, a7 as Button } from "./avatar-FPbG1TRy.mjs";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 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";
@@ -15,12 +16,45 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 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";
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid w-full gap-gp-xl", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "peer relative flex aspect-square size-4 shrink-0 cursor-pointer",
+        "rounded-radius-full",
+        "bg-bg-input dark:bg-bg-muted",
+        "border-[1.5px] border-border-input",
+        "transition-[background-color,border-color,box-shadow] outline-none",
+        "hover:border-border-default",
+        "focus-visible:shadow-sh-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-bg-brand data-[state=checked]:border-border-brand",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex size-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-[6px] rounded-radius-full bg-fg-on-brand" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 const Separator = React.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
@@ -433,12 +467,21 @@ const Carousel = React.forwardRef(
     );
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
     const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [scrollSnaps, setScrollSnaps] = React.useState([]);
     const onSelect = React.useCallback((api2) => {
       if (!api2) {
         return;
       }
       setCanScrollPrev(api2.canScrollPrev());
       setCanScrollNext(api2.canScrollNext());
+      setSelectedIndex(api2.selectedScrollSnap());
+    }, []);
+    const onInit = React.useCallback((api2) => {
+      if (!api2) {
+        return;
+      }
+      setScrollSnaps(api2.scrollSnapList());
     }, []);
     const scrollPrev = React.useCallback(() => {
       api?.scrollPrev();
@@ -446,6 +489,12 @@ const Carousel = React.forwardRef(
     const scrollNext = React.useCallback(() => {
       api?.scrollNext();
     }, [api]);
+    const scrollTo = React.useCallback(
+      (index) => {
+        api?.scrollTo(index);
+      },
+      [api]
+    );
     const handleKeyDown = React.useCallback(
       (event) => {
         if (event.key === "ArrowLeft") {
@@ -468,13 +517,17 @@ const Carousel = React.forwardRef(
       if (!api) {
         return;
       }
+      onInit(api);
       onSelect(api);
+      api.on("reInit", onInit);
       api.on("reInit", onSelect);
       api.on("select", onSelect);
       return () => {
+        api?.off("reInit", onInit);
+        api?.off("reInit", onSelect);
         api?.off("select", onSelect);
       };
-    }, [api, onSelect]);
+    }, [api, onInit, onSelect]);
     return /* @__PURE__ */ jsx(
       CarouselContext.Provider,
       {
@@ -486,7 +539,10 @@ const Carousel = React.forwardRef(
           scrollPrev,
           scrollNext,
           canScrollPrev,
-          canScrollNext
+          canScrollNext,
+          selectedIndex,
+          scrollSnaps,
+          scrollTo
         },
         children: /* @__PURE__ */ jsx(
           "div",
@@ -507,18 +563,53 @@ const Carousel = React.forwardRef(
 Carousel.displayName = "Carousel";
 const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex",
-        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-        className
-      ),
-      ...props
-    }
-  ) });
+  return (
+    /**
+     * A folga de 4px existe pra borda do slide não ser comida pelo corte.
+     *
+     * O Embla posiciona o trilho com `translate` em pixel FRACIONÁRIO, e no padrão de
+     * gutter do shadcn (`-ml-4` no trilho + `pl-4` no item) a borda esquerda do conteúdo
+     * cai **exatamente** sobre o limite do `overflow-hidden`. Medido em 2026-08-24, no
+     * slide 3: limite do clip em 651.5px e a borda do card em 649.99px — 1.5px inteiros
+     * do lado de fora, então a borda de 1px desaparecia. E variava entre medições, porque
+     * depende de onde o Embla para no sub-pixel: às vezes 2px dentro, às vezes fora. Só o
+     * primeiro slide era imune (translate 0, sem fração) — o relato foi exatamente "do
+     * card 2 pra frente".
+     *
+     * `overflow` corta no limite do PADDING box, então o padding dá a folga; a margem
+     * negativa devolve a posição, pra geometria externa não mudar. Não revela o slide
+     * vizinho: o que aparece nessa faixa é o gutter transparente de 16px do item.
+     *
+     * **4px e não 2px** porque o gutter do shadcn é só do lado ESQUERDO (`-ml`/`pl`): a
+     * direita do último card visível encosta no limite por construção. Com 2px, o caso de
+     * `slidesToScroll: 2` media −0.06px de folga na direita na última parada — o mesmo
+     * defeito, menor. Com 4px as duas bordas ficam positivas em todas as paradas.
+     */
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: carouselRef,
+        className: cn(
+          "overflow-hidden",
+          // A folga vai no EIXO que rola: no vertical o gutter é `-mt`/`pt` e quem encosta
+          // no corte é a borda de cima. Padding no eixo errado não conserta nada.
+          orientation === "horizontal" ? "px-sp-xs -mx-sp-xs" : "py-sp-xs -my-sp-xs"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn(
+              "flex",
+              orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    )
+  );
 });
 CarouselContent.displayName = "CarouselContent";
 const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
@@ -589,6 +680,55 @@ const CarouselNext = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselNext.displayName = "CarouselNext";
+const CarouselDots = React.forwardRef(({ className, ...props }, ref) => {
+  const { scrollSnaps, selectedIndex, scrollTo, orientation } = useCarousel();
+  if (scrollSnaps.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": "Posição no carrossel",
+      className: cn(
+        "flex items-center justify-center gap-gp-2xs",
+        orientation === "vertical" && "flex-col",
+        className
+      ),
+      ...props,
+      children: scrollSnaps.map((_, i) => {
+        const atual = i === selectedIndex;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => scrollTo(i),
+            "aria-label": `Ir para ${i + 1} de ${scrollSnaps.length}`,
+            "aria-current": atual ? "true" : void 0,
+            className: cn(
+              "grid size-comp-3xs shrink-0 cursor-pointer place-items-center",
+              "rounded-radius-full",
+              // Padrão 1 — focus estático
+              "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "size-[8px] rounded-radius-full transition-colors",
+                  atual ? "bg-bg-brand" : "bg-bg-emphasis hover:bg-bg-accent"
+                )
+              }
+            )
+          },
+          i
+        );
+      })
+    }
+  );
+});
+CarouselDots.displayName = "CarouselDots";
 const ContextMenu = ContextMenuPrimitive.Root;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
@@ -1274,40 +1414,6 @@ const Progress = React.forwardRef(({ className, value, ...props }, ref) => /* @_
   }
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;
-const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Root,
-    {
-      className: cn("grid w-full gap-gp-xl", className),
-      ...props,
-      ref
-    }
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        "peer relative flex aspect-square size-4 shrink-0 cursor-pointer",
-        "rounded-radius-full",
-        "bg-bg-input dark:bg-bg-muted",
-        "border-[1.5px] border-border-input",
-        "transition-[background-color,border-color,box-shadow] outline-none",
-        "hover:border-border-default",
-        "focus-visible:shadow-sh-ring",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:bg-bg-brand data-[state=checked]:border-border-brand",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex size-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-[6px] rounded-radius-full bg-fg-on-brand" }) })
-    }
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
@@ -1517,83 +1623,84 @@ const ToggleGroupItem = React.forwardRef(({ className, children, variant, size,
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 export {
-  HoverCardTrigger as $,
+  HoverCardContent as $,
   Accordion as A,
   Badge as B,
   Card as C,
-  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 _,
+  ContextMenuContent as D,
+  ContextMenuGroup as E,
+  ContextMenuItem as F,
+  ContextMenuLabel as G,
+  ContextMenuPortal as H,
+  ContextMenuRadioGroup as I,
+  ContextMenuRadioItem as J,
+  ContextMenuSeparator as K,
+  ContextMenuShortcut as L,
+  ContextMenuSub as M,
+  ContextMenuSubContent as N,
+  ContextMenuSubTrigger as O,
+  ContextMenuTrigger as P,
+  Drawer as Q,
+  DrawerClose as R,
+  DrawerContent as S,
+  DrawerDescription as T,
+  DrawerFooter as U,
+  DrawerHeader as V,
+  DrawerOverlay as W,
+  DrawerPortal as X,
+  DrawerTitle as Y,
+  DrawerTrigger as Z,
+  HoverCard as _,
   AccordionContent as a,
-  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,
-  Slider as aA,
-  Tabs as aB,
-  TabsContent as aC,
-  TabsList as aD,
-  TabsTrigger as aE,
-  Toggle as aF,
-  ToggleGroup as aG,
-  ToggleGroupItem as aH,
-  badgeVariants as aI,
-  navigationMenuTriggerStyle as aJ,
-  slotVariants as aK,
-  toggleVariants as aL,
-  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,
-  Skeleton as az,
+  HoverCardTrigger as a0,
+  InputOTP as a1,
+  InputOTPGroup as a2,
+  InputOTPSeparator as a3,
+  InputOTPSlot as a4,
+  Label as a5,
+  Menubar as a6,
+  MenubarCheckboxItem as a7,
+  MenubarContent as a8,
+  MenubarGroup as a9,
+  Skeleton as aA,
+  Slider as aB,
+  Tabs as aC,
+  TabsContent as aD,
+  TabsList as aE,
+  TabsTrigger as aF,
+  Toggle as aG,
+  ToggleGroup as aH,
+  ToggleGroupItem as aI,
+  badgeVariants as aJ,
+  navigationMenuTriggerStyle as aK,
+  slotVariants as aL,
+  toggleVariants as aM,
+  MenubarItem as aa,
+  MenubarLabel as ab,
+  MenubarMenu as ac,
+  MenubarPortal as ad,
+  MenubarRadioGroup as ae,
+  MenubarRadioItem as af,
+  MenubarSeparator as ag,
+  MenubarShortcut as ah,
+  MenubarSub as ai,
+  MenubarSubContent as aj,
+  MenubarSubTrigger as ak,
+  MenubarTrigger as al,
+  NavigationMenu as am,
+  NavigationMenuContent as an,
+  NavigationMenuIndicator as ao,
+  NavigationMenuItem as ap,
+  NavigationMenuLink as aq,
+  NavigationMenuList as ar,
+  NavigationMenuTrigger as as,
+  NavigationMenuViewport as at,
+  Progress as au,
+  RadioGroup as av,
+  RadioGroupItem as aw,
+  ScrollArea as ax,
+  ScrollBar as ay,
+  Separator as az,
   AccordionItem as b,
   AccordionTrigger as c,
   Alert as d,
@@ -1613,11 +1720,11 @@ export {
   CardTitle as r,
   Carousel as s,
   CarouselContent as t,
-  CarouselItem as u,
-  CarouselNext as v,
-  CarouselPrevious as w,
-  ContextMenu as x,
-  ContextMenuCheckboxItem as y,
-  ContextMenuContent as z
+  CarouselDots as u,
+  CarouselItem as v,
+  CarouselNext as w,
+  CarouselPrevious as x,
+  ContextMenu as y,
+  ContextMenuCheckboxItem as z
 };
-//# sourceMappingURL=toggle-group-CnAN6ZnT.mjs.map
+//# sourceMappingURL=toggle-group-mXbG8_Jm.mjs.map