@obosbbl/grunnmuren-react 2.0.0-canary.48 → 2.0.0-canary.49

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-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 { 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, DisclosureProps as DisclosureProps$1 } from 'react-aria-components';
+export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLProps, ReactNode } from 'react';
+import { HTMLProps, ReactNode, RefAttributes, HTMLAttributes } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { DateFormatterOptions } from 'react-aria';
@@ -628,4 +628,29 @@ type VideoLoopProps = {
 };
 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 };
+declare const disclosureButtonVariants: (props?: ({
+    withChevron?: boolean | undefined;
+    isIconOnly?: boolean | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+type DisclosureButtonProps = Omit<ButtonProps$1, 'children' | 'aria-expanded' | 'aria-controls'> & VariantProps<typeof disclosureButtonVariants> & {
+    children: React.ReactNode;
+} & RefAttributes<HTMLButtonElement>;
+declare const DisclosureButton: ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps }: DisclosureButtonProps) => react_jsx_runtime.JSX.Element;
+type DisclosureProps = DisclosureProps$1 & RefAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    className?: string;
+};
+declare const Disclosure: ({ ref: _ref, children, ..._props }: DisclosureProps) => react_jsx_runtime.JSX.Element;
+type DisclosurePanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
+    children: React.ReactNode;
+    role?: 'group' | 'region' | 'none';
+} & RefAttributes<HTMLDivElement>;
+declare const DisclosurePanel: ({ ref: _ref, ..._props }: DisclosurePanelProps) => 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, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, type DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanel as UNSAFE_DisclosurePanel, type DisclosurePanelProps as UNSAFE_DisclosurePanelProps, type DisclosureProps as UNSAFE_DisclosureProps, VideoLoop, _useLocale as useLocale };

package/dist/index.mjs

@@ -1,12 +1,13 @@
 '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 } from 'react-aria-components';
-export { Form } 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 } 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';
-import { useLayoutEffect } from '@react-aria/utils';
+import { useLayoutEffect, filterDOMProps } from '@react-aria/utils';
 import { cx, cva, compose } from 'cva';
-import { createContext, forwardRef, Children, useId, useState, useRef, useEffect } from 'react';
-import { useProgressBar, useDateFormatter } from 'react-aria';
+import { createContext, forwardRef, Children, useId, useState, useRef, useEffect, useContext } from 'react';
+import { useProgressBar, useDateFormatter, useDisclosure } from 'react-aria';
+import { useDisclosureState } from 'react-stately';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     return /*#__PURE__*/ jsx(I18nProvider, {
@@ -1305,4 +1306,120 @@ const VideoLoop = ({ src, format, alt, className })=>{
     });
 };
 
-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 };
+const disclosureButtonVariants = cva({
+    base: [
+        'inline-flex cursor-pointer items-center justify-between rounded-lg outline-none 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]'
+    ],
+    variants: {
+        withChevron: {
+            true: '[&[aria-expanded="true"]_svg]:rotate-180',
+            false: null
+        },
+        /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */ isIconOnly: {
+            true: '[&>svg]:h-7 [&>svg]:w-7',
+            false: 'gap-2.5'
+        }
+    },
+    defaultVariants: {
+        withChevron: false,
+        isIconOnly: false
+    }
+});
+const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
+    const [props, ref] = useContextProps(restProps, _ref, ButtonContext);
+    return /*#__PURE__*/ jsxs(Button$1, {
+        ...props,
+        ref: ref,
+        className: disclosureButtonVariants({
+            className,
+            withChevron,
+            isIconOnly
+        }),
+        children: [
+            children,
+            withChevron && /*#__PURE__*/ jsx(ChevronDown, {
+                className: "flex-none transition-transform duration-300 motion-reduce:transition-none"
+            })
+        ]
+    });
+};
+const Disclosure = ({ ref: _ref, children, ..._props })=>{
+    const [props, ref] = useContextProps(_props, _ref, DisclosureContext);
+    const groupState = useContext(DisclosureGroupStateContext);
+    let { id, ...otherProps } = props;
+    const defaultId = useId();
+    id ||= defaultId;
+    const isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
+    const state = useDisclosureState({
+        ...props,
+        isExpanded,
+        onExpandedChange (isExpanded) {
+            if (groupState) {
+                groupState.toggleKey(id);
+            }
+            props.onExpandedChange?.(isExpanded);
+        }
+    });
+    const isDisabled = props.isDisabled || groupState?.isDisabled || false;
+    const domProps = filterDOMProps(otherProps);
+    const panelRef = useRef(null);
+    const { buttonProps, panelProps } = useDisclosure({
+        ...props,
+        isExpanded,
+        isDisabled
+    }, state, panelRef);
+    const { role: _, ...propsWithoutRole } = panelProps;
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                DisclosureContext,
+                state
+            ],
+            [
+                ButtonContext,
+                buttonProps
+            ],
+            [
+                DisclosurePanelContext,
+                {
+                    ...propsWithoutRole,
+                    ref: panelRef
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            ...domProps,
+            className: otherProps.className,
+            ref: ref,
+            "data-expanded": state.isExpanded || undefined,
+            "data-disabled": isDisabled || undefined,
+            children: children
+        })
+    });
+};
+const DisclosurePanelContext = /*#__PURE__*/ createContext({});
+const DisclosurePanel = ({ ref: _ref, ..._props })=>{
+    const disclosureContext = useContext(DisclosureContext);
+    const [props, ref] = useContextProps(_props, _ref, DisclosurePanelContext);
+    const { role: _role = 'group', className, ...restProps } = props;
+    const ariaLabelledby = _props['aria-labelledby'] ?? restProps['aria-labelledby'];
+    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]'),
+        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
+        })
+    });
+};
+
+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, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.48",
+  "version": "2.0.0-canary.49",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -23,7 +23,8 @@
     "@types/node": "^22.0.0",
     "cva": "^1.0.0-0",
     "react-aria": "^3.35.1",
-    "react-aria-components": "^1.3.1"
+    "react-aria-components": "^1.3.1",
+    "react-stately": "^3.35.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19"