@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/index.js

@@ -1,299 +1 @@
-import { Accordion } from "./lib/accordion/accordion/accordion.js";
-import { AccordionContent } from "./lib/accordion/accordion-content/accordion-content.js";
-import { AccordionContext, getAccordionDataAttributes, getAccordionProps, useAccordionContext } from "./lib/accordion/accordion/helpers.js";
-import { AccordionDataAttributes } from "./lib/accordion/accordion/types.js";
-import { AccordionGroup } from "./lib/accordion/accordion-group/accordion-group.js";
-import { AccordionGroupContext, getAccordionGroupDataAttributes, getAccordionGroupProps, useAccordionGroupContext } from "./lib/accordion/accordion-group/helpers.js";
-import { AccordionGroupDataAttributes } from "./lib/accordion/accordion-group/types.js";
-import { AccordionSummary } from "./lib/accordion/accordion-summary/accordion-summary.js";
-import { AccordionSummaryVariant } from "./lib/accordion/accordion-summary/types.js";
-import { Badge } from "./lib/badge/badge.js";
-import { BlockSkeleton } from "./lib/loading/block-skeleton/block-skeleton.js";
-import { Box } from "./lib/box/box.js";
-import { BreadcrumbItem } from "./lib/breadcrumbs/breadcrumb-item/breadcrumb-item.js";
-import { Breadcrumbs } from "./lib/breadcrumbs/breadcrumbs/breadcrumbs.js";
-import { Button } from "./lib/button/button.js";
-import { Cascader } from "./lib/cascader/cascader.js";
-import { Cell } from "./lib/grid/cell/cell.js";
-import { Checkbox } from "./lib/checkbox/checkbox.js";
-import { Chip } from "./lib/chip/chip.js";
-import { Collapse } from "./lib/collapse/collapse.js";
-import { Container } from "./lib/container/container.js";
-import { CountUp } from "./lib/count-up/count-up.js";
-import { CountdownTimer } from "./lib/countdown-timer/countdown-timer.js";
-import { DatePicker } from "./lib/date-picker/date-picker.js";
-import { Dialog } from "./lib/dialog/dialog/dialog.js";
-import { DialogBody } from "./lib/dialog/dialog-body/dialog-body.js";
-import { DialogClose } from "./lib/dialog/dialog-close/dialog-close.js";
-import { DialogFooter } from "./lib/dialog/dialog-footer/dialog-footer.js";
-import { DialogHeader } from "./lib/dialog/dialog-header/dialog-header.js";
-import { Drawer } from "./lib/drawer/drawer/drawer.js";
-import { DrawerClose } from "./lib/drawer/drawer-close/drawer-close.js";
-import { FilterPanel } from "./lib/filter-panel/filter-panel.js";
-import { Flag } from "./lib/flag/flag.js";
-import { FlexItem } from "./lib/flexbox/flex-item/flex-item.js";
-import { Flexbox } from "./lib/flexbox/flexbox/flexbox.js";
-import { Floating } from "./lib/floating/floating/floating.js";
-import { FloatingClose } from "./lib/floating/floating-close/floating-close.js";
-import { FloatingContent } from "./lib/floating/floating-content/floating-content.js";
-import { FloatingContext, useFloatingContext } from "./lib/floating/floating/helpers.js";
-import { FloatingTrigger } from "./lib/floating/floating-trigger/floating-trigger.js";
-import { FormHelperText } from "./lib/form-helper-text/form-helper-text.js";
-import { FormLabel } from "./lib/form-label/form-label.js";
-import { GRID_MAXIMUM_COLS, GRID_MINIMUM_COLS, Grid } from "./lib/grid/grid/grid.js";
-import { HighlightWords } from "./lib/highlight-words/highlight-words.js";
-import { Icon } from "./lib/icon/icon.js";
-import { IconButton } from "./lib/icon-button/icon-button.js";
-import { Image } from "./lib/image/image.js";
-import { ImageSkeleton } from "./lib/loading/image-skeleton/image-skeleton.js";
-import { Input } from "./lib/input/input.js";
-import { InputNumber } from "./lib/input-number/input-number.js";
-import { InputRange } from "./lib/input-range/input-range.js";
-import { Lightbox } from "./lib/lightbox/lightbox.js";
-import { LinearProgress } from "./lib/linear-progress/linear-progress.js";
-import { Link } from "./lib/link/link.js";
-import { ListItem } from "./lib/unordered-list/list-item/list-item.js";
-import { LoadingOverlay } from "./lib/loading/loading-overlay/loading-overlay.js";
-import { Marquee } from "./lib/marquee/marquee/marquee.js";
-import { MarqueeDataAttributes } from "./lib/marquee/marquee/types.js";
-import { MarqueeItem } from "./lib/marquee/marquee-item/marquee-item.js";
-import { Menu } from "./lib/menu/menu/menu.js";
-import { MenuItem } from "./lib/menu/menu-item/menu-item.js";
-import { MenuList } from "./lib/menu/menu-list/menu-list.js";
-import { MenuListDataAttributes } from "./lib/menu/menu-list/types.js";
-import { MenuTrigger } from "./lib/menu/menu-trigger/menu-trigger.js";
-import { MultipleSelect } from "./lib/multiple-select/multiple-select.js";
-import { NavLink } from "./lib/nav-link/nav-link.js";
-import { Notifications } from "./lib/notifications/notifications.js";
-import { OtpInput } from "./lib/otp-input/otp-input.js";
-import { Pagination } from "./lib/pagination/pagination.js";
-import { PhoneInput } from "./lib/phone-input/phone-input.js";
-import { Popover } from "./lib/popover/popover/popover.js";
-import { PopoverClose } from "./lib/popover/popover-close/popover-close.js";
-import { PopoverContent } from "./lib/popover/popover-content/popover-content.js";
-import { PopoverTrigger } from "./lib/popover/popover-trigger/popover-trigger.js";
-import { Primitive } from "./lib/primitive/primitive.js";
-import { Progress } from "./lib/progress/progress.js";
-import { RadioButton } from "./lib/radio-button/radio-button.js";
-import { Select } from "./lib/select/select.js";
-import { StarRating } from "./lib/star-rating/star-rating.js";
-import { Step } from "./lib/stepper/step.js";
-import { Stepper } from "./lib/stepper/stepper.js";
-import { Swiper } from "./lib/swiper/swiper/swiper.js";
-import { SwiperDotsPaging } from "./lib/swiper/swiper-dots-paging/swiper-dots-paging.js";
-import { SwiperSlide } from "./lib/swiper/swiper-slide/swiper-slide.js";
-import { Switch } from "./lib/switch/switch.js";
-import { Tab } from "./lib/tabs/tab/tab.js";
-import { TabContent } from "./lib/tabs/tab-content/tab-content.js";
-import { TabIndexContext, useTabIndexContext } from "./lib/tabs/tab/helpers.js";
-import { TabList } from "./lib/tabs/tab-list/tab-list.js";
-import { TabPanel } from "./lib/tabs/tab-panel/tab-panel.js";
-import { Table } from "./lib/table/table/table.js";
-import { TableBody } from "./lib/table/table-body/table-body.js";
-import { TableCell } from "./lib/table/table-cell/table-cell.js";
-import { TableFooter } from "./lib/table/table-footer/table-footer.js";
-import { TableHead } from "./lib/table/table-head/table-head.js";
-import { TableRow } from "./lib/table/table-row/table-row.js";
-import { Tabs } from "./lib/tabs/tabs/tabs.js";
-import { TabsContext, getTabsProps, useTabsContext } from "./lib/tabs/tabs/helpers.js";
-import { Text } from "./lib/text/text.js";
-import { TextSkeleton } from "./lib/loading/text-skeleton/text-skeleton.js";
-import { Textarea } from "./lib/textarea/textarea.js";
-import { TimePicker } from "./lib/time-picker/time-picker.js";
-import { Tooltip } from "./lib/tooltip/tooltip.js";
-import { UnorderedList } from "./lib/unordered-list/unordered-list/unordered-list.js";
-import { Video } from "./lib/video/video.js";
-import { getAccordionContentProps } from "./lib/accordion/accordion-content/helpers.js";
-import { getAccordionSummaryProps } from "./lib/accordion/accordion-summary/helpers.js";
-import { getBadgeProps } from "./lib/badge/helpers.js";
-import { getBoxProps } from "./lib/box/helpers.js";
-import { getButtonProps } from "./lib/button/helpers.js";
-import { getCellProps } from "./lib/grid/cell/helpers.js";
-import { getChipProps } from "./lib/chip/helpers.js";
-import { getContainerProps } from "./lib/container/helpers.js";
-import { getDatePickerProps } from "./lib/date-picker/helpers.js";
-import { getDialogProps, getDialogSizeInNumber, useDialogContext } from "./lib/dialog/dialog/helpers.js";
-import { getFlagProps } from "./lib/flag/helpers.js";
-import { getFlexItemProps } from "./lib/flexbox/flex-item/helpers.js";
-import { getFlexboxProps } from "./lib/flexbox/flexbox/helpers.js";
-import { getGridProps } from "./lib/grid/grid/helpers.js";
-import { getIconButtonProps } from "./lib/icon-button/helpers.js";
-import { getIconProps } from "./lib/icon/helpers.js";
-import { getImageProps } from "./lib/image/helpers.js";
-import { getInputProps } from "./lib/input/helpers.js";
-import { getLinkProps } from "./lib/link/helpers.js";
-import { getListItemProps } from "./lib/unordered-list/list-item/helpers.js";
-import { getMarqueeProps } from "./lib/marquee/marquee/helpers.js";
-import { getMultipleSelectProps } from "./lib/multiple-select/helpers.js";
-import { getPageRange, getPaginationProps } from "./lib/pagination/helpers.js";
-import { getRadioButtonProps } from "./lib/radio-button/helpers.js";
-import { getSwiperProps } from "./lib/swiper/swiper/helpers.js";
-import { getTabListProps } from "./lib/tabs/tab-list/helpers.js";
-import { getTabPanelProps } from "./lib/tabs/tab-panel/helpers.js";
-import { getTextCssByVariant, getTextProps } from "./lib/text/helpers.js";
-import { getTextareaProps } from "./lib/textarea/helpers.js";
-import { getUnorderedListProps } from "./lib/unordered-list/unordered-list/helpers.js";
-import { getVideoProps } from "./lib/video/helpers.js";
-import { notificationStore, useNotifications } from "./lib/notifications/helpers.js";
-import { states } from "./lib/stepper/types.js";
-import { useDrawerContext } from "./lib/drawer/drawer/helpers.js";
-import { usePopoverContext } from "./lib/popover/popover/helpers.js";
-export {
-  Accordion,
-  AccordionContent,
-  AccordionContext,
-  AccordionDataAttributes,
-  AccordionGroup,
-  AccordionGroupContext,
-  AccordionGroupDataAttributes,
-  AccordionSummary,
-  AccordionSummaryVariant,
-  Badge,
-  BlockSkeleton,
-  Box,
-  BreadcrumbItem,
-  Breadcrumbs,
-  Button,
-  Cascader,
-  Cell,
-  Checkbox,
-  Chip,
-  Collapse,
-  Container,
-  CountUp,
-  CountdownTimer,
-  DatePicker,
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogFooter,
-  DialogHeader,
-  Drawer,
-  DrawerClose,
-  FilterPanel,
-  Flag,
-  FlexItem,
-  Flexbox,
-  Floating,
-  FloatingClose,
-  FloatingContent,
-  FloatingContext,
-  FloatingTrigger,
-  FormHelperText,
-  FormLabel,
-  GRID_MAXIMUM_COLS,
-  GRID_MINIMUM_COLS,
-  Grid,
-  HighlightWords,
-  Icon,
-  IconButton,
-  Image,
-  ImageSkeleton,
-  Input,
-  InputNumber,
-  InputRange,
-  Lightbox,
-  LinearProgress,
-  Link,
-  ListItem,
-  LoadingOverlay,
-  Marquee,
-  MarqueeDataAttributes,
-  MarqueeItem,
-  Menu,
-  MenuItem,
-  MenuList,
-  MenuListDataAttributes,
-  MenuTrigger,
-  MultipleSelect,
-  NavLink,
-  Notifications,
-  OtpInput,
-  Pagination,
-  PhoneInput,
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTrigger,
-  Primitive,
-  Progress,
-  RadioButton,
-  Select,
-  StarRating,
-  Step,
-  Stepper,
-  Swiper,
-  SwiperDotsPaging,
-  SwiperSlide,
-  Switch,
-  Tab,
-  TabContent,
-  TabIndexContext,
-  TabList,
-  TabPanel,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableRow,
-  Tabs,
-  TabsContext,
-  Text,
-  TextSkeleton,
-  Textarea,
-  TimePicker,
-  Tooltip,
-  UnorderedList,
-  Video,
-  getAccordionContentProps,
-  getAccordionDataAttributes,
-  getAccordionGroupDataAttributes,
-  getAccordionGroupProps,
-  getAccordionProps,
-  getAccordionSummaryProps,
-  getBadgeProps,
-  getBoxProps,
-  getButtonProps,
-  getCellProps,
-  getChipProps,
-  getContainerProps,
-  getDatePickerProps,
-  getDialogProps,
-  getDialogSizeInNumber,
-  getFlagProps,
-  getFlexItemProps,
-  getFlexboxProps,
-  getGridProps,
-  getIconButtonProps,
-  getIconProps,
-  getImageProps,
-  getInputProps,
-  getLinkProps,
-  getListItemProps,
-  getMarqueeProps,
-  getMultipleSelectProps,
-  getPageRange,
-  getPaginationProps,
-  getRadioButtonProps,
-  getSwiperProps,
-  getTabListProps,
-  getTabPanelProps,
-  getTabsProps,
-  getTextCssByVariant,
-  getTextProps,
-  getTextareaProps,
-  getUnorderedListProps,
-  getVideoProps,
-  notificationStore,
-  states,
-  useAccordionContext,
-  useAccordionGroupContext,
-  useDialogContext,
-  useDrawerContext,
-  useFloatingContext,
-  useNotifications,
-  usePopoverContext,
-  useTabIndexContext,
-  useTabsContext
-};
+export * from './lib';

