@alankrit2/ui 0.4.0 → 0.5.0

package/README.md

@@ -36,7 +36,7 @@ npm install react react-dom
 A fully accessible modal dialog component.
 
 ```tsx
-import { Dialog } from '@alankrit/ui';
+import { Dialog } from '@alankrit2/ui';
 
 function MyApp() {
   return (
@@ -74,7 +74,7 @@ function MyApp() {
 
 ```tsx
 import { useState } from 'react';
-import { Dialog } from '@alankrit/ui';
+import { Dialog } from '@alankrit2/ui';
 
 function ControlledDialog() {
   const [open, setOpen] = useState(false);
@@ -176,7 +176,7 @@ This library is headless, meaning it provides zero styles. You can style compone
 Full TypeScript support with exported types:
 
 ```tsx
-import type { DialogProps, DialogContentProps } from '@alankrit/ui';
+import type { DialogProps, DialogContentProps } from '@alankrit2/ui';
 ```
 
 ## License

package/dist/index.d.mts

@@ -210,6 +210,39 @@ interface ToggleProps {
 
 declare const Toggle: React__default.ForwardRefExoticComponent<ToggleProps & React__default.RefAttributes<HTMLButtonElement>>;
 
+declare const ComboboxRoot: any;
+
+interface ComboboxProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputChange?: (value: string) => void;
+    children?: ReactNode;
+    className?: string;
+}
+interface ComboboxInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    asChild?: boolean;
+    onChange?: (value: string) => void;
+}
+interface ComboboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+interface ComboboxContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+    portal?: boolean;
+}
+interface ComboboxItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    value: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+}
+
 interface UseControlledOptions<T> {
     /** Controlled value */
     value?: T;
@@ -277,4 +310,4 @@ declare const Slot: React$1.ForwardRefExoticComponent<SlotProps & React$1.RefAtt
  */
 declare function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>): (node: T | null) => void;
 
-export { Button, type ButtonProps, _default as Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogOverlayProps, type DialogPortalProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, DropdownRoot as Dropdown, type DropdownContentProps, type DropdownItemProps, type DropdownProps, type DropdownTriggerProps, Slot, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, Toggle, type ToggleProps, composeRefs, useBodyScrollLock, useClickOutside, useControlled, useEscapeKeydown, useFocusTrap, useStableId };
+export { Button, type ButtonProps, ComboboxRoot as Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, type ComboboxTriggerProps, _default as Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogOverlayProps, type DialogPortalProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, DropdownRoot as Dropdown, type DropdownContentProps, type DropdownItemProps, type DropdownProps, type DropdownTriggerProps, Slot, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, Toggle, type ToggleProps, composeRefs, useBodyScrollLock, useClickOutside, useControlled, useEscapeKeydown, useFocusTrap, useStableId };

package/dist/index.d.ts

@@ -210,6 +210,39 @@ interface ToggleProps {
 
 declare const Toggle: React__default.ForwardRefExoticComponent<ToggleProps & React__default.RefAttributes<HTMLButtonElement>>;
 
+declare const ComboboxRoot: any;
+
+interface ComboboxProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputChange?: (value: string) => void;
+    children?: ReactNode;
+    className?: string;
+}
+interface ComboboxInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    asChild?: boolean;
+    onChange?: (value: string) => void;
+}
+interface ComboboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+interface ComboboxContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+    portal?: boolean;
+}
+interface ComboboxItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    value: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+}
+
 interface UseControlledOptions<T> {
     /** Controlled value */
     value?: T;
@@ -277,4 +310,4 @@ declare const Slot: React$1.ForwardRefExoticComponent<SlotProps & React$1.RefAtt
  */
 declare function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>): (node: T | null) => void;
 
