@mirohq/design-system-form 0.1.0-forms.3 → 0.1.0-forms.5

package/dist/main.js

@@ -6,9 +6,8 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var designSystemBaseForm = require('@mirohq/design-system-base-form');
 var designSystemUtils = require('@mirohq/design-system-utils');
-var designSystemBaseInput = require('@mirohq/design-system-base-input');
-var designSystemUseId = require('@mirohq/design-system-use-id');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,167 +18,131 @@ const StyledForm = designSystemStitches.styled(designSystemPrimitive.Primitive.f
 });
 
 const StyledLabel = designSystemStitches.styled(designSystemPrimitive.Primitive.label, {
-  display: "block",
-  variants: {
-    floating: {
-      true: {
-        position: "absolute",
-        zIndex: 1,
-        top: 0,
-        left: "$150",
-        pointerEvents: "none"
-      },
-      false: {
-        fontSize: "$200",
-        lineHeight: 1.5,
-        marginBottom: "$100"
-      }
-    }
-  }
+  fontSize: "$200",
+  lineHeight: 1.5,
+  marginBottom: "$100",
+  display: "block"
 });
 const StyledAsterisk = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   color: "$text-danger"
 });
 
-const labelSymbol = Symbol.for("label");
-const isLabelComponent = (labelComponent) => {
-  var _a, _b;
-  return Boolean(
-    (_b = labelComponent[labelSymbol]) != null ? _b : (
-      // @ts-expect-error
-      (_a = labelComponent == null ? void 0 : labelComponent.type) == null ? void 0 : _a[labelSymbol]
-    )
+const Label = React__default["default"].forwardRef(({ floating = true, children, ...restProps }, forwardRef) => {
+  const {
+    setLabel,
+    setIsFloatingLabel,
+    formElementId,
+    required = false
+  } = designSystemBaseForm.useFormFieldContext();
+  const label = React.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children,
+      required && /* @__PURE__ */ jsxRuntime.jsx(StyledAsterisk, { children: "*" })
+    ] }),
+    [children, required]
   );
-};
+  React.useEffect(() => {
+    setLabel(label);
+  }, [setLabel, label]);
+  React.useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating]);
+  if (floating) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { htmlFor: formElementId, ...restProps, ref: forwardRef, children: label });
+});
 
-const Label = React__default["default"].forwardRef(
-  ({ floating = false, required = false, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, { ...restProps, ref: forwardRef, floating, children: [
-    children,
-    required && /* @__PURE__ */ jsxRuntime.jsx(StyledAsterisk, { children: "*" })
-  ] })
-);
-Label[labelSymbol] = true;
-
-const FormFieldContext = React.createContext({});
-const FormFieldProvider = ({
-  children,
-  status: customStatus,
-  id: customId,
-  ...restProps
-}) => {
-  const formElementRef = React.useRef(null);
-  const [status, setStatus] = React.useState(customStatus != null ? customStatus : "pristine");
-  const [focused, setFocused] = React.useState(false);
-  const autoId = designSystemUseId.useId();
-  const id = customId != null ? customId : autoId;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    FormFieldContext.Provider,
-    {
-      value: {
-        ...restProps,
-        id,
-        formElementRef,
-        messageId: "".concat(id, "-message"),
-        helperId: "".concat(id, "-helper"),
-        descriptionId: "".concat(id, "-description"),
-        status,
-        setStatus,
-        focused,
-        setFocused
-      },
-      children
-    }
-  );
-};
-const useFormFieldContext = () => React.useContext(FormFieldContext);
+const StyledDescription = designSystemStitches.styled(designSystemPrimitive.Primitive.p, {
+  fontSize: "$175",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "$150"
+});
+
+const StyledHelper = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  fontSize: "$150",
+  lineHeight: 1.5,
+  marginTop: "$50"
+});
 
 const StyledField = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  marginBottom: "$300"
+  marginBottom: "$300",
+  position: "relative",
+  "&[data-disabled]": {
+    ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
+      color: "$text-neutrals-disabled"
+    }
+  },
+  "&[data-readonly]": {
+    ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
+      color: "$text-neutrals-subtle"
+    }
+  }
 });
 
 const Root = React__default["default"].forwardRef(
-  ({ children, ...restProps }, forwardRef) => {
+  ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {
+    var _a;
     const {
       id,
-      status,
+      status: formFieldStatus,
+      setStatus,
       required,
       focused,
       setFocused,
       disabled,
       ariaDisabled,
-      readOnly
-    } = useFormFieldContext();
-    const label = React__default["default"].Children.toArray(children).find(
-      isLabelComponent
-    );
-    const floating = designSystemUtils.booleanify(label == null ? void 0 : label.props.floating);
-    const formattedChildren = floating ? React__default["default"].Children.map(React__default["default"].Children.toArray(children), (child) => {
-      if (isLabelComponent(child)) {
-        return null;
-      }
-      if (designSystemBaseInput.isInputComponent(child)) {
-        const input = child;
-        return React__default["default"].cloneElement(input, {
-          ...input.props,
-          label
-        });
-      }
-      return child;
-    }) : children;
+      readOnly,
+      formElementRef
+    } = designSystemBaseForm.useFormFieldContext();
+    const status = statusProps != null ? statusProps : formFieldStatus;
+    const initialValueRef = React.useRef();
+    if (((_a = formElementRef.current) == null ? void 0 : _a.value) !== void 0 && initialValueRef.current === void 0) {
+      initialValueRef.current = formElementRef.current.value;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledField,
       {
-        id,
-        "aria-disabled": ariaDisabled,
-        "aria-required": required,
-        "aria-invalid": status === "invalid",
         "data-status": status,
-        "data-required": designSystemUtils.booleanishAttrValue(required),
-        "data-focused": designSystemUtils.booleanishAttrValue(focused),
-        "data-disabled": designSystemUtils.booleanishAttrValue(disabled),
-        "data-readonly": designSystemUtils.booleanishAttrValue(readOnly),
-        onFocus: () => setFocused == null ? void 0 : setFocused(true),
+        "data-required": designSystemUtils.booleanAttrValue(required),
+        "data-focused": designSystemUtils.booleanAttrValue(focused),
+        "data-disabled": designSystemUtils.booleanAttrValue(
+          disabled === true || ariaDisabled === true
+        ),
+        "data-readonly": designSystemUtils.booleanAttrValue(readOnly),
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus == null ? void 0 : onFocus(e);
+        },
+        onBlur: (e) => {
+          if (statusProps === void 0) {
+            setStatus(
+              initialValueRef.current !== e.target.value ? designSystemBaseForm.FORM_FIELD_STATUS.dirty : designSystemBaseForm.FORM_FIELD_STATUS.touched
+            );
+          }
+          setFocused(false);
+          onBlur == null ? void 0 : onBlur(e);
+        },
         ...restProps,
-        ref: forwardRef,
-        children: formattedChildren
+        id,
+        ref: forwardRef
       }
     );
   }
 );
