@usefragments/ui 1.5.4 → 1.7.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_1bf9l_1";
-const title = "_title_1bf9l_13";
-const list = "_list_1bf9l_18";
-const item = "_item_1bf9l_28";
-const groupHeaderRow = "_groupHeaderRow_1bf9l_29";
-const link = "_link_1bf9l_122";
-const linkLabel = "_linkLabel_1bf9l_149";
-const leading = "_leading_1bf9l_157";
-const trailing = "_trailing_1bf9l_158";
-const active = "_active_1bf9l_170";
-const groupHeader = "_groupHeader_1bf9l_29";
-const groupHeaderInteractive = "_groupHeaderInteractive_1bf9l_195";
-const groupHeaderActive = "_groupHeaderActive_1bf9l_208";
-const groupChevron = "_groupChevron_1bf9l_212";
-const groupLabel = "_groupLabel_1bf9l_230";
+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 styles = {
   root,
   title,

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

@@ -1,18 +1,18 @@
-const root = "_root_1bf9l_1";
-const title = "_title_1bf9l_13";
-const list = "_list_1bf9l_18";
-const item = "_item_1bf9l_28";
-const groupHeaderRow = "_groupHeaderRow_1bf9l_29";
-const link = "_link_1bf9l_122";
-const linkLabel = "_linkLabel_1bf9l_149";
-const leading = "_leading_1bf9l_157";
-const trailing = "_trailing_1bf9l_158";
-const active = "_active_1bf9l_170";
-const groupHeader = "_groupHeader_1bf9l_29";
-const groupHeaderInteractive = "_groupHeaderInteractive_1bf9l_195";
-const groupHeaderActive = "_groupHeaderActive_1bf9l_208";
-const groupChevron = "_groupChevron_1bf9l_212";
-const groupLabel = "_groupLabel_1bf9l_230";
+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 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,6 +42,7 @@ function TableOfContentsRoot({
   label = "Table of contents",
   title = "On This Page",
   hideTitle = false,
+  hideSubItems = false,
   className,
   "aria-label": ariaLabel,
   ...htmlProps
@@ -49,7 +50,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 }),
-    /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: TableOfContents_module.default.list, children }) })
+    /* @__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,6 +23,7 @@ function TableOfContentsRoot({
   label = "Table of contents",
   title = "On This Page",
   hideTitle = false,
+  hideSubItems = false,
   className,
   "aria-label": ariaLabel,
   ...htmlProps
@@ -30,7 +31,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 }),
-    /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: 0 }, children: /* @__PURE__ */ jsx("ul", { className: styles.list, children }) })
+    /* @__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,17 +1,17 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_hmb9h_1";
-const list = "_list_hmb9h_10";
-const listPills = "_listPills_hmb9h_26";
-const tab = "_tab_hmb9h_37";
-const tabSm = "_tabSm_hmb9h_84";
-const tabMd = "_tabMd_hmb9h_89";
-const tabLg = "_tabLg_hmb9h_94";
-const tabUnderline = "_tabUnderline_hmb9h_100";
-const tabPills = "_tabPills_hmb9h_108";
-const indicator = "_indicator_hmb9h_122";
-const panel = "_panel_hmb9h_143";
-const panelFlush = "_panelFlush_hmb9h_156";
+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 styles = {
   root,
   list,

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

@@ -1,15 +1,15 @@
-const root = "_root_hmb9h_1";
-const list = "_list_hmb9h_10";
-const listPills = "_listPills_hmb9h_26";
-const tab = "_tab_hmb9h_37";
-const tabSm = "_tabSm_hmb9h_84";
-const tabMd = "_tabMd_hmb9h_89";
-const tabLg = "_tabLg_hmb9h_94";
-const tabUnderline = "_tabUnderline_hmb9h_100";
-const tabPills = "_tabPills_hmb9h_108";
-const indicator = "_indicator_hmb9h_122";
-const panel = "_panel_hmb9h_143";
-const panelFlush = "_panelFlush_hmb9h_156";
+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 styles = {
   root,
   list,

package/dist/components/Tabs/index.cjs

@@ -24,7 +24,7 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const TabsVariantContext = React__namespace.createContext("underline");
-const TabsSizeContext = React__namespace.createContext("sm");
+const TabsSizeContext = React__namespace.createContext("md");
 function TabsRoot({
   children,
   defaultValue,
@@ -36,7 +36,7 @@ function TabsRoot({
   className,
   ...htmlProps
 }) {
-  const size = index.useResolvedControlSize(sizeProp, "sm");
+  const size = index.useResolvedControlSize(sizeProp);
   const classes = [Tabs_module.default.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
     tabs.Tabs.Root,
@@ -47,6 +47,7 @@ function TabsRoot({
       onValueChange,
       orientation,
       className: classes,
+      "data-slot": "tabs",
       children
     }
   ) }) });
@@ -58,10 +59,19 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
   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 })
-  ] }) }) });
+  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 === "underline" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
+      ]
+    }
+  ) }) });
 }
 function Tab({ children, value, disabled, className }) {
   const variant = React__namespace.useContext(TabsVariantContext);
@@ -69,7 +79,7 @@ function Tab({ children, value, disabled, className }) {
   const variantClass = variant === "pills" ? Tabs_module.default.tabPills : Tabs_module.default.tabUnderline;
   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 +90,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.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,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"}

package/dist/components/Tabs/index.js

@@ -5,7 +5,7 @@ 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 TabsSizeContext = React.createContext("sm");
+const TabsSizeContext = React.createContext("md");
 function TabsRoot({
   children,
   defaultValue,
@@ -17,7 +17,7 @@ function TabsRoot({
   className,
   ...htmlProps
 }) {
-  const size = useResolvedControlSize(sizeProp, "sm");
+  const size = useResolvedControlSize(sizeProp);
   const classes = [styles.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
     Tabs$1.Root,
@@ -28,6 +28,7 @@ function TabsRoot({
       onValueChange,
       orientation,
       className: classes,
+      "data-slot": "tabs",
       children
     }
   ) }) });
@@ -39,10 +40,19 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
   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 })
-  ] }) }) });
+  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 === "underline" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
+      ]
+    }
+  ) }) });
 }
 function Tab({ children, value, disabled, className }) {
   const variant = React.useContext(TabsVariantContext);
@@ -50,7 +60,7 @@ function Tab({ children, value, disabled, className }) {
   const variantClass = variant === "pills" ? styles.tabPills : styles.tabUnderline;
   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 +71,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,