@snksergio/design-system 0.44.0 → 0.46.0

package/dist-lib/chunks/{toggle-group-CFiAGdm7.mjs → toggle-group-DPzjrk6O.mjs}

@@ -1355,17 +1355,37 @@ const Slider = React.forwardRef(({ className, defaultValue, value, ...props }, r
   );
 });
 Slider.displayName = SliderPrimitive.Root.displayName;
-const TabsVariantContext = React.createContext("segmented");
-const Tabs = React.forwardRef(({ variant = "segmented", ...props }, ref) => /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
+const TabsVariantContext = React.createContext({
+  variant: "segmented",
+  fullWidth: false
+});
+const Tabs = React.forwardRef(({ variant = "segmented", fullWidth = false, className, ...props }, ref) => {
+  const ctx = React.useMemo(() => ({ variant, fullWidth }), [variant, fullWidth]);
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      ref,
+      className: cn(fullWidth && "w-full", className),
+      ...props
+    }
+  ) });
+});
 Tabs.displayName = "Tabs";
 const TabsList = React.forwardRef(({ className, ...props }, ref) => {
-  const variant = React.useContext(TabsVariantContext);
+  const { variant, fullWidth } = React.useContext(TabsVariantContext);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
       ref,
       className: cn(
-        variant === "line" ? "inline-flex w-fit items-center gap-gp-xl border-b border-border-subtle" : "inline-flex h-form-lg w-fit items-center bg-bg-muted p-[3px] gap-gp-2xs rounded-radius-lg",
+        variant === "line" ? (
+          /* O trilho atravessa o container por PADRÃO. Era `w-fit`, e aí o `border-b` parava
+             onde as abas paravam — um divisor que não alcança as bordas lê como fragmento, não
+             como divisória. Em toda referência (Material, Carbon, Ant) o trilho do underline é
+             full-bleed e só o indicador acompanha a aba ativa. */
+          "inline-flex w-full items-center gap-gp-xl border-b border-border-subtle"
+        ) : "inline-flex h-form-lg items-center bg-bg-muted p-[3px] gap-gp-2xs rounded-radius-lg",
+        variant === "segmented" && (fullWidth ? "w-full" : "w-fit"),
         className
       ),
       ...props
@@ -1374,7 +1394,7 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => {
-  const variant = React.useContext(TabsVariantContext);
+  const { variant, fullWidth } = React.useContext(TabsVariantContext);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
@@ -1385,6 +1405,9 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => {
         "hover:text-fg-default",
         "disabled:pointer-events-none disabled:opacity-50",
         variant === "line" ? "-mb-px h-[38px] px-[2px] pb-[8px] border-b-2 border-transparent data-[state=active]:border-border-brand data-[state=active]:text-fg-default data-[state=active]:font-semibold" : "h-[34px] px-[14px] rounded-radius-md data-[state=active]:bg-bg-accent data-[state=active]:text-fg-default data-[state=active]:font-semibold data-[state=active]:shadow-sh-sm",
+        /* Sem isto, `w-full` no List estica o container e agrupa os triggers na esquerda — o
+           defeito que 6 dos 7 usos manuais tinham. */
+        fullWidth && "flex-1",
         className
       ),
       ...props
@@ -1569,4 +1592,4 @@ export {
   ContextMenuCheckboxItem as y,
   ContextMenuContent as z
 };
-//# sourceMappingURL=toggle-group-CFiAGdm7.mjs.map
+//# sourceMappingURL=toggle-group-DPzjrk6O.mjs.map