@obosbbl/grunnmuren-react 2.0.0-canary.33 → 2.0.0-canary.35

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 +47 -1
  2. package/dist/index.d.mts +146 -17
  3. package/dist/index.mjs +56 -18
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -81,7 +81,7 @@ import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
81
81
  import { useRouter } from 'next/navigation';
82
82
 
83
83
  export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
84
- let router = useRouter();
84
+ const router = useRouter();
85
85
 
86
86
  return (
87
87
  <GrunnmurenProvider locale={locale} navigate={router.push}>
@@ -116,6 +116,52 @@ export default function RootLayout({
116
116
  }
117
117
  ```
118
118
 
119
+ #### Basepath
120
+
121
+ If you're using a router such as Next's, then you can use the `useHref` prop to convert router-specific hrefs into native HTML hrefs. This is very useful for instance when using Next's [basepath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting, as you can use this to prepend the basepath to all links, similar to Next's `<Link>`.
122
+
123
+ **Before**
124
+
125
+ ```tsx
126
+ import Link from 'next/link';
127
+ import { Button } from '@obosbbl/grunnmuren-react';
128
+
129
+ // Notice how you have to handle the basepath yourself with Grunnmuren's component, but not with Next's.
130
+
131
+ <Link href="/bli-medlem">Bli medlem</Link>
132
+ <Button href="/medlem/bli-medlem">Bli medlem</Button>
133
+ ```
134
+
135
+ **After**
136
+
137
+ ```js
138
+ // app/providers.tsx
139
+ 'use client'
140
+ import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
141
+ import { useRouter } from 'next/navigation';
142
+
143
+ export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
144
+ const router = useRouter();
145
+ const useHref = (href: string) => '/medlem' + href;
146
+
147
+ return (
148
+ <GrunnmurenProvider locale={locale} navigate={router.push} useHref={useHref}>
149
+ {children}
150
+ </GrunnmurenProvider>
151
+ )
152
+ }
153
+ ```
154
+
155
+ ```tsx
156
+ import Link from 'next/link';
157
+ import { Button } from '@obosbbl/grunnmuren-react';
158
+
159
+ // The hrefs are the same, as basepath is handled by the useHref hook in the provider.
160
+
161
+ <Link href="/bli-medlem">Bli medlem</Link>
162
+ <Button href="/bli-medlem">Bli medlem</Button>
163
+ ```
164
+
119
165
  ### Optimize bundle size by removing unused locales
120
166
 
121
167
  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:
package/dist/index.d.mts CHANGED
@@ -1,10 +1,11 @@
1
- import { ButtonProps as ButtonProps$1, Link, 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 } from 'react-aria-components';
1
+ import { RouterProvider, ButtonProps as ButtonProps$1, Link, 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 } from 'react-aria-components';
2
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
4
  import * as react from 'react';
5
5
  import react__default, { HTMLProps, ForwardedRef } from 'react';
6
6
  import { VariantProps } from 'cva';
7
7
 
8
+ type RouterProviderProps = React.ComponentProps<typeof RouterProvider>;
8
9
  type GrunnmurenProviderProps = {
9
10
  children: React.ReactNode;
10
11
  /**
@@ -12,10 +13,12 @@ type GrunnmurenProviderProps = {
12
13
  * @default nb
13
14
  */
14
15
  locale?: 'nb' | 'sv' | 'en';
15
- /** The router to use for navigation */
16
- navigate?: (path: string) => void;
16
+ /** The router to use for client side navigation */
17
+ navigate?: RouterProviderProps['navigate'];
18
+ /** Converts a router-specific href to a native HTML href, e.g. prepending a base path */
19
+ useHref?: RouterProviderProps['useHref'];
17
20
  };
18
- declare function GrunnmurenProvider({ children, locale, navigate, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
21
+ declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
19
22
 
20
23
  type AccordionProps = {
21
24
  children: react__default.ReactNode;
@@ -40,12 +43,136 @@ type AccordionItemProps = {
40
43
  declare const _Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
41
44
  declare const _AccordionItem: react__default.ForwardRefExoticComponent<AccordionItemProps & react__default.RefAttributes<HTMLDivElement>>;
42
45
 
46
+ type BadgeProps = VariantProps<typeof badgeVariants> & {
47
+ children?: React.ReactNode;
48
+ className?: string;
49
+ };
50
+ declare const badgeVariants: (props?: ({
51
+ color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
52
+ size?: "small" | "medium" | "large" | undefined;
53
+ } & ({
54
+ 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 | {
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
+ [x: string]: any;
68
+ } | null | undefined)[] | {
69
+ [x: string]: any;
70
+ } | null | undefined)[] | {
71
+ [x: string]: any;
72
+ } | null | undefined)[] | {
73
+ [x: string]: any;
74
+ } | null | undefined)[] | {
75
+ [x: string]: any;
76
+ } | null | undefined)[] | {
77
+ [x: string]: any;
78
+ } | null | undefined;
79
+ className?: never;
80
+ } | {
81
+ class?: never;
82
+ 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 | {
83
+ [x: string]: any;
84
+ } | null | undefined)[] | {
85
+ [x: string]: any;
86
+ } | null | undefined)[] | {
87
+ [x: string]: any;
88
+ } | null | undefined)[] | {
89
+ [x: string]: any;
90
+ } | null | undefined)[] | {
91
+ [x: string]: any;
92
+ } | null | undefined)[] | {
93
+ [x: string]: any;
94
+ } | null | undefined)[] | {
95
+ [x: string]: any;
96
+ } | null | undefined)[] | {
97
+ [x: string]: any;
98
+ } | null | undefined)[] | {
99
+ [x: string]: any;
100
+ } | null | undefined)[] | {
101
+ [x: string]: any;
102
+ } | null | undefined)[] | {
103
+ [x: string]: any;
104
+ } | null | undefined)[] | {
105
+ [x: string]: any;
106
+ } | null | undefined;
107
+ })) | undefined) => string;
108
+ declare const _Badge: react.ForwardRefExoticComponent<VariantProps<(props?: ({
109
+ color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
110
+ size?: "small" | "medium" | "large" | undefined;
111
+ } & ({
112
+ 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 | {
113
+ [x: string]: any;
114
+ } | null | undefined)[] | {
115
+ [x: string]: any;
116
+ } | null | undefined)[] | {
117
+ [x: string]: any;
118
+ } | null | undefined)[] | {
119
+ [x: string]: any;
120
+ } | null | undefined)[] | {
121
+ [x: string]: any;
122
+ } | null | undefined)[] | {
123
+ [x: string]: any;
124
+ } | null | undefined)[] | {
125
+ [x: string]: any;
126
+ } | null | undefined)[] | {
127
+ [x: string]: any;
128
+ } | null | undefined)[] | {
129
+ [x: string]: any;
130
+ } | null | undefined)[] | {
131
+ [x: string]: any;
132
+ } | null | undefined)[] | {
133
+ [x: string]: any;
134
+ } | null | undefined)[] | {
135
+ [x: string]: any;
136
+ } | null | undefined;
137
+ className?: never;
138
+ } | {
139
+ class?: never;
140
+ 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 | {
141
+ [x: string]: any;
142
+ } | null | undefined)[] | {
143
+ [x: string]: any;
144
+ } | null | undefined)[] | {
145
+ [x: string]: any;
146
+ } | null | undefined)[] | {
147
+ [x: string]: any;
148
+ } | null | undefined)[] | {
149
+ [x: string]: any;
150
+ } | null | undefined)[] | {
151
+ [x: string]: any;
152
+ } | null | undefined)[] | {
153
+ [x: string]: any;
154
+ } | null | undefined)[] | {
155
+ [x: string]: any;
156
+ } | null | undefined)[] | {
157
+ [x: string]: any;
158
+ } | null | undefined)[] | {
159
+ [x: string]: any;
160
+ } | null | undefined)[] | {
161
+ [x: string]: any;
162
+ } | null | undefined)[] | {
163
+ [x: string]: any;
164
+ } | null | undefined;
165
+ })) | undefined) => string> & {
166
+ children?: React.ReactNode;
167
+ className?: string;
168
+ } & react.RefAttributes<HTMLSpanElement>>;
169
+
43
170
  /**
44
171
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
45
172
  */
46
173
  declare const buttonVariants: (props?: ({
47
174
  variant?: "primary" | "secondary" | "tertiary" | undefined;
48
- color?: "green" | "mint" | "white" | undefined;
175
+ color?: "mint" | "white" | "green" | undefined;
49
176
  isIconOnly?: boolean | undefined;
50
177
  } & ({
51
178
  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 | {
@@ -135,7 +262,7 @@ declare const _Checkbox: react.ForwardRefExoticComponent<{
135
262
  errorMessage?: React.ReactNode;
136
263
  /** Additional style properties for the element. */
137
264
  style?: React.CSSProperties;
138
- } & Omit<CheckboxProps$1, "children" | "style" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
265
+ } & Omit<CheckboxProps$1, "style" | "children" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
139
266
 
140
267
  type CheckboxGroupProps = {
141
268
  children: React.ReactNode;
@@ -162,7 +289,7 @@ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
162
289
  label?: React.ReactNode;
163
290
  /** Additional style properties for the element. */
164
291
  style?: React.CSSProperties;
165
- } & Omit<CheckboxGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
292
+ } & Omit<CheckboxGroupProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
166
293
 
167
294
  declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
168
295
 
@@ -205,7 +332,7 @@ declare const _Combobox: react.ForwardRefExoticComponent<{
205
332
  placeholder?: string;
206
333
  /** Additional style properties for the element. */
207
334
  style?: React.CSSProperties;
208
- } & Omit<ComboBoxProps<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
335
+ } & Omit<ComboBoxProps<object>, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
209
336
 
210
337
  type RadioGroupProps = {
211
338
  children: React.ReactNode;
@@ -232,7 +359,7 @@ declare const _RadioGroup: react.ForwardRefExoticComponent<{
232
359
  label?: React.ReactNode;
233
360
  /** Additional style properties for the element. */
234
361
  style?: React.CSSProperties;
235
- } & Omit<RadioGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
362
+ } & Omit<RadioGroupProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
236
363
 
237
364
  type RadioProps = {
238
365
  children: React.ReactNode;
@@ -251,7 +378,7 @@ declare const _Radio: react.ForwardRefExoticComponent<{
251
378
  description?: React.ReactNode;
252
379
  /** Additional style properties for the element. */
253
380
  style?: React.CSSProperties;
254
- } & Omit<RadioProps$1, "children" | "style" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
381
+ } & Omit<RadioProps$1, "style" | "children" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
255
382
 
256
383
  type SelectProps<T extends object> = {
257
384
  children: React.ReactNode;
@@ -282,7 +409,7 @@ declare const _Select: react.ForwardRefExoticComponent<{
282
409
  placeholder?: string;
283
410
  /** Additional style properties for the element. */
284
411
  style?: React.CSSProperties;
285
- } & Omit<SelectProps$1<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
412
+ } & Omit<SelectProps$1<object>, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
286
413
 
287
414
  type TextAreaProps = {
288
415
  /** Additional CSS className for the element. */
@@ -321,7 +448,7 @@ declare const _TextArea: react.ForwardRefExoticComponent<{
321
448
  * @default 2
322
449
  */
323
450
  rows?: number;
324
- } & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
451
+ } & Omit<TextFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
325
452
 
326
453
  type TextFieldProps = {
327
454
  /** Additional CSS className for the element. */
@@ -376,7 +503,7 @@ declare const _TextField: react.ForwardRefExoticComponent<{
376
503
  withAddonDivider?: boolean;
377
504
  /** Defines the number of characters and determines the width of the input element */
378
505
  size?: number;
379
- } & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
506
+ } & Omit<TextFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
380
507
 
381
508
  type NumberFieldProps = {
382
509
  /** Additional CSS className for the element. */
@@ -439,7 +566,7 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
439
566
  maxValue?: number;
440
567
  /** Defines the minimum numeric value */
441
568
  minValue?: number;
442
- } & Omit<NumberFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
569
+ } & Omit<NumberFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
443
570
 
444
571
  declare const alertVariants: (props?: ({
445
572
  variant?: "info" | "success" | "warning" | "danger" | undefined;
@@ -554,6 +681,7 @@ declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
554
681
  type BreadcrumbProps = {
555
682
  /** Additional CSS className for the element. */
556
683
  className?: string;
684
+ children?: React.ReactNode;
557
685
  /** Additional style properties for the element. */
558
686
  style?: React.CSSProperties;
559
687
  /** The URL to navigate to when clicking the breadcrumb. */
@@ -562,11 +690,12 @@ type BreadcrumbProps = {
562
690
  declare const _Breadcrumb: react.ForwardRefExoticComponent<{
563
691
  /** Additional CSS className for the element. */
564
692
  className?: string;
693
+ children?: React.ReactNode;
565
694
  /** Additional style properties for the element. */
566
695
  style?: React.CSSProperties;
567
696
  /** The URL to navigate to when clicking the breadcrumb. */
568
697
  href?: string;
569
- } & Omit<BreadcrumbProps$1, "className" | "style"> & react.RefAttributes<HTMLLIElement>>;
698
+ } & Omit<BreadcrumbProps$1, "style" | "className"> & react.RefAttributes<HTMLLIElement>>;
570
699
 
571
700
  type BreadcrumbsProps = {
572
701
  /** Additional CSS className for the element. */
@@ -579,7 +708,7 @@ declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
579
708
  className?: string;
580
709
  /** Additional style properties for the element. */
581
710
  style?: React.CSSProperties;
582
- } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
711
+ } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "style" | "className"> & react.RefAttributes<HTMLOListElement>>;
583
712
 
584
713
  type ButtonOrLinkProps = {
585
714
  children?: React.ReactNode;
@@ -595,4 +724,4 @@ type ButtonOrLinkProps = {
595
724
  type BacklinkProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
596
725
  declare const _Backlink: react.ForwardRefExoticComponent<BacklinkProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
597
726
 
598
- 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 };
727
+ export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Badge as Badge, type BadgeProps, _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 };
package/dist/index.mjs CHANGED
@@ -2,26 +2,22 @@
2
2
  import { I18nProvider, RouterProvider, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, FieldError, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, useLocale, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
3
3
  export { Form } from 'react-aria-components';
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
- import { useLayoutEffect, createContext, forwardRef, Children, useId, useState, useRef } from 'react';
5
+ import { createContext, forwardRef, Children, useId, useState, useRef } from 'react';
6
6
  import { cx, cva, compose } from 'cva';
7
7
  import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
8
- import { mergeRefs } from '@react-aria/utils';
8
+ import { useLayoutEffect, mergeRefs } from '@react-aria/utils';
9
9
 
10
- function GrunnmurenProvider({ children, locale = 'nb', navigate }) {
10
+ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
11
11
  return /*#__PURE__*/ jsx(I18nProvider, {
12
12
  locale: locale,
13
13
  children: navigate ? /*#__PURE__*/ jsx(RouterProvider, {
14
14
  navigate: navigate,
15
+ useHref: useHref,
15
16
  children: children
16
17
  }) : children
17
18
  });
18
19
  }
19
20
 
20
- const canUseDOM = ()=>{
21
- return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
22
- };
23
- const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : ()=>{};
24
-
25
21
  const HeadingContext = /*#__PURE__*/ createContext({});
26
22
  const Heading = (props, ref)=>{
27
23
  [props, ref] = useContextProps(props, ref, HeadingContext);
@@ -80,7 +76,7 @@ function AccordionItem(props, ref) {
80
76
  //
81
77
  const [isOpen, setIsOpen] = useState(// If we are controlled, use that open state, otherwise use the uncontrolled
82
78
  isControlled ? controlledIsOpen : defaultOpen);
83
- useClientLayoutEffect(()=>{
79
+ useLayoutEffect(()=>{
84
80
  if (isControlled) {
85
81
  setIsOpen(controlledIsOpen);
86
82
  }
@@ -152,6 +148,44 @@ function AccordionItem(props, ref) {
152
148
  const _Accordion = /*#__PURE__*/ forwardRef(Accordion);
153
149
  const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
154
150
 
151
+ const badgeVariants = cva({
152
+ base: [
153
+ 'inline-flex w-fit items-center justify-center gap-1.5 rounded-lg [&_svg]:shrink-0'
154
+ ],
155
+ variants: {
156
+ color: {
157
+ 'gray-dark': 'bg-gray-dark text-white',
158
+ mint: 'bg-mint',
159
+ sky: 'bg-sky',
160
+ white: 'bg-white',
161
+ 'blue-dark': 'bg-blue-dark text-white',
162
+ 'green-dark': 'bg-green-dark text-white'
163
+ },
164
+ size: {
165
+ small: 'description px-2 py-0.5 [&_svg]:h-4 [&_svg]:w-4',
166
+ medium: 'description px-2.5 py-1.5 [&_svg]:h-4 [&_svg]:w-4',
167
+ large: 'paragraph px-3 py-2 [&_svg]:h-5 [&_svg]:w-5'
168
+ }
169
+ },
170
+ defaultVariants: {
171
+ size: 'medium'
172
+ }
173
+ });
174
+ function Badge(props, ref) {
175
+ const { className: _className, color, size, ...restProps } = props;
176
+ const className = badgeVariants({
177
+ className: _className,
178
+ color,
179
+ size
180
+ });
181
+ return /*#__PURE__*/ jsx("span", {
182
+ className: className,
183
+ ...restProps,
184
+ ref: ref
185
+ });
186
+ }
187
+ const _Badge = /*#__PURE__*/ forwardRef(Badge);
188
+
155
189
  /**
156
190
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
157
191
  */ const buttonVariants = cva({
@@ -194,7 +228,7 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
194
228
  {
195
229
  color: 'green',
196
230
  variant: 'secondary',
197
- className: 'bg-white text-black shadow-green hover:bg-green hover:text-white active:bg-green'
231
+ className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green'
198
232
  },
199
233
  {
200
234
  color: 'mint',
@@ -242,7 +276,7 @@ function Button(props, forwardedRef) {
242
276
  const [widthOverride, setWidthOverride] = useState();
243
277
  const ownRef = useRef(null);
244
278
  const ref = mergeRefs(ownRef, forwardedRef);
245
- useClientLayoutEffect(()=>{
279
+ useLayoutEffect(()=>{
246
280
  if (isLoading) {
247
281
  const requestID = window.requestAnimationFrame(()=>{
248
282
  setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
@@ -268,7 +302,7 @@ function Button(props, forwardedRef) {
268
302
  }) : _children;
269
303
  const style = {
270
304
  ..._style,
271
- widthOverride
305
+ width: widthOverride
272
306
  };
273
307
  return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
274
308
  ...restProps,
@@ -290,7 +324,11 @@ const formField = cx('group flex flex-col gap-2');
290
324
  const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
291
325
  const input = cva({
292
326
  base: [
293
- 'min-h-11 rounded-md py-2.5 text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
327
+ // Use box-content to enable auto width based on number of characters (size)
328
+ // Setting min-height to prevent the input from collapsing in Safari
329
+ // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
330
+ 'box-content min-h-6 py-2.5',
331
+ 'rounded-md text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
294
332
  // invalid styles
295
333
  'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
296
334
  // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -693,7 +731,7 @@ const inputVariants$1 = compose(input, cva({
693
731
  left: ''
694
732
  },
695
733
  autoWidth: {
696
- true: 'box-content max-w-fit',
734
+ true: 'max-w-fit',
697
735
  false: ''
698
736
  }
699
737
  }
@@ -758,7 +796,7 @@ const inputVariants = compose(input, cva({
758
796
  left: ''
759
797
  },
760
798
  autoWidth: {
761
- true: 'box-content max-w-fit',
799
+ true: 'max-w-fit',
762
800
  false: ''
763
801
  }
764
802
  }
@@ -898,14 +936,14 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
898
936
  /*#__PURE__*/ jsx(Icon, {}),
899
937
  firstChild,
900
938
  isDismissable && /*#__PURE__*/ jsx("button", {
901
- className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus:outline-none focus:-outline-offset-8 focus:outline-black'),
939
+ className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:outline-none focus-visible:-outline-offset-8 focus-visible:outline-black'),
902
940
  onClick: close,
903
941
  "aria-label": translations.close[locale],
904
942
  children: /*#__PURE__*/ jsx(Close, {})
905
943
  }),
906
944
  isExpandable && /*#__PURE__*/ jsxs("button", {
907
945
  className: cx('relative col-span-full row-start-2 -my-3 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
908
- 'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0 after:bg-transparent after:transition-all after:duration-200', 'focus:after:h-[1px] focus:after:bg-black'),
946
+ 'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0 after:bg-transparent after:transition-all after:duration-200', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
909
947
  onClick: ()=>setIsExpanded((prevState)=>!prevState),
910
948
  "aria-expanded": isExpanded,
911
949
  "aria-controls": id,
@@ -984,4 +1022,4 @@ function Backlink(props, ref) {
984
1022
  }
985
1023
  const _Backlink = /*#__PURE__*/ forwardRef(Backlink);
986
1024
 
987
- export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, Footer, GrunnmurenProvider, Heading, HeadingContext, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField };
1025
+ export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, Footer, GrunnmurenProvider, Heading, HeadingContext, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as 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.33",
3
+ "version": "2.0.0-canary.35",
4
4
  "description": "Grunnmuren components in React",
5
5
  "repository": {
6
6
  "url": "https://github.com/code-obos/grunnmuren"