@fragments-sdk/ui 0.16.1 → 0.17.1

package/dist/components/Textarea/index.cjs

@@ -33,6 +33,8 @@ const TextareaRoot = React__namespace.forwardRef(
     size = "md",
     disabled = false,
     error = false,
+    success = false,
+    showCharCount = false,
     label,
     helperText,
     onChange,
@@ -58,13 +60,21 @@ const TextareaRoot = React__namespace.forwardRef(
     const textareaId = id || generatedId;
     const labelId = label ? `${textareaId}-label` : void 0;
     const helperId = `${textareaId}-helper`;
+    const [charCount, setCharCount] = React__namespace.useState(
+      () => (value ?? defaultValue ?? "").length
+    );
     const textareaClasses = [
       Textarea_module.default.textarea,
       Textarea_module.default[size],
       error && Textarea_module.default.error,
+      success && Textarea_module.default.success,
       Textarea_module.default[`resize-${resize}`]
     ].filter(Boolean).join(" ");
-    const helperClasses = [Textarea_module.default.helper, error && Textarea_module.default.helperError].filter(Boolean).join(" ");
+    const helperClasses = [
+      Textarea_module.default.helper,
+      error && Textarea_module.default.helperError,
+      success && Textarea_module.default.helperSuccess
+    ].filter(Boolean).join(" ");
     const textareaInlineStyle = {};
     if (minRows) {
       textareaInlineStyle.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;
@@ -76,6 +86,7 @@ const TextareaRoot = React__namespace.forwardRef(
       "div",
       {
         ...rootProps,
+        "data-success": success || void 0,
         className: [Textarea_module.default.wrapper, rootProps == null ? void 0 : rootProps.className, className].filter(Boolean).join(" "),
         style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...wrapperStyle ?? {} },
         children: [
@@ -105,16 +116,35 @@ const TextareaRoot = React__namespace.forwardRef(
                 helperText ? helperId : void 0
               ),
               onChange: (e) => {
-                onChange == null ? void 0 : onChange(e.target.value);
-                onValueChange == null ? void 0 : onValueChange(e.target.value);
+                const val = e.target.value;
+                setCharCount(val.length);
+                onChange == null ? void 0 : onChange(val);
+                onValueChange == null ? void 0 : onValueChange(val);
               },
-              onBlur: () => onBlur == null ? void 0 : onBlur(),
-              onFocus: () => onFocus == null ? void 0 : onFocus(),
+              onBlur: (e) => onBlur == null ? void 0 : onBlur(e),
+              onFocus: (e) => onFocus == null ? void 0 : onFocus(e),
               className: textareaClasses,
               style: Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : void 0
             }
           ),
-          helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: helperText })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Textarea_module.default.footer, children: [
+            helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: helperText }),
+            showCharCount && maxLength != null && /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: [
+                  Textarea_module.default.charCount,
+                  charCount > maxLength && Textarea_module.default.charCountOver
+                ].filter(Boolean).join(" "),
+                "aria-live": "polite",
+                children: [
+                  charCount,
+                  "/",
+                  maxLength
+                ]
+              }
+            )
+          ] })
         ]
       }
     );

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

@@ -21,6 +21,10 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     disabled?: boolean;
     /** Error state */
     error?: boolean;
+    /** Success state */
+    success?: boolean;
+    /** Show character count when maxLength is set */
+    showCharCount?: boolean;
     /** Label text above the textarea */
     label?: string;
     /** Helper text below the textarea */
@@ -30,9 +34,9 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     /** Alias for onChange (value-first callback) */
     onValueChange?: (value: string) => void;
     /** Called when textarea loses focus */
-    onBlur?: () => void;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
     /** Called when textarea receives focus */
-    onFocus?: () => void;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
     /** Form field name */
     name?: string;
     /** Maximum character length */

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;AAI/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CACnE;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;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,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,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,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;AAmHD,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;AAI/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CACnE;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;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,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,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACtD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACvD,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;AA8ID,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}

package/dist/components/Textarea/index.js

