@mirohq/design-system-base-form 0.2.15 → 0.2.17

package/dist/main.js

@@ -8,7 +8,7 @@ var designSystemUseId = require('@mirohq/design-system-use-id');
 var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
-var designSystemBaseInput = require('@mirohq/design-system-base-input');
+var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -122,6 +122,7 @@ const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Pr
   fontStyle: "normal",
   lineHeight: 1.5,
   height: "0.75em",
+  ...designSystemBaseTextField.styles.base.placeholder,
   variants: {
     floating: {
       true: {
@@ -129,17 +130,15 @@ const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Pr
         transform: "translateY(-50%)",
         left: "$150",
         fontSize: "$150",
-        color: "$text-neutrals-subtle",
         padding: "0 2px",
-        backgroundColor: "$background-neutrals-container",
         height: "auto",
-        lineHeight: 1
+        lineHeight: 1,
+        backgroundColor: "$background-neutrals-container"
       },
       false: {
         fontSize: "$200",
-        marginTop: "-1px",
+        marginTop: "-1px"
         // adjust for the input's border
-        ...designSystemBaseInput.styles.base.placeholder
       }
     },
     visuallyHidden: {

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  variants: {\n    floating: {\n      true: {\n        top: '0',\n        transform: 'translateY(-50%)',\n        left: '$150',\n        fontSize: '$150',\n        color: '$text-neutrals-subtle',\n        padding: '0 2px',\n        backgroundColor: '$background-neutrals-container',\n        height: 'auto',\n        lineHeight: 1,\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n        ...baseInputStyles.base.placeholder,\n      },\n    },\n    visuallyHidden: {\n      true: {\n        // todo MDS-1003: replace with shared styles\n        border: '0',\n        clip: 'rect(0 0 0 0)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px',\n      },\n    },\n    size: {\n      medium: {},\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'medium',\n      floating: false,\n      css: {\n        top: '$50',\n        left: '$100',\n      },\n    },\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps\n  extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, isHiddenLabel, formElementId } =\n    useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      visuallyHidden={isHiddenLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["createContext","useState","useId","useRef","useEffect","ariaDescribedBy","stringAttrValue","jsx","useContext","styled","Primitive","baseInputStyles","React"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  ...textFieldStyles.base.placeholder,\n\n  variants: {\n    floating: {\n      true: {\n        top: '0',\n        transform: 'translateY(-50%)',\n        left: '$150',\n        fontSize: '$150',\n        padding: '0 2px',\n        height: 'auto',\n        lineHeight: 1,\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n      },\n    },\n    visuallyHidden: {\n      true: {\n        // todo MDS-1003: replace with shared styles\n        border: '0',\n        clip: 'rect(0 0 0 0)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px',\n      },\n    },\n    size: {\n      medium: {},\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'medium',\n      floating: false,\n      css: {\n        top: '$50',\n        left: '$100',\n      },\n    },\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps\n  extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, isHiddenLabel, formElementId } =\n    useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      visuallyHidden={isHiddenLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["createContext","useState","useId","useRef","useEffect","ariaDescribedBy","stringAttrValue","jsx","useContext","styled","Primitive","textFieldStyles","React"],"mappings":"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"}

package/dist/module.js

@@ -4,7 +4,7 @@ import { useId } from '@mirohq/design-system-use-id';
 import { stringAttrValue } from '@mirohq/design-system-utils';
 import { styled } from '@mirohq/design-system-stitches';
 import { Primitive } from '@mirohq/design-system-primitive';
-import { styles } from '@mirohq/design-system-base-input';
+import { styles } from '@mirohq/design-system-base-text-field';
 
 const FORM_FIELD_STATUS = Object.freeze({
   // the field value is valid
@@ -114,6 +114,7 @@ const StyledFloatingLabel = styled(Primitive.label, {
   fontStyle: "normal",
   lineHeight: 1.5,
   height: "0.75em",
+  ...styles.base.placeholder,
   variants: {
     floating: {
       true: {
@@ -121,17 +122,15 @@ const StyledFloatingLabel = styled(Primitive.label, {
         transform: "translateY(-50%)",
         left: "$150",
         fontSize: "$150",
-        color: "$text-neutrals-subtle",
         padding: "0 2px",
-        backgroundColor: "$background-neutrals-container",
         height: "auto",
-        lineHeight: 1
+        lineHeight: 1,
+        backgroundColor: "$background-neutrals-container"
       },
       false: {
         fontSize: "$200",
-        marginTop: "-1px",
+        marginTop: "-1px"
         // adjust for the input's border
-        ...styles.base.placeholder
       }
     },
     visuallyHidden: {

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  variants: {\n    floating: {\n      true: {\n        top: '0',\n        transform: 'translateY(-50%)',\n        left: '$150',\n        fontSize: '$150',\n        color: '$text-neutrals-subtle',\n        padding: '0 2px',\n        backgroundColor: '$background-neutrals-container',\n        height: 'auto',\n        lineHeight: 1,\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n        ...baseInputStyles.base.placeholder,\n      },\n    },\n    visuallyHidden: {\n      true: {\n        // todo MDS-1003: replace with shared styles\n        border: '0',\n        clip: 'rect(0 0 0 0)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px',\n      },\n    },\n    size: {\n      medium: {},\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'medium',\n      floating: false,\n      css: {\n        top: '$50',\n        left: '$100',\n      },\n    },\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps\n  extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, isHiddenLabel, formElementId } =\n    useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      visuallyHidden={isHiddenLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["ariaDescribedBy","baseInputStyles"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  ...textFieldStyles.base.placeholder,\n\n  variants: {\n    floating: {\n      true: {\n        top: '0',\n        transform: 'translateY(-50%)',\n        left: '$150',\n        fontSize: '$150',\n        padding: '0 2px',\n        height: 'auto',\n        lineHeight: 1,\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n      },\n    },\n    visuallyHidden: {\n      true: {\n        // todo MDS-1003: replace with shared styles\n        border: '0',\n        clip: 'rect(0 0 0 0)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px',\n      },\n    },\n    size: {\n      medium: {},\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'medium',\n      floating: false,\n      css: {\n        top: '$50',\n        left: '$100',\n      },\n    },\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps\n  extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, isHiddenLabel, formElementId } =\n    useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      visuallyHidden={isHiddenLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["ariaDescribedBy","textFieldStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-base-form",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,12 +26,12 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
-    "@mirohq/design-system-base-input": "^0.0.4",
+    "@mirohq/design-system-base-text-field": "^0.1.0",
+    "@mirohq/design-system-stitches": "^2.6.12",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-stitches": "^2.6.11",
     "@mirohq/design-system-types": "^0.10.0",
-    "@mirohq/design-system-utils": "^0.15.4",
-    "@mirohq/design-system-use-id": "^0.1.2"
+    "@mirohq/design-system-use-id": "^0.1.2",
+    "@mirohq/design-system-utils": "^0.15.4"
   },
   "scripts": {
     "build": "rollup -c ../../../../rollup.config.js",