@obosbbl/grunnmuren-react 2.0.0-canary.47 → 2.0.0-canary.49

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/dist/index.d.mts CHANGED
@@ -1,8 +1,9 @@
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, Link } from 'react-aria-components';
2
- export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
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, Link, DisclosureProps as DisclosureProps$1 } from 'react-aria-components';
2
+ export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { HTMLProps, ReactNode } from 'react';
5
+ import { HTMLProps, ReactNode, RefAttributes, HTMLAttributes } from 'react';
6
+ import * as cva from 'cva';
6
7
  import { VariantProps } from 'cva';
7
8
  import { DateFormatterOptions } from 'react-aria';
8
9
 
@@ -58,117 +59,21 @@ declare const badgeVariants: (props?: ({
58
59
  color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
59
60
  size?: "small" | "medium" | "large" | undefined;
60
61
  } & ({
61
- 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 | /*elided*/ any | {
62
- [x: string]: any;
63
- } | null | undefined)[] | {
64
- [x: string]: any;
65
- } | null | undefined)[] | {
66
- [x: string]: any;
67
- } | null | undefined)[] | {
68
- [x: string]: any;
69
- } | null | undefined)[] | {
70
- [x: string]: any;
71
- } | null | undefined)[] | {
72
- [x: string]: any;
73
- } | null | undefined)[] | {
74
- [x: string]: any;
75
- } | null | undefined)[] | {
76
- [x: string]: any;
77
- } | null | undefined)[] | {
78
- [x: string]: any;
79
- } | null | undefined)[] | {
80
- [x: string]: any;
81
- } | null | undefined)[] | {
82
- [x: string]: any;
83
- } | null | undefined)[] | {
84
- [x: string]: any;
85
- } | null | undefined;
62
+ class?: cva.ClassValue;
86
63
  className?: never;
87
64
  } | {
88
65
  class?: never;
89
- 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 | /*elided*/ any | {
90
- [x: string]: any;
91
- } | null | undefined)[] | {
92
- [x: string]: any;
93
- } | null | undefined)[] | {
94
- [x: string]: any;
95
- } | null | undefined)[] | {
96
- [x: string]: any;
97
- } | null | undefined)[] | {
98
- [x: string]: any;
99
- } | null | undefined)[] | {
100
- [x: string]: any;
101
- } | null | undefined)[] | {
102
- [x: string]: any;
103
- } | null | undefined)[] | {
104
- [x: string]: any;
105
- } | null | undefined)[] | {
106
- [x: string]: any;
107
- } | null | undefined)[] | {
108
- [x: string]: any;
109
- } | null | undefined)[] | {
110
- [x: string]: any;
111
- } | null | undefined)[] | {
112
- [x: string]: any;
113
- } | null | undefined;
66
+ className?: cva.ClassValue;
114
67
  })) | undefined) => string;
115
68
  declare const _Badge: react.ForwardRefExoticComponent<VariantProps<(props?: ({
116
69
  color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
117
70
  size?: "small" | "medium" | "large" | undefined;
118
71
  } & ({
119
- 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 | /*elided*/ any | {
120
- [x: string]: any;
121
- } | null | undefined)[] | {
122
- [x: string]: any;
123
- } | null | undefined)[] | {
124
- [x: string]: any;
125
- } | null | undefined)[] | {
126
- [x: string]: any;
127
- } | null | undefined)[] | {
128
- [x: string]: any;
129
- } | null | undefined)[] | {
130
- [x: string]: any;
131
- } | null | undefined)[] | {
132
- [x: string]: any;
133
- } | null | undefined)[] | {
134
- [x: string]: any;
135
- } | null | undefined)[] | {
136
- [x: string]: any;
137
- } | null | undefined)[] | {
138
- [x: string]: any;
139
- } | null | undefined)[] | {
140
- [x: string]: any;
141
- } | null | undefined)[] | {
142
- [x: string]: any;
143
- } | null | undefined;
72
+ class?: cva.ClassValue;
144
73
  className?: never;
