@app-studio/web 0.8.81 → 0.8.82

package/dist/components/Gradient/Gradient/Gradient.style.d.ts

@@ -27,50 +27,51 @@ export declare const DefaultColorStops: Record<GradientType, ColorStop[]>;
  */
 export declare const generateGradientString: (type: GradientType, colors: ColorStop[], direction?: string | undefined, shape?: "circle" | "ellipse" | undefined, position?: string | undefined) => string;
 /**
- * Animation keyframes for animated gradients
+ * Animation styles for animated gradients using app-studio's animation system
  */
 export declare const GradientAnimations: {
     linear: {
-        '@keyframes gradient-animation': {
-            '0%': {
+        backgroundSize: string;
+        transition: string;
+        animate: {
+            from: {
                 backgroundPosition: string;
             };
             '50%': {
                 backgroundPosition: string;
             };
-            '100%': {
+            to: {
                 backgroundPosition: string;
             };
         };
-        animation: string;
-        backgroundSize: string;
     };
     radial: {
-        '@keyframes gradient-animation': {
-            '0%': {
+        backgroundSize: string;
+        transition: string;
+        animate: {
+            from: {
                 backgroundPosition: string;
+                backgroundSize: string;
             };
             '50%': {
                 backgroundSize: string;
             };
-            '100%': {
+            to: {
                 backgroundPosition: string;
                 backgroundSize: string;
             };
         };
-        animation: string;
-        backgroundSize: string;
     };
     conic: {
-        '@keyframes gradient-animation': {
-            '0%': {
+        transition: string;
+        animate: {
+            from: {
                 transform: string;
             };
-            '100%': {
+            to: {
                 transform: string;
             };
         };
-        animation: string;
     };
 };
 /**

package/dist/components/OTPInput/OTPInput/OTPInput.props.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputProps, Shadow, ViewProps } from 'app-studio';
 import { Elevation } from '../../../utils/elevation';
 import { Shape, Size, Variant } from '../../Input/Input.type';
@@ -67,6 +68,8 @@ export interface OTPInputProps extends Omit<InputProps, 'size'> {
      * Callback when an input field loses focus
      */
     onBlur?: (value: any) => void;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
      * Callback when an input field is clicked
      */

package/dist/components/OTPInput/OTPInput/OTPInput.state.d.ts

@@ -1,6 +1,6 @@
 import { ClipboardEvent, KeyboardEvent, ChangeEvent } from 'react';
 import { OTPInputProps } from './OTPInput.props';
-export declare const useOTPInputState: ({ value: controlledValue, defaultValue, length, onChange, onChangeText, onComplete, pattern, stepValues, pasteTransformer, }: OTPInputProps) => {
+export declare const useOTPInputState: ({ value: controlledValue, defaultValue, length, onChange, onChangeText, onComplete, onKeyDown, onKeyPress, onBlur, onFocus, isReadOnly, isDisabled, pattern, stepValues, pasteTransformer, }: OTPInputProps) => {
     value: string;
     setValue: (newValue: string) => void;
     isFocused: boolean;
@@ -18,5 +18,6 @@ export declare const useOTPInputState: ({ value: controlledValue, defaultValue,
     handleFocus: () => void;
     handleBlur: () => void;
     handleKeyDown: (_: KeyboardEvent<HTMLInputElement>) => void;
+    handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => void;
     handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
 };

package/dist/components/OTPInput/OTPInput/OTPInput.view.d.ts

@@ -24,5 +24,6 @@ declare const OTPInputView: React.FC<OTPInputViewProps & {
     handleBlur: () => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     stepValues?: number[];
+    handleKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }>;
 export default OTPInputView;

package/dist/components/Sidebar/Sidebar/Sidebar.view.d.ts

@@ -17,5 +17,5 @@ interface SideBarNavItemProps {
     ariaLabel?: string;
     badge?: number;
 }
-export declare const SideBarNavItem: ({ icon, label, isActive, badge, views, ...props }: SideBarNavItemProps & any) => React.JSX.Element;
+export declare const SideBarNavItem: ({ icon, label, isActive, badge, views, ariaLabel, ...props }: SideBarNavItemProps & any) => React.JSX.Element;
 export {};

package/dist/web.cjs.development.js

@@ -34,6 +34,7 @@ require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
 require('core-js/modules/es.array.flat-map.js');
 require('core-js/modules/es.array.unscopables.flat-map.js');
+require('core-js/modules/es.string.trim.js');
 
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
@@ -3764,7 +3765,9 @@ var ButtonView = _ref => {
   var hovering = isHovered && effect === 'hover';
   var reverse = isHovered && effect === 'reverse';
   // Determine if the button color is light or dark for proper contrast
-  var isLight = contrast(getColor(buttonColor, elementMode ? elementMode : themeMode)) == 'light';
+  var buttonMode = elementMode ? elementMode : themeMode;
+  var reverseMode = reverse && buttonMode == 'light' ? 'dark' : "light"; // Slightly darker
+  var isLight = contrast(getColor(buttonColor, buttonMode)) == 'light';
   // Define button variants with effect support
   var ButtonVariants = {
     filled: {
@@ -3774,12 +3777,12 @@ var ButtonView = _ref => {
       borderStyle: 'solid',
       borderColor: reverse ? buttonColor : 'transparent',
       _hover: {
-        backgroundColor: reverse ? buttonColor + "10" : "" + buttonColor,
-        transform: 'translateY(-2px)',
+        themeMode: reverse && buttonMode == 'light' ? 'light' : "dark",
+        transform: 'translateY(-1px)',
         boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
       },
       _active: {
-        backgroundColor: reverse ? buttonColor + "20" : "" + buttonColor,
+        themeMode: reverse && buttonMode == 'light' ? 'light' : "dark",
         transform: 'translateY(0)',
         boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
       }
@@ -3791,12 +3794,12 @@ var ButtonView = _ref => {
       borderColor: reverse ? buttonColor : colorScheme,
       color: reverse ? 'white' : buttonColor,
       _hover: {
-        backgroundColor: reverse ? "" + buttonColor : buttonColor + "10",
-        transform: 'translateY(-2px)',
+        themeMode: reverse ? reverseMode : buttonMode,
+        transform: 'translateY(-1px)',
         boxShadow: '0 4px 8px rgba(0, 0, 0, 0.05)'
       },
       _active: {
-        backgroundColor: reverse ? buttonColor + "b0" : buttonColor + "20",
+        themeMode: reverse ? reverseMode : buttonMode,
         transform: 'translateY(0)',
         boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
       }
@@ -3824,11 +3827,11 @@ var ButtonView = _ref => {
       borderStyle: 'none',
       borderColor: 'transparent',
       _hover: {
-        backgroundColor: reverse ? "" + buttonColor : buttonColor + "10",
-        transform: 'translateY(-2px)'
+        themeMode: reverse ? reverseMode : buttonMode,
+        transform: 'translateY(-1px)'
       },
       _active: {
-        backgroundColor: reverse ? buttonColor + "b0" : buttonColor + "20",
+        themeMode: reverse ? reverseMode : buttonMode,
         transform: 'translateY(0)'
       }
     }
@@ -4439,7 +4442,7 @@ var _excluded$c = ["children", "isActive", "views"],
   _excluded3$5 = ["views", "children"],
   _excluded4$4 = ["children", "views"],
   _excluded5$1 = ["children", "views", "style"],
-  _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "themeMode"];
+  _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "stepIndices", "themeMode"];
 var CarouselSlide = _ref => {
   var {
       children,
@@ -6332,17 +6335,6 @@ var InputVariants = {
     _focus: {
       borderColor: 'theme.primary',
       boxShadow: '0 0 0 1px rgba(66, 153, 225, 0.2)'
-    },
-    '@media (prefers-color-scheme: dark)': {
-      backgroundColor: 'color.gray.800',
-      borderColor: 'color.gray.700',
-      _hover: {
-        borderColor: 'color.gray.600'
-      },
-      _focus: {
-        borderColor: 'theme.primary',
-        boxShadow: '0 0 0 1px rgba(66, 153, 225, 0.4)'
-      }
     }
   },
   default: {
@@ -6358,16 +6350,6 @@ var InputVariants = {
     },
     _focus: {
       borderBottomColor: 'theme.primary'
-    },
-    '@media (prefers-color-scheme: dark)': {
-      backgroundColor: 'color.gray.800',
-      borderBottomColor: 'color.gray.700',
-      _hover: {
-        borderBottomColor: 'color.gray.600'
-      },
-      _focus: {
-        borderBottomColor: 'theme.primary'
-      }
     }
   },
   none: {
@@ -6499,7 +6481,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size", "dropDown"];
 var LabelView = _ref => {
   var {
       children,
@@ -6709,11 +6691,7 @@ var SelectBox = _ref2 => {
     // State properties
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     // Animation
-    transition: 'all 0.2s ease',
-    // Dark mode support
-    '@media (prefers-color-scheme: dark)': {
-      color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-    }
+    transition: 'all 0.2s ease'
   }, views['field'], views['text']);
   var option = options.length > 0 && options.find(option => option.value === value);
   return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
@@ -6772,9 +6750,7 @@ var HiddenSelect = _ref4 => {
 var DropDown = _ref5 => {
   var {
     size,
-    views = {
-      dropDown: {}
-    },
+    views = {},
     options,
     callback = () => {},
     highlightedIndex,
@@ -6824,7 +6800,7 @@ var DropDown = _ref5 => {
         borderRadius: '4px'
       }
     }
-  }, shadow, views['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+  }, shadow, views == null ? void 0 : views.dropDown), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
     key: option.value,
     size: size,
     style: views['text'],
@@ -7134,7 +7110,7 @@ var ColorSchemes = {
   }
 };
 
-var _excluded$p = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
+var _excluded$p = ["id", "name", "label", "inActiveChild", "isChecked", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
 var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -7541,11 +7517,7 @@ var TextFieldView = _ref => {
     // State properties
     cursor: isDisabled ? 'not-allowed' : 'text',
     // Animation
-    transition: 'all 0.2s ease',
-    // Dark mode support
-    '@media (prefers-color-scheme: dark)': {
-      color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-    }
+    transition: 'all 0.2s ease'
   }, views['field']);
   var handleFocus = () => {
     setIsFocused(true);
@@ -9526,8 +9498,8 @@ var CountryPickerView = _ref5 => {
   var showLabel = !!(label && (isFocused || value));
   var fieldStyles = Object.assign({
     margin: 0,
-    paddingVerical: 8,
-    paddingHorizonatl: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
     width: '100%',
     heigth: '100%',
     border: 'none',
@@ -9991,6 +9963,12 @@ var useOTPInputState = _ref => {
     onChange,
     onChangeText,
     onComplete,
+    onKeyDown,
+    onKeyPress,
+    onBlur,
+    onFocus,
+    isReadOnly,
+    isDisabled,
     pattern,
     stepValues,
     pasteTransformer
@@ -10104,6 +10082,16 @@ var useOTPInputState = _ref => {
   var handleKeyDown = React.useCallback(_ => {
     // Handle special keys like backspace, arrows, etc.
     // This is handled by the browser for the single input
+    if (onKeyDown) {
+      onKeyDown(_);
+    }
+  }, []);
+  var handleKeyPress = React.useCallback(e => {
+    // Handle key press events
+    // This is handled by the browser for the single input
+    if (onKeyPress) {
+      onKeyPress(e);
+    }
   }, []);
   var handlePaste = React.useCallback(e => {
     var input = inputRef.current;
@@ -10260,11 +10248,12 @@ var useOTPInputState = _ref => {
     handleFocus,
     handleBlur,
     handleKeyDown,
+    handleKeyPress,
     handlePaste
   };
 };
 
-var _excluded$y = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
+var _excluded$y = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
 // Create a context for OTP input slots
 var OTPInputContext = /*#__PURE__*/React.createContext({
   slots: [],
@@ -10272,7 +10261,7 @@ var OTPInputContext = /*#__PURE__*/React.createContext({
   isHovering: false
 });
 // CSS for noscript fallback
-var NOSCRIPT_CSS_FALLBACK = "\n@keyframes blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n  [data-input-otp] {\n    --nojs-bg: black !important;\n    --nojs-fg: white !important;\n  }\n}";
+var NOSCRIPT_CSS_FALLBACK = "\n@keyframes blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n";
 // Helper function to safely insert CSS rules
 function safeInsertRule(sheet, rule) {
   try {
@@ -10520,7 +10509,8 @@ var OTPInputComponent = props => {
     handleFocus,
     handleBlur,
     handleKeyDown,
-    handlePaste
+    handlePaste,
+    handleKeyPress
   } = useOTPInputState(props);
   // Use the controlled value if it exists, otherwise use the internal state value
   var displayValue = controlledValue !== undefined ? controlledValue : value;
@@ -10542,6 +10532,7 @@ var OTPInputComponent = props => {
     handleFocus: handleFocus,
     handleBlur: handleBlur,
     handleKeyDown: handleKeyDown,
+    handleKeyPress: handleKeyPress,
     handlePaste: handlePaste,
     stepValues: props.stepValues
   }));
@@ -11959,12 +11950,12 @@ var UploadView = _ref => {
   } = _ref;
   var finalPreviewUrl = externalPreviewUrl || previewUrl;
   // Debug log to help troubleshoot
-  console.log('Uploader state:', {
-    fileType,
-    finalPreviewUrl,
-    selectedFile: selectedFile == null ? void 0 : selectedFile.name,
-    progress
-  });
+  // console.log('Uploader state:', {
+  //   fileType,
+  //   finalPreviewUrl,
+  //   selectedFile: selectedFile?.name,
+  //   progress,
+  // });
   return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
     onClick: handleClick,
     cursor: "pointer",
@@ -12215,7 +12206,7 @@ var ModalTypography = {
 };
 
 var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views"],
+  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
   _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
   _excluded5$3 = ["children", "views"];
@@ -13101,7 +13092,9 @@ var useTabsState = (propTabs, initialTabValue) => {
         return foundTab;
       }
       // Warn if initialTabValue is provided but not found
-      console.warn("Tabs: initialTabValue \"" + initialTabValue + "\" not found in tabs. Defaulting to the first tab.");
+      // console.warn(
+      //   `Tabs: initialTabValue "${initialTabValue}" not found in tabs. Defaulting to the first tab.`
+      // );
     }
     return propTabs[0]; // Default to the first tab
   };
@@ -16009,7 +16002,7 @@ var HandleIconStyles = {
 
 var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
   _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
-  _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "views"];
+  _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/React.createContext({
   orientation: 'horizontal',
@@ -16805,6 +16798,16 @@ var Toast = /*#__PURE__*/Object.assign(ToastComponent, {
 // Export the hook for component usage
 var useToast$1 = useToast;
 
+// Default filter function defined outside the hook to avoid recreating it on each render
+var defaultFilterFn = (value, item) => {
+  var _item$description, _item$keywords;
+  if (!value) return true;
+  var searchValue = value.toLowerCase();
+  var matchesName = item.name.toLowerCase().includes(searchValue);
+  var matchesDescription = ((_item$description = item.description) == null ? void 0 : _item$description.toLowerCase().includes(searchValue)) || false;
+  var matchesKeywords = ((_item$keywords = item.keywords) == null ? void 0 : _item$keywords.some(keyword => keyword.toLowerCase().includes(searchValue))) || false;
+  return matchesName || matchesDescription || matchesKeywords;
+};
 var useCommandState = _ref => {
   var {
     open,
@@ -16813,46 +16816,36 @@ var useCommandState = _ref => {
     commands = [],
     filter
   } = _ref;
-  // Combine commands from groups and flat list
-  var allCommands = React.useCallback(() => {
-    var groupCommands = groups.flatMap(group => group.commands);
-    return [...groupCommands, ...commands];
-  }, [groups, commands]);
   // State for search input
   var [search, setSearch] = React.useState('');
   // State for selected item index
   var [selectedIndex, setSelectedIndex] = React.useState(0);
   // Ref for the command list element
   var listRef = React.useRef(null);
-  // Default filter function
-  var defaultFilter = (value, item) => {
-    var _item$description, _item$keywords;
-    if (!value) return true;
-    var searchValue = value.toLowerCase();
-    var matchesName = item.name.toLowerCase().includes(searchValue);
-    var matchesDescription = ((_item$description = item.description) == null ? void 0 : _item$description.toLowerCase().includes(searchValue)) || false;
-    var matchesKeywords = ((_item$keywords = item.keywords) == null ? void 0 : _item$keywords.some(keyword => keyword.toLowerCase().includes(searchValue))) || false;
-    return matchesName || matchesDescription || matchesKeywords;
-  };
-  // Filter commands based on search
-  var filterCommands = React.useCallback(searchValue => {
-    var filterFn = filter || defaultFilter;
-    return allCommands().filter(item => filterFn(searchValue, item));
-  }, [allCommands, filter, defaultFilter]);
-  // Filtered commands based on search
-  var [filteredCommands, setFilteredCommands] = React.useState(allCommands());
-  // Filtered groups based on search
-  var filteredGroups = React.useCallback(() => {
+  // Use the provided filter or fall back to the default
+  var filterFn = React.useMemo(() => filter || defaultFilterFn, [filter]);
+  // Combine and memoize all commands from groups and flat list
+  var allCommands = React.useMemo(() => {
+    var groupCommands = groups.flatMap(group => group.commands);
+    return [...groupCommands, ...commands];
+  }, [groups, commands]);
+  // Filter and memoize commands based on search
+  var filteredCommands = React.useMemo(() => {
+    if (!search.trim()) return allCommands;
+    return allCommands.filter(item => filterFn(search, item));
+  }, [allCommands, search, filterFn]);
+  // Filter and memoize groups based on search
+  var filteredGroups = React.useMemo(() => {
     if (!search) return groups;
-    return groups.map(group => Object.assign({}, group, {
-      commands: group.commands.filter(command => (filter || defaultFilter)(search, command))
-    })).filter(group => group.commands.length > 0);
-  }, [groups, search, filter, defaultFilter]);
-  // Update filtered commands when search changes
+    var filterFn = filter || defaultFilterFn;
+    return groups.map(g => Object.assign({}, g, {
+      commands: g.commands.filter(c => filterFn(search, c))
+    })).filter(g => g.commands.length);
+  }, [groups, search, filter]);
+  // Reset selected index when filtered commands change
   React.useEffect(() => {
-    setFilteredCommands(filterCommands(search));
     setSelectedIndex(0);
-  }, [search, filterCommands]);
+  }, [filteredCommands.length]);
   // Handle keyboard navigation
   var handleKeyDown = React.useCallback(e => {
     if (!open) return;
@@ -16902,6 +16895,9 @@ var useCommandState = _ref => {
   React.useEffect(() => {
     if (open) {
       setSelectedIndex(0);
+    } else {
+      // Clear search when closed
+      setSearch('');
     }
   }, [open]);
   return {
@@ -16910,7 +16906,7 @@ var useCommandState = _ref => {
     selectedIndex,
     setSelectedIndex,
     filteredCommands,
-    filteredGroups: filteredGroups(),
+    filteredGroups,
     listRef
   };
 };
@@ -17179,26 +17175,21 @@ var CommandView = _ref7 => {
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded6$3);
   if (!open) return null;
-  var handleItemSelect = item => {
-    if (!item.disabled) {
-      item.onSelect();
-      onOpenChange(false);
-      setSearch('');
-    }
-  };
-  var handleBackdropClick = e => {
-    if (e.target === e.currentTarget) {
-      onOpenChange(false);
-    }
-  };
-  var contextValue = {
+  var handleItemSelect = React__default.useCallback(item => {
+    if (item.disabled) return;
+    item.onSelect();
+    onOpenChange(false);
+    setSearch('');
+  }, [onOpenChange, setSearch]);
+  var handleBackdropClick = React__default.useCallback(e => e.target === e.currentTarget && onOpenChange(false), [onOpenChange]);
+  var contextValue = React__default.useMemo(() => ({
     search,
     setSearch,
     selectedIndex,
     setSelectedIndex,
     filteredCommands,
     onSelect: handleItemSelect
-  };
+  }), [search, selectedIndex, filteredCommands, handleItemSelect, setSearch, setSelectedIndex]);
   var hasGroups = groups.length > 0;
   // const hasCommands = commands.length > 0;
   var isEmpty = filteredCommands.length === 0;