@obosbbl/grunnmuren-react 2.0.0-canary.37 → 2.0.0-canary.38

package/dist/index.d.mts

@@ -1,9 +1,10 @@
-import { RouterProvider, ButtonProps as ButtonProps$1, Link, 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 } from 'react-aria-components';
+import { RouterProvider, ButtonProps as ButtonProps$1, Link, 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, LinkProps } 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';
-import react__default, { HTMLProps, ForwardedRef } from 'react';
+import react__default, { HTMLProps, ForwardedRef, ReactNode } from 'react';
 import { VariantProps } from 'cva';
+import { DateFormatterOptions } from 'react-aria';
 
 type Locale = 'nb' | 'sv' | 'en';
 /**
@@ -670,15 +671,19 @@ type HeadingProps = HTMLProps<HTMLHeadingElement> & {
     /** @private Used internally for slotted components */
     _innerWrapper?: (children: React.ReactNode) => React.ReactNode;
 };
-declare const HeadingContext: react.Context<ContextValue<HeadingProps, HTMLHeadingElement>>;
+declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
 declare const Heading: (props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
-declare const ContentContext: react.Context<ContextValue<ContentProps, HTMLDivElement>>;
+declare const ContentContext: react.Context<ContextValue<Partial<ContentProps>, HTMLDivElement>>;
 type ContentProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
     /** @private Used internally for slotted components */
     _outerWrapper?: (children: React.ReactNode) => React.ReactNode;
 };
 declare const Content: (props: ContentProps, ref: ForwardedRef<HTMLDivElement>) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+type MediaProps = HTMLProps<HTMLDivElement> & {
+    children: React.ReactNode;
+};
+declare const Media: (props: MediaProps) => react_jsx_runtime.JSX.Element;
 type FooterProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
