@obosbbl/grunnmuren-react 2.0.0-canary.2 → 2.0.0-canary.4

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 (4) hide show
  1. package/README.md +72 -0
  2. package/dist/index.d.mts +14 -13
  3. package/dist/index.mjs +45 -25
  4. package/package.json +2 -1
package/README.md CHANGED
@@ -14,6 +14,78 @@ 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.
package/dist/index.d.mts CHANGED
@@ -1,7 +1,8 @@
1
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, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
3
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
3
+ import * as react from 'react';
4
4
  import { VariantProps } from 'cva';
5
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
6
 
6
7
  /**
7
8
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
@@ -77,10 +78,10 @@ type ButtonProps = VariantProps<typeof buttonVariants> & {
77
78
  * Display the button in a loading state
78
79
  * @default false
79
80
  */
80
- loading?: boolean;
81
+ isLoading?: boolean;
81
82
  style?: React.CSSProperties;
82
83
  } & ButtonOrLinkProps;
83
- declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
84
+ declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
84
85
 
85
86
  type CheckboxProps = {
86
87
  children: React.ReactNode;
@@ -93,7 +94,7 @@ type CheckboxProps = {
93
94
  /** Additional style properties for the element. */
94
95
  style?: React.CSSProperties;
95
96
  } & Omit<CheckboxProps$1, 'isDisabled' | 'style' | 'children' | 'isIndeterminate' | 'isReadOnly'>;
96
- declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
97
+ declare const _Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLLabelElement>>;
97
98
 
98
99
  type CheckboxGroupProps = {
99
100
  children: React.ReactNode;
@@ -108,7 +109,7 @@ type CheckboxGroupProps = {
108
109
  /** Additional style properties for the element. */
109
110
  style?: React.CSSProperties;
110
111
  } & Omit<CheckboxGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
111
- declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
112
+ declare const _CheckboxGroup: react.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
112
113
 
113
114
  type ComboboxProps<T extends object> = {
114
115
  children: React.ReactNode;
@@ -130,8 +131,8 @@ type ComboboxProps<T extends object> = {
130
131
  /** Additional style properties for the element. */
131
132
  style?: React.CSSProperties;
132
133
  } & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
133
- declare function Combobox<T extends object>(props: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
134
134
  declare const ComboboxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
135
+ declare const _Combobox: react.ForwardRefExoticComponent<Omit<ComboboxProps<object>, "ref"> & react.RefAttributes<HTMLInputElement>>;
135
136
 
136
137
  type RadioGroupProps = {
137
138
  children: React.ReactNode;
@@ -146,7 +147,7 @@ type RadioGroupProps = {
146
147
  /** Additional style properties for the element. */
147
148
  style?: React.CSSProperties;
148
149
  } & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
149
- declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
150
+ declare const _RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
150
151
 
151
152
  type RadioProps = {
152
153
  children: React.ReactNode;
@@ -157,7 +158,7 @@ type RadioProps = {
157
158
  /** Additional style properties for the element. */
158
159
  style?: React.CSSProperties;
159
160
  } & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
160
- declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
161
+ declare const _Radio: react.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & react.RefAttributes<HTMLLabelElement>>;
161
162
 
162
163
  type SelectProps<T extends object> = {
163
164
  children: React.ReactNode;
@@ -174,8 +175,8 @@ type SelectProps<T extends object> = {
174
175
  /** Additional style properties for the element. */
175
176
  style?: React.CSSProperties;
176
177
  } & 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
178
  declare const SelectItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
179
+ declare const _Select: react.ForwardRefExoticComponent<Omit<SelectProps<object>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
179
180
 
180
181
  type TextAreaProps = {
181
182
  /** Additional CSS className for the element. */
@@ -196,7 +197,7 @@ type TextAreaProps = {
196
197
  */
197
198
  rows?: number;
198
199
  } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
199
- declare function TextArea(props: TextAreaProps): react_jsx_runtime.JSX.Element;
200
+ declare const _TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
200
201
 
201
202
  type TextFieldProps = {
202
203
  /** Additional CSS className for the element. */
@@ -223,6 +224,6 @@ type TextFieldProps = {
223
224
  /** Add a divider between the left/right addons and the input */
224
225
  withAddonDivider?: boolean;
225
226
  } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
226
- declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
227
+ declare const _TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
227
228
 
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 };
229
+ export { _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ComboboxItem, type ComboboxProps, _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 };
package/dist/index.mjs CHANGED
@@ -1,9 +1,10 @@
1
- import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ComboBox, Group, Input, Button as Button$1, Popover, ListBox, ListBoxItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
2
- export { Form } from 'react-aria-components';
1
+ import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem, ComboBox, Group, Input, Button as Button$1, Popover, ListBox, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
2
+ export { Form, I18nProvider } from 'react-aria-components';
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
- import { useRef, useState, useId } from 'react';
4
+ import { forwardRef, useState, useRef, useId } from 'react';
5
5
  import { cva, cx, compose } from 'cva';
6
6
  import { LoadingSpinner, Check, ChevronDown } from '@obosbbl/grunnmuren-icons-react';
7
+ import { mergeRefs } from '@react-aria/utils';
7
8
  import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5nawgR.js';
8
9
 
9
10
  /**
@@ -89,15 +90,15 @@ import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5na
89
90
  isIconOnly: false
90
91
  }
91
92
  });
92
- function Button(props) {
93
- const { children, className, color, isIconOnly, loading, variant, style, ...restProps } = props;
94
- // TODO: Merge refs when we use RAC
95
- const buttonRef = useRef(null);
93
+ function Button(props, forwardedRef) {
94
+ const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
96
95
  const [widthOverride, setWidthOverride] = useState();
96
+ const ownRef = useRef(null);
97
+ const ref = mergeRefs(ownRef, forwardedRef);
97
98
  useClientLayoutEffect(()=>{
98
- if (loading) {
99
+ if (isLoading) {
99
100
  const requestID = window.requestAnimationFrame(()=>{
100
- setWidthOverride(buttonRef?.current?.getBoundingClientRect()?.width);
101
+ setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
101
102
  });
102
103
  return ()=>{
103
104
  setWidthOverride(undefined);
@@ -105,7 +106,7 @@ function Button(props) {
105
106
  };
106
107
  }
107
108
  }, [
108
- loading,
109
+ isLoading,
109
110
  children
110
111
  ]);
111
112
  let Component = 'a';
@@ -116,14 +117,14 @@ function Button(props) {
116
117
  }
117
118
  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
118
119
  /*#__PURE__*/ jsx(Component, {
119
- "aria-busy": loading ? true : undefined,
120
+ "aria-busy": isLoading ? true : undefined,
120
121
  className: buttonVariants({
121
122
  className,
122
123
  color,
123
124
  isIconOnly,
124
125
  variant
125
126
  }),
126
- ref: buttonRef,
127
+ ref: ref,
127
128
  style: {
128
129
  ...style,
129
130
  width: widthOverride
@@ -135,6 +136,7 @@ function Button(props) {
135
136
  }) : children
136
137
  }));
137
138
  }
139
+ const _Button = /*#__PURE__*/ forwardRef(Button);
138
140
 
139
141
  const formField = cx('group flex flex-col gap-2');
140
142
  const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
@@ -216,7 +218,7 @@ function CheckmarkBox() {
216
218
  })
217
219
  });
218
220
  }
219
- function Checkbox(props) {
221
+ function Checkbox(props, ref) {
220
222
  const { children, className, description, errorMessage, isInvalid: _isInvalid, ...restProps } = props;
221
223
  const id = useId();
222
224
  const descriptionId = 'desc' + id;
@@ -233,6 +235,7 @@ function Checkbox(props) {
233
235
  ...restProps,
234
236
  className: cx(className, defaultClasses$1),
235
237
  isInvalid: isInvalid,
238
+ ref: ref,
236
239
  children: [
237
240
  /*#__PURE__*/ jsx("div", {
238
241
  className: "absolute -left-2.5 top-0 z-10 h-11 w-11"
@@ -255,6 +258,7 @@ function Checkbox(props) {
255
258
  })
256
259
  });
257
260
  }
261
+ const _Checkbox = /*#__PURE__*/ forwardRef(Checkbox);
258
262
 
259
263
  function Label(props) {
260
264
  const { children, className, ...restProps } = props;
@@ -265,7 +269,7 @@ function Label(props) {
265
269
  });
266
270
  }
267
271
 
268
- function CheckboxGroup(props) {
272
+ function CheckboxGroup(props, ref) {
269
273
  const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
270
274
  const isInvalid = _isInvalid || errorMessage != null;
271
275
  return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
@@ -273,6 +277,7 @@ function CheckboxGroup(props) {
273
277
  className: cx(className, 'flex flex-col gap-2'),
274
278
  isInvalid: isInvalid,
275
279
  isRequired: isRequired,
280
+ ref: ref,
276
281
  children: [
277
282
  label && /*#__PURE__*/ jsx(Label, {
278
283
  children: label
@@ -287,6 +292,7 @@ function CheckboxGroup(props) {
287
292
  ]
288
293
  });
289
294
  }
295
+ const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
290
296
 
291
297
  /**
292
298
  * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
@@ -299,7 +305,7 @@ function CheckboxGroup(props) {
299
305
  });
300
306
  }
301
307
 
302
- function Combobox(props) {
308
+ function Combobox(props, ref) {
303
309
  const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
304
310
  const isInvalid = _isInvalid || errorMessage != null;
305
311
  return /*#__PURE__*/ jsxs(ComboBox, {
@@ -319,7 +325,8 @@ function Combobox(props) {
319
325
  /*#__PURE__*/ jsx(Input, {
320
326
  className: input({
321
327
  isGrouped: true
322
- })
328
+ }),
329
+ ref: ref
323
330
  }),
324
331
  /*#__PURE__*/ jsx(Button$1, {
325
332
  children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
@@ -370,8 +377,9 @@ const ComboboxItem = (props)=>{
370
377
  })
371
378
  });
372
379
  };
380
+ const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
373
381
 
374
- function RadioGroup(props) {
382
+ function RadioGroup(props, ref) {
375
383
  const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
376
384
  const isInvalid = _isInvalid || errorMessage != null;
377
385
  return /*#__PURE__*/ jsxs(RadioGroup$1, {
@@ -379,6 +387,7 @@ function RadioGroup(props) {
379
387
  className: cx(className, 'flex flex-col gap-2'),
380
388
  isInvalid: isInvalid,
381
389
  isRequired: isRequired,
390
+ ref: ref,
382
391
  children: [
383
392
  label && /*#__PURE__*/ jsx(Label, {
384
393
  children: label
@@ -393,6 +402,7 @@ function RadioGroup(props) {
393
402
  ]
394
403
  });
395
404
  }
405
+ const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
396
406
 
397
407
  const defaultClasses = cx([
398
408
  'relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7',
@@ -413,11 +423,12 @@ const defaultClasses = cx([
413
423
  // so we use an inner outline to artifically pad the border
414
424
  'data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red'
415
425
  ]);
416
- function Radio(props) {
426
+ function Radio(props, ref) {
417
427
  const { children, className, description, ...restProps } = props;
418
428
  return /*#__PURE__*/ jsxs(Radio$1, {
419
429
  ...restProps,
420
430
  className: cx(className, defaultClasses),
431
+ ref: ref,
421
432
  children: [
422
433
  /*#__PURE__*/ jsx("div", {
423
434
  className: "absolute -left-2.5 top-0 z-10 h-11 w-11 "
@@ -434,8 +445,9 @@ function Radio(props) {
434
445
  ]
435
446
  });
436
447
  }
448
+ const _Radio = /*#__PURE__*/ forwardRef(Radio);
437
449
 
438
- function Select(props) {
450
+ function Select(props, ref) {
439
451
  const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
440
452
  const isInvalid = _isInvalid || errorMessage != null;
441
453
  return /*#__PURE__*/ jsxs(Select$1, {
@@ -454,6 +466,8 @@ function Select(props) {
454
466
  focusModifier: 'visible'
455
467
  }), // How to reuse placeholder text?
456
468
  'inline-flex cursor-default items-center gap-2'),
469
+ // See https://github.com/adobe/react-spectrum/discussions/4792#discussioncomment-6492305
470
+ ref: ref,
457
471
  children: [
458
472
  /*#__PURE__*/ jsx(SelectValue, {
459
473
  className: "flex-1 truncate text-left data-[placeholder]:text-[#727070]"
@@ -498,8 +512,9 @@ const SelectItem = (props)=>{
498
512
  })
499
513
  });
500
514
  };
515
+ const _Select = /*#__PURE__*/ forwardRef(Select);
501
516
 
502
- function TextArea(props) {
517
+ function TextArea(props, ref) {
503
518
  const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
504
519
  const isInvalid = _isInvalid || errorMessage != null;
505
520
  return /*#__PURE__*/ jsxs(TextField$1, {
@@ -515,7 +530,8 @@ function TextArea(props) {
515
530
  }),
516
531
  /*#__PURE__*/ jsx(TextArea$1, {
517
532
  className: input(),
518
- rows: rows
533
+ rows: rows,
534
+ ref: ref
519
535
  }),
520
536
  /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
521
537
  errorMessage: errorMessage
@@ -523,6 +539,7 @@ function TextArea(props) {
523
539
  ]
524
540
  });
525
541
  }
542
+ const _TextArea = /*#__PURE__*/ forwardRef(TextArea);
526
543
 
527
544
  const inputWithAlignment = compose(input, cva({
528
545
  base: '',
@@ -533,7 +550,7 @@ const inputWithAlignment = compose(input, cva({
533
550
  }
534
551
  }
535
552
  }));
536
- function TextField(props) {
553
+ function TextField(props, ref) {
537
554
  const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
538
555
  const isInvalid = _isInvalid || errorMessage != null;
539
556
  return /*#__PURE__*/ jsxs(TextField$1, {
@@ -558,7 +575,8 @@ function TextField(props) {
558
575
  className: inputWithAlignment({
559
576
  textAlign,
560
577
  isGrouped: true
561
- })
578
+ }),
579
+ ref: ref
562
580
  }),
563
581
  withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
564
582
  className: "mr-3"
@@ -568,7 +586,8 @@ function TextField(props) {
568
586
  }) : /*#__PURE__*/ jsx(Input, {
569
587
  className: inputWithAlignment({
570
588
  textAlign
571
- })
589
+ }),
590
+ ref: ref
572
591
  }),
573
592
  /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
574
593
  errorMessage: errorMessage
@@ -581,5 +600,6 @@ function Divider({ className }) {
581
600
  className: cx(className, 'block h-6 w-px flex-none bg-black')
582
601
  });
583
602
  }
603
+ const _TextField = /*#__PURE__*/ forwardRef(TextField);
584
604
 
585
- export { Button, Checkbox, CheckboxGroup, Combobox, ComboboxItem, Radio, RadioGroup, Select, SelectItem, TextArea, TextField };
605
+ export { _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ComboboxItem, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, SelectItem, _TextArea as TextArea, _TextField as TextField };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-react",
3
- "version": "2.0.0-canary.2",
3
+ "version": "2.0.0-canary.4",
4
4
  "description": "Grunnmuren components in React",
5
5
  "repository": {
6
6
  "url": "https://github.com/code-obos/grunnmuren"
@@ -19,6 +19,7 @@
19
19
  ],
20
20
  "dependencies": {
21
21
  "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
22
+ "@react-aria/utils": "^3.23.0",
22
23
  "cva": "1.0.0-beta.1",
23
24
  "react-aria-components": "^1.0.0"
24
25
  },