-export { Button, type ButtonProps, _default as Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogOverlayProps, type DialogPortalProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, DropdownRoot as Dropdown, type DropdownContentProps, type DropdownItemProps, type DropdownProps, type DropdownTriggerProps, Slot, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, Toggle, type ToggleProps, composeRefs, useBodyScrollLock, useClickOutside, useControlled, useEscapeKeydown, useFocusTrap, useStableId };
+export { Button, type ButtonProps, ComboboxRoot as Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, type ComboboxTriggerProps, _default as Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogOverlayProps, type DialogPortalProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, DropdownRoot as Dropdown, type DropdownContentProps, type DropdownItemProps, type DropdownProps, type DropdownTriggerProps, Slot, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, Toggle, type ToggleProps, composeRefs, useBodyScrollLock, useClickOutside, useControlled, useEscapeKeydown, useFocusTrap, useStableId };

package/dist/index.js

@@ -655,8 +655,310 @@ var Toggle = React8__namespace.default.forwardRef(
   }
 );
 Toggle.displayName = "Toggle";
+var ComboboxContext = React8.createContext(
+  void 0
+);
+var useCombobox = () => {
+  const context = React8.useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("useCombobox must be used within a Combobox");
+  }
+  return context;
+};
+var Combobox = ({
+  children,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  inputValue: inputValueProp,
+  defaultInputValue = "",
+  onInputChange,
+  className
+}) => {
+  const [value, setValue] = useControlled({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [open, setOpen] = useControlled({
+    value: openProp,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [inputValue, setInputValue] = useControlled({
+    value: inputValueProp,
+    defaultValue: defaultInputValue,
+    onChange: onInputChange
+  });
+  const [activeIndex, setActiveIndex] = React8.useState(-1);
+  const [items, setItems] = React8.useState([]);
+  const inputRef = React8.useRef(null);
+  const triggerRef = React8.useRef(null);
+  const listId = useStableId();
+  const registerItem = React8.useCallback(
+    (item) => {
+      setItems((prev) => {
+        if (prev.find((i) => i.id === item.id)) return prev;
+        return [...prev, item];
+      });
+    },
+    []
+  );
+  const unregisterItem = React8.useCallback((id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const contextValue = React8.useMemo(
+    () => ({
+      value: value || "",
+      onValueChange: setValue,
+      inputValue: inputValue || "",
+      onInputChange: setInputValue,
+      open: !!open,
+      onOpenChange: setOpen,
+      activeIndex,
+      setActiveIndex,
+      items,
+      registerItem,
+      unregisterItem,
+      listId,
+      inputRef,
+      triggerRef
+    }),
+    [
+      value,
+      setValue,
+      inputValue,
+      setInputValue,
+      open,
+      setOpen,
+      activeIndex,
+      items,
+      registerItem,
+      unregisterItem,
+      listId
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { position: "relative" }, children }) });
+};
+var ComboboxInput = React8__namespace.default.forwardRef(
+  ({ asChild, onChange, onKeyDown, ...props }, ref) => {
+    const {
+      inputValue,
+      onInputChange,
+      open,
+      onOpenChange,
+      items,
+      activeIndex,
+      setActiveIndex,
+      onValueChange,
+      listId,
+      inputRef: contextInputRef
+    } = useCombobox();
+    const composedRef = composeRefs(ref, contextInputRef);
+    const Comp = asChild ? Slot : "input";
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!open) {
+            onOpenChange(true);
+            setActiveIndex(0);
+          } else {
+            setActiveIndex(
+              (prev) => prev < items.length - 1 ? prev + 1 : 0
+            );
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!open) {
+            onOpenChange(true);
+            setActiveIndex(items.length - 1);
+          } else {
+            setActiveIndex((prev) => {
+              return prev > 0 ? prev - 1 : items.length - 1;
+            });
+          }
+          break;
+        case "Enter":
+          if (open && activeIndex >= 0 && items[activeIndex]) {
+            e.preventDefault();
+            const item = items[activeIndex];
+            if (!item.disabled) {
+              onValueChange(item.value);
+              onInputChange(item.value);
+              onOpenChange(false);
+              setActiveIndex(-1);
+            }
+          }
+          break;
+        case "Escape":
+          if (open) {
+            e.preventDefault();
+            onOpenChange(false);
+            setActiveIndex(-1);
+          }
+          break;
+        case "Tab":
+          if (open) {
+            onOpenChange(false);
+          }
+          break;
+      }
+    };
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+      onInputChange(e.target.value);
+      if (!open) {
+        onOpenChange(true);
+      }
+    };
+    const handleClick = (e) => {
+      props.onClick?.(e);
+      if (!open) {
+        onOpenChange(true);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref: composedRef,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        "aria-activedescendant": activeIndex >= 0 && items[activeIndex] ? items[activeIndex].id : void 0,
+        value: inputValue,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+ComboboxInput.displayName = "Combobox.Input";
+var ComboboxTrigger = React8__namespace.default.forwardRef(
+  ({ asChild, onClick, ...props }, ref) => {
+    const { open, onOpenChange, inputRef, triggerRef } = useCombobox();
+    const composedRef = composeRefs(ref, triggerRef);
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref: composedRef,
+        "aria-expanded": open,
+        type: "button",
+        onClick: (e) => {
+          onClick?.(e);
+          const nextOpen = !open;
+          onOpenChange(nextOpen);
+          if (nextOpen) {
+            requestAnimationFrame(() => {
+              inputRef.current?.focus();
+            });
+          }
+        },
+        ...props
+      }
+    );
+  }
+);
+ComboboxTrigger.displayName = "Combobox.Trigger";
+var ComboboxContent = React8__namespace.default.forwardRef(
+  ({ asChild, children, portal = false, className, ...props }, ref) => {
+    const { open, onOpenChange, listId, inputRef, triggerRef } = useCombobox();
+    const contentRef = React8.useRef(null);
+    const composedRef = composeRefs(ref, contentRef);
+    useClickOutside(contentRef, (e) => {
+      const target = e.target;
+      if (inputRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      onOpenChange(false);
+    }, open);
+    if (!open) return null;
+    if (!open) return null;
+    const Comp = asChild ? Slot : "div";
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref: composedRef,
+        id: listId,
+        role: "listbox",
+        className,
+        ...props,
+        children
+      }
+    );
+    if (portal && typeof document !== "undefined") {
+      return ReactDOM.createPortal(content, document.body);
+    }
+    return content;
+  }
+);
+ComboboxContent.displayName = "Combobox.Content";
+var ComboboxItem = React8__namespace.default.forwardRef(
+  ({ asChild, value, onClick, onSelect, disabled = false, ...props }, ref) => {
+    const {
+      onValueChange,
+      onInputChange,
+      onOpenChange,
+      registerItem,
+      unregisterItem,
+      items,
+      activeIndex,
+      setActiveIndex
+    } = useCombobox();
+    const id = useStableId();
+    const itemRef = React8.useRef(null);
+    const composedRef = composeRefs(ref, itemRef);
+    React8.useEffect(() => {
+      registerItem({ value, id, disabled });
+      return () => unregisterItem(id);
+    }, [value, id, disabled, registerItem, unregisterItem]);
+    const index = items.findIndex((i) => i.id === id);
+    const isActive = index === activeIndex;
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref: composedRef,
+        id,
+        role: "option",
+        "aria-selected": isActive,
+        "aria-disabled": disabled,
+        "data-disabled": disabled ? "" : void 0,
+        "data-highlighted": isActive ? "" : void 0,
+        onClick: (e) => {
+          if (disabled) return;
+          onClick?.(e);
+          onSelect?.(value);
+          onValueChange(value);
+          onInputChange(value);
+          onOpenChange(false);
+          setActiveIndex(-1);
+        },
+        onMouseEnter: () => {
+          if (!disabled) setActiveIndex(index);
+        },
+        ...props
+      }
+    );
+  }
+);
+ComboboxItem.displayName = "Combobox.Item";
+var ComboboxRoot = Combobox;
+ComboboxRoot.Input = ComboboxInput;
+ComboboxRoot.Trigger = ComboboxTrigger;
+ComboboxRoot.Content = ComboboxContent;
+ComboboxRoot.Item = ComboboxItem;
 
 exports.Button = button_default;
+exports.Combobox = ComboboxRoot;
 exports.Dialog = dialog_default;
 exports.Dropdown = dropdown_default;
 exports.Slot = Slot;