@react-md/core 1.0.0-next.0

package/dist/form/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\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 { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutoCompleteProps,\n} from \"./types.js\";\n\n/**\n * These are all the \"supported\" input types for react-md so that they at least\n * render reasonably well by default. There is no built-in validation or\n * anything adding onto existing browser functionality for these types.\n *\n * @remarks\n * \\@since 2.5.0 - `\"search\"` was added\n * \\@since 6.0.0 Dropped support for `\"week\"` and `\"month\"` input types since\n * they are not available in Firefox and Safari at this time.\n */\nexport type SupportedInputTypes =\n  | \"text\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"email\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"url\"\n  | \"color\"\n  | \"search\";\n\n/**\n * @remarks \\@since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends TextFieldInputAttributes,\n    UserAgentAutoCompleteProps,\n    FormFieldOptions {\n  /**\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Any optional inline styles to set on the input.\n   */\n  inputStyle?: CSSProperties;\n\n  /**\n   * An optional `className` to add to the input.\n   */\n  inputClassName?: string;\n\n  /**\n   * The text field type.\n   *\n   * @defaultValue `\"text\"`\n   */\n  type?: SupportedInputTypes;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n  /**\n   * The `children` will be rendered within the `TextFieldContainer` and before\n   * the `<input />` element. This was added to support the new `Select`\n   * component implementation\n   *\n   * @internal\n   * @remarks \\@since 6.0.0\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The structure for this component is:\n * @example\n * Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextField\n *       label=\"Name\"\n *       placeholder=\"Bob\"\n *       defaultValue=\"\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      type = \"text\",\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      inputStyle,\n      inputClassName,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={className}\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          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          {children}\n          <input\n            {...remaining}\n            id={id}\n            ref={ref}\n            type={type}\n            name={name}\n            disabled={disabled}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            style={inputStyle}\n            className={textField({\n              className: inputClassName,\n              placeholderHidden: !!label && !active,\n            })}\n          />\n          {label && (\n            <Label\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAAS,QAAQ,uBAAuB;AA4FjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,0BAAYP,WACvB,SAASO,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,OAAO,MAAM,EACbC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,UAAU,EACVC,cAAc,EACdC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGnC;IACJ,MAAM,EAAEoC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGrC;IAC/C,MAAME,KAAKT,aAAaU,QAAQ;IAChC,MAAMwB,QAAQ9B,cAAc,SAAS+B;IACrC,MAAMC,qBAAqBhC,cACzB,sBACAiC;IAGF,IAAI,EAAEQ,cAAc,EAAE,EAAE,GAAGtC;IAC3B,IAAIO,SAAS,CAAC+B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAAC5C;QACE,GAAGsC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACnC;YACE,GAAGqC,cAAc;YAClB7B,OAAOA;YACPC,WAAWA;YACXsB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTmB,UAAUA;YACVD,UAAUA;YACVjB,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBO,oBAAoBA;YACpBN,wBAAwBA;YACxBC,yBAAyBA;;gBAExBU;8BACD,KAACK;oBACE,GAAGJ,SAAS;oBACbjC,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNuB,UAAUA;oBACVE,aAAaA;oBACb1B,cAAcA;oBACdR,OAAOqB;oBACPpB,WAAWP,UAAU;wBACnBO,WAAWqB;wBACXc,mBAAmB,CAAC,CAACjC,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACZ;oBACC8C,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRoB,UAAUA;oBACT,GAAG5B,UAAU;oBACdkC,SAASxC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}