-const Field = React__default["default"].forwardRef(
-  ({
-    id,
-    required,
-    status,
-    readOnly,
-    disabled,
-    "aria-disabled": ariaDisabled,
-    ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
-    FormFieldProvider,
-    {
-      required,
-      status,
-      readOnly,
-      disabled,
-      "aria-disabled": ariaDisabled,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, ref: forwardRef })
-    }
-  )
-);
-
-const StyledHelper = designSystemStitches.styled(designSystemPrimitive.Primitive.p, {
-  fontSize: "$150",
-  lineHeight: 1.5,
-  marginTop: "$50"
-});
+const Field = React__default["default"].forwardRef(({ id, status, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FormFieldProvider, { status, id, children: /* @__PURE__ */ jsxRuntime.jsx(Root, { status, ...restProps, ref: forwardRef }) }));
 
 const Helper = React__default["default"].forwardRef((props, forwardRef) => {
-  const { helperId } = useFormFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledHelper, { id: helperId, ...props, ref: forwardRef });
+  var _a;
+  const { helperId, setHelperId } = designSystemBaseForm.useFormFieldContext();
+  const id = (_a = props.id) != null ? _a : helperId;
+  React.useEffect(() => setHelperId(id), [setHelperId, id]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledHelper, { ...props, id, ref: forwardRef });
 });
 
