@obosbbl/grunnmuren-react 2.0.0-canary.51 → 2.0.0-canary.52

package/dist/index.mjs

@@ -1,5 +1,5 @@
 'use client';
-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';
+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, DEFAULT_SLOT } from 'react-aria-components';
 export { Form, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
@@ -1092,8 +1092,8 @@ const cardVariants = cva({
         '[&_[data-slot="media"]]:relative',
         // Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
         '[&_[data-slot="media"]]:mx-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))] [&_[data-slot="media"]]:mt-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
-        // Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work in FF)
-        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-[3/2] [&_[data-slot="media"]>*:not([data-slot="badge"])]:w-full [&_[data-slot="media"]_img]:object-cover',
+        // Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work on images in FF)
+        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-[3/2] [&_[data-slot="media"]_img]:w-full [&_[data-slot="media"]_img]:object-cover',
         // Prepare zoom animation for hover effects. The hover effect can also be enabled by classes on the parent component, so it is always prepared here.
         '[&_[data-slot="media"]>*]:duration-300 [&_[data-slot="media"]>*]:ease-in-out [&_[data-slot="media"]>*]:motion-safe:transition-transform',
         // **** Card link ****
@@ -1179,8 +1179,8 @@ const cardVariants = cva({
                 '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
                 // **** Without Media ****
                 '[&:not(:has(>[data-slot="media"]))]:flex-row',
-                // Make the layout responsive: when the Content reaches a minimum width of 18rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
-                '[&:not(:has(>[data-slot="media"]))]:flex-wrap [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:grow [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:basis-[18rem]',
+                // Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
+                '[&:not(:has(>[data-slot="media"]))]:flex-wrap [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:grow [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:basis-[12rem]',
                 // Make sure svg's etc. are not shrinkable
                 '[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
             ]
@@ -1376,7 +1376,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
 
 const disclosureButtonVariants = cva({
     base: [
-        'inline-flex cursor-pointer items-center justify-between rounded-lg outline-none data-[focus-visible]:outline-focus',
+        'inline-flex cursor-pointer items-center justify-between rounded-lg outline-none data-[focus-visible]:outline-current data-[focus-visible]:outline-focus',
         // Ensure a minimum click area of 44x44px, while making it look like it only has the size of the content
         '-m-2.5 p-2.5 data-[focus-visible]:outline-offset-[-0.625rem]'
     ],
@@ -1408,6 +1408,7 @@ const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _
             withChevron,
             isIconOnly
         }),
+        slot: "trigger",
         children: [
             children,
             withChevron && /*#__PURE__*/ jsx(ChevronDown, {
@@ -1450,7 +1451,12 @@ const Disclosure = ({ ref: _ref, children, ..._props })=>{
             ],
             [
                 ButtonContext,
-                buttonProps
+                {
+                    slots: {
+                        [DEFAULT_SLOT]: {},
+                        trigger: buttonProps
+                    }
+                }
             ],
             [
                 DisclosurePanelContext,
@@ -1479,13 +1485,16 @@ const DisclosurePanel = ({ ref: _ref, ..._props })=>{
     const isWithoutRole = _role === 'none';
     const role = isWithoutRole ? undefined : _role;
     return /*#__PURE__*/ jsx("div", {
-        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]'),
+        className: cx('grid transition-all duration-300 motion-reduce:transition-none', disclosureContext?.isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'),
         children: /*#__PURE__*/ jsx("div", {
-            ...restProps,
-            ref: ref,
-            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'),
-            role: role,
-            "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby
+            className: "overflow-hidden",
+            children: /*#__PURE__*/ jsx("div", {
+                ...restProps,
+                className: cx(className, '[content-visibility:visible]'),
+                ref: ref,
+                role: role,
+                "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby
+            })
         })
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.51",
+  "version": "2.0.0-canary.52",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"