@usefragments/ui 1.6.0 → 2.0.0

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_16mr3_1";
-const title = "_title_16mr3_25";
-const list = "_list_16mr3_30";
-const item = "_item_16mr3_40";
-const groupHeaderRow = "_groupHeaderRow_16mr3_41";
-const link = "_link_16mr3_46";
-const linkLabel = "_linkLabel_16mr3_92";
-const leading = "_leading_16mr3_100";
-const trailing = "_trailing_16mr3_101";
-const active = "_active_16mr3_143";
-const groupHeader = "_groupHeader_16mr3_41";
-const groupHeaderInteractive = "_groupHeaderInteractive_16mr3_186";
-const groupHeaderActive = "_groupHeaderActive_16mr3_199";
-const groupChevron = "_groupChevron_16mr3_203";
-const groupLabel = "_groupLabel_16mr3_221";
+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_16mr3_1";
-const title = "_title_16mr3_25";
-const list = "_list_16mr3_30";
-const item = "_item_16mr3_40";
-const groupHeaderRow = "_groupHeaderRow_16mr3_41";
-const link = "_link_16mr3_46";
-const linkLabel = "_linkLabel_16mr3_92";
-const leading = "_leading_16mr3_100";
-const trailing = "_trailing_16mr3_101";
-const active = "_active_16mr3_143";
-const groupHeader = "_groupHeader_16mr3_41";
-const groupHeaderInteractive = "_groupHeaderInteractive_16mr3_186";
-const groupHeaderActive = "_groupHeaderActive_16mr3_199";
-const groupChevron = "_groupChevron_16mr3_203";
-const groupLabel = "_groupLabel_16mr3_221";
+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

@@ -22,7 +22,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const TocContext = React__namespace.createContext({ depth: 0 });
+const TocContext = React__namespace.createContext({ depth: 0, hideSubItems: false });
 function ChevronIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -42,14 +42,15 @@ function TableOfContentsRoot({
   label = "Table of contents",
   title = "On This Page",
   hideTitle = false,
+  hideSubItems = false,
   className,
   "aria-label": ariaLabel,
   ...htmlProps
 }) {
   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 }),
