corestack-ui 0.2.0 → 0.2.2

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default from 'react';
 
 type AutocompleteChangeReason = "selectOption" | "removeOption" | "clear" | "blur";
@@ -8,14 +8,14 @@ interface AutocompleteRenderOptionState {
     index: number;
 }
 interface RenderInputParams {
-    ref: React.Ref<HTMLInputElement>;
+    ref: React$1.Ref<HTMLInputElement>;
     value: string;
     placeholder?: string;
     disabled?: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onFocus: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onChange: React$1.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyDown: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     role: string;
     "aria-autocomplete": "list";
     "aria-controls"?: string;
@@ -23,8 +23,8 @@ interface RenderInputParams {
     "aria-activedescendant"?: string;
     autoComplete?: string;
     InputProps: {
-        startAdornment?: React.ReactNode;
-        endAdornment?: React.ReactNode;
+        startAdornment?: React$1.ReactNode;
+        endAdornment?: React$1.ReactNode;
         className?: string;
     };
 }
@@ -32,8 +32,8 @@ interface BaseAutocompleteProps<T> {
     options: T[];
     getOptionLabel: (option: T) => string;
     isOptionEqualToValue?: (option: T, value: T) => boolean;
-    renderInput: (params: RenderInputParams) => React.ReactNode;
-    renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode;
+    renderInput: (params: RenderInputParams) => React$1.ReactNode;
+    renderOption?: (props: React$1.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React$1.ReactNode;
     loading?: boolean;
     disabled?: boolean;
     placeholder?: string;
@@ -41,20 +41,20 @@ interface BaseAutocompleteProps<T> {
     /** Text to show when there are no options and not loading */
     emptyText?: string;
 }
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue">;
+type NativeInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue">;
 interface SingleAutocompleteProps<T> extends BaseAutocompleteProps<T>, NativeInputProps {
     multiple?: false;
     value?: T | null;
     defaultValue?: T | null;
     disableCloseOnSelect?: boolean;
-    onChange?: (event: React.SyntheticEvent, value: T | null, reason: AutocompleteChangeReason) => void;
+    onChange?: (event: React$1.SyntheticEvent, value: T | null, reason: AutocompleteChangeReason) => void;
 }
 interface MultipleAutocompleteProps<T> extends BaseAutocompleteProps<T>, NativeInputProps {
     multiple: true;
     value?: T[];
     defaultValue?: T[];
     disableCloseOnSelect?: boolean;
-    onChange?: (event: React.SyntheticEvent, value: T[], reason: AutocompleteChangeReason) => void;
+    onChange?: (event: React$1.SyntheticEvent, value: T[], reason: AutocompleteChangeReason) => void;
 }
 type AutocompleteProps<T> = SingleAutocompleteProps<T> | MultipleAutocompleteProps<T>;
 
@@ -62,7 +62,7 @@ declare function Autocomplete<T>(props: AutocompleteProps<T>): react_jsx_runtime
 
 type ButtonVariant = "primary" | "secondary" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     disableRipple?: boolean;
@@ -72,13 +72,13 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 declare function Button({ children, disableRipple, isLoading, className, onClick, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const TextField: React__default.ForwardRefExoticComponent<{
-    value?: string | number | readonly string[];
+    value?: string | number | null | readonly string[];
     defaultValue?: string | number | readonly string[];
     onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onBlur?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onFocus?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     placeholder?: string;
-    label?: string;
+    label?: string | React__default.ReactNode;
     helperText?: string | false | undefined;
     error?: boolean;
     disabled?: boolean;
@@ -217,9 +217,41 @@ declare const tokens: {
     };
 };
 
+type TextFieldSize = "small" | "medium";
+type TextFieldVariant = "outlined" | "filled" | "standard";
+type TextFieldInputProps = {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    inputComponent?: React.ElementType;
+    className?: string;
+};
+type TextFieldProps = {
+    value?: string | number | null | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    placeholder?: string;
+    label?: string | React.ReactNode;
+    helperText?: string | false | undefined;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    type?: string;
+    name?: string;
+    id?: string;
+    fullWidth?: boolean;
+    size?: TextFieldSize;
+    variant?: TextFieldVariant;
+    InputProps?: TextFieldInputProps;
+    className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "type" | "onChange" | "value" | "defaultValue" | "disabled" | "required" | "name" | "id" | "placeholder" | "onBlur" | "onFocus">;
+
 type ClassValue = string | false | null | undefined;
 declare const cn: (...parts: ClassValue[]) => string;
 
 declare const cssFile = "./styles.css";
 
-export { Autocomplete, Button, type ButtonProps, type ClassValue, TextField, ThemeProvider, cn, cssFile, tokens, useTheme };
+export { Autocomplete, type AutocompleteProps, Button, type ButtonProps, type ClassValue, TextField, type TextFieldProps, ThemeProvider, cn, cssFile, tokens, useTheme };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default from 'react';
 
 type AutocompleteChangeReason = "selectOption" | "removeOption" | "clear" | "blur";
@@ -8,14 +8,14 @@ interface AutocompleteRenderOptionState {
     index: number;
 }
 interface RenderInputParams {
-    ref: React.Ref<HTMLInputElement>;
+    ref: React$1.Ref<HTMLInputElement>;
     value: string;
     placeholder?: string;
     disabled?: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onFocus: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onChange: React$1.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyDown: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     role: string;
     "aria-autocomplete": "list";
     "aria-controls"?: string;
@@ -23,8 +23,8 @@ interface RenderInputParams {
     "aria-activedescendant"?: string;
     autoComplete?: string;
     InputProps: {
-        startAdornment?: React.ReactNode;
-        endAdornment?: React.ReactNode;
+        startAdornment?: React$1.ReactNode;
+        endAdornment?: React$1.ReactNode;
         className?: string;
     };
 }
@@ -32,8 +32,8 @@ interface BaseAutocompleteProps<T> {
     options: T[];
     getOptionLabel: (option: T) => string;
     isOptionEqualToValue?: (option: T, value: T) => boolean;
-    renderInput: (params: RenderInputParams) => React.ReactNode;
-    renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode;
+    renderInput: (params: RenderInputParams) => React$1.ReactNode;
+    renderOption?: (props: React$1.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React$1.ReactNode;
     loading?: boolean;
     disabled?: boolean;
     placeholder?: string;
@@ -41,20 +41,20 @@ interface BaseAutocompleteProps<T> {
     /** Text to show when there are no options and not loading */
     emptyText?: string;
 }
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue">;
+type NativeInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue">;
 interface SingleAutocompleteProps<T> extends BaseAutocompleteProps<T>, NativeInputProps {
     multiple?: false;
     value?: T | null;
     defaultValue?: T | null;
     disableCloseOnSelect?: boolean;
-    onChange?: (event: React.SyntheticEvent, value: T | null, reason: AutocompleteChangeReason) => void;
+    onChange?: (event: React$1.SyntheticEvent, value: T | null, reason: AutocompleteChangeReason) => void;
 }
 interface MultipleAutocompleteProps<T> extends BaseAutocompleteProps<T>, NativeInputProps {
     multiple: true;
     value?: T[];
     defaultValue?: T[];
     disableCloseOnSelect?: boolean;
-    onChange?: (event: React.SyntheticEvent, value: T[], reason: AutocompleteChangeReason) => void;
+    onChange?: (event: React$1.SyntheticEvent, value: T[], reason: AutocompleteChangeReason) => void;
 }
 type AutocompleteProps<T> = SingleAutocompleteProps<T> | MultipleAutocompleteProps<T>;
 
@@ -62,7 +62,7 @@ declare function Autocomplete<T>(props: AutocompleteProps<T>): react_jsx_runtime
 
 type ButtonVariant = "primary" | "secondary" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     disableRipple?: boolean;
@@ -72,13 +72,13 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 declare function Button({ children, disableRipple, isLoading, className, onClick, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const TextField: React__default.ForwardRefExoticComponent<{
-    value?: string | number | readonly string[];
+    value?: string | number | null | readonly string[];
     defaultValue?: string | number | readonly string[];
     onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onBlur?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onFocus?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     placeholder?: string;
-    label?: string;
+    label?: string | React__default.ReactNode;
     helperText?: string | false | undefined;
     error?: boolean;
     disabled?: boolean;
@@ -217,9 +217,41 @@ declare const tokens: {
     };
 };
 
+type TextFieldSize = "small" | "medium";
+type TextFieldVariant = "outlined" | "filled" | "standard";
+type TextFieldInputProps = {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    inputComponent?: React.ElementType;
+    className?: string;
+};
+type TextFieldProps = {
+    value?: string | number | null | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    placeholder?: string;
+    label?: string | React.ReactNode;
+    helperText?: string | false | undefined;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    type?: string;
+    name?: string;
+    id?: string;
+    fullWidth?: boolean;
+    size?: TextFieldSize;
+    variant?: TextFieldVariant;
+    InputProps?: TextFieldInputProps;
+    className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "type" | "onChange" | "value" | "defaultValue" | "disabled" | "required" | "name" | "id" | "placeholder" | "onBlur" | "onFocus">;
+
 type ClassValue = string | false | null | undefined;
 declare const cn: (...parts: ClassValue[]) => string;
 
 declare const cssFile = "./styles.css";
 
-export { Autocomplete, Button, type ButtonProps, type ClassValue, TextField, ThemeProvider, cn, cssFile, tokens, useTheme };
+export { Autocomplete, type AutocompleteProps, Button, type ButtonProps, type ClassValue, TextField, type TextFieldProps, ThemeProvider, cn, cssFile, tokens, useTheme };

package/dist/index.js

@@ -1,11 +1,12 @@
 'use strict';
 
-var react = require('react');
+var React2 = require('react');
 var ReactDOM = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 /* Corestack UI - built with tsup */
@@ -103,54 +104,54 @@ function useAutocomplete(props) {
     disabled,
     disableCloseOnSelect
   } = props;
-  const getLabel = react.useCallback(
+  const getLabel = React2.useCallback(
     (option) => {
       if (getOptionLabel) return getOptionLabel(option);
       return String(option);
     },
     [getOptionLabel]
   );
-  const isEqual = react.useCallback(
+  const isEqual = React2.useCallback(
     (option, v) => isOptionEqualToValue ? isOptionEqualToValue(option, v) : getLabel(option) === getLabel(v),
     [isOptionEqualToValue, getLabel]
   );
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = react.useState(() => {
+  const [internalValue, setInternalValue] = React2.useState(() => {
     if (defaultValue !== void 0) return defaultValue;
     return multiple ? [] : null;
   });
   const currentValue = isControlled ? value : internalValue;
-  const [open, setOpen] = react.useState(false);
-  const [inputValue, setInputValue] = react.useState(() => {
+  const [open, setOpen] = React2.useState(false);
+  const [inputValue, setInputValue] = React2.useState(() => {
     if (multiple) return "";
     return currentValue && !Array.isArray(currentValue) ? getLabel(currentValue) : "";
   });
-  const [activeIndex, setActiveIndex] = react.useState(-1);
-  const rootRef = react.useRef(null);
-  const inputRef = react.useRef(null);
-  const listboxRef = react.useRef(null);
-  const isFocusedRef = react.useRef(false);
-  const blurTimeoutRef = react.useRef(null);
-  const filteredOptions = react.useMemo(() => {
+  const [activeIndex, setActiveIndex] = React2.useState(-1);
+  const rootRef = React2.useRef(null);
+  const inputRef = React2.useRef(null);
+  const listboxRef = React2.useRef(null);
+  const isFocusedRef = React2.useRef(false);
+  const blurTimeoutRef = React2.useRef(null);
+  const filteredOptions = React2.useMemo(() => {
     const query = inputValue.trim().toLowerCase();
     if (!query) return options;
     return options.filter(
       (option) => getLabel(option).toLowerCase().includes(query)
     );
   }, [options, inputValue, getLabel]);
-  const selectedValues = react.useMemo(() => {
+  const selectedValues = React2.useMemo(() => {
     if (multiple)
       return Array.isArray(currentValue) ? currentValue : [];
     return currentValue && !Array.isArray(currentValue) ? [currentValue] : [];
   }, [currentValue, multiple]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (multiple) return;
     if (!isFocusedRef.current) {
       const next = currentValue && !Array.isArray(currentValue) ? getLabel(currentValue) : "";
       setInputValue(next);
     }
   }, [currentValue, getLabel, multiple]);
-  const updateValue = react.useCallback(
+  const updateValue = React2.useCallback(
     (event, nextValue, reason) => {
       if (!isControlled) {
         setInternalValue(nextValue);
@@ -165,7 +166,7 @@ function useAutocomplete(props) {
     },
     [isControlled, onChange, multiple]
   );
-  const selectOption = react.useCallback(
+  const selectOption = React2.useCallback(
     (event, option) => {
       if (blurTimeoutRef.current) {
         clearTimeout(blurTimeoutRef.current);
@@ -191,7 +192,7 @@ function useAutocomplete(props) {
     },
     [currentValue, getLabel, isEqual, multiple, updateValue]
   );
-  const clearValue = react.useCallback(
+  const clearValue = React2.useCallback(
     (event) => {
       updateValue(event, multiple ? [] : null, "clear");
       setInputValue("");
@@ -199,10 +200,20 @@ function useAutocomplete(props) {
     },
     [multiple, updateValue]
   );
-  const setInputFocused = react.useCallback((focused) => {
+  const removeOption = React2.useCallback(
+    (event, option) => {
+      if (!multiple) return;
+      const existing = Array.isArray(currentValue) ? currentValue : [];
+      const next = existing.filter((item) => !isEqual(item, option));
+      updateValue(event, next, "removeOption");
+      setActiveIndex(-1);
+    },
+    [currentValue, isEqual, multiple, updateValue]
+  );
+  const setInputFocused = React2.useCallback((focused) => {
     isFocusedRef.current = focused;
   }, []);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!open || activeIndex < 0 || !listboxRef.current) return;
     const activeId = `autocomplete-option-${activeIndex}`;
     const el = listboxRef.current.querySelector(`#${activeId}`);
@@ -210,7 +221,7 @@ function useAutocomplete(props) {
       el.scrollIntoView({ block: "nearest" });
     }
   }, [open, activeIndex]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const handleClickOutside = (event) => {
       const root = rootRef.current;
       const list = listboxRef.current;
@@ -222,7 +233,7 @@ function useAutocomplete(props) {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handleInputChange = react.useCallback(
+  const handleInputChange = React2.useCallback(
     (event) => {
       var _a;
       setInputValue(event.target.value);
@@ -232,7 +243,7 @@ function useAutocomplete(props) {
     },
     [setInputValue, setOpen, setActiveIndex]
   );
-  const handleInputFocus = react.useCallback(
+  const handleInputFocus = React2.useCallback(
     (event) => {
       var _a;
       if (!!disabled) return;
@@ -255,7 +266,7 @@ function useAutocomplete(props) {
       setActiveIndex
     ]
   );
-  const handleInputBlur = react.useCallback(
+  const handleInputBlur = React2.useCallback(
     (event) => {
       var _a;
       setInputFocused(false);
@@ -274,7 +285,7 @@ function useAutocomplete(props) {
     },
     [setInputFocused, setOpen, setActiveIndex]
   );
-  const handleToggleClick = react.useCallback(
+  const handleToggleClick = React2.useCallback(
     (event) => {
       var _a;
       if (!!disabled) return;
@@ -290,7 +301,7 @@ function useAutocomplete(props) {
     },
     [!!disabled, open, setActiveIndex, setOpen, inputRef]
   );
-  const handleKeyDown = react.useCallback(
+  const handleKeyDown = React2.useCallback(
     (event) => {
       if (!!disabled) return;
       if (event.key === "ArrowDown") {
@@ -346,6 +357,7 @@ function useAutocomplete(props) {
     isEqual,
     selectOption,
     clearValue,
+    removeOption,
     disabled: !!disabled,
     handleToggleClick,
     handleInputChange,
@@ -357,8 +369,8 @@ function useAutocomplete(props) {
 }
 var MARGIN = 16;
 function useDropdownPosition(anchor, menuRef) {
-  const [position, setPosition] = react.useState(null);
-  react.useLayoutEffect(() => {
+  const [position, setPosition] = React2.useState(null);
+  React2.useLayoutEffect(() => {
     let mounted = true;
     let ro = null;
     let rafId = null;
@@ -478,6 +490,7 @@ function Autocomplete(props) {
     isEqual,
     selectOption,
     clearValue,
+    removeOption,
     disabled: isDisabled,
     handleToggleClick,
     handleInputChange,
@@ -485,23 +498,43 @@ function Autocomplete(props) {
     handleInputBlur,
     handleKeyDown
   } = useAutocomplete(props);
-  const listboxId = react.useMemo(
+  const onRemove = React2__default.default.useCallback(
+    (event, index) => {
+      event.stopPropagation();
+      const option = selectedValues[index];
+      if (!option || !removeOption) return;
+      removeOption(event, option);
+    },
+    [removeOption, selectedValues]
+  );
+  const listboxId = React2.useMemo(
     () => `autocomplete-listbox-${Math.random().toString(36).slice(2, 9)}`,
     []
   );
-  const startAdornment = react.useMemo(() => {
+  const startAdornment = React2.useMemo(() => {
     if (!multiple || selectedValues.length === 0) return void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: selectedValues.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: selectedValues.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
-        className: "inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700",
-        children: getLabel(option)
+        className: "inline-flex gap-2 items-center rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700",
+        children: [
+          getLabel(option),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              className: "w-4",
+              onClick: (event) => onRemove(event, index),
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }) })
+            }
+          )
+        ]
       },
       `${getLabel(option)}-${index}`
     )) });
-  }, [multiple, selectedValues, getLabel]);
-  const endAdornment = react.useMemo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center absolute right-3", children: [
+  }, [getLabel, multiple, onRemove, selectedValues]);
+  const endAdornment = React2.useMemo(() => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center absolute rtl:left-3 ltr:right-3", children: [
       inputValue ? /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
@@ -564,7 +597,7 @@ function Autocomplete(props) {
       )
     ] });
   }, [clearValue, handleToggleClick, inputValue, isDisabled, loading, open]);
-  const inputParams = react.useMemo(
+  const inputParams = React2.useMemo(
     () => ({
       ...props,
       options: void 0,
@@ -584,7 +617,6 @@ function Autocomplete(props) {
       onBlur: handleInputBlur,
       disabled: isDisabled,
       InputProps: {
-        startAdornment,
         endAdornment,
         className: "min-h-[40px]"
       }
@@ -607,7 +639,7 @@ function Autocomplete(props) {
   if (!renderInput) {
     return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Render Input Prop Must be pass " });
   }
-  const wrapperRef = react.useRef(null);
+  const wrapperRef = React2.useRef(null);
   const { position } = useDropdownPosition(() => rootRef.current, listboxRef);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -618,9 +650,12 @@ function Autocomplete(props) {
           setOpen(true);
         }
       },
-      className: `${className} [&_.input-container]:pe-[54px] [&_.input-container]:gap-0`,
+      className: `${className != null ? className : ""} [&_.input-container]:pe-[54px]  [&_.input-container]:gap-0`,
       children: [
-        renderInput(inputParams),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          startAdornment,
+          renderInput(inputParams)
+        ] }),
         open || open && loading ? (() => {
           const portalNode = document.body;
           const dropdown = /* @__PURE__ */ jsxRuntime.jsx(
@@ -643,7 +678,7 @@ function Autocomplete(props) {
                   id: listboxId,
                   ref: listboxRef,
                   role: "listbox",
-                  className: "max-h-60  sm:max-h-[530px] w-full overflow-auto ",
+                  className: "max-h-60 sm:max-h-[325px] w-full overflow-auto ",
                   children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(
                     "svg",
                     {
@@ -677,7 +712,7 @@ function Autocomplete(props) {
                       id: `autocomplete-option-${index}`,
                       role: "option",
                       "aria-selected": selected,
-                      className: "cursor-pointer px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 " + (index === activeIndex ? "bg-slate-100" : ""),
+                      className: "cursor-pointer px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 " + (index === activeIndex ? "bg-slate-100 " : "") + (selected ? "bg-slate-100 font-medium text-slate-900" : ""),
                       onMouseDown: (event) => event.preventDefault(),
                       onClick: (event) => selectOption(event, option)
                     };
@@ -700,7 +735,7 @@ function Autocomplete(props) {
     }
   );
 }
-var TextField = react.forwardRef(
+var TextField = React2.forwardRef(
   ({
     value,
     defaultValue,
@@ -727,10 +762,10 @@ var TextField = react.forwardRef(
   }, ref) => {
     var _a;
     const InputComponent = (_a = InputProps == null ? void 0 : InputProps.inputComponent) != null ? _a : multiline ? "textarea" : "input";
-    const reactId = react.useId();
+    const reactId = React2.useId();
     const inputId = id != null ? id : `textfield-${reactId}`;
     const isControlled = value !== void 0;
-    const [focused, setFocused] = react.useState(false);
+    const [focused, setFocused] = React2.useState(false);
     const handleChange = (event) => {
       onChange == null ? void 0 : onChange(event);
     };
@@ -742,7 +777,7 @@ var TextField = react.forwardRef(
       setFocused(false);
       onBlur == null ? void 0 : onBlur(event);
     };
-    const sizeClasses = react.useMemo(() => {
+    const sizeClasses = React2.useMemo(() => {
       if (size === "small") {
         return {
           container: `${multiline ? "min-h-10" : "h-[45px]"} text-sm`,
@@ -899,7 +934,7 @@ var tokens = {
 };
 var styles_default = tokens;
 var defaultTheme = styles_default;
-var ThemeContext = react.createContext(defaultTheme);
+var ThemeContext = React2.createContext(defaultTheme);
 var ThemeProvider = ({
   theme,
   children
@@ -918,7 +953,7 @@ var ThemeProvider = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: mergedTheme, children });
 };
-var useTheme = () => react.useContext(ThemeContext);
+var useTheme = () => React2.useContext(ThemeContext);
 
 // src/index.ts
 var cssFile = "./styles.css";