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

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.
package/dist/main.js CHANGED
@@ -19,6 +19,7 @@ const StyledForm = designSystemStitches.styled(designSystemPrimitive.Primitive.f
19
19
 
20
20
  const StyledLabel = designSystemStitches.styled(designSystemPrimitive.Primitive.label, {
21
21
  fontSize: "$200",
22
+ lineHeight: 1.5,
22
23
  marginBottom: "$100",
23
24
  display: "block"
24
25
  });
@@ -50,9 +51,32 @@ const Label = React__default["default"].forwardRef(({ floating = true, children,
50
51
  return /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { htmlFor: formElementId, ...restProps, ref: forwardRef, children: label });
51
52
  });
52
53
 
54
+ const StyledDescription = designSystemStitches.styled(designSystemPrimitive.Primitive.p, {
55
+ fontSize: "$175",
56
+ lineHeight: 1.5,
57
+ margin: 0,
58
+ marginBottom: "$150"
59
+ });
60
+
61
+ const StyledHelper = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
62
+ fontSize: "$150",
63
+ lineHeight: 1.5,
64
+ marginTop: "$50"
65
+ });
66
+
53
67
  const StyledField = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
54
68
  marginBottom: "$300",
55
- position: "relative"
69
+ position: "relative",
70
+ "&[data-disabled]": {
71
+ ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
72
+ color: "$text-neutrals-disabled"
73
+ }
74
+ },
75
+ "&[data-readonly]": {
76
+ ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
77
+ color: "$text-neutrals-subtle"
78
+ }
79
+ }
56
80
  });
57
81
 
