@fragments-sdk/ui 0.13.0 → 0.14.0

package/dist/components/TableOfContents/index.js

@@ -7,10 +7,11 @@ function TableOfContentsRoot({
   title = "On This Page",
   hideTitle = false,
   className,
+  "aria-label": ariaLabel,
   ...htmlProps
 }) {
   const classes = [styles.root, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: classes, ...htmlProps, children: [
+  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("ul", { className: styles.list, children })
   ] });
@@ -22,6 +23,7 @@ function TableOfContentsItem({
   indent = false,
   className,
   onClick,
+  href: _href,
   ...htmlProps
 }) {
   const linkClasses = [
@@ -31,22 +33,23 @@ function TableOfContentsItem({
     className
   ].filter(Boolean).join(" ");
   const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (e.defaultPrevented) return;
     e.preventDefault();
     const el = document.getElementById(id);
     if (el) {
       el.scrollIntoView({ behavior: "smooth" });
-      history.replaceState(null, "", `#${id}`);
+      window.history.replaceState(null, "", `#${id}`);
     }
-    onClick == null ? void 0 : onClick(e);
   };
   return /* @__PURE__ */ jsx("li", { className: styles.item, children: /* @__PURE__ */ jsx(
     "a",
     {
+      ...htmlProps,
       href: `#${id}`,
       className: linkClasses,
       onClick: handleClick,
-      "aria-current": active ? "true" : void 0,
-      ...htmlProps,
+      "aria-current": active ? "location" : void 0,
       children
     }
   ) });

package/dist/components/TableOfContents/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TableOfContents/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './TableOfContents.module.scss';\nimport { Text } from '../Text';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Label for the nav landmark (default: \"Table of contents\") */\n  label?: string;\n  /** Title displayed above the list (default: \"On This Page\") */\n  title?: string;\n  /** Hide the title */\n  hideTitle?: boolean;\n}\n\nexport interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  children: React.ReactNode;\n  /** The heading ID to link to */\n  id: string;\n  /** Whether this item is currently active/visible */\n  active?: boolean;\n  /** Indent level — use for sub-headings (h3, h4, etc.) */\n  indent?: boolean;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction TableOfContentsRoot({\n  children,\n  label = 'Table of contents',\n  title = 'On This Page',\n  hideTitle = false,\n  className,\n  ...htmlProps\n}: TableOfContentsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <nav aria-label={label} className={classes} {...htmlProps}>\n      {!hideTitle && (\n        <Text as=\"p\" variant=\"section-label\" className={styles.title}>\n          {title}\n        </Text>\n      )}\n      <ul className={styles.list}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nfunction TableOfContentsItem({\n  children,\n  id,\n  active = false,\n  indent = false,\n  className,\n  onClick,\n  ...htmlProps\n}: TableOfContentsItemProps) {\n  const linkClasses = [\n    styles.link,\n    indent && styles.indent,\n    active && styles.active,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    e.preventDefault();\n    const el = document.getElementById(id);\n    if (el) {\n      el.scrollIntoView({ behavior: 'smooth' });\n      history.replaceState(null, '', `#${id}`);\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <li className={styles.item}>\n      <a\n        href={`#${id}`}\n        className={linkClasses}\n        onClick={handleClick}\n        aria-current={active ? 'true' : undefined}\n        {...htmlProps}\n      >\n        {children}\n      </a>\n    </li>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const TableOfContents = Object.assign(TableOfContentsRoot, {\n  Item: TableOfContentsItem,\n});\n\n// Re-export individual components\nexport { TableOfContentsRoot, TableOfContentsItem };\n"],"names":[],"mappings":";;;AAkCA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,8BACG,OAAA,EAAI,cAAY,OAAO,WAAW,SAAU,GAAG,WAC7C,UAAA;AAAA,IAAA,CAAC,aACA,oBAAC,MAAA,EAAK,IAAG,KAAI,SAAQ,iBAAgB,WAAW,OAAO,OACpD,UAAA,MAAA,CACH;AAAA,IAEF,oBAAC,MAAA,EAAG,WAAW,OAAO,MACnB,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,IACP,UAAU,OAAO;AAAA,IACjB,UAAU,OAAO;AAAA,IACjB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,cAAc,CAAC,MAA2C;AAC9D,MAAE,eAAA;AACF,UAAM,KAAK,SAAS,eAAe,EAAE;AACrC,QAAI,IAAI;AACN,SAAG,eAAe,EAAE,UAAU,SAAA,CAAU;AACxC,cAAQ,aAAa,MAAM,IAAI,IAAI,EAAE,EAAE;AAAA,IACzC;AACA,uCAAU;AAAA,EACZ;AAEA,SACE,oBAAC,MAAA,EAAG,WAAW,OAAO,MACpB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,IAAI,EAAE;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAc,SAAS,SAAS;AAAA,MAC/B,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,qBAAqB;AAAA,EAChE,MAAM;AACR,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TableOfContents/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './TableOfContents.module.scss';\nimport { Text } from '../Text';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Label for the nav landmark (default: \"Table of contents\") */\n  label?: string;\n  /** Title displayed above the list (default: \"On This Page\") */\n  title?: string;\n  /** Hide the title */\n  hideTitle?: boolean;\n}\n\nexport interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  children: React.ReactNode;\n  /** The heading ID to link to */\n  id: string;\n  /** Whether this item is currently active/visible */\n  active?: boolean;\n  /** Indent level — use for sub-headings (h3, h4, etc.) */\n  indent?: boolean;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction TableOfContentsRoot({\n  children,\n  label = 'Table of contents',\n  title = 'On This Page',\n  hideTitle = false,\n  className,\n  'aria-label': ariaLabel,\n  ...htmlProps\n}: TableOfContentsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <nav {...htmlProps} aria-label={ariaLabel ?? label} className={classes}>\n      {!hideTitle && (\n        <Text as=\"p\" variant=\"section-label\" className={styles.title}>\n          {title}\n        </Text>\n      )}\n      <ul className={styles.list}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nfunction TableOfContentsItem({\n  children,\n  id,\n  active = false,\n  indent = false,\n  className,\n  onClick,\n  href: _href,\n  ...htmlProps\n}: TableOfContentsItemProps) {\n  const linkClasses = [\n    styles.link,\n    indent && styles.indent,\n    active && styles.active,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(e);\n    if (e.defaultPrevented) return;\n\n    e.preventDefault();\n    const el = document.getElementById(id);\n    if (el) {\n      el.scrollIntoView({ behavior: 'smooth' });\n      window.history.replaceState(null, '', `#${id}`);\n    }\n  };\n\n  return (\n    <li className={styles.item}>\n      <a\n        {...htmlProps}\n        href={`#${id}`}\n        className={linkClasses}\n        onClick={handleClick}\n        aria-current={active ? 'location' : undefined}\n      >\n        {children}\n      </a>\n    </li>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const TableOfContents = Object.assign(TableOfContentsRoot, {\n  Item: TableOfContentsItem,\n});\n\n// Re-export individual components\nexport { TableOfContentsRoot, TableOfContentsItem };\n"],"names":[],"mappings":";;;AAkCA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACE,qBAAC,SAAK,GAAG,WAAW,cAAY,aAAa,OAAO,WAAW,SAC5D,UAAA;AAAA,IAAA,CAAC,aACA,oBAAC,MAAA,EAAK,IAAG,KAAI,SAAQ,iBAAgB,WAAW,OAAO,OACpD,UAAA,MAAA,CACH;AAAA,IAEF,oBAAC,MAAA,EAAG,WAAW,OAAO,MACnB,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,GAAG;AACL,GAA6B;AAC3B,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,IACP,UAAU,OAAO;AAAA,IACjB,UAAU,OAAO;AAAA,IACjB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,cAAc,CAAC,MAA2C;AAC9D,uCAAU;AACV,QAAI,EAAE,iBAAkB;AAExB,MAAE,eAAA;AACF,UAAM,KAAK,SAAS,eAAe,EAAE;AACrC,QAAI,IAAI;AACN,SAAG,eAAe,EAAE,UAAU,SAAA,CAAU;AACxC,aAAO,QAAQ,aAAa,MAAM,IAAI,IAAI,EAAE,EAAE;AAAA,IAChD;AAAA,EACF;AAEA,SACE,oBAAC,MAAA,EAAG,WAAW,OAAO,MACpB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,IAAI,EAAE;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAc,SAAS,aAAa;AAAA,MAEnC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,qBAAqB;AAAA,EAChE,MAAM;AACR,CAAC;"}

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_165zt_1";
-const list = "_list_165zt_10";
-const listPills = "_listPills_165zt_26";
-const tab = "_tab_165zt_35";
-const tabUnderline = "_tabUnderline_165zt_83";
-const tabPills = "_tabPills_165zt_92";
-const indicator = "_indicator_165zt_106";
-const panel = "_panel_165zt_127";
-const panelFlush = "_panelFlush_165zt_140";
+const root = "_root_1c6m7_1";
+const list = "_list_1c6m7_10";
+const listPills = "_listPills_1c6m7_26";
+const tab = "_tab_1c6m7_35";
+const tabUnderline = "_tabUnderline_1c6m7_83";
+const tabPills = "_tabPills_1c6m7_92";
+const indicator = "_indicator_1c6m7_106";
+const panel = "_panel_1c6m7_127";
+const panelFlush = "_panelFlush_1c6m7_140";
 const styles = {
   root,
   list,

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

@@ -1,12 +1,12 @@
-const root = "_root_165zt_1";
-const list = "_list_165zt_10";
-const listPills = "_listPills_165zt_26";
-const tab = "_tab_165zt_35";
-const tabUnderline = "_tabUnderline_165zt_83";
-const tabPills = "_tabPills_165zt_92";
-const indicator = "_indicator_165zt_106";
-const panel = "_panel_165zt_127";
-const panelFlush = "_panelFlush_165zt_140";
+const root = "_root_1c6m7_1";
+const list = "_list_1c6m7_10";
+const listPills = "_listPills_1c6m7_26";
+const tab = "_tab_1c6m7_35";
+const tabUnderline = "_tabUnderline_1c6m7_83";
+const tabPills = "_tabPills_1c6m7_92";
+const indicator = "_indicator_1c6m7_106";
+const panel = "_panel_1c6m7_127";
+const panelFlush = "_panelFlush_1c6m7_140";
 const styles = {
   root,
   list,

package/dist/components/Tabs/index.cjs

@@ -28,11 +28,12 @@ function TabsRoot({
   value,
   onValueChange,
   orientation = "horizontal",
+  variant = "underline",
   className,
   ...htmlProps
 }) {
   const classes = [Tabs_module.default.root, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(
     tabs.Tabs.Root,
     {
       ...htmlProps,
@@ -43,19 +44,21 @@ function TabsRoot({
       className: classes,
       children
     }
-  );
+  ) });
 }
 function TabsList({
   children,
-  variant = "underline",
+  variant,
   className,
   ...htmlProps
 }) {
-  const variantClass = variant === "pills" ? Tabs_module.default.listPills : Tabs_module.default.listUnderline;
+  const rootVariant = React__namespace.useContext(TabsVariantContext);
+  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: variant, children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.Tabs.List, { ...htmlProps, className: classes, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.Tabs.List, { ...htmlProps, className: classes, children: [
     children,
-    variant === "underline" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
+    resolvedVariant === "underline" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
   ] }) });
 }
 function Tab({

package/dist/components/Tabs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport styles from './Tabs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TabValue = string;\n\n/**\n * Tabbed navigation for switching between content panels.\n * @see https://usefragments.com/components/tabs\n */\nexport interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  children: React.ReactNode;\n  /** Default active tab value (uncontrolled) */\n  defaultValue?: TabValue;\n  /** Controlled active tab value */\n  value?: TabValue;\n  /** Called when the active tab changes */\n  onValueChange?: (value: TabValue) => void;\n  /** Tab layout direction.\n   * @default \"horizontal\" */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Tab list visual style.\n   * @default \"underline\"\n   * @see https://usefragments.com/components/tabs#variants */\n  variant?: 'underline' | 'pills';\n}\n\nexport interface TabProps {\n  children: React.ReactNode;\n  value: TabValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: TabValue;\n  keepMounted?: boolean;\n  flush?: boolean;\n}\n\n// ============================================\n// Context for variant\n// ============================================\n\nconst TabsVariantContext = React.createContext<'underline' | 'pills'>('underline');\n\n// ============================================\n// Components\n// ============================================\n\nfunction TabsRoot({\n  children,\n  defaultValue,\n  value,\n  onValueChange,\n  orientation = 'horizontal',\n  className,\n  ...htmlProps\n}: TabsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Root\n      {...htmlProps}\n      defaultValue={defaultValue}\n      value={value}\n      onValueChange={onValueChange}\n      orientation={orientation}\n      className={classes}\n    >\n      {children}\n    </BaseTabs.Root>\n  );\n}\n\nfunction TabsList({\n  children,\n  variant = 'underline',\n  className,\n  ...htmlProps\n}: TabsListProps) {\n  const variantClass = variant === 'pills' ? styles.listPills : styles.listUnderline;\n  const classes = [styles.list, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <BaseTabs.List {...htmlProps} className={classes}>\n        {children}\n        {variant === 'underline' && <BaseTabs.Indicator className={styles.indicator} />}\n      </BaseTabs.List>\n    </TabsVariantContext.Provider>\n  );\n}\n\nfunction Tab({\n  children,\n  value,\n  disabled,\n  className,\n}: TabProps) {\n  const variant = React.useContext(TabsVariantContext);\n  const variantClass = variant === 'pills' ? styles.tabPills : styles.tabUnderline;\n  const classes = [styles.tab, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Tab value={value} disabled={disabled} className={classes}>\n      {children}\n    </BaseTabs.Tab>\n  );\n}\n\nfunction TabsPanel({\n  children,\n  value,\n  keepMounted = false,\n  flush = false,\n  className,\n  ...htmlProps\n}: TabsPanelProps) {\n  const classes = [\n    styles.panel,\n    flush && styles.panelFlush,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Panel {...htmlProps} value={value} keepMounted={keepMounted} className={classes}>\n      {children}\n    </BaseTabs.Panel>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Tabs = Object.assign(TabsRoot, {\n  List: TabsList,\n  Tab: Tab,\n  Panel: TabsPanel,\n});\n\n// Re-export individual components\nexport { TabsRoot, TabsList, Tab, TabsPanel };\n"],"names":["React","styles","jsx","BaseTabs","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAM,qBAAqBA,iBAAM,cAAqC,WAAW;AAMjF,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAACC,YAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACEC,2BAAAA;AAAAA,IAACC,KAAAA,KAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,eAAe,YAAY,UAAUF,YAAAA,QAAO,YAAYA,YAAAA,QAAO;AACrE,QAAM,UAAU,CAACA,oBAAO,MAAM,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE/E,SACEC,2BAAAA,IAAC,mBAAmB,UAAnB,EAA4B,OAAO,SAClC,UAAAE,2BAAAA,KAACD,KAAAA,KAAS,MAAT,EAAe,GAAG,WAAW,WAAW,SACtC,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,eAAeD,2BAAAA,IAACC,KAAAA,KAAS,WAAT,EAAmB,WAAWF,YAAAA,QAAO,UAAA,CAAW;AAAA,EAAA,EAAA,CAC/E,EAAA,CACF;AAEJ;AAEA,SAAS,IAAI;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,UAAUD,iBAAM,WAAW,kBAAkB;AACnD,QAAM,eAAe,YAAY,UAAUC,YAAAA,QAAO,WAAWA,YAAAA,QAAO;AACpE,QAAM,UAAU,CAACA,oBAAO,KAAK,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE9E,SACEC,2BAAAA,IAACC,UAAS,KAAT,EAAa,OAAc,UAAoB,WAAW,SACxD,UACH;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU;AAAA,IACdF,YAAAA,QAAO;AAAA,IACP,SAASA,YAAAA,QAAO;AAAA,IAChB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACEC,+BAACC,KAAAA,KAAS,OAAT,EAAgB,GAAG,WAAW,OAAc,aAA0B,WAAW,SAC/E,SAAA,CACH;AAEJ;AAMO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AACT,CAAC;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport styles from './Tabs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TabValue = string;\n\n/**\n * Tabbed navigation for switching between content panels.\n * @see https://usefragments.com/components/tabs\n */\nexport interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  children: React.ReactNode;\n  /** Default active tab value (uncontrolled) */\n  defaultValue?: TabValue;\n  /** Controlled active tab value */\n  value?: TabValue;\n  /** Called when the active tab changes */\n  onValueChange?: (value: TabValue) => void;\n  /** Tab layout direction.\n   * @default \"horizontal\" */\n  orientation?: 'horizontal' | 'vertical';\n  /** Tab list visual style (default for Tabs.List).\n   * @default \"underline\" */\n  variant?: 'underline' | 'pills';\n}\n\nexport interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Tab list visual style.\n   * @default \"underline\"\n   * @see https://usefragments.com/components/tabs#variants */\n  variant?: 'underline' | 'pills';\n}\n\nexport interface TabProps {\n  children: React.ReactNode;\n  value: TabValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: TabValue;\n  keepMounted?: boolean;\n  flush?: boolean;\n}\n\n// ============================================\n// Context for variant\n// ============================================\n\nconst TabsVariantContext = React.createContext<'underline' | 'pills'>('underline');\n\n// ============================================\n// Components\n// ============================================\n\nfunction TabsRoot({\n  children,\n  defaultValue,\n  value,\n  onValueChange,\n  orientation = 'horizontal',\n  variant = 'underline',\n  className,\n  ...htmlProps\n}: TabsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <BaseTabs.Root\n        {...htmlProps}\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={onValueChange}\n        orientation={orientation}\n        className={classes}\n      >\n        {children}\n      </BaseTabs.Root>\n    </TabsVariantContext.Provider>\n  );\n}\n\nfunction TabsList({\n  children,\n  variant,\n  className,\n  ...htmlProps\n}: TabsListProps) {\n  const rootVariant = React.useContext(TabsVariantContext);\n  const resolvedVariant = variant ?? rootVariant;\n  const variantClass = resolvedVariant === 'pills' ? styles.listPills : styles.listUnderline;\n  const classes = [styles.list, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <TabsVariantContext.Provider value={resolvedVariant}>\n      <BaseTabs.List {...htmlProps} className={classes}>\n        {children}\n        {resolvedVariant === 'underline' && <BaseTabs.Indicator className={styles.indicator} />}\n      </BaseTabs.List>\n    </TabsVariantContext.Provider>\n  );\n}\n\nfunction Tab({\n  children,\n  value,\n  disabled,\n  className,\n}: TabProps) {\n  const variant = React.useContext(TabsVariantContext);\n  const variantClass = variant === 'pills' ? styles.tabPills : styles.tabUnderline;\n  const classes = [styles.tab, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Tab value={value} disabled={disabled} className={classes}>\n      {children}\n    </BaseTabs.Tab>\n  );\n}\n\nfunction TabsPanel({\n  children,\n  value,\n  keepMounted = false,\n  flush = false,\n  className,\n  ...htmlProps\n}: TabsPanelProps) {\n  const classes = [\n    styles.panel,\n    flush && styles.panelFlush,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Panel {...htmlProps} value={value} keepMounted={keepMounted} className={classes}>\n      {children}\n    </BaseTabs.Panel>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Tabs = Object.assign(TabsRoot, {\n  List: TabsList,\n  Tab: Tab,\n  Panel: TabsPanel,\n});\n\n// Re-export individual components\nexport { TabsRoot, TabsList, Tab, TabsPanel };\n"],"names":["React","styles","jsx","BaseTabs","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAM,qBAAqBA,iBAAM,cAAqC,WAAW;AAMjF,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAACC,YAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACEC,2BAAAA,IAAC,mBAAmB,UAAnB,EAA4B,OAAO,SAClC,UAAAA,2BAAAA;AAAAA,IAACC,KAAAA,KAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,cAAcH,iBAAM,WAAW,kBAAkB;AACvD,QAAM,kBAAkB,WAAW;AACnC,QAAM,eAAe,oBAAoB,UAAUC,YAAAA,QAAO,YAAYA,YAAAA,QAAO;AAC7E,QAAM,UAAU,CAACA,oBAAO,MAAM,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE/E,SACEC,2BAAAA,IAAC,mBAAmB,UAAnB,EAA4B,OAAO,iBAClC,UAAAE,2BAAAA,KAACD,KAAAA,KAAS,MAAT,EAAe,GAAG,WAAW,WAAW,SACtC,UAAA;AAAA,IAAA;AAAA,IACA,oBAAoB,eAAeD,2BAAAA,IAACC,KAAAA,KAAS,WAAT,EAAmB,WAAWF,YAAAA,QAAO,UAAA,CAAW;AAAA,EAAA,EAAA,CACvF,EAAA,CACF;AAEJ;AAEA,SAAS,IAAI;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,UAAUD,iBAAM,WAAW,kBAAkB;AACnD,QAAM,eAAe,YAAY,UAAUC,YAAAA,QAAO,WAAWA,YAAAA,QAAO;AACpE,QAAM,UAAU,CAACA,oBAAO,KAAK,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE9E,SACEC,2BAAAA,IAACC,UAAS,KAAT,EAAa,OAAc,UAAoB,WAAW,SACxD,UACH;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU;AAAA,IACdF,YAAAA,QAAO;AAAA,IACP,SAASA,YAAAA,QAAO;AAAA,IAChB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACEC,+BAACC,KAAAA,KAAS,OAAT,EAAgB,GAAG,WAAW,OAAc,aAA0B,WAAW,SAC/E,SAAA,CACH;AAEJ;AAMO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AACT,CAAC;;;;;;"}

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

