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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, 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';
+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';
 export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
@@ -303,6 +303,14 @@ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
 } & Omit<CheckboxGroupProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
+/**
+ * This component can be used to group items in a listbox
+ */
+declare const ListBoxSection: <T extends object>({ className, ...restProps }: ListBoxSectionProps<T>) => react_jsx_runtime.JSX.Element;
+/**
+ * This component can be used to label grouped items in a `ListBoxSection` with a heading
+ */
+declare const ListBoxHeader: (props: HeadingProps$1) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps<T extends object> = {
     children: React.ReactNode;
@@ -699,6 +707,10 @@ declare const Media: (props: MediaProps) => react_jsx_runtime.JSX.Element;
 type FooterProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
+type CaptionProps = HTMLProps<HTMLDivElement> & {
+    children: React.ReactNode;
+};
+declare const Caption: ({ className, ...restProps }: CaptionProps) => react_jsx_runtime.JSX.Element;
 declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
 declare const _Heading: react.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 declare const _Content: react.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
@@ -837,4 +849,20 @@ type DateFormatterProps = {
  */
 declare const DateFormatter: ({ options: _options, value, children: render, }: DateFormatterProps) => ReactNode;
 
-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, Card, CardLink, type CardLinkProps, type CardProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, _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, ListBoxItem as SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps, _useLocale as useLocale };
+type VideoLoopProps = {
+    /** The video url */
+    src: string;
+    /** The video format */
+    format: string;
+    /**
+     * The content of the video must have a text description, so that it is accessible to screen readers.
+     * You can either just provide a just caption, just an alt text, or both a caption and an alt text.
+     * Make sure the alt text doesn't repeat too much of the caption text, if so just a caption is sufficent.
+     * Think of this just as an alt text, but for a muted video - this text will not be visible, but read by screen readers.
+     * */
+    alt?: string;
+    className?: string;
+};
+declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
+
+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 };

package/dist/index.mjs

@@ -1,11 +1,11 @@
 '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, 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';
+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';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
+import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
 import { useLayoutEffect } from '@react-aria/utils';
 import { cx, cva, compose } from 'cva';
-import { createContext, forwardRef, Children, useId, useState } from 'react';
+import { createContext, forwardRef, Children, useId, useState, useRef, useEffect } from 'react';
 import { useProgressBar, useDateFormatter } from 'react-aria';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
@@ -55,6 +55,11 @@ const Media = (props)=>/*#__PURE__*/ jsx("div", {
         ...props,
         "data-slot": "media"
     });
+const Caption = ({ className, ...restProps })=>/*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx('description', className),
+        "data-slot": "caption"
+    });
 const Footer = (props)=>/*#__PURE__*/ jsx("div", {
         ...props,
         "data-slot": "footer"
@@ -551,6 +556,20 @@ const ListBoxItem = (props)=>{
             })
     });
 };
+/**
+ * This component can be used to group items in a listbox
+ */ const ListBoxSection = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBoxSection$1, {
+        ...restProps,
+        // The :not(:first-child) selector adds extra spacing to all the options, but not the section (group) headings
+        // This way we get the desired extra indent on all options within a group
+        className: cx(className, 'pb-1 [&>:not(:first-child)]:pl-10')
+    });
+/**
+ * This component can be used to label grouped items in a `ListBoxSection` with a heading
+ */ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header, {
+        ...props,
+        className: cx(props.className, 'mx-6 cursor-default py-2 font-medium leading-6 text-blue-dark')
+    });
 
 function InputAddonDivider() {
     return /*#__PURE__*/ jsx("span", {
@@ -1054,7 +1073,7 @@ const cardVariants = cva({
     base: [
         'group/card',
         'rounded-2xl border p-3',
-        'grid auto-rows-max gap-y-4',
+        'flex flex-col gap-y-4',
         'relative',
         // **** Heading ****
         '[&_[data-slot="heading"]]:inline',
@@ -1065,7 +1084,7 @@ const cardVariants = cva({
         '[&_[data-slot="heading"]]:hyphens-auto',
         '[&_[data-slot="heading"]]:[word-break:break-word]',
         // **** Content ****
-        '[&_[data-slot="content"]]:grid [&_[data-slot="content"]]:auto-rows-max [&_[data-slot="content"]]:gap-y-4',
+        '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
         // **** Media ****
         '[&_[data-slot="media"]]:overflow-hidden',
         '[&_[data-slot="media"]]:rounded-t-2xl',
@@ -1208,4 +1227,82 @@ const cardLinkVariants = cva({
     return render ? render(formatted) : formatted;
 };
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, _Content as Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, _Heading as Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField, _useLocale as useLocale };
+const VideoLoop = ({ src, format, alt, className })=>{
+    // Control the video playback state, so that the user can pause and play the video at will, also control the video autoplay
+    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 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);
+    }, []);
+    // 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:"
+    // This is why we use the promise returned by the play function, and an extra state variable to determine if the video is actually playing or not
+    useEffect(()=>{
+        if (!videoRef.current) return;
+        if (shouldPlay) {
+            videoRef.current.play().then(()=>setIsPlaying(true)).catch(()=>setIsPlaying(false));
+        } else {
+            videoRef.current.pause();
+            setIsPlaying(false);
+        }
+    }, [
+        shouldPlay
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cx(className, 'relative', userPrefersReducedMotion === null && 'opacity-0'),
+        children: [
+            /*#__PURE__*/ jsx("video", {
+                "aria-hidden": true,
+                ref: videoRef,
+                // cursor-pointer is not working on the button below, so we add it here for the same effect
+                className: "h-full w-full cursor-pointer object-cover",
+                playsInline: true,
+                loop: userPrefersReducedMotion === false,
+                autoPlay: userPrefersReducedMotion === false,
+                muted: true,
+                onEnded: (event)=>{
+                    if (userPrefersReducedMotion) {
+                        // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
+                        event.currentTarget.currentTime = 0;
+                        setShouldPlay(false);
+                        setIsPlaying(false);
+                    }
+                },
+                children: /*#__PURE__*/ jsx("source", {
+                    src: src,
+                    type: `video/${format}`
+                })
+            }),
+            userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
+                "aria-hidden": true,
+                type: "button",
+                onClick: ()=>setShouldPlay((prevState)=>!prevState),
+                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
+                shouldPlay && 'opacity-0', isPlaying && [
+                    'transition-opacity duration-200',
+                    // Only show the pause button when the video is hovered or focused
+                    'focus-visible:opacity-100',
+                    'hover:opacity-100'
+                ]),
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "grid h-12 w-12 place-items-center rounded-full bg-white outline-none",
+                    children: isPlaying ? /*#__PURE__*/ jsx(PlayerPause, {}) : /*#__PURE__*/ jsx(PlayerPlay, {})
+                })
+            }),
+            alt && /*#__PURE__*/ jsx("p", {
+                className: "sr-only",
+                children: alt
+            })
+        ]
+    });
+};
+
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.45",
+  "version": "2.0.0-canary.47",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -18,7 +18,7 @@
     "dist"
   ],
   "dependencies": {
-    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.3",
+    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.5",
     "@react-aria/utils": "^3.25.1",
     "@types/node": "^22.0.0",
     "cva": "1.0.0-beta.2",