@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/dist/form/Switch.js

@@ -1,17 +1,13 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef, useState } from "react";
+import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
 import { Label } from "./Label.js";
 import { SwitchTrack } from "./SwitchTrack.js";
 import { switchStyles } from "./switchStyles.js";
-const noop = ()=>{
-// do nothing
-};
 /**
- * **Client Component**
+ * **Server Component**
  *
  * @example
  * Simple Example
@@ -38,10 +34,8 @@ const noop = ()=>{
  *
  * @remarks \@since 6.0.0 Added support for `FormMessage` behavior.
  */ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props, ref) {
-    const { id: propId, label, labelProps, style, className, containerProps, ballProps, ballStyle, ballClassName, trackProps, trackStyle, trackClassName, messageProps, messageContainerProps, disableLabelGap = false, error = false, active = false, stacked = false, iconAfter = false, disabled = false, readOnly = false, onChange = noop, defaultChecked = false, ...remaining } = props;
+    const { id: propId, label, labelProps, style, className, containerProps, ballProps, ballStyle, ballClassName, ballAddon, trackProps, trackStyle, trackClassName, messageProps, messageContainerProps, disableLabelGap = false, error = false, active = false, stacked = false, iconAfter = false, disabled = false, readOnly = false, ...remaining } = props;
     const id = useEnsuredId(propId, "switch");
-    const [isChecked, setChecked] = useState(defaultChecked);
-    const checked = props.checked ?? isChecked;
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
         ...messageContainerProps,
         messageProps: messageProps,
@@ -61,13 +55,15 @@ const noop = ()=>{
                     ...containerProps,
                     className: switchStyles({
                         clickable: !disabled && !readOnly,
-                        className: containerProps?.className
+                        className: containerProps?.className,
+                        currentColor: active || error
                     }),
                     children: /*#__PURE__*/ _jsx(SwitchTrack, {
                         style: trackStyle,
                         ...trackProps,
                         className: cnb(trackClassName, trackProps?.className),
                         disabled: disabled,
+                        ballAddon: ballAddon,
                         ballProps: ballProps,
                         ballStyle: ballStyle,
                         ballClassName: ballClassName,
@@ -78,22 +74,7 @@ const noop = ()=>{
                             role: "switch",
                             type: "checkbox",
                             className: cnb("rmd-switch__input rmd-hidden-input", disabled && "rmd-hidden-input--disabled"),
-                            disabled: disabled,
-                            checked: checked,
-                            onChange: (event)=>{
-                                // checkboxes do not natively support the readOnly attribute, so
-                                // polyfill it in. can't use `disabled` since the checkbox's
-                                // checked/unchecked state would then not be submitted in forms.
-                                if (readOnly) {
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    return;
-                                }
-                                onChange(event);
-                                if (typeof props.checked === "undefined") {
-                                    setChecked(event.currentTarget.checked);
-                                }
-                            }
+                            disabled: disabled
                         })
                     })
                 })

