@mirohq/design-system-base-form 1.1.3-aria-label-icon-button.2 → 1.2.0-fix-stitches-types.0

package/dist/main.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystemUseId = require('@mirohq/design-system-use-id');
@@ -10,10 +8,6 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const FORM_FIELD_STATUS = Object.freeze({
   // the field value is valid
   valid: "valid",
@@ -192,7 +186,7 @@ const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Pr
   }
 });
 
-const FloatingLabel = React__default["default"].forwardRef((props, forwardRef) => {
+const FloatingLabel = React.forwardRef((props, forwardRef) => {
   const { isFloatingLabel, isHiddenLabel, formElementId } = useFormFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledFloatingLabel,

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 { 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 interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: 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 { 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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"}
+{"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 { 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 interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: 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 { 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"],"mappings":"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"}

package/dist/module.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { createContext, useState, useRef, useEffect, useContext } from 'react';
+import React, { createContext, useContext, useState, useRef, useEffect } from 'react';
 import { useId } from '@mirohq/design-system-use-id';
 import { stringAttrValue } from '@mirohq/design-system-utils';
 import { styled } from '@mirohq/design-system-stitches';

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 { 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 interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: 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 { 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"],"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 { 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 interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: 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 { 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"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,16 +1,35 @@
 import * as React from 'react';
 import React__default, { ComponentPropsWithRef, AriaAttributes } from 'react';
-import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 import { Booleanish } from '@mirohq/design-system-types';
 
-declare const StyledFloatingLabel: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>>, "size" | "floating" | "visuallyHidden"> & _stitches_react_types_styled_component.TransformProps<{
-    floating?: boolean | "false" | "true" | undefined;
+/* Utilities */
+/* ========================================================================== */
+
+/** Returns a string with the given prefix followed by the given values. */
+type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
+
+type TransformProps<Props, Media> = {
+	[K in keyof Props]: (
+		| Props[K]
+		| (
+			& {
+				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
+			}
+			& {
+				[KMedia in string]: Props[K]
+			}
+		)
+	)
+}
+
+declare const StyledFloatingLabel: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>>, "size" | "floating" | "visuallyHidden"> & TransformProps<{
+    floating?: boolean | "true" | "false" | undefined;
     visuallyHidden?: boolean | "true" | undefined;
     size?: "medium" | "large" | "x-large" | 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 | "false" | "true" | undefined;
+    floating?: boolean | "true" | "false" | undefined;
     visuallyHidden?: boolean | "true" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
 }, {}>;
@@ -99,4 +118,5 @@ interface FormElementProps {
     required?: boolean;
 }
 
-export { FORM_FIELD_STATUS, FloatingLabel, FloatingLabelProps, FormElementProps, FormFieldProvider, FormFieldProviderProps, FormFieldStatus, useFormFieldContext };
+export { FORM_FIELD_STATUS, FloatingLabel, FormFieldProvider, useFormFieldContext };
+export type { FloatingLabelProps, FormElementProps, FormFieldProviderProps, FormFieldStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-base-form",
-  "version": "1.1.3-aria-label-icon-button.2",
+  "version": "1.2.0-fix-stitches-types.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,12 +26,12 @@
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@mirohq/design-system-base-text-field": "^1.2.1-aria-label-icon-button.2",
-    "@mirohq/design-system-primitive": "^2.1.0",
-    "@mirohq/design-system-stitches": "^3.1.2-aria-label-icon-button.2",
-    "@mirohq/design-system-types": "^1.0.1-aria-label-icon-button.2",
+    "@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.0",
+    "@mirohq/design-system-base-text-field": "^1.3.0-fix-stitches-types.0",
+    "@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.0",
+    "@mirohq/design-system-types": "^1.0.1",
     "@mirohq/design-system-use-id": "^1.1.0",
-    "@mirohq/design-system-utils": "^1.2.1-aria-label-icon-button.2"
+    "@mirohq/design-system-utils": "^1.2.1"
   },
   "scripts": {
     "build": "rollup -c ../../../../rollup.config.js",