@@ -14,6 +14,8 @@ const TextareaRoot = React.forwardRef(
     size = "md",
     disabled = false,
     error = false,
+    success = false,
+    showCharCount = false,
     label,
     helperText,
     onChange,
@@ -39,13 +41,21 @@ const TextareaRoot = React.forwardRef(
     const textareaId = id || generatedId;
     const labelId = label ? `${textareaId}-label` : void 0;
     const helperId = `${textareaId}-helper`;
+    const [charCount, setCharCount] = React.useState(
+      () => (value ?? defaultValue ?? "").length
+    );
     const textareaClasses = [
       styles.textarea,
       styles[size],
       error && styles.error,
+      success && styles.success,
       styles[`resize-${resize}`]
     ].filter(Boolean).join(" ");
-    const helperClasses = [styles.helper, error && styles.helperError].filter(Boolean).join(" ");
+    const helperClasses = [
+      styles.helper,
+      error && styles.helperError,
+      success && styles.helperSuccess
+    ].filter(Boolean).join(" ");
     const textareaInlineStyle = {};
     if (minRows) {
       textareaInlineStyle.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;
@@ -57,6 +67,7 @@ const TextareaRoot = React.forwardRef(
       "div",
       {
         ...rootProps,
+        "data-success": success || void 0,
         className: [styles.wrapper, rootProps == null ? void 0 : rootProps.className, className].filter(Boolean).join(" "),
         style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...wrapperStyle ?? {} },
         children: [
@@ -86,16 +97,35 @@ const TextareaRoot = React.forwardRef(
                 helperText ? helperId : void 0
               ),
               onChange: (e) => {
-                onChange == null ? void 0 : onChange(e.target.value);
-                onValueChange == null ? void 0 : onValueChange(e.target.value);
+                const val = e.target.value;
+                setCharCount(val.length);
+                onChange == null ? void 0 : onChange(val);
+                onValueChange == null ? void 0 : onValueChange(val);
               },
-              onBlur: () => onBlur == null ? void 0 : onBlur(),
-              onFocus: () => onFocus == null ? void 0 : onFocus(),
+              onBlur: (e) => onBlur == null ? void 0 : onBlur(e),
+              onFocus: (e) => onFocus == null ? void 0 : onFocus(e),
               className: textareaClasses,
               style: Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : void 0
             }
           ),
-          helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: helperClasses, children: helperText })
+          /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+            helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: helperClasses, children: helperText }),
+            showCharCount && maxLength != null && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: [
+                  styles.charCount,
+                  charCount > maxLength && styles.charCountOver
+                ].filter(Boolean).join(" "),
+                "aria-live": "polite",
+                children: [
+                  charCount,
+                  "/",
+                  maxLength
+                ]
+              }
+            )
+          ] })
         ]
       }
     );