145
74
  } | {
146
75
  class?: never;
147
- 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 | /*elided*/ any | {
148
- [x: string]: any;
149
- } | null | undefined)[] | {
150
- [x: string]: any;
151
- } | null | undefined)[] | {
152
- [x: string]: any;
153
- } | null | undefined)[] | {
154
- [x: string]: any;
155
- } | null | undefined)[] | {
156
- [x: string]: any;
157
- } | null | undefined)[] | {
158
- [x: string]: any;
159
- } | null | undefined)[] | {
160
- [x: string]: any;
161
- } | null | undefined)[] | {
162
- [x: string]: any;
163
- } | null | undefined)[] | {
164
- [x: string]: any;
165
- } | null | undefined)[] | {
166
- [x: string]: any;
167
- } | null | undefined)[] | {
168
- [x: string]: any;
169
- } | null | undefined)[] | {
170
- [x: string]: any;
171
- } | null | undefined;
76
+ className?: cva.ClassValue;
172
77
  })) | undefined) => string> & {
173
78
  children?: React.ReactNode;
174
79
  className?: string;
@@ -183,59 +88,11 @@ declare const buttonVariants: (props?: ({
183
88
  isIconOnly?: boolean | undefined;
184
89
  isPending?: boolean | undefined;
185
90
  } & ({
186
- 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 | /*elided*/ any | {
187
- [x: string]: any;
188
- } | null | undefined)[] | {
189
- [x: string]: any;
190
- } | null | undefined)[] | {
191
- [x: string]: any;
192
- } | null | undefined)[] | {
193
- [x: string]: any;
194
- } | null | undefined)[] | {
195
- [x: string]: any;
196
- } | null | undefined)[] | {
197
- [x: string]: any;
198
- } | null | undefined)[] | {
199
- [x: string]: any;
200
- } | null | undefined)[] | {
201
- [x: string]: any;
202
- } | null | undefined)[] | {
203
- [x: string]: any;
204
- } | null | undefined)[] | {
205
- [x: string]: any;
206
- } | null | undefined)[] | {
207
- [x: string]: any;
208
- } | null | undefined)[] | {
209
- [x: string]: any;
210
- } | null | undefined;
91
+ class?: cva.ClassValue;
211
92
  className?: never;
212
93
  } | {
213
94
  class?: never;
214
- 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 | /*elided*/ any | {
215
- [x: string]: any;
216
- } | null | undefined)[] | {
217
- [x: string]: any;
218
- } | null | undefined)[] | {
219
- [x: string]: any;
220
- } | null | undefined)[] | {
221
- [x: string]: any;
222
- } | null | undefined)[] | {
223
- [x: string]: any;
224
- } | null | undefined)[] | {
225
- [x: string]: any;
226
- } | null | undefined)[] | {
227
- [x: string]: any;
228
- } | null | undefined)[] | {
229
- [x: string]: any;
230
- } | null | undefined)[] | {
231
- [x: string]: any;
232
- } | null | undefined)[] | {
233
- [x: string]: any;
234
- } | null | undefined)[] | {
235
- [x: string]: any;
236
- } | null | undefined)[] | {
237
- [x: string]: any;
238
- } | null | undefined;
95
+ className?: cva.ClassValue;
239
96
  })) | undefined) => string;
240
97
  type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
241
98
  children?: React.ReactNode;
@@ -600,59 +457,11 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
600
457
  declare const alertVariants: (props?: ({
601
458
  variant?: "info" | "success" | "warning" | "danger" | undefined;
602
459
  } & ({
603
- 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 | /*elided*/ any | {
604
- [x: string]: any;
605
- } | null | undefined)[] | {
606
- [x: string]: any;
607
- } | null | undefined)[] | {
608
- [x: string]: any;
609
- } | null | undefined)[] | {
610
- [x: string]: any;
611
- } | null | undefined)[] | {
612
- [x: string]: any;
613
- } | null | undefined)[] | {
614
- [x: string]: any;
615
- } | null | undefined)[] | {
616
- [x: string]: any;
617
- } | null | undefined)[] | {
618
- [x: string]: any;
619
- } | null | undefined)[] | {
620
- [x: string]: any;
621
- } | null | undefined)[] | {
622
- [x: string]: any;
623
- } | null | undefined)[] | {
624
- [x: string]: any;
625
- } | null | undefined)[] | {
626
- [x: string]: any;
627
- } | null | undefined;
460
+ class?: cva.ClassValue;
628
461
  className?: never;
