@obosbbl/grunnmuren-react 2.0.0-canary.34 → 2.0.0-canary.36

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 (3) hide show
  1. package/dist/index.d.mts +135 -3
  2. package/dist/index.mjs +61 -9
  3. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -5,6 +5,12 @@ import * as react from 'react';
5
5
  import react__default, { HTMLProps, ForwardedRef } from 'react';
6
6
  import { VariantProps } from 'cva';
7
7
 
8
+ type Locale = 'nb' | 'sv' | 'en';
9
+ /**
10
+ * Returns the locale set in `<GrunnmurenProvider />`
11
+ */
12
+ declare function _useLocale(): Locale;
13
+
8
14
  type RouterProviderProps = React.ComponentProps<typeof RouterProvider>;
9
15
  type GrunnmurenProviderProps = {
10
16
  children: React.ReactNode;
@@ -12,7 +18,7 @@ type GrunnmurenProviderProps = {
12
18
  * The locale to apply to the children.
13
19
  * @default nb
14
20
  */
15
- locale?: 'nb' | 'sv' | 'en';
21
+ locale?: Locale;
16
22
  /** The router to use for client side navigation */
17
23
  navigate?: RouterProviderProps['navigate'];
18
24
  /** Converts a router-specific href to a native HTML href, e.g. prepending a base path */
@@ -43,12 +49,136 @@ type AccordionItemProps = {
43
49
  declare const _Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
44
50
  declare const _AccordionItem: react__default.ForwardRefExoticComponent<AccordionItemProps & react__default.RefAttributes<HTMLDivElement>>;
45
51
 
52
+ type BadgeProps = VariantProps<typeof badgeVariants> & {
53
+ children?: React.ReactNode;
54
+ className?: string;
55
+ };
56
+ declare const badgeVariants: (props?: ({
57
+ color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
58
+ size?: "small" | "medium" | "large" | undefined;
59
+ } & ({
60
+ 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 | {
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
+ [x: string]: any;
80
+ } | null | undefined)[] | {
81
+ [x: string]: any;
82
+ } | null | undefined)[] | {
83
+ [x: string]: any;
84
+ } | null | undefined;
85
+ className?: never;
86
+ } | {
87
+ class?: never;
88
+ 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 | {
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
+ [x: string]: any;
108
+ } | null | undefined)[] | {
109
+ [x: string]: any;
110
+ } | null | undefined)[] | {
111
+ [x: string]: any;
112
+ } | null | undefined;
113
+ })) | undefined) => string;
114
+ declare const _Badge: react.ForwardRefExoticComponent<VariantProps<(props?: ({
115
+ color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
116
+ size?: "small" | "medium" | "large" | undefined;
117
+ } & ({
118
+ 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 | {
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
+ [x: string]: any;
138
+ } | null | undefined)[] | {
139
+ [x: string]: any;
140
+ } | null | undefined)[] | {
141
+ [x: string]: any;
142
+ } | null | undefined;
143
+ className?: never;
144
+ } | {
145
+ class?: never;
146
+ 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 | {
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
+ [x: string]: any;
166
+ } | null | undefined)[] | {
167
+ [x: string]: any;
168
+ } | null | undefined)[] | {
169
+ [x: string]: any;
170
+ } | null | undefined;
171
+ })) | undefined) => string> & {
172
+ children?: React.ReactNode;
173
+ className?: string;
174
+ } & react.RefAttributes<HTMLSpanElement>>;
175
+
46
176
  /**
47
177
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
48
178
  */
