@obosbbl/grunnmuren-react 2.0.0-canary.1 → 2.0.0-canary.10

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 (20) hide show
  1. package/README.md +73 -1
  2. package/dist/Button-client-XmGlKEk4.js +143 -0
  3. package/dist/index.d.mts +397 -0
  4. package/dist/index.mjs +537 -0
  5. package/package.json +8 -38
  6. package/dist/button/Button.d.mts +0 -83
  7. package/dist/button/Button.d.ts +0 -83
  8. package/dist/button/Button.mjs +0 -149
  9. package/dist/checkbox/index.d.mts +0 -32
  10. package/dist/checkbox/index.d.ts +0 -32
  11. package/dist/checkbox/index.mjs +0 -106
  12. package/dist/label/index.d.mts +0 -13
  13. package/dist/label/index.d.ts +0 -13
  14. package/dist/label/index.mjs +0 -45
  15. package/dist/radiogroup/index.d.mts +0 -30
  16. package/dist/radiogroup/index.d.ts +0 -30
  17. package/dist/radiogroup/index.mjs +0 -65
  18. package/dist/textfield/index.d.mts +0 -31
  19. package/dist/textfield/index.d.ts +0 -31
  20. package/dist/textfield/index.mjs +0 -88
package/README.md CHANGED
@@ -14,12 +14,84 @@ npm install @obosbbl/grunnmuren-react@canary
14
14
  pnpm add @obosbbl/grunnmuren-react@canary
15
15
  ```
16
16
 
17
+ ## Localization configuration
18
+
19
+ Grunnmuren uses [React Aria Components](https://react-spectrum.adobe.com/react-aria/) under the hood. RAC has built in translation strings for non visible content (for accessibility reasons). It also automatically detects the language based on the browser or system language.
20
+
21
+ To ensure that the language of the page content matches the accessibility strings you should wrap your application in a `I18nProvider`. This will override RAC's automatic locale selection.
22
+
23
+ In [Next.js](https://nextjs.org/) you can do this in the root [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
24
+
25
+ Valid locales for Norwegian are `nb-NO` or `nb`, Swedish is `sv-SE` or `sv`.
26
+
27
+ ```js
28
+ // app/layout.tsx
29
+ import { I18nProvider } from '@obosbbl/grunnmuren-react';
30
+
31
+
32
+ export default function RootLayout({
33
+ children,
34
+ }: {
35
+ children: React.ReactNode
36
+ }) {
37
+
38
+ // Either 'nb' or 'sv'
39
+ const locale = 'nb';
40
+
41
+ return (
42
+ <I18nProvider locale={locale}>
43
+ <html lang={locale}>
44
+ <body>{children}</body>
45
+ </html>
46
+ </I18nProvider>
47
+ )
48
+ }
49
+ ```
50
+
51
+ See the [RAC internationalization docs](https://react-spectrum.adobe.com/react-aria/internationalization.html) for more information.
52
+
53
+ ### Optimize bundle size by removing unused locales
54
+
55
+ React Aria Components has built in support for over 30 languages, most of which will be unused in your application. To optimize your applications bundle size, it is recommended to use React Aria's build plugin to remove all the unused locales. Here is a quick example for Next.js:
56
+
57
+ #### Install
58
+
59
+ ```sh
60
+ # npm
61
+ npm install @react-aria/optimize-locales-plugin --save-dev
62
+
63
+ # pnpm
64
+ pnpm add -D @react-aria/optimize-locales-plugin
65
+ ```
66
+
67
+ #### Configuration
68
+
69
+ ```js
70
+ // next.config.js
71
+ const optimizeLocales = require('@react-aria/optimize-locales-plugin');
72
+
73
+ module.exports = {
74
+ webpack(config) {
75
+ config.plugins.push(
76
+ optimizeLocales.webpack({
77
+ // If you have a multitenant app, include both Norwegian and Swedish
78
+ // If your app only serves one language, adjust accordingly
79
+ locales: ['nb-NO', 'sv-SE'],
80
+ }),
81
+ );
82
+ return config;
83
+ },
84
+ };
85
+ ```
86
+
87
+ The plugin works with several different bundlers. See [React Aria's bundle size optimization docs](https://react-spectrum.adobe.com/react-aria/internationalization.html#optimizing-bundle-size) for more information.
88
+
17
89
  ## Usage
18
90
 
19
91
  Before you start using the components you need to configure the [Tailwind preset](../tailwind/). Remember to add this package to the content scan.
20
92
 
21
93
  ```js