package/dist/components/Theme/ThemeToggle.module.scss.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const toggleGroup = "_toggleGroup_bv2fv_1";
-const toggleButton = "_toggleButton_bv2fv_9";
-const toggleButtonActive = "_toggleButtonActive_bv2fv_43";
-const sizeSm = "_sizeSm_bv2fv_60";
-const sizeMd = "_sizeMd_bv2fv_69";
-const sizeLg = "_sizeLg_bv2fv_78";
+const toggleGroup = "_toggleGroup_1kmiy_1";
+const toggleButton = "_toggleButton_1kmiy_9";
+const toggleButtonActive = "_toggleButtonActive_1kmiy_43";
+const sizeSm = "_sizeSm_1kmiy_60";
+const sizeMd = "_sizeMd_1kmiy_69";
+const sizeLg = "_sizeLg_1kmiy_78";
 const styles = {
   toggleGroup,
   toggleButton,

package/dist/components/Theme/ThemeToggle.module.scss.js

@@ -1,9 +1,9 @@
-const toggleGroup = "_toggleGroup_bv2fv_1";
-const toggleButton = "_toggleButton_bv2fv_9";
-const toggleButtonActive = "_toggleButtonActive_bv2fv_43";
-const sizeSm = "_sizeSm_bv2fv_60";
-const sizeMd = "_sizeMd_bv2fv_69";
-const sizeLg = "_sizeLg_bv2fv_78";
+const toggleGroup = "_toggleGroup_1kmiy_1";
+const toggleButton = "_toggleButton_1kmiy_9";
+const toggleButtonActive = "_toggleButtonActive_1kmiy_43";
+const sizeSm = "_sizeSm_1kmiy_60";
+const sizeMd = "_sizeMd_1kmiy_69";
+const sizeLg = "_sizeLg_1kmiy_78";
 const styles = {
   toggleGroup,
   toggleButton,

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

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const container = "_container_19oju_1";
-const topleft = "_topleft_19oju_15";
-const topcenter = "_topcenter_19oju_20";
-const topright = "_topright_19oju_26";
-const bottomleft = "_bottomleft_19oju_31";
-const bottomcenter = "_bottomcenter_19oju_37";
-const bottomright = "_bottomright_19oju_44";
-const toast = "_toast_19oju_50";
-const toastEnter = "_toastEnter_19oju_1";
-const icon = "_icon_19oju_73";
-const success = "_success_19oju_77";
-const error = "_error_19oju_84";
-const warning = "_warning_19oju_91";
-const info = "_info_19oju_98";
-const content = "_content_19oju_116";
-const title = "_title_19oju_121";
-const description = "_description_19oju_128";
-const action = "_action_19oju_135";
-const close = "_close_19oju_160";
+const container = "_container_18ve0_1";
+const topleft = "_topleft_18ve0_15";
+const topcenter = "_topcenter_18ve0_20";
+const topright = "_topright_18ve0_26";
+const bottomleft = "_bottomleft_18ve0_31";
+const bottomcenter = "_bottomcenter_18ve0_37";
+const bottomright = "_bottomright_18ve0_44";
+const toast = "_toast_18ve0_50";
+const toastEnter = "_toastEnter_18ve0_1";
+const icon = "_icon_18ve0_73";
+const success = "_success_18ve0_77";
+const title = "_title_18ve0_81";
+const description = "_description_18ve0_84";
+const error = "_error_18ve0_92";
+const warning = "_warning_18ve0_107";
+const info = "_info_18ve0_122";
+const content = "_content_18ve0_148";
+const action = "_action_18ve0_167";
+const close = "_close_18ve0_192";
 const styles = {
   container,
   topleft,
@@ -29,15 +29,15 @@ const styles = {
   bottomright,
   toast,
   toastEnter,
-  "default": "_default_19oju_73",
+  "default": "_default_18ve0_73",
   icon,
   success,
+  title,
+  description,
   error,
   warning,
   info,
   content,
-  title,
-  description,
   action,
   close
 };

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

@@ -1,22 +1,22 @@
-const container = "_container_19oju_1";
-const topleft = "_topleft_19oju_15";
-const topcenter = "_topcenter_19oju_20";
-const topright = "_topright_19oju_26";
-const bottomleft = "_bottomleft_19oju_31";
-const bottomcenter = "_bottomcenter_19oju_37";
-const bottomright = "_bottomright_19oju_44";
-const toast = "_toast_19oju_50";
-const toastEnter = "_toastEnter_19oju_1";
-const icon = "_icon_19oju_73";
-const success = "_success_19oju_77";
-const error = "_error_19oju_84";
-const warning = "_warning_19oju_91";
-const info = "_info_19oju_98";
-const content = "_content_19oju_116";
-const title = "_title_19oju_121";
-const description = "_description_19oju_128";
-const action = "_action_19oju_135";
-const close = "_close_19oju_160";
+const container = "_container_18ve0_1";
+const topleft = "_topleft_18ve0_15";
+const topcenter = "_topcenter_18ve0_20";
+const topright = "_topright_18ve0_26";
+const bottomleft = "_bottomleft_18ve0_31";
+const bottomcenter = "_bottomcenter_18ve0_37";
+const bottomright = "_bottomright_18ve0_44";
+const toast = "_toast_18ve0_50";
+const toastEnter = "_toastEnter_18ve0_1";
+const icon = "_icon_18ve0_73";
+const success = "_success_18ve0_77";
+const title = "_title_18ve0_81";
+const description = "_description_18ve0_84";
+const error = "_error_18ve0_92";
+const warning = "_warning_18ve0_107";
+const info = "_info_18ve0_122";
+const content = "_content_18ve0_148";
+const action = "_action_18ve0_167";
+const close = "_close_18ve0_192";
 const styles = {
   container,
   topleft,
@@ -27,15 +27,15 @@ const styles = {
   bottomright,
   toast,
   toastEnter,
-  "default": "_default_19oju_73",
+  "default": "_default_18ve0_73",
   icon,
   success,
+  title,
+  description,
   error,
   warning,
   info,
   content,
-  title,
-  description,
   action,
   close
 };

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1g50k_1";
-const rootWithHelper = "_rootWithHelper_1g50k_14";
-const track = "_track_1g50k_17";
-const trackSm = "_trackSm_1g50k_47";
-const trackLg = "_trackLg_1g50k_59";
-const trackMd = "_trackMd_1g50k_71";
-const thumb = "_thumb_1g50k_83";
-const content = "_content_1g50k_107";
-const label = "_label_1g50k_111";
-const labelSm = "_labelSm_1g50k_119";
-const labelLg = "_labelLg_1g50k_123";
-const helper = "_helper_1g50k_127";
-const helperSm = "_helperSm_1g50k_135";
+const root = "_root_7kgme_1";
+const rootWithHelper = "_rootWithHelper_7kgme_14";
+const track = "_track_7kgme_17";
+const trackSm = "_trackSm_7kgme_49";
+const trackLg = "_trackLg_7kgme_61";
+const trackMd = "_trackMd_7kgme_73";
+const thumb = "_thumb_7kgme_85";
+const content = "_content_7kgme_108";
+const label = "_label_7kgme_112";
+const labelSm = "_labelSm_7kgme_120";
+const labelLg = "_labelLg_7kgme_124";
+const helper = "_helper_7kgme_128";
+const helperSm = "_helperSm_7kgme_136";
 const styles = {
   root,
   rootWithHelper,

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

@@ -1,16 +1,16 @@
-const root = "_root_1g50k_1";
-const rootWithHelper = "_rootWithHelper_1g50k_14";
-const track = "_track_1g50k_17";
-const trackSm = "_trackSm_1g50k_47";
-const trackLg = "_trackLg_1g50k_59";
-const trackMd = "_trackMd_1g50k_71";
-const thumb = "_thumb_1g50k_83";
-const content = "_content_1g50k_107";
-const label = "_label_1g50k_111";
-const labelSm = "_labelSm_1g50k_119";
-const labelLg = "_labelLg_1g50k_123";
-const helper = "_helper_1g50k_127";
-const helperSm = "_helperSm_1g50k_135";
+const root = "_root_7kgme_1";
+const rootWithHelper = "_rootWithHelper_7kgme_14";
+const track = "_track_7kgme_17";
+const trackSm = "_trackSm_7kgme_49";
+const trackLg = "_trackLg_7kgme_61";
+const trackMd = "_trackMd_7kgme_73";
+const thumb = "_thumb_7kgme_85";
+const content = "_content_7kgme_108";
+const label = "_label_7kgme_112";
+const labelSm = "_labelSm_7kgme_120";
+const labelLg = "_labelLg_7kgme_124";
+const helper = "_helper_7kgme_128";
+const helperSm = "_helperSm_7kgme_136";
 const styles = {
   root,
   rootWithHelper,

package/dist/components/Toggle/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const _switch = require("@base-ui/react/switch");
+const aria = require("../../utils/aria.cjs");
 const Toggle_module = require("./Toggle.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -40,6 +41,9 @@ const SwitchRoot = React__namespace.forwardRef(
     "aria-describedby": ariaDescribedBy
   }, ref) {
     const resolvedHelperText = helperText ?? description;
+    const generatedId = React__namespace.useId();
+    const resolvedId = id ?? `switch-${generatedId}`;
+    const helperId = resolvedHelperText ? `${resolvedId}-helper` : void 0;
     const trackClasses = [
       Toggle_module.default.track,
       size === "sm" ? Toggle_module.default.trackSm : size === "lg" ? Toggle_module.default.trackLg : Toggle_module.default.trackMd
@@ -63,7 +67,7 @@ const SwitchRoot = React__namespace.forwardRef(
       _switch.Switch.Root,
       {
         ref,
-        id,
+        id: resolvedId,
         checked,
         defaultChecked,
         onCheckedChange: onCheckedChange ?? onChange,
@@ -72,12 +76,12 @@ const SwitchRoot = React__namespace.forwardRef(
         className: rootClasses,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy,
+        "aria-describedby": aria.mergeAriaIds(ariaDescribedBy, helperId),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: trackClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: thumbClasses }) }),
           (label || resolvedHelperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Toggle_module.default.content, children: [
             label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClasses, children: label }),
-            resolvedHelperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: helperClasses, children: resolvedHelperText })
+            resolvedHelperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: resolvedHelperText })
           ] })
         ]
       }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AAmFtC,eAAO,MAAM,MAAM;;CAEjB,CAAC;AAEH,wCAAwC;AACxC,eAAO,MAAM,MAAM;;CAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AA0FtC,eAAO,MAAM,MAAM;;CAEjB,CAAC;AAEH,wCAAwC;AACxC,eAAO,MAAM,MAAM;;CAAS,CAAC"}

