@obosbbl/grunnmuren-react 3.3.4 → 3.4.0

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 (7) hide show
  1. package/dist/__stories__/form-validation.stories.cjs +70 -56
  2. package/dist/__stories__/form-validation.stories.js +71 -57
  3. package/dist/__stories__/layout.stories.cjs +32 -12
  4. package/dist/__stories__/layout.stories.js +32 -12
  5. package/dist/index.d.mts +116 -32
  6. package/dist/index.mjs +595 -482
  7. package/package.json +5 -2
package/dist/__stories__/form-validation.stories.cjs CHANGED
@@ -7,6 +7,61 @@ var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
7
7
  var cva = require('cva');
8
8
  var reactAria = require('react-aria');
9
9
 
10
+ const formField = cva.cx('group flex flex-col gap-2');
11
+ const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
12
+ const input = cva.cva({
13
+ base: [
14
+ // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
15
+ 'bg-white',
16
+ // Use box-content to enable auto width based on number of characters (size)
17
+ // Setting min-height to prevent the input from collapsing in Safari
18
+ // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
19
+ 'box-content min-h-6 py-2.5',
20
+ 'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
21
+ // invalid styles
22
+ 'group-data-invalid:ring-focus group-data-invalid:ring-red',
23
+ // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
24
+ 'appearance-none'
25
+ ],
26
+ variants: {
27
+ // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
28
+ focusModifier: {
29
+ focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
30
+ visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
31
+ },
32
+ isGrouped: {
33
+ false: 'px-3',
34
+ true: '!ring-0 flex-1'
35
+ }
36
+ },
37
+ defaultVariants: {
38
+ focusModifier: 'focus',
39
+ isGrouped: false
40
+ }
41
+ });
42
+ const inputGroup = cva.cx([
43
+ 'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
44
+ 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
45
+ ]);
46
+ ({
47
+ popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
48
+ // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
49
+ listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
50
+ chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
51
+ });
52
+ const animateIconVariants = cva.cva({
53
+ base: '*:[svg]:shrink-0 *:[svg]:transition-transform',
54
+ variants: {
55
+ animateIcon: {
56
+ right: 'hover:*:[svg]:motion-safe:translate-x-1',
57
+ left: 'hover:*:[svg]:motion-safe:-translate-x-1',
58
+ down: 'hover:*:[svg]:motion-safe:translate-y-1',
59
+ up: 'hover:*:[svg]:motion-safe:-translate-y-1',
60
+ 'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
61
+ }
62
+ }
63
+ });
64
+
10
65
  const translations = {
11
66
  pending: {
12
67
  nb: 'venter',
@@ -24,38 +79,38 @@ const translations = {
24
79
 
25
80
  /**
26
81
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
27
- */ const buttonVariants = cva.cva({
82
+ */ const buttonVariants = cva.compose(animateIconVariants, cva.cva({
28
83
  base: [
29
84
  'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
30
85
  ],
31
86
  variants: {
32
87
  /**
33
- * The variant of the button
34
- * @default primary
35
- */ variant: {
88
+ * The variant of the button
89
+ * @default primary
90
+ */ variant: {
36
91
  primary: 'no-underline',
37
92
  // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
38
93
  secondary: 'border-2 border-current no-underline hover:border-transparent',
39
94
  tertiary: 'underline hover:no-underline'
40
95
  },
41
96
  /**
42
- * Adjusts the color of the button for usage on different backgrounds.
43
- * @default blue
44
- */ color: {
97
+ * Adjusts the color of the button for usage on different backgrounds.
98
+ * @default blue
99
+ */ color: {
45
100
  blue: 'focus-visible:outline-focus',
46
101
  mint: 'focus-visible:outline-focus focus-visible:outline-mint',
47
102
  white: 'focus-visible:outline-focus focus-visible:outline-white'
48
103
  },
49
104
  /**
50
- * When the button is without text, but with a single icon.
51
- * @default false
52
- */ isIconOnly: {
105
+ * When the button is without text, but with a single icon.
106
+ * @default false
107
+ */ isIconOnly: {
53
108
  true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
54
109
  false: 'gap-2.5 px-4 py-2'
55
110
  },
56
111
  // Make the content of the button transparent to hide it's content, but keep the button width
57
112
  isPending: {
58
- true: '!text-transparent relative',
113
+ true: 'relative text-transparent!',
59
114
  false: null
60
115
  }
61
116
  },
@@ -114,15 +169,17 @@ const translations = {
114
169
  isIconOnly: false,
115
170
  isPending: false
116
171
  }
117
- });
172
+ }));
118
173
  const ButtonContext = /*#__PURE__*/ react.createContext({});
119
174
  function isLinkProps(props) {
120
175
  return !!props.href;
121
176
  }
122
177
  function Button({ ref = null, ...props }) {
123
178
  [props, ref] = reactAriaComponents.useContextProps(props, ref, ButtonContext);
124
- const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
179
+ const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
125
180
  const className = buttonVariants({
181
+ // Don't animate the icon when we're pending, as it affects the loading spinner
182
+ animateIcon: isPending ? undefined : animateIcon,
126
183
  className: props.className,
127
184
  color,
128
185
  isIconOnly,
@@ -157,49 +214,6 @@ function Button({ ref = null, ...props }) {
157
214
  });
158
215
  }
159
216
 
160
- const formField = cva.cx('group flex flex-col gap-2');
161
- const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
162
- const input = cva.cva({
163
- base: [
164
- // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
165
- 'bg-white',
166
- // Use box-content to enable auto width based on number of characters (size)
167
- // Setting min-height to prevent the input from collapsing in Safari
168
- // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
169
- 'box-content min-h-6 py-2.5',
170
- 'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
171
- // invalid styles
172
- 'group-data-invalid:ring-focus group-data-invalid:ring-red',
173
- // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
174
- 'appearance-none'
175
- ],
176
- variants: {
177
- // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
178
- focusModifier: {
179
- focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
180
- visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
181
- },
182
- isGrouped: {
183
- false: 'px-3',
184
- true: '!ring-0 flex-1'
185
- }
186
- },
187
- defaultVariants: {
188
- focusModifier: 'focus',
189
- isGrouped: false
190
- }
191
- });
192
- const inputGroup = cva.cx([
193
- 'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
194
- 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
195
- ]);
196
- ({
197
- popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
198
- // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
199
- listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
200
- chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
201
- });
202
-
203
217
  function InputAddonDivider() {
204
218
  return /*#__PURE__*/ jsxRuntime.jsx("span", {
205
219
  className: "block h-6 w-px flex-none bg-black"
package/dist/__stories__/form-validation.stories.js CHANGED
@@ -2,9 +2,64 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { createContext, useState } from 'react';
3
3
  import { useLocale, useContextProps, Link, Button as Button$1, Text, FieldError, Label as Label$1, TextField as TextField$1, Group, Input, Form as Form$1 } from 'react-aria-components';
4
4
  import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
5
- import { cva, cx, compose } from 'cva';
5
+ import { cx, cva, compose } from 'cva';
6
6
  import { useProgressBar } from 'react-aria';
7
7
 
8
+ const formField = cx('group flex flex-col gap-2');
9
+ const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
10
+ const input = cva({
11
+ base: [
12
+ // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
13
+ 'bg-white',
14
+ // Use box-content to enable auto width based on number of characters (size)
15
+ // Setting min-height to prevent the input from collapsing in Safari
16
+ // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
17
+ 'box-content min-h-6 py-2.5',
18
+ 'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
19
+ // invalid styles
20
+ 'group-data-invalid:ring-focus group-data-invalid:ring-red',
21
+ // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
22
+ 'appearance-none'
23
+ ],
24
+ variants: {
25
+ // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
26
+ focusModifier: {
27
+ focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
28
+ visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
29
+ },
30
+ isGrouped: {
31
+ false: 'px-3',
32
+ true: '!ring-0 flex-1'
33
+ }
34
+ },
35
+ defaultVariants: {
36
+ focusModifier: 'focus',
37
+ isGrouped: false
38
+ }
39
+ });
40
+ const inputGroup = cx([
41
+ 'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
42
+ 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
43
+ ]);
44
+ ({
45
+ 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-sm data-entering:animate-in data-exiting:animate-out'),
46
+ // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
47
+ listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
48
+ chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
49
+ });
50
+ const animateIconVariants = cva({
51
+ base: '*:[svg]:shrink-0 *:[svg]:transition-transform',
52
+ variants: {
53
+ animateIcon: {
54
+ right: 'hover:*:[svg]:motion-safe:translate-x-1',
55
+ left: 'hover:*:[svg]:motion-safe:-translate-x-1',
56
+ down: 'hover:*:[svg]:motion-safe:translate-y-1',
57
+ up: 'hover:*:[svg]:motion-safe:-translate-y-1',
58
+ 'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
59
+ }
60
+ }
61
+ });
62
+
8
63
  const translations = {
9
64
  pending: {
10
65
  nb: 'venter',
@@ -22,38 +77,38 @@ const translations = {
22
77
 
23
78
  /**
24
79
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
25
- */ const buttonVariants = cva({
80
+ */ const buttonVariants = compose(animateIconVariants, cva({
26
81
  base: [
27
82
  'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
28
83
  ],
29
84
  variants: {
30
85
  /**
31
- * The variant of the button
32
- * @default primary
33
- */ variant: {
86
+ * The variant of the button
87
+ * @default primary
88
+ */ variant: {
34
89
  primary: 'no-underline',
35
90
  // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
36
91
  secondary: 'border-2 border-current no-underline hover:border-transparent',
37
92
  tertiary: 'underline hover:no-underline'
38
93
  },
39
94
  /**
40
- * Adjusts the color of the button for usage on different backgrounds.
41
- * @default blue
42
- */ color: {
95
+ * Adjusts the color of the button for usage on different backgrounds.
96
+ * @default blue
97
+ */ color: {
43
98
  blue: 'focus-visible:outline-focus',
44
99
  mint: 'focus-visible:outline-focus focus-visible:outline-mint',
45
100
  white: 'focus-visible:outline-focus focus-visible:outline-white'
46
101
  },
47
102
  /**
48
- * When the button is without text, but with a single icon.
49
- * @default false
50
- */ isIconOnly: {
103
+ * When the button is without text, but with a single icon.
104
+ * @default false
105
+ */ isIconOnly: {
51
106
  true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
52
107
  false: 'gap-2.5 px-4 py-2'
53
108
  },
54
109
  // Make the content of the button transparent to hide it's content, but keep the button width
55
110
  isPending: {
56
- true: '!text-transparent relative',
111
+ true: 'relative text-transparent!',
57
112
  false: null
58
113
  }
59
114
  },
@@ -112,15 +167,17 @@ const translations = {
112
167
  isIconOnly: false,
113
168
  isPending: false
114
169
  }
115
- });
170
+ }));
116
171
  const ButtonContext = /*#__PURE__*/ createContext({});
117
172
  function isLinkProps(props) {
118
173
  return !!props.href;
119
174
  }
120
175
  function Button({ ref = null, ...props }) {
121
176
  [props, ref] = useContextProps(props, ref, ButtonContext);
122
- const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
177
+ const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
123
178
  const className = buttonVariants({
179
+ // Don't animate the icon when we're pending, as it affects the loading spinner
180
+ animateIcon: isPending ? undefined : animateIcon,
124
181
  className: props.className,
125
182
  color,
126
183
  isIconOnly,
@@ -155,49 +212,6 @@ function Button({ ref = null, ...props }) {
155
212
  });
156
213
  }
157
214
 
158
- const formField = cx('group flex flex-col gap-2');
159
- const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
160
- const input = cva({
161
- base: [
162
- // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
163
- 'bg-white',
164
- // Use box-content to enable auto width based on number of characters (size)
165
- // Setting min-height to prevent the input from collapsing in Safari
166
- // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
167
- 'box-content min-h-6 py-2.5',
168
- 'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
169
- // invalid styles
170
- 'group-data-invalid:ring-focus group-data-invalid:ring-red',
171
- // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
172
- 'appearance-none'
173
- ],
174
- variants: {
175
- // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
176
- focusModifier: {
177
- focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
178
- visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
179
- },
180
- isGrouped: {
181
- false: 'px-3',
182
- true: '!ring-0 flex-1'
183
- }
184
- },
185
- defaultVariants: {
186
- focusModifier: 'focus',
187
- isGrouped: false
188
- }
189
- });
190
- const inputGroup = cx([
191
- 'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
192
- 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
193
- ]);
194
- ({
195
- 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-sm data-entering:animate-in data-exiting:animate-out'),
196
- // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
197
- listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
198
- chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
199
- });
200
-
201
215
  function InputAddonDivider() {
202
216
  return /*#__PURE__*/ jsx("span", {
203
217
  className: "block h-6 w-px flex-none bg-black"
package/dist/__stories__/layout.stories.cjs CHANGED
@@ -298,7 +298,7 @@ const cardLinkVariants = cva.cva({
298
298
  });
299
299
  };
300
300
 
301
- const roundedMediaCorners = '*:data-[slot="media"]:*:rounded-3xl';
301
+ const HeroContext = /*#__PURE__*/ react.createContext(null);
302
302
  // Common variant for "standard" and "full-bleed" Hero variants
303
303
  const oneColumnLayout = [
304
304
  // Vertical spacing in the <Content>
@@ -311,7 +311,7 @@ const oneColumnLayout = [
311
311
  'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:not-data-[slot="carousel"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
312
312
  // <Media> and <Carousel> content takes up the full width on medium screens and above
313
313
  'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
314
- 'lg:*:data-[slot="carousel"]:col-span-full *:data-[slot="carousel"]:*:w-full',
314
+ 'lg:*:data-[slot="carousel"]:col-span-full',
315
315
  // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
316
316
  'lg:items-end'
317
317
  ];
@@ -327,7 +327,10 @@ const variants = cva.cva({
327
327
  // Vertical spacing in the <Content>
328
328
  '*:data-[slot="content"]:gap-y-3',
329
329
  // Make sure <Media> content fills any available vertical and horizontal space
330
- '*:data-[slot="media"]:*:object-cover'
330
+ '*:data-[slot="media"]:*:object-cover',
331
+ '*:data-[slot="carousel"]:overflow-hidden *:data-[slot="carousel"]:rounded-3xl',
332
+ // Make the carousel items full width, so we scroll one at a time
333
+ '**:data-[slot="carousel-item"]:basis-full'
331
334
  ],
332
335
  variants: {
333
336
  /**
@@ -335,7 +338,6 @@ const variants = cva.cva({
335
338
  * @default standard
336
339
  * */ variant: {
337
340
  standard: [
338
- roundedMediaCorners,
339
341
  oneColumnLayout,
340
342
  nonFullBleedAspectRatiosForSmallScreens,
341
343
  'lg:*:data-[slot="media"]:*:aspect-2/1'
@@ -345,32 +347,44 @@ const variants = cva.cva({
345
347
  // Position the media and carousel content to fill the entire viewport width
346
348
  '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
347
349
  // Special case for Carousel, where the Media is nested inside a CarouselItem
348
- '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full *:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
350
+ '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full',
349
351
  // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
350
352
  // This is necessary due to the absolute positioning of the media and carousel containers in this variant
351
353
  // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
352
354
  '**:data-[slot="media"]:h-80 sm:**:data-[slot="media"]:h-[25rem] md:**:data-[slot="media"]:h-[30rem] lg:**:data-[slot="media"]:h-[35rem] xl:**:data-[slot="media"]:h-[40rem] 2xl:**:data-[slot="media"]:h-[42rem] 3xl:**:data-[slot="media"]:h-[48rem] 4xl:**:data-[slot="media"]:h-[53rem]',
353
- // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
354
- '**:data-[slot="media"]:*:h-80 sm:**:data-[slot="media"]:*:h-[25rem] md:**:data-[slot="media"]:*:h-[30rem] lg:**:data-[slot="media"]:*:h-[35rem] xl:**:data-[slot="media"]:*:h-[40rem] 2xl:**:data-[slot="media"]:*:h-[42rem] 3xl:**:data-[slot="media"]:*:h-[48rem] 4xl:**:data-[slot="media"]:*:h-[53rem]',
355
+ '**:data-[slot="media"]:*:h-[inherit]',
355
356
  // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
356
357
  '*:data-[slot="carousel"]:h-80 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
358
+ '*:data-[slot="carousel"]:w-full!',
357
359
  // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
358
360
  '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
359
- '**:data-[slot="carousel-controls"]:container **:data-[slot="carousel-controls"]:right-0 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-controls"]:left-0 **:data-[slot="carousel-controls"]:justify-end',
360
- // Override rounded corners of Carousel slots
361
- '*:data-[slot="carousel"]:*:rounded-none'
361
+ // break out the carousel out of the container
362
+ '**:data-[slot="carousel-items-container"]:absolute **:data-[slot="carousel-items-container"]:right-0 **:data-[slot="carousel-items-container"]:left-0 **:data-[slot="carousel-items-container"]:h-[inherit]',
363
+ // Positions the carousel controls inside the carousel
364
+ '**:data-[slot="carousel-controls"]:z-10 **:data-[slot="carousel-controls"]:mb-4 *:data-[slot="carousel"]:flex *:data-[slot="carousel"]:items-end *:data-[slot="carousel"]:justify-end'
362
365
  ],
363
366
  'two-column': [
364
367
  'lg:items-center lg:*:col-span-6',
365
368
  // Vertical spacing in the <Content>
366
369
  'lg:*:data-[slot="content"]:gap-y-7',
367
- roundedMediaCorners,
368
370
  nonFullBleedAspectRatiosForSmallScreens,
369
371
  // Set media aspect ratio to 1:1 (square)
370
- 'lg:*:data-[slot="media"]:*:aspect-[1/1]'
372
+ 'lg:*:data-[slot="media"]:*:aspect-square'
371
373
  ]
372
374
  }
373
375
  },
376
+ compoundVariants: [
377
+ {
378
+ variant: [
379
+ 'standard',
380
+ 'two-column'
381
+ ],
382
+ className: [
383
+ '*:data-[slot="media"]:*:rounded-3xl',
384
+ '**:data-[slot="carousel-controls"]:absolute *:data-[slot="carousel"]:relative **:data-[slot="carousel-controls"]:right-4 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-container"]:rounded-3xl'
385
+ ]
386
+ }
387
+ ],
374
388
  defaultVariants: {
375
389
  variant: 'standard'
376
390
  }
@@ -382,6 +396,12 @@ const Hero = ({ variant, className, children, ...rest })=>{
382
396
  });
383
397
  return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Provider, {
384
398
  values: [
399
+ [
400
+ HeroContext,
401
+ {
402
+ variant
403
+ }
404
+ ],
385
405
  [
386
406
  HeadingContext,
387
407
  {
package/dist/__stories__/layout.stories.js CHANGED
@@ -296,7 +296,7 @@ const cardLinkVariants = cva({
296
296
  });
297
297
  };
298
298
 
299
- const roundedMediaCorners = '*:data-[slot="media"]:*:rounded-3xl';
299
+ const HeroContext = /*#__PURE__*/ createContext(null);
300
300
  // Common variant for "standard" and "full-bleed" Hero variants
301
301
  const oneColumnLayout = [
302
302
  // Vertical spacing in the <Content>
@@ -309,7 +309,7 @@ const oneColumnLayout = [
309
309
  'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:not-data-[slot="carousel"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
310
310
  // <Media> and <Carousel> content takes up the full width on medium screens and above
311
311
  'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
312
- 'lg:*:data-[slot="carousel"]:col-span-full *:data-[slot="carousel"]:*:w-full',
312
+ 'lg:*:data-[slot="carousel"]:col-span-full',
313
313
  // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
314
314
  'lg:items-end'
315
315
  ];
@@ -325,7 +325,10 @@ const variants = cva({
325
325
  // Vertical spacing in the <Content>
326
326
  '*:data-[slot="content"]:gap-y-3',
327
327
  // Make sure <Media> content fills any available vertical and horizontal space
328
- '*:data-[slot="media"]:*:object-cover'
328
+ '*:data-[slot="media"]:*:object-cover',
329
+ '*:data-[slot="carousel"]:overflow-hidden *:data-[slot="carousel"]:rounded-3xl',
330
+ // Make the carousel items full width, so we scroll one at a time
331
+ '**:data-[slot="carousel-item"]:basis-full'
329
332
  ],
330
333
  variants: {
331
334
  /**
@@ -333,7 +336,6 @@ const variants = cva({
333
336
  * @default standard
334
337
  * */ variant: {
335
338
  standard: [
336
- roundedMediaCorners,
337
339
  oneColumnLayout,
338
340
  nonFullBleedAspectRatiosForSmallScreens,
339
341
  'lg:*:data-[slot="media"]:*:aspect-2/1'
@@ -343,32 +345,44 @@ const variants = cva({
343
345
  // Position the media and carousel content to fill the entire viewport width
344
346
  '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
345
347
  // Special case for Carousel, where the Media is nested inside a CarouselItem
346
- '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full *:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
348
+ '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full',
347
349
  // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
348
350
  // This is necessary due to the absolute positioning of the media and carousel containers in this variant
349
351
  // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
350
352
  '**:data-[slot="media"]:h-80 sm:**:data-[slot="media"]:h-[25rem] md:**:data-[slot="media"]:h-[30rem] lg:**:data-[slot="media"]:h-[35rem] xl:**:data-[slot="media"]:h-[40rem] 2xl:**:data-[slot="media"]:h-[42rem] 3xl:**:data-[slot="media"]:h-[48rem] 4xl:**:data-[slot="media"]:h-[53rem]',
351
- // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
352
- '**:data-[slot="media"]:*:h-80 sm:**:data-[slot="media"]:*:h-[25rem] md:**:data-[slot="media"]:*:h-[30rem] lg:**:data-[slot="media"]:*:h-[35rem] xl:**:data-[slot="media"]:*:h-[40rem] 2xl:**:data-[slot="media"]:*:h-[42rem] 3xl:**:data-[slot="media"]:*:h-[48rem] 4xl:**:data-[slot="media"]:*:h-[53rem]',
353
+ '**:data-[slot="media"]:*:h-[inherit]',
353
354
  // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
354
355
  '*:data-[slot="carousel"]:h-80 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
356
+ '*:data-[slot="carousel"]:w-full!',
355
357
  // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
356
358
  '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
357
- '**:data-[slot="carousel-controls"]:container **:data-[slot="carousel-controls"]:right-0 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-controls"]:left-0 **:data-[slot="carousel-controls"]:justify-end',
358
- // Override rounded corners of Carousel slots
359
- '*:data-[slot="carousel"]:*:rounded-none'
359
+ // break out the carousel out of the container
360
+ '**:data-[slot="carousel-items-container"]:absolute **:data-[slot="carousel-items-container"]:right-0 **:data-[slot="carousel-items-container"]:left-0 **:data-[slot="carousel-items-container"]:h-[inherit]',
361
+ // Positions the carousel controls inside the carousel
362
+ '**:data-[slot="carousel-controls"]:z-10 **:data-[slot="carousel-controls"]:mb-4 *:data-[slot="carousel"]:flex *:data-[slot="carousel"]:items-end *:data-[slot="carousel"]:justify-end'
360
363
  ],
361
364
  'two-column': [
362
365
  'lg:items-center lg:*:col-span-6',
363
366
  // Vertical spacing in the <Content>
364
367
  'lg:*:data-[slot="content"]:gap-y-7',
365
- roundedMediaCorners,
366
368
  nonFullBleedAspectRatiosForSmallScreens,
367
369
  // Set media aspect ratio to 1:1 (square)
368
- 'lg:*:data-[slot="media"]:*:aspect-[1/1]'
370
+ 'lg:*:data-[slot="media"]:*:aspect-square'
369
371
  ]
370
372
  }
371
373
  },
374
+ compoundVariants: [
375
+ {
376
+ variant: [
377
+ 'standard',
378
+ 'two-column'
379
+ ],
380
+ className: [
381
+ '*:data-[slot="media"]:*:rounded-3xl',
382
+ '**:data-[slot="carousel-controls"]:absolute *:data-[slot="carousel"]:relative **:data-[slot="carousel-controls"]:right-4 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-container"]:rounded-3xl'
383
+ ]
384
+ }
385
+ ],
372
386
  defaultVariants: {
373
387
  variant: 'standard'
374
388
  }
@@ -380,6 +394,12 @@ const Hero = ({ variant, className, children, ...rest })=>{
380
394
  });
381
395
  return /*#__PURE__*/ jsx(Provider, {
382
396
  values: [
397
+ [
398
+ HeroContext,
399
+ {
400
+ variant
401
+ }
402
+ ],
383
403
  [
384
404
  HeadingContext,
385
405
  {