22
- import { Button } from '@obosbbl/grunnmuren-react/button';
94
+ import { Button } from '@obosbbl/grunnmuren-react';
23
95
 
24
96
  export default function () {
25
97
  return <Button>Click me</Button>;
package/dist/Button-client-XmGlKEk4.js ADDED
@@ -0,0 +1,143 @@
1
+ 'use client';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useLayoutEffect, forwardRef, useState, useRef } from 'react';
4
+ import { cva } from 'cva';
5
+ import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
6
+ import { mergeRefs } from '@react-aria/utils';
7
+
8
+ const canUseDOM = ()=>{
9
+ return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
10
+ };
11
+ const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : ()=>{};
12
+
13
+ /**
14
+ * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
15
+ */ const buttonVariants = cva({
16
+ base: [
17
+ 'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
18
+ ],
19
+ variants: {
20
+ /**
21
+ * The variant of the button
22
+ * @default primary
23
+ */ variant: {
24
+ primary: 'no-underline',
25
+ // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
26
+ secondary: 'no-underline shadow-[inset_0_0_0_2px]',
27
+ tertiary: 'underline hover:no-underline'
28
+ },
29
+ /**
30
+ * Adjusts the color of the button for usage on different backgrounds.
31
+ * @default green
32
+ */ color: {
33
+ green: 'focus-visible:ring-black',
34
+ mint: 'focus-visible:ring-mint focus-visible:ring-offset-green-dark',
35
+ white: 'focus-visible:ring-white focus-visible:ring-offset-blue'
36
+ },
37
+ /**
38
+ * When the button is without text, but with a single icon.
39
+ * @default false
40
+ */ isIconOnly: {
41
+ true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
42
+ false: 'gap-2.5 px-4 py-2'
43
+ }
44
+ },
45
+ compoundVariants: [
46
+ {
47
+ color: 'green',
48
+ variant: 'primary',
49
+ // Darken bg by 20% on hover. The color is manually crafted
50
+ className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352]'
51
+ },
52
+ {
53
+ color: 'green',
54
+ variant: 'secondary',
55
+ className: 'bg-white text-black shadow-green hover:bg-green hover:text-white active:bg-green'
56
+ },
57
+ {
58
+ color: 'mint',
59
+ variant: 'primary',
60
+ // Darken bg by 20% on hover. The color is manually crafted
61
+ className: 'active:[#9ddac6] bg-mint text-black hover:bg-[#8dd4bd]'
62
+ },
63
+ {
64
+ color: 'mint',
65
+ variant: 'secondary',
66
+ className: 'text-mint shadow-mint hover:bg-mint hover:text-black'
67
+ },
68
+ {
69
+ color: 'mint',
70
+ variant: 'tertiary',
71
+ className: 'text-mint'
72
+ },
73
+ {
74
+ color: 'white',
75
+ variant: 'primary',
76
+ className: 'bg-white text-black hover:bg-sky active:bg-sky-light'
77
+ },
78
+ {
79
+ color: 'white',
80
+ variant: 'secondary',
81
+ className: 'text-white shadow-white hover:bg-white hover:text-black'
82
+ },
83
+ {
84
+ color: 'white',
85
+ variant: 'tertiary',
86
+ className: 'text-white'
87
+ }
88
+ ],
89
+ defaultVariants: {
90
+ variant: 'primary',
91
+ color: 'green',
92
+ isIconOnly: false
93
+ }
94
+ });
95
+ function Button(props, forwardedRef) {
96
+ const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
97
+ const [widthOverride, setWidthOverride] = useState();
98
+ const ownRef = useRef(null);
99
+ const ref = mergeRefs(ownRef, forwardedRef);
100
+ useClientLayoutEffect(()=>{
101
+ if (isLoading) {
102
+ const requestID = window.requestAnimationFrame(()=>{
103
+ setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
104
+ });
105
+ return ()=>{
106
+ setWidthOverride(undefined);
107
+ cancelAnimationFrame(requestID);
108
+ };
109
+ }
110
+ }, [
111
+ isLoading,
112
+ children
113
+ ]);
114
+ let Component = 'a';
115
+ if (props.href == null) {
116
+ // If we don't have a href, it's a button, and we add a fallback type button to prevent the button from accidentally submitting when in a form
117
+ Component = 'button';
118
+ restProps.type ??= 'button';
119
+ }
120
+ return(// @ts-expect-error TS doesn't agree here taht restProps is safe to spread, because restProps for anchors aren't type compatible with restProps for buttons, but that should be okay here
121
+ /*#__PURE__*/ jsx(Component, {
122
+ "aria-busy": isLoading ? true : undefined,
123
+ className: buttonVariants({
124
+ className,
125
+ color,
126
+ isIconOnly,
127
+ variant
128
+ }),
129
+ ref: ref,
130
+ style: {
131
+ ...style,
132
+ width: widthOverride
133
+ },
134
+ ...restProps,
135
+ children: widthOverride ? // remove margin for icon alignment
136
+ /*#__PURE__*/ jsx(LoadingSpinner, {
137
+ className: "!m-0 mx-auto animate-spin"
138
+ }) : children
139
+ }));
140
+ }
141
+ const _Button = /*#__PURE__*/ forwardRef(Button);
142
+
143
+ export { _Button as _ };
package/dist/index.d.mts ADDED
@@ -0,0 +1,397 @@
1
+ import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ComboBoxProps, ListBoxItemProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
2
+ export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
3
+ import * as react from 'react';
4
+ import { VariantProps } from 'cva';
5
+ import * as react_jsx_runtime from 'react/jsx-runtime';
6
+
7
+ /**
8
+ * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
9
+ */
10
+ declare const buttonVariants: (props?: ({
11
+ variant?: "primary" | "secondary" | "tertiary" | undefined;
12
+ color?: "green" | "mint" | "white" | undefined;
13
+ isIconOnly?: boolean | undefined;
14
+ } & ({
15
+ class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
16
+ [x: string]: any;
17
+ } | null | undefined)[] | {
18
+ [x: string]: any;
19
+ } | null | undefined)[] | {
20
+ [x: string]: any;
21
+ } | null | undefined)[] | {
22
+ [x: string]: any;
23
+ } | null | undefined)[] | {
24
+ [x: string]: any;
25
+ } | null | undefined)[] | {
26
+ [x: string]: any;
27
+ } | null | undefined)[] | {
28
+ [x: string]: any;
29
+ } | null | undefined)[] | {
30
+ [x: string]: any;
31
+ } | null | undefined)[] | {
32
+ [x: string]: any;
33
+ } | null | undefined)[] | {
34
+ [x: string]: any;
35
+ } | null | undefined)[] | {
36
+ [x: string]: any;
37
+ } | null | undefined)[] | {
38
+ [x: string]: any;
39
+ } | null | undefined;
40
+ className?: undefined;
41
+ } | {
42
+ class?: undefined;
43
+ className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
44
+ [x: string]: any;
45
+ } | null | undefined)[] | {
46
+ [x: string]: any;
47
+ } | null | undefined)[] | {
48
+ [x: string]: any;
49
+ } | null | undefined)[] | {
50
+ [x: string]: any;
51
+ } | null | undefined)[] | {
52
+ [x: string]: any;
53
+ } | null | undefined)[] | {
54
+ [x: string]: any;
55
+ } | null | undefined)[] | {
56
+ [x: string]: any;
57
+ } | null | undefined)[] | {
58
+ [x: string]: any;
59
+ } | null | undefined)[] | {
60
+ [x: string]: any;
61
+ } | null | undefined)[] | {
62
+ [x: string]: any;
63
+ } | null | undefined)[] | {
64
+ [x: string]: any;
65
+ } | null | undefined)[] | {
66
+ [x: string]: any;
67
+ } | null | undefined;
68
+ })) | undefined) => string;
69
+ type ButtonOrLinkProps = (React.ComponentPropsWithoutRef<'button'> & {
70
+ href?: never;
71
+ }) | (React.ComponentPropsWithoutRef<'a'> & {
72
+ href: string;
73
+ });
74
+ type ButtonProps = VariantProps<typeof buttonVariants> & {
75
+ className?: string;
76
+ children: React.ReactNode;
77
+ /**
78
+ * Display the button in a loading state
79
+ * @default false
80
+ */
81
+ isLoading?: boolean;
82
+ style?: React.CSSProperties;
83
+ } & ButtonOrLinkProps;
84
+ declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
85
+
86
+ type CheckboxProps = {
87
+ children: React.ReactNode;
88
+ /** Additional CSS className for the element. */
89
+ className?: string;
90
+ /** Help text for the form control. */
91
+ description?: React.ReactNode;
92
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
93
+ errorMessage?: React.ReactNode;
94
+ /** Additional style properties for the element. */
95
+ style?: React.CSSProperties;
96
+ } & Omit<CheckboxProps$1, 'isDisabled' | 'style' | 'children' | 'isIndeterminate' | 'isReadOnly'>;
97
+ declare const _Checkbox: react.ForwardRefExoticComponent<{
98
+ children: React.ReactNode;
99
+ /** Additional CSS className for the element. */
100
+ className?: string | undefined;
101
+ /** Help text for the form control. */
102
+ description?: React.ReactNode;
103
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
104
+ errorMessage?: React.ReactNode;
105
+ /** Additional style properties for the element. */
106
+ style?: react.CSSProperties | undefined;
107
+ } & Omit<CheckboxProps$1, "style" | "children" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
108
+
109
+ type CheckboxGroupProps = {
110
+ children: React.ReactNode;
111
+ /** Additional CSS className for the element. */
112
+ className?: string;
113
+ /** Help text for the form control. */
114
+ description?: React.ReactNode;
115
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
116
+ errorMessage?: React.ReactNode;
117
+ /** Label for the form control. */
118
+ label?: React.ReactNode;
119
+ /** Additional style properties for the element. */
120
+ style?: React.CSSProperties;
121
+ } & Omit<CheckboxGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
122
+ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
123
+ children: React.ReactNode;
124
+ /** Additional CSS className for the element. */
125
+ className?: string | undefined;
126
+ /** Help text for the form control. */
127
+ description?: React.ReactNode;
128
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
129
+ errorMessage?: React.ReactNode;
130
+ /** Label for the form control. */
131
+ label?: React.ReactNode;
132
+ /** Additional style properties for the element. */
133
+ style?: react.CSSProperties | undefined;
134
+ } & Omit<CheckboxGroupProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
135
+
136
+ type ComboboxProps<T extends object> = {
137
+ children: React.ReactNode;
138
+ /** Additional CSS className for the element. */
139
+ className?: string;
140
+ /** Help text for the form control. */
141
+ description?: React.ReactNode;
142
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
143
+ errorMessage?: React.ReactNode;
144
+ /**
145
+ * Display the dropdown button trigger in a loading state
146
+ * @default false
147
+ */
148
+ isLoading?: boolean;
149
+ /** Label for the form control. */
150
+ label?: React.ReactNode;
151
+ /** Placeholder text. Only visible when the input value is empty. */
152
+ placeholder?: string;
153
+ /** Additional style properties for the element. */
154
+ style?: React.CSSProperties;
155
+ } & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
156
+ declare const ComboboxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
157
+ declare const _Combobox: react.ForwardRefExoticComponent<{
158
+ children: React.ReactNode;
159
+ /** Additional CSS className for the element. */
160
+ className?: string | undefined;
161
+ /** Help text for the form control. */
162
+ description?: React.ReactNode;
163
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
164
+ errorMessage?: React.ReactNode;
165
+ /**
166
+ * Display the dropdown button trigger in a loading state
167
+ * @default false
168
+ */
169
+ isLoading?: boolean | undefined;
170
+ /** Label for the form control. */
171
+ label?: React.ReactNode;
172
+ /** Placeholder text. Only visible when the input value is empty. */
173
+ placeholder?: string | undefined;
174
+ /** Additional style properties for the element. */
175
+ style?: react.CSSProperties | undefined;
176
+ } & Omit<ComboBoxProps<object>, "className" | "style" | "children" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
177
+
178
+ type RadioGroupProps = {
179
+ children: React.ReactNode;
180
+ /** Additional CSS className for the element. */
181
+ className?: string;
182
+ /** Help text for the form control. */
183
+ description?: React.ReactNode;
184
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
185
+ errorMessage?: React.ReactNode;
186
+ /** Label for the form control. */
187
+ label?: React.ReactNode;
188
+ /** Additional style properties for the element. */
189
+ style?: React.CSSProperties;
190
+ } & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
191
+ declare const _RadioGroup: react.ForwardRefExoticComponent<{
192
+ children: React.ReactNode;
193
+ /** Additional CSS className for the element. */
194
+ className?: string | undefined;
195
+ /** Help text for the form control. */
196
+ description?: React.ReactNode;
197
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
198
+ errorMessage?: React.ReactNode;
199
+ /** Label for the form control. */
200
+ label?: React.ReactNode;
201
+ /** Additional style properties for the element. */
202
+ style?: react.CSSProperties | undefined;
203
+ } & Omit<RadioGroupProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
204
+
205
+ type RadioProps = {
206
+ children: React.ReactNode;
207
+ /** Additional CSS className for the element. */
208
+ className?: string;
209
+ /** Help text for the form control. */
210
+ description?: React.ReactNode;
211
+ /** Additional style properties for the element. */
212
+ style?: React.CSSProperties;
213
+ } & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
214
+ declare const _Radio: react.ForwardRefExoticComponent<{
215
+ children: React.ReactNode;
216
+ /** Additional CSS className for the element. */
217
+ className?: string | undefined;
218
+ /** Help text for the form control. */
219
+ description?: React.ReactNode;
220
+ /** Additional style properties for the element. */
221
+ style?: react.CSSProperties | undefined;
222
+ } & Omit<RadioProps$1, "style" | "children" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
223
+
224
+ type SelectProps<T extends object> = {
225
+ children: React.ReactNode;
226
+ /** Additional CSS className for the element. */
227
+ className?: string;
228
+ /** Help text for the form control. */
229
+ description?: React.ReactNode;
230
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
231
+ errorMessage?: React.ReactNode;
232
+ /** Label for the form control. */
233
+ label?: React.ReactNode;
234
+ /** Placeholder text. Only visible when the input value is empty. */
235
+ placeholder?: string;
236
+ /** Additional style properties for the element. */
237
+ style?: React.CSSProperties;
238
+ } & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
239
+ declare const SelectItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
240
+ declare const _Select: react.ForwardRefExoticComponent<{
241
+ children: React.ReactNode;
242
+ /** Additional CSS className for the element. */
243
+ className?: string | undefined;
244
+ /** Help text for the form control. */
245
+ description?: React.ReactNode;
246
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
247
+ errorMessage?: React.ReactNode;
248
+ /** Label for the form control. */
249
+ label?: React.ReactNode;
250
+ /** Placeholder text. Only visible when the input value is empty. */
251
+ placeholder?: string | undefined;
252
+ /** Additional style properties for the element. */
253
+ style?: react.CSSProperties | undefined;
254
+ } & Omit<SelectProps$1<object>, "className" | "style" | "children" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
255
+
256
+ type TextAreaProps = {
257
+ /** Additional CSS className for the element. */
258
+ className?: string;
259
+ /** Help text for the form control. */
260
+ description?: React.ReactNode;
261
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
262
+ errorMessage?: React.ReactNode;
263
+ /** Label for the form control. */
264
+ label?: React.ReactNode;
265
+ /** Placeholder text. Only visible when the input value is empty. */
266
+ placeholder?: string;
267
+ /** Additional style properties for the element. */
268
+ style?: React.CSSProperties;
269
+ /**
270
+ * The number of visible text lines for the control.
271
+ * @default 2
272
+ */
273
+ rows?: number;
274
+ } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
275
+ declare const _TextArea: react.ForwardRefExoticComponent<{
276
+ /** Additional CSS className for the element. */
277
+ className?: string | undefined;
278
+ /** Help text for the form control. */
279
+ description?: React.ReactNode;
280
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
281
+ errorMessage?: React.ReactNode;
282
+ /** Label for the form control. */
283
+ label?: React.ReactNode;
284
+ /** Placeholder text. Only visible when the input value is empty. */
285
+ placeholder?: string | undefined;
286
+ /** Additional style properties for the element. */
287
+ style?: react.CSSProperties | undefined;
288
+ /**
289
+ * The number of visible text lines for the control.
290
+ * @default 2
291
+ */
292
+ rows?: number | undefined;
293
+ } & Omit<TextFieldProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
294
+
295
+ type TextFieldProps = {
296
+ /** Additional CSS className for the element. */
297
+ className?: string;
298
+ /** Help text for the form control. */
299
+ description?: React.ReactNode;
300
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
301
+ errorMessage?: React.ReactNode;
302
+ /** Element to be rendered in the left side of the input. */
303
+ leftAddon?: React.ReactNode;
304
+ /** Label for the form control. */
305
+ label?: React.ReactNode;
306
+ /** Element to be rendered in the right side of the input. */
307
+ rightAddon?: React.ReactNode;
308
+ /** Placeholder text. Only visible when the input value is empty. */
309
+ placeholder?: string;
310
+ /**
311
+ * Text alignment of the input
312
+ * @default left
313
+ */
314
+ textAlign?: 'left' | 'right';
315
+ /** Additional style properties for the element. */
316
+ style?: React.CSSProperties;
317
+ /** Add a divider between the left/right addons and the input */
318
+ withAddonDivider?: boolean;
319
+ } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
320
+ declare const _TextField: react.ForwardRefExoticComponent<{
321
+ /** Additional CSS className for the element. */
322
+ className?: string | undefined;
323
+ /** Help text for the form control. */
324
+ description?: React.ReactNode;
325
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
326
+ errorMessage?: React.ReactNode;
327
+ /** Element to be rendered in the left side of the input. */
328
+ leftAddon?: React.ReactNode;
329
+ /** Label for the form control. */
330
+ label?: React.ReactNode;
331
+ /** Element to be rendered in the right side of the input. */
332
+ rightAddon?: React.ReactNode;
333
+ /** Placeholder text. Only visible when the input value is empty. */
334
+ placeholder?: string | undefined;
335
+ /**
336
+ * Text alignment of the input
337
+ * @default left
338
+ */
339
+ textAlign?: "left" | "right" | undefined;
340
+ /** Additional style properties for the element. */
341
+ style?: react.CSSProperties | undefined;
342
+ /** Add a divider between the left/right addons and the input */
343
+ withAddonDivider?: boolean | undefined;
344
+ } & Omit<TextFieldProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
345
+
346
+ type NumberFieldProps = {
347
+ /** Additional CSS className for the element. */
348
+ className?: string;
349
+ /** Help text for the form control. */
350
+ description?: React.ReactNode;
351
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
352
+ errorMessage?: React.ReactNode;
353
+ /** Element to be rendered in the left side of the input. */
354
+ leftAddon?: React.ReactNode;
355
+ /** Label for the form control. */
356
+ label?: React.ReactNode;
357
+ /** Element to be rendered in the right side of the input. */
358
+ rightAddon?: React.ReactNode;
359
+ /** Placeholder text. Only visible when the input value is empty. */
360
+ placeholder?: string;
361
+ /**
362
+ * Text alignment of the input
363
+ * @default left
364
+ */
365
+ textAlign?: 'left' | 'right';
366
+ /** Additional style properties for the element. */
367
+ style?: React.CSSProperties;
368
+ /** Add a divider between the left/right addons and the input */
369
+ withAddonDivider?: boolean;
370
+ } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
371
+ declare const _NumberField: react.ForwardRefExoticComponent<{
372
+ /** Additional CSS className for the element. */
373
+ className?: string | undefined;
374
+ /** Help text for the form control. */
375
+ description?: React.ReactNode;
376
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
377
+ errorMessage?: React.ReactNode;
378
+ /** Element to be rendered in the left side of the input. */
379
+ leftAddon?: React.ReactNode;
380
+ /** Label for the form control. */
381
+ label?: React.ReactNode;
382
+ /** Element to be rendered in the right side of the input. */
383
+ rightAddon?: React.ReactNode;
384
+ /** Placeholder text. Only visible when the input value is empty. */
385
+ placeholder?: string | undefined;
386
+ /**
387
+ * Text alignment of the input
388
+ * @default left
389
+ */
390
+ textAlign?: "left" | "right" | undefined;
391
+ /** Additional style properties for the element. */
392
+ style?: react.CSSProperties | undefined;
393
+ /** Add a divider between the left/right addons and the input */
394
+ withAddonDivider?: boolean | undefined;
395
+ } & Omit<NumberFieldProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
396
+
397
+ export { _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ComboboxItem, type ComboboxProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };