@obosbbl/grunnmuren-react 2.0.0-canary.15 → 2.0.0-canary.17

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import { 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, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components';
+import { 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';
 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 { HTMLProps } from 'react';
+import react__default, { HTMLProps, ForwardedRef } from 'react';
 import { VariantProps } from 'cva';
 
 type GrunnmurenProviderProps = {
@@ -17,6 +17,29 @@ type GrunnmurenProviderProps = {
 };
 declare function GrunnmurenProvider({ children, locale, navigate, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
 
+type AccordionProps = {
+    children: react__default.ReactNode;
+    /** Additional CSS className for the element. */
+    className?: string;
+    /** Additional style properties for the element. */
+    style?: react__default.CSSProperties;
+};
+type AccordionItemProps = {
+    children?: react__default.ReactNode;
+    /** Additional CSS className for the element. */
+    className?: string;
+    /** Additional style properties for the element. */
+    style?: react__default.CSSProperties;
+    /** Whether the accordion is open (controlled) */
+    isOpen?: boolean;
+    /** Whether the accordion is open by default (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Handler that is called when the accordion's open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+};
+declare const _Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
+declare const _AccordionItem: react__default.ForwardRefExoticComponent<AccordionItemProps & react__default.RefAttributes<HTMLDivElement>>;
+
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */
@@ -497,15 +520,21 @@ type Props = VariantProps<typeof alertVariants> & {
 declare const Alertbox: ({ children, role, className, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
 
 type HeadingProps = HTMLProps<HTMLHeadingElement> & {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** The level of the heading */
     level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** @private Used internally for slotted components */
+    _innerWrapper?: (children: React.ReactNode) => React.ReactNode;
 };
-declare const Heading: ({ level, ...restProps }: HeadingProps) => react_jsx_runtime.JSX.Element;
+declare const HeadingContext: react.Context<ContextValue<HeadingProps, HTMLHeadingElement>>;
+declare const Heading: (props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
+declare const ContentContext: react.Context<ContextValue<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) => react_jsx_runtime.JSX.Element;
+declare const Content: (props: ContentProps, ref: ForwardedRef<HTMLDivElement>) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
 type FooterProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
@@ -541,4 +570,4 @@ declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
     style?: react.CSSProperties | undefined;
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
 
-export { Alertbox, type Props as AlertboxProps, _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, type ContentProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, type HeadingProps, _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 };
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _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, _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 };

package/dist/index.mjs

@@ -1,10 +1,10 @@
 'use client';
-import { I18nProvider, RouterProvider, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Button as Button$1, 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, useLocale, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Link } from 'react-aria-components';
+import { I18nProvider, RouterProvider, useContextProps, Provider, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Button as Button$1, 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, useLocale, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Link } from 'react-aria-components';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useLayoutEffect, forwardRef, useState, useRef, useId, Children } from 'react';
-import { cva, cx, compose } from 'cva';
-import { LoadingSpinner, Check, ChevronDown, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight } from '@obosbbl/grunnmuren-icons-react';
+import { useLayoutEffect, createContext, forwardRef, Children, useId, useState, useRef } from 'react';
+import { cx, cva, compose } from 'cva';
+import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight } from '@obosbbl/grunnmuren-icons-react';
 import { mergeRefs } from '@react-aria/utils';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate }) {
@@ -22,6 +22,136 @@ const canUseDOM = ()=>{
 };
 const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : ()=>{};
 
+const HeadingContext = /*#__PURE__*/ createContext({});
+const Heading = (props, ref)=>{
+    [props, ref] = useContextProps(props, ref, HeadingContext);
+    const { children, level, className, _innerWrapper: innerWrapper, ...restProps } = props;
+    const Element = `h${level}`;
+    return /*#__PURE__*/ jsx(Element, {
+        ...restProps,
+        className: className,
+        "data-slot": "heading",
+        children: innerWrapper ? innerWrapper(children) : children
+    });
+};
+const ContentContext = /*#__PURE__*/ createContext({});
+const Content = (props, ref)=>{
+    [props, ref] = useContextProps(props, ref, ContentContext);
+    const { _outerWrapper: outerWrapper, ...restProps } = props;
+    const content = /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "content"
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const Footer = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "footer"
+    });
+
+function Accordion(props, ref) {
+    const { children, className, ...restProps } = props;
+    const childCount = Children.count(children);
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: cx('rounded-lg bg-white', className),
+        children: Children.map(children, (child, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    child,
+                    index < childCount - 1 && // Margin is added to enable support for containers with a background color
+                    /*#__PURE__*/ jsx("hr", {
+                        className: "mx-2 border-gray-light",
+                        "aria-hidden": true
+                    })
+                ]
+            }))
+    });
+}
+function AccordionItem(props, ref) {
+    const { className, children, defaultOpen = false, isOpen: controlledIsOpen, onOpenChange, ...restProps } = props;
+    const contentId = useId();
+    const buttonId = useId();
+    const isControlled = controlledIsOpen != null;
+    // This component has internal state that controls whether it is open or not,
+    // regardless if we are controlled or uncontrolled.
+    // If we are controlled, we use a layout effect to sync the controlled state
+    // with the internal state.
+    //
+    const [isOpen, setIsOpen] = useState(// If we are controlled, use that open state, otherwise use the uncontrolled
+    isControlled ? controlledIsOpen : defaultOpen);
+    useClientLayoutEffect(()=>{
+        if (isControlled) {
+            setIsOpen(controlledIsOpen);
+        }
+    }, [
+        controlledIsOpen,
+        isControlled
+    ]);
+    const handleOpenChange = ()=>{
+        const newOpenState = !isOpen;
+        if (!isControlled) {
+            setIsOpen(newOpenState);
+        }
+        // Always call the change handler, even if we're uncontrolled.
+        // Easier to add stuff such as tracking etc.
+        if (onOpenChange) {
+            onOpenChange(newOpenState);
+        }
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx('group relative px-2', className),
+        ref: ref,
+        "data-open": isOpen,
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    HeadingContext,
+                    {
+                        // Negative margin to strech the button to the entire with of the accordion (to support containers with a background color)
+                        className: 'font-semibold leading-7 -mx-2',
+                        // Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
+                        level: 3,
+                        _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
+                                "aria-controls": contentId,
+                                "aria-expanded": isOpen,
+                                // Use outline with offset as focus indicator, this does not cover the left mint border on the expanded content and works with or without a background color on the accordion container
+                                className: "flex min-h-[44px] w-full items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[-6px] focus-visible:outline-black",
+                                id: buttonId,
+                                onClick: handleOpenChange,
+                                children: [
+                                    children,
+                                    /*#__PURE__*/ jsx(ChevronDown, {
+                                        className: cx('transition-transform duration-300 motion-reduce:transition-none', isOpen && 'rotate-180')
+                                    })
+                                ]
+                            })
+                    }
+                ],
+                [
+                    ContentContext,
+                    {
+                        className: // Uses pseudo element for vertical padding, since that doesn't affect the height when the accordion is closed
+                        'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-mint border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
+                        role: 'region',
+                        // @ts-expect-error TODO: remove this expect-error when we're on React 19 https://github.com/facebook/react/issues/17157#issuecomment-2003750544
+                        inert: isOpen ? undefined : 'true',
+                        'aria-labelledby': buttonId,
+                        _outerWrapper: (children)=>/*#__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', isOpen ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr] '),
+                                children: children
+                            })
+                    }
+                ]
+            ],
+            children: children
+        })
+    });
+}
+const _Accordion = /*#__PURE__*/ forwardRef(Accordion);
+const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
+
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */ const buttonVariants = cva({
@@ -765,22 +895,6 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
     });
 };
 
-const Heading = ({ level, ...restProps })=>{
-    const Heading = `h${level}`;
-    return /*#__PURE__*/ jsx(Heading, {
-        ...restProps,
-        "data-slot": "heading"
-    });
-};
-const Content = (props)=>/*#__PURE__*/ jsx("div", {
-        ...props,
-        "data-slot": "content"
-    });
-const Footer = (props)=>/*#__PURE__*/ jsx("div", {
-        ...props,
-        "data-slot": "footer"
-    });
-
 function Breadcrumbs(props, ref) {
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Breadcrumbs$1, {
@@ -812,4 +926,4 @@ function Breadcrumb(props, ref) {
 }
 const _Breadcrumb = /*#__PURE__*/ forwardRef(Breadcrumb);
 
-export { Alertbox, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, Footer, GrunnmurenProvider, Heading, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField };
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _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 };

package/package.json

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