@masaraxui/react 1.0.0

package/dist/components/combo-box/index.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+import { ComboBoxInputGroup, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger } from "./combo-box";
+export declare const ComboBox: (<T extends object = object>({ children, className, fullWidth, menuTrigger, variant, ...props }: import("./combo-box").ComboBoxRootProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Root: <T extends object = object>({ children, className, fullWidth, menuTrigger, variant, ...props }: import("./combo-box").ComboBoxRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+    InputGroup: ({ children, className, ...props }: import("./combo-box").ComboBoxInputGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...rest }: import("./combo-box").ComboBoxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Popover: ({ children, className, placement, ...props }: import("./combo-box").ComboBoxPopoverProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ComboBox<T extends object = object> = {
+    Props: ComponentProps<typeof ComboBoxRoot<T>>;
+    RootProps: ComponentProps<typeof ComboBoxRoot<T>>;
+    InputGroupProps: ComponentProps<typeof ComboBoxInputGroup>;
+    TriggerProps: ComponentProps<typeof ComboBoxTrigger>;
+    PopoverProps: ComponentProps<typeof ComboBoxPopover>;
+};
+export { ComboBoxInputGroup, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger };
+export type { ComboBoxRootProps, ComboBoxRootProps as ComboBoxProps, ComboBoxInputGroupProps, ComboBoxTriggerProps, ComboBoxPopoverProps, } from "./combo-box";
+export { ComboBoxContext } from "./combo-box";
+export { comboBoxVariants } from "@masaraxui/styles";
+export type { ComboBoxVariants } from "@masaraxui/styles";

package/dist/components/combo-box/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { ComboBoxRoot, ComboBoxPopover, ComboBoxTrigger, ComboBoxInputGroup } from './combo-box.js';
+export { ComboBoxContext } from './combo-box.js';
+export { comboBoxVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ComboBox = Object.assign(ComboBoxRoot, {
+  Root: ComboBoxRoot,
+  InputGroup: ComboBoxInputGroup,
+  Trigger: ComboBoxTrigger,
+  Popover: ComboBoxPopover
+});
+
+export { ComboBox, ComboBoxInputGroup, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger };

package/dist/components/date-field/date-field.d.ts

@@ -0,0 +1,9 @@
+import type { DateFieldVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { DateValue } from "react-aria-components";
+import { DateField as DateFieldPrimitive } from "react-aria-components";
+interface DateFieldRootProps<T extends DateValue> extends ComponentPropsWithRef<typeof DateFieldPrimitive<T>>, DateFieldVariants {
+}
+declare function DateFieldRoot<T extends DateValue>({ children, className, fullWidth, ...props }: DateFieldRootProps<T>): import("react/jsx-runtime").JSX.Element;
+export { DateFieldRoot };
+export type { DateFieldRootProps };

package/dist/components/date-field/date-field.js

@@ -0,0 +1,29 @@
+"use client";
+import { dateFieldVariants } from '@masaraxui/styles';
+import React__default from 'react';
+import { DateField } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function DateFieldRoot({
+  children,
+  className,
+  fullWidth,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => dateFieldVariants({
+    fullWidth
+  }), [fullWidth]);
+  return /*#__PURE__*/jsx(DateField, {
+    "data-required": dataAttr(props.isRequired),
+    "data-slot": "date-field",
+    ...props,
+    className: composeTwRenderProps(className, styles),
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+}
+
+export { DateFieldRoot };

package/dist/components/date-field/index.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps } from "react";
+import { DateInputGroupInput, DateInputGroupInputContainer, DateInputGroupPrefix, DateInputGroupRoot, DateInputGroupSegment, DateInputGroupSuffix } from "../date-input-group";
+import { DateFieldRoot } from "./date-field";
+export declare const DateField: typeof DateFieldRoot & {
+    Root: typeof DateFieldRoot;
+    Group: ({ children, className, fullWidth, variant, ...props }: import("../date-input-group").DateInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("../date-input-group").DateInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+    InputContainer: ({ children, className, ...props }: import("../date-input-group").DateInputGroupInputContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Segment: ({ className, segment, ...props }: import("../date-input-group").DateInputGroupSegmentProps) => import("react/jsx-runtime").JSX.Element;
+    Prefix: ({ children, className, ...props }: import("../date-input-group").DateInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Suffix: ({ children, className, ...props }: import("../date-input-group").DateInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type DateField = {
+    Props: ComponentProps<typeof DateFieldRoot>;
+    RootProps: ComponentProps<typeof DateFieldRoot>;
+    GroupProps: ComponentProps<typeof DateInputGroupRoot>;
+    InputProps: ComponentProps<typeof DateInputGroupInput>;
+    InputContainerProps: ComponentProps<typeof DateInputGroupInputContainer>;
+    SegmentProps: ComponentProps<typeof DateInputGroupSegment>;
+    PrefixProps: ComponentProps<typeof DateInputGroupPrefix>;
+    SuffixProps: ComponentProps<typeof DateInputGroupSuffix>;
+};
+export { DateFieldRoot };
+export type { DateFieldRootProps, DateFieldRootProps as DateFieldProps } from "./date-field";
+export { dateFieldVariants } from "@masaraxui/styles";
+export type { DateFieldVariants } from "@masaraxui/styles";

package/dist/components/date-field/index.js

@@ -0,0 +1,20 @@
+"use strict";
+import '../date-input-group/index.js';
+import { DateFieldRoot } from './date-field.js';
+export { dateFieldVariants } from '@masaraxui/styles';
+import { DateInputGroupSuffix, DateInputGroupPrefix, DateInputGroupSegment, DateInputGroupInputContainer, DateInputGroupInput, DateInputGroupRoot } from '../date-input-group/date-input-group.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const DateField = Object.assign(DateFieldRoot, {
+  Root: DateFieldRoot,
+  Group: DateInputGroupRoot,
+  Input: DateInputGroupInput,
+  InputContainer: DateInputGroupInputContainer,
+  Segment: DateInputGroupSegment,
+  Prefix: DateInputGroupPrefix,
+  Suffix: DateInputGroupSuffix
+});
+
+export { DateField, DateFieldRoot };

package/dist/components/date-input-group/date-input-group.d.ts

@@ -0,0 +1,25 @@
+import type { DateInputGroupVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { DateInputProps as DateInputPrimitiveProps, DateSegmentProps as DateSegmentPrimitiveProps, DateInputProps as TimeInputPrimitiveProps, DateSegmentProps as TimeSegmentPrimitiveProps } from "react-aria-components";
+import { Group as GroupPrimitive } from "react-aria-components";
+interface DateInputGroupRootProps extends ComponentPropsWithRef<typeof GroupPrimitive>, DateInputGroupVariants {
+}
+declare const DateInputGroupRoot: ({ children, className, fullWidth, variant, ...props }: DateInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+interface DateInputGroupPrefixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const DateInputGroupPrefix: ({ children, className, ...props }: DateInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+interface DateInputGroupInputProps extends DateInputPrimitiveProps, Partial<Omit<TimeInputPrimitiveProps, keyof DateInputPrimitiveProps>> {
+}
+declare const DateInputGroupInput: ({ className, ...props }: DateInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+interface DateInputGroupSegmentProps extends DateSegmentPrimitiveProps, Partial<Omit<TimeSegmentPrimitiveProps, keyof DateSegmentPrimitiveProps>> {
+    className?: string;
+}
+declare const DateInputGroupSegment: ({ className, segment, ...props }: DateInputGroupSegmentProps) => import("react/jsx-runtime").JSX.Element;
+interface DateInputGroupInputContainerProps extends ComponentPropsWithRef<"div"> {
+}
+declare const DateInputGroupInputContainer: ({ children, className, ...props }: DateInputGroupInputContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface DateInputGroupSuffixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const DateInputGroupSuffix: ({ children, className, ...props }: DateInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+export { DateInputGroupRoot, DateInputGroupInput, DateInputGroupInputContainer, DateInputGroupSegment, DateInputGroupPrefix, DateInputGroupSuffix, };
+export type { DateInputGroupRootProps, DateInputGroupInputProps, DateInputGroupInputContainerProps, DateInputGroupSegmentProps, DateInputGroupPrefixProps, DateInputGroupSuffixProps, };

package/dist/components/date-input-group/date-input-group.js

@@ -0,0 +1,146 @@
+"use client";
+import { dateInputGroupVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { Group, DateSegment, DateInput } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const DateInputGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * DateInputGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateInputGroupRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => dateInputGroupVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(DateInputGroupContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Group, {
+      className: composeTwRenderProps(className, slots?.base()),
+      "data-slot": "date-input-group",
+      ...props,
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * DateInputGroup Prefix
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateInputGroupPrefix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateInputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.prefix, className),
+    "data-slot": "date-input-group-prefix",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * DateInputGroup Input
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateInputGroupInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateInputGroupContext);
+
+  // TimeInput and DateInput have compatible interfaces
+  // React Aria Components will handle the correct primitive based on parent context (TimeField vs DateField)
+  // We use DateInputPrimitive as the default, but it will work with TimeField context
+  return /*#__PURE__*/jsx(DateInput, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "date-input-group-input",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * DateInputGroup Segment
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateInputGroupSegment = ({
+  className,
+  segment,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateInputGroupContext);
+
+  // TimeSegment and DateSegment have compatible interfaces
+  // React Aria Components will handle the correct primitive based on parent context
+  // We use DateSegmentPrimitive as the default, but it will work with TimeField context
+  return /*#__PURE__*/jsx(DateSegment, {
+    className: composeSlotClassName(slots?.segment, className),
+    "data-slot": "date-input-group-segment",
+    segment: segment,
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * DateInputGroup InputContainer
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateInputGroupInputContainer = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateInputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.inputContainer, className),
+    "data-slot": "date-input-group-input-container",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * DateInputGroup Suffix
+ * -----------------------------------------------------------------------------------------------*/
+
+const DateInputGroupSuffix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DateInputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.suffix, className),
+    "data-slot": "date-input-group-suffix",
+    ...props,
+    children: children
+  });
+};
+
+export { DateInputGroupInput, DateInputGroupInputContainer, DateInputGroupPrefix, DateInputGroupRoot, DateInputGroupSegment, DateInputGroupSuffix };

package/dist/components/date-input-group/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { DateInputGroupInput, DateInputGroupInputContainer, DateInputGroupPrefix, DateInputGroupRoot, DateInputGroupSegment, DateInputGroupSuffix } from "./date-input-group";
+export declare const DateInputGroup: (({ children, className, fullWidth, variant, ...props }: import("./date-input-group").DateInputGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, variant, ...props }: import("./date-input-group").DateInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("./date-input-group").DateInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+    InputContainer: ({ children, className, ...props }: import("./date-input-group").DateInputGroupInputContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Segment: ({ className, segment, ...props }: import("./date-input-group").DateInputGroupSegmentProps) => import("react/jsx-runtime").JSX.Element;
+    Prefix: ({ children, className, ...props }: import("./date-input-group").DateInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Suffix: ({ children, className, ...props }: import("./date-input-group").DateInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type DateInputGroup = {
+    Props: ComponentProps<typeof DateInputGroupRoot>;
+    RootProps: ComponentProps<typeof DateInputGroupRoot>;
+    InputProps: ComponentProps<typeof DateInputGroupInput>;
+    InputContainerProps: ComponentProps<typeof DateInputGroupInputContainer>;
+    SegmentProps: ComponentProps<typeof DateInputGroupSegment>;
+    PrefixProps: ComponentProps<typeof DateInputGroupPrefix>;
+    SuffixProps: ComponentProps<typeof DateInputGroupSuffix>;
+};
+export { DateInputGroupInput, DateInputGroupInputContainer, DateInputGroupPrefix, DateInputGroupRoot, DateInputGroupSegment, DateInputGroupSuffix, };
+export type { DateInputGroupRootProps, DateInputGroupRootProps as DateInputGroupProps, DateInputGroupInputProps, DateInputGroupInputContainerProps, DateInputGroupSegmentProps, DateInputGroupPrefixProps, DateInputGroupSuffixProps, } from "./date-input-group";
+export { dateInputGroupVariants } from "@masaraxui/styles";
+export type { DateInputGroupVariants } from "@masaraxui/styles";

package/dist/components/date-input-group/index.js

@@ -0,0 +1,17 @@
+"use strict";
+import { DateInputGroupRoot, DateInputGroupSuffix, DateInputGroupPrefix, DateInputGroupSegment, DateInputGroupInputContainer, DateInputGroupInput } from './date-input-group.js';
+export { dateInputGroupVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const DateInputGroup = Object.assign(DateInputGroupRoot, {
+  Root: DateInputGroupRoot,
+  Input: DateInputGroupInput,
+  InputContainer: DateInputGroupInputContainer,
+  Segment: DateInputGroupSegment,
+  Prefix: DateInputGroupPrefix,
+  Suffix: DateInputGroupSuffix
+});
+
+export { DateInputGroup, DateInputGroupInput, DateInputGroupInputContainer, DateInputGroupPrefix, DateInputGroupRoot, DateInputGroupSegment, DateInputGroupSuffix };

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

@@ -0,0 +1,30 @@
+import type { DatePickerVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { DateValue } from "react-aria-components";
+import React from "react";
+import { Button as ButtonPrimitive, DatePicker as DatePickerPrimitive, Popover as PopoverPrimitive } from "react-aria-components";
+interface DatePickerRootProps<T extends DateValue> extends ComponentPropsWithRef<typeof DatePickerPrimitive<T>>, DatePickerVariants {
+}
+declare const DatePickerRoot: {
+    <T extends DateValue>({ children, className, onOpenChange, ...props }: DatePickerRootProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DatePickerTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const DatePickerTrigger: React.ForwardRefExoticComponent<Omit<DatePickerTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface DatePickerTriggerIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode;
+}
+declare const DatePickerTriggerIndicator: {
+    ({ children, className, ...props }: DatePickerTriggerIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DatePickerPopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const DatePickerPopover: {
+    ({ children, className, placement, ...props }: DatePickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DatePickerRoot, DatePickerTrigger, DatePickerTriggerIndicator, DatePickerPopover };
+export type { DatePickerRootProps, DatePickerTriggerProps, DatePickerTriggerIndicatorProps, DatePickerPopoverProps, };

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

@@ -0,0 +1,151 @@
+"use client";
+import { datePickerVariants } from '@masaraxui/styles';
+import { mergeRefs } from '@react-aria/utils';
+import React__default, { useRef, useEffect, createContext, useContext } from 'react';
+import { DatePicker, 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 DatePickerContext = /*#__PURE__*/createContext({
+  triggerRef: {
+    current: null
+  }
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * DatePicker Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const DatePickerRoot = ({
+  children,
+  className,
+  onOpenChange,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => datePickerVariants(), []);
+  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(DatePickerContext, {
+    value: {
+      slots,
+      triggerRef
+    },
+    children: /*#__PURE__*/jsx(DatePicker, {
+      "data-required": dataAttr(props.isRequired),
+      "data-slot": "date-picker",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      onOpenChange: handleOpenChange,
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+DatePickerRoot.displayName = "MasaraxUI.DatePicker";
+
+/* -------------------------------------------------------------------------------------------------
+ * DatePicker Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const DatePickerTrigger = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots,
+    triggerRef
+  } = useContext(DatePickerContext);
+  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-picker-trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+});
+DatePickerTrigger.displayName = "MasaraxUI.DatePicker.Trigger";
+
+/* -------------------------------------------------------------------------------------------------
+ * DatePicker Trigger Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const DatePickerTriggerIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DatePickerContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.triggerIndicator, className),
+    "data-slot": "date-picker-trigger-indicator",
+    ...props,
+    children: children || /*#__PURE__*/jsx(IconCalendar, {})
+  });
+};
+DatePickerTriggerIndicator.displayName = "MasaraxUI.DatePicker.TriggerIndicator";
+
+/* -------------------------------------------------------------------------------------------------
+ * DatePicker Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const DatePickerPopover = ({
+  children,
+  className,
+  placement = "bottom",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DatePickerContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      placement: placement,
+      children: children
+    })
+  });
+};
+DatePickerPopover.displayName = "MasaraxUI.DatePicker.Popover";
+
+export { DatePickerPopover, DatePickerRoot, DatePickerTrigger, DatePickerTriggerIndicator };

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

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+import { DatePickerPopover, DatePickerRoot, DatePickerTrigger, DatePickerTriggerIndicator } from "./date-picker";
+export declare const DatePicker: {
+    <T extends import("react-aria-components").DateValue>({ children, className, onOpenChange, ...props }: import("./date-picker").DatePickerRootProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        <T extends import("react-aria-components").DateValue>({ children, className, onOpenChange, ...props }: import("./date-picker").DatePickerRootProps<T>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("./date-picker").DatePickerTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    TriggerIndicator: {
+        ({ children, className, ...props }: import("./date-picker").DatePickerTriggerIndicatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Popover: {
+        ({ children, className, placement, ...props }: import("./date-picker").DatePickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type DatePicker = {
+    Props: ComponentProps<typeof DatePickerRoot>;
+    RootProps: ComponentProps<typeof DatePickerRoot>;
+    TriggerProps: ComponentProps<typeof DatePickerTrigger>;
+    TriggerIndicatorProps: ComponentProps<typeof DatePickerTriggerIndicator>;
+    PopoverProps: ComponentProps<typeof DatePickerPopover>;
+};
+export { DatePickerRoot, DatePickerTrigger, DatePickerTriggerIndicator, DatePickerPopover };
+export type { DatePickerRootProps, DatePickerRootProps as DatePickerProps, DatePickerTriggerProps, DatePickerTriggerIndicatorProps, DatePickerPopoverProps, } from "./date-picker";
+export { datePickerVariants } from "@masaraxui/styles";
+export type { DatePickerVariants } from "@masaraxui/styles";

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

@@ -0,0 +1,15 @@
+"use strict";
+import { DatePickerRoot, DatePickerPopover, DatePickerTriggerIndicator, DatePickerTrigger } from './date-picker.js';
+export { datePickerVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const DatePicker = Object.assign(DatePickerRoot, {
+  Root: DatePickerRoot,
+  Trigger: DatePickerTrigger,
+  TriggerIndicator: DatePickerTriggerIndicator,
+  Popover: DatePickerPopover
+});
+
+export { DatePicker, DatePickerPopover, DatePickerRoot, DatePickerTrigger, DatePickerTriggerIndicator };

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

@@ -0,0 +1,36 @@
+import type { DateRangePickerVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { DateValue } from "react-aria-components";
+import React from "react";
+import { Button as ButtonPrimitive, DateRangePicker as DateRangePickerPrimitive, Popover as PopoverPrimitive } from "react-aria-components";
+interface DateRangePickerRootProps<T extends DateValue> extends ComponentPropsWithRef<typeof DateRangePickerPrimitive<T>>, DateRangePickerVariants {
+}
+declare const DateRangePickerRoot: {
+    <T extends DateValue>({ children, className, onOpenChange, ...props }: DateRangePickerRootProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DateRangePickerTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const DateRangePickerTrigger: React.ForwardRefExoticComponent<Omit<DateRangePickerTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface DateRangePickerTriggerIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode;
+}
+declare const DateRangePickerTriggerIndicator: {
+    ({ children, className, ...props }: DateRangePickerTriggerIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DateRangePickerRangeSeparatorProps extends ComponentPropsWithRef<"span"> {
+}
+declare const DateRangePickerRangeSeparator: {
+    ({ children, className, ...props }: DateRangePickerRangeSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DateRangePickerPopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const DateRangePickerPopover: {
+    ({ children, className, placement, ...props }: DateRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DateRangePickerRoot, DateRangePickerTrigger, DateRangePickerTriggerIndicator, DateRangePickerRangeSeparator, DateRangePickerPopover, };
+export type { DateRangePickerRootProps, DateRangePickerTriggerProps, DateRangePickerTriggerIndicatorProps, DateRangePickerRangeSeparatorProps, DateRangePickerPopoverProps, };