-    /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: TableOfContents_module.default.list, children }) })
+    !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 }) })
   ] });
 }
 function TableOfContentsItem({
@@ -61,19 +62,21 @@ function TableOfContentsItem({
   trailing,
   className,
   onClick,
-  href: _href,
+  href,
   ...htmlProps
 }) {
-  const { depth } = React__namespace.useContext(TocContext);
+  const { depth, hideSubItems } = React__namespace.useContext(TocContext);
   const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
+  if (hideSubItems && effectiveDepth > 0) return null;
   const linkClasses = [TableOfContents_module.default.link, active && TableOfContents_module.default.active, className].filter(Boolean).join(" ");
   const handleClick = (e) => {
     onClick == null ? void 0 : onClick(e);
-    if (e.defaultPrevented) return;
+    if (e.defaultPrevented || href) return;
     e.preventDefault();
     const el = document.getElementById(id);
     if (el) {
-      el.scrollIntoView({ behavior: "smooth" });
+      const prefersReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      el.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth" });
       window.history.replaceState(null, "", `#${id}`);
     }
   };
@@ -81,7 +84,7 @@ function TableOfContentsItem({
     "a",
     {
       ...htmlProps,
-      href: `#${id}`,
+      href: href ?? `#${id}`,
       className: linkClasses,
       onClick: handleClick,
       "aria-current": active ? "location" : void 0,
@@ -118,8 +121,9 @@ function TableOfContentsGroup({
   disabled = false,
   active = false
 }) {
-  const { depth } = React__namespace.useContext(TocContext);
+  const { depth, hideSubItems } = React__namespace.useContext(TocContext);
   const [open, setOpen] = useControlledOpen(controlledOpen, defaultOpen, onOpenChange);
+  if (hideSubItems) return null;
   const isToggleable = collapsible && !disabled;
   const isOpen = isToggleable ? open : true;
   const headerClasses = [
@@ -144,7 +148,7 @@ function TableOfContentsGroup({
         children: headerContent
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClasses, children: headerContent }) }),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: depth + 1 }, children })
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: depth + 1, hideSubItems }, children })
   ] });
 }
 const TableOfContents = Object.assign(TableOfContentsRoot, {

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

@@ -7,6 +7,8 @@ export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement>
     title?: string;
     /** Hide the title */
     hideTitle?: boolean;
+    /** Hide indented items and nested groups. Defaults to false. */
+    hideSubItems?: boolean;
 }
 export interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
     children: React.ReactNode;
@@ -42,9 +44,9 @@ export interface TableOfContentsGroupProps {
     /** Highlight the group label in accent — typically when a child is active. */
     active?: boolean;
 }
-declare function TableOfContentsRoot({ children, label, title, hideTitle, className, "aria-label": ariaLabel, ...htmlProps }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;
-declare function TableOfContentsItem({ children, id, active, indent, leading, trailing, className, onClick, href: _href, ...htmlProps }: TableOfContentsItemProps): import("react/jsx-runtime").JSX.Element;
-declare function TableOfContentsGroup({ children, label, leading, trailing, defaultOpen, open: controlledOpen, onOpenChange, collapsible, disabled, active, }: TableOfContentsGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function TableOfContentsRoot({ children, label, title, hideTitle, hideSubItems, className, "aria-label": ariaLabel, ...htmlProps }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;
+declare function TableOfContentsItem({ children, id, active, indent, leading, trailing, className, onClick, href, ...htmlProps }: TableOfContentsItemProps): import("react/jsx-runtime").JSX.Element | null;
+declare function TableOfContentsGroup({ children, label, leading, trailing, defaultOpen, open: controlledOpen, onOpenChange, collapsible, disabled, active, }: TableOfContentsGroupProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const TableOfContents: typeof TableOfContentsRoot & {
     Item: typeof TableOfContentsItem;
     Group: typeof TableOfContentsGroup;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableOfContents/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,CACX;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCD,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,KAA2B,EAC3B,KAAsB,EACtB,SAAiB,EACjB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAetB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAc,EACd,MAAc,EACd,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EAAE,KAAK,EACX,GAAG,SAAS,EACb,EAAE,wBAAwB,2CAiC1B;AAuBD,iBAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAkB,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAkB,EAClB,QAAgB,EAChB,MAAc,GACf,EAAE,yBAAyB,2CA+C3B;AAMD,eAAO,MAAM,eAAe;;;CAG1B,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableOfContents/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,CACX;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoCD,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,KAA2B,EAC3B,KAAsB,EACtB,SAAiB,EACjB,YAAoB,EACpB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAetB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAc,EACd,MAAc,EACd,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,wBAAwB,kDAwC1B;AAuBD,iBAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAkB,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAkB,EAClB,QAAgB,EAChB,MAAc,GACf,EAAE,yBAAyB,kDAqD3B;AAMD,eAAO,MAAM,eAAe;;;CAG1B,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/TableOfContents/index.js

@@ -3,7 +3,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./TableOfContents.module.scss.js";
 import { Text } from "../Text/index.js";
-const TocContext = React.createContext({ depth: 0 });
+const TocContext = React.createContext({ depth: 0, hideSubItems: false });
 function ChevronIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -23,14 +23,15 @@ function TableOfContentsRoot({
   label = "Table of contents",
   title = "On This Page",
   hideTitle = false,
+  hideSubItems = false,
   className,
   "aria-label": ariaLabel,
   ...htmlProps
 }) {
   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 }),
-    /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: 0 }, children: /* @__PURE__ */ jsx("ul", { className: styles.list, children }) })
+    !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 }) })
   ] });
 }
 function TableOfContentsItem({
@@ -42,19 +43,21 @@ function TableOfContentsItem({
   trailing,
   className,
   onClick,
-  href: _href,
+  href,
   ...htmlProps
 }) {
-  const { depth } = React.useContext(TocContext);
+  const { depth, hideSubItems } = React.useContext(TocContext);
   const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
+  if (hideSubItems && effectiveDepth > 0) return null;
   const linkClasses = [styles.link, active && styles.active, className].filter(Boolean).join(" ");
   const handleClick = (e) => {
     onClick == null ? void 0 : onClick(e);
-    if (e.defaultPrevented) return;
+    if (e.defaultPrevented || href) return;
     e.preventDefault();
     const el = document.getElementById(id);
     if (el) {
-      el.scrollIntoView({ behavior: "smooth" });
+      const prefersReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      el.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth" });
       window.history.replaceState(null, "", `#${id}`);
     }
   };
@@ -62,7 +65,7 @@ function TableOfContentsItem({
     "a",
     {
       ...htmlProps,
-      href: `#${id}`,
+      href: href ?? `#${id}`,
       className: linkClasses,
       onClick: handleClick,
       "aria-current": active ? "location" : void 0,
@@ -99,8 +102,9 @@ function TableOfContentsGroup({
   disabled = false,
   active = false
 }) {
-  const { depth } = React.useContext(TocContext);
+  const { depth, hideSubItems } = React.useContext(TocContext);
   const [open, setOpen] = useControlledOpen(controlledOpen, defaultOpen, onOpenChange);
+  if (hideSubItems) return null;
   const isToggleable = collapsible && !disabled;
   const isOpen = isToggleable ? open : true;
   const headerClasses = [
@@ -125,7 +129,7 @@ function TableOfContentsGroup({
         children: headerContent
       }
     ) : /* @__PURE__ */ jsx("div", { className: headerClasses, children: headerContent }) }),
-    isOpen && /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: depth + 1 }, children })
+    isOpen && /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: depth + 1, hideSubItems }, children })
   ] });
 }
 const TableOfContents = Object.assign(TableOfContentsRoot, {

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_1vdrf_1";
-const list = "_list_1vdrf_10";
-const listPills = "_listPills_1vdrf_27";
-const tab = "_tab_1vdrf_38";
-const tabSm = "_tabSm_1vdrf_79";
-const tabMd = "_tabMd_1vdrf_108";
-const tabLg = "_tabLg_1vdrf_137";
-const tabUnderline = "_tabUnderline_1vdrf_166";
-const tabPills = "_tabPills_1vdrf_173";
-const indicator = "_indicator_1vdrf_187";
-const panel = "_panel_1vdrf_208";
-const panelFlush = "_panelFlush_1vdrf_222";
+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_1vdrf_1";
-const list = "_list_1vdrf_10";
-const listPills = "_listPills_1vdrf_27";
-const tab = "_tab_1vdrf_38";
-const tabSm = "_tabSm_1vdrf_79";
-const tabMd = "_tabMd_1vdrf_108";
-const tabLg = "_tabLg_1vdrf_137";
-const tabUnderline = "_tabUnderline_1vdrf_166";
-const tabPills = "_tabPills_1vdrf_173";
-const indicator = "_indicator_1vdrf_187";
-const panel = "_panel_1vdrf_208";
-const panelFlush = "_panelFlush_1vdrf_222";
+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
@@ -47,6 +47,7 @@ function TabsRoot({
       onValueChange,
       orientation,
       className: classes,
+      "data-slot": "tabs",
       children
     }
   ) }) });
