import { basicGroups as e } from "../constants/index.js";
import { P as t } from "../../../../packageName-CJwD6mUt.js";
import o from "../utils/stringifyCommandGroup.js";
const n = `import React, { useCallback, useState } from 'react';
import { 
  Box,
  Command, 
  CommandGroup, 
  CommandItem, 
  COMMAND_VARIANT, 
} from '${t}';
import IControlledCommandProps from './IControlledCommandProps';

const basicGroups: CommandGroup[] = ${o(e)};

const ControlledCommand: React.FC<IControlledCommandProps> = () => {
  const [value, setValue] = useState('');
  const [selectedItem, setSelectedItem] = useState<CommandItem | null>(null);

  const handleValueChange = useCallback(
    (newValue: string) => {
      setValue(newValue);
      // Clear selection when user types
      if (newValue !== selectedItem?.label) {
        setSelectedItem(null);
      }
    },
    [selectedItem],
  );

  const handleItemSelect = useCallback((item: CommandItem) => {
    setSelectedItem(item);
    setValue(item.label);
  }, []);

  return (
    <Box className="space-y-4">
      <Command
        variant={COMMAND_VARIANT.SIMPLE}
        groups={basicGroups}
        value={value}
        onValueChange={handleValueChange}
        onItemSelect={handleItemSelect}
        placeholder="Type to search (controlled)..."
      />
      {selectedItem && (
        <Box className="p-3 bg-gray-100 rounded-md text-sm">
          <strong>Selected:</strong> {selectedItem.label} ({selectedItem.value})
        </Box>
      )}
    </Box>
  );
};

export default ControlledCommand;`;
export {
  n as default
};
//# sourceMappingURL=checkboxConfigCommandSource.js.map