-const StyledMessage = designSystemStitches.styled(Helper, {
+const StyledMessage = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  fontSize: "$150",
+  lineHeight: 1.5,
+  marginTop: "$50",
   variants: {
     status: {
       valid: {
@@ -190,36 +153,37 @@ const StyledMessage = designSystemStitches.styled(Helper, {
       },
       dirty: {},
       pristine: {},
-      touched: {},
-      pending: {}
+      touched: {}
     }
   }
 });
 
 const Message = React__default["default"].forwardRef((props, forwardRef) => {
-  const { messageId, status } = useFormFieldContext();
+  var _a;
+  const { messageId, setMessageId, status } = designSystemBaseForm.useFormFieldContext();
+  const id = (_a = props.id) != null ? _a : messageId;
+  React.useEffect(() => setMessageId(id), [setMessageId, id]);
+  if (status !== designSystemBaseForm.FORM_FIELD_STATUS.invalid && status !== designSystemBaseForm.FORM_FIELD_STATUS.valid) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledMessage,
     {
-      id: messageId,
-      "aria-live": "polite",
+      role: "alert",
       ...props,
+      id,
       status,
       ref: forwardRef
     }
   );
 });
 
-const StyledDescription = designSystemStitches.styled(designSystemPrimitive.Primitive.p, {
-  fontSize: "$175",
-  lineHeight: 1.5,
-  margin: 0,
-  marginBottom: "$150"
-});
-
 const Description = React__default["default"].forwardRef((props, forwardRef) => {
-  const { descriptionId } = useFormFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledDescription, { id: descriptionId, ...props, ref: forwardRef });
+  var _a;
+  const { descriptionId, setDescriptionId } = designSystemBaseForm.useFormFieldContext();
+  const id = (_a = props.id) != null ? _a : descriptionId;
+  React.useEffect(() => setDescriptionId(id), [setDescriptionId, id]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledDescription, { ...props, id, ref: forwardRef });
 });
 
 const Form = StyledForm;

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/util.ts","../src/partials/label.tsx","../src/hooks/use-form-field-context.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.styled.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.styled.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n  all: 'unset',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n  display: 'block',\n\n  variants: {\n    floating: {\n      true: {\n        position: 'absolute',\n        zIndex: 1,\n        top: 0,\n        left: '$150',\n        pointerEvents: 'none',\n      },\n      false: {\n        fontSize: '$200',\n        lineHeight: 1.5,\n        marginBottom: '$100',\n      },\n    },\n  },\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n  color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","export const labelSymbol: unique symbol = Symbol.for('label')\nexport type LabelReactElement = React.ReactElement & { [labelSymbol]?: boolean }\n\nexport const isLabelComponent = <T>(\n  labelComponent: T & { [labelSymbol]?: boolean }\n): boolean =>\n  Boolean(\n    labelComponent[labelSymbol] ??\n      // @ts-expect-error\n      labelComponent?.type?.[labelSymbol]\n  )\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\nimport { labelSymbol } from '../util'\n\nexport interface LabelProps extends Omit<StyledLabelProps, 'placeholder'> {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n\n  floating?: boolean\n\n  required?: boolean\n}\n\nexport const Label = React.forwardRef<\n  ElementRef<typeof StyledLabel>,\n  LabelProps\n>(\n  (\n    { floating = false, required = false, children, ...restProps },\n    forwardRef\n  ) => (\n    <StyledLabel {...restProps} ref={forwardRef} floating={floating}>\n      {children}\n      {required && <StyledAsterisk>*</StyledAsterisk>}\n    </StyledLabel>\n  )\n) as ForwardRefExoticComponent<LabelProps> & {\n  [labelSymbol]?: boolean\n}\n\nLabel[labelSymbol] = true\n","import React, { createContext, useContext, useState, useRef } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\n\nexport type Status =\n  | 'valid'\n  | 'invalid'\n  | 'dirty'\n  | 'pristine'\n  | 'touched'\n  | 'pending'\n\ninterface FormFieldProps {\n  required?: boolean\n  readOnly?: boolean\n  disabled?: boolean\n  ariaDisabled?: Booleanish\n  status?: Status\n  id: string\n}\n\ninterface FormFieldContextProps extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<Status>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  messageId: string\n  descriptionId: string\n  formElementRef: React.RefObject<HTMLInputElement>\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [status, setStatus] = useState<Status>(customStatus ?? 'pristine')\n  const [focused, setFocused] = useState(false)\n\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        messageId: `${id}-message`,\n        helperId: `${id}-helper`,\n        descriptionId: `${id}-description`,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = (): FormFieldContextProps =>\n  useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledField = styled(Primitive.div, {\n  marginBottom: '$300',\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanify, booleanishAttrValue } from '@mirohq/design-system-utils'\nimport type { InputReactElement } from '@mirohq/design-system-base-input'\nimport { isInputComponent } from '@mirohq/design-system-base-input'\n\nimport {\n  useFormFieldContext,\n  FormFieldProvider,\n} from '../hooks/use-form-field-context'\nimport type { FormFieldProviderProps } from '../hooks/use-form-field-context'\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\nimport type { LabelReactElement } from '../util'\nimport { isLabelComponent } from '../util'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n  ({ children, ...restProps }, forwardRef) => {\n    const {\n      id,\n      status,\n      required,\n      focused,\n      setFocused,\n      disabled,\n      ariaDisabled,\n      readOnly,\n    } = useFormFieldContext()\n\n    const label = React.Children.toArray(children).find(\n      isLabelComponent\n    ) as LabelReactElement\n\n    const floating = booleanify(label?.props.floating)\n\n    const formattedChildren = floating\n      ? React.Children.map(React.Children.toArray(children), child => {\n          if (isLabelComponent(child)) {\n            return null\n          }\n\n          // includes input, select and textarea\n          if (isInputComponent(child)) {\n            const input = child as InputReactElement\n            return React.cloneElement(input, {\n              ...input.props,\n              label: label,\n            })\n          }\n\n          return child\n        })\n      : children\n\n    return (\n      <StyledField\n        id={id}\n        aria-disabled={ariaDisabled}\n        aria-required={required}\n        aria-invalid={status === 'invalid'}\n        data-status={status}\n        data-required={booleanishAttrValue(required)}\n        data-focused={booleanishAttrValue(focused)}\n        data-disabled={booleanishAttrValue(disabled)}\n        data-readonly={booleanishAttrValue(readOnly)}\n        onFocus={() => setFocused?.(true)}\n        {...restProps}\n        ref={forwardRef}\n      >\n        {formattedChildren}\n      </StyledField>\n    )\n  }\n)\n\nexport const Field = React.forwardRef<\n  ElementRef<typeof StyledField>,\n  FieldProps\n>(\n  (\n    {\n      id,\n      required,\n      status,\n      readOnly,\n      disabled,\n      'aria-disabled': ariaDisabled,\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <FormFieldProvider\n      required={required}\n      status={status}\n      readOnly={readOnly}\n      disabled={disabled}\n      aria-disabled={ariaDisabled}\n    >\n      <Root {...restProps} ref={forwardRef} />\n    </FormFieldProvider>\n  )\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.p, {\n  fontSize: '$150',\n  lineHeight: 1.5,\n  marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from '../hooks/use-form-field-context'\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n  ElementRef<typeof StyledHelper>,\n  HelperProps\n>((props, forwardRef) => {\n  const { helperId } = useFormFieldContext()\n  return <StyledHelper id={helperId} {...props} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { Helper } from './helper'\n\nexport const StyledMessage = styled(Helper, {\n  variants: {\n    status: {\n      valid: {\n        color: '$text-success',\n      },\n      invalid: {\n        color: '$text-danger',\n      },\n      dirty: {},\n      pristine: {},\n      touched: {},\n      pending: {},\n    },\n  },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from '../hooks/use-form-field-context'\nimport type { Status } from '../hooks/use-form-field-context'\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n  status?: Status\n}\n\nexport const Message = React.forwardRef<\n  ElementRef<typeof StyledMessage>,\n  MessageProps\n>((props, forwardRef) => {\n  const { messageId, status } = useFormFieldContext()\n  return (\n    <StyledMessage\n      id={messageId}\n      aria-live='polite'\n      {...props}\n      status={status}\n      ref={forwardRef}\n    />\n  )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n  fontSize: '$175',\n  lineHeight: 1.5,\n  margin: 0,\n  marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n  typeof StyledDescription\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from '../hooks/use-form-field-context'\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n  ElementRef<typeof StyledDescription>,\n  DescriptionProps\n>((props, forwardRef) => {\n  const { descriptionId } = useFormFieldContext()\n  return <StyledDescription id={descriptionId} {...props} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n  Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Label: typeof Label\n  Field: typeof Field\n  Helper: typeof Helper\n  Message: typeof Message\n  Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":["styled","Primitive","React","jsxs","jsx","createContext","useRef","useState","useId","useContext","booleanify","isInputComponent","booleanishAttrValue"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/partials/label.tsx","../src/partials/description.styled.tsx","../src/partials/helper.styled.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n  all: 'unset',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n  fontSize: '$200',\n  lineHeight: 1.5,\n  marginBottom: '$100',\n  display: 'block',\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n  color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","import React, { useMemo, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\n\nexport interface LabelProps extends StyledLabelProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n  /**\n   * Whether the label should float above the input\n   */\n  floating?: boolean\n}\n\nexport const Label = React.forwardRef<\n  ElementRef<typeof StyledLabel>,\n  LabelProps\n>(({ floating = true, children, ...restProps }, forwardRef) => {\n  const {\n    setLabel,\n    setIsFloatingLabel,\n    formElementId,\n    required = false,\n  } = useFormFieldContext()\n\n  const label = useMemo(\n    () => (\n      <>\n        {children}\n        {required && <StyledAsterisk>*</StyledAsterisk>}\n      </>\n    ),\n    [children, required]\n  )\n\n  useEffect(() => {\n    setLabel(label)\n  }, [setLabel, label])\n\n  useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating])\n\n  // floating labels are managed in the form elements\n  if (floating) {\n    return null\n  }\n\n  return (\n    <StyledLabel htmlFor={formElementId} {...restProps} ref={forwardRef}>\n      {label}\n    </StyledLabel>\n  )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n  fontSize: '$175',\n  lineHeight: 1.5,\n  margin: 0,\n  marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n  typeof StyledDescription\n>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.div, {\n  fontSize: '$150',\n  lineHeight: 1.5,\n  marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledLabel } from './label.styled'\nimport { StyledDescription } from './description.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport const StyledField = styled(Primitive.div, {\n  marginBottom: '$300',\n  position: 'relative',\n  '&[data-disabled]': {\n    [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n      color: '$text-neutrals-disabled',\n    },\n  },\n  '&[data-readonly]': {\n    [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n      color: '$text-neutrals-subtle',\n    },\n  },\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React, { useRef } from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanAttrValue } from '@mirohq/design-system-utils'\nimport {\n  useFormFieldContext,\n  FormFieldProvider,\n  FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldProviderProps } from '@mirohq/design-system-base-form'\n\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n  ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {\n    const {\n      id,\n      status: formFieldStatus,\n      setStatus,\n      required,\n      focused,\n      setFocused,\n      disabled,\n      ariaDisabled,\n      readOnly,\n      formElementRef,\n    } = useFormFieldContext()\n\n    const status = statusProps ?? formFieldStatus\n    const initialValueRef = useRef<string>()\n\n    if (\n      formElementRef.current?.value !== undefined &&\n      initialValueRef.current === undefined\n    ) {\n      initialValueRef.current = formElementRef.current.value\n    }\n\n    return (\n      <StyledField\n        data-status={status}\n        data-required={booleanAttrValue(required)}\n        data-focused={booleanAttrValue(focused)}\n        data-disabled={booleanAttrValue(\n          disabled === true || ariaDisabled === true\n        )}\n        data-readonly={booleanAttrValue(readOnly)}\n        onFocus={e => {\n          setFocused(true)\n          onFocus?.(e)\n        }}\n        onBlur={e => {\n          if (statusProps === undefined) {\n            setStatus(\n              initialValueRef.current !== (e.target as HTMLInputElement).value\n                ? FORM_FIELD_STATUS.dirty\n                : FORM_FIELD_STATUS.touched\n            )\n          }\n\n          setFocused(false)\n          onBlur?.(e)\n        }}\n        {...restProps}\n        id={id}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n\nexport const Field = React.forwardRef<\n  ElementRef<typeof StyledField>,\n  FieldProps\n>(({ id, status, ...restProps }, forwardRef) => (\n  <FormFieldProvider status={status} id={id}>\n    {/* explicit use status as props because the provider will add a default */}\n    <Root status={status} {...restProps} ref={forwardRef} />\n  </FormFieldProvider>\n))\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n  ElementRef<typeof StyledHelper>,\n  HelperProps\n>((props, forwardRef) => {\n  const { helperId, setHelperId } = useFormFieldContext()\n\n  const id = props.id ?? helperId\n  useEffect(() => setHelperId(id), [setHelperId, id])\n\n  return <StyledHelper {...props} id={id} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledMessage = styled(Primitive.div, {\n  fontSize: '$150',\n  lineHeight: 1.5,\n  marginTop: '$50',\n  variants: {\n    status: {\n      valid: {\n        color: '$text-success',\n      },\n      invalid: {\n        color: '$text-danger',\n      },\n      dirty: {},\n      pristine: {},\n      touched: {},\n    },\n  },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n  useFormFieldContext,\n  FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldStatus } from '@mirohq/design-system-base-form'\n\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n  status?: FormFieldStatus\n  chidren?: React.ReactNode\n}\n\nexport const Message = React.forwardRef<\n  ElementRef<typeof StyledMessage>,\n  MessageProps\n>((props, forwardRef) => {\n  const { messageId, setMessageId, status } = useFormFieldContext()\n\n  const id = props.id ?? messageId\n  useEffect(() => setMessageId(id), [setMessageId, id])\n\n  if (\n    status !== FORM_FIELD_STATUS.invalid &&\n    status !== FORM_FIELD_STATUS.valid\n  ) {\n    return null\n  }\n\n  return (\n    <StyledMessage\n      role='alert'\n      {...props}\n      id={id}\n      status={status}\n      ref={forwardRef}\n    />\n  )\n})\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n  ElementRef<typeof StyledDescription>,\n  DescriptionProps\n>((props, forwardRef) => {\n  const { descriptionId, setDescriptionId } = useFormFieldContext()\n\n  const id = props.id ?? descriptionId\n  useEffect(() => setDescriptionId(id), [setDescriptionId, id])\n\n  return <StyledDescription {...props} id={id} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n  Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Label: typeof Label\n  Field: typeof Field\n  Helper: typeof Helper\n  Message: typeof Message\n  Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":["styled","Primitive","React","useFormFieldContext","useMemo","jsxs","Fragment","jsx","useEffect","useRef","booleanAttrValue","FORM_FIELD_STATUS","FormFieldProvider"],"mappings":"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"}

package/dist/module.js

@@ -1,177 +1,140 @@
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled } from '@mirohq/design-system-stitches';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { createContext, useRef, useState, useContext } from 'react';
-import { booleanify, booleanishAttrValue } from '@mirohq/design-system-utils';
-import { isInputComponent } from '@mirohq/design-system-base-input';
-import { useId } from '@mirohq/design-system-use-id';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { useFormFieldContext, FORM_FIELD_STATUS, FormFieldProvider } from '@mirohq/design-system-base-form';
+import { booleanAttrValue } from '@mirohq/design-system-utils';
 
 const StyledForm = styled(Primitive.form, {
   all: "unset"
 });
 
 const StyledLabel = styled(Primitive.label, {
-  display: "block",
-  variants: {
-    floating: {
-      true: {
-        position: "absolute",
-        zIndex: 1,
-        top: 0,
-        left: "$150",
-        pointerEvents: "none"
-      },
-      false: {
-        fontSize: "$200",
-        lineHeight: 1.5,
-        marginBottom: "$100"
-      }
-    }
-  }
+  fontSize: "$200",
+  lineHeight: 1.5,
+  marginBottom: "$100",
+  display: "block"
 });
 const StyledAsterisk = styled(Primitive.span, {
   color: "$text-danger"
 });
 