package/dist/form/TextFieldAddon.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { type ConfigurableTextFieldAddonProps } from "./types.js";
+/** @remarks \@since 6.0.0 */
+export interface TextFieldAddonClassNameOptions {
+    className?: string;
+    /**
+     * @defaultValue `false`
+     */
+    after?: boolean;
+    /**
+     *
+     * @defaultValue `true`
+     */
+    presentational?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function textFieldAddon(options?: TextFieldAddonClassNameOptions): string;
+/**
+ * @remarks \@since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`
+ */
+export interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {
+    /**
+     * @defaultValue `false`
+     */
+    after?: boolean;
+    /**
+     * Set this to `true` if the addon should not be wrapped in a `<span>` with some
+     * additional styles.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * This component is used to add an an icon before or after the text field with
+ * correct styling.
+ */
+export declare const TextFieldAddon: import("react").ForwardRefExoticComponent<TextFieldAddonProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/form/TextFieldAddon.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-text-field-addon");
+/**
+ * @remarks \@since 6.0.0
+ */ export function textFieldAddon(options = {}) {
+    const { className, after = false, presentational = false } = options;
+    return cnb(styles({
+        before: !after,
+        after,
+        presentational
+    }), className);
+}
+/**
+ * **Server Component**
+ *
+ * This component is used to add an an icon before or after the text field with
+ * correct styling.
+ */ export const TextFieldAddon = /*#__PURE__*/ forwardRef(function TextFieldAddon(props, ref) {
+    const { after = false, children, className, disabled = false, pointerEvents = false, ...remaining } = props;
+    if (!children) {
+        return null;
+    }
+    if (disabled) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsx("span", {
+        ...remaining,
+        ref: ref,
+        className: textFieldAddon({
+            after,
+            presentational: !pointerEvents,
+            className
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=TextFieldAddon.js.map

package/dist/form/TextFieldAddon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/TextFieldAddon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ConfigurableTextFieldAddonProps } from \"./types.js\";\n\nconst styles = bem(\"rmd-text-field-addon\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TextFieldAddonClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   *\n   * @defaultValue `true`\n   */\n  presentational?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function textFieldAddon(\n  options: TextFieldAddonClassNameOptions = {}\n): string {\n  const { className, after = false, presentational = false } = options;\n\n  return cnb(\n    styles({\n      before: !after,\n      after,\n      presentational,\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This component is used to add an an icon before or after the text field with\n * correct styling.\n */\nexport const TextFieldAddon = forwardRef<HTMLSpanElement, TextFieldAddonProps>(\n  function TextFieldAddon(props, ref) {\n    const {\n      after = false,\n      children,\n      className,\n      disabled = false,\n      pointerEvents = false,\n      ...remaining\n    } = props;\n\n    if (!children) {\n      return null;\n    }\n\n    if (disabled) {\n      return <>{children}</>;\n    }\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        className={textFieldAddon({\n          after,\n          presentational: !pointerEvents,\n          className,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","textFieldAddon","options","className","after","presentational","before","TextFieldAddon","props","ref","children","disabled","pointerEvents","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,KAAK,EAAEC,iBAAiB,KAAK,EAAE,GAAGH;IAE7D,OAAOL,IACLG,OAAO;QACLM,QAAQ,CAACF;QACTA;QACAC;IACF,IACAF;AAEJ;AAoBA;;;;;CAKC,GACD,OAAO,MAAMI,+BAAiBT,WAC5B,SAASS,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJL,QAAQ,KAAK,EACbM,QAAQ,EACRP,SAAS,EACTQ,WAAW,KAAK,EAChBC,gBAAgB,KAAK,EACrB,GAAGC,WACJ,GAAGL;IAEJ,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,IAAIC,UAAU;QACZ,qBAAO;sBAAGD;;IACZ;IAEA,qBACE,KAACI;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLN,WAAWF,eAAe;YACxBG;YACAC,gBAAgB,CAACO;YACjBT;QACF;kBAECO;;AAGP,GACA"}

package/dist/form/TextFieldContainer.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from "react";
+import { type TextFieldContainerOptions } from "./types.js";
+export interface TextFieldContainerProps extends HTMLAttributes<HTMLDivElement>, TextFieldContainerOptions {
+    /**
+     * Set this to `true` if there is a floating label with the `TextField` or
+     * `TextArea`.
+     *
+     * @defaultValue `false`
+     */
+    label?: boolean;
+}
+/**
+ * **Client Component**
+ * This might be able to become a server component if I remove the useFormTheme hook
+ *
+ * This component is used to add the additional `TextField`, `TextArea`, and
+ * `Select` theme styles.
+ *
+ * @internal
+ */
+export declare const TextFieldContainer: import("react").ForwardRefExoticComponent<TextFieldContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/TextFieldContainer.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getFormConfig } from "./formConfig.js";
+import { TextFieldAddon } from "./TextFieldAddon.js";
+import { textFieldContainer } from "./TextFieldContainerStyles.js";
+/**
+ * **Client Component**
+ * This might be able to become a server component if I remove the useFormTheme hook
+ *
+ * This component is used to add the additional `TextField`, `TextArea`, and
+ * `Select` theme styles.
+ *
+ * @internal
+ */ export const TextFieldContainer = /*#__PURE__*/ forwardRef(function TextFieldContainer(props, ref) {
+    const { children, className, dense = false, error = false, label = false, active = false, inline = false, stretch = false, readOnly = false, disabled = false, leftAddon, leftAddonProps, disableLeftAddonStyles = false, rightAddon, rightAddonProps, disableRightAddonStyles = false, theme: propTheme, underlineDirection: propUnderlineDirection, ...remaining } = props;
+    const theme = getFormConfig("theme", propTheme);
+    const underlineDirection = getFormConfig("underlineDirection", propUnderlineDirection);
+    return /*#__PURE__*/ _jsxs("div", {
+        ...remaining,
+        ref: ref,
+        className: textFieldContainer({
+            theme,
+            dense,
+            error,
+            label,
+            inline,
+            active,
+            stretch,
+            readOnly,
+            disabled,
+            className,
+            leftAddon: !!leftAddon && !disableLeftAddonStyles,
+            rightAddon: !!rightAddon && !disableRightAddonStyles,
+            underlineDirection
+        }),
+        children: [
+            /*#__PURE__*/ _jsx(TextFieldAddon, {
+                ...leftAddonProps,
+                disabled: disableLeftAddonStyles,
+                children: leftAddon
+            }),
+            children,
+            /*#__PURE__*/ _jsx(TextFieldAddon, {
+                ...rightAddonProps,
+                disabled: disableRightAddonStyles,
+                after: true,
+                children: rightAddon
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=TextFieldContainer.js.map

package/dist/form/TextFieldContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/TextFieldContainer.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { TextFieldAddon } from \"./TextFieldAddon.js\";\nimport { textFieldContainer } from \"./TextFieldContainerStyles.js\";\nimport { type TextFieldContainerOptions } from \"./types.js\";\n\nexport interface TextFieldContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TextFieldContainerOptions {\n  /**\n   * Set this to `true` if there is a floating label with the `TextField` or\n   * `TextArea`.\n   *\n   * @defaultValue `false`\n   */\n  label?: boolean;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the useFormTheme hook\n *\n * This component is used to add the additional `TextField`, `TextArea`, and\n * `Select` theme styles.\n *\n * @internal\n */\nexport const TextFieldContainer = forwardRef<\n  HTMLDivElement,\n  TextFieldContainerProps\n>(function TextFieldContainer(props, ref) {\n  const {\n    children,\n    className,\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,\n    leftAddonProps,\n    disableLeftAddonStyles = false,\n    rightAddon,\n    rightAddonProps,\n    disableRightAddonStyles = false,\n    theme: propTheme,\n    underlineDirection: propUnderlineDirection,\n    ...remaining\n  } = props;\n  const theme = getFormConfig(\"theme\", propTheme);\n  const underlineDirection = getFormConfig(\n    \"underlineDirection\",\n    propUnderlineDirection\n  );\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={textFieldContainer({\n        theme,\n        dense,\n        error,\n        label,\n        inline,\n        active,\n        stretch,\n        readOnly,\n        disabled,\n        className,\n        leftAddon: !!leftAddon && !disableLeftAddonStyles,\n        rightAddon: !!rightAddon && !disableRightAddonStyles,\n        underlineDirection,\n      })}\n    >\n      <TextFieldAddon {...leftAddonProps} disabled={disableLeftAddonStyles}>\n        {leftAddon}\n      </TextFieldAddon>\n      {children}\n      <TextFieldAddon\n        {...rightAddonProps}\n        disabled={disableRightAddonStyles}\n        after\n      >\n        {rightAddon}\n      </TextFieldAddon>\n    </div>\n  );\n});\n"],"names":["forwardRef","getFormConfig","TextFieldAddon","textFieldContainer","TextFieldContainer","props","ref","children","className","dense","error","label","active","inline","stretch","readOnly","disabled","leftAddon","leftAddonProps","disableLeftAddonStyles","rightAddon","rightAddonProps","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","remaining","div","after"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,kBAAkB,QAAQ,gCAAgC;AAenE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAqBJ,WAGhC,SAASI,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,SAAS,EACTC,cAAc,EACdC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,eAAe,EACfC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1C,GAAGC,WACJ,GAAGtB;IACJ,MAAMkB,QAAQtB,cAAc,SAASuB;IACrC,MAAMC,qBAAqBxB,cACzB,sBACAyB;IAGF,qBACE,MAACE;QACE,GAAGD,SAAS;QACbrB,KAAKA;QACLE,WAAWL,mBAAmB;YAC5BoB;YACAd;YACAC;YACAC;YACAE;YACAD;YACAE;YACAC;YACAC;YACAR;YACAS,WAAW,CAAC,CAACA,aAAa,CAACE;YAC3BC,YAAY,CAAC,CAACA,cAAc,CAACE;YAC7BG;QACF;;0BAEA,KAACvB;gBAAgB,GAAGgB,cAAc;gBAAEF,UAAUG;0BAC3CF;;YAEFV;0BACD,KAACL;gBACE,GAAGmB,eAAe;gBACnBL,UAAUM;gBACVO,KAAK;0BAEJT;;;;AAIT,GAAG"}

package/dist/form/TextFieldContainerStyles.d.ts

@@ -0,0 +1,34 @@
+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-form-addon-top"?: string | number;
+        "--rmd-form-addon-margin-top"?: string | number;
+    }
+}
+/** @remarks \@since 6.0.0 */
+export interface TextFieldContainerClassNameOptions extends FormThemeOptions, FormComponentStates {
+    className?: string;
+    /** @defaultValue `false` */
+    dense?: boolean;
+    /** @defaultValue `false` */
+    inline?: boolean;
+    /** @defaultValue `false` */
+    stretch?: boolean;
+    /** @defaultValue `false` */
+    label?: boolean;
+    /** @defaultValue `false` */
+    leftAddon?: boolean;
+    /** @defaultValue `false` */
+    rightAddon?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function textFieldContainer(options?: TextFieldContainerClassNameOptions): string;

package/dist/form/TextFieldContainerStyles.js

@@ -0,0 +1,49 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-text-field-container");
+/**
+ * @remarks \@since 6.0.0
+ */ export function textFieldContainer(options = {}) {
+    const { className, theme = "outline", dense = false, error = false, label = false, active = false, inline = false, stretch = false, readOnly = false, disabled = false, leftAddon = false, rightAddon = false, underlineDirection = "left" } = options;
+    const underline = theme === "underline";
+    const outline = theme === "outline";
+    const filled = theme === "filled";
+    const isUnderlined = underline || filled;
+    const isOutlineActive = outline && active;
+    let textColor;
+    if (disabled) {
+        textColor = "text-disabled";
+    } else if (error) {
+        textColor = "error";
+    }
+    return cnb(styles({
+        error,
+        inline,
+        stretch,
+        filled,
+        outline,
+        disabled: disabled || readOnly,
+        hoverable: !disabled && !isOutlineActive,
+        label: label && !dense,
+        dense: !label && dense,
+        "dense-label": label && dense,
+        "dense-placeholder": !label && dense && isUnderlined,
+        "outline-active": isOutlineActive,
+        "outline-error": outline && error,
+        "outline-left": outline && leftAddon,
+        "outline-right": outline && rightAddon,
+        underline: isUnderlined,
+        "underline-placeholder": isUnderlined && !label,
+        "underline-placeholder-only": isUnderlined && !label && !leftAddon && !rightAddon,
+        "underline-labelled": isUnderlined && label,
+        "underline-active": isUnderlined && active,
+        [`underline-${underlineDirection}`]: isUnderlined,
+        "underline-left-addon": isUnderlined && leftAddon,
+        "underline-right-addon": isUnderlined && rightAddon
+    }), cssUtils({
+        textColor
+    }), className);
+}
+
+//# sourceMappingURL=TextFieldContainerStyles.js.map

package/dist/form/TextFieldContainerStyles.js.map

@@ -0,0 +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"}