@react-md/core 6.3.4 → 6.4.0

package/dist/form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\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 { ResizingTextAreaWrapper } from \"./ResizingTextAreaWrapper.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  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\n// NOTE: The augmentation appears in this file since no type definitions are\n// ever imported from the `textAreaStylesStyles` file.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @defaultValue `\"text-area-\" + useId()` */\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   * 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<HTMLAttributes<HTMLDivElement>>;\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>>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\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 *\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\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,\n      error,\n      active,\n      inline: propInline,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition: propDisableTransition,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-area\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n\n    const {\n      maskRef,\n      containerRef,\n      height,\n      onChange,\n      scrollable,\n      disableTransition,\n    } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef: containerProps?.ref,\n      disableTransition: propDisableTransition,\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        placeholder={placeholder}\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        <ResizingTextAreaWrapper\n          {...resizeContainerProps}\n          maskId={`${id}-mask`}\n          maskRef={maskRef}\n          rows={rows}\n          areaStyle={areaStyle}\n          areaClassName={areaClassName}\n          defaultValue={value ?? defaultValue}\n          disableTransition={disableTransition}\n        >\n          {children}\n        </ResizingTextAreaWrapper>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        inline={inline}\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-text-area-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          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":["forwardRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","ResizingTextAreaWrapper","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","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","rows","maxRows","onChange","propOnChange","disableTransition","propDisableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","maskRef","containerRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","maskId","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\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 { ResizingTextAreaWrapper } from \"./ResizingTextAreaWrapper.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  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\n// NOTE: The augmentation appears in this file since no type definitions are\n// ever imported from the `textAreaStylesStyles` file.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions, TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @defaultValue `\"text-area-\" + useId()` */\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   * 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<HTMLAttributes<HTMLDivElement>>;\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>>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\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 *\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\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,\n      error,\n      active,\n      inline: propInline,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition: propDisableTransition,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-area\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n\n    const {\n      maskRef,\n      containerRef,\n      height,\n      onChange,\n      scrollable,\n      disableTransition,\n    } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef: containerProps?.ref,\n      disableTransition: propDisableTransition,\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        placeholder={placeholder}\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        <ResizingTextAreaWrapper\n          {...resizeContainerProps}\n          maskId={`${id}-mask`}\n          maskRef={maskRef}\n          rows={rows}\n          areaStyle={areaStyle}\n          areaClassName={areaClassName}\n          defaultValue={value ?? defaultValue}\n          disableTransition={disableTransition}\n        >\n          {children}\n        </ResizingTextAreaWrapper>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        inline={inline}\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-text-area-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          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":["forwardRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","ResizingTextAreaWrapper","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","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","rows","maxRows","onChange","propOnChange","disableTransition","propDisableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","maskRef","containerRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","maskId","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}

package/dist/form/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\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 { 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 * @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 * @since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @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>>;\n}\n\n/**\n * The structure for this component is:\n * @example Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\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 *\n * @see {@link https://react-md.dev/components/textfield | TextField Demos}\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,\n      error,\n      active,\n      inline,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      inputStyle,\n      inputClassName,\n      theme,\n      underlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      ...remaining\n    } = props;\n    const { disabled, readOnly } = props;\n    const id = useEnsuredId(propId, \"text-field\");\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        inline={inline}\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\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          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          <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","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","underlineDirection","messageProps","messageContainerProps","containerProps","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,uBAAuB;AAiFjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,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,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,kBAAkB,EAClBC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACd,GAAGC,WACJ,GAAG/B;IACJ,MAAM,EAAEgC,QAAQ,EAAEC,QAAQ,EAAE,GAAGjC;IAC/B,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAI,EAAE+B,cAAc,EAAE,EAAE,GAAGlC;IAC3B,IAAIO,SAAS,CAAC2B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAACvC;QACCsB,QAAQA;QACP,GAAGY,qBAAqB;QACzBD,cACEA,gBAAgB;YACdb;YACAW;YACA,GAAGE,YAAY;QACjB;kBAGF,cAAA,MAAC/B;YACE,GAAGiC,cAAc;YAClB1B,OAAOA;YACPC,WAAWA;YACXqB,OAAOA;YACPnB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRiB,UAAUA;YACVD,UAAUA;YACVd,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBM,oBAAoBA;YACpBL,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACY;oBACE,GAAGJ,SAAS;oBACb7B,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNmB,UAAUA;oBACVE,aAAaA;oBACbtB,cAAcA;oBACdR,OAAOoB;oBACPnB,WAAWP,UAAU;wBACnBO,WAAWoB;wBACXW,mBAAmB,CAAC,CAAC7B,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACX;oBACCyC,QAAQ;oBACRvB,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRgB,UAAUA;oBACT,GAAGxB,UAAU;oBACd8B,SAASpC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\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 { 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 * @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 * @since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends\n    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>>;\n}\n\n/**\n * The structure for this component is:\n * @example Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\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 *\n * @see {@link https://react-md.dev/components/textfield | TextField Demos}\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,\n      error,\n      active,\n      inline,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      inputStyle,\n      inputClassName,\n      theme,\n      underlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      ...remaining\n    } = props;\n    const { disabled, readOnly } = props;\n    const id = useEnsuredId(propId, \"text-field\");\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        inline={inline}\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\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          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          <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","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","underlineDirection","messageProps","messageContainerProps","containerProps","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,uBAAuB;AAkFjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,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,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,kBAAkB,EAClBC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACd,GAAGC,WACJ,GAAG/B;IACJ,MAAM,EAAEgC,QAAQ,EAAEC,QAAQ,EAAE,GAAGjC;IAC/B,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAI,EAAE+B,cAAc,EAAE,EAAE,GAAGlC;IAC3B,IAAIO,SAAS,CAAC2B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAACvC;QACCsB,QAAQA;QACP,GAAGY,qBAAqB;QACzBD,cACEA,gBAAgB;YACdb;YACAW;YACA,GAAGE,YAAY;QACjB;kBAGF,cAAA,MAAC/B;YACE,GAAGiC,cAAc;YAClB1B,OAAOA;YACPC,WAAWA;YACXqB,OAAOA;YACPnB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRiB,UAAUA;YACVD,UAAUA;YACVd,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBM,oBAAoBA;YACpBL,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACY;oBACE,GAAGJ,SAAS;oBACb7B,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNmB,UAAUA;oBACVE,aAAaA;oBACbtB,cAAcA;oBACdR,OAAOoB;oBACPnB,WAAWP,UAAU;wBACnBO,WAAWoB;wBACXW,mBAAmB,CAAC,CAAC7B,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACX;oBACCyC,QAAQ;oBACRvB,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRgB,UAAUA;oBACT,GAAGxB,UAAU;oBACd8B,SAASpC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}

package/dist/form/TextFieldContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextFieldContainer.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TextFieldAddon } from \"./TextFieldAddon.js\";\nimport { getFormConfig } from \"./formConfig.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,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    leftAddonProps,\n    disableLeftAddonStyles,\n    rightAddon,\n    rightAddonProps,\n    disableRightAddonStyles,\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        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","TextFieldAddon","getFormConfig","textFieldContainer","TextFieldContainer","props","ref","children","className","dense","error","label","active","inline","readOnly","disabled","leftAddon","leftAddonProps","disableLeftAddonStyles","rightAddon","rightAddonProps","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","remaining","div","after"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,kBAAkB,QAAQ,gCAAgC;AAenE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAqBJ,WAGhC,SAASI,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,sBAAsB,EACtBC,UAAU,EACVC,eAAe,EACfC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1C,GAAGC,WACJ,GAAGrB;IACJ,MAAMiB,QAAQpB,cAAc,SAASqB;IACrC,MAAMC,qBAAqBtB,cACzB,sBACAuB;IAGF,qBACE,MAACE;QACE,GAAGD,SAAS;QACbpB,KAAKA;QACLE,WAAWL,mBAAmB;YAC5BmB;YACAb;YACAC;YACAC;YACAE;YACAD;YACAE;YACAC;YACAP;YACAQ,WAAW,CAAC,CAACA,aAAa,CAACE;YAC3BC,YAAY,CAAC,CAACA,cAAc,CAACE;YAC7BG;QACF;;0BAEA,KAACvB;gBAAgB,GAAGgB,cAAc;gBAAEF,UAAUG;0BAC3CF;;YAEFT;0BACD,KAACN;gBACE,GAAGmB,eAAe;gBACnBL,UAAUM;gBACVO,KAAK;0BAEJT;;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/form/TextFieldContainer.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TextFieldAddon } from \"./TextFieldAddon.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textFieldContainer } from \"./textFieldContainerStyles.js\";\nimport { type TextFieldContainerOptions } from \"./types.js\";\n\nexport interface TextFieldContainerProps\n  extends HTMLAttributes<HTMLDivElement>, 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,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    leftAddonProps,\n    disableLeftAddonStyles,\n    rightAddon,\n    rightAddonProps,\n    disableRightAddonStyles,\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        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","TextFieldAddon","getFormConfig","textFieldContainer","TextFieldContainer","props","ref","children","className","dense","error","label","active","inline","readOnly","disabled","leftAddon","leftAddonProps","disableLeftAddonStyles","rightAddon","rightAddonProps","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","remaining","div","after"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,kBAAkB,QAAQ,gCAAgC;AAcnE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAqBJ,WAGhC,SAASI,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,sBAAsB,EACtBC,UAAU,EACVC,eAAe,EACfC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1C,GAAGC,WACJ,GAAGrB;IACJ,MAAMiB,QAAQpB,cAAc,SAASqB;IACrC,MAAMC,qBAAqBtB,cACzB,sBACAuB;IAGF,qBACE,MAACE;QACE,GAAGD,SAAS;QACbpB,KAAKA;QACLE,WAAWL,mBAAmB;YAC5BmB;YACAb;YACAC;YACAC;YACAE;YACAD;YACAE;YACAC;YACAP;YACAQ,WAAW,CAAC,CAACA,aAAa,CAACE;YAC3BC,YAAY,CAAC,CAACA,cAAc,CAACE;YAC7BG;QACF;;0BAEA,KAACvB;gBAAgB,GAAGgB,cAAc;gBAAEF,UAAUG;0BAC3CF;;YAEFT;0BACD,KAACN;gBACE,GAAGmB,eAAe;gBACnBL,UAAUM;gBACVO,KAAK;0BAEJT;;;;AAIT,GAAG"}

package/dist/form/_fieldset.scss

@@ -4,6 +4,7 @@
 
 @use "../utils";
 @use "base";
+@use "legend";
 
 /// Set to `true` to disable the `Formset` component styles
 /// @type Boolean
@@ -28,6 +29,12 @@ $disable-everything: base.$form-disable-everything !default;
           flex: 1 1 auto;
           width: 100%;
         }
+
+        @if not legend.$disable-floating {
+          &--floating-legend {
+            position: relative;
+          }
+        }
       }
     }
   }

package/dist/form/_legend.scss

@@ -0,0 +1,68 @@
+////
+/// @group legend
+/// @since 6.4.0
+////
+
+@use "../utils";
+@use "../theme/theme";
+@use "base";
+@use "label";
+@use "text-field";
+
+/// Set to `true` to disable all form styles.
+/// @type Boolean
+$disable-everything: false !default;
+
+/// Set to `true` to disable all form styles.
+/// @type Boolean
+$disable-floating: false !default;
+
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(legend, $disable-layer) {
+      .rmd-legend {
+        @if not $disable-floating {
+          &--floating {
+            @include label.set-var(floating-active-y, -50%);
+            @include label.set-var(active-padding, 0 label.$floating-padding);
+            @include label.set-var(
+              active-background-color,
+              theme.theme-get-var(background-color)
+            );
+            @include label.set-var(
+              floating-active-x,
+              text-field.get-var(padding-left)
+            );
+          }
+
+          @if not base.$form-disable-filled-theme {
+            @include text-field.set-var(
+              padding-left,
+              text-field.get-var(filled-padding)
+            );
+          }
+
+          @if not base.$form-disable-underlined-theme {
+            @include text-field.set-var(
+              padding-left,
+              text-field.get-var(underlined-padding)
+            );
+          }
+
+          @if not base.$form-disable-outlined-theme {
+            &--floating-outline {
+              @include text-field.set-var(
+                padding-left,
+                text-field.get-var(outlined-padding)
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/form/_text-field.scss

@@ -90,7 +90,7 @@ $label-dense-height: 3.25rem !default;
 
 /// The `border-radius` for a `TextField`.
 /// @type Number
-$border-radius: border-radius.get-var(xs) !default;
+$border-radius: null !default;
 
 /// The `border-width` for a `TextField`.
 /// @type Number
@@ -110,6 +110,12 @@ $filled-padding: calc(spacing.get-var(sm) * 1.5) !default;
 /// @type Number
 $outlined-padding: spacing.get-var(md) !default;
 
+/// The border radius to apply to a `TextField` with the `theme="outline"`.
+///
+/// @since 6.4.0
+/// @type Number
+$outlined-border-radius: border-radius.get-var(xs) !default;
+
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="underline"`.
 ///
@@ -232,6 +238,11 @@ $filled-background-color: theme.get-default-color(
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.
+///
+/// In 6.4.0, added the following variables: `base-height`, `label-height`,
+/// `dense-height`, `dense-label-height`, `border-radius`,
+/// `outlined-border-radius`
+///
 /// @type List
 $variables: (
   addon-top,
@@ -239,14 +250,20 @@ $variables: (
   addon-margin-top,
   addon-left-offset,
   height,
+  base-height,
+  label-height,
+  dense-height,
+  dense-label-height,
   padding-left,
   padding-right,
   padding-top,
   border-color,
+  border-radius,
   hover-border-color,
   filled-color,
   filled-padding,
   outlined-padding,
+  outlined-border-radius,
   underlined-padding
 );
 
@@ -303,19 +320,36 @@ $variables: (
 /// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
+    @if $border-radius {
+      @include set-var(border-radius, $border-radius);
+    }
+
     @if not base.$form-disable-filled-theme and $filled-padding {
       @include set-var(filled-padding, $filled-padding);
     }
 
     @if not base.$form-disable-outlined-theme and $outlined-padding {
       @include set-var(outlined-padding, $outlined-padding);
+      @include set-var(outlined-border-radius, $outlined-border-radius);
     }
 
     @if not base.$form-disable-underlined-theme and $underlined-padding {
       @include set-var(underlined-padding, $underlined-padding);
     }
 
-    @include set-var(height, $height);
+    @include set-var(base-height, $height);
+    @if not label.$disable-floating {
+      @include set-var(label-height, $label-height);
+    }
+    @if not $disable-container-dense {
+      @include set-var(dense-height, $dense-height);
+
+      @if not label.$disable-floating {
+        @include set-var(dense-label-height, $label-dense-height);
+      }
+    }
+    @include set-var(height, get-var(base-height));
+
     @include set-var(padding-left, 0px);
     @include set-var(padding-right, 0px);
     @include set-var(padding-top, 0px);
@@ -346,7 +380,8 @@ $variables: (
       @if not label.$disable-floating {
         @include label.set-var(floating-x, get-var(padding-left));
       }
-      @include use-var(height, height);
+      @include use-var(height, height, get-var(base-height));
+      @include use-var(border-radius);
 
       align-items: center;
       display: flex;
@@ -406,6 +441,7 @@ $variables: (
           @if not $disable-addon {
             @include set-var(addon-left-offset, get-var(outlined-padding));
           }
+          @include set-var(border-radius, get-var(outlined-border-radius));
 
           @if not label.$disable-floating {
             @include label.set-var(
@@ -420,7 +456,6 @@ $variables: (
             );
           }
 
-          border-radius: $border-radius;
           border-style: solid;
           border-width: $border-width;
         }

package/dist/form/fieldsetStyles.d.ts

@@ -1,6 +1,10 @@
 /** @since 6.0.0 */
 export interface FieldsetClassNameOptions {
     className?: string;
+    /**
+     * @defaultValue `false`
+     */
+    fullWidth?: boolean;
     /**
      * Set this to `true` to enable the default browser styles for a fieldset.
      *
@@ -9,9 +13,10 @@ export interface FieldsetClassNameOptions {
      */
     browserStyles?: boolean;
     /**
+     * @since 6.4.0
      * @defaultValue `false`
      */
-    fullWidth?: boolean;
+    floatingLegend?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/form/fieldsetStyles.js

@@ -4,10 +4,11 @@ const styles = bem("rmd-fieldset");
 /**
  * @since 6.0.0
  */ export function fieldset(options = {}) {
-    const { className, fullWidth, browserStyles = false } = options;
+    const { className, fullWidth, browserStyles = false, floatingLegend } = options;
     return cnb(styles({
         unstyled: !browserStyles,
-        "full-width": fullWidth
+        "full-width": fullWidth,
+        "floating-legend": floatingLegend
     }), className);
 }
 

package/dist/form/fieldsetStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/fieldsetStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-fieldset\");\n\n/** @since 6.0.0 */\nexport interface FieldsetClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to enable the default browser styles for a fieldset.\n   *\n   * @since 6.0.0 This was renamed from `unstyled`.\n   * @defaultValue `false`\n   */\n  browserStyles?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function fieldset(options: FieldsetClassNameOptions = {}): string {\n  const { className, fullWidth, browserStyles = false } = options;\n\n  return cnb(\n    styles({ unstyled: !browserStyles, \"full-width\": fullWidth }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","fieldset","options","className","fullWidth","browserStyles","unstyled"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,gBAAgB,KAAK,EAAE,GAAGH;IAExD,OAAOJ,IACLE,OAAO;QAAEM,UAAU,CAACD;QAAe,cAAcD;IAAU,IAC3DD;AAEJ"}
+{"version":3,"sources":["../../src/form/fieldsetStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-fieldset\");\n\n/** @since 6.0.0 */\nexport interface FieldsetClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to `true` to enable the default browser styles for a fieldset.\n   *\n   * @since 6.0.0 This was renamed from `unstyled`.\n   * @defaultValue `false`\n   */\n  browserStyles?: boolean;\n\n  /**\n   * @since 6.4.0\n   * @defaultValue `false`\n   */\n  floatingLegend?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function fieldset(options: FieldsetClassNameOptions = {}): string {\n  const {\n    className,\n    fullWidth,\n    browserStyles = false,\n    floatingLegend,\n  } = options;\n\n  return cnb(\n    styles({\n      unstyled: !browserStyles,\n      \"full-width\": fullWidth,\n      \"floating-legend\": floatingLegend,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","fieldset","options","className","fullWidth","browserStyles","floatingLegend","unstyled"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,gBAAgB,KAAK,EACrBC,cAAc,EACf,GAAGJ;IAEJ,OAAOJ,IACLE,OAAO;QACLO,UAAU,CAACF;QACX,cAAcD;QACd,mBAAmBE;IACrB,IACAH;AAEJ"}

package/dist/form/inputToggleStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates } from \"./types.js\";\n\nconst styles = bem(\"rmd-input-toggle\");\n\n/**\n * The size to use for the `Checkbox` or `Radio` component. Each of these values\n * except for `\"auto\"` map to Sass variables:\n * - `\"small\"` - `$input-toggle-small-size`\n * - `\"dense\"` - `$input-toggle-dense-size`\n * - `\"normal\"` - `$input-toggle-large-size`\n * - `\"large\"` - `$input-toggle-large-size`\n *\n * When this is set to `\"auto\"`, the size will be determined by the current\n * `font-size` of the `Label` element.\n *\n * @since 6.0.0\n */\nexport type InputToggleSize = \"auto\" | \"small\" | \"dense\" | \"normal\" | \"large\";\n\n/** @since 6.0.0 */\nexport interface InputToggleClassNameOptions\n  extends Omit<FormComponentStates, \"readOnly\"> {\n  className?: string;\n  type: \"checkbox\" | \"radio\";\n\n  /**\n   * Set the icon size to `1em` to allow easy sizing through font size.\n   *\n   * @defaultValue `true`\n   */\n  em?: boolean;\n\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  uncontrolled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function inputToggle(options: InputToggleClassNameOptions): string {\n  const {\n    className,\n    em = true,\n    type,\n    size = \"auto\",\n    error,\n    active = false,\n    disabled = false,\n    uncontrolled,\n  } = options;\n\n  return cnb(\n    `rmd-${type}`,\n    styles({\n      em,\n      active: active && !disabled,\n      disabled,\n      small: size === \"small\",\n      dense: size === \"dense\",\n      normal: size === \"normal\",\n      large: size === \"large\",\n      uncontrolled,\n    }),\n    cssUtils({\n      textColor: disabled ? \"text-disabled\" : error ? \"error\" : undefined,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","inputToggle","options","className","em","type","size","error","active","disabled","uncontrolled","small","dense","normal","large","textColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAuCnB;;CAEC,GACD,OAAO,SAASE,YAAYC,OAAoC;IAC9D,MAAM,EACJC,SAAS,EACTC,KAAK,IAAI,EACTC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,EACb,GAAGR;IAEJ,OAAOL,IACL,CAAC,IAAI,EAAEQ,MAAM,EACbL,OAAO;QACLI;QACAI,QAAQA,UAAU,CAACC;QACnBA;QACAE,OAAOL,SAAS;QAChBM,OAAON,SAAS;QAChBO,QAAQP,SAAS;QACjBQ,OAAOR,SAAS;QAChBI;IACF,IACAZ,SAAS;QACPiB,WAAWN,WAAW,kBAAkBF,QAAQ,UAAUS;IAC5D,IACAb;AAEJ"}
+{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates } from \"./types.js\";\n\nconst styles = bem(\"rmd-input-toggle\");\n\n/**\n * The size to use for the `Checkbox` or `Radio` component. Each of these values\n * except for `\"auto\"` map to Sass variables:\n * - `\"small\"` - `$input-toggle-small-size`\n * - `\"dense\"` - `$input-toggle-dense-size`\n * - `\"normal\"` - `$input-toggle-large-size`\n * - `\"large\"` - `$input-toggle-large-size`\n *\n * When this is set to `\"auto\"`, the size will be determined by the current\n * `font-size` of the `Label` element.\n *\n * @since 6.0.0\n */\nexport type InputToggleSize = \"auto\" | \"small\" | \"dense\" | \"normal\" | \"large\";\n\n/** @since 6.0.0 */\nexport interface InputToggleClassNameOptions extends Omit<\n  FormComponentStates,\n  \"readOnly\"\n> {\n  className?: string;\n  type: \"checkbox\" | \"radio\";\n\n  /**\n   * Set the icon size to `1em` to allow easy sizing through font size.\n   *\n   * @defaultValue `true`\n   */\n  em?: boolean;\n\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  uncontrolled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function inputToggle(options: InputToggleClassNameOptions): string {\n  const {\n    className,\n    em = true,\n    type,\n    size = \"auto\",\n    error,\n    active = false,\n    disabled = false,\n    uncontrolled,\n  } = options;\n\n  return cnb(\n    `rmd-${type}`,\n    styles({\n      em,\n      active: active && !disabled,\n      disabled,\n      small: size === \"small\",\n      dense: size === \"dense\",\n      normal: size === \"normal\",\n      large: size === \"large\",\n      uncontrolled,\n    }),\n    cssUtils({\n      textColor: disabled ? \"text-disabled\" : error ? \"error\" : undefined,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","inputToggle","options","className","em","type","size","error","active","disabled","uncontrolled","small","dense","normal","large","textColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAyCnB;;CAEC,GACD,OAAO,SAASE,YAAYC,OAAoC;IAC9D,MAAM,EACJC,SAAS,EACTC,KAAK,IAAI,EACTC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,EACb,GAAGR;IAEJ,OAAOL,IACL,CAAC,IAAI,EAAEQ,MAAM,EACbL,OAAO;QACLI;QACAI,QAAQA,UAAU,CAACC;QACnBA;QACAE,OAAOL,SAAS;QAChBM,OAAON,SAAS;QAChBO,QAAQP,SAAS;QACjBQ,OAAOR,SAAS;QAChBI;IACF,IACAZ,SAAS;QACPiB,WAAWN,WAAW,kBAAkBF,QAAQ,UAAUS;IAC5D,IACAb;AAEJ"}

package/dist/form/labelStyles.d.ts

@@ -2,4 +2,4 @@ import { type LabelClassNameOptions } from "./types.js";
 /**
  * @since 6.0.0
  */
-export declare function label(options: LabelClassNameOptions): string;
+export declare function label(options?: LabelClassNameOptions): string;

package/dist/form/labelStyles.js

@@ -4,7 +4,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-label");
 /**
  * @since 6.0.0
- */ export function label(options) {
+ */ export function label(options = {}) {
     const { className, gap, error, dense, active, stacked, reversed, disabled, floating, inactive, floatingActive = active } = options;
     let textColor;
     if (disabled) {

package/dist/form/labelStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/labelStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    styles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAEnB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOjB,IACLG,OAAO;QACLI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ"}
+{"version":3,"sources":["../../src/form/labelStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions = {}): string {\n  const {\n    className,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    styles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAEnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EACJC,SAAS,EACTC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOjB,IACLG,OAAO;QACLI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ"}

package/dist/form/legendStyles.d.ts

@@ -0,0 +1,83 @@
+import { type FormTheme, type LabelClassNameOptions } from "./types.js";
+/**
+ * @since 6.4.0
+ */
+export type LegendLabelClassNameOptions = Pick<LabelClassNameOptions, "active" | "gap" | "dense" | "error" | "stacked" | "disabled" | "reversed">;
+/**
+ * @since 6.4.0
+ */
+export interface LegendClassNameOptions extends LegendLabelClassNameOptions {
+    className?: string;
+    /**
+     * @defaultValue `false`
+     */
+    srOnly?: boolean;
+    /**
+     * Set this to `true` to make the `<legend>` have the styles of a floating label.
+     * This requires the parent `<fieldset>` to have the `floatingLegend` flag
+     * enabled.
+     *
+     * @defaultValue `false`
+     */
+    floating?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link FormTheme}
+     * @defaultValue `getFormConfig("theme")`
+     */
+    theme?: FormTheme;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.active}
+     * @defaultValue `false`
+     */
+    active?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.gap}
+     * @defaultValue `false`
+     */
+    gap?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.disabled}
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.dense}
+     * @defaultValue `false`
+     */
+    dense?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.error}
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.stacked}
+     * @defaultValue `false`
+     */
+    stacked?: boolean;
+    /**
+     * This will only apply if {@link floating} is `true`.
+     *
+     * @see {@link LabelClassNameOptions.reversed}
+     * @defaultValue `false`
+     */
+    reversed?: boolean;
+}
+/**
+ * @since 6.4.0
+ */
+export declare function legend(options?: LegendClassNameOptions): string;