-const labelSymbol = Symbol.for("label");
-const isLabelComponent = (labelComponent) => {
-  var _a, _b;
-  return Boolean(
-    (_b = labelComponent[labelSymbol]) != null ? _b : (
-      // @ts-expect-error
-      (_a = labelComponent == null ? void 0 : labelComponent.type) == null ? void 0 : _a[labelSymbol]
-    )
+const Label = React.forwardRef(({ floating = true, children, ...restProps }, forwardRef) => {
+  const {
+    setLabel,
+    setIsFloatingLabel,
+    formElementId,
+    required = false
+  } = useFormFieldContext();
+  const label = useMemo(
+    () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      required && /* @__PURE__ */ jsx(StyledAsterisk, { children: "*" })
+    ] }),
+    [children, required]
   );
-};
+  useEffect(() => {
+    setLabel(label);
+  }, [setLabel, label]);
+  useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating]);
+  if (floating) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledLabel, { htmlFor: formElementId, ...restProps, ref: forwardRef, children: label });
+});
 
-const Label = React.forwardRef(
-  ({ floating = false, required = false, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledLabel, { ...restProps, ref: forwardRef, floating, children: [
-    children,
-    required && /* @__PURE__ */ jsx(StyledAsterisk, { children: "*" })
-  ] })
-);
-Label[labelSymbol] = true;
+const StyledDescription = styled(Primitive.p, {
+  fontSize: "$175",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "$150"
+});
 
-const FormFieldContext = createContext({});
-const FormFieldProvider = ({
-  children,
-  status: customStatus,
-  id: customId,
-  ...restProps
-}) => {
-  const formElementRef = useRef(null);
-  const [status, setStatus] = useState(customStatus != null ? customStatus : "pristine");
-  const [focused, setFocused] = useState(false);
-  const autoId = useId();
-  const id = customId != null ? customId : autoId;
-  return /* @__PURE__ */ jsx(
-    FormFieldContext.Provider,
-    {
-      value: {
-        ...restProps,
-        id,
-        formElementRef,
-        messageId: "".concat(id, "-message"),
-        helperId: "".concat(id, "-helper"),
-        descriptionId: "".concat(id, "-description"),
-        status,
-        setStatus,
-        focused,
-        setFocused
-      },
-      children
-    }
-  );
-};
-const useFormFieldContext = () => useContext(FormFieldContext);
+const StyledHelper = styled(Primitive.div, {
+  fontSize: "$150",
+  lineHeight: 1.5,
+  marginTop: "$50"
+});
 
 const StyledField = styled(Primitive.div, {
-  marginBottom: "$300"
+  marginBottom: "$300",
+  position: "relative",
+  "&[data-disabled]": {
+    ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
+      color: "$text-neutrals-disabled"
+    }
+  },
+  "&[data-readonly]": {
+    ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
+      color: "$text-neutrals-subtle"
+    }
+  }
 });
 
 const Root = React.forwardRef(
-  ({ children, ...restProps }, forwardRef) => {
+  ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {
+    var _a;
     const {
       id,
-      status,
+      status: formFieldStatus,
+      setStatus,
       required,
       focused,
       setFocused,
       disabled,
       ariaDisabled,
-      readOnly
+      readOnly,
+      formElementRef
     } = useFormFieldContext();
-    const label = React.Children.toArray(children).find(
-      isLabelComponent
-    );
-    const floating = booleanify(label == null ? void 0 : label.props.floating);
-    const formattedChildren = floating ? React.Children.map(React.Children.toArray(children), (child) => {
-      if (isLabelComponent(child)) {
-        return null;
-      }
-      if (isInputComponent(child)) {
-        const input = child;
-        return React.cloneElement(input, {
-          ...input.props,
-          label
-        });
-      }
-      return child;
-    }) : children;
+    const status = statusProps != null ? statusProps : formFieldStatus;
+    const initialValueRef = useRef();
+    if (((_a = formElementRef.current) == null ? void 0 : _a.value) !== void 0 && initialValueRef.current === void 0) {
+      initialValueRef.current = formElementRef.current.value;
+    }
     return /* @__PURE__ */ jsx(
       StyledField,
       {
-        id,
-        "aria-disabled": ariaDisabled,
-        "aria-required": required,
-        "aria-invalid": status === "invalid",
         "data-status": status,
-        "data-required": booleanishAttrValue(required),
-        "data-focused": booleanishAttrValue(focused),
-        "data-disabled": booleanishAttrValue(disabled),
-        "data-readonly": booleanishAttrValue(readOnly),
-        onFocus: () => setFocused == null ? void 0 : setFocused(true),
+        "data-required": booleanAttrValue(required),
+        "data-focused": booleanAttrValue(focused),
+        "data-disabled": booleanAttrValue(
+          disabled === true || ariaDisabled === true
+        ),
+        "data-readonly": booleanAttrValue(readOnly),
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus == null ? void 0 : onFocus(e);
+        },
+        onBlur: (e) => {
+          if (statusProps === void 0) {
+            setStatus(
+              initialValueRef.current !== e.target.value ? FORM_FIELD_STATUS.dirty : FORM_FIELD_STATUS.touched
+            );
+          }
+          setFocused(false);
+          onBlur == null ? void 0 : onBlur(e);
+        },
         ...restProps,
-        ref: forwardRef,
-        children: formattedChildren
+        id,
+        ref: forwardRef
       }
     );
   }
 );