629
462
  } | {
630
463
  class?: never;
631
- 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 | /*elided*/ any | {
632
- [x: string]: any;
633
- } | null | undefined)[] | {
634
- [x: string]: any;
635
- } | null | undefined)[] | {
636
- [x: string]: any;
637
- } | null | undefined)[] | {
638
- [x: string]: any;
639
- } | null | undefined)[] | {
640
- [x: string]: any;
641
- } | null | undefined)[] | {
642
- [x: string]: any;
643
- } | null | undefined)[] | {
644
- [x: string]: any;
645
- } | null | undefined)[] | {
646
- [x: string]: any;
647
- } | null | undefined)[] | {
648
- [x: string]: any;
649
- } | null | undefined)[] | {
650
- [x: string]: any;
651
- } | null | undefined)[] | {
652
- [x: string]: any;
653
- } | null | undefined)[] | {
654
- [x: string]: any;
655
- } | null | undefined;
464
+ className?: cva.ClassValue;
656
465
  })) | undefined) => string;
657
466
  type Props = VariantProps<typeof alertVariants> & {
658
467
  children: React.ReactNode;
@@ -662,6 +471,8 @@ type Props = VariantProps<typeof alertVariants> & {
662
471
  role: 'alert' | 'status' | 'none';
663
472
  /** Additional CSS className for the element. */
664
473
  className?: string;
474
+ /** 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. */
475
+ icon?: React.ComponentType;
665
476
  /**
666
477
  * Controls if the alert is expandable or not
667
478
  * @default false
@@ -684,7 +495,7 @@ type Props = VariantProps<typeof alertVariants> & {
684
495
  */
685
496
  onDismiss?: () => void;
686
497
  };
687
- declare const Alertbox: ({ children, role, className, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
498
+ declare const Alertbox: ({ children, role, className, icon, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
688
499
 
689
500
  type HeadingProps = HTMLProps<HTMLHeadingElement> & {
690
501
  children?: React.ReactNode;
@@ -768,59 +579,11 @@ type CardProps = VariantProps<typeof cardVariants> & {
768
579
  declare const cardVariants: (props?: ({
769
580
  variant?: "subtle" | "outlined" | undefined;
770
581
  } & ({
771
- 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 | /*elided*/ any | {
772
- [x: string]: any;
773
- } | null | undefined)[] | {
774
- [x: string]: any;
775
- } | null | undefined)[] | {
776
- [x: string]: any;
777
- } | null | undefined)[] | {
778
- [x: string]: any;
779
- } | null | undefined)[] | {
780
- [x: string]: any;
781
- } | null | undefined)[] | {
782
- [x: string]: any;
783
- } | null | undefined)[] | {
784
- [x: string]: any;
785
- } | null | undefined)[] | {
786
- [x: string]: any;
787
- } | null | undefined)[] | {
788
- [x: string]: any;
789
- } | null | undefined)[] | {
790
- [x: string]: any;
791
- } | null | undefined)[] | {
792
- [x: string]: any;
793
- } | null | undefined)[] | {
794
- [x: string]: any;
795
- } | null | undefined;
582
+ class?: cva.ClassValue;
796
583
  className?: never;
797
584
  } | {
798
585
  class?: never;
799
- 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 | /*elided*/ any | {
800
- [x: string]: any;
801
- } | null | undefined)[] | {
802
- [x: string]: any;
803
- } | null | undefined)[] | {
804
- [x: string]: any;
805
- } | null | undefined)[] | {
806
- [x: string]: any;
807
- } | null | undefined)[] | {
808
- [x: string]: any;
809
- } | null | undefined)[] | {
810
- [x: string]: any;
811
- } | null | undefined)[] | {
812
- [x: string]: any;
813
- } | null | undefined)[] | {
814
- [x: string]: any;
815
- } | null | undefined)[] | {
816
- [x: string]: any;
817
- } | null | undefined)[] | {
818
- [x: string]: any;
819
- } | null | undefined)[] | {
820
- [x: string]: any;
821
- } | null | undefined)[] | {
822
- [x: string]: any;
823
- } | null | undefined;
586
+ className?: cva.ClassValue;
824
587
  })) | undefined) => string;
825
588
  declare const Card: ({ children, className: _className, variant, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
826
589
  type CardLinkWrapperProps = {
@@ -865,4 +628,29 @@ type VideoLoopProps = {
865
628
  };
866
629
  declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
867
630
 
868
- 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, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, _Heading as Heading, HeadingContext, type HeadingProps, type Locale, Media, type MediaProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps, VideoLoop, _useLocale as useLocale };
631
+ declare const disclosureButtonVariants: (props?: ({
632
+ withChevron?: boolean | undefined;
633
+ isIconOnly?: boolean | undefined;
634
+ } & ({
635
+ class?: cva.ClassValue;
636
+ className?: never;
637
+ } | {
638
+ class?: never;
639
+ className?: cva.ClassValue;
640
+ })) | undefined) => string;
641
+ type DisclosureButtonProps = Omit<ButtonProps$1, 'children' | 'aria-expanded' | 'aria-controls'> & VariantProps<typeof disclosureButtonVariants> & {
642
+ children: React.ReactNode;
643
+ } & RefAttributes<HTMLButtonElement>;
644
+ declare const DisclosureButton: ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps }: DisclosureButtonProps) => react_jsx_runtime.JSX.Element;
645
+ type DisclosureProps = DisclosureProps$1 & RefAttributes<HTMLDivElement> & {
646
+ children: React.ReactNode;
647
+ className?: string;
648
+ };
649
+ declare const Disclosure: ({ ref: _ref, children, ..._props }: DisclosureProps) => react_jsx_runtime.JSX.Element;
650
+ type DisclosurePanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
651
+ children: React.ReactNode;
652
+ role?: 'group' | 'region' | 'none';
653
+ } & RefAttributes<HTMLDivElement>;
654
+ declare const DisclosurePanel: ({ ref: _ref, ..._props }: DisclosurePanelProps) => react_jsx_runtime.JSX.Element;
655
+
656
+ 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, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, _Heading as Heading, HeadingContext, type HeadingProps, type Locale, Media, type MediaProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps, 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, VideoLoop, _useLocale as useLocale };
package/dist/index.mjs CHANGED
@@ -1,12 +1,13 @@
1
1
  'use client';
2
- import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, Header, 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
- export { Form } from 'react-aria-components';
2
+ import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, Header, 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, ButtonContext, DisclosureContext, DisclosureGroupStateContext } from 'react-aria-components';
3
+ export { Form, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
5
  import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
6
- import { useLayoutEffect } from '@react-aria/utils';
6
+ import { useLayoutEffect, filterDOMProps } from '@react-aria/utils';
7
7
  import { cx, cva, compose } from 'cva';
8
- import { createContext, forwardRef, Children, useId, useState, useRef, useEffect } from 'react';
9
- import { useProgressBar, useDateFormatter } from 'react-aria';
8
+ import { createContext, forwardRef, Children, useId, useState, useRef, useEffect, useContext } from 'react';
9
+ import { useProgressBar, useDateFormatter, useDisclosure } from 'react-aria';
10
+ import { useDisclosureState } from 'react-stately';
10
11
 
11
12
  function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
12
13
  return /*#__PURE__*/ jsx(I18nProvider, {
@@ -242,7 +243,7 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
242
243
  },
243
244
  // Make the content of the button transparent to hide it's content, but keep the button width
244
245
  isPending: {
245
- true: 'relative !text-transparent',
246
+ true: '!text-transparent relative',
246
247
  false: null
247
248
  }
248
249
  },
@@ -267,7 +268,7 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
267
268
  color: 'mint',
268
269
  variant: 'primary',
269
270
  // Darken bg by 20% on hover. The color is manually crafted
270
- className: 'active:[#9ddac6] bg-mint text-black hover:bg-[#8dd4bd] [&_[role="progressbar"]]:text-black'
271
+ className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
271
272
  },
