@obosbbl/grunnmuren-react 2.0.0 → 2.0.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.
- package/README.md +211 -0
- package/dist/index.d.mts +596 -0
- package/dist/index.mjs +1945 -0
- package/package.json +23 -21
- package/dist/Button/Button.d.mts +0 -71
- package/dist/Button/Button.d.ts +0 -71
- package/dist/Button/Button.mjs +0 -86
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,596 @@
|
|
|
1
|
+
import { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ListBoxSectionProps, HeadingProps as HeadingProps$1, 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, DisclosureProps as DisclosureProps$1, FileTriggerProps as FileTriggerProps$1, TextProps, LabelProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, DialogProps as DialogProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components';
|
|
2
|
+
export { ListBoxItemProps as ComboboxItemProps, Form, LabelProps, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import * as react from 'react';
|
|
5
|
+
import { Ref, HTMLProps, ReactNode, RefAttributes, HTMLAttributes, RefObject, Dispatch, SetStateAction, ComponentProps } from 'react';
|
|
6
|
+
import * as cva from 'cva';
|
|
7
|
+
import { VariantProps } from 'cva';
|
|
8
|
+
import { DateFormatterOptions } from 'react-aria';
|
|
9
|
+
import { DisclosureState } from 'react-stately';
|
|
10
|
+
import { FormValidationProps } from '@react-stately/form';
|
|
11
|
+
|
|
12
|
+
type Locale = 'nb' | 'sv' | 'en';
|
|
13
|
+
/**
|
|
14
|
+
* Returns the locale set in `<GrunnmurenProvider />`
|
|
15
|
+
*/
|
|
16
|
+
declare function _useLocale(): Locale;
|
|
17
|
+
|
|
18
|
+
type RouterProviderProps = React.ComponentProps<typeof RouterProvider>;
|
|
19
|
+
type GrunnmurenProviderProps = {
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* The locale to apply to the children.
|
|
23
|
+
* @default nb
|
|
24
|
+
*/
|
|
25
|
+
locale?: Locale;
|
|
26
|
+
/** The router to use for client side navigation */
|
|
27
|
+
navigate?: RouterProviderProps['navigate'];
|
|
28
|
+
/** Converts a router-specific href to a native HTML href, e.g. prepending a base path */
|
|
29
|
+
useHref?: RouterProviderProps['useHref'];
|
|
30
|
+
};
|
|
31
|
+
declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
|
|
32
|
+
|
|
33
|
+
type AccordionProps = {
|
|
34
|
+
children: React.ReactNode;
|
|
35
|
+
/** Additional CSS className for the element. */
|
|
36
|
+
className?: string;
|
|
37
|
+
/** Additional style properties for the element. */
|
|
38
|
+
style?: React.CSSProperties;
|
|
39
|
+
/** Ref to the element. */
|
|
40
|
+
ref?: Ref<HTMLDivElement>;
|
|
41
|
+
};
|
|
42
|
+
type AccordionItemProps = {
|
|
43
|
+
children?: React.ReactNode;
|
|
44
|
+
/** Additional CSS className for the element. */
|
|
45
|
+
className?: string;
|
|
46
|
+
/** Additional style properties for the element. */
|
|
47
|
+
style?: React.CSSProperties;
|
|
48
|
+
/** Whether the accordion is open (controlled) */
|
|
49
|
+
isOpen?: boolean;
|
|
50
|
+
/** Whether the accordion is open by default (uncontrolled) */
|
|
51
|
+
defaultOpen?: boolean;
|
|
52
|
+
/** Handler that is called when the accordion's open state changes */
|
|
53
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
54
|
+
ref?: Ref<HTMLDivElement>;
|
|
55
|
+
};
|
|
56
|
+
declare function Accordion(props: AccordionProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
declare function AccordionItem(props: AccordionItemProps): react_jsx_runtime.JSX.Element;
|
|
58
|
+
|
|
59
|
+
type BadgeProps = VariantProps<typeof badgeVariants> & {
|
|
60
|
+
children?: React.ReactNode;
|
|
61
|
+
/** Additional CSS className for the element. */
|
|
62
|
+
className?: string;
|
|
63
|
+
/** Ref to the element. */
|
|
64
|
+
ref?: Ref<HTMLSpanElement>;
|
|
65
|
+
};
|
|
66
|
+
declare const badgeVariants: (props?: ({
|
|
67
|
+
color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
|
|
68
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
69
|
+
} & ({
|
|
70
|
+
class?: cva.ClassValue;
|
|
71
|
+
className?: never;
|
|
72
|
+
} | {
|
|
73
|
+
class?: never;
|
|
74
|
+
className?: cva.ClassValue;
|
|
75
|
+
})) | undefined) => string;
|
|
76
|
+
declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
|
|
80
|
+
*/
|
|
81
|
+
declare const buttonVariants: (props?: ({
|
|
82
|
+
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
83
|
+
color?: "mint" | "white" | "green" | undefined;
|
|
84
|
+
isIconOnly?: boolean | undefined;
|
|
85
|
+
isPending?: boolean | undefined;
|
|
86
|
+
} & ({
|
|
87
|
+
class?: cva.ClassValue;
|
|
88
|
+
className?: never;
|
|
89
|
+
} | {
|
|
90
|
+
class?: never;
|
|
91
|
+
className?: cva.ClassValue;
|
|
92
|
+
})) | undefined) => string;
|
|
93
|
+
type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
|
|
94
|
+
children?: React.ReactNode;
|
|
95
|
+
href?: LinkProps['href'];
|
|
96
|
+
/**
|
|
97
|
+
* Display the button in a loading state
|
|
98
|
+
* @deprecated Use isPending instead.
|
|
99
|
+
* @default false
|
|
100
|
+
*/
|
|
101
|
+
isLoading?: boolean;
|
|
102
|
+
/** Additional style properties for the element. */
|
|
103
|
+
style?: React.CSSProperties;
|
|
104
|
+
/** Ref to the element. */
|
|
105
|
+
ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
|
|
106
|
+
};
|
|
107
|
+
type ButtonProps = (ButtonProps$1 | LinkProps) & ButtonOrLinkProps$1;
|
|
108
|
+
declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
109
|
+
|
|
110
|
+
type CheckboxProps = {
|
|
111
|
+
children: React.ReactNode;
|
|
112
|
+
/** Additional CSS className for the element. */
|
|
113
|
+
className?: string;
|
|
114
|
+
/** Help text for the form control. */
|
|
115
|
+
description?: React.ReactNode;
|
|
116
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
117
|
+
errorMessage?: React.ReactNode;
|
|
118
|
+
/** Additional style properties for the element. */
|
|
119
|
+
style?: React.CSSProperties;
|
|
120
|
+
/** Ref for the element. */
|
|
121
|
+
ref?: Ref<HTMLLabelElement>;
|
|
122
|
+
} & Omit<CheckboxProps$1, 'isDisabled' | 'style' | 'children' | 'isIndeterminate' | 'isReadOnly'>;
|
|
123
|
+
declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
124
|
+
|
|
125
|
+
type CheckboxGroupProps = {
|
|
126
|
+
children: React.ReactNode;
|
|
127
|
+
/** Additional CSS className for the element. */
|
|
128
|
+
className?: string;
|
|
129
|
+
/** Help text for the form control. */
|
|
130
|
+
description?: React.ReactNode;
|
|
131
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
132
|
+
errorMessage?: React.ReactNode;
|
|
133
|
+
/** Label for the form control. */
|
|
134
|
+
label?: React.ReactNode;
|
|
135
|
+
/** Additional style properties for the element. */
|
|
136
|
+
style?: React.CSSProperties;
|
|
137
|
+
/** Ref to the element. */
|
|
138
|
+
ref?: Ref<HTMLDivElement>;
|
|
139
|
+
} & Omit<CheckboxGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
|
|
140
|
+
declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
|
|
141
|
+
|
|
142
|
+
declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
|
|
143
|
+
/**
|
|
144
|
+
* This component can be used to group items in a listbox
|
|
145
|
+
*/
|
|
146
|
+
declare const ListBoxSection: <T extends object>({ className, ...restProps }: ListBoxSectionProps<T>) => react_jsx_runtime.JSX.Element;
|
|
147
|
+
/**
|
|
148
|
+
* This component can be used to label grouped items in a `ListBoxSection` with a heading
|
|
149
|
+
*/
|
|
150
|
+
declare const ListBoxHeader: (props: HeadingProps$1) => react_jsx_runtime.JSX.Element;
|
|
151
|
+
|
|
152
|
+
type ComboboxProps<T extends object> = {
|
|
153
|
+
children: React.ReactNode;
|
|
154
|
+
/** Additional CSS className for the element. */
|
|
155
|
+
className?: string;
|
|
156
|
+
/** Help text for the form control. */
|
|
157
|
+
description?: React.ReactNode;
|
|
158
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
159
|
+
errorMessage?: React.ReactNode;
|
|
160
|
+
/**
|
|
161
|
+
* Display the dropdown button trigger in a pending state
|
|
162
|
+
* @deprecated Use isPending instead.
|
|
163
|
+
*/
|
|
164
|
+
isLoading?: boolean;
|
|
165
|
+
/**
|
|
166
|
+
* Display the dropdown button trigger in a pending state
|
|
167
|
+
* @default false
|
|
168
|
+
*/
|
|
169
|
+
isPending?: boolean;
|
|
170
|
+
/** Label for the form control. */
|
|
171
|
+
label?: React.ReactNode;
|
|
172
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
173
|
+
placeholder?: string;
|
|
174
|
+
/** Additional style properties for the element. */
|
|
175
|
+
style?: React.CSSProperties;
|
|
176
|
+
/** Ref for the input element. */
|
|
177
|
+
ref?: Ref<HTMLInputElement>;
|
|
178
|
+
} & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
179
|
+
declare function Combobox<T extends object>(props: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
|
|
180
|
+
|
|
181
|
+
type RadioGroupProps = {
|
|
182
|
+
children: React.ReactNode;
|
|
183
|
+
/** Additional CSS className for the element. */
|
|
184
|
+
className?: string;
|
|
185
|
+
/** Help text for the form control. */
|
|
186
|
+
description?: React.ReactNode;
|
|
187
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
188
|
+
errorMessage?: React.ReactNode;
|
|
189
|
+
/** Label for the form control. */
|
|
190
|
+
label?: React.ReactNode;
|
|
191
|
+
/** Additional style properties for the element. */
|
|
192
|
+
style?: React.CSSProperties;
|
|
193
|
+
/** Ref for the element. */
|
|
194
|
+
ref?: Ref<HTMLDivElement>;
|
|
195
|
+
} & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
|
|
196
|
+
declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
197
|
+
|
|
198
|
+
type RadioProps = {
|
|
199
|
+
children: React.ReactNode;
|
|
200
|
+
/** Additional CSS className for the element. */
|
|
201
|
+
className?: string;
|
|
202
|
+
/** Help text for the form control. */
|
|
203
|
+
description?: React.ReactNode;
|
|
204
|
+
/** Additional style properties for the element. */
|
|
205
|
+
style?: React.CSSProperties;
|
|
206
|
+
/** Ref for the element. */
|
|
207
|
+
ref?: Ref<HTMLLabelElement>;
|
|
208
|
+
} & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
|
|
209
|
+
declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
|
|
210
|
+
|
|
211
|
+
type SelectProps<T extends object> = {
|
|
212
|
+
children: React.ReactNode;
|
|
213
|
+
/** Additional CSS className for the element. */
|
|
214
|
+
className?: string;
|
|
215
|
+
/** Help text for the form control. */
|
|
216
|
+
description?: React.ReactNode;
|
|
217
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
218
|
+
errorMessage?: React.ReactNode;
|
|
219
|
+
/** Label for the form control. */
|
|
220
|
+
label?: React.ReactNode;
|
|
221
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
222
|
+
placeholder?: string;
|
|
223
|
+
/** Additional style properties for the element. */
|
|
224
|
+
style?: React.CSSProperties;
|
|
225
|
+
/** Ref for the button element. */
|
|
226
|
+
ref?: Ref<HTMLButtonElement>;
|
|
227
|
+
} & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
228
|
+
declare function Select<T extends object>(props: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
229
|
+
|
|
230
|
+
type TextAreaProps = {
|
|
231
|
+
/** Additional CSS className for the element. */
|
|
232
|
+
className?: string;
|
|
233
|
+
/** Help text for the form control. */
|
|
234
|
+
description?: React.ReactNode;
|
|
235
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
236
|
+
errorMessage?: React.ReactNode;
|
|
237
|
+
/** Label for the form control. */
|
|
238
|
+
label?: React.ReactNode;
|
|
239
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
240
|
+
placeholder?: string;
|
|
241
|
+
/** Additional style properties for the element. */
|
|
242
|
+
style?: React.CSSProperties;
|
|
243
|
+
/**
|
|
244
|
+
* The number of visible text lines for the control.
|
|
245
|
+
* @default 2
|
|
246
|
+
*/
|
|
247
|
+
rows?: number;
|
|
248
|
+
/** Ref for the textarea element. */
|
|
249
|
+
ref?: Ref<HTMLTextAreaElement>;
|
|
250
|
+
} & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
251
|
+
declare function TextArea(props: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
252
|
+
|
|
253
|
+
type TextFieldProps = {
|
|
254
|
+
/** Additional CSS className for the element. */
|
|
255
|
+
className?: string;
|
|
256
|
+
/** Help text for the form control. */
|
|
257
|
+
description?: React.ReactNode;
|
|
258
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
259
|
+
errorMessage?: React.ReactNode;
|
|
260
|
+
/** Element to be rendered in the left side of the input. */
|
|
261
|
+
leftAddon?: React.ReactNode;
|
|
262
|
+
/** Label for the form control. */
|
|
263
|
+
label?: React.ReactNode;
|
|
264
|
+
/** Element to be rendered in the right side of the input. */
|
|
265
|
+
rightAddon?: React.ReactNode;
|
|
266
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
267
|
+
placeholder?: string;
|
|
268
|
+
/**
|
|
269
|
+
* Text alignment of the input
|
|
270
|
+
* @default left
|
|
271
|
+
*/
|
|
272
|
+
textAlign?: 'left' | 'right';
|
|
273
|
+
/** Additional style properties for the element. */
|
|
274
|
+
style?: React.CSSProperties;
|
|
275
|
+
/** Add a divider between the left/right addons and the input, a value of 0 will be ignored */
|
|
276
|
+
withAddonDivider?: boolean;
|
|
277
|
+
/** Defines the number of characters and determines the width of the input element */
|
|
278
|
+
size?: number;
|
|
279
|
+
/** Ref for the input element. */
|
|
280
|
+
ref?: Ref<HTMLInputElement>;
|
|
281
|
+
} & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
|
|
282
|
+
declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
|
|
283
|
+
|
|
284
|
+
type NumberFieldProps = {
|
|
285
|
+
/** Additional CSS className for the element. */
|
|
286
|
+
className?: string;
|
|
287
|
+
/** Help text for the form control. */
|
|
288
|
+
description?: React.ReactNode;
|
|
289
|
+
/** Error message for the form control. Automatically sets `isInvalid` to true */
|
|
290
|
+
errorMessage?: React.ReactNode;
|
|
291
|
+
/** Element to be rendered in the left side of the input. */
|
|
292
|
+
leftAddon?: React.ReactNode;
|
|
293
|
+
/** Label for the form control. */
|
|
294
|
+
label?: React.ReactNode;
|
|
295
|
+
/** Element to be rendered in the right side of the input. */
|
|
296
|
+
rightAddon?: React.ReactNode;
|
|
297
|
+
/** Placeholder text. Only visible when the input value is empty. */
|
|
298
|
+
placeholder?: string;
|
|
299
|
+
/**
|
|
300
|
+
* Text alignment of the input
|
|
301
|
+
* @default left
|
|
302
|
+
*/
|
|
303
|
+
textAlign?: 'left' | 'right';
|
|
304
|
+
/** Additional style properties for the element. */
|
|
305
|
+
style?: React.CSSProperties;
|
|
306
|
+
/** Add a divider between the left/right addons and the input */
|
|
307
|
+
withAddonDivider?: boolean;
|
|
308
|
+
/** Defines the number of characters and determines the width of the input element, a value of 0 will be ignored */
|
|
309
|
+
size?: number;
|
|
310
|
+
/** Defines the maximum numeric value */
|
|
311
|
+
maxValue?: number;
|
|
312
|
+
/** Defines the minimum numeric value */
|
|
313
|
+
minValue?: number;
|
|
314
|
+
/** Ref for the input element. */
|
|
315
|
+
ref?: Ref<HTMLInputElement>;
|
|
316
|
+
} & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
|
|
317
|
+
declare function NumberField(props: NumberFieldProps): react_jsx_runtime.JSX.Element;
|
|
318
|
+
|
|
319
|
+
declare const alertVariants: (props?: ({
|
|
320
|
+
variant?: "info" | "success" | "warning" | "danger" | undefined;
|
|
321
|
+
} & ({
|
|
322
|
+
class?: cva.ClassValue;
|
|
323
|
+
className?: never;
|
|
324
|
+
} | {
|
|
325
|
+
class?: never;
|
|
326
|
+
className?: cva.ClassValue;
|
|
327
|
+
})) | undefined) => string;
|
|
328
|
+
type Props = VariantProps<typeof alertVariants> & {
|
|
329
|
+
children: React.ReactNode;
|
|
330
|
+
/**
|
|
331
|
+
* The ARIA role for the alertbox.
|
|
332
|
+
*/
|
|
333
|
+
role: 'alert' | 'status' | 'none';
|
|
334
|
+
/** Additional CSS className for the element. */
|
|
335
|
+
className?: string;
|
|
336
|
+
/** Overrides the default icon for the alertbox variant. Should be used sparingly as the default icons are visually connected to the color of the variant. */
|
|
337
|
+
icon?: React.ComponentType;
|
|
338
|
+
/**
|
|
339
|
+
* Controls if the alert is expandable or not
|
|
340
|
+
* @default false
|
|
341
|
+
*/
|
|
342
|
+
isExpandable?: boolean;
|
|
343
|
+
/**
|
|
344
|
+
* Controls if the alert can be dismissed with a close button.
|
|
345
|
+
* @default false
|
|
346
|
+
*/
|
|
347
|
+
isDismissable?: boolean;
|
|
348
|
+
/**
|
|
349
|
+
* Controls if the alert is rendered or not.
|
|
350
|
+
* This is used to control the open/closed state of the component; make the component "controlled".
|
|
351
|
+
* @default false
|
|
352
|
+
*/
|
|
353
|
+
isDismissed?: boolean;
|
|
354
|
+
/**
|
|
355
|
+
* Callback that should be triggered when a dismissable alert is closed.
|
|
356
|
+
* This is used to control the open/closed state of the component; make the component "controlled".
|
|
357
|
+
*/
|
|
358
|
+
onDismiss?: () => void;
|
|
359
|
+
};
|
|
360
|
+
declare const Alertbox: ({ children, role, className, icon, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
|
|
361
|
+
|
|
362
|
+
type HeadingProps = HTMLProps<HTMLHeadingElement> & {
|
|
363
|
+
children?: React.ReactNode;
|
|
364
|
+
/** The level of the heading */
|
|
365
|
+
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
366
|
+
/** @private Used internally for slotted components */
|
|
367
|
+
_innerWrapper?: (children: React.ReactNode) => React.ReactNode;
|
|
368
|
+
/** @private Used internally for slotted components */
|
|
369
|
+
_outerWrapper?: (children: React.ReactNode) => React.ReactNode;
|
|
370
|
+
/** Ref for the element. */
|
|
371
|
+
ref?: Ref<HTMLHeadingElement>;
|
|
372
|
+
};
|
|
373
|
+
declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
|
|
374
|
+
declare const Heading: ({ ref, ...props }: HeadingProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
375
|
+
declare const ContentContext: react.Context<ContextValue<Partial<ContentProps>, HTMLDivElement>>;
|
|
376
|
+
type ContentProps = HTMLProps<HTMLDivElement> & {
|
|
377
|
+
children: React.ReactNode;
|
|
378
|
+
/** @private Used internally for slotted components */
|
|
379
|
+
_outerWrapper?: (children: React.ReactNode) => React.ReactNode;
|
|
380
|
+
/** Ref for the element. */
|
|
381
|
+
ref?: Ref<HTMLDivElement>;
|
|
382
|
+
};
|
|
383
|
+
declare const Content: ({ ref, ...props }: ContentProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
384
|
+
type MediaProps = HTMLProps<HTMLDivElement> & {
|
|
385
|
+
children: React.ReactNode;
|
|
386
|
+
};
|
|
387
|
+
declare const Media: (props: MediaProps) => react_jsx_runtime.JSX.Element;
|
|
388
|
+
type FooterProps = HTMLProps<HTMLDivElement> & {
|
|
389
|
+
children: React.ReactNode;
|
|
390
|
+
};
|
|
391
|
+
type CaptionProps = HTMLProps<HTMLDivElement> & {
|
|
392
|
+
children: React.ReactNode;
|
|
393
|
+
};
|
|
394
|
+
declare const Caption: ({ className, ...restProps }: CaptionProps) => react_jsx_runtime.JSX.Element;
|
|
395
|
+
declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
|
|
396
|
+
|
|
397
|
+
type BreadcrumbProps = {
|
|
398
|
+
/** Additional CSS className for the element. */
|
|
399
|
+
className?: string;
|
|
400
|
+
children?: React.ReactNode;
|
|
401
|
+
/** Additional style properties for the element. */
|
|
402
|
+
style?: React.CSSProperties;
|
|
403
|
+
/** The URL to navigate to when clicking the breadcrumb. */
|
|
404
|
+
href?: LinkProps['href'];
|
|
405
|
+
/** Ref to the element. */
|
|
406
|
+
ref?: Ref<HTMLLIElement>;
|
|
407
|
+
} & Omit<BreadcrumbProps$1, 'className' | 'style'>;
|
|
408
|
+
declare function Breadcrumb(props: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
409
|
+
|
|
410
|
+
type BreadcrumbsProps = {
|
|
411
|
+
/** Additional CSS className for the element. */
|
|
412
|
+
className?: string;
|
|
413
|
+
/** Additional style properties for the element. */
|
|
414
|
+
style?: React.CSSProperties;
|
|
415
|
+
/** Ref to the element. */
|
|
416
|
+
ref?: Ref<HTMLOListElement>;
|
|
417
|
+
} & Omit<BreadcrumbsProps$1<BreadcrumbProps>, 'className' | 'style'>;
|
|
418
|
+
declare function Breadcrumbs(props: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
|
|
419
|
+
|
|
420
|
+
type ButtonOrLinkProps = {
|
|
421
|
+
children?: React.ReactNode;
|
|
422
|
+
/** Additional CSS className for the element. */
|
|
423
|
+
className?: string;
|
|
424
|
+
/** Determines whether to use an anchor or a button for the Backlink */
|
|
425
|
+
href?: LinkProps['href'];
|
|
426
|
+
/** To add a permanent underline on the link (not only on hover)
|
|
427
|
+
* @default false
|
|
428
|
+
*/
|
|
429
|
+
withUnderline?: boolean;
|
|
430
|
+
/** Ref to the element. */
|
|
431
|
+
ref?: Ref<HTMLAnchorElement | HTMLButtonElement>;
|
|
432
|
+
};
|
|
433
|
+
type BacklinkProps = (ButtonProps$1 | LinkProps) & ButtonOrLinkProps;
|
|
434
|
+
declare function Backlink(props: BacklinkProps): react_jsx_runtime.JSX.Element;
|
|
435
|
+
|
|
436
|
+
type CardProps = VariantProps<typeof cardVariants> & {
|
|
437
|
+
children?: React.ReactNode;
|
|
438
|
+
className?: string;
|
|
439
|
+
};
|
|
440
|
+
declare const cardVariants: (props?: ({
|
|
441
|
+
variant?: "subtle" | "outlined" | undefined;
|
|
442
|
+
layout?: "horizontal" | "vertical" | undefined;
|
|
443
|
+
} & ({
|
|
444
|
+
class?: cva.ClassValue;
|
|
445
|
+
className?: never;
|
|
446
|
+
} | {
|
|
447
|
+
class?: never;
|
|
448
|
+
className?: cva.ClassValue;
|
|
449
|
+
})) | undefined) => string;
|
|
450
|
+
declare const Card: ({ children, className: _className, variant, layout, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
|
|
451
|
+
type CardLinkWrapperProps = {
|
|
452
|
+
children?: React.ReactNode;
|
|
453
|
+
className?: string;
|
|
454
|
+
} & {
|
|
455
|
+
[K in keyof Omit<LinkProps, 'className' | 'children'>]?: never;
|
|
456
|
+
};
|
|
457
|
+
type CardLinkProps = (Omit<LinkProps, 'href'> & Required<Pick<LinkProps, 'href'>>) | CardLinkWrapperProps;
|
|
458
|
+
/**
|
|
459
|
+
* A component that creates a clickable area on a card.
|
|
460
|
+
* It can be used either as a wrapper around a link or as a standalone link.
|
|
461
|
+
*/
|
|
462
|
+
declare const CardLink: ({ className: _className, href, ...restProps }: CardLinkProps) => react_jsx_runtime.JSX.Element;
|
|
463
|
+
|
|
464
|
+
type DateFormatterProps = {
|
|
465
|
+
value: Date | string;
|
|
466
|
+
options?: DateFormatterOptions;
|
|
467
|
+
/** Callback to customize the rendering of the date */
|
|
468
|
+
children?: (formattedDate: string) => ReactNode;
|
|
469
|
+
};
|
|
470
|
+
/**
|
|
471
|
+
* A React component that wraps https://react-spectrum.adobe.com/react-aria/useDateFormatter.html
|
|
472
|
+
* By default it sets the timeZone to `Europe/Berlin` to prevent the server's timezone from affecting
|
|
473
|
+
* the localized format
|
|
474
|
+
*/
|
|
475
|
+
declare const DateFormatter: ({ options: _options, value, children: render, }: DateFormatterProps) => ReactNode;
|
|
476
|
+
|
|
477
|
+
type VideoLoopProps = {
|
|
478
|
+
/** The video url */
|
|
479
|
+
src: string;
|
|
480
|
+
/** The video format */
|
|
481
|
+
format: string;
|
|
482
|
+
/**
|
|
483
|
+
* The content of the video must have a text description, so that it is accessible to screen readers.
|
|
484
|
+
* You can either provide just a caption, just an alt text, or both a caption and an alt text.
|
|
485
|
+
* Make sure the alt text doesn't repeat too much of the caption text, if so just a caption is sufficent.
|
|
486
|
+
* Think of this just as an alt text, but for a muted video - this text will not be visible, but read by screen readers.
|
|
487
|
+
* */
|
|
488
|
+
alt?: string;
|
|
489
|
+
className?: string;
|
|
490
|
+
};
|
|
491
|
+
declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
|
|
492
|
+
|
|
493
|
+
declare const disclosureButtonVariants: (props?: ({
|
|
494
|
+
withChevron?: boolean | undefined;
|
|
495
|
+
isIconOnly?: boolean | undefined;
|
|
496
|
+
} & ({
|
|
497
|
+
class?: cva.ClassValue;
|
|
498
|
+
className?: never;
|
|
499
|
+
} | {
|
|
500
|
+
class?: never;
|
|
501
|
+
className?: cva.ClassValue;
|
|
502
|
+
})) | undefined) => string;
|
|
503
|
+
type DisclosureButtonProps = Omit<ButtonProps$1, 'children' | 'aria-expanded' | 'aria-controls'> & VariantProps<typeof disclosureButtonVariants> & {
|
|
504
|
+
children: React.ReactNode;
|
|
505
|
+
} & RefAttributes<HTMLButtonElement>;
|
|
506
|
+
declare const DisclosureButton: ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps }: DisclosureButtonProps) => react_jsx_runtime.JSX.Element;
|
|
507
|
+
type DisclosureProps = DisclosureProps$1 & RefAttributes<HTMLDivElement> & {
|
|
508
|
+
className?: string;
|
|
509
|
+
};
|
|
510
|
+
declare const DisclosureStateContext: react.Context<DisclosureState | null>;
|
|
511
|
+
declare const Disclosure: ({ ref: _ref, children, ..._props }: DisclosureProps) => react_jsx_runtime.JSX.Element;
|
|
512
|
+
type DisclosurePanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
|
|
513
|
+
children: React.ReactNode;
|
|
514
|
+
role?: 'group' | 'region' | 'none';
|
|
515
|
+
} & RefAttributes<HTMLDivElement>;
|
|
516
|
+
declare const DisclosurePanel: ({ ref, children, ...props }: DisclosurePanelProps) => react_jsx_runtime.JSX.Element;
|
|
517
|
+
|
|
518
|
+
type FileTriggerProps = Partial<FormValidationProps<File>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
|
|
519
|
+
ref?: RefObject<HTMLInputElement | null>;
|
|
520
|
+
isInvalid?: boolean;
|
|
521
|
+
isRequired?: boolean;
|
|
522
|
+
};
|
|
523
|
+
|
|
524
|
+
type FileUploadProps = Omit<FileTriggerProps, 'onSelect'> & {
|
|
525
|
+
children: ReactNode;
|
|
526
|
+
files?: File[];
|
|
527
|
+
onChange?: Dispatch<SetStateAction<File[]>>;
|
|
528
|
+
validate?: (files: File) => true | string;
|
|
529
|
+
isRequired?: boolean;
|
|
530
|
+
isInvalid?: boolean;
|
|
531
|
+
errorMessage?: string;
|
|
532
|
+
};
|
|
533
|
+
declare const FileUpload: ({ children, files: _files, onChange, validate, isInvalid: _isInvalid, errorMessage, isRequired, allowsMultiple, ref, ...fileTriggerProps }: FileUploadProps) => react_jsx_runtime.JSX.Element;
|
|
534
|
+
|
|
535
|
+
type DescriptionProps = TextProps;
|
|
536
|
+
declare function Description(props: DescriptionProps): react_jsx_runtime.JSX.Element;
|
|
537
|
+
|
|
538
|
+
type ErrorMessageProps = TextProps;
|
|
539
|
+
declare function ErrorMessage(props: ErrorMessageProps): react_jsx_runtime.JSX.Element;
|
|
540
|
+
|
|
541
|
+
declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
|
|
542
|
+
|
|
543
|
+
type AvatarProps = ComponentProps<'img'>;
|
|
544
|
+
declare const Avatar: ({ src, alt, className, onError, loading, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
|
|
545
|
+
|
|
546
|
+
type DialogTriggerProps = DialogTriggerProps$1;
|
|
547
|
+
declare const DialogTrigger: (props: DialogTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
548
|
+
type ModalProps = Omit<ModalOverlayProps, 'isDismissable'>;
|
|
549
|
+
declare const Modal: ({ className, ...restProps }: ModalProps) => react_jsx_runtime.JSX.Element;
|
|
550
|
+
type DialogProps = DialogProps$1 & {
|
|
551
|
+
children: React.ReactNode;
|
|
552
|
+
};
|
|
553
|
+
declare const Dialog: ({ className, children, ...restProps }: DialogProps) => react_jsx_runtime.JSX.Element;
|
|
554
|
+
|
|
555
|
+
type TagGroupProps = Omit<TagGroupProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
|
|
556
|
+
/**
|
|
557
|
+
* CSS classes to apply to the tag group
|
|
558
|
+
*/
|
|
559
|
+
className?: string;
|
|
560
|
+
/**
|
|
561
|
+
* The function to call when the tag is removed
|
|
562
|
+
*/
|
|
563
|
+
onRemove?: (key: React.Key) => void;
|
|
564
|
+
/**
|
|
565
|
+
* The selection mode for the tag group
|
|
566
|
+
* @default "single"
|
|
567
|
+
*/
|
|
568
|
+
selectionMode?: 'single' | 'multiple';
|
|
569
|
+
};
|
|
570
|
+
type TagListProps = Omit<TagListProps$1<object>, 'className'> & RefAttributes<HTMLDivElement> & {
|
|
571
|
+
/**
|
|
572
|
+
* CSS classes to apply to the tag list
|
|
573
|
+
*/
|
|
574
|
+
className?: string;
|
|
575
|
+
};
|
|
576
|
+
type TagProps = Omit<TagProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
|
|
577
|
+
children: React.ReactNode;
|
|
578
|
+
/**
|
|
579
|
+
* CSS classes to apply to the tag
|
|
580
|
+
*/
|
|
581
|
+
className?: string;
|
|
582
|
+
};
|
|
583
|
+
/**
|
|
584
|
+
* A group component for Tag components that enables selection and organization of options.
|
|
585
|
+
*/
|
|
586
|
+
declare function TagGroup(props: TagGroupProps): react_jsx_runtime.JSX.Element;
|
|
587
|
+
/**
|
|
588
|
+
* A container component for Tag components within a TagGroup.
|
|
589
|
+
*/
|
|
590
|
+
declare function TagList(props: TagListProps): react_jsx_runtime.JSX.Element;
|
|
591
|
+
/**
|
|
592
|
+
* Interactive tag component for selections, filtering, and categorization.
|
|
593
|
+
*/
|
|
594
|
+
declare function Tag(props: TagProps): react_jsx_runtime.JSX.Element;
|
|
595
|
+
|
|
596
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, Backlink, type BacklinkProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Description, type DescriptionProps, DisclosureStateContext, ErrorMessage, type ErrorMessageProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, Label, type Locale, Media, type MediaProps, NumberField, type NumberFieldProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, type TagGroupProps, type TagListProps, type TagProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Avatar as UNSAFE_Avatar, type AvatarProps as UNSAFE_AvatarProps, Dialog as UNSAFE_Dialog, type DialogProps as UNSAFE_DialogProps, DialogTrigger as UNSAFE_DialogTrigger, type DialogTriggerProps as UNSAFE_DialogTriggerProps, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, type DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanel as UNSAFE_DisclosurePanel, type DisclosurePanelProps as UNSAFE_DisclosurePanelProps, type DisclosureProps as UNSAFE_DisclosureProps, FileUpload as UNSAFE_FileUpload, type FileUploadProps as UNSAFE_FileUploadProps, Modal as UNSAFE_Modal, type ModalProps as UNSAFE_ModalProps, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };
|