-const Field = React.forwardRef(
-  ({
-    id,
-    required,
-    status,
-    readOnly,
-    disabled,
-    "aria-disabled": ariaDisabled,
-    ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsx(
-    FormFieldProvider,
-    {
-      required,
-      status,
-      readOnly,
-      disabled,
-      "aria-disabled": ariaDisabled,
-      children: /* @__PURE__ */ jsx(Root, { ...restProps, ref: forwardRef })
-    }
-  )
-);
-
-const StyledHelper = styled(Primitive.p, {
-  fontSize: "$150",
-  lineHeight: 1.5,
-  marginTop: "$50"
-});
+const Field = React.forwardRef(({ id, status, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(FormFieldProvider, { status, id, children: /* @__PURE__ */ jsx(Root, { status, ...restProps, ref: forwardRef }) }));
 
 const Helper = React.forwardRef((props, forwardRef) => {
-  const { helperId } = useFormFieldContext();
-  return /* @__PURE__ */ jsx(StyledHelper, { id: helperId, ...props, ref: forwardRef });
+  var _a;
+  const { helperId, setHelperId } = useFormFieldContext();
+  const id = (_a = props.id) != null ? _a : helperId;
+  useEffect(() => setHelperId(id), [setHelperId, id]);
+  return /* @__PURE__ */ jsx(StyledHelper, { ...props, id, ref: forwardRef });
 });
 
-const StyledMessage = styled(Helper, {
+const StyledMessage = styled(Primitive.div, {
+  fontSize: "$150",
+  lineHeight: 1.5,
+  marginTop: "$50",
   variants: {
     status: {
       valid: {
@@ -182,36 +145,37 @@ const StyledMessage = styled(Helper, {
       },
       dirty: {},
       pristine: {},
-      touched: {},
-      pending: {}
+      touched: {}
     }
   }
 });
 
 const Message = React.forwardRef((props, forwardRef) => {
-  const { messageId, status } = useFormFieldContext();
+  var _a;
+  const { messageId, setMessageId, status } = useFormFieldContext();
+  const id = (_a = props.id) != null ? _a : messageId;
+  useEffect(() => setMessageId(id), [setMessageId, id]);
+  if (status !== FORM_FIELD_STATUS.invalid && status !== FORM_FIELD_STATUS.valid) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     StyledMessage,
     {
-      id: messageId,
-      "aria-live": "polite",
+      role: "alert",
       ...props,
+      id,
       status,
       ref: forwardRef
     }
   );
 });
 
-const StyledDescription = styled(Primitive.p, {
-  fontSize: "$175",
-  lineHeight: 1.5,
-  margin: 0,
-  marginBottom: "$150"
-});
-
 const Description = React.forwardRef((props, forwardRef) => {
-  const { descriptionId } = useFormFieldContext();
-  return /* @__PURE__ */ jsx(StyledDescription, { id: descriptionId, ...props, ref: forwardRef });
+  var _a;
+  const { descriptionId, setDescriptionId } = useFormFieldContext();
+  const id = (_a = props.id) != null ? _a : descriptionId;
+  useEffect(() => setDescriptionId(id), [setDescriptionId, id]);
+  return /* @__PURE__ */ jsx(StyledDescription, { ...props, id, ref: forwardRef });
 });
 
 const Form = StyledForm;

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/util.ts","../src/partials/label.tsx","../src/hooks/use-form-field-context.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.styled.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.styled.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n  all: 'unset',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n  display: 'block',\n\n  variants: {\n    floating: {\n      true: {\n        position: 'absolute',\n        zIndex: 1,\n        top: 0,\n        left: '$150',\n        pointerEvents: 'none',\n      },\n      false: {\n        fontSize: '$200',\n        lineHeight: 1.5,\n        marginBottom: '$100',\n      },\n    },\n  },\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n  color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","export const labelSymbol: unique symbol = Symbol.for('label')\nexport type LabelReactElement = React.ReactElement & { [labelSymbol]?: boolean }\n\nexport const isLabelComponent = <T>(\n  labelComponent: T & { [labelSymbol]?: boolean }\n): boolean =>\n  Boolean(\n    labelComponent[labelSymbol] ??\n      // @ts-expect-error\n      labelComponent?.type?.[labelSymbol]\n  )\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\nimport { labelSymbol } from '../util'\n\nexport interface LabelProps extends Omit<StyledLabelProps, 'placeholder'> {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n\n  floating?: boolean\n\n  required?: boolean\n}\n\nexport const Label = React.forwardRef<\n  ElementRef<typeof StyledLabel>,\n  LabelProps\n>(\n  (\n    { floating = false, required = false, children, ...restProps },\n    forwardRef\n  ) => (\n    <StyledLabel {...restProps} ref={forwardRef} floating={floating}>\n      {children}\n      {required && <StyledAsterisk>*</StyledAsterisk>}\n    </StyledLabel>\n  )\n) as ForwardRefExoticComponent<LabelProps> & {\n  [labelSymbol]?: boolean\n}\n\nLabel[labelSymbol] = true\n","import React, { createContext, useContext, useState, useRef } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\n\nexport type Status =\n  | 'valid'\n  | 'invalid'\n  | 'dirty'\n  | 'pristine'\n  | 'touched'\n  | 'pending'\n\ninterface FormFieldProps {\n  required?: boolean\n  readOnly?: boolean\n  disabled?: boolean\n  ariaDisabled?: Booleanish\n  status?: Status\n  id: string\n}\n\ninterface FormFieldContextProps extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<Status>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  messageId: string\n  descriptionId: string\n  formElementRef: React.RefObject<HTMLInputElement>\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [status, setStatus] = useState<Status>(customStatus ?? 'pristine')\n  const [focused, setFocused] = useState(false)\n\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        messageId: `${id}-message`,\n        helperId: `${id}-helper`,\n        descriptionId: `${id}-description`,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = (): FormFieldContextProps =>\n  useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledField = styled(Primitive.div, {\n  marginBottom: '$300',\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanify, booleanishAttrValue } from '@mirohq/design-system-utils'\nimport type { InputReactElement } from '@mirohq/design-system-base-input'\nimport { isInputComponent } from '@mirohq/design-system-base-input'\n\nimport {\n  useFormFieldContext,\n  FormFieldProvider,\n} from '../hooks/use-form-field-context'\nimport type { FormFieldProviderProps } from '../hooks/use-form-field-context'\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\nimport type { LabelReactElement } from '../util'\nimport { isLabelComponent } from '../util'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n  ({ children, ...restProps }, forwardRef) => {\n    const {\n      id,\n      status,\n      required,\n      focused,\n      setFocused,\n      disabled,\n      ariaDisabled,\n      readOnly,\n    } = useFormFieldContext()\n\n    const label = React.Children.toArray(children).find(\n      isLabelComponent\n    ) as LabelReactElement\n\n    const floating = booleanify(label?.props.floating)\n\n    const formattedChildren = floating\n      ? React.Children.map(React.Children.toArray(children), child => {\n          if (isLabelComponent(child)) {\n            return null\n          }\n\n          // includes input, select and textarea\n          if (isInputComponent(child)) {\n            const input = child as InputReactElement\n            return React.cloneElement(input, {\n              ...input.props,\n              label: label,\n            })\n          }\n\n          return child\n        })\n      : children\n\n    return (\n      <StyledField\n        id={id}\n        aria-disabled={ariaDisabled}\n        aria-required={required}\n        aria-invalid={status === 'invalid'}\n        data-status={status}\n        data-required={booleanishAttrValue(required)}\n        data-focused={booleanishAttrValue(focused)}\n        data-disabled={booleanishAttrValue(disabled)}\n        data-readonly={booleanishAttrValue(readOnly)}\n        onFocus={() => setFocused?.(true)}\n        {...restProps}\n        ref={forwardRef}\n      >\n        {formattedChildren}\n      </StyledField>\n    )\n  }\n)\n\nexport const Field = React.forwardRef<\n  ElementRef<typeof StyledField>,\n  FieldProps\n>(\n  (\n    {\n      id,\n      required,\n      status,\n      readOnly,\n      disabled,\n      'aria-disabled': ariaDisabled,\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <FormFieldProvider\n      required={required}\n      status={status}\n      readOnly={readOnly}\n      disabled={disabled}\n      aria-disabled={ariaDisabled}\n    >\n      <Root {...restProps} ref={forwardRef} />\n    </FormFieldProvider>\n  )\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.p, {\n  fontSize: '$150',\n  lineHeight: 1.5,\n  marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from '../hooks/use-form-field-context'\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n  ElementRef<typeof StyledHelper>,\n  HelperProps\n>((props, forwardRef) => {\n  const { helperId } = useFormFieldContext()\n  return <StyledHelper id={helperId} {...props} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { Helper } from './helper'\n\nexport const StyledMessage = styled(Helper, {\n  variants: {\n    status: {\n      valid: {\n        color: '$text-success',\n      },\n      invalid: {\n        color: '$text-danger',\n      },\n      dirty: {},\n      pristine: {},\n      touched: {},\n      pending: {},\n    },\n  },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from '../hooks/use-form-field-context'\nimport type { Status } from '../hooks/use-form-field-context'\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n  status?: Status\n}\n\nexport const Message = React.forwardRef<\n  ElementRef<typeof StyledMessage>,\n  MessageProps\n>((props, forwardRef) => {\n  const { messageId, status } = useFormFieldContext()\n  return (\n    <StyledMessage\n      id={messageId}\n      aria-live='polite'\n      {...props}\n      status={status}\n      ref={forwardRef}\n    />\n  )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n  fontSize: '$175',\n  lineHeight: 1.5,\n  margin: 0,\n  marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n  typeof StyledDescription\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from '../hooks/use-form-field-context'\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n  ElementRef<typeof StyledDescription>,\n  DescriptionProps\n>((props, forwardRef) => {\n  const { descriptionId } = useFormFieldContext()\n  return <StyledDescription id={descriptionId} {...props} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n  Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Label: typeof Label\n  Field: typeof Field\n  Helper: typeof Helper\n  Message: typeof Message\n  Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/partials/label.tsx","../src/partials/description.styled.tsx","../src/partials/helper.styled.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n  all: 'unset',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n  fontSize: '$200',\n  lineHeight: 1.5,\n  marginBottom: '$100',\n  display: 'block',\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n  color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","import React, { useMemo, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\n\nexport interface LabelProps extends StyledLabelProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n  /**\n   * Whether the label should float above the input\n   */\n  floating?: boolean\n}\n\nexport const Label = React.forwardRef<\n  ElementRef<typeof StyledLabel>,\n  LabelProps\n>(({ floating = true, children, ...restProps }, forwardRef) => {\n  const {\n    setLabel,\n    setIsFloatingLabel,\n    formElementId,\n    required = false,\n  } = useFormFieldContext()\n\n  const label = useMemo(\n    () => (\n      <>\n        {children}\n        {required && <StyledAsterisk>*</StyledAsterisk>}\n      </>\n    ),\n    [children, required]\n  )\n\n  useEffect(() => {\n    setLabel(label)\n  }, [setLabel, label])\n\n  useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating])\n\n  // floating labels are managed in the form elements\n  if (floating) {\n    return null\n  }\n\n  return (\n    <StyledLabel htmlFor={formElementId} {...restProps} ref={forwardRef}>\n      {label}\n    </StyledLabel>\n  )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n  fontSize: '$175',\n  lineHeight: 1.5,\n  margin: 0,\n  marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n  typeof StyledDescription\n>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.div, {\n  fontSize: '$150',\n  lineHeight: 1.5,\n  marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledLabel } from './label.styled'\nimport { StyledDescription } from './description.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport const StyledField = styled(Primitive.div, {\n  marginBottom: '$300',\n  position: 'relative',\n  '&[data-disabled]': {\n    [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n      color: '$text-neutrals-disabled',\n    },\n  },\n  '&[data-readonly]': {\n    [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n      color: '$text-neutrals-subtle',\n    },\n  },\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React, { useRef } from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanAttrValue } from '@mirohq/design-system-utils'\nimport {\n  useFormFieldContext,\n  FormFieldProvider,\n  FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldProviderProps } from '@mirohq/design-system-base-form'\n\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n  ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {\n    const {\n      id,\n      status: formFieldStatus,\n      setStatus,\n      required,\n      focused,\n      setFocused,\n      disabled,\n      ariaDisabled,\n      readOnly,\n      formElementRef,\n    } = useFormFieldContext()\n\n    const status = statusProps ?? formFieldStatus\n    const initialValueRef = useRef<string>()\n\n    if (\n      formElementRef.current?.value !== undefined &&\n      initialValueRef.current === undefined\n    ) {\n      initialValueRef.current = formElementRef.current.value\n    }\n\n    return (\n      <StyledField\n        data-status={status}\n        data-required={booleanAttrValue(required)}\n        data-focused={booleanAttrValue(focused)}\n        data-disabled={booleanAttrValue(\n          disabled === true || ariaDisabled === true\n        )}\n        data-readonly={booleanAttrValue(readOnly)}\n        onFocus={e => {\n          setFocused(true)\n          onFocus?.(e)\n        }}\n        onBlur={e => {\n          if (statusProps === undefined) {\n            setStatus(\n              initialValueRef.current !== (e.target as HTMLInputElement).value\n                ? FORM_FIELD_STATUS.dirty\n                : FORM_FIELD_STATUS.touched\n            )\n          }\n\n          setFocused(false)\n          onBlur?.(e)\n        }}\n        {...restProps}\n        id={id}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n\nexport const Field = React.forwardRef<\n  ElementRef<typeof StyledField>,\n  FieldProps\n>(({ id, status, ...restProps }, forwardRef) => (\n  <FormFieldProvider status={status} id={id}>\n    {/* explicit use status as props because the provider will add a default */}\n    <Root status={status} {...restProps} ref={forwardRef} />\n  </FormFieldProvider>\n))\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n  ElementRef<typeof StyledHelper>,\n  HelperProps\n>((props, forwardRef) => {\n  const { helperId, setHelperId } = useFormFieldContext()\n\n  const id = props.id ?? helperId\n  useEffect(() => setHelperId(id), [setHelperId, id])\n\n  return <StyledHelper {...props} id={id} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledMessage = styled(Primitive.div, {\n  fontSize: '$150',\n  lineHeight: 1.5,\n  marginTop: '$50',\n  variants: {\n    status: {\n      valid: {\n        color: '$text-success',\n      },\n      invalid: {\n        color: '$text-danger',\n      },\n      dirty: {},\n      pristine: {},\n      touched: {},\n    },\n  },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n  useFormFieldContext,\n  FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldStatus } from '@mirohq/design-system-base-form'\n\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n  status?: FormFieldStatus\n  chidren?: React.ReactNode\n}\n\nexport const Message = React.forwardRef<\n  ElementRef<typeof StyledMessage>,\n  MessageProps\n>((props, forwardRef) => {\n  const { messageId, setMessageId, status } = useFormFieldContext()\n\n  const id = props.id ?? messageId\n  useEffect(() => setMessageId(id), [setMessageId, id])\n\n  if (\n    status !== FORM_FIELD_STATUS.invalid &&\n    status !== FORM_FIELD_STATUS.valid\n  ) {\n    return null\n  }\n\n  return (\n    <StyledMessage\n      role='alert'\n      {...props}\n      id={id}\n      status={status}\n      ref={forwardRef}\n    />\n  )\n})\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n  ElementRef<typeof StyledDescription>,\n  DescriptionProps\n>((props, forwardRef) => {\n  const { descriptionId, setDescriptionId } = useFormFieldContext()\n\n  const id = props.id ?? descriptionId\n  useEffect(() => setDescriptionId(id), [setDescriptionId, id])\n\n  return <StyledDescription {...props} id={id} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n  Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Label: typeof Label\n  Field: typeof Field\n  Helper: typeof Helper\n  Message: typeof Message\n  Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -4,7 +4,7 @@ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches'
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
-import { Booleanish } from '@mirohq/design-system-types';
+import { FormFieldProviderProps, FormFieldStatus } from '@mirohq/design-system-base-form';
 
 declare const StyledForm: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"form">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
@@ -985,37 +985,20 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, "floating"> & _stitches_react_types_styled_component.TransformProps<{
-    floating?: boolean | "true" | "false" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLLabelElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>, {
-    floating?: boolean | "true" | "false" | undefined;
-}, {}>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLLabelElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>, {}, {}>;
 declare type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>;
 
-declare const labelSymbol: unique symbol;
-
-interface LabelProps extends Omit<StyledLabelProps, 'placeholder'> {
+interface LabelProps extends StyledLabelProps {
     /**
      * The content
      */
     children: react__default.ReactNode;
+    /**
+     * Whether the label should float above the input
+     */
     floating?: boolean;
-    required?: boolean;
 }
-declare const Label: react__default.ForwardRefExoticComponent<LabelProps> & {
-    [labelSymbol]?: boolean | undefined;
-};
-
-declare type Status = 'valid' | 'invalid' | 'dirty' | 'pristine' | 'touched' | 'pending';
-interface FormFieldProps {
-    required?: boolean;
-    readOnly?: boolean;
-    disabled?: boolean;
-    ariaDisabled?: Booleanish;
-    status?: Status;
-    id: string;
-}
-declare type FormFieldProviderProps = Partial<FormFieldProps>;
+declare const Label: react__default.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & react__default.RefAttributes<HTMLLabelElement>>;
 
 declare const StyledField: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
@@ -1512,7 +1495,7 @@ interface FieldProps extends StyledFieldProps, FormFieldProviderProps {
 }
 declare const Field: react__default.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledHelper: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"p">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledHelper: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -2000,7 +1983,7 @@ declare const StyledHelper: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_de
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLParagraphElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"p">>, {}, {}>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
 declare type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>;
 
 interface HelperProps extends StyledHelperProps {
@@ -2009,9 +1992,9 @@ interface HelperProps extends StyledHelperProps {
      */
     children: react__default.ReactNode;
 }
-declare const Helper: react__default.ForwardRefExoticComponent<Omit<HelperProps, "ref"> & react__default.RefAttributes<HTMLParagraphElement>>;
+declare const Helper: react__default.ForwardRefExoticComponent<Omit<HelperProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledMessage: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Omit<HelperProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledMessage: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -2500,16 +2483,17 @@ declare const StyledMessage: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
 }>>>, "status"> & _stitches_react_types_styled_component.TransformProps<{
-    status?: "valid" | "invalid" | "dirty" | "pristine" | "touched" | "pending" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLParagraphElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Omit<HelperProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>, {
-    status?: "valid" | "invalid" | "dirty" | "pristine" | "touched" | "pending" | undefined;
+    status?: "valid" | "invalid" | "dirty" | "pristine" | "touched" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
+    status?: "valid" | "invalid" | "dirty" | "pristine" | "touched" | undefined;
 }, {}>;
 declare type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>;
 
 interface MessageProps extends Omit<StyledMessageProps, 'status'> {
-    status?: Status;
+    status?: FormFieldStatus;
+    chidren?: react__default.ReactNode;
 }
-declare const Message: react__default.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & react__default.RefAttributes<HTMLParagraphElement>>;
+declare const Message: react__default.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
 declare const StyledDescription: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"p">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-form",
-  "version": "0.1.0-forms.3",
+  "version": "0.1.0-forms.5",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,11 +26,11 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
-    "@mirohq/design-system-base-input": "^0.1.0-forms.1",
+    "@mirohq/design-system-base-form": "^0.1.0-forms.1",
     "@mirohq/design-system-primitive": "^1.1.2-forms.0",
     "@mirohq/design-system-use-id": "^0.1.1-forms.0",
-    "@mirohq/design-system-utils": "^0.15.0-forms.0",
-    "@mirohq/design-system-stitches": "^2.6.0"
+    "@mirohq/design-system-stitches": "^2.6.0",
+    "@mirohq/design-system-utils": "^0.15.0-forms.1"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",