package/dist/form/legendStyles.js

@@ -0,0 +1,25 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+import { getFormConfig } from "./formConfig.js";
+import { label } from "./labelStyles.js";
+const styles = bem("rmd-legend");
+/**
+ * @since 6.4.0
+ */ export function legend(options = {}) {
+    const { className, srOnly, floating, theme = getFormConfig("theme"), ...labelOptions } = options;
+    return cnb(styles({
+        floating,
+        "floating-filled": floating && theme === "filled",
+        "floating-underline": floating && theme === "underline",
+        "floating-outline": floating && theme === "outline"
+    }), floating && label({
+        ...labelOptions,
+        floating: true,
+        floatingActive: true
+    }), cssUtils({
+        srOnly
+    }), className);
+}
+
+//# sourceMappingURL=legendStyles.js.map

package/dist/form/legendStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/legendStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label } from \"./labelStyles.js\";\nimport { type FormTheme, type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-legend\");\n\n/**\n * @since 6.4.0\n */\nexport type LegendLabelClassNameOptions = Pick<\n  LabelClassNameOptions,\n  \"active\" | \"gap\" | \"dense\" | \"error\" | \"stacked\" | \"disabled\" | \"reversed\"\n>;\n\n/**\n * @since 6.4.0\n */\nexport interface LegendClassNameOptions extends LegendLabelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n\n  /**\n   * Set this to `true` to make the `<legend>` have the styles of a floating label.\n   * This requires the parent `<fieldset>` to have the `floatingLegend` flag\n   * enabled.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link FormTheme}\n   * @defaultValue `getFormConfig(\"theme\")`\n   */\n  theme?: FormTheme;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.active}\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.disabled}\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.dense}\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.error}\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.stacked}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.reversed}\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport function legend(options: LegendClassNameOptions = {}): string {\n  const {\n    className,\n    srOnly,\n    floating,\n    theme = getFormConfig(\"theme\"),\n    ...labelOptions\n  } = options;\n\n  return cnb(\n    styles({\n      floating,\n      \"floating-filled\": floating && theme === \"filled\",\n      \"floating-underline\": floating && theme === \"underline\",\n      \"floating-outline\": floating && theme === \"outline\",\n    }),\n    floating &&\n      label({\n        ...labelOptions,\n        floating: true,\n        floatingActive: true,\n      }),\n    cssUtils({ srOnly }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","getFormConfig","label","styles","legend","options","className","srOnly","floating","theme","labelOptions","floatingActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAGzC,MAAMC,SAASH,IAAI;AA+FnB;;CAEC,GACD,OAAO,SAASI,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,QAAQR,cAAc,QAAQ,EAC9B,GAAGS,cACJ,GAAGL;IAEJ,OAAOP,IACLK,OAAO;QACLK;QACA,mBAAmBA,YAAYC,UAAU;QACzC,sBAAsBD,YAAYC,UAAU;QAC5C,oBAAoBD,YAAYC,UAAU;IAC5C,IACAD,YACEN,MAAM;QACJ,GAAGQ,YAAY;QACfF,UAAU;QACVG,gBAAgB;IAClB,IACFZ,SAAS;QAAEQ;IAAO,IAClBD;AAEJ"}

package/dist/form/selectUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, type ReactNode, isValidElement } from \"react\";\n\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<Value extends string | number = string>\n  extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (typeof value !== \"undefined\") {\n      if (\n        value === currentValue ||\n        (!currentOption && typeof currentValue === \"undefined\")\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAkBC,cAAc,QAAQ,QAAQ;AAajE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,GAAGA,UAAU;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,GAAGA,OAAO,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOY,UAAU,aAAa;YAChC,IACEA,UAAUL,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQK,IAAI,CAACV,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaI,IAAI,CAAChB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMgB,SAAST,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGO,MAAK;YAC5B;YAEAN,QAAQK,IAAI,IAAIC,OAAON,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}
+{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, type ReactNode, isValidElement } from \"react\";\n\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<\n  Value extends string | number = string,\n> extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (typeof value !== \"undefined\") {\n      if (\n        value === currentValue ||\n        (!currentOption && typeof currentValue === \"undefined\")\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAkBC,cAAc,QAAQ,QAAQ;AAcjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,GAAGA,UAAU;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,GAAGA,OAAO,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOY,UAAU,aAAa;YAChC,IACEA,UAAUL,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQK,IAAI,CAACV,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaI,IAAI,CAAChB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMgB,SAAST,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGO,MAAK;YAC5B;YAEAN,QAAQK,IAAI,IAAIC,OAAON,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}

package/dist/form/textFieldContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/textFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @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  label?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    rightAddon,\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      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","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAwBnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,qBAAqB,MAAM,EAC5B,GAAGZ;IACJ,MAAMa,YAAYX,UAAU;IAC5B,MAAMY,UAAUZ,UAAU;IAC1B,MAAMa,SAASb,UAAU;IACzB,MAAMc,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWR;IAEnC,IAAIY;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAId,OAAO;QAChBc,YAAY;IACd;IAEA,OAAOvB,IACLG,OAAO;QACLM;QACAG;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBZ,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASa;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWV;QAC5B,gBAAgBU,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACX;QAC1C,8BACEW,gBAAgB,CAACX,SAAS,CAACK,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBX;QACtC,oBAAoBW,gBAAgBV;QACpC,CAAC,CAAC,UAAU,EAAEM,oBAAoB,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAf,SAAS;QAAEsB;IAAU,IACrBjB;AAEJ"}
+{"version":3,"sources":["../../src/form/textFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @since 6.0.0 */\nexport interface TextFieldContainerClassNameOptions\n  extends FormThemeOptions, FormComponentStates {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: 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 * @since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    rightAddon,\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      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","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAuBnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,qBAAqB,MAAM,EAC5B,GAAGZ;IACJ,MAAMa,YAAYX,UAAU;IAC5B,MAAMY,UAAUZ,UAAU;IAC1B,MAAMa,SAASb,UAAU;IACzB,MAAMc,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWR;IAEnC,IAAIY;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAId,OAAO;QAChBc,YAAY;IACd;IAEA,OAAOvB,IACLG,OAAO;QACLM;QACAG;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBZ,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASa;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWV;QAC5B,gBAAgBU,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACX;QAC1C,8BACEW,gBAAgB,CAACX,SAAS,CAACK,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBX;QACtC,oBAAoBW,gBAAgBV;QACpC,CAAC,CAAC,UAAU,EAAEM,oBAAoB,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAf,SAAS;QAAEsB;IAAU,IACrBjB;AAEJ"}