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

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 +37 -1
  2. package/dist/index.d.mts +228 -0
  3. package/dist/index.mjs +585 -0
  4. package/dist/useClientLayoutEffect-client-2_5nawgR.js +9 -0
  5. package/package.json +7 -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,48 @@ 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
+
17
53
  ## Usage
18
54
 
19
55
  Before you start using the components you need to configure the [Tailwind preset](../tailwind/). Remember to add this package to the content scan.
20
56
 
21
57
  ```js
22
- import { Button } from '@obosbbl/grunnmuren-react/button';
58
+ import { Button } from '@obosbbl/grunnmuren-react';
23
59
 
24
60
  export default function () {
25
61
  return <Button>Click me</Button>;
package/dist/index.d.mts ADDED
@@ -0,0 +1,228 @@
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 } from 'react-aria-components';
2
+ export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { VariantProps } from 'cva';
5
+
6
+ /**
7
+ * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
8
+ */
9
+ declare const buttonVariants: (props?: ({
10
+ variant?: "primary" | "secondary" | "tertiary" | undefined;
11
+ color?: "green" | "mint" | "white" | undefined;
12
+ isIconOnly?: boolean | undefined;
13
+ } & ({
14
+ 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 | {
15
+ [x: string]: any;
16
+ } | null | undefined)[] | {
17
+ [x: string]: any;
18
+ } | null | undefined)[] | {
19
+ [x: string]: any;
20
+ } | null | undefined)[] | {
21
+ [x: string]: any;
22
+ } | null | undefined)[] | {
23
+ [x: string]: any;
24
+ } | null | undefined)[] | {
25
+ [x: string]: any;
26
+ } | null | undefined)[] | {
27
+ [x: string]: any;
28
+ } | null | undefined)[] | {
29
+ [x: string]: any;
30
+ } | null | undefined)[] | {
31
+ [x: string]: any;
32
+ } | null | undefined)[] | {
33
+ [x: string]: any;
34
+ } | null | undefined)[] | {
35
+ [x: string]: any;
36
+ } | null | undefined)[] | {
37
+ [x: string]: any;
38
+ } | null | undefined;
39
+ className?: undefined;
40
+ } | {
41
+ class?: undefined;
42
+ 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 | {
43
+ [x: string]: any;
44
+ } | null | undefined)[] | {
45
+ [x: string]: any;
46
+ } | null | undefined)[] | {
47
+ [x: string]: any;
48
+ } | null | undefined)[] | {
49
+ [x: string]: any;
50
+ } | null | undefined)[] | {
51
+ [x: string]: any;
52
+ } | null | undefined)[] | {
53
+ [x: string]: any;
54
+ } | null | undefined)[] | {
55
+ [x: string]: any;
56
+ } | null | undefined)[] | {
57
+ [x: string]: any;
58
+ } | null | undefined)[] | {
59
+ [x: string]: any;
60
+ } | null | undefined)[] | {
61
+ [x: string]: any;
62
+ } | null | undefined)[] | {
63
+ [x: string]: any;
64
+ } | null | undefined)[] | {
65
+ [x: string]: any;
66
+ } | null | undefined;
67
+ })) | undefined) => string;
68
+ type ButtonOrLinkProps = (React.ComponentPropsWithoutRef<'button'> & {
69
+ href?: never;
70
+ }) | (React.ComponentPropsWithoutRef<'a'> & {
71
+ href: string;
72
+ });
73
+ type ButtonProps = VariantProps<typeof buttonVariants> & {
74
+ className?: string;
75
+ children: React.ReactNode;
76
+ /**
77
+ * Display the button in a loading state
78
+ * @default false
79
+ */
80
+ isLoading?: boolean;
81
+ style?: React.CSSProperties;
82
+ } & ButtonOrLinkProps;
83
+ declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
84
+
85
+ type CheckboxProps = {
86
+ children: React.ReactNode;
87
+ /** Additional CSS className for the element. */
88
+ className?: string;
89
+ /** Help text for the form control. */
90
+ description?: React.ReactNode;
91
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
92
+ errorMessage?: React.ReactNode;
93
+ /** Additional style properties for the element. */
94
+ style?: React.CSSProperties;
95
+ } & Omit<CheckboxProps$1, 'isDisabled' | 'style' | 'children' | 'isIndeterminate' | 'isReadOnly'>;
96
+ declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
97
+
98
+ type CheckboxGroupProps = {
99
+ children: React.ReactNode;
100
+ /** Additional CSS className for the element. */
101
+ className?: string;
102
+ /** Help text for the form control. */
103
+ description?: React.ReactNode;
104
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
105
+ errorMessage?: React.ReactNode;
106
+ /** Label for the form control. */
107
+ label?: React.ReactNode;
108
+ /** Additional style properties for the element. */
109
+ style?: React.CSSProperties;
110
+ } & Omit<CheckboxGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
111
+ declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
112
+
113
+ type ComboboxProps<T extends object> = {
114
+ children: React.ReactNode;
115
+ /** Additional CSS className for the element. */
116
+ className?: string;
117
+ /** Help text for the form control. */
118
+ description?: React.ReactNode;
119
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
120
+ errorMessage?: React.ReactNode;
121
+ /**
122
+ * Display the dropdown button trigger in a loading state
123
+ * @default false
124
+ */
125
+ isLoading?: boolean;
126
+ /** Label for the form control. */
127
+ label?: React.ReactNode;
128
+ /** Placeholder text. Only visible when the input value is empty. */
129
+ placeholder?: string;
130
+ /** Additional style properties for the element. */
131
+ style?: React.CSSProperties;
132
+ } & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
133
+ declare function Combobox<T extends object>(props: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
134
+ declare const ComboboxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
135
+
136
+ type RadioGroupProps = {
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
+ /** Label for the form control. */
145
+ label?: React.ReactNode;
146
+ /** Additional style properties for the element. */
147
+ style?: React.CSSProperties;
148
+ } & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
149
+ declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
150
+
151
+ type RadioProps = {
152
+ children: React.ReactNode;
153
+ /** Additional CSS className for the element. */
154
+ className?: string;
155
+ /** Help text for the form control. */
156
+ description?: React.ReactNode;
157
+ /** Additional style properties for the element. */
158
+ style?: React.CSSProperties;
159
+ } & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
160
+ declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
161
+
162
+ type SelectProps<T extends object> = {
163
+ children: React.ReactNode;
164
+ /** Additional CSS className for the element. */
165
+ className?: string;
166
+ /** Help text for the form control. */
167
+ description?: React.ReactNode;
168
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
169
+ errorMessage?: React.ReactNode;
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
+ } & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
177
+ declare function Select<T extends object>(props: SelectProps<T>): react_jsx_runtime.JSX.Element;
178
+ declare const SelectItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
179
+
180
+ type TextAreaProps = {
181
+ /** Additional CSS className for the element. */
182
+ className?: string;
183
+ /** Help text for the form control. */
184
+ description?: React.ReactNode;
185
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
186
+ errorMessage?: React.ReactNode;
187
+ /** Label for the form control. */
188
+ label?: React.ReactNode;
189
+ /** Placeholder text. Only visible when the input value is empty. */
190
+ placeholder?: string;
191
+ /** Additional style properties for the element. */
192
+ style?: React.CSSProperties;
193
+ /**
194
+ * The number of visible text lines for the control.
195
+ * @default 2
196
+ */
197
+ rows?: number;
198
+ } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
199
+ declare function TextArea(props: TextAreaProps): react_jsx_runtime.JSX.Element;
200
+
201
+ type TextFieldProps = {
202
+ /** Additional CSS className for the element. */
203
+ className?: string;
204
+ /** Help text for the form control. */
205
+ description?: React.ReactNode;
206
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
207
+ errorMessage?: React.ReactNode;
208
+ /** Element to be rendered in the left side of the input. */
209
+ leftAddon?: React.ReactNode;
210
+ /** Label for the form control. */
211
+ label?: React.ReactNode;
212
+ /** Element to be rendered in the right side of the input. */
213
+ rightAddon?: React.ReactNode;
214
+ /** Placeholder text. Only visible when the input value is empty. */
215
+ placeholder?: string;
216
+ /**
217
+ * Text alignment of the input
218
+ * @default left
219
+ */
220
+ textAlign?: 'left' | 'right';
221
+ /** Additional style properties for the element. */
222
+ style?: React.CSSProperties;
223
+ /** Add a divider between the left/right addons and the input */
224
+ withAddonDivider?: boolean;
225
+ } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
226
+ declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
227
+
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 };