package/dist/components/Toggle/index.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { mergeAriaIds } from "../../utils/aria.js";
 import styles from "./Toggle.module.scss.js";
 const SwitchRoot = React.forwardRef(
   function Switch2({
@@ -21,6 +22,9 @@ const SwitchRoot = React.forwardRef(
     "aria-describedby": ariaDescribedBy
   }, ref) {
     const resolvedHelperText = helperText ?? description;
+    const generatedId = React.useId();
+    const resolvedId = id ?? `switch-${generatedId}`;
+    const helperId = resolvedHelperText ? `${resolvedId}-helper` : void 0;
     const trackClasses = [
       styles.track,
       size === "sm" ? styles.trackSm : size === "lg" ? styles.trackLg : styles.trackMd
@@ -44,7 +48,7 @@ const SwitchRoot = React.forwardRef(
       Switch$1.Root,
       {
         ref,
-        id,
+        id: resolvedId,
         checked,
         defaultChecked,
         onCheckedChange: onCheckedChange ?? onChange,
@@ -53,12 +57,12 @@ const SwitchRoot = React.forwardRef(
         className: rootClasses,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy,
+        "aria-describedby": mergeAriaIds(ariaDescribedBy, helperId),
         children: [
           /* @__PURE__ */ jsx("span", { className: trackClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: thumbClasses }) }),
           (label || resolvedHelperText) && /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
             label && /* @__PURE__ */ jsx("span", { className: labelClasses, children: label }),
-            resolvedHelperText && /* @__PURE__ */ jsx("span", { className: helperClasses, children: resolvedHelperText })
+            resolvedHelperText && /* @__PURE__ */ jsx("span", { id: helperId, className: helperClasses, children: resolvedHelperText })
           ] })
         ]
       }

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

@@ -1,33 +1,33 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const group = "_group_lpcmd_1";
-const gapXs = "_gap-xs_lpcmd_6";
-const gapSm = "_gap-sm_lpcmd_10";
-const item = "_item_lpcmd_20";
-const selected = "_selected_lpcmd_25";
-const pills = "_pills_lpcmd_30";
-const outline = "_outline_lpcmd_43";
-const disabled = "_disabled_lpcmd_101";
-const sizeSm = "_size-sm_lpcmd_106";
-const sizeMd = "_size-md_lpcmd_112";
-const sizeLg = "_size-lg_lpcmd_118";
+const group = "_group_1t7sg_1";
+const gapXs = "_gap-xs_1t7sg_6";
+const gapSm = "_gap-sm_1t7sg_10";
+const item = "_item_1t7sg_21";
+const selected = "_selected_1t7sg_26";
+const pills = "_pills_1t7sg_32";
+const outline = "_outline_1t7sg_47";
+const disabled = "_disabled_1t7sg_106";
+const sizeSm = "_size-sm_1t7sg_111";
+const sizeMd = "_size-md_1t7sg_117";
+const sizeLg = "_size-lg_1t7sg_123";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_lpcmd_6",
+  "gap-xs": "_gap-xs_1t7sg_6",
   gapXs,
-  "gap-sm": "_gap-sm_lpcmd_10",
+  "gap-sm": "_gap-sm_1t7sg_10",
   gapSm,
-  "default": "_default_lpcmd_14",
+  "default": "_default_1t7sg_14",
   item,
   selected,
   pills,
   outline,
   disabled,
-  "size-sm": "_size-sm_lpcmd_106",
+  "size-sm": "_size-sm_1t7sg_111",
   sizeSm,
-  "size-md": "_size-md_lpcmd_112",
+  "size-md": "_size-md_1t7sg_117",
   sizeMd,
-  "size-lg": "_size-lg_lpcmd_118",
+  "size-lg": "_size-lg_1t7sg_123",
   sizeLg
 };
 exports.default = styles;

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

