@react-md/core 1.0.0-next.0

package/dist/form/Checkbox.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { InputToggle } from "./InputToggle.js";
+/**
+ * **Client Component**
+ *
+ * You'll generally want to use the `useCheckboxGroup` hook for managing the
+ * checked state for groups of checkboxes and indeterminate checkbox behavior.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import type { ReactElement } from "react";
+ * import { Checkbox } from "@react-md/core";
+ *
+ * function Example(): ReactElement {
+ *   return <Checkbox label="Checkbox" value="a" />;
+ * }
+ * ```
+ */ export const Checkbox = /*#__PURE__*/ forwardRef(function Checkbox(props, ref) {
+    return /*#__PURE__*/ _jsx(InputToggle, {
+        ...props,
+        ref: ref,
+        type: "checkbox"
+    });
+});
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/form/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/Checkbox.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { InputToggle, type CheckboxProps } from \"./InputToggle.js\";\n\n/**\n * **Client Component**\n *\n * You'll generally want to use the `useCheckboxGroup` hook for managing the\n * checked state for groups of checkboxes and indeterminate checkbox behavior.\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Checkbox } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return <Checkbox label=\"Checkbox\" value=\"a\" />;\n * }\n * ```\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(props, ref) {\n    return <InputToggle {...props} ref={ref} type=\"checkbox\" />;\n  }\n);\n"],"names":["forwardRef","InputToggle","Checkbox","props","ref","type"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,WAAW,QAA4B,mBAAmB;AAEnE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,qBAAO,KAACH;QAAa,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AAChD,GACA"}

package/dist/form/Fieldset.d.ts

@@ -0,0 +1,48 @@
+import { type FieldsetHTMLAttributes } from "react";
+/** @remarks \@since 6.0.0 */
+export interface FieldsetClassNameOptions {
+    className?: string;
+    /**
+     * Set this to `true` to enable the default browser styles for a fieldset.
+     *
+     * @remarks \@since 6.0.0 This was renamed from `unstyled`.
+     * @defaultValue `false`
+     */
+    browserStyles?: boolean;
+    /**
+     * @defaultValue `false`
+     */
+    fullWidth?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function fieldset(options?: FieldsetClassNameOptions): string;
+/**
+ * **Server Component**
+ *
+ * @remarks \@since 6.0.0 Removed the `legend`, `legendStyle`,
+ * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`
+ * yourself manually instead of using a prop.
+ */
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>, FieldsetClassNameOptions {
+}
+/**
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Form, Fieldset, Legend } from "@react-md/core";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Form>
+ *       <Fieldset>
+ *         <Legend>Some Title</Legend>
+ *         // form components
+ *       </Fieldset>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ */
+export declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/form/Fieldset.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-fieldset");
+/**
+ * @remarks \@since 6.0.0
+ */ export function fieldset(options = {}) {
+    const { className, fullWidth, browserStyles = false } = options;
+    return cnb(styles({
+        unstyled: !browserStyles,
+        "full-width": fullWidth
+    }), className);
+}
+/**
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Form, Fieldset, Legend } from "@react-md/core";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Form>
+ *       <Fieldset>
+ *         <Legend>Some Title</Legend>
+ *         // form components
+ *       </Fieldset>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ */ export const Fieldset = /*#__PURE__*/ forwardRef(function Fieldset(props, ref) {
+    const { className, fullWidth = false, browserStyles = false, children, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("fieldset", {
+        ...remaining,
+        ref: ref,
+        className: fieldset({
+            className,
+            fullWidth,
+            browserStyles
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=Fieldset.js.map

package/dist/form/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/Fieldset.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type FieldsetHTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-fieldset\");\n\n/** @remarks \\@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   * @remarks \\@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 * @remarks \\@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\n/**\n * **Server Component**\n *\n * @remarks \\@since 6.0.0 Removed the `legend`, `legendStyle`,\n * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`\n * yourself manually instead of using a prop.\n */\nexport interface FieldsetProps\n  extends FieldsetHTMLAttributes<HTMLFieldSetElement>,\n    FieldsetClassNameOptions {}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Fieldset, Legend } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Some Title</Legend>\n *         // form components\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n  function Fieldset(props, ref) {\n    const {\n      className,\n      fullWidth = false,\n      browserStyles = false,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <fieldset\n        {...remaining}\n        ref={ref}\n        className={fieldset({\n          className,\n          fullWidth,\n          browserStyles,\n        })}\n      >\n        {children}\n      </fieldset>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","fieldset","options","className","fullWidth","browserStyles","unstyled","Fieldset","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAqC,QAAQ;AAChE,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,OAAOL,IACLG,OAAO;QAAEM,UAAU,CAACD;QAAe,cAAcD;IAAU,IAC3DD;AAEJ;AAaA;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMI,yBAAWT,WACtB,SAASS,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJN,SAAS,EACTC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBK,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACP;QACE,GAAGU,SAAS;QACbF,KAAKA;QACLN,WAAWF,SAAS;YAClBE;YACAC;YACAC;QACF;kBAECK;;AAGP,GACA"}

package/dist/form/FileInput.d.ts

@@ -0,0 +1,105 @@
+import { type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
+import { type ButtonClassNameOptions, type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
+import { type PropsWithRef } from "../types.js";
+/** @remarks \@since 6.0.0 */
+export type FileInputClassNameOptions = ButtonClassNameOptions;
+/** @remarks \@since 6.0.0 */
+export declare function fileInput(options?: FileInputClassNameOptions): string;
+/** @remarks \@since 6.0.0 */
+export type FileInputHTMLAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
+/**
+ * @remarks \@since 6.0.0 Removed the `disableIconSpacing` prop since it is no
+ * longer required.
+ */
+export interface FileInputProps extends ButtonClassNameThemeOptions, FileInputHTMLAttributes {
+    /**
+     * This is the label text for icon-only file inputs.
+     *
+     * @defaultValue `"Upload"`
+     */
+    srOnlyLabel?: ReactNode;
+    /**
+     * Any additional props to provide to the container `<label>` element since
+     * most props get passed to the `<input type="file">`. So this would be useful
+     * for inline style or click handlers.
+     */
+    labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    /**
+     * An optional icon to display for the file input.
+     *
+     * @defaultValue `getIcon("upload")`
+     */
+    icon?: ReactNode;
+    /**
+     * Boolean if the icon should appear after the children in the label.
+     *
+     * @defaultValue `false`
+     */
+    iconAfter?: boolean;
+    /**
+     * Boolean if the file input should no longer allow the same file to be
+     * selected multiple times and trigger the `onChange` each time it is
+     * selected.
+     *
+     * @defaultValue `false`
+     */
+    disableRepeatableFiles?: boolean;
+    /**
+     * Children should generally be provided when the {@link buttonType} is
+     * set to `"text"`. This defaults to a screen-reader only accessible text.
+     *
+     * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`
+     */
+    children?: ReactNode;
+}
+/**
+ * **Client Component**
+ * This might be able to become a server component if I remove the getIcon hook
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { FileInput, Form } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * const extensions = [
+ *   "svg",
+ *   "jpeg",
+ *   "jpg",
+ *   "png",
+ *   "apng",
+ *   "mkv",
+ *   "mp4",
+ *   "mpeg",
+ *   "mpg",
+ *   "webm",
+ *   "mov",
+ * ] as const;
+ *
+ * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;
+ * const maxFiles = 10;
+ *
+ * function Example(): ReactElement {
+ *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =
+ *     useFileUpload({
+ *       maxFiles,
+ *       maxFileSize: FOUR_HUNDRED_MB,
+ *       extensions,
+ *     });
+ *
+ *   return (
+ *     <Form>
+ *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />
+ *       <Button onClick={reset} disabled={!stats.length}>
+ *         Remove all files
+ *       </Button>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0 Added additional support for `iconSize` and
+ * `responsive`. Also removed the `disableIconSpacing` prop since it is no
+ * longer required.
+ */
+export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/FileInput.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { button } from "../button/buttonStyles.js";
+import { getIcon } from "../icon/iconConfig.js";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { SrOnly } from "../typography/SrOnly.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+/** @remarks \@since 6.0.0 */ export function fileInput(options = {}) {
+    return cnb("rmd-file-input", button(options));
+}
+/**
+ * **Client Component**
+ * This might be able to become a server component if I remove the getIcon hook
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { FileInput, Form } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * const extensions = [
+ *   "svg",
+ *   "jpeg",
+ *   "jpg",
+ *   "png",
+ *   "apng",
+ *   "mkv",
+ *   "mp4",
+ *   "mpeg",
+ *   "mpg",
+ *   "webm",
+ *   "mov",
+ * ] as const;
+ *
+ * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;
+ * const maxFiles = 10;
+ *
+ * function Example(): ReactElement {
+ *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =
+ *     useFileUpload({
+ *       maxFiles,
+ *       maxFileSize: FOUR_HUNDRED_MB,
+ *       extensions,
+ *     });
+ *
+ *   return (
+ *     <Form>
+ *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />
+ *       <Button onClick={reset} disabled={!stats.length}>
+ *         Remove all files
+ *       </Button>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0 Added additional support for `iconSize` and
+ * `responsive`. Also removed the `disableIconSpacing` prop since it is no
+ * longer required.
+ */ export const FileInput = /*#__PURE__*/ forwardRef(function FileInput(props, ref) {
+    const { id: propId, className, children: propChildren, icon: propIcon, iconAfter = false, srOnlyLabel = "Upload", disableRepeatableFiles = false, labelProps, theme = "primary", themeType = "contained", buttonType = propChildren ? "text" : "icon", disabled = false, iconSize, responsive, multiple = false, ...remaining } = props;
+    const id = useEnsuredId(propId, "file-input");
+    const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
+        ...labelProps,
+        onClick (event) {
+            labelProps?.onClick?.(event);
+            // stop propagation so 2 ripples are not created
+            event.stopPropagation();
+        },
+        disabled
+    });
+    const icon = getIcon("upload", propIcon);
+    let children = propChildren;
+    if (typeof propChildren === "undefined" && !props["aria-label"] && !props["aria-labelledby"]) {
+        children = /*#__PURE__*/ _jsx(SrOnly, {
+            phoneOnly: responsive,
+            children: srOnlyLabel
+        });
+    }
+    return /*#__PURE__*/ _jsxs("label", {
+        ...labelProps,
+        ...handlers,
+        className: fileInput({
+            theme,
+            themeType,
+            buttonType,
+            disabled,
+            iconSize,
+            pressed,
+            responsive,
+            pressedClassName,
+            className: className || labelProps?.className
+        }),
+        children: [
+            !iconAfter && icon,
+            children,
+            iconAfter && icon,
+            /*#__PURE__*/ _jsx("input", {
+                ...remaining,
+                id: id,
+                ref: ref,
+                value: disableRepeatableFiles || !props.onChange ? remaining.value : "",
+                type: "file",
+                className: "rmd-hidden-input",
+                disabled: disabled,
+                multiple: multiple
+            }),
+            ripples
+        ]
+    });
+});
+
+//# sourceMappingURL=FileInput.js.map

package/dist/form/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/FileInput.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  button,\n  type ButtonClassNameOptions,\n  type ButtonClassNameThemeOptions,\n} from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { SrOnly } from \"../typography/SrOnly.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type FileInputClassNameOptions = ButtonClassNameOptions;\n\n/** @remarks \\@since 6.0.0 */\nexport function fileInput(options: FileInputClassNameOptions = {}): string {\n  return cnb(\"rmd-file-input\", button(options));\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type FileInputHTMLAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport interface FileInputProps\n  extends ButtonClassNameThemeOptions,\n    FileInputHTMLAttributes {\n  /**\n   * This is the label text for icon-only file inputs.\n   *\n   * @defaultValue `\"Upload\"`\n   */\n  srOnlyLabel?: ReactNode;\n\n  /**\n   * Any additional props to provide to the container `<label>` element since\n   * most props get passed to the `<input type=\"file\">`. So this would be useful\n   * for inline style or click handlers.\n   */\n  labelProps?: PropsWithRef<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\n\n  /**\n   * An optional icon to display for the file input.\n   *\n   * @defaultValue `getIcon(\"upload\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the children in the label.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the file input should no longer allow the same file to be\n   * selected multiple times and trigger the `onChange` each time it is\n   * selected.\n   *\n   * @defaultValue `false`\n   */\n  disableRepeatableFiles?: boolean;\n\n  /**\n   * Children should generally be provided when the {@link buttonType} is\n   * set to `\"text\"`. This defaults to a screen-reader only accessible text.\n   *\n   * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the getIcon hook\n *\n * @example\n * Simple Example\n * ```tsx\n * import { FileInput, Form } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const extensions = [\n *   \"svg\",\n *   \"jpeg\",\n *   \"jpg\",\n *   \"png\",\n *   \"apng\",\n *   \"mkv\",\n *   \"mp4\",\n *   \"mpeg\",\n *   \"mpg\",\n *   \"webm\",\n *   \"mov\",\n * ] as const;\n *\n * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;\n * const maxFiles = 10;\n *\n * function Example(): ReactElement {\n *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =\n *     useFileUpload({\n *       maxFiles,\n *       maxFileSize: FOUR_HUNDRED_MB,\n *       extensions,\n *     });\n *\n *   return (\n *     <Form>\n *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />\n *       <Button onClick={reset} disabled={!stats.length}>\n *         Remove all files\n *       </Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Added additional support for `iconSize` and\n * `responsive`. Also removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n  function FileInput(props, ref) {\n    const {\n      id: propId,\n      className,\n      children: propChildren,\n      icon: propIcon,\n      iconAfter = false,\n      srOnlyLabel = \"Upload\",\n      disableRepeatableFiles = false,\n      labelProps,\n      theme = \"primary\",\n      themeType = \"contained\",\n      buttonType = propChildren ? \"text\" : \"icon\",\n      disabled = false,\n      iconSize,\n      responsive,\n      multiple = false,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"file-input\");\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        ...labelProps,\n        onClick(event) {\n          labelProps?.onClick?.(event);\n\n          // stop propagation so 2 ripples are not created\n          event.stopPropagation();\n        },\n        disabled,\n      });\n\n    const icon = getIcon(\"upload\", propIcon);\n    let children = propChildren;\n    if (\n      typeof propChildren === \"undefined\" &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      children = <SrOnly phoneOnly={responsive}>{srOnlyLabel}</SrOnly>;\n    }\n\n    return (\n      <label\n        {...labelProps}\n        {...handlers}\n        className={fileInput({\n          theme,\n          themeType,\n          buttonType,\n          disabled,\n          iconSize,\n          pressed,\n          responsive,\n          pressedClassName,\n          className: className || labelProps?.className,\n        })}\n      >\n        {!iconAfter && icon}\n        {children}\n        {iconAfter && icon}\n        <input\n          {...remaining}\n          id={id}\n          ref={ref}\n          value={\n            disableRepeatableFiles || !props.onChange ? remaining.value : \"\"\n          }\n          type=\"file\"\n          className=\"rmd-hidden-input\"\n          disabled={disabled}\n          multiple={multiple}\n        />\n        {ripples}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","button","getIcon","useElementInteraction","SrOnly","useEnsuredId","fileInput","options","FileInput","props","ref","id","propId","className","children","propChildren","icon","propIcon","iconAfter","srOnlyLabel","disableRepeatableFiles","labelProps","theme","themeType","buttonType","disabled","iconSize","responsive","multiple","remaining","pressed","pressedClassName","ripples","handlers","onClick","event","stopPropagation","phoneOnly","label","input","value","onChange","type"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SACEC,MAAM,QAGD,4BAA4B;AACnC,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,MAAM,QAAQ,0BAA0B;AACjD,SAASC,YAAY,QAAQ,qBAAqB;AAKlD,2BAA2B,GAC3B,OAAO,SAASC,UAAUC,UAAqC,CAAC,CAAC;IAC/D,OAAOR,IAAI,kBAAkBE,OAAOM;AACtC;AAgEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,MAAMC,0BAAYR,WACvB,SAASQ,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,cAAc,QAAQ,EACtBC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,QAAQ,SAAS,EACjBC,YAAY,WAAW,EACvBC,aAAaT,eAAe,SAAS,MAAM,EAC3CU,WAAW,KAAK,EAChBC,QAAQ,EACRC,UAAU,EACVC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGpB;IACJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEkB,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD9B,sBAAsB;QACpB,GAAGkB,UAAU;QACba,SAAQC,KAAK;YACXd,YAAYa,UAAUC;YAEtB,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAX;IACF;IAEF,MAAMT,OAAOd,QAAQ,UAAUe;IAC/B,IAAIH,WAAWC;IACf,IACE,OAAOA,iBAAiB,eACxB,CAACN,KAAK,CAAC,aAAa,IACpB,CAACA,KAAK,CAAC,kBAAkB,EACzB;QACAK,yBAAW,KAACV;YAAOiC,WAAWV;sBAAaR;;IAC7C;IAEA,qBACE,MAACmB;QACE,GAAGjB,UAAU;QACb,GAAGY,QAAQ;QACZpB,WAAWP,UAAU;YACnBgB;YACAC;YACAC;YACAC;YACAC;YACAI;YACAH;YACAI;YACAlB,WAAWA,aAAaQ,YAAYR;QACtC;;YAEC,CAACK,aAAaF;YACdF;YACAI,aAAaF;0BACd,KAACuB;gBACE,GAAGV,SAAS;gBACblB,IAAIA;gBACJD,KAAKA;gBACL8B,OACEpB,0BAA0B,CAACX,MAAMgC,QAAQ,GAAGZ,UAAUW,KAAK,GAAG;gBAEhEE,MAAK;gBACL7B,WAAU;gBACVY,UAAUA;gBACVG,UAAUA;;YAEXI;;;AAGP,GACA"}

package/dist/form/Form.d.ts

@@ -0,0 +1,19 @@
+import { type FormHTMLAttributes } from "react";
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    /**
+     * Boolean if the form should no longer prevent default submit behavior. If
+     * you enable this prop you should honestly just use a `<form>` element
+     * instead
+     *
+     * @defaultValue `false`
+     */
+    disablePreventDefault?: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * This is probably one of the least useful components available as it doesn't
+ * do much styling or logic. All this form component will do is add basic flex
+ * behavior and prevent the default form submit behavior.
+ */
+export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;

package/dist/form/Form.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Server Component**
+ *
+ * This is probably one of the least useful components available as it doesn't
+ * do much styling or logic. All this form component will do is add basic flex
+ * behavior and prevent the default form submit behavior.
+ */ export const Form = /*#__PURE__*/ forwardRef(function Form(props, ref) {
+    const { children, onSubmit = noop, disablePreventDefault = false, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("form", {
+        ...remaining,
+        onSubmit: (event)=>{
+            if (!disablePreventDefault) {
+                event.preventDefault();
+            }
+            onSubmit(event);
+        },
+        ref: ref,
+        children: children
+    });
+});
+
+//# sourceMappingURL=Form.js.map

package/dist/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["import { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":";AAAA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}

package/dist/form/FormMessage.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type FormMessageInputLengthCounterProps, type FormMessageProps } from "./types.js";
+/**
+ * **Server Component**
+ *
+ * The `FormMessage` component is used to create additional helper messages or
+ * error messages and generally placed below the related `TextField`. If a
+ * `length` (of the `value`) and `maxLength` are provided, a counter will also
+ * be displayed to the right of the `children`.
+ *
+ * This component can also be used to create form-level validation messages by
+ * setting the `role` prop to `"alert"`.
+ */
+export declare const FormMessage: import("react").ForwardRefExoticComponent<FormMessageProps & Partial<FormMessageInputLengthCounterProps> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/FormMessage.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { FormMessageCounter } from "./FormMessageCounter.js";
+import { getFormConfig } from "./formConfig.js";
+import { formMessage, formMessageText } from "./formMessageStyles.js";
+/**
+ * **Server Component**
+ *
+ * The `FormMessage` component is used to create additional helper messages or
+ * error messages and generally placed below the related `TextField`. If a
+ * `length` (of the `value`) and `maxLength` are provided, a counter will also
+ * be displayed to the right of the `children`.
+ *
+ * This component can also be used to create form-level validation messages by
+ * setting the `role` prop to `"alert"`.
+ */ export const FormMessage = /*#__PURE__*/ forwardRef(function FormMessage(props, ref) {
+    const { id: propId, role, className, counterStyle, counterClassName, messageStyle, messageClassName, error = false, disableWrap = false, theme: propTheme, children, length, maxLength, ...remaining } = props;
+    const id = useEnsuredId(propId, "form-message");
+    const theme = getFormConfig("theme", propTheme);
+    let message = children;
+    if (!disableWrap && children) {
+        message = /*#__PURE__*/ _jsx("p", {
+            id: `${id}-message`,
+            style: messageStyle,
+            className: formMessageText({
+                className: messageClassName
+            }),
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        ...remaining,
+        id: id,
+        ref: ref,
+        "aria-live": role !== "alert" ? "polite" : undefined,
+        role: role,
+        className: formMessage({
+            error,
+            theme,
+            className
+        }),
+        children: [
+            message,
+            typeof length === "number" && typeof maxLength === "number" && /*#__PURE__*/ _jsx(FormMessageCounter, {
+                id: `${id}-counter`,
+                style: counterStyle,
+                className: counterClassName,
+                children: `${length} / ${maxLength}`
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=FormMessage.js.map

package/dist/form/FormMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/FormMessage.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageCounter } from \"./FormMessageCounter.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { formMessage, formMessageText } from \"./formMessageStyles.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\n\n/**\n * **Server Component**\n *\n * The `FormMessage` component is used to create additional helper messages or\n * error messages and generally placed below the related `TextField`. If a\n * `length` (of the `value`) and `maxLength` are provided, a counter will also\n * be displayed to the right of the `children`.\n *\n * This component can also be used to create form-level validation messages by\n * setting the `role` prop to `\"alert\"`.\n */\nexport const FormMessage = forwardRef<\n  HTMLDivElement,\n  FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n>(function FormMessage(props, ref) {\n  const {\n    id: propId,\n    role,\n    className,\n    counterStyle,\n    counterClassName,\n    messageStyle,\n    messageClassName,\n    error = false,\n    disableWrap = false,\n    theme: propTheme,\n    children,\n    length,\n    maxLength,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"form-message\");\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  let message = children;\n  if (!disableWrap && children) {\n    message = (\n      <p\n        id={`${id}-message`}\n        style={messageStyle}\n        className={formMessageText({ className: messageClassName })}\n      >\n        {children}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      {...remaining}\n      id={id}\n      ref={ref}\n      aria-live={role !== \"alert\" ? \"polite\" : undefined}\n      role={role}\n      className={formMessage({ error, theme, className })}\n    >\n      {message}\n      {typeof length === \"number\" && typeof maxLength === \"number\" && (\n        <FormMessageCounter\n          id={`${id}-counter`}\n          style={counterStyle}\n          className={counterClassName}\n        >\n          {`${length} / ${maxLength}`}\n        </FormMessageCounter>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","useEnsuredId","FormMessageCounter","getFormConfig","formMessage","formMessageText","FormMessage","props","ref","id","propId","role","className","counterStyle","counterClassName","messageStyle","messageClassName","error","disableWrap","theme","propTheme","children","length","maxLength","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,EAAEC,eAAe,QAAQ,yBAAyB;AAMtE;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcN,WAGzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,SAAS,EACTC,YAAY,EACZC,gBAAgB,EAChBC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACT,GAAGC,WACJ,GAAGjB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIK,UAAUJ;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BI,wBACE,KAACC;YACCjB,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;YACnBkB,OAAOZ;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACO;QACE,GAAGJ,SAAS;QACbf,IAAIA;QACJD,KAAKA;QACLqB,aAAWlB,SAAS,UAAU,WAAWmB;QACzCnB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDa;YACA,OAAOH,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;gBACnBkB,OAAOd;gBACPD,WAAWE;0BAEV,CAAC,EAAEQ,OAAO,GAAG,EAAEC,UAAU,CAAC;;;;AAKrC,GAAG"}

package/dist/form/FormMessageContainer.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from "react";
+import { type PropsWithRef } from "../types.js";
+import { type FormMessageProps } from "./types.js";
+/**
+ * @remarks \@since 2.5.0
+ */
+export interface FormMessageContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * If the extension doesn't actually want to render the `FormMessage`
+     * component, these props are optional. It kind of eliminates the whole
+     * purpose of this component though.
+     */
+    messageProps?: PropsWithRef<FormMessageProps, HTMLDivElement>;
+}
+/**
+ * **Server Component**
+ * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
+ * and renders the {@link FormMessage} component.
+ *
+ * @remarks \@since 2.5.0
+ */
+export declare const FormMessageContainer: import("react").ForwardRefExoticComponent<FormMessageContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/FormMessageContainer.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { FormMessage } from "./FormMessage.js";
+/**
+ * **Server Component**
+ * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
+ * and renders the {@link FormMessage} component.
+ *
+ * @remarks \@since 2.5.0
+ */ export const FormMessageContainer = /*#__PURE__*/ forwardRef(function FormMessageContainer(props, ref) {
+    const { className, children, messageProps, ...remaining } = props;
+    if (!messageProps) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        ...remaining,
+        ref: ref,
+        className: cnb("rmd-form-message-container", className),
+        children: [
+            children,
+            /*#__PURE__*/ _jsx(FormMessage, {
+                ...messageProps
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=FormMessageContainer.js.map

package/dist/form/FormMessageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<FormMessageProps, HTMLDivElement>;\n}\n\n/**\n * **Server Component**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @remarks \\@since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cnb(\"rmd-form-message-container\", className)}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["cnb","forwardRef","FormMessage","FormMessageContainer","props","ref","className","children","messageProps","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,WAAW,QAAQ,mBAAmB;AAgB/C;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBF,WAGlC,SAASE,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGL;IAC5D,IAAI,CAACI,cAAc;QACjB,qBAAO;sBAAGD;;IACZ;IAEA,qBACE,MAACG;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWN,IAAI,8BAA8BM;;YAE5CC;0BACD,KAACL;gBAAa,GAAGM,YAAY;;;;AAGnC,GAAG"}

package/dist/form/FormMessageCounter.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+/** @remarks \@since 2.9.0 */
+export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The children to display in the counter. This is normally a string like:
+     *
+     * @example
+     * String Example
+     * ```ts
+     * `${min} / ${max}`
+     * ```
+     */
+    children: ReactNode;
+}
+/**
+ * **Server Component**
+ *
+ * This component can be used to create a "counter" within the
+ * {@link FormMessage} component.
+ *
+ * Note: This is really only useful when using the {@link FormMessage} component
+ * without a {@link TextField}.
+ *
+ * @example
+ * Example Usage
+ * ```ts
+ * interface ExampleProps {
+ *   min: number;
+ *   max: number;
+ * }
+ *
+ * function Example({ min, max }: ExampleProps) {
+ *   return (
+ *     <FormMessage disableWrap>
+ *       <FormMessageCounter>
+ *         {`${min} / ${max}`}
+ *       </FormMessageCounter>
+ *     </FormMessage>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 2.9.0
+ */
+export declare function FormMessageCounter(props: FormMessageCounterProps): ReactElement;