@@ -56,20 +57,28 @@ 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(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsxRuntime.jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.Tabs.List, { ...htmlProps, className: classes, children: [
-    children,
-    resolvedVariant === "underline" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
-  ] }) }) });
+  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,
+    {
+      ...htmlProps,
+      className: classes,
+      "data-slot": "tabs-list",
+      "data-variant": resolvedVariant,
+      children: [
+        children,
+        resolvedVariant === "ghost" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
+      ]
+    }
+  ) }) });
 }
 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, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { value, disabled, className: classes, "data-slot": "tabs-tab", children });
 }
 function TabsPanel({
   children,
@@ -80,7 +89,17 @@ function TabsPanel({
   ...htmlProps
 }) {
   const classes = [Tabs_module.default.panel, flush && Tabs_module.default.panelFlush, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { ...htmlProps, value, keepMounted, className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Panel,
+    {
+      ...htmlProps,
+      value,
+      keepMounted,
+      className: classes,
+      "data-slot": "tabs-panel",
+      children
+    }
+  );
 }
 const Tabs = Object.assign(TabsRoot, {
   List: TabsList,

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,2CAoBX;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAkB9F;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,2CAQhB;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
@@ -28,6 +28,7 @@ function TabsRoot({
       onValueChange,
       orientation,
       className: classes,
+      "data-slot": "tabs",
       children
     }
   ) }) });
@@ -37,20 +38,28 @@ 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(" ");
-  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs(Tabs$1.List, { ...htmlProps, className: classes, children: [
-    children,
-    resolvedVariant === "underline" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
-  ] }) }) });
+  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,
+    {
+      ...htmlProps,
+      className: classes,
+      "data-slot": "tabs-list",
+      "data-variant": resolvedVariant,
+      children: [
+        children,
+        resolvedVariant === "ghost" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
+      ]
+    }
+  ) }) });
 }
 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, children });
+  return /* @__PURE__ */ jsx(Tabs$1.Tab, { value, disabled, className: classes, "data-slot": "tabs-tab", children });
 }
 function TabsPanel({
   children,
@@ -61,7 +70,17 @@ function TabsPanel({
   ...htmlProps
 }) {
   const classes = [styles.panel, flush && styles.panelFlush, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(Tabs$1.Panel, { ...htmlProps, value, keepMounted, className: classes, children });
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Panel,
+    {
+      ...htmlProps,
+      value,
+      keepMounted,
+      className: classes,
+      "data-slot": "tabs-panel",
+      children
+    }
+  );
 }
 const Tabs = Object.assign(TabsRoot, {
   List: TabsList,