@mirohq/design-system-base-input 0.1.0-forms.2 → 0.1.1

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 +476 -46
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +471 -46
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +136 -64
  6. package/package.json +20 -1
package/dist/types.d.ts CHANGED
@@ -1,66 +1,138 @@
1
- declare const styles: {
2
- variants: {
3
- idle: {
4
- background: string;
5
- border: string;
6
- borderRadius: string;
7
- fontSize: string;
8
- lineHeight: string;
9
- };
10
- focused: {
11
- boxShadow: string;
12
- borderColor: string;
13
- };
14
- hovered: {
15
- borderColor: string;
16
- };
17
- readOnly: {
18
- background: string;
19
- color: string;
20
- };
21
- disabled: {
22
- background: string;
23
- };
24
- invalid: {
25
- idle: {
26
- borderColor: string;
27
- };
28
- focused: {
29
- borderColor: string;
30
- boxShadow: string;
31
- };
32
- hovered: {
33
- borderColor: string;
34
- };
35
- };
36
- valid: {
37
- idle: {
38
- borderColor: string;
39
- };
40
- focused: {
41
- borderColor: string;
42
- boxShadow: string;
43
- };
44
- hovered: {
45
- borderColor: string;
46
- };
47
- };
48
- };
49
- base: {
50
- placeholder: {
51
- color: string;
52
- };
53
- disabled: {
54
- caretColor: string;
55
- '&, &::placeholder': {
56
- color: string;
57
- '-webkit-text-fill-color': string;
58
- };
59
- '&:selection': {
60
- background: string;
61
- };
62
- };
63
- };
1
+ import * as react from 'react';
2
+ import react__default, { ComponentPropsWithRef, InputHTMLAttributes } from 'react';
3
+ import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
4
+ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
5
+ import { SafeProps, CSS } from '@mirohq/design-system-stitches';
6
+ import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
7
+ import { FormElementProps } from '@mirohq/design-system-base-form';
8
+ import * as packages_components_internal_base_button_src_base_button from 'packages/components/internal/base-button/src/base-button';
9
+ import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-hooks/use-press';
10
+ import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
11
+
12
+ declare const StyledBaseInput: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<"div">, "size" | "disabled" | "readOnly" | "ariaDisabled" | "hovered" | "focused" | "valid"> & _stitches_react_types_styled_component.TransformProps<{
13
+ hovered?: boolean | "false" | "true" | undefined;
14
+ focused?: boolean | "false" | "true" | undefined;
15
+ valid?: boolean | "false" | "true" | undefined;
16
+ readOnly?: boolean | "false" | "true" | undefined;
17
+ disabled?: boolean | "false" | "true" | undefined;
18
+ ariaDisabled?: boolean | "false" | "true" | undefined;
19
+ size?: "large" | "x-large" | undefined;
20
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<"div", {
21
+ hovered?: boolean | "false" | "true" | undefined;
22
+ focused?: boolean | "false" | "true" | undefined;
23
+ valid?: boolean | "false" | "true" | undefined;
24
+ readOnly?: boolean | "false" | "true" | undefined;
25
+ disabled?: boolean | "false" | "true" | undefined;
26
+ ariaDisabled?: boolean | "false" | "true" | undefined;
27
+ size?: "large" | "x-large" | undefined;
28
+ }, {}>;
29
+ declare type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>;
30
+
31
+ declare const StyledInput: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"input">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLInputElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"input">>, {}, {}>;
32
+ declare type StyledInputProps = ComponentPropsWithRef<typeof StyledInput>;
33
+
34
+ declare type InputProps$2 = Omit<StyledInputProps, 'aria-disabled' | 'disabled' | 'readOnly' | 'required' | 'onChange'>;
35
+ declare const Input: react__default.ForwardRefExoticComponent<Omit<InputProps$2, "ref"> & react__default.RefAttributes<HTMLInputElement>>;
36
+
37
+ interface InputProps$1 extends FormElementProps {
38
+ onChange?: react__default.ChangeEventHandler<HTMLInputElement>;
39
+ }
40
+ interface InputContextProps extends InputProps$1 {
41
+ focused: boolean;
42
+ setFocused: react__default.Dispatch<react__default.SetStateAction<boolean>>;
43
+ hovered: boolean;
44
+ setHovered: react__default.Dispatch<react__default.SetStateAction<boolean>>;
45
+ hasIconSlot: boolean;
46
+ setHasIconSlot: react__default.Dispatch<react__default.SetStateAction<boolean>>;
47
+ actionButtonRef: react__default.RefObject<HTMLAnchorElement | HTMLButtonElement>;
48
+ inputRef: react__default.RefObject<HTMLInputElement>;
49
+ editable: boolean;
50
+ }
51
+ declare type InputProviderProps = InputProps$1;
52
+ declare const useInputContext: () => InputContextProps;
53
+
54
+ declare const StyledActionButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
55
+ children?: react.ReactNode;
56
+ }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
57
+ readOnlyAppearance?: boolean | "true" | undefined;
58
+ disableAppearance?: boolean | "true" | undefined;
59
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
60
+ href: string;
61
+ }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
62
+ children?: react.ReactNode;
63
+ }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
64
+ readOnlyAppearance?: boolean | "true" | undefined;
65
+ disableAppearance?: boolean | "true" | undefined;
66
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
67
+ href: string;
68
+ }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
69
+ readOnlyAppearance?: boolean | "true" | undefined;
70
+ disableAppearance?: boolean | "true" | undefined;
71
+ }, {}>;
72
+ declare type StyledActionButtonProps = ComponentPropsWithRef<typeof StyledActionButton>;
73
+
74
+ declare type ActionButtonProps = StyledActionButtonProps & {
75
+ label: string;
64
76
  };