@@ -730,4 +735,92 @@ type ButtonOrLinkProps = {
 type BacklinkProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
 declare const _Backlink: react.ForwardRefExoticComponent<BacklinkProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
-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, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, ContentContext, type ContentProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, type Locale, _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 CardProps = VariantProps<typeof cardVariants> & {
+    children?: React.ReactNode;
+    className?: string;
+};
+declare const cardVariants: (props?: ({
+    variant?: "subtle" | "outlined" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+declare const Card: ({ children, className: _className, variant, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
+type RACLinkProps = Pick<LinkProps, 'href' | 'routerOptions' | 'children'>;
+type CardLinkWrapperProps = RACLinkProps & {
+    children: React.ReactNode;
+};
+type CardLinkProps = {
+    className?: string;
+} & (RACLinkProps | CardLinkWrapperProps);
+/**
+ * A component that creates a clickable area on a card.
+ * It can be used either as a wrapper around a link or as a standalone link.
+ */
+declare const CardLink: ({ className: _className, href, ...restProps }: CardLinkProps) => react_jsx_runtime.JSX.Element;
+
+type DateFormatterProps = {
+    value: Date | string;
+    options?: DateFormatterOptions;
+    /** Callback to customize the rendering of the date */
+    children?: (formattedDate: string) => ReactNode;
+};
+/**
+ * A React component that wraps https://react-spectrum.adobe.com/react-aria/useDateFormatter.html
+ * By default it sets the timeZone to `Europe/Berlin` to prevent the server's timezone from affecting
+ * the localized format
+ */
+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, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, 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 };

package/dist/index.mjs

@@ -6,6 +6,7 @@ import { createContext, forwardRef, Children, useId, useState, useRef } from 're
 import { cx, cva, compose } from 'cva';
 import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
 import { useLayoutEffect, mergeRefs } from '@react-aria/utils';
+import { useDateFormatter } from 'react-aria';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     return /*#__PURE__*/ jsx(I18nProvider, {
@@ -48,6 +49,10 @@ const Content = (props, ref)=>{
     });
     return outerWrapper ? outerWrapper(content) : content;
 };
+const Media = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "media"
+    });
 const Footer = (props)=>/*#__PURE__*/ jsx("div", {
         ...props,
         "data-slot": "footer"
@@ -1032,4 +1037,153 @@ function Backlink(props, ref) {
 }
 const _Backlink = /*#__PURE__*/ forwardRef(Backlink);
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, Footer, GrunnmurenProvider, Heading, HeadingContext, _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 cardVariants = cva({
+    base: [
+        'group/card',
+        'rounded-2xl border p-3',
+        'grid auto-rows-max gap-y-4',
+        'relative',
+        // **** Heading ****
+        '[&_[data-slot="heading"]]:inline',
+        '[&_[data-slot="heading"]]:heading-s',
+        '[&_[data-slot="heading"]]:w-fit',
+        '[&_[data-slot="heading"]]:text-pretty',
+        // **** Content ****
+        '[&_[data-slot="content"]]:grid [&_[data-slot="content"]]:auto-rows-max [&_[data-slot="content"]]:gap-y-4',
+        // **** Media ****
+        '[&_[data-slot="media"]]:overflow-hidden',
+        '[&_[data-slot="media"]]:rounded-t-2xl',
+        // 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"]>*]:aspect-[3/2] [&_[data-slot="media"]>*]: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 ****
+        // **** Hover ****
+        // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
+        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>*]:scale-110',
+        // **** Card link in Heading ****
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>*]:scale-110',
+        // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
+        // Border top is set to even out the border bottom used for the underline
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:no-underline',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-2',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-transparent',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:transition-colors',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]:hover]:border-b-current',
+        // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s [&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty',
+        // **** Fail-safe for interactive elements ****
+        // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
+        // The card is made clickable by a pseudo-element on the heading that covers the entire card
+        '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
+        // Place other interactive on top of the pseudo-element that makes the entire card clickable
+        // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
+        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]'
+    ],
+    variants: {
+        /**
+     * The variant of the card
+     * @default subtle
+     */ variant: {
+            subtle: [
+                'border-transparent',
+                // Media styles:
+                '[&_[data-slot="media"]]:rounded-b-2xl'
+            ],
+            outlined: 'border border-black'
+        }
+    },
+    defaultVariants: {
+        variant: 'subtle'
+    }
+});
+const Card = ({ children, className: _className, variant, ...restProps })=>{
+    const className = cardVariants({
+        className: _className,
+        variant
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        ...restProps,
+        children: children
+    });
+};
+const cardLinkVariants = cva({
+    base: 'w-fit max-w-full',
+    variants: {
+        withHref: {
+            true: [
+                // **** Clickarea ****
+                'cursor-pointer',
+                'after:absolute',
+                'after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                'focus-visible:outline-none',
+                'focus-visible:after:outline-focus',
+                'focus-visible:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the clickable area.
+                'hover:no-underline'
+            ],
+            false: [
+                // **** Clickarea ****
+                '[&_a]:after:cursor-pointer',
+                '[&_a]:after:absolute',
+                '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                '[&_a:focus-visible]:outline-none',
+                '[&_a:focus-visible]:after:outline-focus',
+                '[&_a:focus-visible]:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the card.
+                // The group-hover ensures that the hover effect also applies when this component is used as a wrapper around a link.
+                '[&_a]:group-hover/card:no-underline'
+            ]
+        }
+    }
+});
+/**
+ * A component that creates a clickable area on a card.
+ * It can be used either as a wrapper around a link or as a standalone link.
+ */ const CardLink = ({ className: _className, href, ...restProps })=>{
+    const className = cardLinkVariants({
+        className: _className,
+        withHref: !!href
+    });
+    return href ? /*#__PURE__*/ jsx(Link, {
+        "data-slot": "card-link",
+        ...restProps,
+        href: href,
+        className: className
+    }) : // We can't utilize that the `Link` component from react-aria-components renders as a span if it doesn't have an href,
+    // because it still renders with role="link" and tabindex="0" which makes it focusable.
+    // So we need to render a div instead.
+    /*#__PURE__*/ jsx("div", {
+        "data-slot": "card-link",
+        className: className,
+        ...restProps
+    });
+};
+
+/**
+ * A React component that wraps https://react-spectrum.adobe.com/react-aria/useDateFormatter.html
+ * By default it sets the timeZone to `Europe/Berlin` to prevent the server's timezone from affecting
+ * the localized format
+ */ const DateFormatter = ({ options: _options, value, children: render })=>{
+    const options = {
+        timeZone: 'Europe/Berlin',
+        ..._options
+    };
+    const formatter = useDateFormatter(options);
+    const date = typeof value === 'string' ? new Date(value) : value;
+    const formatted = formatter.format(date);
+    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, ContentContext, DateFormatter, Footer, GrunnmurenProvider, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.37",
+  "version": "2.0.0-canary.38",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -20,8 +20,9 @@
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
     "@react-aria/utils": "^3.25.1",
-    "@types/node": "^20.11.19",
+    "@types/node": "^22.0.0",
     "cva": "1.0.0-beta.1",
+    "react-aria": "^3.35.1",
     "react-aria-components": "^1.3.1"
   },
   "peerDependencies": {