react-restyle-components 0.3.83 → 0.3.86

package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { IconProps } from '../../Icon';
 export type AccordionSectionProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     buttonClassName?: string;
+    headerClassName?: string;
+    subheaderClassName?: string;
     iconWrapperClassName?: string;
     /** @deprecated use `aria-label` instead */
     ariaLabel?: string;
@@ -20,6 +22,8 @@ export type AccordionSectionProps = React.ButtonHTMLAttributes<HTMLButtonElement
 };
 export declare const AccordionSection: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     buttonClassName?: string | undefined;
+    headerClassName?: string | undefined;
+    subheaderClassName?: string | undefined;
     iconWrapperClassName?: string | undefined;
     /** @deprecated use `aria-label` instead */
     ariaLabel?: string | undefined;

package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionSection.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/AccordionSection/AccordionSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAO,SAAS,EAAC,MAAM,YAAY,CAAC;AAU3C,MAAM,MAAM,qBAAqB,GAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB;IAClB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,gBAAgB;;;IAhBzB,2CAA2C;;IAE3C,mGAAmG;;;;;;IAMnG,kBAAkB;;IAElB,kBAAkB;;qCAEc,OAAO,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;CA2HnD,CAAC"}
+{"version":3,"file":"AccordionSection.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/AccordionSection/AccordionSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAO,SAAS,EAAC,MAAM,YAAY,CAAC;AAU3C,MAAM,MAAM,qBAAqB,GAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB;IAClB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,gBAAgB;;;;;IAhBzB,2CAA2C;;IAE3C,mGAAmG;;;;;;IAMnG,kBAAkB;;IAElB,kBAAkB;;qCAEc,OAAO,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;CAmInD,CAAC"}

package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.js

@@ -8,7 +8,7 @@ import { useCurrentAccordionIndex } from './hooks/useCurrentAccordionIndex';
 import AccordionContext from './AccordionContext';
 import { StateLayer } from '../../../core-components';
 import { attachSubComponents, separateChildrenByType, usePropDeprecation, } from '../../../utils';
-export const AccordionSection = attachSubComponents('AccordionSection', React.forwardRef(({ buttonClassName = '', iconWrapperClassName = '', ariaLabel = '', icons, children, header, subheader, startOpen = false, transitionDuration = '.3s', transitionTimingFunction = 'ease-in', onClick, onOpenStateChange, isOpen, ...rest }, fRef) => {
+export const AccordionSection = attachSubComponents('AccordionSection', React.forwardRef(({ buttonClassName = '', headerClassName = '', subheaderClassName = '', iconWrapperClassName = '', ariaLabel = '', icons, children, header, subheader, startOpen = false, transitionDuration = '.3s', transitionTimingFunction = 'ease-in', onClick, onOpenStateChange, isOpen, ...rest }, fRef) => {
     usePropDeprecation({
         name: 'iconSrc',
         version: '5.0.0',
@@ -23,8 +23,8 @@ export const AccordionSection = attachSubComponents('AccordionSection', React.fo
         setAccordionOpenState(isOpen ?? startOpen);
     }, [isOpen]);
     const [headerElements, content] = separateChildrenByType(children, Header);
-    const sectionHeader = React.Children.count(headerElements) !== 0 ? (headerElements) : (_jsxs(Header, { children: [numbered ? (_jsx(Header.Leading, { children: _jsxs(Header.Number, { children: [accordionIndex, "."] }) })) : (icons && (_jsx(Header.Leading, { className: iconWrapperClassName, children: _jsx(Icon, { nameIcon: icons.nameIcon }) }))), _jsx(Header.Heading, { children: header }), subheader && (_jsx(Header.SupportiveText, { children: subheader }))] }));
-    return (_jsxs(AccordionSectionWrapper, { "$variant": variant, "$isOpen": accordionOpen, "data-aui": "accordion.section", ref: accordionRef, children: [_jsxs(ButtonElement, { ref: fRef, className: buttonClassName, "aria-label": ariaLabel, "aria-expanded": accordionOpen, onClick: (e) => {
+    const sectionHeader = React.Children.count(headerElements) !== 0 ? (headerElements) : (_jsxs(Header, { children: [numbered ? (_jsx(Header.Leading, { children: _jsxs(Header.Number, { children: [accordionIndex, "."] }) })) : (icons && (_jsx(Header.Leading, { className: iconWrapperClassName, children: _jsx(Icon, { nameIcon: icons.nameIcon }) }))), _jsx(Header.Heading, { className: headerClassName, children: header }), subheader && (_jsx(Header.SupportiveText, { className: subheaderClassName, children: subheader }))] }));
+    return (_jsxs(AccordionSectionWrapper, { "$variant": variant, "$isOpen": accordionOpen, "data-aui": "accordion.section", ref: accordionRef, children: [_jsxs(ButtonElement, { ref: fRef, className: buttonClassName, "aria-label": ariaLabel, "aria-expanded": accordionOpen, "$variant": variant, "$isOpen": accordionOpen, onClick: (e) => {
                     onClick?.(e);
                     onOpenStateChange?.(!accordionOpen);
                     setAccordionOpenState(!accordionOpen);

package/lib/src/core-components/src/components/Accordion/AccordionSection/Header.js

@@ -17,7 +17,7 @@ const Text = ({ size, weight, color, children, ...props }) => {
     return (_jsx("span", { style: {
             fontSize: fontSizeMap[size] || fontSizeMap[2],
             fontWeight: fontWeightMap[weight] || fontWeightMap['regular'],
-            color: color || 'inherit',
+            color: color || 'white',
         }, ...props, children: children }));
 };
 const LeadingTrailing = ({ children, ...props }) => (_jsx(StyledLeadingTrailing, { ...props, children: _jsx(DefaultsProvider, { value: { iconSize: 'large' }, children: children }) }));
@@ -25,7 +25,7 @@ const Leading = (props) => _jsx(LeadingTrailing, { ...props });
 const Trailing = (props) => _jsx(LeadingTrailing, { ...props });
 const Number = ({ children, ...props }) => (_jsx(Text, { size: 2, weight: "heavy", ...props, children: children }));
 const Heading = ({ children, ...props }) => (_jsx(Text, { size: 2, weight: "heavy", ...props, children: children }));
-const SupportiveText = ({ children, ...props }) => (_jsx(Text, { size: 1, color: "var(--aui-on-surface-soft)", ...props, children: children }));
+const SupportiveText = ({ children, ...props }) => (_jsx(Text, { size: 1, ...props, children: children }));
 export const Header = attachSubComponents('Header', ({ children }) => {
     const [leading, trailing, content] = separateChildrenByType(children, Leading, Trailing);
     return (_jsxs(_Fragment, { children: [leading, _jsx(AccordionSectionText, { children: content }), trailing] }));

package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.d.ts

@@ -7,7 +7,10 @@ export declare const AccordionSectionWrapper: import("styled-components/dist/typ
     $variant: AccordionVariant | 'inline' | 'full-page';
     $isOpen: boolean;
 }>> & string;
-export declare const ButtonElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ButtonElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $variant?: AccordionVariant | "inline" | "full-page" | undefined;
+    $isOpen?: boolean | undefined;
+}>> & string;
 export declare const AccordionSectionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type AccordionSectionContentProps = {
     $isOpen: boolean;

package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/AccordionSection/elements.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AASnE,eAAO,MAAM,gBAAgB;cACjB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;YAepD,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;aAC1C,OAAO;YAajB,CAAC;AAEF,eAAO,MAAM,aAAa,yOAuBzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAQhC,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,aAAa;aACf,OAAO;yBACK,MAAM;+BACA,MAAM;YAQlC,CAAC;AAmBF,eAAO,MAAM,8BAA8B;aAChC,OAAO;yBACK,MAAM;+BACA,MAAM;YAWlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iQASnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;YAajC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;mBAE5B,CAAC;AAEF,eAAO,MAAM,YAAY;iBACV,OAAO;2IAMrB,CAAC"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/AccordionSection/elements.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAUnE,eAAO,MAAM,gBAAgB;cACjB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;YAepD,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;aAC1C,OAAO;YAYjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;YAmCzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAShC,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,aAAa;aACf,OAAO;yBACK,MAAM;+BACA,MAAM;YAQlC,CAAC;AAmBF,eAAO,MAAM,8BAA8B;aAChC,OAAO;yBACK,MAAM;+BACA,MAAM;YAWlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iQASnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;YAejC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;mBAE5B,CAAC;AAEF,eAAO,MAAM,YAAY;iBACV,OAAO;2IAMrB,CAAC"}

package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.js

@@ -1,6 +1,7 @@
 import { styled, css } from 'styled-components';
 import { Icon } from '../../Icon';
 import { StateLayer } from '../../../core-components';
+import { tokens } from '../../../utils/designTokens';
 const Divider = styled.hr `
   border: none;
   border-top: 1px solid;
@@ -14,18 +15,17 @@ export const AccordionElement = styled.div `
   flex-direction: column;
   ${({ $variant }) => $variant === 'inline' &&
     css `
-      border: 1px solid var(--outline);
-      border-radius: var(--border-radius-100);
+      border: 1px solid ${tokens.outline};
+      border-radius: ${tokens.borderRadius100};
     `};
   overflow: hidden;
   width: 100%;
-  color: var(--on-surface);
+  color: ${tokens.onSurface};
 `;
 export const AccordionSectionWrapper = styled.div `
   overflow: hidden;
   width: 100%;
   isolation: isolate;
-
   ${({ $variant }) => $variant === 'inline' &&
     css `
       &:last-child ${AccordionDivider} {
@@ -35,44 +35,53 @@ export const AccordionSectionWrapper = styled.div `
 `;
 export const ButtonElement = styled.button `
   all: unset;
+  box-sizing: border-box;
 
   z-index: 1;
   position: relative;
   cursor: pointer;
   width: 100%;
-  box-sizing: border-box;
 
-  background-color: var(--surface);
+  background-color: ${tokens.surface};
 
   display: flex;
-  gap: var(--spacing-100);
+  gap: ${tokens.spacing100};
   align-items: center;
-  padding: var(--spacing-200);
+  padding-top: ${tokens.spacing200};
+  padding-right: ${tokens.spacing200};
+  padding-bottom: ${tokens.spacing200};
+  padding-left: ${tokens.spacing200};
+
+  ${({ $variant }) => $variant === 'inline' &&
+    css `
+      border-radius: ${tokens.borderRadius100};
+    `}
 
   &:hover:not(:disabled) ${StateLayer} {
-    opacity: var(--state-layer-hover);
+    opacity: ${tokens.stateLayerHover};
   }
 
   &:active:not(:disabled) ${StateLayer} {
-    opacity: var(--state-layer-press);
+    opacity: ${tokens.stateLayerPress};
   }
 `;
 export const AccordionSectionText = styled.div `
   line-height: 1.3;
   flex-grow: 1;
-  padding-right: var(--spacing-100);
-
+  padding-right: ${tokens.spacing100};
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-050);
+  gap: ${tokens.spacing050};
 `;
 export const AccordionFade = styled.div `
   z-index: 0;
   position: relative;
-  background: linear-gradient(to bottom, transparent, var(--surface));
+  background: linear-gradient(to bottom, transparent, ${tokens.surface});
   width: 100%;
-  height: var(--spacing-150);
-  margin-top: calc(var(--spacing-150) * -1);
+  height: ${tokens.spacing150};
+  margin-top: calc(${tokens.spacing150} * -1);
 `;
 const getTransitionTimingFunction = (transitionTimingFunction, isOpen) => {
     if (transitionTimingFunction !== 'ease-in' &&
@@ -96,14 +105,16 @@ export const AccordionSectionContent = styled.div `
   transition: ${({ $transitionDuration }) => `opacity ${$transitionDuration} linear`};
   line-height: 1.3;
   opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
-  padding-right: var(--spacing-150);
-  padding-left: ${({ $hasLeader }) => $hasLeader ? 'var(--spacing-600)' : 'var(--spacing-200)'};
+  padding-right: ${tokens.spacing150};
+  padding-left: ${({ $hasLeader }) => $hasLeader ? tokens.spacing600 : tokens.spacing200};
 `;
 export const StyledLeadingTrailing = styled.div `
   flex-shrink: 0;
-  min-width: var(--spacing-300);
+  min-width: ${tokens.spacing300};
   display: flex;
   align-self: ${({ alignment }) => alignment === 'center' ? 'center' : 'flex-start'};
+  position: relative;
+  z-index: 1;
 
   img,
   picture {
@@ -111,7 +122,7 @@ export const StyledLeadingTrailing = styled.div `
   }
 `;
 export const AccordionDivider = styled(Divider) `
-  border-color: var(--outline);
+  border-color: ${tokens.outline};
 `;
 export const RotatingIcon = styled(Icon.SSR) `
   overflow: hidden;

package/lib/src/core-components/src/components/AutoComplete/autocomplete/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/autocomplete/autocomplete.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/autocomplete/autocomplete.tsx"],"names":[],"mappings":"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"}

package/lib/src/core-components/src/components/AutoComplete/autocomplete/autocomplete.js

@@ -32,27 +32,43 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
             (typeof opt === 'string' ? opt : opt.label) === value);
         return index !== -1 ? index : 0;
     });
+    // Initialize filtered options - will be updated by useEffect
     const [filteredOptions, setFilteredOptions] = useState(options);
     const [shouldShowList, setShouldShowList] = useState(false);
     const [searchValue, setSearchValue] = useState(value);
     const inputRef = useRef(null);
     const listRef = useRef(null);
+    const wrapperRef = useRef(null);
+    // Track if user is actively typing to prevent value prop from overwriting input
+    const isTypingRef = useRef(false);
+    const typingTimeoutRef = useRef(null);
     // Filter function
     const filterOptions = useCallback((searchValue) => {
         if (!filterEnabled)
             return options;
-        if (searchValue.length < minCharacters)
+        // If search is empty and minCharacters is 0, show all options
+        if (searchValue.length === 0 && minCharacters === 0)
             return options;
+        // If search length is less than minCharacters, return empty array or all options
+        if (searchValue.length < minCharacters) {
+            return minCharacters === 0 ? options : [];
+        }
+        // Use custom filter function if provided
         if (filterFn) {
             return options.filter((option) => filterFn(option, searchValue));
         }
+        // Default filtering: case-insensitive substring match
         const lowerSearch = caseSensitive
-            ? searchValue
-            : searchValue.toLowerCase();
+            ? searchValue.trim()
+            : searchValue.trim().toLowerCase();
+        if (lowerSearch.length === 0)
+            return options;
         return options.filter((option) => {
             const label = getOptionLabel(option);
-            const matchText = caseSensitive ? label : label.toLowerCase();
-            return matchText.indexOf(lowerSearch) > -1;
+            const matchText = caseSensitive
+                ? label.trim()
+                : label.trim().toLowerCase();
+            return matchText.includes(lowerSearch);
         });
     }, [
         options,
@@ -64,21 +80,34 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
     ]);
     const onInputChange = useCallback((event) => {
         const input = event.target.value;
+        // Mark that user is typing
+        isTypingRef.current = true;
+        // Clear existing timeout
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        // Reset typing flag after user stops typing (300ms)
+        typingTimeoutRef.current = setTimeout(() => {
+            isTypingRef.current = false;
+        }, 300);
         // Call onInputValueChange callback
         if (onInputValueChange) {
             onInputValueChange(input);
         }
+        // Update search value immediately for responsive UI
+        setSearchValue(input);
         // Filter options
         const filtered = filterOptions(input);
         setFilteredOptions(filtered);
-        setActiveOption(0);
-        setShouldShowList(true);
-        setSearchValue(input);
-        // Auto-select first option if enabled
-        if (autoSelectFirst && filtered.length > 0) {
-            onValueChange(filtered[0]);
+        // Reset active option to first item or 0
+        setActiveOption(filtered.length > 0 ? 0 : 0);
+        // Show list if there are filtered options or if input is not empty
+        if (filtered.length > 0 || input.length > 0) {
+            setShouldShowList(true);
         }
-    }, [filterOptions, onInputValueChange, onValueChange, autoSelectFirst]);
+        // Don't auto-select when user is typing - only update the input value
+        // Auto-select should only happen on initial load or when dropdown opens
+    }, [filterOptions, onInputValueChange]);
     const handleOptionSelect = useCallback((option, index) => {
         const label = getOptionLabel(option);
         setShouldShowList(false);
@@ -183,24 +212,56 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
     ]);
     const handleInputFocus = useCallback(() => {
         if (showOnFocus && !shouldShowList) {
+            // Update filtered options when opening
+            const filtered = filterOptions(searchValue);
+            setFilteredOptions(filtered);
             setShouldShowList(true);
             if (onOpen) {
                 onOpen();
             }
         }
-    }, [showOnFocus, shouldShowList, onOpen]);
+    }, [showOnFocus, shouldShowList, onOpen, filterOptions, searchValue]);
     const handleInputClick = useCallback(() => {
         if (showOnClick && !shouldShowList) {
+            // Update filtered options when opening
+            const filtered = filterOptions(searchValue);
+            setFilteredOptions(filtered);
+            setShouldShowList(true);
+            if (onOpen) {
+                onOpen();
+            }
+        }
+    }, [showOnClick, shouldShowList, onOpen, filterOptions, searchValue]);
+    const handleIconClick = useCallback(() => {
+        if (disabled)
+            return;
+        if (shouldShowList) {
+            // Close dropdown
+            setShouldShowList(false);
+            if (onClose) {
+                onClose();
+            }
+        }
+        else {
+            // Open dropdown
+            const filtered = filterOptions(searchValue);
+            setFilteredOptions(filtered);
             setShouldShowList(true);
+            // Focus input when opening via icon
+            inputRef.current?.focus();
             if (onOpen) {
                 onOpen();
             }
         }
-    }, [showOnClick, shouldShowList, onOpen]);
+    }, [disabled, shouldShowList, onOpen, onClose, filterOptions, searchValue]);
     const renderList = () => {
         if (!shouldShowList)
             return null;
-        return (_jsxs("div", { className: cn(s['absolute'], s['w-full'], s['mt-1'], s['rounded-lg'], s['bg-white'], s['border'], s['border-gray-200'], s['shadow-lg'], s['overflow-hidden'], 'animate-fade-in'), style: {
+        return (_jsxs("div", { className: cn(s['absolute'], s['w-full'], s['mt-1'], s['rounded-lg'], s['bg-white'], s['border'], s['border-gray-200'], s['shadow-lg'], s['overflow-hidden'], s['left-0']), style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
                 zIndex,
                 animation: 'fadeIn 0.15s ease-out',
                 transformOrigin: 'top',
@@ -220,30 +281,63 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
                         scrollbarWidth: 'thin',
                     }, children: filteredOptions.map((option, index) => {
                         const isActive = highlightActive && index === activeOption;
-                        let itemClassName = cn(s['flex'], s['items-center'], s['px-4'], s['py-3'], s['cursor-pointer'], s['text-sm'], s['transition-all'], s['duration-150'], s['ease-in-out'], optionClassName, 'hover:bg-blue-50', 'hover:text-blue-700');
+                        let itemClassName = cn(s['flex'], s['items-center'], s['px-4'], s['py-3'], s['cursor-pointer'], s['text-sm'], s['transition-all'], s['duration-150'], s['ease-in-out'], optionClassName);
                         if (isActive && highlightActive) {
-                            itemClassName = cn(itemClassName, s['bg-blue-50'], s['text-blue-700'], s['font-medium'], 'border-l-4', 'border-blue-500', activeOptionClassName);
+                            itemClassName = cn(itemClassName, s['bg-blue-50'], s['text-blue-700'], s['font-medium'], activeOptionClassName);
                         }
                         return (_jsx("li", { className: itemClassName, role: "option", "aria-selected": isActive, id: `autocomplete-option-${index}`, "data-index": index, onClick: onOptionClick, onMouseEnter: () => setActiveOption(index), style: {
-                                transition: 'background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease',
-                            }, children: renderOption ? (renderOption(option, index, isActive)) : (_jsx("span", { className: cn(s['text-gray-700'], s['select-none']), children: getOptionLabel(option) })) }, index));
+                                transition: 'background-color 0.15s ease, color 0.15s ease',
+                                backgroundColor: isActive && highlightActive
+                                    ? 'rgb(239, 246, 255)'
+                                    : 'transparent',
+                                color: isActive && highlightActive
+                                    ? 'rgb(29, 78, 216)'
+                                    : 'rgb(55, 65, 81)',
+                            }, onMouseOver: (e) => {
+                                if (!isActive) {
+                                    e.currentTarget.style.backgroundColor =
+                                        'rgb(239, 246, 255)';
+                                    e.currentTarget.style.color = 'rgb(29, 78, 216)';
+                                }
+                            }, onMouseOut: (e) => {
+                                if (!isActive) {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                    e.currentTarget.style.color = 'rgb(55, 65, 81)';
+                                }
+                            }, children: renderOption ? (renderOption(option, index, isActive)) : (_jsx("span", { className: cn(s['select-none']), children: getOptionLabel(option) })) }, index));
                     }) })) : (_jsx("div", { className: cn(s['flex'], s['flex-col'], s['items-center'], s['justify-center'], s['py-8'], s['px-4'], s['text-center']), children: renderEmptyState ? (renderEmptyState()) : (_jsxs(_Fragment, { children: [_jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
                                     size: 32,
                                     color: '#9ca3af',
                                 } }), _jsx("p", { className: cn(s['mt-3'], s['text-sm'], s['font-medium'], s['text-gray-500']), children: emptyStateMessage }), _jsx("p", { className: cn(s['mt-1'], s['text-xs'], s['text-gray-400']), children: "Try adjusting your search" })] })) }))] }));
     };
-    // Update filtered options when options change
+    // Update filtered options when options or search value changes
     useEffect(() => {
         const filtered = filterOptions(searchValue);
         setFilteredOptions(filtered);
-        // Update active option if current value is not in filtered options
+        // Update active option if current value is in filtered options
         if (filtered.length > 0) {
             const currentIndex = filtered.findIndex((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
-            if (currentIndex !== -1 && currentIndex !== activeOption) {
+            if (currentIndex !== -1) {
                 setActiveOption(currentIndex);
             }
+            else if (activeOption >= filtered.length) {
+                // Reset to first option if current active is out of bounds
+                setActiveOption(0);
+            }
+        }
+        else if (filtered.length === 0 && searchValue.length === 0) {
+            // If no search and no filtered results, reset active option
+            setActiveOption(0);
         }
-    }, [options, searchValue, filterOptions, value, activeOption]);
+    }, [
+        options,
+        searchValue,
+        filterOptions,
+        value,
+        activeOption,
+        getOptionValue,
+        getOptionLabel,
+    ]);
     // Auto-focus and auto-select first option on mount
     useEffect(() => {
         if (autoFocus) {
@@ -256,41 +350,86 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
             onValueChange(filteredOptions[0]);
         }
     }, [autoFocus, autoSelectFirst, filteredOptions, value, onValueChange]);
-    // Update search value when value prop changes
+    // Update search value when value prop changes (but not when user is actively typing)
     useEffect(() => {
+        // Don't sync if user is currently typing
+        if (isTypingRef.current) {
+            return;
+        }
+        // Only sync if value prop changed and doesn't match current search
         if (value !== searchValue) {
             const matchingOption = options.find((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
             if (matchingOption) {
                 setSearchValue(getOptionLabel(matchingOption));
             }
-            else {
+            else if (value) {
                 setSearchValue(value);
             }
         }
-    }, [value, options, searchValue]);
-    return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['relative'], s['w-full'], className), style: style, children: [_jsx("div", { className: cn(s['flex'], s['items-center'], s['relative'], s['w-full'], s['bg-white'], s['border'], s['rounded-lg'], s['shadow-sm'], s['transition-all'], s['duration-200'], s['ease-in-out'], {
+    }, [value, options, searchValue, getOptionValue, getOptionLabel]);
+    // Handle click outside to close dropdown
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (wrapperRef.current &&
+                !wrapperRef.current.contains(event.target) &&
+                shouldShowList) {
+                setShouldShowList(false);
+                if (onClose) {
+                    onClose();
+                }
+            }
+        }
+        if (shouldShowList) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [shouldShowList, onClose]);
+    // Cleanup typing timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
+        };
+    }, []);
+    return (_jsxs("div", { ref: wrapperRef, className: cn(s['flex'], s['flex-col'], s['relative'], s['w-full'], className), style: style, children: [_jsx("div", { className: cn(s['flex'], s['items-center'], s['relative'], s['w-full'], s['bg-white'], s['border'], s['rounded-lg'], s['shadow-sm'], s['transition-all'], s['duration-200'], s['ease-in-out'], s['overflow-hidden'], {
                     [s['border-red-500']]: hasError,
                     [s['border-gray-300']]: !hasError && !shouldShowList,
-                    'border-blue-500': !hasError && shouldShowList,
-                    'ring-2': !hasError && shouldShowList,
-                    'ring-blue-200': !hasError && shouldShowList,
+                    [s['border-blue-500']]: !hasError && shouldShowList,
+                    [s['ring-2']]: !hasError && shouldShowList,
+                    [s['ring-blue-200']]: !hasError && shouldShowList,
                     [s['opacity-50']]: disabled,
                     [s['cursor-not-allowed']]: disabled,
-                    'hover:border-gray-400': !hasError && !disabled && !shouldShowList,
                 }), style: {
                     boxShadow: shouldShowList && !hasError
                         ? '0 0 0 3px rgba(59, 130, 246, 0.1)'
                         : '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                }, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['px-3'], s['py-2']), children: [_jsx("div", { className: cn(s['mr-2'], s['flex-shrink-0']), children: _jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
+                    overflow: 'hidden',
+                }, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['w-full'], s['relative']), style: {
+                        padding: '0.5rem 0.75rem',
+                        minWidth: 0,
+                    }, children: [_jsx("div", { className: cn(s['mr-2'], s['flex-shrink-0']), style: { display: 'flex', alignItems: 'center' }, children: _jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
                                     size: 18,
                                     color: shouldShowList ? '#3b82f6' : '#9ca3af',
                                 } }) }), _jsx("input", { type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": shouldShowList, "aria-controls": "autocomplete-list", "aria-activedescendant": shouldShowList && activeOption >= 0
                                 ? `autocomplete-option-${activeOption}`
-                                : undefined, name: name || 'autocomplete-input', className: cn(s['flex'], s['flex-1'], s['w-full'], s['bg-transparent'], s['text-sm'], s['text-gray-700'], s['placeholder-gray-400'], s['focus:outline-none'], s['border-none'], s['focus:ring-0'], inputClassName), placeholder: placeholder, onChange: onInputChange, onKeyDown: onKeyDown, onFocus: handleInputFocus, onClick: handleInputClick, value: searchValue, ref: inputRef, disabled: disabled, autoComplete: "off", style: {
+                                : undefined, name: name || 'autocomplete-input', className: cn(s['flex-1'], s['bg-transparent'], s['text-sm'], s['text-gray-700'], s['placeholder-gray-400'], s['focus:outline-none'], s['border-none'], s['focus:ring-0'], inputClassName), placeholder: placeholder, onChange: onInputChange, onKeyDown: onKeyDown, onFocus: handleInputFocus, onClick: handleInputClick, value: searchValue, ref: inputRef, disabled: disabled, autoComplete: "off", style: {
                                 cursor: disabled ? 'not-allowed' : 'text',
-                            } }), _jsx("div", { className: cn(s['ml-2'], s['flex-shrink-0']), style: { transition: 'transform 0.2s ease' }, children: shouldShowList ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                minWidth: 0,
+                                flex: '1 1 0%',
+                                width: 0,
+                            } }), _jsx("div", { className: cn(s['flex-shrink-0'], s['flex'], s['items-center'], s['justify-center'], s['cursor-pointer']), onClick: handleIconClick, style: {
+                                marginLeft: '0.5rem',
+                                transition: 'transform 0.2s ease',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                cursor: disabled ? 'not-allowed' : 'pointer',
+                            }, children: shouldShowList ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
                                     size: 16,
-                                    color: '#3b82f6',
+                                    color: disabled ? '#9ca3af' : '#3b82f6',
                                 } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
                                     size: 16,
                                     color: '#9ca3af',

package/lib/src/core-components/src/core-components/StateLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StateLayer.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/src/core-components/StateLayer.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,UAAU,6NAUtB,CAAC"}
+{"version":3,"file":"StateLayer.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/src/core-components/StateLayer.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,UAAU,6NAUtB,CAAC"}

package/lib/src/core-components/src/core-components/StateLayer.js

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+import { tokens } from '../utils/designTokens';
 export const StateLayer = styled.div `
   position: absolute;
   top: 0;
@@ -6,7 +7,7 @@ export const StateLayer = styled.div `
   bottom: 0;
   left: 0;
   pointer-events: none;
-  z-index: 1;
+  z-index: 0;
   background: currentColor;
-  opacity: var(--state-layer-none);
+  opacity: ${tokens.stateLayerNone};
 `;

package/lib/src/core-components/src/index.css

@@ -1,4 +1,3 @@
-@import './assets/css/tokens.css';
 /* Import global CSS variables first (colors, theme) */
 @import './tc.global.css';
 @tailwind base;

package/lib/src/core-components/src/index.d.ts

@@ -1,3 +1,2 @@
-import "./assets/css/tokens.css";
 import './index.css';
 //# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core-components/src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,CAAC;AACjC,OAAO,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core-components/src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,aAAa,CAAC"}

package/lib/src/core-components/src/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import "./assets/css/tokens.css";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';