272
273
  {
273
274
  color: 'mint',
@@ -352,7 +353,7 @@ function Button(props, ref) {
352
353
  const _Button = /*#__PURE__*/ forwardRef(Button);
353
354
 
354
355
  const formField = cx('group flex flex-col gap-2');
355
- const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
356
+ const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-red text-sm leading-6');
356
357
  const input = cva({
357
358
  base: [
358
359
  // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
@@ -361,7 +362,7 @@ const input = cva({
361
362
  // Setting min-height to prevent the input from collapsing in Safari
362
363
  // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
363
364
  'box-content min-h-6 py-2.5',
364
- 'rounded-md text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
365
+ 'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
365
366
  // invalid styles
366
367
  'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red',
367
368
  // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -375,7 +376,7 @@ const input = cva({
375
376
  },
376
377
  isGrouped: {
377
378
  false: 'px-3',
378
- true: 'flex-1 !ring-0'
379
+ true: '!ring-0 flex-1'
379
380
  }
380
381
  },
381
382
  defaultVariants: {
@@ -388,7 +389,7 @@ const inputGroup = cx([
388
389
  'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
389
390
  ]);
390
391
  const dropdown = {
391
- popover: cx('min-w-[--trigger-width] overflow-y-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
392
+ popover: cx('data-[entering]:fade-in data-[exiting]:fade-out min-w-[--trigger-width] overflow-y-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out'),
392
393
  // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
393
394
  listbox: cx('max-h-[25rem] overflow-x-hidden text-sm outline-none'),
394
395
  chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
@@ -405,7 +406,7 @@ function ErrorMessage(props) {
405
406
  }
406
407
 
407
408
  const defaultClasses$1 = cx([
408
- 'group relative left-0 -mx-2.5 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
409
+ 'group -mx-2.5 relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
409
410
  ]);
410
411
  // Pulling this out into it's own component. Will probably export it in the future
411
412
  // so it can be used in other views, outside of an input of type checkbox, like in table rows.
@@ -423,10 +424,10 @@ function CheckmarkBox() {
423
424
  // focus
424
425
  'group-data-[focus-visible]:outline-focus-offset',
425
426
  // hovered
426
- 'group-data-[hovered]:border-green group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:bg-green-lightest group-data-[hovered]:group-data-[invalid]:bg-red-light',
427
+ 'group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:group-data-[invalid]:bg-red-light group-data-[hovered]:border-green group-data-[hovered]:bg-green-lightest',
427
428
  // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
428
429
  // so we use an inner shadow of 1 px instead to pad the actual border
429
- 'group-data-[invalid]:border-red group-data-[invalid]:group-data-[selected]:shadow-none group-data-[invalid]:shadow-[inset_0_0_0_1px] group-data-[invalid]:shadow-red'
430
+ 'group-data-[invalid]:group-data-[selected]:shadow-none group-data-[invalid]:border-red group-data-[invalid]:shadow-[inset_0_0_0_1px] group-data-[invalid]:shadow-red'
430
431
  ]),
431
432
  children: /*#__PURE__*/ jsx(Check, {
432
433
  className: "h-full w-full opacity-0 group-data-[selected]:opacity-100"
@@ -568,7 +569,7 @@ const ListBoxItem = (props)=>{
568
569
  * This component can be used to label grouped items in a `ListBoxSection` with a heading
569
570
  */ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header, {
570
571
  ...props,
571
- className: cx(props.className, 'mx-6 cursor-default py-2 font-medium leading-6 text-blue-dark')
572
+ className: cx(props.className, 'mx-6 cursor-default py-2 font-medium text-blue-dark leading-6')
572
573
  });
573
574
 
574
575
  function InputAddonDivider() {
@@ -660,7 +661,7 @@ function RadioGroup(props, ref) {
660
661
  const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
661
662
 
662
663
  const defaultClasses = cx([
663
- 'relative -ml-2.5 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
664
+ '-ml-2.5 relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
664
665
  // the radio button itself
665
666
  'before:flex-none before:rounded-full before:border-2 before:border-black',
666
667
  // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
@@ -671,12 +672,12 @@ const defaultClasses = cx([
671
672
  // selected
672
673
  'data-[selected]:before:border-black data-[selected]:before:bg-green data-[selected]:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
673
674
  // hover
674
- 'data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light',
675
+ 'data-[hovered]:data-[invalid]:before:bg-red-light data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest',
675
676
  // focus
676
677
  'data-[focus-visible]:before:ring-focus-offset',
677
678
  // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
678
679
  // so we use an inner outline to artifically pad the border
679
- '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'
680
+ 'data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:border-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-red data-[invalid]:before:outline-solid data-[invalid]:before:outline-offset-[-3px]'
680
681
  ]);
681
682
  function Radio(props, ref) {
682
683
  const { children, className, description, ...restProps } = props;
@@ -910,11 +911,11 @@ const alertVariants = cva({
910
911
  base: [
911
912
  'grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md border-2 px-3 py-2',
912
913
  // Heading styles:
913
- '[&_[data-slot="heading"]]:text-base [&_[data-slot="heading"]]:font-medium [&_[data-slot="heading"]]:leading-7',
914
+ '[&_[data-slot="heading"]]:font-medium [&_[data-slot="heading"]]:text-base [&_[data-slot="heading"]]:leading-7',
914
915
  // Content styles:
915
916
  '[&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full [&_[data-slot="content"]]:text-sm [&_[data-slot="content"]]:leading-6',
916
917
  // Footer styles:
917
- '[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:text-xs [&_[data-slot="footer"]]:font-light [&_[data-slot="footer"]]:leading-6'
918
+ '[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:font-light [&_[data-slot="footer"]]:text-xs [&_[data-slot="footer"]]:leading-6'
918
919
  ],
919
920
  variants: {
920
921
  /**
@@ -948,8 +949,8 @@ const translations = {
948
949
  en: 'Show less'
949
950
  }
950
951
  };
951
- const Alertbox = ({ children, role, className, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
952
- const Icon = iconMap[variant];
952
+ const Alertbox = ({ children, role, className, icon, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
953
+ const Icon = icon ?? iconMap[variant];
953
954
  const locale = _useLocale();
954
955
  const id = useId();
955
956
  const [isExpanded, setIsExpanded] = useState(false);
@@ -982,15 +983,15 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
982
983
  /*#__PURE__*/ jsx(Icon, {}),
983
984
  firstChild,
984
985
  isDismissable && /*#__PURE__*/ jsx("button", {
985
- className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:outline-focus focus-visible:-outline-offset-8'),
986
+ className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:-outline-offset-8 focus-visible:outline-focus'),
986
987
  onClick: close,
987
988
  "aria-label": translations.close[locale],
988
989
  type: "button",
989
990
  children: /*#__PURE__*/ jsx(Close, {})
990
991
  }),
991
992
  isExpandable && /*#__PURE__*/ jsxs("button", {
992
- 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:
993
- 'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
993
+ className: cx('-my-3 relative col-span-full row-start-2 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
994
+ 'outline-none after:absolute after:right-0 after:bottom-3 after:left-0 after:h-0', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
994
995
  onClick: ()=>setIsExpanded((prevState)=>!prevState),
995
996
  "aria-expanded": isExpanded,
996
997
  "aria-controls": id,
@@ -1032,7 +1033,7 @@ function Breadcrumb(props, ref) {
1032
1033
  href ? /*#__PURE__*/ jsx(Link, {
1033
1034
  href: href,
1034
1035
  // use outline instead of ring for focus marker that can be offset without creating a white background between the focus marker and the element content
1035
- className: "rounded-sm data-[focus-visible]:outline-focus group-last:no-underline [&:not([data-focus-visible])]:outline-none",
1036
+ className: "rounded-sm group-last:no-underline data-[focus-visible]:outline-focus [&:not([data-focus-visible])]:outline-none",
1036
1037
  children: children
1037
1038
  }) : children,
1038
1039
  /*#__PURE__*/ jsx(ChevronRight, {
@@ -1056,11 +1057,11 @@ function Backlink(props, ref) {
1056
1057
  ref: ref,
1057
1058
  children: [
1058
1059
  /*#__PURE__*/ jsx(ChevronLeft, {
1059
- className: cx('-ml-[0.5em] flex-shrink-0 transition-transform duration-300 group-hover:-translate-x-1')
1060
+ className: cx('-ml-[0.5em] group-hover:-translate-x-1 flex-shrink-0 transition-transform duration-300')
1060
1061
  }),
1061
1062
  /*#__PURE__*/ jsx("span", {
1062
1063
  children: /*#__PURE__*/ jsx("span", {
1063
- className: cx('border-b-[1px] border-t-[1px] border-transparent transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
1064
+ className: cx('border-transparent border-t-[1px] border-b-[1px] transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
1064
1065
  children: children
1065
1066
  })
1066
1067
  })
@@ -1285,7 +1286,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
1285
1286
  "aria-hidden": true,
1286
1287
  type: "button",
1287
1288
  onClick: ()=>setShouldPlay((prevState)=>!prevState),
1288
- className: cx('absolute bottom-0 left-0 right-0 top-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
1289
+ className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
1289
1290
  shouldPlay && 'opacity-0', isPlaying && [
1290
1291
  'transition-opacity duration-200',
1291
1292
  // Only show the pause button when the video is hovered or focused
@@ -1305,4 +1306,120 @@ const VideoLoop = ({ src, format, alt, className })=>{
1305
1306
  });
1306
1307
  };
1307
1308
 
1308
- export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Caption, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, _Heading as Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, _TextArea as TextArea, _TextField as TextField, VideoLoop, _useLocale as useLocale };
1309
+ const disclosureButtonVariants = cva({
1310
+ base: [
1311
+ 'inline-flex cursor-pointer items-center justify-between rounded-lg outline-none data-[focus-visible]:outline-focus',
1312
+ // Ensure a minimum click area of 44x44px, while making it look like it only has the size of the content
1313
+ '-m-2.5 p-2.5 data-[focus-visible]:outline-offset-[-0.625rem]'
1314
+ ],
1315
+ variants: {
1316
+ withChevron: {
1317
+ true: '[&[aria-expanded="true"]_svg]:rotate-180',
1318
+ false: null
1319
+ },
1320
+ /**
1321
+ * When the button is without text, but with a single icon.
1322
+ * @default false
1323
+ */ isIconOnly: {
1324
+ true: '[&>svg]:h-7 [&>svg]:w-7',
1325
+ false: 'gap-2.5'
1326
+ }
1327
+ },
1328
+ defaultVariants: {
1329
+ withChevron: false,
1330
+ isIconOnly: false
1331
+ }
1332
+ });
1333
+ const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
1334
+ const [props, ref] = useContextProps(restProps, _ref, ButtonContext);
1335
+ return /*#__PURE__*/ jsxs(Button$1, {
1336
+ ...props,
1337
+ ref: ref,
1338
+ className: disclosureButtonVariants({
1339
+ className,
1340
+ withChevron,
1341
+ isIconOnly
1342
+ }),
1343
+ children: [
1344
+ children,
1345
+ withChevron && /*#__PURE__*/ jsx(ChevronDown, {
1346
+ className: "flex-none transition-transform duration-300 motion-reduce:transition-none"
1347
+ })
1348
+ ]
1349
+ });
1350
+ };
1351
+ const Disclosure = ({ ref: _ref, children, ..._props })=>{
1352
+ const [props, ref] = useContextProps(_props, _ref, DisclosureContext);
1353
+ const groupState = useContext(DisclosureGroupStateContext);
1354
+ let { id, ...otherProps } = props;
1355
+ const defaultId = useId();
1356
+ id ||= defaultId;
1357
+ const isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
1358
+ const state = useDisclosureState({
1359
+ ...props,
1360
+ isExpanded,
1361
+ onExpandedChange (isExpanded) {
1362
+ if (groupState) {
1363
+ groupState.toggleKey(id);
1364
+ }
1365
+ props.onExpandedChange?.(isExpanded);
1366
+ }
1367
+ });
1368
+ const isDisabled = props.isDisabled || groupState?.isDisabled || false;
1369
+ const domProps = filterDOMProps(otherProps);
1370
+ const panelRef = useRef(null);
1371
+ const { buttonProps, panelProps } = useDisclosure({
1372
+ ...props,
1373
+ isExpanded,
1374
+ isDisabled
1375
+ }, state, panelRef);
1376
+ const { role: _, ...propsWithoutRole } = panelProps;
1377
+ return /*#__PURE__*/ jsx(Provider, {
1378
+ values: [
1379
+ [
1380
+ DisclosureContext,
1381
+ state
1382
+ ],
1383
+ [
1384
+ ButtonContext,
1385
+ buttonProps
1386
+ ],
1387
+ [
1388
+ DisclosurePanelContext,
1389
+ {
1390
+ ...propsWithoutRole,
1391
+ ref: panelRef
1392
+ }
1393
+ ]
1394
+ ],
1395
+ children: /*#__PURE__*/ jsx("div", {
1396
+ ...domProps,
1397
+ className: otherProps.className,
1398
+ ref: ref,
1399
+ "data-expanded": state.isExpanded || undefined,
1400
+ "data-disabled": isDisabled || undefined,
1401
+ children: children
1402
+ })
1403
+ });
1404
+ };
1405
+ const DisclosurePanelContext = /*#__PURE__*/ createContext({});
1406
+ const DisclosurePanel = ({ ref: _ref, ..._props })=>{
1407
+ const disclosureContext = useContext(DisclosureContext);
1408
+ const [props, ref] = useContextProps(_props, _ref, DisclosurePanelContext);
1409
+ const { role: _role = 'group', className, ...restProps } = props;
1410
+ const ariaLabelledby = _props['aria-labelledby'] ?? restProps['aria-labelledby'];
1411
+ const isWithoutRole = _role === 'none';
1412
+ const role = isWithoutRole ? undefined : _role;
1413
+ return /*#__PURE__*/ jsx("div", {
1414
+ className: cx('grid transition-all duration-300 after:relative after:block after:h-0 after:transition-all after:duration-300 motion-reduce:transition-none', disclosureContext?.isExpanded ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr]'),
1415
+ children: /*#__PURE__*/ jsx("div", {
1416
+ ...restProps,
1417
+ ref: ref,
1418
+ className: cx(className, 'relative overflow-hidden [content-visibility:visible] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5'),
1419
+ role: role,
1420
+ "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby
1421
+ })
1422
+ });
1423
+ };
1424
+
1425
+ export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Caption, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, _Heading as Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, _TextArea as TextArea, _TextField as TextField, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, VideoLoop, _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.47",
3
+ "version": "2.0.0-canary.49",
4
4
  "description": "Grunnmuren components in React",
5
5
  "repository": {
6
6
  "url": "https://github.com/code-obos/grunnmuren"
@@ -18,12 +18,13 @@
18
18
  "dist"
19
19
  ],
20
20
  "dependencies": {
21
- "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.5",
21
+ "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.7",
22
22
  "@react-aria/utils": "^3.25.1",
23
23
  "@types/node": "^22.0.0",
24
- "cva": "1.0.0-beta.2",
24
+ "cva": "^1.0.0-0",
25
25
  "react-aria": "^3.35.1",
26
- "react-aria-components": "^1.3.1"
26
+ "react-aria-components": "^1.3.1",
27
+ "react-stately": "^3.35.0"
27
28
  },
28
29
  "peerDependencies": {
29
30
  "react": "^18 || ^19"