package/dist/lib/accordion/accordion/accordion.d.ts

@@ -1,3 +1,2 @@
-import { AccordionProps } from './types';
+import { AccordionProps } from "./types";
 export declare const Accordion: (_props: AccordionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=accordion.d.ts.map

package/dist/lib/accordion/accordion/accordion.jsx

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { isNil } from "lodash-es";
+import { AccordionContext, getAccordionDataAttributes, getAccordionProps, } from "./helpers";
+import { AccordionDataAttributes } from "./types";
+import { getAccordionGroupDataAttributes } from "../accordion-group";
+import { Booleanish } from "../../../constants";
+import { useControllableState } from "../../../hooks";
+import { mediaQuery } from "../../../theme";
+export const Accordion = (_props) => {
+    const { xs, sm, md, lg, children, open: controlledOpen, defaultOpen = false, onOpenChange: onOpenChangeCallback, ref, ...rest } = getAccordionProps(_props);
+    const rootRef = useRef(null);
+    const mergedRefs = useMergeRefs([ref, rootRef]);
+    const [open, setOpen] = useControllableState({
+        defaultValue: defaultOpen,
+        value: controlledOpen,
+    });
+    const onOpenChange = useCallback((nextOpen) => {
+        setOpen(nextOpen);
+        onOpenChangeCallback?.(nextOpen);
+    }, [setOpen, onOpenChangeCallback]);
+    const css = [
+        {
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+        },
+        xs?.css,
+        {
+            [mediaQuery("sm")]: sm?.css,
+            [mediaQuery("md")]: md?.css,
+            [mediaQuery("lg")]: lg?.css,
+        },
+    ];
+    const toggle = useCallback(() => {
+        const rootElement = rootRef.current;
+        if (!rootElement)
+            return;
+        const { openState: currentOpen } = getAccordionDataAttributes(rootElement);
+        const nextOpen = !currentOpen;
+        rootElement.setAttribute(AccordionDataAttributes.OpenState, nextOpen.toString());
+    }, []);
+    const contextValue = useMemo(() => ({
+        open,
+        toggle,
+    }), [open, toggle]);
+    useEffect(() => {
+        const mutationObserver = new MutationObserver((records) => {
+            const target = records.at(0)?.target;
+            if (isNil(target))
+                return;
+            const nextOpen = target.getAttribute(AccordionDataAttributes.OpenState) ===
+                Booleanish.True;
+            onOpenChange(nextOpen);
+            if (nextOpen && target.parentElement) {
+                const { openMode } = getAccordionGroupDataAttributes(target.parentElement);
+                switch (openMode) {
+                    case "single":
+                        for (const child of target.parentElement.children) {
+                            if (child !== target &&
+                                getAccordionDataAttributes(child).openState) {
+                                child.setAttribute(AccordionDataAttributes.OpenState, Booleanish.False);
+                            }
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+        });
+        if (rootRef.current) {
+            mutationObserver.observe(rootRef.current, {
+                attributes: true,
+                attributeFilter: [AccordionDataAttributes.OpenState],
+            });
+        }
+        return () => {
+            mutationObserver.disconnect();
+        };
+    }, [onOpenChange]);
+    return (<AccordionContext.Provider value={contextValue}>
+      <div css={css} {...{
+        [AccordionDataAttributes.OpenState]: open,
+    }} {...rest} ref={mergedRefs}>
+        {children}
+      </div>
+    </AccordionContext.Provider>);
+};

package/dist/lib/accordion/accordion/helpers.d.ts

@@ -3,10 +3,9 @@ export type AccordionContextValue = {
     open: boolean;
     toggle: () => void;
 };
-export declare const AccordionContext: import('react').Context<AccordionContextValue>;
+export declare const AccordionContext: import("react").Context<AccordionContextValue>;
 export declare const useAccordionContext: () => AccordionContextValue;
 export declare const getAccordionDataAttributes: (element: Element) => {
     openState: boolean;
 };
 export declare const getAccordionProps: (extended: AccordionProps) => AccordionProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/accordion/accordion/helpers.js

@@ -1,21 +1,15 @@
-import { createContext, useContext } from "react";
-import { AccordionDataAttributes } from "./types.js";
-import { Booleanish } from "../../../constants/index.js";
-import { mergeComponentProps } from "../../../utils/index.js";
-const AccordionContext = createContext({});
-const useAccordionContext = () => useContext(AccordionContext);
-const getAccordionDataAttributes = (element) => {
-  return {
-    openState: element.getAttribute(AccordionDataAttributes.OpenState) === Booleanish.True
-  };
+import { createContext, useContext } from 'react';
+import { AccordionDataAttributes } from './types';
+import { Booleanish } from '../../../constants';
+import { mergeComponentProps } from '../../../utils';
+export const AccordionContext = createContext({});
+export const useAccordionContext = () => useContext(AccordionContext);
+export const getAccordionDataAttributes = (element) => {
+    return {
+        openState: element.getAttribute(AccordionDataAttributes.OpenState) === Booleanish.True,
+    };
 };
 const defaultProps = {};
-const getAccordionProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  AccordionContext,
-  getAccordionDataAttributes,
-  getAccordionProps,
-  useAccordionContext
+export const getAccordionProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/accordion/accordion/index.d.ts

@@ -1,4 +1,3 @@
 export * from './accordion';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/accordion/accordion/index.js

@@ -0,0 +1,3 @@
+export * from './accordion';
+export * from './types';
+export * from './helpers';

package/dist/lib/accordion/accordion/types.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { JSX } from "react";
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types";
 export declare enum AccordionDataAttributes {
     OpenState = "data-open"
 }
@@ -9,4 +9,3 @@ export interface AccordionExtendedProps extends ResponsiveDesign<PropsWithCSS> {
     onOpenChange?: (open: boolean) => void;
 }
 export type AccordionProps = ShallowMerge<JSX.IntrinsicElements["div"], AccordionExtendedProps>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/accordion/accordion/types.js

@@ -1,7 +1,4 @@
-var AccordionDataAttributes = /* @__PURE__ */ ((AccordionDataAttributes2) => {
-  AccordionDataAttributes2["OpenState"] = "data-open";
-  return AccordionDataAttributes2;
-})(AccordionDataAttributes || {});
-export {
-  AccordionDataAttributes
-};
+export var AccordionDataAttributes;
+(function (AccordionDataAttributes) {
+    AccordionDataAttributes["OpenState"] = "data-open";
+})(AccordionDataAttributes || (AccordionDataAttributes = {}));

package/dist/lib/accordion/accordion-content/accordion-content.d.ts

@@ -1,3 +1,2 @@
 import { AccordionContentProps } from './types';
 export declare const AccordionContent: ({ children, ref, ..._props }: AccordionContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=accordion-content.d.ts.map

package/dist/lib/accordion/accordion-content/accordion-content.jsx

@@ -0,0 +1,31 @@
+import { useRef } from 'react';
+import { motion } from 'motion/react';
+import { getAccordionContentProps } from './helpers';
+import { useAccordionContext } from '../accordion/helpers';
+import { useAccordionGroupContext } from '../accordion-group';
+import { mediaQuery } from '../../../theme';
+export const AccordionContent = ({ children, ref, ..._props }) => {
+    const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();
+    const { xs, sm, md, lg, containerProps, ...props } = getAccordionContentProps(accordionContentPropsByGroup, _props);
+    const { open } = useAccordionContext();
+    const defaultOpenRef = useRef(open);
+    const css = [
+        {
+            width: '100%',
+        },
+        xs?.css,
+        {
+            [mediaQuery('sm')]: sm?.css,
+            [mediaQuery('md')]: md?.css,
+            [mediaQuery('lg')]: lg?.css,
+        },
+    ];
+    const initial = defaultOpenRef.current
+        ? { height: 'auto', opacity: 1 }
+        : { height: 0, opacity: 0 };
+    return (<motion.div initial={initial} animate={open ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 }} transition={{ duration: 0.3 }} css={{ overflow: 'hidden', width: '100%' }} {...containerProps} ref={ref}>
+      <div {...props} css={css}>
+        {children}
+      </div>
+    </motion.div>);
+};

package/dist/lib/accordion/accordion-content/helpers.d.ts

@@ -1,3 +1,2 @@
 import { AccordionContentProps } from './types';
 export declare const getAccordionContentProps: (...extended: Partial<AccordionContentProps>[]) => AccordionContentProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/accordion/accordion-content/helpers.js

@@ -1,8 +1,5 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {};
-const getAccordionContentProps = (...extended) => {
-  return mergeComponentProps(defaultProps, ...extended);
-};
-export {
-  getAccordionContentProps
+export const getAccordionContentProps = (...extended) => {
+    return mergeComponentProps(defaultProps, ...extended);
 };

package/dist/lib/accordion/accordion-content/index.d.ts

@@ -1,4 +1,3 @@
 export * from './accordion-content';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/accordion/accordion-content/index.js

@@ -0,0 +1,3 @@
+export * from './accordion-content';
+export * from './types';
+export * from './helpers';

package/dist/lib/accordion/accordion-content/types.d.ts

@@ -7,4 +7,3 @@ interface AccordionContentExtendedProps extends ResponsiveDesign<PropsWithCSS> {
 }
 export type AccordionContentProps = ShallowMerge<JSX.IntrinsicElements['div'], AccordionContentExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/accordion/accordion-content/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/accordion/accordion-group/accordion-group.d.ts

@@ -1,3 +1,2 @@
 import { AccordionGroupProps } from './types';
-export declare const AccordionGroup: import('react').ForwardRefExoticComponent<Omit<AccordionGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=accordion-group.d.ts.map
+export declare const AccordionGroup: import("react").ForwardRefExoticComponent<Omit<AccordionGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib/accordion/accordion-group/accordion-group.jsx

@@ -0,0 +1,33 @@
+import { forwardRef, useMemo, useRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { AccordionGroupContext, getAccordionGroupProps } from './helpers';
+import { AccordionGroupDataAttributes } from './types';
+import { mediaQuery } from '../../../theme';
+export const AccordionGroup = forwardRef((_props, ref) => {
+    const { children, xs, sm, md, lg, openMode = 'multiple', accordionSummaryProps, accordionContentProps, ...rest } = getAccordionGroupProps(_props);
+    const rootEl = useRef(null);
+    const mergedRefs = useMergeRefs([ref, rootEl]);
+    const css = [
+        {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        xs?.css,
+        {
+            [mediaQuery('sm')]: sm?.css,
+            [mediaQuery('md')]: md?.css,
+            [mediaQuery('lg')]: lg?.css,
+        },
+    ];
+    const contextValue = useMemo(() => ({
+        accordionSummaryProps,
+        accordionContentProps,
+    }), [accordionSummaryProps, accordionContentProps]);
+    return (<AccordionGroupContext.Provider value={contextValue}>
+      <div css={css} {...rest} {...{
+        [AccordionGroupDataAttributes.OpenMode]: openMode,
+    }} ref={mergedRefs}>
+        {children}
+      </div>
+    </AccordionGroupContext.Provider>);
+});

package/dist/lib/accordion/accordion-group/helpers.d.ts

@@ -1,15 +1,14 @@
 import { AccordionGroupOpenMode, AccordionGroupProps } from './types';
 import { Nullable } from '../../../types';
-export declare const AccordionGroupContext: import('react').Context<Partial<{
-    accordionSummaryProps?: Partial<import('..').AccordionSummaryProps>;
-    accordionContentProps?: Partial<import('..').AccordionContentProps>;
+export declare const AccordionGroupContext: import("react").Context<Partial<{
+    accordionSummaryProps?: Partial<import("..").AccordionSummaryProps>;
+    accordionContentProps?: Partial<import("..").AccordionContentProps>;
 }>>;
 export declare const useAccordionGroupContext: () => Partial<{
-    accordionSummaryProps?: Partial<import('..').AccordionSummaryProps>;
-    accordionContentProps?: Partial<import('..').AccordionContentProps>;
+    accordionSummaryProps?: Partial<import("..").AccordionSummaryProps>;
+    accordionContentProps?: Partial<import("..").AccordionContentProps>;
 }>;
 export declare const getAccordionGroupDataAttributes: (element: HTMLElement) => {
     openMode: Nullable<AccordionGroupOpenMode>;
 };
 export declare const getAccordionGroupProps: (extended: AccordionGroupProps) => AccordionGroupProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/accordion/accordion-group/helpers.js

@@ -1,20 +1,14 @@
-import { createContext, useContext } from "react";
-import { AccordionGroupDataAttributes } from "./types.js";
-import { mergeComponentProps } from "../../../utils/index.js";
-const AccordionGroupContext = createContext({});
-const useAccordionGroupContext = () => useContext(AccordionGroupContext);
-const getAccordionGroupDataAttributes = (element) => {
-  return {
-    openMode: element.getAttribute(AccordionGroupDataAttributes.OpenMode) ?? null
-  };
+import { createContext, useContext } from 'react';
+import { AccordionGroupDataAttributes, } from './types';
+import { mergeComponentProps } from '../../../utils';
+export const AccordionGroupContext = createContext({});
+export const useAccordionGroupContext = () => useContext(AccordionGroupContext);
+export const getAccordionGroupDataAttributes = (element) => {
+    return {
+        openMode: (element.getAttribute(AccordionGroupDataAttributes.OpenMode) ?? null),
+    };
 };
 const defaultProps = {};
-const getAccordionGroupProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  AccordionGroupContext,
-  getAccordionGroupDataAttributes,
-  getAccordionGroupProps,
-  useAccordionGroupContext
+export const getAccordionGroupProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };