@obosbbl/grunnmuren-react 2.0.0-canary.47 → 2.0.0-canary.48
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 +14 -251
- package/dist/index.mjs +24 -24
- package/package.json +3 -3
package/dist/index.d.mts
CHANGED
|
@@ -3,6 +3,7 @@ export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as Select
|
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import * as react from 'react';
|
|
5
5
|
import { HTMLProps, ReactNode } 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?:
|
|
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?:
|
|
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?:
|
|
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?:
|
|
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?:
|
|
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?:
|
|
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?:
|
|
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?:
|
|
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?:
|
|
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?:
|
|
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 = {
|
package/dist/index.mjs
CHANGED
|
@@ -242,7 +242,7 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
|
|
|
242
242
|
},
|
|
243
243
|
// Make the content of the button transparent to hide it's content, but keep the button width
|
|
244
244
|
isPending: {
|
|
245
|
-
true: '
|
|
245
|
+
true: '!text-transparent relative',
|
|
246
246
|
false: null
|
|
247
247
|
}
|
|
248
248
|
},
|
|
@@ -267,7 +267,7 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
|
|
|
267
267
|
color: 'mint',
|
|
268
268
|
variant: 'primary',
|
|
269
269
|
// Darken bg by 20% on hover. The color is manually crafted
|
|
270
|
-
className: '
|
|
270
|
+
className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
|
|
271
271
|
},
|
|
272
272
|
{
|
|
273
273
|
color: 'mint',
|
|
@@ -352,7 +352,7 @@ function Button(props, ref) {
|
|
|
352
352
|
const _Button = /*#__PURE__*/ forwardRef(Button);
|
|
353
353
|
|
|
354
354
|
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
|
|
355
|
+
const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-red text-sm leading-6');
|
|
356
356
|
const input = cva({
|
|
357
357
|
base: [
|
|
358
358
|
// All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
|
|
@@ -361,7 +361,7 @@ const input = cva({
|
|
|
361
361
|
// Setting min-height to prevent the input from collapsing in Safari
|
|
362
362
|
// Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
|
|
363
363
|
'box-content min-h-6 py-2.5',
|
|
364
|
-
'rounded-md text-base
|
|
364
|
+
'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
|
|
365
365
|
// invalid styles
|
|
366
366
|
'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red',
|
|
367
367
|
// Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
|
|
@@ -375,7 +375,7 @@ const input = cva({
|
|
|
375
375
|
},
|
|
376
376
|
isGrouped: {
|
|
377
377
|
false: 'px-3',
|
|
378
|
-
true: '
|
|
378
|
+
true: '!ring-0 flex-1'
|
|
379
379
|
}
|
|
380
380
|
},
|
|
381
381
|
defaultVariants: {
|
|
@@ -388,7 +388,7 @@ const inputGroup = cx([
|
|
|
388
388
|
'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
|
|
389
389
|
]);
|
|
390
390
|
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
|
|
391
|
+
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
392
|
// overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
|
|
393
393
|
listbox: cx('max-h-[25rem] overflow-x-hidden text-sm outline-none'),
|
|
394
394
|
chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
|
|
@@ -405,7 +405,7 @@ function ErrorMessage(props) {
|
|
|
405
405
|
}
|
|
406
406
|
|
|
407
407
|
const defaultClasses$1 = cx([
|
|
408
|
-
'group
|
|
408
|
+
'group -mx-2.5 relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
|
|
409
409
|
]);
|
|
410
410
|
// Pulling this out into it's own component. Will probably export it in the future
|
|
411
411
|
// so it can be used in other views, outside of an input of type checkbox, like in table rows.
|
|
@@ -423,10 +423,10 @@ function CheckmarkBox() {
|
|
|
423
423
|
// focus
|
|
424
424
|
'group-data-[focus-visible]:outline-focus-offset',
|
|
425
425
|
// hovered
|
|
426
|
-
'group-data-[hovered]:border-
|
|
426
|
+
'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
427
|
// 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
428
|
// so we use an inner shadow of 1 px instead to pad the actual border
|
|
429
|
-
'group-data-[invalid]:
|
|
429
|
+
'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
430
|
]),
|
|
431
431
|
children: /*#__PURE__*/ jsx(Check, {
|
|
432
432
|
className: "h-full w-full opacity-0 group-data-[selected]:opacity-100"
|
|
@@ -568,7 +568,7 @@ const ListBoxItem = (props)=>{
|
|
|
568
568
|
* This component can be used to label grouped items in a `ListBoxSection` with a heading
|
|
569
569
|
*/ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header, {
|
|
570
570
|
...props,
|
|
571
|
-
className: cx(props.className, 'mx-6 cursor-default py-2 font-medium
|
|
571
|
+
className: cx(props.className, 'mx-6 cursor-default py-2 font-medium text-blue-dark leading-6')
|
|
572
572
|
});
|
|
573
573
|
|
|
574
574
|
function InputAddonDivider() {
|
|
@@ -660,7 +660,7 @@ function RadioGroup(props, ref) {
|
|
|
660
660
|
const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
|
|
661
661
|
|
|
662
662
|
const defaultClasses = cx([
|
|
663
|
-
'
|
|
663
|
+
'-ml-2.5 relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
|
|
664
664
|
// the radio button itself
|
|
665
665
|
'before:flex-none before:rounded-full before:border-2 before:border-black',
|
|
666
666
|
// 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 +671,12 @@ const defaultClasses = cx([
|
|
|
671
671
|
// selected
|
|
672
672
|
'data-[selected]:before:border-black data-[selected]:before:bg-green data-[selected]:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
|
|
673
673
|
// hover
|
|
674
|
-
'data-[hovered]:
|
|
674
|
+
'data-[hovered]:data-[invalid]:before:bg-red-light data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest',
|
|
675
675
|
// focus
|
|
676
676
|
'data-[focus-visible]:before:ring-focus-offset',
|
|
677
677
|
// 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
678
|
// so we use an inner outline to artifically pad the border
|
|
679
|
-
'data-[invalid]:
|
|
679
|
+
'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
680
|
]);
|
|
681
681
|
function Radio(props, ref) {
|
|
682
682
|
const { children, className, description, ...restProps } = props;
|
|
@@ -910,11 +910,11 @@ const alertVariants = cva({
|
|
|
910
910
|
base: [
|
|
911
911
|
'grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md border-2 px-3 py-2',
|
|
912
912
|
// Heading styles:
|
|
913
|
-
'[&_[data-slot="heading"]]:
|
|
913
|
+
'[&_[data-slot="heading"]]:font-medium [&_[data-slot="heading"]]:text-base [&_[data-slot="heading"]]:leading-7',
|
|
914
914
|
// Content styles:
|
|
915
915
|
'[&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full [&_[data-slot="content"]]:text-sm [&_[data-slot="content"]]:leading-6',
|
|
916
916
|
// Footer styles:
|
|
917
|
-
'[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:
|
|
917
|
+
'[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:font-light [&_[data-slot="footer"]]:text-xs [&_[data-slot="footer"]]:leading-6'
|
|
918
918
|
],
|
|
919
919
|
variants: {
|
|
920
920
|
/**
|
|
@@ -948,8 +948,8 @@ const translations = {
|
|
|
948
948
|
en: 'Show less'
|
|
949
949
|
}
|
|
950
950
|
};
|
|
951
|
-
const Alertbox = ({ children, role, className, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
|
|
952
|
-
const Icon = iconMap[variant];
|
|
951
|
+
const Alertbox = ({ children, role, className, icon, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
|
|
952
|
+
const Icon = icon ?? iconMap[variant];
|
|
953
953
|
const locale = _useLocale();
|
|
954
954
|
const id = useId();
|
|
955
955
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
@@ -982,15 +982,15 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
|
|
|
982
982
|
/*#__PURE__*/ jsx(Icon, {}),
|
|
983
983
|
firstChild,
|
|
984
984
|
isDismissable && /*#__PURE__*/ jsx("button", {
|
|
985
|
-
className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible
|
|
985
|
+
className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:-outline-offset-8 focus-visible:outline-focus'),
|
|
986
986
|
onClick: close,
|
|
987
987
|
"aria-label": translations.close[locale],
|
|
988
988
|
type: "button",
|
|
989
989
|
children: /*#__PURE__*/ jsx(Close, {})
|
|
990
990
|
}),
|
|
991
991
|
isExpandable && /*#__PURE__*/ jsxs("button", {
|
|
992
|
-
className: cx('relative col-span-full row-start-2
|
|
993
|
-
'outline-none after:absolute after:
|
|
992
|
+
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:
|
|
993
|
+
'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
994
|
onClick: ()=>setIsExpanded((prevState)=>!prevState),
|
|
995
995
|
"aria-expanded": isExpanded,
|
|
996
996
|
"aria-controls": id,
|
|
@@ -1032,7 +1032,7 @@ function Breadcrumb(props, ref) {
|
|
|
1032
1032
|
href ? /*#__PURE__*/ jsx(Link, {
|
|
1033
1033
|
href: href,
|
|
1034
1034
|
// 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
|
|
1035
|
+
className: "rounded-sm group-last:no-underline data-[focus-visible]:outline-focus [&:not([data-focus-visible])]:outline-none",
|
|
1036
1036
|
children: children
|
|
1037
1037
|
}) : children,
|
|
1038
1038
|
/*#__PURE__*/ jsx(ChevronRight, {
|
|
@@ -1056,11 +1056,11 @@ function Backlink(props, ref) {
|
|
|
1056
1056
|
ref: ref,
|
|
1057
1057
|
children: [
|
|
1058
1058
|
/*#__PURE__*/ jsx(ChevronLeft, {
|
|
1059
|
-
className: cx('-ml-[0.5em] flex-shrink-0 transition-transform duration-300
|
|
1059
|
+
className: cx('-ml-[0.5em] group-hover:-translate-x-1 flex-shrink-0 transition-transform duration-300')
|
|
1060
1060
|
}),
|
|
1061
1061
|
/*#__PURE__*/ jsx("span", {
|
|
1062
1062
|
children: /*#__PURE__*/ jsx("span", {
|
|
1063
|
-
className: cx('border-
|
|
1063
|
+
className: cx('border-transparent border-t-[1px] border-b-[1px] transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
|
|
1064
1064
|
children: children
|
|
1065
1065
|
})
|
|
1066
1066
|
})
|
|
@@ -1285,7 +1285,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
|
|
|
1285
1285
|
"aria-hidden": true,
|
|
1286
1286
|
type: "button",
|
|
1287
1287
|
onClick: ()=>setShouldPlay((prevState)=>!prevState),
|
|
1288
|
-
className: cx('absolute
|
|
1288
|
+
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
1289
|
shouldPlay && 'opacity-0', isPlaying && [
|
|
1290
1290
|
'transition-opacity duration-200',
|
|
1291
1291
|
// Only show the pause button when the video is hovered or focused
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@obosbbl/grunnmuren-react",
|
|
3
|
-
"version": "2.0.0-canary.
|
|
3
|
+
"version": "2.0.0-canary.48",
|
|
4
4
|
"description": "Grunnmuren components in React",
|
|
5
5
|
"repository": {
|
|
6
6
|
"url": "https://github.com/code-obos/grunnmuren"
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"dist"
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.
|
|
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-
|
|
24
|
+
"cva": "^1.0.0-0",
|
|
25
25
|
"react-aria": "^3.35.1",
|
|
26
26
|
"react-aria-components": "^1.3.1"
|
|
27
27
|
},
|