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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +8 -6
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +9 -7
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +1 -0
  6. package/package.json +5 -5
package/dist/main.js CHANGED
@@ -14,7 +14,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
14
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
15
 
16
16
  const StyledForm = designSystemStitches.styled(designSystemPrimitive.Primitive.form, {
17
- all: "unset"
17
+ all: "unset",
18
+ width: "100%"
18
19
  });
19
20
 
20
21
  const StyledLabel = designSystemStitches.styled(designSystemPrimitive.Primitive.label, {
@@ -103,20 +104,21 @@ const Root = React__default["default"].forwardRef(
103
104
  StyledField,
104
105
  {
105
106
  "data-status": status,
106
- "data-required": designSystemUtils.booleanAttrValue(required),
107
- "data-focused": designSystemUtils.booleanAttrValue(focused),
108
- "data-disabled": designSystemUtils.booleanAttrValue(
107
+ "data-required": designSystemUtils.booleanishAttrValue(required),
108
+ "data-focused": designSystemUtils.booleanishAttrValue(focused),
109
+ "data-disabled": designSystemUtils.booleanishAttrValue(
109
110
  disabled === true || ariaDisabled === true
110
111
  ),
111
- "data-readonly": designSystemUtils.booleanAttrValue(readOnly),
112
+ "data-readonly": designSystemUtils.booleanishAttrValue(readOnly),
112
113
  onFocus: (e) => {
113
114
  setFocused(true);
114
115
  onFocus == null ? void 0 : onFocus(e);
115
116
  },
116
117
  onBlur: (e) => {
118
+ var _a2;
117
119
  if (statusProps === void 0) {
118
120
  setStatus(
119
- initialValueRef.current !== e.target.value ? designSystemBaseForm.FORM_FIELD_STATUS.dirty : designSystemBaseForm.FORM_FIELD_STATUS.touched
121
+ initialValueRef.current !== ((_a2 = formElementRef.current) == null ? void 0 : _a2.value) ? designSystemBaseForm.FORM_FIELD_STATUS.dirty : designSystemBaseForm.FORM_FIELD_STATUS.touched
120
122
  );
121
123
  }
122
124
  setFocused(false);
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"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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"}
1
+ {"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 width: '100%',\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 * @default true\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 { booleanishAttrValue } 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={booleanishAttrValue(required)}\n data-focused={booleanishAttrValue(focused)}\n data-disabled={booleanishAttrValue(\n disabled === true || ariaDisabled === true\n )}\n data-readonly={booleanishAttrValue(readOnly)}\n onFocus={e => {\n setFocused(true)\n onFocus?.(e)\n }}\n onBlur={e => {\n if (statusProps === undefined) {\n setStatus(\n initialValueRef.current !== formElementRef.current?.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","booleanishAttrValue","_a","FORM_FIELD_STATUS","FormFieldProvider"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -3,10 +3,11 @@ import { styled } from '@mirohq/design-system-stitches';
3
3
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
4
4
  import React, { useMemo, useEffect, useRef } from 'react';
5
5
  import { useFormFieldContext, FORM_FIELD_STATUS, FormFieldProvider } from '@mirohq/design-system-base-form';
6
- import { booleanAttrValue } from '@mirohq/design-system-utils';
6
+ import { booleanishAttrValue } from '@mirohq/design-system-utils';
7
7
 
8
8
  const StyledForm = styled(Primitive.form, {
9
- all: "unset"
9
+ all: "unset",
10
+ width: "100%"
10
11
  });
11
12
 
12
13
  const StyledLabel = styled(Primitive.label, {
@@ -95,20 +96,21 @@ const Root = React.forwardRef(
95
96
  StyledField,
96
97
  {
97
98
  "data-status": status,
98
- "data-required": booleanAttrValue(required),
99
- "data-focused": booleanAttrValue(focused),
100
- "data-disabled": booleanAttrValue(
99
+ "data-required": booleanishAttrValue(required),
100
+ "data-focused": booleanishAttrValue(focused),
101
+ "data-disabled": booleanishAttrValue(
101
102
  disabled === true || ariaDisabled === true
102
103
  ),
103
- "data-readonly": booleanAttrValue(readOnly),
104
+ "data-readonly": booleanishAttrValue(readOnly),
104
105
  onFocus: (e) => {
105
106
  setFocused(true);
106
107
  onFocus == null ? void 0 : onFocus(e);
107
108
  },
108
109
  onBlur: (e) => {
110
+ var _a2;
109
111
  if (statusProps === void 0) {
110
112
  setStatus(
111
- initialValueRef.current !== e.target.value ? FORM_FIELD_STATUS.dirty : FORM_FIELD_STATUS.touched
113
+ initialValueRef.current !== ((_a2 = formElementRef.current) == null ? void 0 : _a2.value) ? FORM_FIELD_STATUS.dirty : FORM_FIELD_STATUS.touched
112
114
  );
113
115
  }
114
116
  setFocused(false);
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"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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"}
1
+ {"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 width: '100%',\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 * @default true\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 { booleanishAttrValue } 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={booleanishAttrValue(required)}\n data-focused={booleanishAttrValue(focused)}\n data-disabled={booleanishAttrValue(\n disabled === true || ariaDisabled === true\n )}\n data-readonly={booleanishAttrValue(readOnly)}\n onFocus={e => {\n setFocused(true)\n onFocus?.(e)\n }}\n onBlur={e => {\n if (statusProps === undefined) {\n setStatus(\n initialValueRef.current !== formElementRef.current?.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":["_a"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -995,6 +995,7 @@ interface LabelProps extends StyledLabelProps {
995
995
  children: react__default.ReactNode;
996
996
  /**
997
997
  * Whether the label should float above the input
998
+ * @default true
998
999
  */
999
1000
  floating?: boolean;
1000
1001
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-form",
3
- "version": "0.1.0-forms.5",
3
+ "version": "0.1.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,11 +26,11 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-base-form": "^0.1.0-forms.1",
30
- "@mirohq/design-system-primitive": "^1.1.2-forms.0",
31
- "@mirohq/design-system-use-id": "^0.1.1-forms.0",
29
+ "@mirohq/design-system-base-form": "^0.1.0",
30
+ "@mirohq/design-system-use-id": "^0.1.1",
31
+ "@mirohq/design-system-utils": "^0.15.0",
32
32
  "@mirohq/design-system-stitches": "^2.6.0",
33
- "@mirohq/design-system-utils": "^0.15.0-forms.1"
33
+ "@mirohq/design-system-primitive": "^1.1.2"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "rollup -c ../../../rollup.config.js",