77
+ declare const ActionButton: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
78
+ children?: react__default.ReactNode;
79
+ }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
80
+ readOnlyAppearance?: boolean | "true" | undefined;
81
+ disableAppearance?: boolean | "true" | undefined;
82
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
83
+ label: string;
84
+ }, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
85
+ href: string;
86
+ }, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
87
+ children?: react__default.ReactNode;
88
+ }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
89
+ readOnlyAppearance?: boolean | "true" | undefined;
90
+ disableAppearance?: boolean | "true" | undefined;
91
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
92
+ label: string;
93
+ }, "ref">) & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
94
+
95
+ declare const StyledIconSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "disabled"> & _stitches_react_types_styled_component.TransformProps<{
96
+ disabled?: boolean | "true" | undefined;
97
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
98
+ disabled?: boolean | "true" | undefined;
99
+ }, {}>;
100
+ declare type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>;
101
+
102
+ interface IconSlotProps extends StyledIconSlotProps {
103
+ }
104
+ declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>>, "disabled"> & _stitches_react_types_styled_component.TransformProps<{
105
+ disabled?: boolean | "true" | undefined;
106
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
107
+
108
+ declare type BaseInputRootProps = Omit<StyledBaseInputProps, 'hovered' | 'focused' | 'valid' | 'readOnly' | 'disabled' | 'ariaDisabled' | 'value' | 'defaultValue' | 'placeholder'>;
109
+ declare type BaseInputProps = BaseInputRootProps & InputProviderProps;
110
+ declare const BaseInput: react__default.ForwardRefExoticComponent<BaseInputProps> & Partials;
111
+ interface Partials {
112
+ Input: typeof Input;
113
+ ActionButton: typeof ActionButton;
114
+ IconSlot: typeof IconSlot;
115
+ }
116
+
117
+ declare type InputProps = InputHTMLAttributes<HTMLInputElement>;
118
+ declare type BaseInputStyledProps = SafeProps<InputProps & {
119
+ css?: CSS;
120
+ }>;
121
+ interface BaseInputSharedProps extends FormElementProps, Omit<BaseInputStyledProps, 'size'> {
122
+ /** The input's state is indicated by both an icon and border color. A
123
+ * green check mark signifies valid input, while a red warning icon denotes
124
+ * invalid input. In both cases, the border color mirrors the icon: green for
125
+ * valid, red for invalid.
126
+ * */
127
+ valid?: BaseInputProps['valid'];
128
+ /**
129
+ * The size of the input.
130
+ */
131
+ size?: BaseInputProps['size'];
132
+ /**
133
+ * Input's content.
134
+ */
135
+ children?: React.ReactNode;
136
+ }
65
137
 
66
- export { styles };
138
+ export { BaseInput, ActionButtonProps as BaseInputActionButtonProps, IconSlotProps as BaseInputIconSlotProps, InputProps$2 as BaseInputInputProps, BaseInputProps, BaseInputSharedProps, BaseInputStyledProps, InputProviderProps, useInputContext };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-input",
3
- "version": "0.1.0-forms.2",
3
+ "version": "0.1.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -25,6 +25,25 @@
25
25
  "@stitches/react": "^1.2.8",
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
+ "dependencies": {
29
+ "@react-aria/interactions": "^3.13.0",
30
+ "@react-aria/utils": "^3.13.0",
31
+ "@react-types/shared": "^3.16.0",
32
+ "@mirohq/design-system-base-button": "^0.4.48",
33
+ "@mirohq/design-system-base-form": "^0.2.16",
34
+ "@mirohq/design-system-base-icon": "^0.1.32",
35
+ "@mirohq/design-system-base-text-field": "^0.1.0",
36
+ "@mirohq/design-system-icon-button": "^2.1.28",
37
+ "@mirohq/design-system-icons": "^0.45.0",
38
+ "@mirohq/design-system-primitive": "^1.1.2",
39
+ "@mirohq/design-system-stitches": "^2.6.11",
40
+ "@mirohq/design-system-tooltip": "^3.3.18",
41
+ "@mirohq/design-system-styles": "^1.2.11",
42
+ "@mirohq/design-system-use-aria-disabled": "^0.1.5",
43
+ "@mirohq/design-system-use-layout-effect": "^0.2.1",
44
+ "@mirohq/design-system-use-press": "^0.4.0",
45
+ "@mirohq/design-system-utils": "^0.15.4"
46
+ },
28
47
  "scripts": {
29
48
  "build": "rollup -c ../../../../rollup.config.js",
30
49
  "clean": "rm -rf dist",