@fragments-sdk/ui 0.16.1 → 0.17.0

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

@@ -1,19 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_efebc_1";
-const label = "_label_efebc_6";
-const required = "_required_efebc_14";
-const helper = "_helper_efebc_19";
-const helperError = "_helperError_efebc_26";
-const errorMessage = "_errorMessage_efebc_30";
-const textarea = "_textarea_efebc_36";
-const sm = "_sm_efebc_80";
-const lg = "_lg_efebc_85";
-const resizeNone = "_resize-none_efebc_90";
-const resizeVertical = "_resize-vertical_efebc_94";
-const resizeHorizontal = "_resize-horizontal_efebc_98";
-const resizeBoth = "_resize-both_efebc_102";
-const error = "_error_efebc_30";
+const wrapper = "_wrapper_1xzw4_1";
+const label = "_label_1xzw4_6";
+const required = "_required_1xzw4_14";
+const helper = "_helper_1xzw4_19";
+const helperError = "_helperError_1xzw4_26";
+const errorMessage = "_errorMessage_1xzw4_30";
+const textarea = "_textarea_1xzw4_36";
+const sm = "_sm_1xzw4_83";
+const lg = "_lg_1xzw4_88";
+const resizeNone = "_resize-none_1xzw4_93";
+const resizeVertical = "_resize-vertical_1xzw4_97";
+const resizeHorizontal = "_resize-horizontal_1xzw4_101";
+const resizeBoth = "_resize-both_1xzw4_105";
+const error = "_error_1xzw4_30";
+const success = "_success_1xzw4_120";
+const helperSuccess = "_helperSuccess_1xzw4_134";
+const footer = "_footer_1xzw4_138";
+const charCount = "_charCount_1xzw4_149";
+const charCountOver = "_charCountOver_1xzw4_159";
 const styles = {
   wrapper,
   label,
@@ -24,21 +29,30 @@ const styles = {
   textarea,
   sm,
   lg,
-  "resize-none": "_resize-none_efebc_90",
+  "resize-none": "_resize-none_1xzw4_93",
   resizeNone,
-  "resize-vertical": "_resize-vertical_efebc_94",
+  "resize-vertical": "_resize-vertical_1xzw4_97",
   resizeVertical,
-  "resize-horizontal": "_resize-horizontal_efebc_98",
+  "resize-horizontal": "_resize-horizontal_1xzw4_101",
   resizeHorizontal,
-  "resize-both": "_resize-both_efebc_102",
+  "resize-both": "_resize-both_1xzw4_105",
   resizeBoth,
-  error
+  error,
+  success,
+  helperSuccess,
+  footer,
+  charCount,
+  charCountOver
 };
+exports.charCount = charCount;
+exports.charCountOver = charCountOver;
 exports.default = styles;
 exports.error = error;
 exports.errorMessage = errorMessage;
+exports.footer = footer;
 exports.helper = helper;
 exports.helperError = helperError;
+exports.helperSuccess = helperSuccess;
 exports.label = label;
 exports.lg = lg;
 exports.required = required;
@@ -47,5 +61,6 @@ exports.resizeHorizontal = resizeHorizontal;
 exports.resizeNone = resizeNone;
 exports.resizeVertical = resizeVertical;
 exports.sm = sm;
+exports.success = success;
 exports.textarea = textarea;
 exports.wrapper = wrapper;

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

@@ -1,17 +1,22 @@
-const wrapper = "_wrapper_efebc_1";
-const label = "_label_efebc_6";
-const required = "_required_efebc_14";
-const helper = "_helper_efebc_19";
-const helperError = "_helperError_efebc_26";
-const errorMessage = "_errorMessage_efebc_30";
-const textarea = "_textarea_efebc_36";
-const sm = "_sm_efebc_80";
-const lg = "_lg_efebc_85";
-const resizeNone = "_resize-none_efebc_90";
-const resizeVertical = "_resize-vertical_efebc_94";
-const resizeHorizontal = "_resize-horizontal_efebc_98";
-const resizeBoth = "_resize-both_efebc_102";
-const error = "_error_efebc_30";
+const wrapper = "_wrapper_1xzw4_1";
+const label = "_label_1xzw4_6";
+const required = "_required_1xzw4_14";
+const helper = "_helper_1xzw4_19";
+const helperError = "_helperError_1xzw4_26";
+const errorMessage = "_errorMessage_1xzw4_30";
+const textarea = "_textarea_1xzw4_36";
+const sm = "_sm_1xzw4_83";
+const lg = "_lg_1xzw4_88";
+const resizeNone = "_resize-none_1xzw4_93";
+const resizeVertical = "_resize-vertical_1xzw4_97";
+const resizeHorizontal = "_resize-horizontal_1xzw4_101";
+const resizeBoth = "_resize-both_1xzw4_105";
+const error = "_error_1xzw4_30";
+const success = "_success_1xzw4_120";
+const helperSuccess = "_helperSuccess_1xzw4_134";
+const footer = "_footer_1xzw4_138";
+const charCount = "_charCount_1xzw4_149";
+const charCountOver = "_charCountOver_1xzw4_159";
 const styles = {
   wrapper,
   label,
@@ -22,22 +27,31 @@ const styles = {
   textarea,
   sm,
   lg,
-  "resize-none": "_resize-none_efebc_90",
+  "resize-none": "_resize-none_1xzw4_93",
   resizeNone,
-  "resize-vertical": "_resize-vertical_efebc_94",
+  "resize-vertical": "_resize-vertical_1xzw4_97",
   resizeVertical,
-  "resize-horizontal": "_resize-horizontal_efebc_98",
+  "resize-horizontal": "_resize-horizontal_1xzw4_101",
   resizeHorizontal,
-  "resize-both": "_resize-both_efebc_102",
+  "resize-both": "_resize-both_1xzw4_105",
   resizeBoth,
-  error
+  error,
+  success,
+  helperSuccess,
+  footer,
+  charCount,
+  charCountOver
 };
 export {
+  charCount,
+  charCountOver,
   styles as default,
   error,
   errorMessage,
+  footer,
   helper,
   helperError,
+  helperSuccess,
   label,
   lg,
   required,
@@ -46,6 +60,7 @@ export {
   resizeNone,
   resizeVertical,
   sm,
+  success,
   textarea,
   wrapper
 };

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"}