@cognitiv/components-web 1.0.4 → 1.1.0

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) & {
+    Backdrop: ({ children, className, isDismissable, isKeyboardDismissDisabled, onClick, variant, ...props }: import("./alert-dialog").AlertDialogBackdropProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, ...props }: import("./alert-dialog").AlertDialogBodyProps) => import("react/jsx-runtime").JSX.Element;
+    CloseTrigger: ({ className, ...rest }: import("./alert-dialog").AlertDialogCloseTriggerProps) => 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;
+    Footer: ({ children, className, ...props }: import("./alert-dialog").AlertDialogFooterProps) => 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;
+    Icon: ({ children, className, status, ...props }: import("./alert-dialog").AlertDialogIconProps) => 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;
+};
+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 "./styles";
+export type { AlertDialogVariants } from "./styles";

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

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

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

@@ -0,0 +1,174 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const alertDialogVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        cover: {
+            dialog: string;
+        };
+        lg: {
+            dialog: string;
+        };
+        md: {
+            dialog: string;
+        };
+        sm: {
+            dialog: string;
+        };
+        xs: {
+            dialog: string;
+        };
+    };
+    status: {
+        accent: {
+            icon: string;
+        };
+        danger: {
+            icon: string;
+        };
+        default: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    container: string;
+    dialog: string;
+    footer: string;
+    header: string;
+    heading: string;
+    icon: string;
+    trigger: string;
+}, undefined, {
+    size: {
+        cover: {
+            dialog: string;
+        };
+        lg: {
+            dialog: string;
+        };
+        md: {
+            dialog: string;
+        };
+        sm: {
+            dialog: string;
+        };
+        xs: {
+            dialog: string;
+        };
+    };
+    status: {
+        accent: {
+            icon: string;
+        };
+        danger: {
+            icon: string;
+        };
+        default: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    container: string;
+    dialog: string;
+    footer: string;
+    header: string;
+    heading: string;
+    icon: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        cover: {
+            dialog: string;
+        };
+        lg: {
+            dialog: string;
+        };
+        md: {
+            dialog: string;
+        };
+        sm: {
+            dialog: string;
+        };
+        xs: {
+            dialog: string;
+        };
+    };
+    status: {
+        accent: {
+            icon: string;
+        };
+        danger: {
+            icon: string;
+        };
+        default: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    container: string;
+    dialog: string;
+    footer: string;
+    header: string;
+    heading: string;
+    icon: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertDialogVariants = VariantProps<typeof alertDialogVariants>;

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

@@ -0,0 +1,71 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const alertDialogVariants = tv({
+  defaultVariants: {
+    size: "md",
+    status: "danger",
+    variant: "opaque"
+  },
+  slots: {
+    backdrop: "alert-dialog__backdrop",
+    body: "alert-dialog__body",
+    closeTrigger: "alert-dialog__close-trigger",
+    container: "alert-dialog__container",
+    dialog: "alert-dialog__dialog",
+    footer: "alert-dialog__footer",
+    header: "alert-dialog__header",
+    heading: "alert-dialog__heading",
+    icon: "alert-dialog__icon",
+    trigger: "alert-dialog__trigger"
+  },
+  variants: {
+    size: {
+      cover: {
+        dialog: "alert-dialog__dialog--cover"
+      },
+      lg: {
+        dialog: "alert-dialog__dialog--lg"
+      },
+      md: {
+        dialog: "alert-dialog__dialog--md"
+      },
+      sm: {
+        dialog: "alert-dialog__dialog--sm"
+      },
+      xs: {
+        dialog: "alert-dialog__dialog--xs"
+      }
+    },
+    status: {
+      accent: {
+        icon: "alert-dialog__icon--accent"
+      },
+      danger: {
+        icon: "alert-dialog__icon--danger"
+      },
+      default: {
+        icon: "alert-dialog__icon--default"
+      },
+      success: {
+        icon: "alert-dialog__icon--success"
+      },
+      warning: {
+        icon: "alert-dialog__icon--warning"
+      }
+    },
+    variant: {
+      blur: {
+        backdrop: "alert-dialog__backdrop--blur"
+      },
+      opaque: {
+        backdrop: "alert-dialog__backdrop--opaque"
+      },
+      transparent: {
+        backdrop: "alert-dialog__backdrop--transparent"
+      }
+    }
+  }
+});
+
+export { alertDialogVariants };

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

@@ -0,0 +1,31 @@
+import type { AutocompleteVariants } from "./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 { mergeRefs } from '@react-aria/utils';
+import React__default, { useRef, useContext, createContext } from 'react';
+import { Select, SelectValue, SelectStateContext, Group, Popover, Button, Autocomplete } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { IconChevronDown, CloseIcon } from '../icons.js';
+import { autocompleteVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const AutocompleteContext = /*#__PURE__*/createContext({
+  clearButtonRef: {
+    current: null
+  },
+  triggerRef: {
+    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: {
+      clearButtonRef,
+      onClear,
+      slots,
+      triggerRef
+    },
+    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-open": dataAttr(state?.isOpen),
+      "data-slot": "autocomplete-indicator"
+    });
+  }
+  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) & {
+    ClearButton: ({ className, onClick, ref, ...props }: import("./autocomplete").AutocompleteClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Filter: ({ children, ...props }: import("./autocomplete").AutocompleteFilterProps) => 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;
+    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;
+};
+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 "./styles";
+export type { AutocompleteVariants } from "./styles";

package/dist/components/autocomplete/index.js

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