@@ -15,6 +15,9 @@ 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';
 }
 export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -35,7 +38,7 @@ export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     keepMounted?: boolean;
     flush?: boolean;
 }
-declare function TabsRoot({ children, defaultValue, value, onValueChange, orientation, className, ...htmlProps }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsRoot({ children, defaultValue, value, onValueChange, orientation, variant, className, ...htmlProps }: TabsProps): import("react/jsx-runtime").JSX.Element;
 declare function TabsList({ children, variant, className, ...htmlProps }: TabsListProps): import("react/jsx-runtime").JSX.Element;
 declare function Tab({ children, value, disabled, className, }: TabProps): import("react/jsx-runtime").JSX.Element;
 declare function TabsPanel({ children, value, keepMounted, flush, className, ...htmlProps }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;

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;AAQ/B,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;;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,KAAK,IAAI,CAAC;IAC1C;+BAC2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;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;CACjC;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;AAYD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,aAAa,EACb,WAA0B,EAC1B,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAeX;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAqB,EACrB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,aAAa,2CAYf;AAED,iBAAS,GAAG,CAAC,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,QAAQ,2CAUV;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,KAAa,EACb,SAAS,EACT,GAAG,SAAS,EACb,EAAE,cAAc,2CAYhB;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;AAQ/B,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;;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,KAAK,IAAI,CAAC;IAC1C;+BAC2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;8BAC0B;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;CACjC;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;CACjC;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;AAYD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,aAAa,EACb,WAA0B,EAC1B,OAAqB,EACrB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAiBX;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,SAAS,EACb,EAAE,aAAa,2CAcf;AAED,iBAAS,GAAG,CAAC,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,QAAQ,2CAUV;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,KAAa,EACb,SAAS,EACT,GAAG,SAAS,EACb,EAAE,cAAc,2CAYhB;AAMD,eAAO,MAAM,IAAI;;;;CAIf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Tabs/index.js

@@ -9,11 +9,12 @@ function TabsRoot({
   value,
   onValueChange,
   orientation = "horizontal",
+  variant = "underline",
   className,
   ...htmlProps
 }) {
   const classes = [styles.root, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
     Tabs$1.Root,
     {
       ...htmlProps,
@@ -24,19 +25,21 @@ function TabsRoot({
       className: classes,
       children
     }
-  );
+  ) });
 }
 function TabsList({
   children,
-  variant = "underline",
+  variant,
   className,
   ...htmlProps
 }) {
-  const variantClass = variant === "pills" ? styles.listPills : styles.listUnderline;
+  const rootVariant = React.useContext(TabsVariantContext);
+  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: variant, children: /* @__PURE__ */ jsxs(Tabs$1.List, { ...htmlProps, className: classes, children: [
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsxs(Tabs$1.List, { ...htmlProps, className: classes, children: [
     children,
-    variant === "underline" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
+    resolvedVariant === "underline" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
   ] }) });
 }
 function Tab({

package/dist/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport styles from './Tabs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TabValue = string;\n\n/**\n * Tabbed navigation for switching between content panels.\n * @see https://usefragments.com/components/tabs\n */\nexport interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  children: React.ReactNode;\n  /** Default active tab value (uncontrolled) */\n  defaultValue?: TabValue;\n  /** Controlled active tab value */\n  value?: TabValue;\n  /** Called when the active tab changes */\n  onValueChange?: (value: TabValue) => void;\n  /** Tab layout direction.\n   * @default \"horizontal\" */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Tab list visual style.\n   * @default \"underline\"\n   * @see https://usefragments.com/components/tabs#variants */\n  variant?: 'underline' | 'pills';\n}\n\nexport interface TabProps {\n  children: React.ReactNode;\n  value: TabValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: TabValue;\n  keepMounted?: boolean;\n  flush?: boolean;\n}\n\n// ============================================\n// Context for variant\n// ============================================\n\nconst TabsVariantContext = React.createContext<'underline' | 'pills'>('underline');\n\n// ============================================\n// Components\n// ============================================\n\nfunction TabsRoot({\n  children,\n  defaultValue,\n  value,\n  onValueChange,\n  orientation = 'horizontal',\n  className,\n  ...htmlProps\n}: TabsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Root\n      {...htmlProps}\n      defaultValue={defaultValue}\n      value={value}\n      onValueChange={onValueChange}\n      orientation={orientation}\n      className={classes}\n    >\n      {children}\n    </BaseTabs.Root>\n  );\n}\n\nfunction TabsList({\n  children,\n  variant = 'underline',\n  className,\n  ...htmlProps\n}: TabsListProps) {\n  const variantClass = variant === 'pills' ? styles.listPills : styles.listUnderline;\n  const classes = [styles.list, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <BaseTabs.List {...htmlProps} className={classes}>\n        {children}\n        {variant === 'underline' && <BaseTabs.Indicator className={styles.indicator} />}\n      </BaseTabs.List>\n    </TabsVariantContext.Provider>\n  );\n}\n\nfunction Tab({\n  children,\n  value,\n  disabled,\n  className,\n}: TabProps) {\n  const variant = React.useContext(TabsVariantContext);\n  const variantClass = variant === 'pills' ? styles.tabPills : styles.tabUnderline;\n  const classes = [styles.tab, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Tab value={value} disabled={disabled} className={classes}>\n      {children}\n    </BaseTabs.Tab>\n  );\n}\n\nfunction TabsPanel({\n  children,\n  value,\n  keepMounted = false,\n  flush = false,\n  className,\n  ...htmlProps\n}: TabsPanelProps) {\n  const classes = [\n    styles.panel,\n    flush && styles.panelFlush,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Panel {...htmlProps} value={value} keepMounted={keepMounted} className={classes}>\n      {children}\n    </BaseTabs.Panel>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Tabs = Object.assign(TabsRoot, {\n  List: TabsList,\n  Tab: Tab,\n  Panel: TabsPanel,\n});\n\n// Re-export individual components\nexport { TabsRoot, TabsList, Tab, TabsPanel };\n"],"names":["BaseTabs"],"mappings":";;;;AAuDA,MAAM,qBAAqB,MAAM,cAAqC,WAAW;AAMjF,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACE;AAAA,IAACA,OAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,eAAe,YAAY,UAAU,OAAO,YAAY,OAAO;AACrE,QAAM,UAAU,CAAC,OAAO,MAAM,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE/E,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,SAClC,UAAA,qBAACA,OAAS,MAAT,EAAe,GAAG,WAAW,WAAW,SACtC,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,eAAe,oBAACA,OAAS,WAAT,EAAmB,WAAW,OAAO,UAAA,CAAW;AAAA,EAAA,EAAA,CAC/E,EAAA,CACF;AAEJ;AAEA,SAAS,IAAI;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,QAAM,eAAe,YAAY,UAAU,OAAO,WAAW,OAAO;AACpE,QAAM,UAAU,CAAC,OAAO,KAAK,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE9E,SACE,oBAACA,OAAS,KAAT,EAAa,OAAc,UAAoB,WAAW,SACxD,UACH;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,IACP,SAAS,OAAO;AAAA,IAChB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,oBAACA,OAAS,OAAT,EAAgB,GAAG,WAAW,OAAc,aAA0B,WAAW,SAC/E,SAAA,CACH;AAEJ;AAMO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AACT,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport styles from './Tabs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TabValue = string;\n\n/**\n * Tabbed navigation for switching between content panels.\n * @see https://usefragments.com/components/tabs\n */\nexport interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  children: React.ReactNode;\n  /** Default active tab value (uncontrolled) */\n  defaultValue?: TabValue;\n  /** Controlled active tab value */\n  value?: TabValue;\n  /** Called when the active tab changes */\n  onValueChange?: (value: TabValue) => void;\n  /** Tab layout direction.\n   * @default \"horizontal\" */\n  orientation?: 'horizontal' | 'vertical';\n  /** Tab list visual style (default for Tabs.List).\n   * @default \"underline\" */\n  variant?: 'underline' | 'pills';\n}\n\nexport interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Tab list visual style.\n   * @default \"underline\"\n   * @see https://usefragments.com/components/tabs#variants */\n  variant?: 'underline' | 'pills';\n}\n\nexport interface TabProps {\n  children: React.ReactNode;\n  value: TabValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: TabValue;\n  keepMounted?: boolean;\n  flush?: boolean;\n}\n\n// ============================================\n// Context for variant\n// ============================================\n\nconst TabsVariantContext = React.createContext<'underline' | 'pills'>('underline');\n\n// ============================================\n// Components\n// ============================================\n\nfunction TabsRoot({\n  children,\n  defaultValue,\n  value,\n  onValueChange,\n  orientation = 'horizontal',\n  variant = 'underline',\n  className,\n  ...htmlProps\n}: TabsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <BaseTabs.Root\n        {...htmlProps}\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={onValueChange}\n        orientation={orientation}\n        className={classes}\n      >\n        {children}\n      </BaseTabs.Root>\n    </TabsVariantContext.Provider>\n  );\n}\n\nfunction TabsList({\n  children,\n  variant,\n  className,\n  ...htmlProps\n}: TabsListProps) {\n  const rootVariant = React.useContext(TabsVariantContext);\n  const resolvedVariant = variant ?? rootVariant;\n  const variantClass = resolvedVariant === 'pills' ? styles.listPills : styles.listUnderline;\n  const classes = [styles.list, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <TabsVariantContext.Provider value={resolvedVariant}>\n      <BaseTabs.List {...htmlProps} className={classes}>\n        {children}\n        {resolvedVariant === 'underline' && <BaseTabs.Indicator className={styles.indicator} />}\n      </BaseTabs.List>\n    </TabsVariantContext.Provider>\n  );\n}\n\nfunction Tab({\n  children,\n  value,\n  disabled,\n  className,\n}: TabProps) {\n  const variant = React.useContext(TabsVariantContext);\n  const variantClass = variant === 'pills' ? styles.tabPills : styles.tabUnderline;\n  const classes = [styles.tab, variantClass, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Tab value={value} disabled={disabled} className={classes}>\n      {children}\n    </BaseTabs.Tab>\n  );\n}\n\nfunction TabsPanel({\n  children,\n  value,\n  keepMounted = false,\n  flush = false,\n  className,\n  ...htmlProps\n}: TabsPanelProps) {\n  const classes = [\n    styles.panel,\n    flush && styles.panelFlush,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BaseTabs.Panel {...htmlProps} value={value} keepMounted={keepMounted} className={classes}>\n      {children}\n    </BaseTabs.Panel>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Tabs = Object.assign(TabsRoot, {\n  List: TabsList,\n  Tab: Tab,\n  Panel: TabsPanel,\n});\n\n// Re-export individual components\nexport { TabsRoot, TabsList, Tab, TabsPanel };\n"],"names":["BaseTabs"],"mappings":";;;;AA0DA,MAAM,qBAAqB,MAAM,cAAqC,WAAW;AAMjF,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,SAClC,UAAA;AAAA,IAACA,OAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,cAAc,MAAM,WAAW,kBAAkB;AACvD,QAAM,kBAAkB,WAAW;AACnC,QAAM,eAAe,oBAAoB,UAAU,OAAO,YAAY,OAAO;AAC7E,QAAM,UAAU,CAAC,OAAO,MAAM,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE/E,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,iBAClC,UAAA,qBAACA,OAAS,MAAT,EAAe,GAAG,WAAW,WAAW,SACtC,UAAA;AAAA,IAAA;AAAA,IACA,oBAAoB,eAAe,oBAACA,OAAS,WAAT,EAAmB,WAAW,OAAO,UAAA,CAAW;AAAA,EAAA,EAAA,CACvF,EAAA,CACF;AAEJ;AAEA,SAAS,IAAI;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,QAAM,eAAe,YAAY,UAAU,OAAO,WAAW,OAAO;AACpE,QAAM,UAAU,CAAC,OAAO,KAAK,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE9E,SACE,oBAACA,OAAS,KAAT,EAAa,OAAc,UAAoB,WAAW,SACxD,UACH;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,IACP,SAAS,OAAO;AAAA,IAChB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,oBAACA,OAAS,OAAT,EAAgB,GAAG,WAAW,OAAc,aAA0B,WAAW,SAC/E,SAAA,CACH;AAEJ;AAMO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AACT,CAAC;"}

package/dist/components/Textarea/index.cjs

@@ -38,18 +38,24 @@ const TextareaRoot = React__namespace.forwardRef(
     label,
     helperText,
     onChange,
+    onValueChange,
     onBlur,
+    rootProps,
     className,
-    name,
-    id,
-    maxLength,
-    required = false,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    ...htmlProps
+    style: wrapperStyle,
+    ...textareaProps
   }, ref) {
     const generatedId = React__namespace.useId();
+    const {
+      id,
+      name,
+      maxLength,
+      required = false,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...nativeTextareaProps
+    } = textareaProps;
     const textareaId = id || generatedId;
     const labelId = label ? `${textareaId}-label` : void 0;
     const helperId = `${textareaId}-helper`;
@@ -59,46 +65,58 @@ const TextareaRoot = React__namespace.forwardRef(
       Textarea_module.default[`resize-${resize}`]
     ].filter(Boolean).join(" ");
     const helperClasses = [Textarea_module.default.helper, error && Textarea_module.default.helperError].filter(Boolean).join(" ");
-    const style = {};
+    const textareaInlineStyle = {};
     if (minRows) {
-      style.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;
+      textareaInlineStyle.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;
     }
     if (maxRows) {
-      style.maxHeight = `calc(${maxRows} * 1.5em + 1.5rem)`;
+      textareaInlineStyle.maxHeight = `calc(${maxRows} * 1.5em + 1.5rem)`;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: [Textarea_module.default.wrapper, className].filter(Boolean).join(" "), children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs("label", { id: labelId, htmlFor: textareaId, className: Textarea_module.default.label, children: [
-        label,
-        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Textarea_module.default.required, children: "*" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
-        {
-          ref,
-          id: textareaId,
-          value,
-          defaultValue,
-          placeholder,
-          rows,
-          name,
-          maxLength,
-          disabled,
-          required,
-          "aria-label": ariaLabel,
-          "aria-labelledby": mergeAriaIds(ariaLabelledBy, labelId),
-          "aria-invalid": error || void 0,
-          "aria-describedby": mergeAriaIds(
-            ariaDescribedBy,
-            helperText ? helperId : void 0
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...rootProps,
+        className: [Textarea_module.default.wrapper, rootProps == null ? void 0 : rootProps.className, className].filter(Boolean).join(" "),
+        style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...wrapperStyle ?? {} },
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs("label", { id: labelId, htmlFor: textareaId, className: Textarea_module.default.label, children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Textarea_module.default.required, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref,
+              id: textareaId,
+              value,
+              defaultValue,
+              placeholder,
+              rows,
+              ...nativeTextareaProps,
+              name,
+              maxLength,
+              disabled,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": mergeAriaIds(ariaLabelledBy, labelId),
+              "aria-invalid": error || void 0,
+              "aria-describedby": mergeAriaIds(
+                ariaDescribedBy,
+                helperText ? helperId : void 0
+              ),
+              onChange: (e) => {
+                onChange == null ? void 0 : onChange(e.target.value);
+                onValueChange == null ? void 0 : onValueChange(e.target.value);
+              },
+              onBlur: () => onBlur == null ? void 0 : onBlur(),
+              className: textareaClasses,
+              style: Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : void 0
+            }
           ),
-          onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
-          onBlur,
-          className: textareaClasses,
-          style: Object.keys(style).length > 0 ? style : void 0
-        }
-      ),
-      helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: helperText })
-    ] });
+          helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: helperText })
+        ]
+      }
+    );
   }
 );
 const Textarea = Object.assign(TextareaRoot, {

package/dist/components/Textarea/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Textarea/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Textarea.module.scss';\n\nexport interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'defaultValue'> {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled usage */\n  defaultValue?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Number of visible text rows */\n  rows?: number;\n  /** Minimum number of rows (for auto-resize) */\n  minRows?: number;\n  /** Maximum number of rows (for auto-resize) */\n  maxRows?: number;\n  /** Allow user to resize the textarea */\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error state */\n  error?: boolean;\n  /** Label text above the textarea */\n  label?: string;\n  /** Helper text below the textarea */\n  helperText?: string;\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n  /** Called when textarea loses focus */\n  onBlur?: () => void;\n  /** Form field name */\n  name?: string;\n  /** Maximum character length */\n  maxLength?: number;\n  /** Required field */\n  required?: boolean;\n  /** Accessible label for no-visible-label usage */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\nconst TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      value,\n      defaultValue,\n      placeholder,\n      rows = 3,\n      minRows,\n      maxRows,\n      resize = 'vertical',\n      disabled = false,\n      error = false,\n      label,\n      helperText,\n      onChange,\n      onBlur,\n      className,\n      name,\n      id,\n      maxLength,\n      required = false,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const textareaId = id || generatedId;\n    const labelId = label ? `${textareaId}-label` : undefined;\n    const helperId = `${textareaId}-helper`;\n\n    const textareaClasses = [\n      styles.textarea,\n      error && styles.error,\n      styles[`resize-${resize}`],\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const helperClasses = [styles.helper, error && styles.helperError]\n      .filter(Boolean)\n      .join(' ');\n\n    // Calculate min/max height based on rows\n    const style: React.CSSProperties = {};\n    if (minRows) {\n      style.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;\n    }\n    if (maxRows) {\n      style.maxHeight = `calc(${maxRows} * 1.5em + 1.5rem)`;\n    }\n\n    return (\n      <div {...htmlProps} className={[styles.wrapper, className].filter(Boolean).join(' ')}>\n        {label && (\n          <label id={labelId} htmlFor={textareaId} className={styles.label}>\n            {label}\n            {required && <span className={styles.required}>*</span>}\n          </label>\n        )}\n        <textarea\n          ref={ref}\n          id={textareaId}\n          value={value}\n          defaultValue={defaultValue}\n          placeholder={placeholder}\n          rows={rows}\n          name={name}\n          maxLength={maxLength}\n          disabled={disabled}\n          required={required}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-invalid={error || undefined}\n          aria-describedby={mergeAriaIds(\n            ariaDescribedBy,\n            helperText ? helperId : undefined\n          )}\n          onChange={(e) => onChange?.(e.target.value)}\n          onBlur={onBlur}\n          className={textareaClasses}\n          style={Object.keys(style).length > 0 ? style : undefined}\n        />\n        {helperText && (\n          <span id={helperId} className={helperClasses}>\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const Textarea = Object.assign(TextareaRoot, {\n  Root: TextareaRoot,\n});\n"],"names":["React","Textarea","styles","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAS,gBAAgB,KAAoD;AAC3E,QAAM,SAAS,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAA;AAC7C,SAAO,OAAO,SAAS,IAAI,SAAS;AACtC;AAEA,MAAM,eAAeA,iBAAM;AAAA,EACzB,SAASC,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,cAAcD,iBAAM,MAAA;AAC1B,UAAM,aAAa,MAAM;AACzB,UAAM,UAAU,QAAQ,GAAG,UAAU,WAAW;AAChD,UAAM,WAAW,GAAG,UAAU;AAE9B,UAAM,kBAAkB;AAAA,MACtBE,gBAAAA,QAAO;AAAA,MACP,SAASA,gBAAAA,QAAO;AAAA,MAChBA,wBAAO,UAAU,MAAM,EAAE;AAAA,IAAA,EAExB,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,gBAAgB,CAACA,wBAAO,QAAQ,SAASA,gBAAAA,QAAO,WAAW,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,QAA6B,CAAA;AACnC,QAAI,SAAS;AACX,YAAM,YAAY,QAAQ,OAAO;AAAA,IACnC;AACA,QAAI,SAAS;AACX,YAAM,YAAY,QAAQ,OAAO;AAAA,IACnC;AAEA,WACEC,2BAAAA,KAAC,OAAA,EAAK,GAAG,WAAW,WAAW,CAACD,wBAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAChF,UAAA;AAAA,MAAA,SACCC,2BAAAA,KAAC,WAAM,IAAI,SAAS,SAAS,YAAY,WAAWD,wBAAO,OACxD,UAAA;AAAA,QAAA;AAAA,QACA,YAAYE,2BAAAA,IAAC,QAAA,EAAK,WAAWF,gBAAAA,QAAO,UAAU,UAAA,IAAA,CAAC;AAAA,MAAA,GAClD;AAAA,MAEFE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAY;AAAA,UACZ,mBAAiB,aAAa,gBAAgB,OAAO;AAAA,UACrD,gBAAc,SAAS;AAAA,UACvB,oBAAkB;AAAA,YAChB;AAAA,YACA,aAAa,WAAW;AAAA,UAAA;AAAA,UAE1B,UAAU,CAAC,MAAM,qCAAW,EAAE,OAAO;AAAA,UACrC;AAAA,UACA,WAAW;AAAA,UACX,OAAO,OAAO,KAAK,KAAK,EAAE,SAAS,IAAI,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhD,cACCA,2BAAAA,IAAC,QAAA,EAAK,IAAI,UAAU,WAAW,eAC5B,UAAA,WAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Textarea/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Textarea.module.scss';\n\nexport interface TextareaProps extends Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'onChange' | 'onBlur' | 'className' | 'style'\n> {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled usage */\n  defaultValue?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Number of visible text rows */\n  rows?: number;\n  /** Minimum number of rows (for auto-resize) */\n  minRows?: number;\n  /** Maximum number of rows (for auto-resize) */\n  maxRows?: number;\n  /** Allow user to resize the textarea */\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error state */\n  error?: boolean;\n  /** Label text above the textarea */\n  label?: string;\n  /** Helper text below the textarea */\n  helperText?: string;\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n  /** Alias for onChange (value-first callback) */\n  onValueChange?: (value: string) => void;\n  /** Called when textarea loses focus */\n  onBlur?: () => void;\n  /** Form field name */\n  name?: string;\n  /** Maximum character length */\n  maxLength?: number;\n  /** Required field */\n  required?: boolean;\n  /** Accessible label for no-visible-label usage */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Props applied to the wrapper element */\n  rootProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Wrapper class name */\n  className?: string;\n  /** Wrapper styles */\n  style?: React.CSSProperties;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\nconst TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      value,\n      defaultValue,\n      placeholder,\n      rows = 3,\n      minRows,\n      maxRows,\n      resize = 'vertical',\n      disabled = false,\n      error = false,\n      label,\n      helperText,\n      onChange,\n      onValueChange,\n      onBlur,\n      rootProps,\n      className,\n      style: wrapperStyle,\n      ...textareaProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const {\n      id,\n      name,\n      maxLength,\n      required = false,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...nativeTextareaProps\n    } = textareaProps;\n    const textareaId = id || generatedId;\n    const labelId = label ? `${textareaId}-label` : undefined;\n    const helperId = `${textareaId}-helper`;\n\n    const textareaClasses = [\n      styles.textarea,\n      error && styles.error,\n      styles[`resize-${resize}`],\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const helperClasses = [styles.helper, error && styles.helperError]\n      .filter(Boolean)\n      .join(' ');\n\n    // Calculate min/max height based on rows\n    const textareaInlineStyle: React.CSSProperties = {};\n    if (minRows) {\n      textareaInlineStyle.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;\n    }\n    if (maxRows) {\n      textareaInlineStyle.maxHeight = `calc(${maxRows} * 1.5em + 1.5rem)`;\n    }\n\n    return (\n      <div\n        {...rootProps}\n        className={[styles.wrapper, rootProps?.className, className].filter(Boolean).join(' ')}\n        style={{ ...(rootProps?.style ?? {}), ...(wrapperStyle ?? {}) }}\n      >\n        {label && (\n          <label id={labelId} htmlFor={textareaId} className={styles.label}>\n            {label}\n            {required && <span className={styles.required}>*</span>}\n          </label>\n        )}\n        <textarea\n          ref={ref}\n          id={textareaId}\n          value={value}\n          defaultValue={defaultValue}\n          placeholder={placeholder}\n          rows={rows}\n          {...nativeTextareaProps}\n          name={name}\n          maxLength={maxLength}\n          disabled={disabled}\n          required={required}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-invalid={error || undefined}\n          aria-describedby={mergeAriaIds(\n            ariaDescribedBy,\n            helperText ? helperId : undefined\n          )}\n          onChange={(e) => {\n            onChange?.(e.target.value);\n            onValueChange?.(e.target.value);\n          }}\n          onBlur={() => onBlur?.()}\n          className={textareaClasses}\n          style={Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : undefined}\n        />\n        {helperText && (\n          <span id={helperId} className={helperClasses}>\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const Textarea = Object.assign(TextareaRoot, {\n  Root: TextareaRoot,\n});\n"],"names":["React","Textarea","styles","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuDA,SAAS,gBAAgB,KAAoD;AAC3E,QAAM,SAAS,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAA;AAC7C,SAAO,OAAO,SAAS,IAAI,SAAS;AACtC;AAEA,MAAM,eAAeA,iBAAM;AAAA,EACzB,SAASC,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,cAAcD,iBAAM,MAAA;AAC1B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IAAA,IACD;AACJ,UAAM,aAAa,MAAM;AACzB,UAAM,UAAU,QAAQ,GAAG,UAAU,WAAW;AAChD,UAAM,WAAW,GAAG,UAAU;AAE9B,UAAM,kBAAkB;AAAA,MACtBE,gBAAAA,QAAO;AAAA,MACP,SAASA,gBAAAA,QAAO;AAAA,MAChBA,wBAAO,UAAU,MAAM,EAAE;AAAA,IAAA,EAExB,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,gBAAgB,CAACA,wBAAO,QAAQ,SAASA,gBAAAA,QAAO,WAAW,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,sBAA2C,CAAA;AACjD,QAAI,SAAS;AACX,0BAAoB,YAAY,QAAQ,OAAO;AAAA,IACjD;AACA,QAAI,SAAS;AACX,0BAAoB,YAAY,QAAQ,OAAO;AAAA,IACjD;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,CAACD,gBAAAA,QAAO,SAAS,uCAAW,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACrF,OAAO,EAAE,IAAI,uCAAW,UAAS,CAAA,GAAK,GAAI,gBAAgB,GAAC;AAAA,QAE1D,UAAA;AAAA,UAAA,SACCC,2BAAAA,KAAC,WAAM,IAAI,SAAS,SAAS,YAAY,WAAWD,wBAAO,OACxD,UAAA;AAAA,YAAA;AAAA,YACA,YAAYE,2BAAAA,IAAC,QAAA,EAAK,WAAWF,gBAAAA,QAAO,UAAU,UAAA,IAAA,CAAC;AAAA,UAAA,GAClD;AAAA,UAEFE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAG;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ,mBAAiB,aAAa,gBAAgB,OAAO;AAAA,cACrD,gBAAc,SAAS;AAAA,cACvB,oBAAkB;AAAA,gBAChB;AAAA,gBACA,aAAa,WAAW;AAAA,cAAA;AAAA,cAE1B,UAAU,CAAC,MAAM;AACf,qDAAW,EAAE,OAAO;AACpB,+DAAgB,EAAE,OAAO;AAAA,cAC3B;AAAA,cACA,QAAQ,MAAM;AAAA,cACd,WAAW;AAAA,cACX,OAAO,OAAO,KAAK,mBAAmB,EAAE,SAAS,IAAI,sBAAsB;AAAA,YAAA;AAAA,UAAA;AAAA,UAE5E,cACCA,2BAAAA,IAAC,QAAA,EAAK,IAAI,UAAU,WAAW,eAC5B,UAAA,WAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,MAAM;AACR,CAAC;;"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'defaultValue'> {
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'onBlur' | 'className' | 'style'> {
     /** Controlled value */
     value?: string;
     /** Default value for uncontrolled usage */
@@ -24,6 +24,8 @@ export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     helperText?: string;
     /** Called when value changes */
     onChange?: (value: string) => void;
+    /** Alias for onChange (value-first callback) */
+    onValueChange?: (value: string) => void;
     /** Called when textarea loses focus */
     onBlur?: () => void;
     /** Form field name */
@@ -38,6 +40,12 @@ export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     'aria-labelledby'?: string;
     /** Accessible described-by relationship */
     'aria-describedby'?: string;
+    /** Props applied to the wrapper element */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Wrapper class name */
+    className?: string;
+    /** Wrapper styles */
+    style?: React.CSSProperties;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>> & {
     Root: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;IACvH,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAsGD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAC9C;IACC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAoHD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}