package/dist/form/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Switch.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { type InputToggleLabelProps } from \"./InputToggle.js\";\nimport { Label } from \"./Label.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { switchStyles } from \"./switchStyles.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0 Added `containerProps` and support for the\n * `FormMessage` behavior.\n */\nexport interface SwitchProps\n  extends InputHTMLAttributes<HTMLInputElement>,\n    InputToggleLabelProps,\n    FormMessageContainerExtension,\n    FormComponentStates {\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Switch } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <Form>\n *       <Switch\n *         label=\"Label\"\n *         name=\"enabled\"\n *         checked={checked}\n *         onChange={(event) => setChecked(event.currentTarget.checked)}\n *       />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Added support for `FormMessage` behavior.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  function Switch(props, ref) {\n    const {\n      id: propId,\n      label,\n      labelProps,\n      style,\n      className,\n      containerProps,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      trackProps,\n      trackStyle,\n      trackClassName,\n      messageProps,\n      messageContainerProps,\n      disableLabelGap = false,\n      error = false,\n      active = false,\n      stacked = false,\n      iconAfter = false,\n      disabled = false,\n      readOnly = false,\n      onChange = noop,\n      defaultChecked = false,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"switch\");\n    const [isChecked, setChecked] = useState(defaultChecked);\n    const checked = props.checked ?? isChecked;\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          style={style}\n          {...labelProps}\n          className={cnb(className, labelProps?.className)}\n          gap={!disableLabelGap}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n        >\n          {label}\n          <div\n            {...containerProps}\n            className={switchStyles({\n              clickable: !disabled && !readOnly,\n              className: containerProps?.className,\n            })}\n          >\n            <SwitchTrack\n              style={trackStyle}\n              {...trackProps}\n              className={cnb(trackClassName, trackProps?.className)}\n              disabled={disabled}\n              ballProps={ballProps}\n              ballStyle={ballStyle}\n              ballClassName={ballClassName}\n            >\n              <input\n                {...remaining}\n                id={id}\n                ref={ref}\n                role=\"switch\"\n                type=\"checkbox\"\n                className={cnb(\n                  \"rmd-switch__input rmd-hidden-input\",\n                  disabled && \"rmd-hidden-input--disabled\"\n                )}\n                disabled={disabled}\n                checked={checked}\n                onChange={(event) => {\n                  // checkboxes do not natively support the readOnly attribute, so\n                  // polyfill it in. can't use `disabled` since the checkbox's\n                  // checked/unchecked state would then not be submitted in forms.\n                  if (readOnly) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    return;\n                  }\n\n                  onChange(event);\n                  if (typeof props.checked === \"undefined\") {\n                    setChecked(event.currentTarget.checked);\n                  }\n                }}\n              />\n            </SwitchTrack>\n          </div>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useState","useEnsuredId","FormMessageContainer","Label","SwitchTrack","switchStyles","noop","Switch","props","ref","id","propId","label","labelProps","style","className","containerProps","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","messageProps","messageContainerProps","disableLabelGap","error","active","stacked","iconAfter","disabled","readOnly","onChange","defaultChecked","remaining","isChecked","setChecked","checked","gap","reversed","div","clickable","input","role","type","event","preventDefault","stopPropagation","currentTarget"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,QAAQ,QAIH,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,oBAAoB;AAMjD,MAAMC,OAAO;AACX,aAAa;AACf;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,uBAASR,WACpB,SAASQ,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,qBAAqB,EACrBC,kBAAkB,KAAK,EACvBC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW1B,IAAI,EACf2B,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAG1B;IACJ,MAAME,KAAKT,aAAaU,QAAQ;IAChC,MAAM,CAACwB,WAAWC,WAAW,GAAGpC,SAASiC;IACzC,MAAMI,UAAU7B,MAAM6B,OAAO,IAAIF;IAEjC,qBACE,KAACjC;QACE,GAAGsB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACCW,OAAOA;YACN,GAAGD,UAAU;YACdE,WAAWjB,IAAIiB,WAAWF,YAAYE;YACtCuB,KAAK,CAACb;YACNG,SAASA;YACTW,UAAU,CAACV;YACXF,QAAQA;YACRD,OAAOA;YACPI,UAAUA;;gBAETlB;8BACD,KAAC4B;oBACE,GAAGxB,cAAc;oBAClBD,WAAWV,aAAa;wBACtBoC,WAAW,CAACX,YAAY,CAACC;wBACzBhB,WAAWC,gBAAgBD;oBAC7B;8BAEA,cAAA,KAACX;wBACCU,OAAOO;wBACN,GAAGD,UAAU;wBACdL,WAAWjB,IAAIwB,gBAAgBF,YAAYL;wBAC3Ce,UAAUA;wBACVb,WAAWA;wBACXC,WAAWA;wBACXC,eAAeA;kCAEf,cAAA,KAACuB;4BACE,GAAGR,SAAS;4BACbxB,IAAIA;4BACJD,KAAKA;4BACLkC,MAAK;4BACLC,MAAK;4BACL7B,WAAWjB,IACT,sCACAgC,YAAY;4BAEdA,UAAUA;4BACVO,SAASA;4BACTL,UAAU,CAACa;gCACT,gEAAgE;gCAChE,4DAA4D;gCAC5D,gEAAgE;gCAChE,IAAId,UAAU;oCACZc,MAAMC,cAAc;oCACpBD,MAAME,eAAe;oCACrB;gCACF;gCAEAf,SAASa;gCACT,IAAI,OAAOrC,MAAM6B,OAAO,KAAK,aAAa;oCACxCD,WAAWS,MAAMG,aAAa,CAACX,OAAO;gCACxC;4BACF;;;;;;;AAOd,GACA"}
+{"version":3,"sources":["../../src/form/Switch.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { type InputToggleLabelProps } from \"./InputToggle.js\";\nimport { Label } from \"./Label.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { switchStyles } from \"./switchStyles.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added `containerProps` and support for the\n * `FormMessage` behavior.\n */\nexport interface SwitchProps\n  extends InputHTMLAttributes<HTMLInputElement>,\n    InputToggleLabelProps,\n    FormMessageContainerExtension,\n    FormComponentStates {\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Switch } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <Form>\n *       <Switch\n *         label=\"Label\"\n *         name=\"enabled\"\n *         checked={checked}\n *         onChange={(event) => setChecked(event.currentTarget.checked)}\n *       />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Added support for `FormMessage` behavior.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  function Switch(props, ref) {\n    const {\n      id: propId,\n      label,\n      labelProps,\n      style,\n      className,\n      containerProps,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      ballAddon,\n      trackProps,\n      trackStyle,\n      trackClassName,\n      messageProps,\n      messageContainerProps,\n      disableLabelGap = false,\n      error = false,\n      active = false,\n      stacked = false,\n      iconAfter = false,\n      disabled = false,\n      readOnly = false,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"switch\");\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          style={style}\n          {...labelProps}\n          className={cnb(className, labelProps?.className)}\n          gap={!disableLabelGap}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n        >\n          {label}\n          <div\n            {...containerProps}\n            className={switchStyles({\n              clickable: !disabled && !readOnly,\n              className: containerProps?.className,\n              currentColor: active || error,\n            })}\n          >\n            <SwitchTrack\n              style={trackStyle}\n              {...trackProps}\n              className={cnb(trackClassName, trackProps?.className)}\n              disabled={disabled}\n              ballAddon={ballAddon}\n              ballProps={ballProps}\n              ballStyle={ballStyle}\n              ballClassName={ballClassName}\n            >\n              <input\n                {...remaining}\n                id={id}\n                ref={ref}\n                role=\"switch\"\n                type=\"checkbox\"\n                className={cnb(\n                  \"rmd-switch__input rmd-hidden-input\",\n                  disabled && \"rmd-hidden-input--disabled\"\n                )}\n                disabled={disabled}\n              />\n            </SwitchTrack>\n          </div>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEnsuredId","FormMessageContainer","Label","SwitchTrack","switchStyles","Switch","props","ref","id","propId","label","labelProps","style","className","containerProps","ballProps","ballStyle","ballClassName","ballAddon","trackProps","trackStyle","trackClassName","messageProps","messageContainerProps","disableLabelGap","error","active","stacked","iconAfter","disabled","readOnly","remaining","gap","reversed","div","clickable","currentColor","input","role","type"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,oBAAoB;AAyBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,uBAASN,WACpB,SAASM,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,qBAAqB,EACrBC,kBAAkB,KAAK,EACvBC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGsB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACCU,OAAOA;YACN,GAAGD,UAAU;YACdE,WAAWf,IAAIe,WAAWF,YAAYE;YACtCmB,KAAK,CAACR;YACNG,SAASA;YACTM,UAAU,CAACL;YACXF,QAAQA;YACRD,OAAOA;YACPI,UAAUA;;gBAETnB;8BACD,KAACwB;oBACE,GAAGpB,cAAc;oBAClBD,WAAWT,aAAa;wBACtB+B,WAAW,CAACN,YAAY,CAACC;wBACzBjB,WAAWC,gBAAgBD;wBAC3BuB,cAAcV,UAAUD;oBAC1B;8BAEA,cAAA,KAACtB;wBACCS,OAAOQ;wBACN,GAAGD,UAAU;wBACdN,WAAWf,IAAIuB,gBAAgBF,YAAYN;wBAC3CgB,UAAUA;wBACVX,WAAWA;wBACXH,WAAWA;wBACXC,WAAWA;wBACXC,eAAeA;kCAEf,cAAA,KAACoB;4BACE,GAAGN,SAAS;4BACbvB,IAAIA;4BACJD,KAAKA;4BACL+B,MAAK;4BACLC,MAAK;4BACL1B,WAAWf,IACT,sCACA+B,YAAY;4BAEdA,UAAUA;;;;;;;AAOxB,GACA"}

package/dist/form/SwitchTrack.d.ts

@@ -1,8 +1,9 @@
-import { type CSSProperties, type HTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
 import { type PropsWithRef } from "../types.js";
 export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     disabled?: boolean;
+    ballAddon?: ReactNode;
     ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
     ballStyle?: CSSProperties;
     ballClassName?: string;

package/dist/form/SwitchTrack.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { bem } from "../utils/bem.js";
@@ -6,7 +6,7 @@ const styles = bem("rmd-switch");
 /**
  * **Server Component**
  */ export const SwitchTrack = /*#__PURE__*/ forwardRef(function SwitchTrack(props, ref) {
-    const { style, className, ballProps, ballStyle, ballClassName, active, children, disabled = false, ...remaining } = props;
+    const { style, className, ballAddon, ballProps, ballStyle, ballClassName, active, children, disabled = false, ...remaining } = props;
     return /*#__PURE__*/ _jsxs("div", {
         ...remaining,
         ref: ref,
@@ -16,12 +16,16 @@ const styles = bem("rmd-switch");
         }), className),
         children: [
             children,
-            /*#__PURE__*/ _jsx("span", {
+            /*#__PURE__*/ _jsxs("span", {
                 style: ballStyle,
                 ...ballProps,
                 className: cnb(styles("ball", {
                     active
-                }), ballClassName)
+                }), ballClassName),
+                children: [
+                    ballAddon,
+                    ballProps?.children
+                ]
             })
         ]
     });

package/dist/form/SwitchTrack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SwitchTrack.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-switch\");\n\nexport interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {\n  active?: boolean;\n  disabled?: boolean;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Server Component**\n */\nexport const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(\n  function SwitchTrack(props, ref) {\n    const {\n      style,\n      className,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      active,\n      children,\n      disabled = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        style={style}\n        className={cnb(styles(\"track\", { disabled }), className)}\n      >\n        {children}\n        <span\n          style={ballStyle}\n          {...ballProps}\n          className={cnb(styles(\"ball\", { active }), ballClassName)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","SwitchTrack","props","ref","style","className","ballProps","ballStyle","ballClassName","active","children","disabled","remaining","div","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAiD,QAAQ;AAE5E,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;CAEC,GACD,OAAO,MAAME,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGV;IAEJ,qBACE,MAACW;QACE,GAAGD,SAAS;QACbT,KAAKA;QACLC,OAAOA;QACPC,WAAWR,IAAIG,OAAO,SAAS;YAAEW;QAAS,IAAIN;;YAE7CK;0BACD,KAACI;gBACCV,OAAOG;gBACN,GAAGD,SAAS;gBACbD,WAAWR,IAAIG,OAAO,QAAQ;oBAAES;gBAAO,IAAID;;;;AAInD,GACA"}
+{"version":3,"sources":["../../src/form/SwitchTrack.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-switch\");\n\nexport interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {\n  active?: boolean;\n  disabled?: boolean;\n  ballAddon?: ReactNode;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * **Server Component**\n */\nexport const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(\n  function SwitchTrack(props, ref) {\n    const {\n      style,\n      className,\n      ballAddon,\n      ballProps,\n      ballStyle,\n      ballClassName,\n      active,\n      children,\n      disabled = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        style={style}\n        className={cnb(styles(\"track\", { disabled }), className)}\n      >\n        {children}\n        <span\n          style={ballStyle}\n          {...ballProps}\n          className={cnb(styles(\"ball\", { active }), ballClassName)}\n        >\n          {ballAddon}\n          {ballProps?.children}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","SwitchTrack","props","ref","style","className","ballAddon","ballProps","ballStyle","ballClassName","active","children","disabled","remaining","div","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AAEf,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,MAAME,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,OAAOA;QACPC,WAAWR,IAAIG,OAAO,SAAS;YAAEY;QAAS,IAAIP;;YAE7CM;0BACD,MAACI;gBACCX,OAAOI;gBACN,GAAGD,SAAS;gBACbF,WAAWR,IAAIG,OAAO,QAAQ;oBAAEU;gBAAO,IAAID;;oBAE1CH;oBACAC,WAAWI;;;;;AAIpB,GACA"}

package/dist/form/TextArea.js

@@ -115,7 +115,7 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
             ref: containerRef,
             style: {
                 ...style,
-                "--rmd-form-textarea-height": height
+                "--rmd-textarea-height": height
             },
             className: textAreaContainer({
                 animate: !disableTransition && resize == "auto",

package/dist/form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  useResizingTextArea,\n  type TextAreaResize,\n} from \"./useResizingTextArea.js\";\n\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense = false,\n      error = false,\n      active = false,\n      inline: propInline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition = false,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const { maskRef, height, onChange, scrollable } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <div\n          {...resizeContainerProps}\n          className={cnb(\n            \"rmd-textarea-container__inner\",\n            !disableTransition && \"rmd-textarea-container__inner--animate\",\n            resizeContainerProps?.className\n          )}\n        >\n          {area}\n          {labelNode}\n          <textarea\n            aria-hidden\n            id={`${id}-mask`}\n            ref={maskRef}\n            defaultValue={value ?? defaultValue}\n            readOnly\n            tabIndex={-1}\n            rows={rows}\n            style={areaStyle}\n            className={textArea({\n              mask: true,\n              resize,\n              className: areaClassName,\n            })}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-form-textarea-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize == \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","stretch","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","rows","maxRows","onChange","propOnChange","disableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","containerRef","maskRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","div","aria-hidden","tabIndex","mask","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  useResizingTextArea,\n  type TextAreaResize,\n} from \"./useResizingTextArea.js\";\n\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense = false,\n      error = false,\n      active = false,\n      inline: propInline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition = false,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const { maskRef, height, onChange, scrollable } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <div\n          {...resizeContainerProps}\n          className={cnb(\n            \"rmd-textarea-container__inner\",\n            !disableTransition && \"rmd-textarea-container__inner--animate\",\n            resizeContainerProps?.className\n          )}\n        >\n          {area}\n          {labelNode}\n          <textarea\n            aria-hidden\n            id={`${id}-mask`}\n            ref={maskRef}\n            defaultValue={value ?? defaultValue}\n            readOnly\n            tabIndex={-1}\n            rows={rows}\n            style={areaStyle}\n            className={textArea({\n              mask: true,\n              resize,\n              className: areaClassName,\n            })}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-textarea-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize == \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","stretch","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","rows","maxRows","onChange","propOnChange","disableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","containerRef","maskRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","div","aria-hidden","tabIndex","mask","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,MAAM,QAID,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,QAAQ,EAAEC,iBAAiB,QAAQ,sBAAsB;AAElE,SACEC,mBAAmB,QAEd,2BAA2B;AAiElC;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,yBAAWX,WACtB,SAASW,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,SAAS,EACTC,aAAa,EACbC,oBAAoB,EACpBC,SAAS,MAAM,EACfC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,QAAQC,aAAa,KAAK,EAC1BC,UAAU,KAAK,EACfC,SAAS,EACTC,UAAU,EACVC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,OAAO,CAAC,EACRC,UAAU,CAAC,CAAC,EACZC,UAAUC,YAAY,EACtBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGnC;IACJ,MAAM,EAAEoC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGvC;IACpE,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAMqB,QAAQ7B,cAAc,SAAS8B;IACrC,MAAMC,qBAAqB/B,cACzB,sBACAgC;IAEF,MAAM,CAACa,SAASC,gBAAgB,GAAGlD,cAAcU;IACjD,MAAMyC,eAAerD,OAAuB;IAE5C,MAAM,EAAEsD,OAAO,EAAEC,MAAM,EAAEZ,QAAQ,EAAEa,UAAU,EAAE,GAAG/C,oBAAoB;QACpEiC;QACAlB;QACAmB,UAAUC;QACVS;IACF;IAEA,IAAI,EAAEI,cAAc,EAAE,EAAE,GAAG9C;IAC3B,IAAIM,SAAS,CAACwC,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,8DAA8D;IAC9D,mBAAmB;IACnB,MAAM7B,SAASJ,WAAW,gBAAgBA,WAAW,UAAUK;IAE/D,MAAM6B,qBACJ,KAACC;QACE,GAAGb,SAAS;QACbjC,IAAIA;QACJD,KAAKwC;QACLX,MAAMA;QACNM,UAAUA;QACVJ,UAAUA;QACV5B,OAAOM;QACPL,WAAWT,SAAS;YAClBiB;YACAgC;YACAxC,WAAWM;YACXsC,mBAAmB,CAAC,CAAC3C,SAAS,CAACU;QACjC;;IAIJ,MAAMkC,YAAY5C,uBAChB,KAACb;QACE,GAAGc,UAAU;QACd4C,SAASjD;QACTE,OAAOG,YAAYH,SAASI;QAC5BH,WAAWE,YAAYF,aAAaI;QACpC2C,QAAQ;QACRtC,OAAOA;QACPC,OAAOA;QACPC,QAAQA;QACRoB,UAAUA;kBAET9B;;IAIL,IAAI+C,yBACF;;YACGN;YACAG;;;IAIL,IAAIrC,WAAW,QAAQ;QACrBwC,yBACE,MAACC;YACE,GAAG1C,oBAAoB;YACxBP,WAAWlB,IACT,iCACA,CAAC+C,qBAAqB,0CACtBtB,sBAAsBP;;gBAGvB0C;gBACAG;8BACD,KAACF;oBACCO,aAAW;oBACXrD,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;oBAChBD,KAAK0C;oBACLJ,cAAcD,SAASC;oBACvBF,QAAQ;oBACRmB,UAAU,CAAC;oBACX1B,MAAMA;oBACN1B,OAAOM;oBACPL,WAAWT,SAAS;wBAClB6D,MAAM;wBACN5C;wBACAR,WAAWM;oBACb;;;;IAIR;IAEA,qBACE,KAACnB;QACE,GAAGqC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,KAAClC;YACCO,KAAKyC;YACLtC,OAAO;gBACL,GAAGA,KAAK;gBACR,yBAAyBwC;YAC3B;YACAvC,WAAWR,kBAAkB;gBAC3B6D,SAAS,CAACxB,qBAAqBrB,UAAU;gBACzCuB;gBACAQ,QAAQ,CAAC,CAACA;gBACVe,mBACE,CAAC,CAACrD,SAAUkB,CAAAA,UAAU,eAAeA,UAAU,QAAO;gBACxDnB;YACF;YACAmB,OAAOA;YACPlB,OAAO,CAAC,CAACA;YACTS,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRG,SAASA;YACTkB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXC,YAAYA;YACZK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;YACzBqC,SAAS,CAACC;gBACR,mEAAmE;gBACnE,iEAAiE;gBACjE,+DAA+D;gBAC/D,IAAI,CAACzB,YAAYyB,MAAMC,MAAM,KAAKD,MAAME,aAAa,EAAE;oBACrDvB,QAAQwB,OAAO,EAAEC;gBACnB;YACF;sBAECZ;;;AAIT,GACA"}

package/dist/form/TextFieldContainerStyles.d.ts

@@ -1,13 +1,13 @@
 import { type FormComponentStates, type FormThemeOptions } from "./types.js";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-form-text-height"?: string | number;
-        "--rmd-form-text-padding-left"?: string | number;
-        "--rmd-form-text-padding-right"?: string | number;
-        "--rmd-form-text-padding-top"?: string | number;
-        "--rmd-form-text-border-color"?: string;
-        "--rmd-form-text-hover-border-color"?: string;
-        "--rmd-form-text-filled-color"?: string;
+        "--rmd-text-field-height"?: string | number;
+        "--rmd-text-field-padding-left"?: string | number;
+        "--rmd-text-field-padding-right"?: string | number;
+        "--rmd-text-field-padding-top"?: string | number;
+        "--rmd-text-field-border-color"?: string;
+        "--rmd-text-field-hover-border-color"?: string;
+        "--rmd-text-field-filled-color"?: string;
         "--rmd-form-addon-top"?: string | number;
         "--rmd-form-addon-margin-top"?: string | number;
     }