49
179
  declare const buttonVariants: (props?: ({
50
180
  variant?: "primary" | "secondary" | "tertiary" | undefined;
51
- color?: "green" | "mint" | "white" | undefined;
181
+ color?: "mint" | "white" | "green" | undefined;
52
182
  isIconOnly?: boolean | undefined;
53
183
  } & ({
54
184
  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 | {
@@ -557,6 +687,7 @@ declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
557
687
  type BreadcrumbProps = {
558
688
  /** Additional CSS className for the element. */
559
689
  className?: string;
690
+ children?: React.ReactNode;
560
691
  /** Additional style properties for the element. */
561
692
  style?: React.CSSProperties;
562
693
  /** The URL to navigate to when clicking the breadcrumb. */
@@ -565,6 +696,7 @@ type BreadcrumbProps = {
565
696
  declare const _Breadcrumb: react.ForwardRefExoticComponent<{
566
697
  /** Additional CSS className for the element. */
567
698
  className?: string;
699
+ children?: React.ReactNode;
568
700
  /** Additional style properties for the element. */
569
701
  style?: React.CSSProperties;
570
702
  /** The URL to navigate to when clicking the breadcrumb. */
@@ -598,4 +730,4 @@ type ButtonOrLinkProps = {
598
730
  type BacklinkProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
599
731
  declare const _Backlink: react.ForwardRefExoticComponent<BacklinkProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
600
732
 
601
- 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 };
733
+ 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, type Locale, _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, _useLocale as useLocale };
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  'use client';
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';
2
+ import { I18nProvider, RouterProvider, useLocale, 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, 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
5
  import { createContext, forwardRef, Children, useId, useState, useRef } from 'react';
@@ -18,6 +18,14 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
18
18
  });
19
19
  }
20
20
 
21
+ /**
22
+ * Returns the locale set in `<GrunnmurenProvider />`
23
+ */ function _useLocale() {
24
+ // a small wrapper around react-arias useLocale with a simpler return type with only the locales that we actually support
25
+ const locale = useLocale();
26
+ return locale.locale;
27
+ }
28
+
21
29
  const HeadingContext = /*#__PURE__*/ createContext({});
22
30
  const Heading = (props, ref)=>{
23
31
  [props, ref] = useContextProps(props, ref, HeadingContext);
@@ -148,6 +156,44 @@ function AccordionItem(props, ref) {
148
156
  const _Accordion = /*#__PURE__*/ forwardRef(Accordion);
149
157
  const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
150
158
 
159
+ const badgeVariants = cva({
160
+ base: [
161
+ 'inline-flex w-fit items-center justify-center gap-1.5 rounded-lg [&_svg]:shrink-0'
162
+ ],
163
+ variants: {
164
+ color: {
165
+ 'gray-dark': 'bg-gray-dark text-white',
166
+ mint: 'bg-mint',
167
+ sky: 'bg-sky',
168
+ white: 'bg-white',
169
+ 'blue-dark': 'bg-blue-dark text-white',
170
+ 'green-dark': 'bg-green-dark text-white'
171
+ },
172
+ size: {
173
+ small: 'description px-2 py-0.5 [&_svg]:h-4 [&_svg]:w-4',
174
+ medium: 'description px-2.5 py-1.5 [&_svg]:h-4 [&_svg]:w-4',
175
+ large: 'paragraph px-3 py-2 [&_svg]:h-5 [&_svg]:w-5'
176
+ }
177
+ },
178
+ defaultVariants: {
179
+ size: 'medium'
180
+ }
181
+ });
182
+ function Badge(props, ref) {
183
+ const { className: _className, color, size, ...restProps } = props;
184
+ const className = badgeVariants({
185
+ className: _className,
186
+ color,
187
+ size
188
+ });
189
+ return /*#__PURE__*/ jsx("span", {
190
+ className: className,
191
+ ...restProps,
192
+ ref: ref
193
+ });
194
+ }
195
+ const _Badge = /*#__PURE__*/ forwardRef(Badge);
196
+
151
197
  /**
152
198
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
153
199
  */ const buttonVariants = cva({
@@ -286,7 +332,13 @@ const formField = cx('group flex flex-col gap-2');
286
332
  const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
287
333
  const input = cva({
288
334
  base: [
289
- 'min-h-11 rounded-md py-2.5 text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
335
+ // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
336
+ 'bg-white',
337
+ // Use box-content to enable auto width based on number of characters (size)
338
+ // Setting min-height to prevent the input from collapsing in Safari
339
+ // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
340
+ 'box-content min-h-6 py-2.5',
341
+ 'rounded-md text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
290
342
  // invalid styles
291
343
  'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
292
344
  // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -299,7 +351,7 @@ const input = cva({
299
351
  visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
300
352
  },
301
353
  isGrouped: {
302
- false: 'bg-white px-3',
354
+ false: 'px-3',
303
355
  true: 'flex-1 !ring-0'
304
356
  }
305
357
  },
@@ -689,7 +741,7 @@ const inputVariants$1 = compose(input, cva({
689
741
  left: ''
690
742
  },
691
743
  autoWidth: {
692
- true: 'box-content max-w-fit',
744
+ true: 'max-w-fit',
693
745
  false: ''
694
746
  }
695
747
  }
@@ -754,7 +806,7 @@ const inputVariants = compose(input, cva({
754
806
  left: ''
755
807
  },
756
808
  autoWidth: {
757
- true: 'box-content max-w-fit',
809
+ true: 'max-w-fit',
758
810
  false: ''
759
811
  }
760
812
  }
@@ -861,7 +913,7 @@ const translations = {
861
913
  };
862
914
  const Alertbox = ({ children, role, className, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
863
915
  const Icon = iconMap[variant];
864
- const { locale } = useLocale();
916
+ const locale = _useLocale();
865
917
  const id = useId();
866
918
  const [isExpanded, setIsExpanded] = useState(false);
867
919
  const isCollapsed = isExpandable && !isExpanded;
@@ -894,14 +946,14 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
894
946
  /*#__PURE__*/ jsx(Icon, {}),
895
947
  firstChild,
896
948
  isDismissable && /*#__PURE__*/ jsx("button", {
897
- className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus:outline-none focus:-outline-offset-8 focus:outline-black'),
949
+ 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'),
898
950
  onClick: close,
899
951
  "aria-label": translations.close[locale],
900
952
  children: /*#__PURE__*/ jsx(Close, {})
901
953
  }),
902
954
  isExpandable && /*#__PURE__*/ jsxs("button", {
903
955
  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:
904
- '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'),
956
+ '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'),
905
957
  onClick: ()=>setIsExpanded((prevState)=>!prevState),
906
958
  "aria-expanded": isExpanded,
907
959
  "aria-controls": id,
@@ -980,4 +1032,4 @@ function Backlink(props, ref) {
980
1032
  }
981
1033
  const _Backlink = /*#__PURE__*/ forwardRef(Backlink);
982
1034
 
983
- 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 };
1035
+ 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, _useLocale as useLocale };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-react",
3
- "version": "2.0.0-canary.34",
3
+ "version": "2.0.0-canary.36",
4
4
  "description": "Grunnmuren components in React",
5
5
  "repository": {
6
6
  "url": "https://github.com/code-obos/grunnmuren"