@obosbbl/grunnmuren-react 2.0.0-canary.3 → 2.0.0-canary.30
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/README.md +111 -9
- package/dist/index.d.mts +401 -15
- package/dist/index.mjs +527 -126
- package/package.json +4 -2
- package/dist/useClientLayoutEffect-client-2_5nawgR.js +0 -9
package/README.md
CHANGED
|
@@ -14,20 +14,35 @@ npm install @obosbbl/grunnmuren-react@canary
|
|
|
14
14
|
pnpm add @obosbbl/grunnmuren-react@canary
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
##
|
|
17
|
+
## Setup
|
|
18
|
+
|
|
19
|
+
### Internationalization
|
|
18
20
|
|
|
19
21
|
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
22
|
|
|
21
|
-
To ensure that the language of the page content matches the accessibility strings you
|
|
23
|
+
To ensure that the language of the page content matches the accessibility strings you must wrap your application in a `GrunnmurenProvider` with a `locale` prop. This will override RAC's automatic locale selection.
|
|
22
24
|
|
|
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).
|
|
25
|
+
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). In order to avoid making `RootLayout` a client component, you should import `GrunnmurenProvider` in a providers-file, that uses `"use client"`
|
|
24
26
|
|
|
25
|
-
Valid locales
|
|
27
|
+
Valid locales are `nb`, `sv` or `en`. The provider defaults to `nb` if unspecified.
|
|
26
28
|
|
|
27
29
|
```js
|
|
28
|
-
// app/
|
|
29
|
-
|
|
30
|
+
// app/providers.tsx
|
|
31
|
+
'use client'
|
|
32
|
+
import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
|
|
33
|
+
|
|
34
|
+
export function Providers({children, locale}: { children: React.ReactNode, locale: 'nb' | 'sv' | 'en'}) {
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<GrunnmurenProvider locale={locale}>
|
|
38
|
+
{children}
|
|
39
|
+
</GrunnmurenProvider>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
```
|
|
30
43
|
|
|
44
|
+
```js
|
|
45
|
+
// app/layout.tsx
|
|
31
46
|
|
|
32
47
|
export default function RootLayout({
|
|
33
48
|
children,
|
|
@@ -35,21 +50,108 @@ export default function RootLayout({
|
|
|
35
50
|
children: React.ReactNode
|
|
36
51
|
}) {
|
|
37
52
|
|
|
38
|
-
// Either 'nb' or '
|
|
53
|
+
// Either 'nb', 'sv' or 'en'
|
|
39
54
|
const locale = 'nb';
|
|
40
55
|
|
|
41
56
|
return (
|
|
42
|
-
<
|
|
57
|
+
<Providers locale={locale}>
|
|
43
58
|
<html lang={locale}>
|
|
44
59
|
<body>{children}</body>
|
|
45
60
|
</html>
|
|
46
|
-
</
|
|
61
|
+
</Providers>
|
|
47
62
|
)
|
|
48
63
|
}
|
|
49
64
|
```
|
|
50
65
|
|
|
51
66
|
See the [RAC internationalization docs](https://react-spectrum.adobe.com/react-aria/internationalization.html) for more information.
|
|
52
67
|
|
|
68
|
+
### Routing
|
|
69
|
+
|
|
70
|
+
When using compontents that include links from RAC (For example `Breadcrumbs`), the links will always treat the hrefs as external.
|
|
71
|
+
|
|
72
|
+
In order to avoid hard refreshing, you need to prop your router navigation-function
|
|
73
|
+
through `GrunnmurenProvider`. See the [RAC routing docs](https://react-spectrum.adobe.com/react-aria/routing.html)
|
|
74
|
+
|
|
75
|
+
In [Next.js](https://nextjs.org/) this is also done in the root [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required). In order to avoid making `RootLayout` a client component, you should import `GrunnmurenProvider` in a providers-file, that uses `"use client"`
|
|
76
|
+
|
|
77
|
+
```js
|
|
78
|
+
// app/providers.tsx
|
|
79
|
+
'use client'
|
|
80
|
+
import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
|
|
81
|
+
import { useRouter } from 'next/navigation';
|
|
82
|
+
|
|
83
|
+
export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
|
|
84
|
+
let router = useRouter();
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<GrunnmurenProvider locale={locale} navigate={router.push}>
|
|
88
|
+
{children}
|
|
89
|
+
</GrunnmurenProvider>
|
|
90
|
+
)
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
The `RootLayout` file then looks exactly like it does in the previous step:
|
|
95
|
+
|
|
96
|
+
```js
|
|
97
|
+
// app/layout.tsx
|
|
98
|
+
import {Providers} from "./providers";
|
|
99
|
+
|
|
100
|
+
export default function RootLayout({
|
|
101
|
+
children,
|
|
102
|
+
}: {
|
|
103
|
+
children: React.ReactNode
|
|
104
|
+
}) {
|
|
105
|
+
|
|
106
|
+
// Either 'nb', 'sv' or 'en'
|
|
107
|
+
const locale = 'nb';
|
|
108
|
+
|
|
109
|
+
return (
|
|
110
|
+
<Providers locale={locale}>
|
|
111
|
+
<html lang={locale}>
|
|
112
|
+
<body>{children}</body>
|
|
113
|
+
</html>
|
|
114
|
+
</Providers>
|
|
115
|
+
)
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Optimize bundle size by removing unused locales
|
|
120
|
+
|
|
121
|
+
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:
|
|
122
|
+
|
|
123
|
+
#### Install
|
|
124
|
+
|
|
125
|
+
```sh
|
|
126
|
+
# npm
|
|
127
|
+
npm install @react-aria/optimize-locales-plugin --save-dev
|
|
128
|
+
|
|
129
|
+
# pnpm
|
|
130
|
+
pnpm add -D @react-aria/optimize-locales-plugin
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
#### Configuration
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
// next.config.js
|
|
137
|
+
const optimizeLocales = require('@react-aria/optimize-locales-plugin');
|
|
138
|
+
|
|
139
|
+
module.exports = {
|
|
140
|
+
webpack(config) {
|
|
141
|
+
config.plugins.push(
|
|
142
|
+
optimizeLocales.webpack({
|
|
143
|
+
// If you have a multitenant app, include both Norwegian and Swedish
|
|
144
|
+
// If your app only serves one language, adjust accordingly
|
|
145
|
+
locales: ['nb', 'sv'],
|
|
146
|
+
}),
|
|
147
|
+
);
|
|
148
|
+
return config;
|
|
149
|
+
},
|
|
150
|
+
};
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
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.
|
|
154
|
+
|
|
53
155
|
## Usage
|
|
54
156
|
|
|
55
157
|
Before you start using the components you need to configure the [Tailwind preset](../tailwind/). Remember to add this package to the content scan.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,45 @@
|
|
|
1
|
-
import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1,
|
|
2
|
-
export { ListBoxItemProps as ComboboxItemProps, Form,
|
|
1
|
+
import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, LinkProps } from 'react-aria-components';
|
|
2
|
+
export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import * as react from 'react';
|
|
5
|
+
import react__default, { HTMLProps, ForwardedRef } from 'react';
|
|
4
6
|
import { VariantProps } from 'cva';
|
|
5
7
|
|
|
8
|
+
type GrunnmurenProviderProps = {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* The locale to apply to the children.
|
|
12
|
+
* @default nb
|
|
13
|
+
*/
|
|
14
|
+
locale?: 'nb' | 'sv' | 'en';
|
|
15
|
+
/** The router to use for navigation */
|
|
16
|
+
navigate?: (path: string) => void;
|
|
17
|
+
};
|
|
18
|
+
declare function GrunnmurenProvider({ children, locale, navigate, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
type AccordionProps = {
|
|
21
|
+
children: react__default.ReactNode;
|
|
22
|
+
/** Additional CSS className for the element. */
|
|
23
|
+
className?: string;
|
|
24
|
+
/** Additional style properties for the element. */
|
|
25
|
+
style?: react__default.CSSProperties;
|
|
26
|
+
};
|
|
27
|
+
type AccordionItemProps = {
|
|
28
|
+
children?: react__default.ReactNode;
|
|
29
|
+
/** Additional CSS className for the element. */
|
|
30
|
+
className?: string;
|
|
31
|
+
/** Additional style properties for the element. */
|
|
32
|
+
style?: react__default.CSSProperties;
|
|
33
|
+
/** Whether the accordion is open (controlled) */
|
|
34
|
+
isOpen?: boolean;
|
|
35
|
+
/** Whether the accordion is open by default (uncontrolled) */
|
|
36
|
+
defaultOpen?: boolean;
|
|
37
|
+
/** Handler that is called when the accordion's open state changes */
|
|
38
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
39
|
+
};
|
|
40
|
+
declare const _Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
|
|
41
|
+
declare const _AccordionItem: react__default.ForwardRefExoticComponent<AccordionItemProps & react__default.RefAttributes<HTMLDivElement>>;
|
|
42
|
+
|
|
6
43
|
/**
|
|
7
44
|
* Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
|
|
8
45
|
*/
|
|
@@ -80,7 +117,7 @@ type ButtonProps = VariantProps<typeof buttonVariants> & {
|
|
|
80
117
|
isLoading?: boolean;
|
|
81
118
|
style?: React.CSSProperties;
|
|
82
119
|
} & ButtonOrLinkProps;
|
|
83
|
-
declare
|
|
120
|
+
declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
84
121
|
|
|
85
122
|
type CheckboxProps = {
|
|
86
123
|
children: React.ReactNode;
|
|
@@ -93,7 +130,17 @@ type CheckboxProps = {
|
|
|
93
130
|
/** Additional style properties for the element. */
|
|
94
131
|
style?: React.CSSProperties;
|
|
95
132
|
} & Omit<CheckboxProps$1, 'isDisabled' | 'style' | 'children' | 'isIndeterminate' | 'isReadOnly'>;
|
|
96
|
-
declare
|
|
133
|
+
declare const _Checkbox: react.ForwardRefExoticComponent<{
|
|
134
|
+
children: React.ReactNode;
|
|
135
|
+
/** Additional CSS className for the element. */
|
|
136
|
+
className?: string | undefined;
|
|
137
|
+
/** Help text for the form control. */
|
|
138
|
+
description?: React.ReactNode;
|
|
139
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
140
|
+
errorMessage?: React.ReactNode;
|
|
141
|
+
/** Additional style properties for the element. */
|
|
142
|
+
style?: react.CSSProperties | undefined;
|
|
143
|
+
} & Omit<CheckboxProps$1, "children" | "style" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
|
|
97
144
|
|
|
98
145
|
type CheckboxGroupProps = {
|
|
99
146
|
children: React.ReactNode;
|
|
@@ -108,7 +155,21 @@ type CheckboxGroupProps = {
|
|
|
108
155
|
/** Additional style properties for the element. */
|
|
109
156
|
style?: React.CSSProperties;
|
|
110
157
|
} & Omit<CheckboxGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
|
|
111
|
-
declare
|
|
158
|
+
declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
|
|
159
|
+
children: React.ReactNode;
|
|
160
|
+
/** Additional CSS className for the element. */
|
|
161
|
+
className?: string | undefined;
|
|
162
|
+
/** Help text for the form control. */
|
|
163
|
+
description?: React.ReactNode;
|
|
164
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
165
|
+
errorMessage?: React.ReactNode;
|
|
166
|
+
/** Label for the form control. */
|
|
167
|
+
label?: React.ReactNode;
|
|
168
|
+
/** Additional style properties for the element. */
|
|
169
|
+
style?: react.CSSProperties | undefined;
|
|
170
|
+
} & Omit<CheckboxGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
|
|
171
|
+
|
|
172
|
+
declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
|
|
112
173
|
|
|
113
174
|
type ComboboxProps<T extends object> = {
|
|
114
175
|
children: React.ReactNode;
|
|
@@ -130,8 +191,26 @@ type ComboboxProps<T extends object> = {
|
|
|
130
191
|
/** Additional style properties for the element. */
|
|
131
192
|
style?: React.CSSProperties;
|
|
132
193
|
} & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
133
|
-
declare
|
|
134
|
-
|
|
194
|
+
declare const _Combobox: react.ForwardRefExoticComponent<{
|
|
195
|
+
children: React.ReactNode;
|
|
196
|
+
/** Additional CSS className for the element. */
|
|
197
|
+
className?: string | undefined;
|
|
198
|
+
/** Help text for the form control. */
|
|
199
|
+
description?: React.ReactNode;
|
|
200
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
201
|
+
errorMessage?: React.ReactNode;
|
|
202
|
+
/**
|
|
203
|
+
* Display the dropdown button trigger in a loading state
|
|
204
|
+
* @default false
|
|
205
|
+
*/
|
|
206
|
+
isLoading?: boolean | undefined;
|
|
207
|
+
/** Label for the form control. */
|
|
208
|
+
label?: React.ReactNode;
|
|
209
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
210
|
+
placeholder?: string | undefined;
|
|
211
|
+
/** Additional style properties for the element. */
|
|
212
|
+
style?: react.CSSProperties | undefined;
|
|
213
|
+
} & Omit<ComboBoxProps<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
|
|
135
214
|
|
|
136
215
|
type RadioGroupProps = {
|
|
137
216
|
children: React.ReactNode;
|
|
@@ -146,7 +225,19 @@ type RadioGroupProps = {
|
|
|
146
225
|
/** Additional style properties for the element. */
|
|
147
226
|
style?: React.CSSProperties;
|
|
148
227
|
} & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
|
|
149
|
-
declare
|
|
228
|
+
declare const _RadioGroup: react.ForwardRefExoticComponent<{
|
|
229
|
+
children: React.ReactNode;
|
|
230
|
+
/** Additional CSS className for the element. */
|
|
231
|
+
className?: string | undefined;
|
|
232
|
+
/** Help text for the form control. */
|
|
233
|
+
description?: React.ReactNode;
|
|
234
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
235
|
+
errorMessage?: React.ReactNode;
|
|
236
|
+
/** Label for the form control. */
|
|
237
|
+
label?: React.ReactNode;
|
|
238
|
+
/** Additional style properties for the element. */
|
|
239
|
+
style?: react.CSSProperties | undefined;
|
|
240
|
+
} & Omit<RadioGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
|
|
150
241
|
|
|
151
242
|
type RadioProps = {
|
|
152
243
|
children: React.ReactNode;
|
|
@@ -157,7 +248,15 @@ type RadioProps = {
|
|
|
157
248
|
/** Additional style properties for the element. */
|
|
158
249
|
style?: React.CSSProperties;
|
|
159
250
|
} & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
|
|
160
|
-
declare
|
|
251
|
+
declare const _Radio: react.ForwardRefExoticComponent<{
|
|
252
|
+
children: React.ReactNode;
|
|
253
|
+
/** Additional CSS className for the element. */
|
|
254
|
+
className?: string | undefined;
|
|
255
|
+
/** Help text for the form control. */
|
|
256
|
+
description?: React.ReactNode;
|
|
257
|
+
/** Additional style properties for the element. */
|
|
258
|
+
style?: react.CSSProperties | undefined;
|
|
259
|
+
} & Omit<RadioProps$1, "children" | "style" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
|
|
161
260
|
|
|
162
261
|
type SelectProps<T extends object> = {
|
|
163
262
|
children: React.ReactNode;
|
|
@@ -174,8 +273,21 @@ type SelectProps<T extends object> = {
|
|
|
174
273
|
/** Additional style properties for the element. */
|
|
175
274
|
style?: React.CSSProperties;
|
|
176
275
|
} & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
177
|
-
declare
|
|
178
|
-
|
|
276
|
+
declare const _Select: react.ForwardRefExoticComponent<{
|
|
277
|
+
children: React.ReactNode;
|
|
278
|
+
/** Additional CSS className for the element. */
|
|
279
|
+
className?: string | undefined;
|
|
280
|
+
/** Help text for the form control. */
|
|
281
|
+
description?: React.ReactNode;
|
|
282
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
283
|
+
errorMessage?: React.ReactNode;
|
|
284
|
+
/** Label for the form control. */
|
|
285
|
+
label?: React.ReactNode;
|
|
286
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
287
|
+
placeholder?: string | undefined;
|
|
288
|
+
/** Additional style properties for the element. */
|
|
289
|
+
style?: react.CSSProperties | undefined;
|
|
290
|
+
} & Omit<SelectProps$1<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
|
|
179
291
|
|
|
180
292
|
type TextAreaProps = {
|
|
181
293
|
/** Additional CSS className for the element. */
|
|
@@ -196,7 +308,25 @@ type TextAreaProps = {
|
|
|
196
308
|
*/
|
|
197
309
|
rows?: number;
|
|
198
310
|
} & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
199
|
-
declare
|
|
311
|
+
declare const _TextArea: react.ForwardRefExoticComponent<{
|
|
312
|
+
/** Additional CSS className for the element. */
|
|
313
|
+
className?: string | undefined;
|
|
314
|
+
/** Help text for the form control. */
|
|
315
|
+
description?: React.ReactNode;
|
|
316
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
317
|
+
errorMessage?: React.ReactNode;
|
|
318
|
+
/** Label for the form control. */
|
|
319
|
+
label?: React.ReactNode;
|
|
320
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
321
|
+
placeholder?: string | undefined;
|
|
322
|
+
/** Additional style properties for the element. */
|
|
323
|
+
style?: react.CSSProperties | undefined;
|
|
324
|
+
/**
|
|
325
|
+
* The number of visible text lines for the control.
|
|
326
|
+
* @default 2
|
|
327
|
+
*/
|
|
328
|
+
rows?: number | undefined;
|
|
329
|
+
} & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
200
330
|
|
|
201
331
|
type TextFieldProps = {
|
|
202
332
|
/** Additional CSS className for the element. */
|
|
@@ -220,9 +350,265 @@ type TextFieldProps = {
|
|
|
220
350
|
textAlign?: 'left' | 'right';
|
|
221
351
|
/** Additional style properties for the element. */
|
|
222
352
|
style?: React.CSSProperties;
|
|
223
|
-
/** Add a divider between the left/right addons and the input */
|
|
353
|
+
/** Add a divider between the left/right addons and the input, a value of 0 will be ignored */
|
|
224
354
|
withAddonDivider?: boolean;
|
|
355
|
+
/** Defines the number of characters and determines the width of the input element */
|
|
356
|
+
size?: number;
|
|
225
357
|
} & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
226
|
-
declare
|
|
358
|
+
declare const _TextField: react.ForwardRefExoticComponent<{
|
|
359
|
+
/** Additional CSS className for the element. */
|
|
360
|
+
className?: string | undefined;
|
|
361
|
+
/** Help text for the form control. */
|
|
362
|
+
description?: React.ReactNode;
|
|
363
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
364
|
+
errorMessage?: React.ReactNode;
|
|
365
|
+
/** Element to be rendered in the left side of the input. */
|
|
366
|
+
leftAddon?: React.ReactNode;
|
|
367
|
+
/** Label for the form control. */
|
|
368
|
+
label?: React.ReactNode;
|
|
369
|
+
/** Element to be rendered in the right side of the input. */
|
|
370
|
+
rightAddon?: React.ReactNode;
|
|
371
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
372
|
+
placeholder?: string | undefined;
|
|
373
|
+
/**
|
|
374
|
+
* Text alignment of the input
|
|
375
|
+
* @default left
|
|
376
|
+
*/
|
|
377
|
+
textAlign?: "left" | "right" | undefined;
|
|
378
|
+
/** Additional style properties for the element. */
|
|
379
|
+
style?: react.CSSProperties | undefined;
|
|
380
|
+
/** Add a divider between the left/right addons and the input, a value of 0 will be ignored */
|
|
381
|
+
withAddonDivider?: boolean | undefined;
|
|
382
|
+
/** Defines the number of characters and determines the width of the input element */
|
|
383
|
+
size?: number | undefined;
|
|
384
|
+
} & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
|
|
385
|
+
|
|
386
|
+
type NumberFieldProps = {
|
|
387
|
+
/** Additional CSS className for the element. */
|
|
388
|
+
className?: string;
|
|
389
|
+
/** Help text for the form control. */
|
|
390
|
+
description?: React.ReactNode;
|
|
391
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
392
|
+
errorMessage?: React.ReactNode;
|
|
393
|
+
/** Element to be rendered in the left side of the input. */
|
|
394
|
+
leftAddon?: React.ReactNode;
|
|
395
|
+
/** Label for the form control. */
|
|
396
|
+
label?: React.ReactNode;
|
|
397
|
+
/** Element to be rendered in the right side of the input. */
|
|
398
|
+
rightAddon?: React.ReactNode;
|
|
399
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
400
|
+
placeholder?: string;
|
|
401
|
+
/**
|
|
402
|
+
* Text alignment of the input
|
|
403
|
+
* @default left
|
|
404
|
+
*/
|
|
405
|
+
textAlign?: 'left' | 'right';
|
|
406
|
+
/** Additional style properties for the element. */
|
|
407
|
+
style?: React.CSSProperties;
|
|
408
|
+
/** Add a divider between the left/right addons and the input */
|
|
409
|
+
withAddonDivider?: boolean;
|
|
410
|
+
/** Defines the number of characters and determines the width of the input element, a value of 0 will be ignored */
|
|
411
|
+
size?: number;
|
|
412
|
+
/** Defines the maximum numeric value */
|
|
413
|
+
maxValue?: number;
|
|
414
|
+
/** Defines the minimum numeric value */
|
|
415
|
+
minValue?: number;
|
|
416
|
+
} & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
|
|
417
|
+
declare const _NumberField: react.ForwardRefExoticComponent<{
|
|
418
|
+
/** Additional CSS className for the element. */
|
|
419
|
+
className?: string | undefined;
|
|
420
|
+
/** Help text for the form control. */
|
|
421
|
+
description?: React.ReactNode;
|
|
422
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
423
|
+
errorMessage?: React.ReactNode;
|
|
424
|
+
/** Element to be rendered in the left side of the input. */
|
|
425
|
+
leftAddon?: React.ReactNode;
|
|
426
|
+
/** Label for the form control. */
|
|
427
|
+
label?: React.ReactNode;
|
|
428
|
+
/** Element to be rendered in the right side of the input. */
|
|
429
|
+
rightAddon?: React.ReactNode;
|
|
430
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
431
|
+
placeholder?: string | undefined;
|
|
432
|
+
/**
|
|
433
|
+
* Text alignment of the input
|
|
434
|
+
* @default left
|
|
435
|
+
*/
|
|
436
|
+
textAlign?: "left" | "right" | undefined;
|
|
437
|
+
/** Additional style properties for the element. */
|
|
438
|
+
style?: react.CSSProperties | undefined;
|
|
439
|
+
/** Add a divider between the left/right addons and the input */
|
|
440
|
+
withAddonDivider?: boolean | undefined;
|
|
441
|
+
/** Defines the number of characters and determines the width of the input element, a value of 0 will be ignored */
|
|
442
|
+
size?: number | undefined;
|
|
443
|
+
/** Defines the maximum numeric value */
|
|
444
|
+
maxValue?: number | undefined;
|
|
445
|
+
/** Defines the minimum numeric value */
|
|
446
|
+
minValue?: number | undefined;
|
|
447
|
+
} & Omit<NumberFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
|
|
448
|
+
|
|
449
|
+
declare const alertVariants: (props?: ({
|
|
450
|
+
variant?: "info" | "success" | "warning" | "danger" | undefined;
|
|
451
|
+
} & ({
|
|
452
|
+
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 | {
|
|
453
|
+
[x: string]: any;
|
|
454
|
+
} | null | undefined)[] | {
|
|
455
|
+
[x: string]: any;
|
|
456
|
+
} | null | undefined)[] | {
|
|
457
|
+
[x: string]: any;
|
|
458
|
+
} | null | undefined)[] | {
|
|
459
|
+
[x: string]: any;
|
|
460
|
+
} | null | undefined)[] | {
|
|
461
|
+
[x: string]: any;
|
|
462
|
+
} | null | undefined)[] | {
|
|
463
|
+
[x: string]: any;
|
|
464
|
+
} | null | undefined)[] | {
|
|
465
|
+
[x: string]: any;
|
|
466
|
+
} | null | undefined)[] | {
|
|
467
|
+
[x: string]: any;
|
|
468
|
+
} | null | undefined)[] | {
|
|
469
|
+
[x: string]: any;
|
|
470
|
+
} | null | undefined)[] | {
|
|
471
|
+
[x: string]: any;
|
|
472
|
+
} | null | undefined)[] | {
|
|
473
|
+
[x: string]: any;
|
|
474
|
+
} | null | undefined)[] | {
|
|
475
|
+
[x: string]: any;
|
|
476
|
+
} | null | undefined;
|
|
477
|
+
className?: undefined;
|
|
478
|
+
} | {
|
|
479
|
+
class?: undefined;
|
|
480
|
+
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 | {
|
|
481
|
+
[x: string]: any;
|
|
482
|
+
} | null | undefined)[] | {
|
|
483
|
+
[x: string]: any;
|
|
484
|
+
} | null | undefined)[] | {
|
|
485
|
+
[x: string]: any;
|
|
486
|
+
} | null | undefined)[] | {
|
|
487
|
+
[x: string]: any;
|
|
488
|
+
} | null | undefined)[] | {
|
|
489
|
+
[x: string]: any;
|
|
490
|
+
} | null | undefined)[] | {
|
|
491
|
+
[x: string]: any;
|
|
492
|
+
} | null | undefined)[] | {
|
|
493
|
+
[x: string]: any;
|
|
494
|
+
} | null | undefined)[] | {
|
|
495
|
+
[x: string]: any;
|
|
496
|
+
} | null | undefined)[] | {
|
|
497
|
+
[x: string]: any;
|
|
498
|
+
} | null | undefined)[] | {
|
|
499
|
+
[x: string]: any;
|
|
500
|
+
} | null | undefined)[] | {
|
|
501
|
+
[x: string]: any;
|
|
502
|
+
} | null | undefined)[] | {
|
|
503
|
+
[x: string]: any;
|
|
504
|
+
} | null | undefined;
|
|
505
|
+
})) | undefined) => string;
|
|
506
|
+
type Props = VariantProps<typeof alertVariants> & {
|
|
507
|
+
children: React.ReactNode;
|
|
508
|
+
/**
|
|
509
|
+
* The ARIA role for the alertbox.
|
|
510
|
+
*/
|
|
511
|
+
role: 'alert' | 'status' | 'none';
|
|
512
|
+
/** Additional CSS className for the element. */
|
|
513
|
+
className?: string;
|
|
514
|
+
/**
|
|
515
|
+
* Controls if the alert is expandable or not
|
|
516
|
+
* @default false
|
|
517
|
+
*/
|
|
518
|
+
isExpandable?: boolean;
|
|
519
|
+
/**
|
|
520
|
+
* Controls if the alert can be dismissed with a close button.
|
|
521
|
+
* @default false
|
|
522
|
+
*/
|
|
523
|
+
isDismissable?: boolean;
|
|
524
|
+
/**
|
|
525
|
+
* Controls if the alert is rendered or not.
|
|
526
|
+
* This is used to control the open/closed state of the component; make the component "controlled".
|
|
527
|
+
* @default false
|
|
528
|
+
*/
|
|
529
|
+
isDismissed?: boolean;
|
|
530
|
+
/**
|
|
531
|
+
* Callback that should be triggered when a dismissable alert is closed.
|
|
532
|
+
* This is used to control the open/closed state of the component; make the component "controlled".
|
|
533
|
+
*/
|
|
534
|
+
onDismiss?: () => void;
|
|
535
|
+
};
|
|
536
|
+
declare const Alertbox: ({ children, role, className, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
|
|
537
|
+
|
|
538
|
+
type HeadingProps = HTMLProps<HTMLHeadingElement> & {
|
|
539
|
+
children?: React.ReactNode;
|
|
540
|
+
/** The level of the heading */
|
|
541
|
+
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
542
|
+
/** @private Used internally for slotted components */
|
|
543
|
+
_innerWrapper?: (children: React.ReactNode) => React.ReactNode;
|
|
544
|
+
};
|
|
545
|
+
declare const HeadingContext: react.Context<ContextValue<HeadingProps, HTMLHeadingElement>>;
|
|
546
|
+
declare const Heading: (props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
|
|
547
|
+
declare const ContentContext: react.Context<ContextValue<ContentProps, HTMLDivElement>>;
|
|
548
|
+
type ContentProps = HTMLProps<HTMLDivElement> & {
|
|
549
|
+
children: React.ReactNode;
|
|
550
|
+
/** @private Used internally for slotted components */
|
|
551
|
+
_outerWrapper?: (children: React.ReactNode) => React.ReactNode;
|
|
552
|
+
};
|
|
553
|
+
declare const Content: (props: ContentProps, ref: ForwardedRef<HTMLDivElement>) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
554
|
+
type FooterProps = HTMLProps<HTMLDivElement> & {
|
|
555
|
+
children: React.ReactNode;
|
|
556
|
+
};
|
|
557
|
+
declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
|
|
558
|
+
|
|
559
|
+
type BreadcrumbProps = {
|
|
560
|
+
/** Additional CSS className for the element. */
|
|
561
|
+
className?: string;
|
|
562
|
+
/** Additional style properties for the element. */
|
|
563
|
+
style?: React.CSSProperties;
|
|
564
|
+
/** The URL to navigate to when clicking the breadcrumb. */
|
|
565
|
+
href?: string;
|
|
566
|
+
} & Omit<BreadcrumbProps$1, 'className' | 'style'>;
|
|
567
|
+
declare const _Breadcrumb: react.ForwardRefExoticComponent<{
|
|
568
|
+
/** Additional CSS className for the element. */
|
|
569
|
+
className?: string | undefined;
|
|
570
|
+
/** Additional style properties for the element. */
|
|
571
|
+
style?: react.CSSProperties | undefined;
|
|
572
|
+
/** The URL to navigate to when clicking the breadcrumb. */
|
|
573
|
+
href?: string | undefined;
|
|
574
|
+
} & Omit<BreadcrumbProps$1, "className" | "style"> & react.RefAttributes<HTMLLIElement>>;
|
|
575
|
+
|
|
576
|
+
type BreadcrumbsProps = {
|
|
577
|
+
/** Additional CSS className for the element. */
|
|
578
|
+
className?: string;
|
|
579
|
+
/** Additional style properties for the element. */
|
|
580
|
+
style?: React.CSSProperties;
|
|
581
|
+
} & Omit<BreadcrumbsProps$1<BreadcrumbProps>, 'className' | 'style'>;
|
|
582
|
+
declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
|
|
583
|
+
/** Additional CSS className for the element. */
|
|
584
|
+
className?: string | undefined;
|
|
585
|
+
/** Additional style properties for the element. */
|
|
586
|
+
style?: react.CSSProperties | undefined;
|
|
587
|
+
} & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
|
|
588
|
+
|
|
589
|
+
type BacklinkProps = {
|
|
590
|
+
/** Additional CSS className for the element. */
|
|
591
|
+
className?: string;
|
|
592
|
+
/** The URL to navigate to when clicking the backlink. */
|
|
593
|
+
href?: string;
|
|
594
|
+
/** The content of the link */
|
|
595
|
+
children?: React.ReactNode;
|
|
596
|
+
/** To add a permanent underline on the link (not only on hover)
|
|
597
|
+
* @default false
|
|
598
|
+
*/
|
|
599
|
+
withUnderline?: boolean;
|
|
600
|
+
} & LinkProps;
|
|
601
|
+
declare const _Backlink: react.ForwardRefExoticComponent<{
|
|
602
|
+
/** Additional CSS className for the element. */
|
|
603
|
+
className?: string | undefined;
|
|
604
|
+
/** The URL to navigate to when clicking the backlink. */
|
|
605
|
+
href?: string | undefined;
|
|
606
|
+
/** The content of the link */
|
|
607
|
+
children?: React.ReactNode;
|
|
608
|
+
/** To add a permanent underline on the link (not only on hover)
|
|
609
|
+
* @default false
|
|
610
|
+
*/
|
|
611
|
+
withUnderline?: boolean | undefined;
|
|
612
|
+
} & LinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
227
613
|
|
|
228
|
-
export { Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ComboboxItem, type ComboboxProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, SelectItem, type SelectProps, TextArea, type TextAreaProps, TextField, type TextFieldProps };
|
|
614
|
+
export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, ContentContext, type ContentProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxItem as SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };
|