@@ -1,31 +1,31 @@
-const group = "_group_lpcmd_1";
-const gapXs = "_gap-xs_lpcmd_6";
-const gapSm = "_gap-sm_lpcmd_10";
-const item = "_item_lpcmd_20";
-const selected = "_selected_lpcmd_25";
-const pills = "_pills_lpcmd_30";
-const outline = "_outline_lpcmd_43";
-const disabled = "_disabled_lpcmd_101";
-const sizeSm = "_size-sm_lpcmd_106";
-const sizeMd = "_size-md_lpcmd_112";
-const sizeLg = "_size-lg_lpcmd_118";
+const group = "_group_1t7sg_1";
+const gapXs = "_gap-xs_1t7sg_6";
+const gapSm = "_gap-sm_1t7sg_10";
+const item = "_item_1t7sg_21";
+const selected = "_selected_1t7sg_26";
+const pills = "_pills_1t7sg_32";
+const outline = "_outline_1t7sg_47";
+const disabled = "_disabled_1t7sg_106";
+const sizeSm = "_size-sm_1t7sg_111";
+const sizeMd = "_size-md_1t7sg_117";
+const sizeLg = "_size-lg_1t7sg_123";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_lpcmd_6",
+  "gap-xs": "_gap-xs_1t7sg_6",
   gapXs,
