@masaraxui/react 1.0.0

package/dist/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,173 @@
+"use client";
+import { dateRangePickerVariants } from '@masaraxui/styles';
+import { mergeRefs } from '@react-aria/utils';
+import React__default, { useRef, useEffect, createContext, useContext } from 'react';
+import { DateRangePicker, Popover, Button } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { IconCalendar } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const DateRangePickerContext = /*#__PURE__*/createContext({
+  triggerRef: {
+    current: null
+  }
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * DateRangePicker Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateRangePickerRoot = ({
+  children,
+  className,
+  onOpenChange,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => dateRangePickerVariants(), []);
+  const triggerRef = useRef(null);
+  const [isOpen, setIsOpen] = React__default.useState(false);
+  const shouldRestoreFocusToTriggerRef = useRef(false);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleGlobalKeyDown = event => {
+      if (!event.metaKey && !event.ctrlKey && !event.altKey) {
+        shouldRestoreFocusToTriggerRef.current = true;
+      }
+    };
+    window.addEventListener("keydown", handleGlobalKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown, true);
+    };
+  }, [isOpen]);
+  const handleOpenChange = nextIsOpen => {
+    setIsOpen(nextIsOpen);
+    if (!nextIsOpen && shouldRestoreFocusToTriggerRef.current) {
+      window.requestAnimationFrame(() => {
+        triggerRef.current?.focus();
+      });
+    }
+    shouldRestoreFocusToTriggerRef.current = false;
+    onOpenChange?.(nextIsOpen);
+  };
+  return /*#__PURE__*/jsx(DateRangePickerContext, {
+    value: {
+      slots,
+      triggerRef
+    },
+    children: /*#__PURE__*/jsx(DateRangePicker, {
+      "data-required": dataAttr(props.isRequired),
+      "data-slot": "date-range-picker",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      onOpenChange: handleOpenChange,
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+DateRangePickerRoot.displayName = "MasaraxUI.DateRangePicker";
+
+/* -------------------------------------------------------------------------------------------------
+ * DateRangePicker Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateRangePickerTrigger = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots,
+    triggerRef
+  } = useContext(DateRangePickerContext);
+  const contextRefCallback = React__default.useCallback(node => {
+    triggerRef.current = node;
+  }, [triggerRef]);
+  const mergedRef = mergeRefs(contextRefCallback, ref);
+  return /*#__PURE__*/jsx(Button, {
+    ref: mergedRef,
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "date-range-picker-trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+});
+DateRangePickerTrigger.displayName = "MasaraxUI.DateRangePicker.Trigger";
+
+/* -------------------------------------------------------------------------------------------------
+ * DateRangePicker Trigger Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateRangePickerTriggerIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateRangePickerContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.triggerIndicator, className),
+    "data-slot": "date-range-picker-trigger-indicator",
+    ...props,
+    children: children || /*#__PURE__*/jsx(IconCalendar, {})
+  });
+};
+DateRangePickerTriggerIndicator.displayName = "MasaraxUI.DateRangePicker.TriggerIndicator";
+
+/* -------------------------------------------------------------------------------------------------
+ * DateRangePicker Range Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateRangePickerRangeSeparator = ({
+  children = " - ",
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateRangePickerContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.rangeSeparator, className),
+    "data-slot": "date-range-picker-range-separator",
+    ...props,
+    children: children
+  });
+};
+DateRangePickerRangeSeparator.displayName = "MasaraxUI.DateRangePicker.RangeSeparator";
+
+/* -------------------------------------------------------------------------------------------------
+ * DateRangePicker Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateRangePickerPopover = ({
+  children,
+  className,
+  placement = "bottom",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateRangePickerContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      placement: placement,
+      children: children
+    })
+  });
+};
+DateRangePickerPopover.displayName = "MasaraxUI.DateRangePicker.Popover";
+
+export { DateRangePickerPopover, DateRangePickerRangeSeparator, DateRangePickerRoot, DateRangePickerTrigger, DateRangePickerTriggerIndicator };

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps } from "react";
+import { DateRangePickerPopover, DateRangePickerRangeSeparator, DateRangePickerRoot, DateRangePickerTrigger, DateRangePickerTriggerIndicator } from "./date-range-picker";
+export declare const DateRangePicker: {
+    <T extends import("react-aria-components").DateValue>({ children, className, onOpenChange, ...props }: import("./date-range-picker").DateRangePickerRootProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        <T extends import("react-aria-components").DateValue>({ children, className, onOpenChange, ...props }: import("./date-range-picker").DateRangePickerRootProps<T>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("./date-range-picker").DateRangePickerTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    TriggerIndicator: {
+        ({ children, className, ...props }: import("./date-range-picker").DateRangePickerTriggerIndicatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    RangeSeparator: {
+        ({ children, className, ...props }: import("./date-range-picker").DateRangePickerRangeSeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Popover: {
+        ({ children, className, placement, ...props }: import("./date-range-picker").DateRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type DateRangePicker = {
+    Props: ComponentProps<typeof DateRangePickerRoot>;
+    RootProps: ComponentProps<typeof DateRangePickerRoot>;
+    TriggerProps: ComponentProps<typeof DateRangePickerTrigger>;
+    TriggerIndicatorProps: ComponentProps<typeof DateRangePickerTriggerIndicator>;
+    RangeSeparatorProps: ComponentProps<typeof DateRangePickerRangeSeparator>;
+    PopoverProps: ComponentProps<typeof DateRangePickerPopover>;
+};
+export { DateRangePickerRoot, DateRangePickerTrigger, DateRangePickerTriggerIndicator, DateRangePickerRangeSeparator, DateRangePickerPopover, };
+export type { DateRangePickerRootProps, DateRangePickerRootProps as DateRangePickerProps, DateRangePickerTriggerProps, DateRangePickerTriggerIndicatorProps, DateRangePickerRangeSeparatorProps, DateRangePickerPopoverProps, } from "./date-range-picker";
+export { dateRangePickerVariants } from "@masaraxui/styles";
+export type { DateRangePickerVariants } from "@masaraxui/styles";

package/dist/components/date-range-picker/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { DateRangePickerRoot, DateRangePickerPopover, DateRangePickerRangeSeparator, DateRangePickerTriggerIndicator, DateRangePickerTrigger } from './date-range-picker.js';
+export { dateRangePickerVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const DateRangePicker = Object.assign(DateRangePickerRoot, {
+  Root: DateRangePickerRoot,
+  Trigger: DateRangePickerTrigger,
+  TriggerIndicator: DateRangePickerTriggerIndicator,
+  RangeSeparator: DateRangePickerRangeSeparator,
+  Popover: DateRangePickerPopover
+});
+
+export { DateRangePicker, DateRangePickerPopover, DateRangePickerRangeSeparator, DateRangePickerRoot, DateRangePickerTrigger, DateRangePickerTriggerIndicator };

package/dist/components/description/description.d.ts

@@ -0,0 +1,9 @@
+import type { DescriptionVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { TextProps } from "react-aria-components";
+import { Text } from "react-aria-components";
+interface DescriptionRootProps extends ComponentPropsWithRef<typeof Text>, TextProps, DescriptionVariants {
+}
+declare const DescriptionRoot: ({ children, className, ...rest }: DescriptionRootProps) => import("react/jsx-runtime").JSX.Element;
+export { DescriptionRoot };
+export type { DescriptionRootProps };

package/dist/components/description/description.js

@@ -0,0 +1,22 @@
+"use client";
+import { descriptionVariants } from '@masaraxui/styles';
+import { Text } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+const DescriptionRoot = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx(Text, {
+    className: descriptionVariants({
+      className
+    }),
+    "data-slot": "description",
+    slot: "description",
+    ...rest,
+    children: children
+  });
+};
+
+export { DescriptionRoot };

package/dist/components/description/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { DescriptionRoot } from "./description";
+export declare const Description: (({ children, className, ...rest }: import("./description").DescriptionRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...rest }: import("./description").DescriptionRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Description = {
+    Props: ComponentProps<typeof DescriptionRoot>;
+    RootProps: ComponentProps<typeof DescriptionRoot>;
+};
+export { DescriptionRoot };
+export type { DescriptionRootProps, DescriptionRootProps as DescriptionProps } from "./description";
+export { descriptionVariants } from "@masaraxui/styles";
+export type { DescriptionVariants } from "@masaraxui/styles";

package/dist/components/description/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { DescriptionRoot } from './description.js';
+export { descriptionVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Description = Object.assign(DescriptionRoot, {
+  Root: DescriptionRoot
+});
+
+export { Description, DescriptionRoot };

package/dist/components/disclosure/disclosure.d.ts

@@ -0,0 +1,27 @@
+import type { DisclosureVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ButtonProps } from "react-aria-components";
+import { Heading as DisclosureHeadingPrimitive, DisclosurePanel, Disclosure as DisclosurePrimitive } from "react-aria-components";
+interface DisclosureRootProps extends ComponentPropsWithRef<typeof DisclosurePrimitive>, DisclosureVariants {
+}
+declare const DisclosureRoot: ({ children, className, ...props }: DisclosureRootProps) => import("react/jsx-runtime").JSX.Element;
+interface DisclosureHeadingProps extends ComponentPropsWithRef<typeof DisclosureHeadingPrimitive> {
+    className?: string;
+}
+declare const DisclosureHeading: ({ className, ...props }: DisclosureHeadingProps) => import("react/jsx-runtime").JSX.Element;
+interface DisclosureTriggerProps extends ButtonProps {
+}
+declare const DisclosureTrigger: ({ className, ...props }: DisclosureTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface DisclosureContentProps extends ComponentPropsWithRef<typeof DisclosurePanel> {
+}
+declare const DisclosureContent: ({ children, className, ...props }: DisclosureContentProps) => import("react/jsx-runtime").JSX.Element;
+interface DisclosureBodyContentProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const DisclosureBody: ({ children, className, ...props }: DisclosureBodyContentProps) => import("react/jsx-runtime").JSX.Element;
+interface DisclosureIndicatorProps extends ComponentPropsWithRef<"svg"> {
+    className?: string;
+}
+declare const DisclosureIndicator: ({ children, className, ...props }: DisclosureIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export { DisclosureRoot, DisclosureHeading, DisclosureTrigger, DisclosureContent, DisclosureBody, DisclosureIndicator, };
+export type { DisclosureRootProps, DisclosureContentProps, DisclosureHeadingProps, DisclosureTriggerProps, DisclosureIndicatorProps, DisclosureBodyContentProps, };

package/dist/components/disclosure/disclosure.js

@@ -0,0 +1,157 @@
+"use client";
+import { disclosureVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext, useRef } from 'react';
+import { Disclosure, DisclosureStateContext, DisclosurePanel, Button, Heading } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { IconChevronDown } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const DisclosureContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => disclosureVariants({}), []);
+  return /*#__PURE__*/jsx(DisclosureContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Disclosure, {
+      "data-slot": "disclosure",
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureHeading = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DisclosureContext);
+  return /*#__PURE__*/jsx(Heading, {
+    className: composeSlotClassName(slots?.heading, className),
+    "data-slot": "disclosure-heading",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureTrigger = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DisclosureContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "disclosure-trigger",
+    slot: "trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof props.children === "function" ? props.children(values) : props.children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DisclosureContext);
+  const contentRef = useRef(null);
+  const {
+    isExpanded
+  } = useContext(DisclosureStateContext);
+  return /*#__PURE__*/jsx(DisclosurePanel, {
+    ref: contentRef,
+    className: composeTwRenderProps(className, slots?.content()),
+    "data-expanded": dataAttr(isExpanded),
+    "data-slot": "disclosure-content",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Body
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DisclosureContext);
+  return /*#__PURE__*/jsx("div", {
+    className: slots?.body({}),
+    "data-slot": "disclosure-body",
+    ...props,
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.bodyInner, className),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    isExpanded
+  } = useContext(DisclosureStateContext);
+  const {
+    slots
+  } = useContext(DisclosureContext);
+  if (children && /*#__PURE__*/React__default.isValidElement(children)) {
+    return /*#__PURE__*/React__default.cloneElement(children, {
+      ...props,
+      "data-expanded": dataAttr(isExpanded),
+      className: composeSlotClassName(slots?.indicator, className),
+      "data-slot": "disclosure-indicator"
+    });
+  }
+  return /*#__PURE__*/jsx(IconChevronDown, {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-expanded": dataAttr(isExpanded),
+    "data-slot": "disclosure-indicator",
+    ...props
+  });
+};
+
+export { DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger };

package/dist/components/disclosure/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger } from "./disclosure";
+export declare const Disclosure: (({ children, className, ...props }: import("./disclosure").DisclosureRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...props }: import("./disclosure").DisclosureRootProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ className, ...props }: import("./disclosure").DisclosureHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ className, ...props }: import("./disclosure").DisclosureTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./disclosure").DisclosureContentProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, ...props }: import("./disclosure").DisclosureBodyContentProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./disclosure").DisclosureIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Disclosure = {
+    Props: ComponentProps<typeof DisclosureRoot>;
+    RootProps: ComponentProps<typeof DisclosureRoot>;
+    HeadingProps: ComponentProps<typeof DisclosureHeading>;
+    TriggerProps: ComponentProps<typeof DisclosureTrigger>;
+    ContentProps: ComponentProps<typeof DisclosureContent>;
+    BodyProps: ComponentProps<typeof DisclosureBody>;
+    IndicatorProps: ComponentProps<typeof DisclosureIndicator>;
+};
+export { DisclosureRoot, DisclosureHeading, DisclosureTrigger, DisclosureContent, DisclosureBody, DisclosureIndicator, };
+export type { DisclosureRootProps, DisclosureRootProps as DisclosureProps, DisclosureContentProps, DisclosureHeadingProps, DisclosureTriggerProps, DisclosureIndicatorProps, DisclosureBodyContentProps, } from "./disclosure";
+export { disclosureVariants } from "@masaraxui/styles";
+export type { DisclosureVariants } from "@masaraxui/styles";

package/dist/components/disclosure/index.js

@@ -0,0 +1,17 @@
+"use strict";
+import { DisclosureRoot, DisclosureIndicator, DisclosureBody, DisclosureContent, DisclosureTrigger, DisclosureHeading } from './disclosure.js';
+export { disclosureVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Disclosure = Object.assign(DisclosureRoot, {
+  Root: DisclosureRoot,
+  Heading: DisclosureHeading,
+  Trigger: DisclosureTrigger,
+  Content: DisclosureContent,
+  Body: DisclosureBody,
+  Indicator: DisclosureIndicator
+});
+
+export { Disclosure, DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger };

package/dist/components/disclosure-group/disclosure-group.d.ts

@@ -0,0 +1,8 @@
+import type { DisclosureGroupVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { DisclosureGroup as DisclosureGroupPrimitive } from "react-aria-components";
+interface DisclosureGroupRootProps extends ComponentPropsWithRef<typeof DisclosureGroupPrimitive>, DisclosureGroupVariants {
+}
+declare const DisclosureGroupRoot: ({ children, className, ...props }: DisclosureGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+export { DisclosureGroupRoot };
+export type { DisclosureGroupRootProps };

package/dist/components/disclosure-group/disclosure-group.js

@@ -0,0 +1,35 @@
+"use client";
+import { disclosureGroupVariants } from '@masaraxui/styles';
+import React__default, { createContext } from 'react';
+import { DisclosureGroup } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const DisclosureGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Group Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureGroupRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => disclosureGroupVariants({}), []);
+  return /*#__PURE__*/jsx(DisclosureGroupContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(DisclosureGroup, {
+      "data-slot": "disclosure-group",
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+export { DisclosureGroupRoot };

package/dist/components/disclosure-group/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { DisclosureGroupRoot } from "./disclosure-group";
+export declare const DisclosureGroup: (({ children, className, ...props }: import("./disclosure-group").DisclosureGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...props }: import("./disclosure-group").DisclosureGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type DisclosureGroup = {
+    Props: ComponentProps<typeof DisclosureGroupRoot>;
+    RootProps: ComponentProps<typeof DisclosureGroupRoot>;
+};
+export { DisclosureGroupRoot };
+export type { DisclosureGroupRootProps, DisclosureGroupRootProps as DisclosureGroupProps, } from "./disclosure-group";
+export { disclosureGroupVariants } from "@masaraxui/styles";
+export type { DisclosureGroupVariants } from "@masaraxui/styles";
+export { useDisclosureGroupNavigation } from "./use-disclosure-group-navigation";
+export type { UseDisclosureGroupNavigationProps, UseDisclosureGroupNavigationReturn, } from "./use-disclosure-group-navigation";

package/dist/components/disclosure-group/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { DisclosureGroupRoot } from './disclosure-group.js';
+export { disclosureGroupVariants } from '@masaraxui/styles';
+export { useDisclosureGroupNavigation } from './use-disclosure-group-navigation.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const DisclosureGroup = Object.assign(DisclosureGroupRoot, {
+  Root: DisclosureGroupRoot
+});
+
+export { DisclosureGroup, DisclosureGroupRoot };

package/dist/components/disclosure-group/use-disclosure-group-navigation.d.ts

@@ -0,0 +1,14 @@
+export interface UseDisclosureGroupNavigationProps {
+    expandedKeys: Set<string | number>;
+    itemIds: string[];
+    onExpandedChange: (keys: Set<string | number>) => void;
+    allowsMultipleExpanded?: boolean;
+}
+export interface UseDisclosureGroupNavigationReturn {
+    currentIndex: number;
+    isPrevDisabled: boolean;
+    isNextDisabled: boolean;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+export declare function useDisclosureGroupNavigation({ allowsMultipleExpanded, expandedKeys, itemIds, onExpandedChange, }: UseDisclosureGroupNavigationProps): UseDisclosureGroupNavigationReturn;

package/dist/components/disclosure-group/use-disclosure-group-navigation.js

@@ -0,0 +1,51 @@
+"use strict";
+import { useMemo, useCallback } from 'react';
+
+function useDisclosureGroupNavigation({
+  allowsMultipleExpanded = false,
+  expandedKeys,
+  itemIds = [],
+  onExpandedChange
+}) {
+  const currentIndex = useMemo(() => {
+    const expandedItems = itemIds.filter(id => expandedKeys.has(id));
+    const currentItem = expandedItems.length > 0 ? expandedItems[0] : itemIds[0];
+    if (!currentItem) return -1;
+    return itemIds.indexOf(currentItem);
+  }, [expandedKeys, itemIds]);
+  const handlePrevious = useCallback(() => {
+    if (currentIndex <= 0) return;
+    const prevItem = itemIds[currentIndex - 1];
+    if (!prevItem) return;
+    if (allowsMultipleExpanded) {
+      const newKeys = new Set(expandedKeys);
+      newKeys.add(prevItem);
+      onExpandedChange(newKeys);
+    } else {
+      onExpandedChange(new Set([prevItem]));
+    }
+  }, [currentIndex, itemIds, expandedKeys, onExpandedChange, allowsMultipleExpanded]);
+  const handleNext = useCallback(() => {
+    if (currentIndex >= itemIds.length - 1) return;
+    const nextItem = itemIds[currentIndex + 1];
+    if (!nextItem) return;
+    if (allowsMultipleExpanded) {
+      const newKeys = new Set(expandedKeys);
+      newKeys.add(nextItem);
+      onExpandedChange(newKeys);
+    } else {
+      onExpandedChange(new Set([nextItem]));
+    }
+  }, [currentIndex, itemIds.length, itemIds, expandedKeys, onExpandedChange, allowsMultipleExpanded]);
+  const isPrevDisabled = currentIndex <= 0;
+  const isNextDisabled = currentIndex >= itemIds.length - 1;
+  return {
+    currentIndex,
+    isPrevDisabled,
+    isNextDisabled,
+    onPrevious: handlePrevious,
+    onNext: handleNext
+  };
+}
+
+export { useDisclosureGroupNavigation };