@usefragments/ui 1.7.0 → 2.0.0

package/dist/components/Table/Table.module.scss.cjs

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_qfern_1";
-const table = "_table_qfern_8";
-const caption = "_caption_qfern_63";
-const captionHidden = "_captionHidden_qfern_76";
-const tabular = "_tabular_qfern_88";
-const thead = "_thead_qfern_92";
-const th = "_th_qfern_92";
-const headerContent = "_headerContent_qfern_116";
-const row = "_row_qfern_122";
-const td = "_td_qfern_140";
-const bordered = "_bordered_qfern_147";
-const tbody = "_tbody_qfern_148";
-const tfoot = "_tfoot_qfern_149";
-const selected = "_selected_qfern_153";
-const striped = "_striped_qfern_170";
+const wrapper = "_wrapper_1pxsm_1";
+const table = "_table_1pxsm_8";
+const caption = "_caption_1pxsm_62";
+const captionHidden = "_captionHidden_1pxsm_75";
+const tabular = "_tabular_1pxsm_87";
+const thead = "_thead_1pxsm_91";
+const th = "_th_1pxsm_91";
+const headerContent = "_headerContent_1pxsm_121";
+const row = "_row_1pxsm_127";
+const td = "_td_1pxsm_151";
+const bordered = "_bordered_1pxsm_158";
+const tbody = "_tbody_1pxsm_159";
+const tfoot = "_tfoot_1pxsm_160";
+const selected = "_selected_1pxsm_164";
+const striped = "_striped_1pxsm_181";
 const styles = {
   wrapper,
   table,

package/dist/components/Table/Table.module.scss.js

@@ -1,18 +1,18 @@
-const wrapper = "_wrapper_qfern_1";
-const table = "_table_qfern_8";
-const caption = "_caption_qfern_63";
-const captionHidden = "_captionHidden_qfern_76";
-const tabular = "_tabular_qfern_88";
-const thead = "_thead_qfern_92";
-const th = "_th_qfern_92";
-const headerContent = "_headerContent_qfern_116";
-const row = "_row_qfern_122";
-const td = "_td_qfern_140";
-const bordered = "_bordered_qfern_147";
-const tbody = "_tbody_qfern_148";
-const tfoot = "_tfoot_qfern_149";
-const selected = "_selected_qfern_153";
-const striped = "_striped_qfern_170";
+const wrapper = "_wrapper_1pxsm_1";
+const table = "_table_1pxsm_8";
+const caption = "_caption_1pxsm_62";
+const captionHidden = "_captionHidden_1pxsm_75";
+const tabular = "_tabular_1pxsm_87";
+const thead = "_thead_1pxsm_91";
+const th = "_th_1pxsm_91";
+const headerContent = "_headerContent_1pxsm_121";
+const row = "_row_1pxsm_127";
+const td = "_td_1pxsm_151";
+const bordered = "_bordered_1pxsm_158";
+const tbody = "_tbody_1pxsm_159";
+const tfoot = "_tfoot_1pxsm_160";
+const selected = "_selected_1pxsm_164";
+const striped = "_striped_1pxsm_181";
 const styles = {
   wrapper,
   table,

package/dist/components/TableOfContents/TableOfContents.module.scss.cjs

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1t9fw_1";
-const title = "_title_1t9fw_25";
-const list = "_list_1t9fw_45";
-const item = "_item_1t9fw_55";
-const groupHeaderRow = "_groupHeaderRow_1t9fw_56";
-const link = "_link_1t9fw_61";
-const linkLabel = "_linkLabel_1t9fw_110";
-const leading = "_leading_1t9fw_118";
-const trailing = "_trailing_1t9fw_119";
-const active = "_active_1t9fw_161";
-const groupHeader = "_groupHeader_1t9fw_56";
-const groupHeaderInteractive = "_groupHeaderInteractive_1t9fw_207";
-const groupHeaderActive = "_groupHeaderActive_1t9fw_220";
-const groupChevron = "_groupChevron_1t9fw_224";
-const groupLabel = "_groupLabel_1t9fw_242";
+const root = "_root_nelxi_1";
+const title = "_title_nelxi_20";
+const list = "_list_nelxi_34";
+const item = "_item_nelxi_44";
+const groupHeaderRow = "_groupHeaderRow_nelxi_45";
+const link = "_link_nelxi_50";
+const linkLabel = "_linkLabel_nelxi_90";
+const leading = "_leading_nelxi_98";
+const trailing = "_trailing_nelxi_99";
+const active = "_active_nelxi_135";
+const groupHeader = "_groupHeader_nelxi_45";
+const groupHeaderInteractive = "_groupHeaderInteractive_nelxi_171";
+const groupHeaderActive = "_groupHeaderActive_nelxi_184";
+const groupChevron = "_groupChevron_nelxi_188";
+const groupLabel = "_groupLabel_nelxi_206";
 const styles = {
   root,
   title,

package/dist/components/TableOfContents/TableOfContents.module.scss.js

@@ -1,18 +1,18 @@
-const root = "_root_1t9fw_1";
-const title = "_title_1t9fw_25";
-const list = "_list_1t9fw_45";
-const item = "_item_1t9fw_55";
-const groupHeaderRow = "_groupHeaderRow_1t9fw_56";
-const link = "_link_1t9fw_61";
-const linkLabel = "_linkLabel_1t9fw_110";
-const leading = "_leading_1t9fw_118";
-const trailing = "_trailing_1t9fw_119";
-const active = "_active_1t9fw_161";
-const groupHeader = "_groupHeader_1t9fw_56";
-const groupHeaderInteractive = "_groupHeaderInteractive_1t9fw_207";
-const groupHeaderActive = "_groupHeaderActive_1t9fw_220";
-const groupChevron = "_groupChevron_1t9fw_224";
-const groupLabel = "_groupLabel_1t9fw_242";
+const root = "_root_nelxi_1";
+const title = "_title_nelxi_20";
+const list = "_list_nelxi_34";
+const item = "_item_nelxi_44";
+const groupHeaderRow = "_groupHeaderRow_nelxi_45";
+const link = "_link_nelxi_50";
+const linkLabel = "_linkLabel_nelxi_90";
+const leading = "_leading_nelxi_98";
+const trailing = "_trailing_nelxi_99";
+const active = "_active_nelxi_135";
+const groupHeader = "_groupHeader_nelxi_45";
+const groupHeaderInteractive = "_groupHeaderInteractive_nelxi_171";
+const groupHeaderActive = "_groupHeaderActive_nelxi_184";
+const groupChevron = "_groupChevron_nelxi_188";
+const groupLabel = "_groupLabel_nelxi_206";
 const styles = {
   root,
   title,

package/dist/components/TableOfContents/index.cjs

@@ -49,7 +49,7 @@ function TableOfContentsRoot({
 }) {
   const classes = [TableOfContents_module.default.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...htmlProps, "aria-label": ariaLabel ?? label, className: classes, children: [
-    !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", variant: "section-label", className: TableOfContents_module.default.title, children: title }),
+    !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", role: "section-label", className: TableOfContents_module.default.title, children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: 0, hideSubItems }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: TableOfContents_module.default.list, children }) })
   ] });
 }

package/dist/components/TableOfContents/index.js

@@ -30,7 +30,7 @@ function TableOfContentsRoot({
 }) {
   const classes = [styles.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("nav", { ...htmlProps, "aria-label": ariaLabel ?? label, className: classes, children: [
-    !hideTitle && /* @__PURE__ */ jsx(Text, { as: "p", variant: "section-label", className: styles.title, children: title }),
+    !hideTitle && /* @__PURE__ */ jsx(Text, { as: "p", role: "section-label", className: styles.title, children: title }),
     /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: 0, hideSubItems }, children: /* @__PURE__ */ jsx("ul", { className: styles.list, children }) })
   ] });
 }

package/dist/components/Tabs/Tabs.module.scss.cjs

@@ -1,27 +1,27 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_q5vy1_1";
-const list = "_list_q5vy1_10";
-const listPills = "_listPills_q5vy1_27";
-const tab = "_tab_q5vy1_38";
-const tabSm = "_tabSm_q5vy1_81";
-const tabMd = "_tabMd_q5vy1_110";
-const tabLg = "_tabLg_q5vy1_139";
-const tabUnderline = "_tabUnderline_q5vy1_168";
-const tabPills = "_tabPills_q5vy1_175";
-const indicator = "_indicator_q5vy1_189";
-const panel = "_panel_q5vy1_210";
-const panelFlush = "_panelFlush_q5vy1_224";
+const root = "_root_15n0u_1";
+const list = "_list_15n0u_10";
+const listSoft = "_listSoft_15n0u_27";
+const tab = "_tab_15n0u_38";
+const tabSm = "_tabSm_15n0u_82";
+const tabMd = "_tabMd_15n0u_111";
+const tabLg = "_tabLg_15n0u_140";
+const tabGhost = "_tabGhost_15n0u_169";
+const tabSoft = "_tabSoft_15n0u_176";
+const indicator = "_indicator_15n0u_190";
+const panel = "_panel_15n0u_211";
+const panelFlush = "_panelFlush_15n0u_225";
 const styles = {
   root,
   list,
-  listPills,
+  listSoft,
   tab,
   tabSm,
   tabMd,
   tabLg,
-  tabUnderline,
-  tabPills,
+  tabGhost,
+  tabSoft,
   indicator,
   panel,
   panelFlush
@@ -29,13 +29,13 @@ const styles = {
 exports.default = styles;
 exports.indicator = indicator;
 exports.list = list;
-exports.listPills = listPills;
+exports.listSoft = listSoft;
 exports.panel = panel;
 exports.panelFlush = panelFlush;
 exports.root = root;
 exports.tab = tab;
+exports.tabGhost = tabGhost;
 exports.tabLg = tabLg;
 exports.tabMd = tabMd;
-exports.tabPills = tabPills;
 exports.tabSm = tabSm;
-exports.tabUnderline = tabUnderline;
+exports.tabSoft = tabSoft;

package/dist/components/Tabs/Tabs.module.scss.js

@@ -1,25 +1,25 @@
-const root = "_root_q5vy1_1";
-const list = "_list_q5vy1_10";
-const listPills = "_listPills_q5vy1_27";
-const tab = "_tab_q5vy1_38";
-const tabSm = "_tabSm_q5vy1_81";
-const tabMd = "_tabMd_q5vy1_110";
-const tabLg = "_tabLg_q5vy1_139";
-const tabUnderline = "_tabUnderline_q5vy1_168";
-const tabPills = "_tabPills_q5vy1_175";
-const indicator = "_indicator_q5vy1_189";
-const panel = "_panel_q5vy1_210";
-const panelFlush = "_panelFlush_q5vy1_224";
+const root = "_root_15n0u_1";
+const list = "_list_15n0u_10";
+const listSoft = "_listSoft_15n0u_27";
+const tab = "_tab_15n0u_38";
+const tabSm = "_tabSm_15n0u_82";
+const tabMd = "_tabMd_15n0u_111";
+const tabLg = "_tabLg_15n0u_140";
+const tabGhost = "_tabGhost_15n0u_169";
+const tabSoft = "_tabSoft_15n0u_176";
+const indicator = "_indicator_15n0u_190";
+const panel = "_panel_15n0u_211";
+const panelFlush = "_panelFlush_15n0u_225";
 const styles = {
   root,
   list,
-  listPills,
+  listSoft,
   tab,
   tabSm,
   tabMd,
   tabLg,
-  tabUnderline,
-  tabPills,
+  tabGhost,
+  tabSoft,
   indicator,
   panel,
   panelFlush
@@ -28,14 +28,14 @@ export {
   styles as default,
   indicator,
   list,
-  listPills,
+  listSoft,
   panel,
   panelFlush,
   root,
   tab,
+  tabGhost,
   tabLg,
   tabMd,
-  tabPills,
   tabSm,
-  tabUnderline
+  tabSoft
 };

package/dist/components/Tabs/index.cjs

@@ -23,7 +23,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const TabsVariantContext = React__namespace.createContext("underline");
+const TabsVariantContext = React__namespace.createContext("ghost");
 const TabsSizeContext = React__namespace.createContext("md");
 function TabsRoot({
   children,
@@ -31,7 +31,7 @@ function TabsRoot({
   value,
   onValueChange,
   orientation = "horizontal",
-  variant = "underline",
+  variant = "ghost",
   size: sizeProp,
   className,
   ...htmlProps
@@ -57,8 +57,7 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
   const rootSize = React__namespace.useContext(TabsSizeContext);
   const size = sizeProp ?? rootSize;
   const resolvedVariant = variant ?? rootVariant;
-  const variantClass = resolvedVariant === "pills" ? Tabs_module.default.listPills : Tabs_module.default.listUnderline;
-  const classes = [Tabs_module.default.list, variantClass, className].filter(Boolean).join(" ");
+  const classes = [Tabs_module.default.list, resolvedVariant === "soft" && Tabs_module.default.listSoft, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsxRuntime.jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsxs(
     tabs.Tabs.List,
     {
@@ -68,7 +67,7 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
       "data-variant": resolvedVariant,
       children: [
         children,
-        resolvedVariant === "underline" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
+        resolvedVariant === "ghost" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
       ]
     }
   ) }) });
@@ -76,7 +75,7 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
 function Tab({ children, value, disabled, className }) {
   const variant = React__namespace.useContext(TabsVariantContext);
   const size = React__namespace.useContext(TabsSizeContext);
-  const variantClass = variant === "pills" ? Tabs_module.default.tabPills : Tabs_module.default.tabUnderline;
+  const variantClass = variant === "soft" ? Tabs_module.default.tabSoft : Tabs_module.default.tabGhost;
   const sizeClass = size === "sm" ? Tabs_module.default.tabSm : size === "lg" ? Tabs_module.default.tabLg : Tabs_module.default.tabMd;
   const classes = [Tabs_module.default.tab, sizeClass, variantClass, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { value, disabled, className: classes, "data-slot": "tabs-tab", children });

package/dist/components/Tabs/index.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { type ControlSize } from "../ComponentDefaults";
 export type TabValue = string;
+export type TabsVariant = "ghost" | "soft";
 export type TabsChangeEventDetails = Parameters<NonNullable<React.ComponentProps<typeof BaseTabs.Root>["onValueChange"]>>[1];
 /**
  * Tabbed navigation for switching between content panels.
@@ -18,18 +19,19 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "d
     /** Tab layout direction.
      * @default "horizontal" */
     orientation?: "horizontal" | "vertical";
-    /** Tab list visual style (default for Tabs.List).
-     * @default "underline" */
-    variant?: "underline" | "pills";
+    /** Tab list chrome (default for Tabs.List): `ghost` draws a rule under the
+     * active tab, `soft` is a filled rail with a selected segment.
+     * @default "ghost" */
+    variant?: TabsVariant;
     /** Tab control size. Defaults to the component-default control size. */
     size?: ControlSize;
 }
 export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    /** Tab list visual style.
-     * @default "underline"
+    /** Tab list chrome.
+     * @default "ghost"
      * @see https://usefragments.com/components/tabs#variants */
-    variant?: "underline" | "pills";
+    variant?: TabsVariant;
     /** Tab control size. Defaults to the nearest Tabs root or provider default. */
     size?: ControlSize;
 }

package/dist/components/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOhF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAC9B,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAC7C,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CACzE,CAAC,CAAC,CAAC,CAAC;AAEL;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,kCAAkC;IAClC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAChF;+BAC2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;8BAC0B;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;gEAE4D;IAC5D,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAaD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,aAAa,EACb,WAA0B,EAC1B,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAqBX;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAuB9F;AAED,iBAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,QAAQ,2CAY9D;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,KAAa,EACb,SAAS,EACT,GAAG,SAAS,EACb,EAAE,cAAc,2CAchB;AAMD,eAAO,MAAM,IAAI;;;;CAIf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOhF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAC9B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3C,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAC7C,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CACzE,CAAC,CAAC,CAAC,CAAC;AAEL;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,kCAAkC;IAClC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAChF;+BAC2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;0BAEsB;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;gEAE4D;IAC5D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAaD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,aAAa,EACb,WAA0B,EAC1B,OAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAqBX;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAwB9F;AAED,iBAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,QAAQ,2CAY9D;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,KAAa,EACb,SAAS,EACT,GAAG,SAAS,EACb,EAAE,cAAc,2CAchB;AAMD,eAAO,MAAM,IAAI;;;;CAIf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Tabs/index.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 import { useResolvedControlSize } from "../ComponentDefaults/index.js";
 import styles from "./Tabs.module.scss.js";
-const TabsVariantContext = React.createContext("underline");
+const TabsVariantContext = React.createContext("ghost");
 const TabsSizeContext = React.createContext("md");
 function TabsRoot({
   children,
@@ -12,7 +12,7 @@ function TabsRoot({
   value,
   onValueChange,
   orientation = "horizontal",
-  variant = "underline",
+  variant = "ghost",
   size: sizeProp,
   className,
   ...htmlProps
@@ -38,8 +38,7 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
   const rootSize = React.useContext(TabsSizeContext);
   const size = sizeProp ?? rootSize;
   const resolvedVariant = variant ?? rootVariant;
-  const variantClass = resolvedVariant === "pills" ? styles.listPills : styles.listUnderline;
-  const classes = [styles.list, variantClass, className].filter(Boolean).join(" ");
+  const classes = [styles.list, resolvedVariant === "soft" && styles.listSoft, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs(
     Tabs$1.List,
     {
@@ -49,7 +48,7 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
       "data-variant": resolvedVariant,
       children: [
         children,
-        resolvedVariant === "underline" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
+        resolvedVariant === "ghost" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
       ]
     }
   ) }) });
@@ -57,7 +56,7 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
 function Tab({ children, value, disabled, className }) {
   const variant = React.useContext(TabsVariantContext);
   const size = React.useContext(TabsSizeContext);
-  const variantClass = variant === "pills" ? styles.tabPills : styles.tabUnderline;
+  const variantClass = variant === "soft" ? styles.tabSoft : styles.tabGhost;
   const sizeClass = size === "sm" ? styles.tabSm : size === "lg" ? styles.tabLg : styles.tabMd;
   const classes = [styles.tab, sizeClass, variantClass, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(Tabs$1.Tab, { value, disabled, className: classes, "data-slot": "tabs-tab", children });