@masaraxui/react 1.0.0

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,309 @@
+"use client";
+import { alertDialogVariants } from '@masaraxui/styles';
+import { useMemo, createContext, useContext } from 'react';
+import { DialogTrigger, Heading, Dialog, Modal, ModalOverlay, Pressable } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import { DangerIcon, WarningIcon, SuccessIcon, InfoIcon } from '../icons.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const AlertDialogContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogRoot = ({
+  children,
+  ...props
+}) => {
+  const alertDialogContext = useMemo(() => ({
+    slots: alertDialogVariants(),
+    placement: undefined
+  }), []);
+  return /*#__PURE__*/jsx(AlertDialogContext, {
+    value: alertDialogContext,
+    children: /*#__PURE__*/jsx(DialogTrigger, {
+      "data-slot": "alert-dialog-root",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(Pressable, {
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "alert-dialog-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Backdrop
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogBackdrop = ({
+  children,
+  className,
+  isDismissable = false,
+  isKeyboardDismissDisabled = true,
+  onClick,
+  variant,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(AlertDialogContext);
+  const updatedSlots = useMemo(() => alertDialogVariants({
+    variant
+  }), [variant]);
+  const updatedModalContext = useMemo(() => ({
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, updatedSlots]);
+  return /*#__PURE__*/jsx(ModalOverlay, {
+    className: composeTwRenderProps(className, updatedSlots?.backdrop()),
+    "data-slot": "alert-dialog-backdrop",
+    isDismissable: isDismissable,
+    isKeyboardDismissDisabled: isKeyboardDismissDisabled,
+    onClick: e => {
+      e.stopPropagation();
+      onClick?.(e);
+    },
+    ...props,
+    children: renderProps => /*#__PURE__*/jsxs(AlertDialogContext, {
+      value: updatedModalContext,
+      children: [typeof children === "function" ? children(renderProps) : children, " "]
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogContainer = ({
+  children,
+  className,
+  placement = "auto",
+  size,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(AlertDialogContext);
+  const updatedSlots = useMemo(() => alertDialogVariants({
+    size
+  }), [size]);
+  const updatedContext = useMemo(() => ({
+    placement,
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [placement, contextSlots, updatedSlots]);
+  return /*#__PURE__*/jsx(Modal, {
+    className: composeTwRenderProps(className, updatedSlots?.container()),
+    "data-placement": placement,
+    "data-slot": "alert-dialog-container",
+    ...props,
+    children: renderProps => /*#__PURE__*/jsx(AlertDialogContext, {
+      value: updatedContext,
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogDialog = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    placement,
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(Dialog, {
+    className: composeSlotClassName(slots?.dialog, className),
+    "data-placement": placement,
+    "data-slot": "alert-dialog-dialog",
+    role: "alertdialog",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "alert-dialog-header",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogHeading = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(Heading, {
+    className: composeSlotClassName(slots?.heading, className),
+    "data-slot": "alert-dialog-heading",
+    slot: "title",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Body
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.body, className),
+    "data-slot": "alert-dialog-body",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "alert-dialog-footer",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogIcon = ({
+  children,
+  className,
+  status = "danger",
+  ...props
+}) => {
+  const slots = useMemo(() => alertDialogVariants({
+    status
+  }), [status]);
+  const getDefaultIcon = () => {
+    switch (status) {
+      case "default":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "accent":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "success":
+        return /*#__PURE__*/jsx(SuccessIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "warning":
+        return /*#__PURE__*/jsx(WarningIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "danger":
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      default:
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: slots?.icon({
+      className
+    }),
+    "data-slot": "alert-dialog-icon",
+    ...props,
+    children: children ?? getDefaultIcon()
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Close Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogCloseTrigger = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.closeTrigger()),
+    "data-slot": "alert-dialog-close-trigger",
+    slot: "close",
+    ...rest
+  });
+};
+
+export { AlertDialogBackdrop, AlertDialogBody, AlertDialogCloseTrigger, AlertDialogContainer, AlertDialogDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogHeading, AlertDialogIcon, AlertDialogRoot, AlertDialogTrigger };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps } from "react";
+import { AlertDialogBackdrop, AlertDialogBody, AlertDialogCloseTrigger, AlertDialogContainer, AlertDialogDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogHeading, AlertDialogIcon, AlertDialogRoot, AlertDialogTrigger } from "./alert-dialog";
+export declare const AlertDialog: (({ children, ...props }: import("./alert-dialog").AlertDialogRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, ...props }: import("./alert-dialog").AlertDialogRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./alert-dialog").AlertDialogTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Backdrop: ({ children, className, isDismissable, isKeyboardDismissDisabled, onClick, variant, ...props }: import("./alert-dialog").AlertDialogBackdropProps) => import("react/jsx-runtime").JSX.Element;
+    Container: ({ children, className, placement, size, ...props }: import("./alert-dialog").AlertDialogContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Dialog: ({ children, className, ...props }: import("./alert-dialog").AlertDialogDialogProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className, ...props }: import("./alert-dialog").AlertDialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: import("./alert-dialog").AlertDialogHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, ...props }: import("./alert-dialog").AlertDialogBodyProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, ...props }: import("./alert-dialog").AlertDialogFooterProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className, status, ...props }: import("./alert-dialog").AlertDialogIconProps) => import("react/jsx-runtime").JSX.Element;
+    CloseTrigger: ({ className, ...rest }: import("./alert-dialog").AlertDialogCloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type AlertDialog = {
+    Props: ComponentProps<typeof AlertDialogRoot>;
+    RootProps: ComponentProps<typeof AlertDialogRoot>;
+    TriggerProps: ComponentProps<typeof AlertDialogTrigger>;
+    BackdropProps: ComponentProps<typeof AlertDialogBackdrop>;
+    ContainerProps: ComponentProps<typeof AlertDialogContainer>;
+    DialogProps: ComponentProps<typeof AlertDialogDialog>;
+    HeaderProps: ComponentProps<typeof AlertDialogHeader>;
+    HeadingProps: ComponentProps<typeof AlertDialogHeading>;
+    BodyProps: ComponentProps<typeof AlertDialogBody>;
+    FooterProps: ComponentProps<typeof AlertDialogFooter>;
+    IconProps: ComponentProps<typeof AlertDialogIcon>;
+    CloseTriggerProps: ComponentProps<typeof AlertDialogCloseTrigger>;
+};
+export { AlertDialogRoot, AlertDialogTrigger, AlertDialogBackdrop, AlertDialogContainer, AlertDialogDialog, AlertDialogHeader, AlertDialogHeading, AlertDialogBody, AlertDialogFooter, AlertDialogIcon, AlertDialogCloseTrigger, };
+export type { AlertDialogRootProps, AlertDialogRootProps as AlertDialogProps, AlertDialogTriggerProps, AlertDialogBackdropProps, AlertDialogContainerProps, AlertDialogDialogProps, AlertDialogHeaderProps, AlertDialogHeadingProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogIconProps, AlertDialogCloseTriggerProps, } from "./alert-dialog";
+export { alertDialogVariants } from "@masaraxui/styles";
+export type { AlertDialogVariants } from "@masaraxui/styles";

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,22 @@
+"use strict";
+import { AlertDialogRoot, AlertDialogCloseTrigger, AlertDialogIcon, AlertDialogFooter, AlertDialogBody, AlertDialogHeading, AlertDialogHeader, AlertDialogDialog, AlertDialogContainer, AlertDialogBackdrop, AlertDialogTrigger } from './alert-dialog.js';
+export { alertDialogVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const AlertDialog = Object.assign(AlertDialogRoot, {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Backdrop: AlertDialogBackdrop,
+  Container: AlertDialogContainer,
+  Dialog: AlertDialogDialog,
+  Header: AlertDialogHeader,
+  Heading: AlertDialogHeading,
+  Body: AlertDialogBody,
+  Footer: AlertDialogFooter,
+  Icon: AlertDialogIcon,
+  CloseTrigger: AlertDialogCloseTrigger
+});
+
+export { AlertDialog, AlertDialogBackdrop, AlertDialogBody, AlertDialogCloseTrigger, AlertDialogContainer, AlertDialogDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogHeading, AlertDialogIcon, AlertDialogRoot, AlertDialogTrigger };

package/dist/components/autocomplete/autocomplete.d.ts

@@ -0,0 +1,31 @@
+import type { AutocompleteVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Autocomplete as AutocompletePrimitive, Group as GroupPrimitive, Popover as PopoverPrimitive, Select as SelectPrimitive, SelectValue as SelectValuePrimitive } from "react-aria-components";
+interface AutocompleteRootProps<T extends object, M extends "single" | "multiple" = "single"> extends ComponentPropsWithRef<typeof SelectPrimitive<T, M>>, AutocompleteVariants {
+    items?: Iterable<T, M>;
+    onClear?: () => void;
+}
+declare const AutocompleteRoot: <T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, onClear, variant, ...props }: AutocompleteRootProps<T, M>) => import("react/jsx-runtime").JSX.Element;
+interface AutocompleteTriggerProps extends ComponentPropsWithRef<typeof GroupPrimitive> {
+}
+declare const AutocompleteTrigger: React.ForwardRefExoticComponent<Omit<AutocompleteTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface AutocompleteValueProps extends ComponentPropsWithRef<typeof SelectValuePrimitive> {
+}
+declare const AutocompleteValue: ({ children, className, ...props }: AutocompleteValueProps) => import("react/jsx-runtime").JSX.Element;
+interface AutocompleteIndicatorProps extends ComponentPropsWithRef<"svg"> {
+    className?: string;
+}
+declare const AutocompleteIndicator: ({ children, className, ...props }: AutocompleteIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface AutocompletePopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const AutocompletePopover: ({ children, className, placement, ...props }: AutocompletePopoverProps) => import("react/jsx-runtime").JSX.Element;
+interface AutocompleteFilterProps extends ComponentPropsWithRef<typeof AutocompletePrimitive> {
+}
+declare const AutocompleteFilter: ({ children, ...props }: AutocompleteFilterProps) => import("react/jsx-runtime").JSX.Element;
+interface AutocompleteClearButtonProps extends ComponentPropsWithRef<"button"> {
+}
+declare const AutocompleteClearButton: ({ className, onClick, ref, ...props }: AutocompleteClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { AutocompleteRoot, AutocompleteTrigger, AutocompleteValue, AutocompleteIndicator, AutocompletePopover, AutocompleteFilter, AutocompleteClearButton, };
+export type { AutocompleteRootProps, AutocompleteTriggerProps, AutocompleteValueProps, AutocompleteIndicatorProps, AutocompletePopoverProps, AutocompleteFilterProps, AutocompleteClearButtonProps, };

package/dist/components/autocomplete/autocomplete.js

@@ -0,0 +1,241 @@
+"use client";
+import { autocompleteVariants } from '@masaraxui/styles';
+import { mergeRefs } from '@react-aria/utils';
+import React__default, { useRef, createContext, useContext } from 'react';
+import { Select, SelectStateContext, Autocomplete, Popover, Button, SelectValue, Group } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CloseIcon, IconChevronDown } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const AutocompleteContext = /*#__PURE__*/createContext({
+  triggerRef: {
+    current: null
+  },
+  clearButtonRef: {
+    current: null
+  }
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * Autocomplete Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AutocompleteRoot = ({
+  children,
+  className,
+  fullWidth,
+  onClear,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => autocompleteVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  const triggerRef = useRef(null);
+  const clearButtonRef = useRef(null);
+  return /*#__PURE__*/jsx(AutocompleteContext, {
+    value: {
+      slots,
+      triggerRef,
+      clearButtonRef,
+      onClear
+    },
+    children: /*#__PURE__*/jsx(Select, {
+      "data-slot": "autocomplete",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Autocomplete Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const AutocompleteTrigger = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  className,
+  onClick,
+  ...props
+}, ref) => {
+  const {
+    clearButtonRef,
+    slots,
+    triggerRef
+  } = useContext(AutocompleteContext);
+  const state = useContext(SelectStateContext);
+
+  // Callback ref to update context ref
+  const contextRefCallback = React__default.useCallback(node => {
+    triggerRef.current = node;
+  }, [triggerRef]);
+
+  // Merge context ref callback with user-provided ref
+  const mergedRef = mergeRefs(contextRefCallback, ref);
+  const handleClick = e => {
+    // Don't toggle if clicking the clear button
+    if (clearButtonRef.current?.contains(e.target)) {
+      return;
+    }
+    onClick?.(e);
+    state?.toggle();
+  };
+  return /*#__PURE__*/jsx(Group, {
+    ref: mergedRef,
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "autocomplete-trigger",
+    onClick: handleClick,
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+});
+AutocompleteTrigger.displayName = "AutocompleteTrigger";
+
+/* -------------------------------------------------------------------------------------------------
+ * Autocomplete Value
+ * -----------------------------------------------------------------------------------------------*/
+
+const AutocompleteValue = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AutocompleteContext);
+  return /*#__PURE__*/jsx(SelectValue, {
+    className: composeTwRenderProps(className, slots?.value()),
+    "data-slot": "autocomplete-value",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Autocomplete Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const AutocompleteIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AutocompleteContext);
+  const state = useContext(SelectStateContext);
+  if (children && /*#__PURE__*/React__default.isValidElement(children)) {
+    return /*#__PURE__*/React__default.cloneElement(children, {
+      ...props,
+      className: composeSlotClassName(slots?.indicator, className),
+      "data-slot": "autocomplete-indicator",
+      "data-open": dataAttr(state?.isOpen)
+    });
+  }
+  return /*#__PURE__*/jsx(Button, {
+    children: /*#__PURE__*/jsx(IconChevronDown, {
+      className: composeSlotClassName(slots?.indicator, className),
+      "data-open": dataAttr(state?.isOpen),
+      "data-slot": "autocomplete-default-indicator",
+      ...props
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Autocomplete Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const AutocompletePopover = ({
+  children,
+  className,
+  placement = "bottom",
+  ...props
+}) => {
+  const {
+    slots,
+    triggerRef
+  } = useContext(AutocompleteContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      "data-slot": "autocomplete-popover",
+      placement: placement,
+      triggerRef: triggerRef,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Autocomplete Filter
+ * -----------------------------------------------------------------------------------------------*/
+
+const AutocompleteFilter = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(Autocomplete, {
+    "data-slot": "autocomplete-filter",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Autocomplete Clear Button
+ * -----------------------------------------------------------------------------------------------*/
+
+const AutocompleteClearButton = ({
+  className,
+  onClick,
+  ref,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AutocompleteContext);
+  const state = useContext(SelectStateContext);
+  const {
+    clearButtonRef,
+    onClear
+  } = useContext(AutocompleteContext);
+  const clearButtonRefCallback = React__default.useCallback(node => {
+    clearButtonRef.current = node;
+  }, [clearButtonRef]);
+
+  // Merge context ref callback with user-provided ref
+  const mergedRef = mergeRefs(clearButtonRefCallback, ref);
+  const handleClick = e => {
+    state?.selectionManager.setSelectedKeys(new Set());
+    onClear?.();
+    onClick?.(e);
+  };
+  return /*#__PURE__*/jsx("button", {
+    ref: mergedRef,
+    className: slots?.clearButton({
+      className
+    }),
+    "data-empty": dataAttr(state?.selectionManager.selectedKeys.size === 0),
+    "data-slot": "autocomplete-clear-button",
+    onClick: handleClick,
+    ...props,
+    children: /*#__PURE__*/jsx(CloseIcon, {
+      "data-slot": "autocomplete-clear-button-icon"
+    })
+  });
+};
+
+export { AutocompleteClearButton, AutocompleteFilter, AutocompleteIndicator, AutocompletePopover, AutocompleteRoot, AutocompleteTrigger, AutocompleteValue };

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

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react";
+import { AutocompleteClearButton, AutocompleteFilter, AutocompleteIndicator, AutocompletePopover, AutocompleteRoot, AutocompleteTrigger, AutocompleteValue } from "./autocomplete";
+export declare const Autocomplete: (<T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, onClear, variant, ...props }: import("./autocomplete").AutocompleteRootProps<T, M>) => import("react/jsx-runtime").JSX.Element) & {
+    Root: <T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, onClear, variant, ...props }: import("./autocomplete").AutocompleteRootProps<T, M>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("./autocomplete").AutocompleteTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Value: ({ children, className, ...props }: import("./autocomplete").AutocompleteValueProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./autocomplete").AutocompleteIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Popover: ({ children, className, placement, ...props }: import("./autocomplete").AutocompletePopoverProps) => import("react/jsx-runtime").JSX.Element;
+    Filter: ({ children, ...props }: import("./autocomplete").AutocompleteFilterProps) => import("react/jsx-runtime").JSX.Element;
+    ClearButton: ({ className, onClick, ref, ...props }: import("./autocomplete").AutocompleteClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Autocomplete<T extends object = object, M extends "single" | "multiple" = "single"> = {
+    Props: ComponentProps<typeof AutocompleteRoot<T, M>>;
+    RootProps: ComponentProps<typeof AutocompleteRoot<T, M>>;
+    TriggerProps: ComponentProps<typeof AutocompleteTrigger>;
+    ValueProps: ComponentProps<typeof AutocompleteValue>;
+    IndicatorProps: ComponentProps<typeof AutocompleteIndicator>;
+    PopoverProps: ComponentProps<typeof AutocompletePopover>;
+    FilterProps: ComponentProps<typeof AutocompleteFilter>;
+    ClearButtonProps: ComponentProps<typeof AutocompleteClearButton>;
+};
+export { AutocompleteClearButton, AutocompleteFilter, AutocompleteTrigger, AutocompleteIndicator, AutocompletePopover, AutocompleteRoot, AutocompleteValue, };
+export type { AutocompleteRootProps, AutocompleteRootProps as AutocompleteProps, AutocompleteTriggerProps, AutocompleteValueProps, AutocompleteIndicatorProps, AutocompletePopoverProps, AutocompleteFilterProps, AutocompleteClearButtonProps, } from "./autocomplete";
+export { autocompleteVariants } from "@masaraxui/styles";
+export type { AutocompleteVariants } from "@masaraxui/styles";

package/dist/components/autocomplete/index.js

@@ -0,0 +1,18 @@
+"use strict";
+import { AutocompleteRoot, AutocompleteClearButton, AutocompleteFilter, AutocompletePopover, AutocompleteIndicator, AutocompleteValue, AutocompleteTrigger } from './autocomplete.js';
+export { autocompleteVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Autocomplete = Object.assign(AutocompleteRoot, {
+  Root: AutocompleteRoot,
+  Trigger: AutocompleteTrigger,
+  Value: AutocompleteValue,
+  Indicator: AutocompleteIndicator,
+  Popover: AutocompletePopover,
+  Filter: AutocompleteFilter,
+  ClearButton: AutocompleteClearButton
+});
+
+export { Autocomplete, AutocompleteClearButton, AutocompleteFilter, AutocompleteIndicator, AutocompletePopover, AutocompleteRoot, AutocompleteTrigger, AutocompleteValue };