58
82
  const Root = React__default["default"].forwardRef(
@@ -107,12 +131,6 @@ const Root = React__default["default"].forwardRef(
107
131
  );
108
132
  const Field = React__default["default"].forwardRef(({ id, status, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FormFieldProvider, { status, id, children: /* @__PURE__ */ jsxRuntime.jsx(Root, { status, ...restProps, ref: forwardRef }) }));
109
133
 
110
- const StyledHelper = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
111
- fontSize: "$150",
112
- lineHeight: 1.5,
113
- marginTop: "$50"
114
- });
115
-
116
134
  const Helper = React__default["default"].forwardRef((props, forwardRef) => {
117
135
  var _a;
118
136
  const { helperId, setHelperId } = designSystemBaseForm.useFormFieldContext();
@@ -160,13 +178,6 @@ const Message = React__default["default"].forwardRef((props, forwardRef) => {
160
178
  );
161
179
  });
162
180
 
163
- const StyledDescription = designSystemStitches.styled(designSystemPrimitive.Primitive.p, {
164
- fontSize: "$175",
165
- lineHeight: 1.5,
166
- margin: 0,
167
- marginBottom: "$150"
168
- });
169
-
170
181
  const Description = React__default["default"].forwardRef((props, forwardRef) => {
171
182
  var _a;
172
183
  const { descriptionId, setDescriptionId } = designSystemBaseForm.useFormFieldContext();
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/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.styled.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.styled.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n all: 'unset',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n fontSize: '$200',\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 StyledField = styled(Primitive.div, {\n marginBottom: '$300',\n position: 'relative',\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 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 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 type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n fontSize: '$175',\n lineHeight: 1.5,\n margin: 0,\n marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n typeof StyledDescription\n>\n","import React, { 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})\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":";;;;;;;;;;;;;;;AAIa,MAAA,UAAA,GAAaA,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,GAAK,EAAA,OAAA;AACP,CAAC,CAAA;;ACFY,MAAA,WAAA,GAAcD,2BAAO,CAAAC,+BAAA,CAAU,KAAO,EAAA;AAAA,EACjD,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,YAAc,EAAA,MAAA;AAAA,EACd,OAAS,EAAA,OAAA;AACX,CAAC,CAAA,CAAA;AAEY,MAAA,cAAA,GAAiBD,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EACnD,KAAO,EAAA,cAAA;AACT,CAAC,CAAA;;ACKY,MAAA,KAAA,GAAQC,yBAAM,CAAA,UAAA,CAGzB,CAAC,EAAE,QAAW,GAAA,IAAA,EAAM,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AAC7D,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,MACTC,wCAAoB,EAAA,CAAA;AAExB,EAAA,MAAM,KAAQ,GAAAC,aAAA;AAAA,IACZ,sBAEKC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,QAAA,oBAAaC,cAAA,CAAA,cAAA,EAAA,EAAe,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,KAChC,EAAA,CAAA;AAAA,IAEF,CAAC,UAAU,QAAQ,CAAA;AAAA,GACrB,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAAA,GACb,EAAA,CAAC,QAAU,EAAA,KAAK,CAAC,CAAA,CAAA;AAEpB,EAAAA,eAAA,CAAU,MAAM,kBAAmB,CAAA,QAAQ,GAAG,CAAC,kBAAA,EAAoB,QAAQ,CAAC,CAAA,CAAA;AAG5E,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAAD,cAAA,CAAC,eAAY,OAAS,EAAA,aAAA,EAAgB,GAAG,SAAW,EAAA,GAAA,EAAK,YACtD,QACH,EAAA,KAAA,EAAA,CAAA,CAAA;AAEJ,CAAC,CAAA;;ACnDY,MAAA,iBAAA,GAAoBP,2BAAO,CAAAC,+BAAA,CAAU,CAAG,EAAA;AAAA,EACnD,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,MAAQ,EAAA,CAAA;AAAA,EACR,YAAc,EAAA,MAAA;AAChB,CAAC,CAAA;;ACLY,MAAA,YAAA,GAAeD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAChD,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,SAAW,EAAA,KAAA;AACb,CAAC,CAAA;;ACAY,MAAA,WAAA,GAAcD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC/C,YAAc,EAAA,MAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,kBAAoB,EAAA;AAAA,IAClB,CAAC,EAAG,CAAA,MAAA,CAAA,WAAA,EAAW,MAAK,MAAiB,CAAA,iBAAA,EAAA,IAAA,CAAA,CAAK,oBAAc,GAAG;AAAA,MACzD,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACA,kBAAoB,EAAA;AAAA,IAClB,CAAC,EAAG,CAAA,MAAA,CAAA,WAAA,EAAW,MAAK,MAAiB,CAAA,iBAAA,EAAA,IAAA,CAAA,CAAK,oBAAc,GAAG;AAAA,MACzD,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,GACF;AACF,CAAC,CAAA;;ACND,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACjB,CAAC,EAAE,OAAS,EAAA,MAAA,EAAQ,QAAQ,WAAa,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AAhB1E,IAAA,IAAA,EAAA,CAAA;AAiBI,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,MAAQ,EAAA,eAAA;AAAA,MACR,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,QACEC,wCAAoB,EAAA,CAAA;AAExB,IAAA,MAAM,SAAS,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,eAAA,CAAA;AAC9B,IAAA,MAAM,kBAAkBM,YAAe,EAAA,CAAA;AAEvC,IAAA,IAAA,CAAA,CACE,oBAAe,OAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAwB,WAAU,KAClC,CAAA,IAAA,eAAA,CAAgB,YAAY,KAC5B,CAAA,EAAA;AACA,MAAgB,eAAA,CAAA,OAAA,GAAU,eAAe,OAAQ,CAAA,KAAA,CAAA;AAAA,KACnD;AAEA,IACE,uBAAAF,cAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,aAAa,EAAA,MAAA;AAAA,QACb,eAAA,EAAeG,mCAAiB,QAAQ,CAAA;AAAA,QACxC,cAAA,EAAcA,mCAAiB,OAAO,CAAA;AAAA,QACtC,eAAe,EAAAA,kCAAA;AAAA,UACb,QAAA,KAAa,QAAQ,YAAiB,KAAA,IAAA;AAAA,SACxC;AAAA,QACA,eAAA,EAAeA,mCAAiB,QAAQ,CAAA;AAAA,QACxC,SAAS,CAAK,CAAA,KAAA;AACZ,UAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,UAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SACZ;AAAA,QACA,QAAQ,CAAK,CAAA,KAAA;AACX,UAAA,IAAI,gBAAgB,KAAW,CAAA,EAAA;AAC7B,YAAA,SAAA;AAAA,cACE,gBAAgB,OAAa,KAAA,CAAA,CAAE,OAA4B,KACvD,GAAAC,sCAAA,CAAkB,QAClBA,sCAAkB,CAAA,OAAA;AAAA,aACxB,CAAA;AAAA,WACF;AAEA,UAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,UAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SACX;AAAA,QACC,GAAG,SAAA;AAAA,QACJ,EAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,OAAA;AAAA,KACP,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEa,MAAA,KAAA,GAAQT,0BAAM,UAGzB,CAAA,CAAC,EAAE,EAAI,EAAA,MAAA,EAAQ,GAAG,SAAA,EAAa,EAAA,UAAA,oCAC9BU,sCAAkB,EAAA,EAAA,MAAA,EAAgB,EAEjC,EAAA,QAAA,kBAAAL,cAAA,CAAC,IAAK,EAAA,EAAA,MAAA,EAAiB,GAAG,SAAW,EAAA,GAAA,EAAK,UAAY,EAAA,CAAA,EACxD,CACD,CAAA;;ACnEM,MAAM,MAAS,GAAAL,yBAAA,CAAM,UAG1B,CAAA,CAAC,OAAO,UAAe,KAAA;AAjBzB,EAAA,IAAA,EAAA,CAAA;AAkBE,EAAA,MAAM,EAAE,QAAA,EAAU,WAAY,EAAA,GAAIC,wCAAoB,EAAA,CAAA;AAEtD,EAAM,MAAA,EAAA,GAAA,CAAK,EAAM,GAAA,KAAA,CAAA,EAAA,KAAN,IAAY,GAAA,EAAA,GAAA,QAAA,CAAA;AACvB,EAAAK,eAAA,CAAU,MAAM,WAAY,CAAA,EAAE,GAAG,CAAC,WAAA,EAAa,EAAE,CAAC,CAAA,CAAA;AAElD,EAAA,sCAAQ,YAAc,EAAA,EAAA,GAAG,KAAO,EAAA,EAAA,EAAQ,KAAK,UAAY,EAAA,CAAA,CAAA;AAC3D,CAAC,CAAA;;ACpBY,MAAA,aAAA,GAAgBR,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EACjD,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,SAAW,EAAA,KAAA;AAAA,EACX,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,MACA,OAAO,EAAC;AAAA,MACR,UAAU,EAAC;AAAA,MACX,SAAS,EAAC;AAAA,KACZ;AAAA,GACF;AACF,CAAC,CAAA;;ACLM,MAAM,OAAU,GAAAC,yBAAA,CAAM,UAG3B,CAAA,CAAC,OAAO,UAAe,KAAA;AAnBzB,EAAA,IAAA,EAAA,CAAA;AAoBE,EAAA,MAAM,EAAE,SAAA,EAAW,YAAc,EAAA,MAAA,KAAWC,wCAAoB,EAAA,CAAA;AAEhE,EAAM,MAAA,EAAA,GAAA,CAAK,EAAM,GAAA,KAAA,CAAA,EAAA,KAAN,IAAY,GAAA,EAAA,GAAA,SAAA,CAAA;AACvB,EAAAK,eAAA,CAAU,MAAM,YAAa,CAAA,EAAE,GAAG,CAAC,YAAA,EAAc,EAAE,CAAC,CAAA,CAAA;AAEpD,EAAA,IACE,MAAW,KAAAG,sCAAA,CAAkB,OAC7B,IAAA,MAAA,KAAWA,uCAAkB,KAC7B,EAAA;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAAJ,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,OAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,EAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC,CAAA;;AC3BM,MAAM,WAAc,GAAAL,yBAAA,CAAM,UAG/B,CAAA,CAAC,OAAO,UAAe,KAAA;AAjBzB,EAAA,IAAA,EAAA,CAAA;AAkBE,EAAA,MAAM,EAAE,aAAA,EAAe,gBAAiB,EAAA,GAAIC,wCAAoB,EAAA,CAAA;AAEhE,EAAM,MAAA,EAAA,GAAA,CAAK,EAAM,GAAA,KAAA,CAAA,EAAA,KAAN,IAAY,GAAA,EAAA,GAAA,aAAA,CAAA;AACvB,EAAAK,eAAA,CAAU,MAAM,gBAAiB,CAAA,EAAE,GAAG,CAAC,gBAAA,EAAkB,EAAE,CAAC,CAAA,CAAA;AAE5D,EAAA,sCAAQ,iBAAmB,EAAA,EAAA,GAAG,KAAO,EAAA,EAAA,EAAQ,KAAK,UAAY,EAAA,CAAA,CAAA;AAChE,CAAC,CAAA;;ACPM,MAAM,IAAO,GAAA,WAAA;AAcpB,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AACb,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AACb,IAAA,CAAK,MAAS,GAAA,MAAA,CAAA;AACd,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AACf,IAAA,CAAK,WAAc,GAAA,WAAA;;;;"}
package/dist/module.js CHANGED
@@ -11,6 +11,7 @@ const StyledForm = styled(Primitive.form, {
11
11
 
12
12
  const StyledLabel = styled(Primitive.label, {
13
13
  fontSize: "$200",
14
+ lineHeight: 1.5,
14
15
  marginBottom: "$100",
15
16
  display: "block"
16
17
  });
@@ -42,9 +43,32 @@ const Label = React.forwardRef(({ floating = true, children, ...restProps }, for
42
43
  return /* @__PURE__ */ jsx(StyledLabel, { htmlFor: formElementId, ...restProps, ref: forwardRef, children: label });
43
44
  });
44
45
 
46
+ const StyledDescription = styled(Primitive.p, {
47
+ fontSize: "$175",
48
+ lineHeight: 1.5,
49
+ margin: 0,
50
+ marginBottom: "$150"
51
+ });
52
+
53
+ const StyledHelper = styled(Primitive.div, {
54
+ fontSize: "$150",
55
+ lineHeight: 1.5,
56
+ marginTop: "$50"
57
+ });
58
+
45
59
  const StyledField = styled(Primitive.div, {
46
60
  marginBottom: "$300",
47
- position: "relative"
61
+ position: "relative",
62
+ "&[data-disabled]": {
63
+ ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
64
+ color: "$text-neutrals-disabled"
65
+ }
66
+ },
67
+ "&[data-readonly]": {
68
+ ["".concat(StyledLabel, ", ").concat(StyledDescription, ", ").concat(StyledHelper)]: {
69
+ color: "$text-neutrals-subtle"
70
+ }
71
+ }
48
72
  });
49
73
 
50
74
  const Root = React.forwardRef(
@@ -99,12 +123,6 @@ const Root = React.forwardRef(
99
123
  );
100
124
  const Field = React.forwardRef(({ id, status, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(FormFieldProvider, { status, id, children: /* @__PURE__ */ jsx(Root, { status, ...restProps, ref: forwardRef }) }));
101
125
 
102
- const StyledHelper = styled(Primitive.div, {
103
- fontSize: "$150",
104
- lineHeight: 1.5,
105
- marginTop: "$50"
106
- });
107
-
108
126
  const Helper = React.forwardRef((props, forwardRef) => {
109
127
  var _a;
110
128
  const { helperId, setHelperId } = useFormFieldContext();
@@ -152,13 +170,6 @@ const Message = React.forwardRef((props, forwardRef) => {
152
170
  );
153
171
  });
154
172
 
155
- const StyledDescription = styled(Primitive.p, {
156
- fontSize: "$175",
157
- lineHeight: 1.5,
158
- margin: 0,
159
- marginBottom: "$150"
160
- });
161
-
162
173
  const Description = React.forwardRef((props, forwardRef) => {
163
174
  var _a;
164
175
  const { descriptionId, setDescriptionId } = useFormFieldContext();
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/partials/label.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.styled.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.styled.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n all: 'unset',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n fontSize: '$200',\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 StyledField = styled(Primitive.div, {\n marginBottom: '$300',\n position: 'relative',\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 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 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 type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n fontSize: '$175',\n lineHeight: 1.5,\n margin: 0,\n marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n typeof StyledDescription\n>\n","import React, { 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})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n fontSize: '$200',\n lineHeight: 1.5,\n marginBottom: '$100',\n display: 'block',\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","import React, { useMemo, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\n\nexport interface LabelProps extends StyledLabelProps {\n /**\n * The content\n */\n children: React.ReactNode\n /**\n * Whether the label should float above the input\n */\n floating?: boolean\n}\n\nexport const Label = React.forwardRef<\n ElementRef<typeof StyledLabel>,\n LabelProps\n>(({ floating = true, children, ...restProps }, forwardRef) => {\n const {\n setLabel,\n setIsFloatingLabel,\n formElementId,\n required = false,\n } = useFormFieldContext()\n\n const label = useMemo(\n () => (\n <>\n {children}\n {required && <StyledAsterisk>*</StyledAsterisk>}\n </>\n ),\n [children, required]\n )\n\n useEffect(() => {\n setLabel(label)\n }, [setLabel, label])\n\n useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating])\n\n // floating labels are managed in the form elements\n if (floating) {\n return null\n }\n\n return (\n <StyledLabel htmlFor={formElementId} {...restProps} ref={forwardRef}>\n {label}\n </StyledLabel>\n )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n fontSize: '$175',\n lineHeight: 1.5,\n margin: 0,\n marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n typeof StyledDescription\n>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledLabel } from './label.styled'\nimport { StyledDescription } from './description.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport const StyledField = styled(Primitive.div, {\n marginBottom: '$300',\n position: 'relative',\n '&[data-disabled]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-disabled',\n },\n },\n '&[data-readonly]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-subtle',\n },\n },\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React, { useRef } from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanAttrValue } from '@mirohq/design-system-utils'\nimport {\n useFormFieldContext,\n FormFieldProvider,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldProviderProps } from '@mirohq/design-system-base-form'\n\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {\n const {\n id,\n status: formFieldStatus,\n setStatus,\n required,\n focused,\n setFocused,\n disabled,\n ariaDisabled,\n readOnly,\n formElementRef,\n } = useFormFieldContext()\n\n const status = statusProps ?? formFieldStatus\n const initialValueRef = useRef<string>()\n\n if (\n formElementRef.current?.value !== undefined &&\n initialValueRef.current === undefined\n ) {\n initialValueRef.current = formElementRef.current.value\n }\n\n return (\n <StyledField\n data-status={status}\n data-required={booleanAttrValue(required)}\n data-focused={booleanAttrValue(focused)}\n data-disabled={booleanAttrValue(\n disabled === true || ariaDisabled === true\n )}\n data-readonly={booleanAttrValue(readOnly)}\n onFocus={e => {\n setFocused(true)\n onFocus?.(e)\n }}\n onBlur={e => {\n if (statusProps === undefined) {\n setStatus(\n initialValueRef.current !== (e.target as HTMLInputElement).value\n ? FORM_FIELD_STATUS.dirty\n : FORM_FIELD_STATUS.touched\n )\n }\n\n setFocused(false)\n onBlur?.(e)\n }}\n {...restProps}\n id={id}\n ref={forwardRef}\n />\n )\n }\n)\n\nexport const Field = React.forwardRef<\n ElementRef<typeof StyledField>,\n FieldProps\n>(({ id, status, ...restProps }, forwardRef) => (\n <FormFieldProvider status={status} id={id}>\n {/* explicit use status as props because the provider will add a default */}\n <Root status={status} {...restProps} ref={forwardRef} />\n </FormFieldProvider>\n))\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n ElementRef<typeof StyledHelper>,\n HelperProps\n>((props, forwardRef) => {\n const { helperId, setHelperId } = useFormFieldContext()\n\n const id = props.id ?? helperId\n useEffect(() => setHelperId(id), [setHelperId, id])\n\n return <StyledHelper {...props} id={id} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledMessage = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n variants: {\n status: {\n valid: {\n color: '$text-success',\n },\n invalid: {\n color: '$text-danger',\n },\n dirty: {},\n pristine: {},\n touched: {},\n },\n },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n useFormFieldContext,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldStatus } from '@mirohq/design-system-base-form'\n\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n status?: FormFieldStatus\n chidren?: React.ReactNode\n}\n\nexport const Message = React.forwardRef<\n ElementRef<typeof StyledMessage>,\n MessageProps\n>((props, forwardRef) => {\n const { messageId, setMessageId, status } = useFormFieldContext()\n\n const id = props.id ?? messageId\n useEffect(() => setMessageId(id), [setMessageId, id])\n\n if (\n status !== FORM_FIELD_STATUS.invalid &&\n status !== FORM_FIELD_STATUS.valid\n ) {\n return null\n }\n\n return (\n <StyledMessage\n role='alert'\n {...props}\n id={id}\n status={status}\n ref={forwardRef}\n />\n )\n})\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n ElementRef<typeof StyledDescription>,\n DescriptionProps\n>((props, forwardRef) => {\n const { descriptionId, setDescriptionId } = useFormFieldContext()\n\n const id = props.id ?? descriptionId\n useEffect(() => setDescriptionId(id), [setDescriptionId, id])\n\n return <StyledDescription {...props} id={id} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Label: typeof Label\n Field: typeof Field\n Helper: typeof Helper\n Message: typeof Message\n Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-form",
3
- "version": "0.1.0-forms.4",
3
+ "version": "0.1.0-forms.5",
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.0",
30
- "@mirohq/design-system-stitches": "^2.6.0",
31
- "@mirohq/design-system-use-id": "^0.1.1-forms.0",
29
+ "@mirohq/design-system-base-form": "^0.1.0-forms.1",
32
30
  "@mirohq/design-system-primitive": "^1.1.2-forms.0",
33
- "@mirohq/design-system-utils": "^0.15.0-forms.0"
31
+ "@mirohq/design-system-use-id": "^0.1.1-forms.0",
32
+ "@mirohq/design-system-stitches": "^2.6.0",
33
+ "@mirohq/design-system-utils": "^0.15.0-forms.1"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "rollup -c ../../../rollup.config.js",