-  "gap-sm": "_gap-sm_lpcmd_10",
+  "gap-sm": "_gap-sm_1t7sg_10",
   gapSm,
-  "default": "_default_lpcmd_14",
+  "default": "_default_1t7sg_14",
   item,
   selected,
   pills,
   outline,
   disabled,
-  "size-sm": "_size-sm_lpcmd_106",
+  "size-sm": "_size-sm_1t7sg_111",
   sizeSm,
-  "size-md": "_size-md_lpcmd_112",
+  "size-md": "_size-md_1t7sg_117",
   sizeMd,
-  "size-lg": "_size-lg_lpcmd_118",
+  "size-lg": "_size-lg_1t7sg_123",
   sizeLg
 };
 export {

package/dist/index.d.ts

@@ -29,12 +29,12 @@ export { DataTable, createColumns, type DataTableProps, type DataTableColumn, ty
 export { EmptyState, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, type EmptyStateProps, type EmptyStateIconProps, type EmptyStateTitleProps, type EmptyStateDescriptionProps, type EmptyStateActionsProps, } from './components/EmptyState';
 export { Toast, ToastProvider, useToast, type ToastProps, type ToastProviderProps, type ToastData, type ToastVariant, type ToastPosition, } from './components/Toast';
 export { Field, type FieldProps, type FieldLabelProps, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldValidityProps, } from './components/Field';
-export { Fieldset, type FieldsetProps, type FieldsetLegendProps, } from './components/Fieldset';
+export { Fieldset, type FieldsetProps, type FieldsetLegendProps, type FieldsetDescriptionProps, } from './components/Fieldset';
 export { Form, type FormProps } from './components/Form';
 export { Sidebar, SidebarProvider, useSidebar, useSidebarContext, // deprecated, use useSidebar instead
 type SidebarProviderProps, type SidebarProps, type SidebarHeaderProps, type SidebarNavProps, type SidebarSectionProps, type SidebarSectionActionProps, type SidebarItemProps, type SidebarSubItemProps, type SidebarFooterProps, type SidebarTriggerProps, type SidebarOverlayProps, type SidebarCollapseToggleProps, type SidebarRailProps, type SidebarMenuSkeletonProps, type SidebarCollapsible, } from './components/Sidebar';
 export { Theme, ThemeProvider, ThemeToggle, useTheme, configureTheme, type ThemeProviderProps, type ThemeToggleProps, type ThemeMode, type UseThemeReturn, type ConfigureThemeOptions, type NeutralPalette, type DensityPreset, type RadiusStyle, } from './components/Theme';
-export { Header, type HeaderProps, type HeaderBrandProps, type HeaderNavProps, type HeaderNavItemProps, type HeaderSearchProps, type HeaderActionsProps, type HeaderTriggerProps, } from './components/Header';
+export { Header, type HeaderProps, type HeaderBrandProps, type HeaderNavProps, type HeaderNavItemProps, type HeaderSearchProps, type HeaderActionsProps, type HeaderTriggerProps, type HeaderMobileNavProps, } from './components/Header';
 export { AppShell, type AppShellProps, type AppShellLayout, type AppShellSlotVariant, type AppShellHeaderProps, type AppShellSidebarProps, type AppShellMainProps, type AppShellAsideProps, } from './components/AppShell';
 export { Stack, type StackProps, type ResponsiveDirection, type ResponsiveGap, } from './components/Stack';
 export { Text, type TextProps } from './components/Text';