@obosbbl/grunnmuren-react 3.3.1 → 3.3.3

package/dist/index.d.mts

@@ -27,7 +27,7 @@ type DisclosureProps = DisclosureProps$1 & RefAttributes<HTMLDivElement> & {
     className?: string;
 };
 declare const DisclosureStateContext: react.Context<DisclosureState | null>;
-declare const Disclosure: ({ ref: _ref, children, ..._props }: DisclosureProps) => react_jsx_runtime.JSX.Element;
+declare const Disclosure: ({ ref: _ref, ..._props }: DisclosureProps) => react_jsx_runtime.JSX.Element;
 type DisclosurePanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
     children: React.ReactNode;
     role?: 'group' | 'region' | 'none';
@@ -165,7 +165,7 @@ declare function Breadcrumbs(props: BreadcrumbsProps): react_jsx_runtime.JSX.Ele
  */
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    color?: "mint" | "white" | "blue" | undefined;
+    color?: "blue" | "mint" | "white" | undefined;
     isIconOnly?: boolean | undefined;
     isPending?: boolean | undefined;
 } & ({
@@ -192,7 +192,7 @@ type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivEleme
 };
 declare const cardVariants: (props?: ({
     variant?: "subtle" | "outlined" | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
+    layout?: "vertical" | "horizontal" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -349,7 +349,7 @@ type MediaProps = HTMLProps<HTMLDivElement> & VariantProps<typeof mediaVariant>
     ref?: Ref<HTMLDivElement>;
 };
 declare const mediaVariant: (props?: ({
-    fit?: "contain" | "cover" | undefined;
+    fit?: "cover" | "contain" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;

package/dist/index.mjs

@@ -136,10 +136,10 @@ const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _
     });
 };
 const DisclosureStateContext = /*#__PURE__*/ createContext(null);
-const Disclosure = ({ ref: _ref, children, ..._props })=>{
+const Disclosure = ({ ref: _ref, ..._props })=>{
     const [props, ref] = useContextProps(_props, _ref, DisclosureContext);
     const groupState = useContext(DisclosureGroupStateContext);
-    let { id, ...otherProps } = props;
+    let { id, children, ...otherProps } = props;
     const defaultId = useId();
     id ||= defaultId;
     const isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
@@ -377,13 +377,15 @@ const iconMap = {
 };
 const alertVariants = cva({
     base: [
-        'grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md border-2 px-3 py-2',
+        'grid grid-cols-[auto_1fr_auto] gap-2 rounded-md border-2 px-3 py-2',
+        // Icon styles:
+        '[&:has([data-slot="heading"])>svg]:mt-0.5',
         // Heading styles:
-        '[&_[data-slot="heading"]]:font-medium [&_[data-slot="heading"]]:text-base [&_[data-slot="heading"]]:leading-7',
+        '**:data-[slot="heading"]:font-medium **:data-[slot="heading"]:text-base **:data-[slot="heading"]:leading-7',
         // Content styles:
-        '[&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full [&_[data-slot="content"]]:text-sm [&_[data-slot="content"]]:leading-6',
+        '**:data-[slot="content"]:text-sm **:data-[slot="content"]:leading-6 [&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full',
         // Footer styles:
-        '[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:font-light [&_[data-slot="footer"]]:text-xs [&_[data-slot="footer"]]:leading-6'
+        '**:data-[slot="footer"]:col-span-full **:data-[slot="footer"]:font-light **:data-[slot="footer"]:text-xs **:data-[slot="footer"]:leading-6'
     ],
     variants: {
         /**
@@ -442,7 +444,7 @@ const Alertbox = ({ children, role, className, icon, variant = 'info', isDismiss
             }),
             isExpandable && /*#__PURE__*/ jsxs("button", {
                 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:
-                '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'),
+                'outline-none after:absolute after:right-0 after:bottom-3 after:left-0 after:h-0', 'focus-visible:after:h-0.5 focus-visible:after:bg-black'),
                 onClick: ()=>setIsExpanded((prevState)=>!prevState),
                 "aria-expanded": isExpanded,
                 "aria-controls": id,
@@ -975,6 +977,27 @@ const cardLinkVariants = cva({
     });
 };
 
+/**
+ * Hook that detects the user's preference for reduced motion.
+ *
+ * Keep in mind that this hook relies on a browser API's and doesn't run on the server.
+ * You can supply an initial value that will be used for server side rendering.
+ */ function usePrefersReducedMotion(initialValue = true) {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(initialValue);
+    useEffect(()=>{
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        setPrefersReducedMotion(mediaQuery.matches);
+        const changeListener = (event)=>{
+            setPrefersReducedMotion(event.matches);
+        };
+        mediaQuery.addEventListener('change', changeListener);
+        return ()=>{
+            mediaQuery.removeEventListener('change', changeListener);
+        };
+    }, []);
+    return prefersReducedMotion;
+}
+
 const Carousel = ({ className, children, onChange, ...rest })=>{
     const carouselRef = useRef(null);
     const carouselItemsRef = useRef(null);
@@ -986,6 +1009,7 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
     const scrollQueue = useRef([]);
     const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
     const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
+    const prefersReducedMotion = usePrefersReducedMotion();
     useEffect(()=>{
         setHasReachedScrollStart(scrollTargetIndex === 0);
         setHasReachedScrollEnd(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
@@ -1017,7 +1041,6 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
         }
         isScrollingProgrammatically.current = true;
         const elementWithFocusVisible = carouselRef.current?.querySelector(':focus-visible');
-        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
         carouselItemsRef.current.children[scrollTargetIndex]?.scrollIntoView({
             behavior: prefersReducedMotion ? 'instant' : 'smooth',
             inline: 'start',
@@ -1066,7 +1089,8 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
             processQueue(); // Process any queued scrolls
         }, 500);
     }, [
-        scrollTargetIndex
+        scrollTargetIndex,
+        prefersReducedMotion
     ]);
     // Clean up timeout on unmount
     useEffect(()=>{
@@ -1221,16 +1245,7 @@ const CarouselItemsContext = /*#__PURE__*/ createContext({
 });
 const CarouselItems = ({ className, children })=>{
     const { carouselItemsRef, onScroll, activeIndex, handlePrevious, handleNext } = useContext(CarouselItemsContext);
-    const prefersReducedMotion = useRef(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
-    // Update the ref when the media query changes
-    useEffect(()=>{
-        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-        const handleChange = (e)=>{
-            prefersReducedMotion.current = e.matches;
-        };
-        mediaQuery.addEventListener('change', handleChange);
-        return ()=>mediaQuery.removeEventListener('change', handleChange);
-    }, []);
+    const prefersReducedMotion = usePrefersReducedMotion();
     const handleKeyDown = (event)=>{
         // Prevent default behavior when holding down arrow keys (when repeat is true)
         // The default behavior in scroll snapping causes a staggering scroll effect that feels janky
@@ -1239,7 +1254,7 @@ const CarouselItems = ({ className, children })=>{
             return;
         }
         // For users with prefers-reduced-motion, trigger button click behavior instead of native scroll
-        if (prefersReducedMotion.current) {
+        if (prefersReducedMotion) {
             if (event.key === 'ArrowLeft' && handlePrevious) {
                 event.preventDefault();
                 handlePrevious();
@@ -2868,15 +2883,14 @@ const VideoLoop = ({ src, format, alt, className })=>{
     const [shouldPlay, setShouldPlay] = useState(false);
     // Needed to show the pause button when the video is actually playing (refer to google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
     const [isPlaying, setIsPlaying] = useState(false);
-    // We need to check if the user prefers reduced motion, so that we can prevent the video from autoplaying if so
-    const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(null);
+    const prefersReducedMotion = usePrefersReducedMotion(null);
     const videoRef = useRef(null);
     useEffect(()=>{
-        const { matches: userPrefersReducedMotion } = matchMedia('(prefers-reduced-motion: reduce)');
-        setUserPrefersReducedMotion(userPrefersReducedMotion);
         // Autoplay the video if the user does not prefer reduced motion
-        setShouldPlay(!userPrefersReducedMotion);
-    }, []);
+        setShouldPlay(!prefersReducedMotion);
+    }, [
+        prefersReducedMotion
+    ]);
     // Follow google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
     // "Don't assume a video will play, and don't show a pause button when the video is not actually playing."
     // "You should always look at the Promise returned by the play function to see if it was rejected:"
@@ -2893,7 +2907,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
         shouldPlay
     ]);
     return /*#__PURE__*/ jsxs("div", {
-        className: cx(className, 'relative', userPrefersReducedMotion === null && 'opacity-0'),
+        className: cx(className, 'relative', prefersReducedMotion === null && 'opacity-0'),
         children: [
             /*#__PURE__*/ jsx("video", {
                 "aria-hidden": true,
@@ -2901,11 +2915,11 @@ const VideoLoop = ({ src, format, alt, className })=>{
                 // cursor-pointer is not working on the button below, so we add it here for the same effect
                 className: "h-full max-h-[inherit] w-full cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
-                loop: userPrefersReducedMotion === false,
-                autoPlay: userPrefersReducedMotion === false,
+                loop: prefersReducedMotion === false,
+                autoPlay: prefersReducedMotion === false,
                 muted: true,
                 onEnded: (event)=>{
-                    if (userPrefersReducedMotion) {
+                    if (prefersReducedMotion) {
                         // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
                         event.currentTarget.currentTime = 0;
                         setShouldPlay(false);
@@ -2917,7 +2931,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                     type: `video/${format}`
                 })
             }),
-            userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
+            prefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
                 "data-slot": "video-loop-button",
                 "aria-hidden": true,
                 type: "button",

package/package.json

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