package/dist/form/TextFieldContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextColor, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-text-height\"?: string | number;\n    \"--rmd-form-text-padding-left\"?: string | number;\n    \"--rmd-form-text-padding-right\"?: string | number;\n    \"--rmd-form-text-padding-top\"?: string | number;\n    \"--rmd-form-text-border-color\"?: string;\n    \"--rmd-form-text-hover-border-color\"?: string;\n    \"--rmd-form-text-filled-color\"?: string;\n    \"--rmd-form-addon-top\"?: string | number;\n    \"--rmd-form-addon-margin-top\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TextFieldContainerClassNameOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: boolean;\n\n  /** @defaultValue `false` */\n  stretch?: boolean;\n\n  /** @defaultValue `false` */\n  label?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense = false,\n    error = false,\n    label = false,\n    active = false,\n    inline = false,\n    stretch = false,\n    readOnly = false,\n    disabled = false,\n    leftAddon = false,\n    rightAddon = false,\n    underlineDirection = \"left\",\n  } = options;\n  const underline = theme === \"underline\";\n  const outline = theme === \"outline\";\n  const filled = theme === \"filled\";\n  const isUnderlined = underline || filled;\n  const isOutlineActive = outline && active;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  }\n\n  return cnb(\n    styles({\n      error,\n      inline,\n      stretch,\n      filled,\n      outline,\n      disabled: disabled || readOnly,\n      hoverable: !disabled && !isOutlineActive,\n      label: label && !dense,\n      dense: !label && dense,\n      \"dense-label\": label && dense,\n      \"dense-placeholder\": !label && dense && isUnderlined,\n      \"outline-active\": isOutlineActive,\n      \"outline-error\": outline && error,\n      \"outline-left\": outline && leftAddon,\n      \"outline-right\": outline && rightAddon,\n      underline: isUnderlined,\n      \"underline-placeholder\": isUnderlined && !label,\n      \"underline-placeholder-only\":\n        isUnderlined && !label && !leftAddon && !rightAddon,\n      \"underline-labelled\": isUnderlined && label,\n      \"underline-active\": isUnderlined && active,\n      [`underline-${underlineDirection}`]: isUnderlined,\n      \"underline-left-addon\": isUnderlined && leftAddon,\n      \"underline-right-addon\": isUnderlined && rightAddon,\n    }),\n    cssUtils({ textColor }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","textFieldContainer","options","className","theme","dense","error","label","active","inline","stretch","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyC,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAiBtC,MAAMC,SAASD,IAAI;AA2BnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,qBAAqB,MAAM,EAC5B,GAAGb;IACJ,MAAMc,YAAYZ,UAAU;IAC5B,MAAMa,UAAUb,UAAU;IAC1B,MAAMc,SAASd,UAAU;IACzB,MAAMe,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWT;IAEnC,IAAIa;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAIf,OAAO;QAChBe,YAAY;IACd;IAEA,OAAOxB,IACLG,OAAO;QACLM;QACAG;QACAC;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBb,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASc;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWX;QAC5B,gBAAgBW,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACZ;QAC1C,8BACEY,gBAAgB,CAACZ,SAAS,CAACM,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBZ;QACtC,oBAAoBY,gBAAgBX;QACpC,CAAC,CAAC,UAAU,EAAEO,mBAAmB,CAAC,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAhB,SAAS;QAAEuB;IAAU,IACrBlB;AAEJ"}
+{"version":3,"sources":["../../src/form/TextFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextColor, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-field-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-form-addon-top\"?: string | number;\n    \"--rmd-form-addon-margin-top\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TextFieldContainerClassNameOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: boolean;\n\n  /** @defaultValue `false` */\n  stretch?: boolean;\n\n  /** @defaultValue `false` */\n  label?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense = false,\n    error = false,\n    label = false,\n    active = false,\n    inline = false,\n    stretch = false,\n    readOnly = false,\n    disabled = false,\n    leftAddon = false,\n    rightAddon = false,\n    underlineDirection = \"left\",\n  } = options;\n  const underline = theme === \"underline\";\n  const outline = theme === \"outline\";\n  const filled = theme === \"filled\";\n  const isUnderlined = underline || filled;\n  const isOutlineActive = outline && active;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  }\n\n  return cnb(\n    styles({\n      error,\n      inline,\n      stretch,\n      filled,\n      outline,\n      disabled: disabled || readOnly,\n      hoverable: !disabled && !isOutlineActive,\n      label: label && !dense,\n      dense: !label && dense,\n      \"dense-label\": label && dense,\n      \"dense-placeholder\": !label && dense && isUnderlined,\n      \"outline-active\": isOutlineActive,\n      \"outline-error\": outline && error,\n      \"outline-left\": outline && leftAddon,\n      \"outline-right\": outline && rightAddon,\n      underline: isUnderlined,\n      \"underline-placeholder\": isUnderlined && !label,\n      \"underline-placeholder-only\":\n        isUnderlined && !label && !leftAddon && !rightAddon,\n      \"underline-labelled\": isUnderlined && label,\n      \"underline-active\": isUnderlined && active,\n      [`underline-${underlineDirection}`]: isUnderlined,\n      \"underline-left-addon\": isUnderlined && leftAddon,\n      \"underline-right-addon\": isUnderlined && rightAddon,\n    }),\n    cssUtils({ textColor }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","textFieldContainer","options","className","theme","dense","error","label","active","inline","stretch","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyC,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAiBtC,MAAMC,SAASD,IAAI;AA2BnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,qBAAqB,MAAM,EAC5B,GAAGb;IACJ,MAAMc,YAAYZ,UAAU;IAC5B,MAAMa,UAAUb,UAAU;IAC1B,MAAMc,SAASd,UAAU;IACzB,MAAMe,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWT;IAEnC,IAAIa;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAIf,OAAO;QAChBe,YAAY;IACd;IAEA,OAAOxB,IACLG,OAAO;QACLM;QACAG;QACAC;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBb,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASc;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWX;QAC5B,gBAAgBW,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACZ;QAC1C,8BACEY,gBAAgB,CAACZ,SAAS,CAACM,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBZ;QACtC,oBAAoBY,gBAAgBX;QACpC,CAAC,CAAC,UAAU,EAAEO,mBAAmB,CAAC,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAhB,SAAS;QAAEuB;IAAU,IACrBlB;AAEJ"}