@altimateai/ui-components 0.0.79 → 0.0.80

package/dist/storybook/Combobox.stories.tsx

@@ -1,1629 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Combobox, Button } from "../shadcn";
-import type { ComboboxOption } from "./Combobox";
-import { DatabaseIcon } from "@ac-assets/icons";
-import { useCallback, useState } from "react";
-
-export default {
-  title: "Shadcn/Components/Combobox",
-  component: Combobox,
-} as Meta;
-
-export const ComboboxSearchModeExample: StoryFn = () => {
-  const options = [
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-    { value: "remix", label: "Remix" },
-    { value: "gatsby", label: "Gatsby" },
-  ];
-
-  const [searchModeValue, setSearchModeValue] = useState("");
-  const [normalModeValue, setNormalModeValue] = useState("");
-
-  return (
-    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-2">
-        <h3 className="al-text-lg al-font-medium">Search Mode Comparison</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Compare search mode (shows input directly) with normal mode (shows button)
-        </p>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Search Mode (searchMode=true)</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Shows an input field directly. Click or focus to open dropdown.
-          </p>
-          <Combobox
-            options={options}
-            value={searchModeValue}
-            onChange={value => setSearchModeValue(value as string)}
-            placeholder="Search frameworks..."
-            searchMode={true}
-          />
-          <div className="al-text-sm">Selected: {searchModeValue || "None"}</div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Search Mode with Icon</label>
-          <p className="al-text-xs al-text-muted-foreground">Search mode with custom icon</p>
-          <Combobox
-            options={options}
-            value={searchModeValue}
-            onChange={value => setSearchModeValue(value as string)}
-            placeholder="Type to search..."
-            searchMode={true}
-            icon={<DatabaseIcon className="al-h-4 al-w-4" />}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Normal Mode (Default)</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Shows a button. Click to open dropdown with search inside.
-          </p>
-          <Combobox
-            options={options}
-            value={normalModeValue}
-            onChange={value => setNormalModeValue(value as string)}
-            placeholder="Select framework..."
-            searchMode={false}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">Selected: {normalModeValue || "None"}</div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxExample: StoryFn = () => {
-  const options = [
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-  ];
-
-  const [value, setValue] = useState("");
-
-  const handleChange = (newValue: string) => {
-    setValue(newValue);
-  };
-
-  return (
-    <div className="al-flex al-flex-col al-gap-4 al-justify-start al-items-start">
-      <h3 className="al-text-lg al-font-medium">Single Select</h3>
-      <Combobox
-        options={options}
-        value={value}
-        onChange={handleChange}
-        placeholder="Select framework..."
-      />
-
-      <Combobox
-        options={options}
-        value={value}
-        onChange={handleChange}
-        placeholder="Custom width..."
-        buttonProps={{ className: "al-w-[300px]" }}
-      />
-
-      <Combobox
-        options={options}
-        value={value}
-        onChange={handleChange}
-        placeholder="With icon..."
-        icon={<DatabaseIcon className="al-mr-2" />}
-      />
-    </div>
-  );
-};
-
-export const ComboboxMultiSelectExample: StoryFn = () => {
-  const options = [
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-    { value: "remix", label: "Remix" },
-    { value: "gatsby", label: "Gatsby" },
-    { value: "ember", label: "Ember.js" },
-  ];
-
-  const [selectedValues, setSelectedValues] = useState<string[]>([]);
-  const [selectedValuesWithApply, setSelectedValuesWithApply] = useState<string[]>([
-    "react",
-    "vue",
-  ]);
-
-  const handleMultiSelectChange = (newValue: string[]) => {
-    setSelectedValues(Array.isArray(newValue) ? newValue : []);
-  };
-
-  const handleMultiSelectWithApplyChange = (newValue: string | string[]) => {
-    setSelectedValuesWithApply(Array.isArray(newValue) ? newValue : []);
-  };
-
-  return (
-    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-4">
-        <h3 className="al-text-lg al-font-medium">Multi-Select (Auto-Apply)</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Changes are applied immediately when selecting/deselecting options
-        </p>
-        <div className="al-w-40">
-          <Combobox
-            options={options}
-            value={selectedValues}
-            placeholder="Select frameworks..."
-            multiSelect={true}
-            buttonProps={{ className: "al-w-full" }}
-            onChange={handleMultiSelectChange}
-          />
-        </div>
-        <div className="al-text-sm">
-          Selected: {selectedValues.length > 0 ? selectedValues.join(", ") : "None"}
-        </div>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <h3 className="al-text-lg al-font-medium">Multi-Select with Apply Button</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Changes are only applied when clicking the Apply button
-        </p>
-        <Combobox
-          options={options}
-          value={selectedValuesWithApply}
-          onChange={handleMultiSelectWithApplyChange}
-          placeholder="Select frameworks..."
-          multiSelect={true}
-          showApplyButton={true}
-          buttonProps={{ className: "al-w-[250px]" }}
-        />
-        <div className="al-text-sm">
-          Selected:{" "}
-          {selectedValuesWithApply.length > 0 ? selectedValuesWithApply.join(", ") : "None"}
-        </div>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <h3 className="al-text-lg al-font-medium">Columns Selector Example</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Similar to the UI shown in the screenshot
-        </p>
-        <ComboboxColumnsExample />
-      </div>
-    </div>
-  );
-};
-
-const ComboboxColumnsExample = () => {
-  const options = [
-    { value: "est_cost", label: "Est. Cost" },
-    { value: "exec_time", label: "Exec. Time" },
-    { value: "insights", label: "Insights" },
-    { value: "query_hash", label: "Query Hash" },
-    { value: "query_text", label: "Query Text" },
-    { value: "query_type", label: "Query Type" },
-    { value: "timestamp", label: "Timestamp" },
-    { value: "user", label: "User" },
-  ];
-
-  const [selectedColumns, setSelectedColumns] = useState<string[]>([
-    "est_cost",
-    "exec_time",
-    "insights",
-    "query_hash",
-    "query_text",
-    "query_type",
-    "timestamp",
-    "user",
-  ]);
-
-  const handleColumnsChange = (newValue: string | string[]) => {
-    setSelectedColumns(Array.isArray(newValue) ? newValue : []);
-  };
-
-  return (
-    <Combobox
-      options={options}
-      value={selectedColumns}
-      onChange={handleColumnsChange}
-      placeholder="Columns"
-      multiSelect={true}
-      showApplyButton={true}
-      buttonProps={{ className: "al-w-auto" }}
-    />
-  );
-};
-
-export const ComboboxAdvancedExample: StoryFn = () => {
-  const options = [
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-    { value: "remix", label: "Remix" },
-    { value: "gatsby", label: "Gatsby" },
-    { value: "ember", label: "Ember.js" },
-  ];
-
-  const [singleValue, setSingleValue] = useState("");
-  const [multiValue, setMultiValue] = useState<string[]>(["react", "vue"]);
-  const [clearableValue, setClearableValue] = useState("angular");
-  const [multiClearableValue, setMultiClearableValue] = useState<string[]>(["nextjs", "remix"]);
-  const [multiApplyValue, setMultiApplyValue] = useState<string[]>(["gatsby", "ember"]);
-
-  return (
-    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-4">
-        <h3 className="al-text-lg al-font-medium">Search Placeholders</h3>
-        <p className="al-text-sm al-text-muted-foreground">Different search placeholder examples</p>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Default Search Placeholder</label>
-          <Combobox
-            options={options}
-            value={singleValue}
-            onChange={value => setSingleValue(value as string)}
-            placeholder="Select framework..."
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Custom Search Placeholder</label>
-          <Combobox
-            options={options}
-            value={singleValue}
-            onChange={value => setSingleValue(value as string)}
-            placeholder="Select framework..."
-            searchPlaceholder="Type to find frameworks..."
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Empty Search Placeholder</label>
-          <Combobox
-            options={options}
-            value={singleValue}
-            onChange={value => setSingleValue(value as string)}
-            placeholder="Select framework..."
-            searchPlaceholder=""
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <h3 className="al-text-lg al-font-medium">Clear Button Examples</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Demonstrating showClearButton prop with different configurations
-        </p>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">
-            Single Select - No Clear Button (Default)
-          </label>
-          <Combobox
-            options={options}
-            value={clearableValue}
-            onChange={value => setClearableValue(value as string)}
-            placeholder="Select framework..."
-            searchPlaceholder="Search frameworks..."
-            showClearButton={false}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Single Select - With Clear Button</label>
-          <Combobox
-            options={options}
-            value={clearableValue}
-            onChange={value => setClearableValue(value as string)}
-            placeholder="Select framework..."
-            searchPlaceholder="Search frameworks..."
-            showClearButton={true}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Multi Select - No Clear Button</label>
-          <Combobox
-            options={options}
-            value={multiValue}
-            onChange={value => setMultiValue(value as string[])}
-            placeholder="Select frameworks..."
-            searchPlaceholder="Find your frameworks..."
-            multiSelect={true}
-            showClearButton={false}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-          <div className="al-text-sm">
-            Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
-          </div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Multi Select - With Clear Button</label>
-          <Combobox
-            options={options}
-            value={multiClearableValue}
-            onChange={value => setMultiClearableValue(value as string[])}
-            placeholder="Select frameworks..."
-            searchPlaceholder="Find your frameworks..."
-            multiSelect={true}
-            showClearButton={true}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-          <div className="al-text-sm">
-            Selected: {multiClearableValue.length > 0 ? multiClearableValue.join(", ") : "None"}
-          </div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">
-            Multi Select - With Apply Button & Clear Button
-          </label>
-          <Combobox
-            options={options}
-            value={multiApplyValue}
-            onChange={value => setMultiApplyValue(value as string[])}
-            placeholder="Select frameworks..."
-            searchPlaceholder="Filter options..."
-            multiSelect={true}
-            showApplyButton={true}
-            showClearButton={true}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-          <div className="al-text-sm">
-            Selected: {multiApplyValue.length > 0 ? multiApplyValue.join(", ") : "None"}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxInfiniteScrollExample: StoryFn = () => {
-  const [allOptions] = useState(() => {
-    // Generate a large dataset for demonstration
-    return Array.from({ length: 1000 }, (_, i) => ({
-      value: `option-${i + 1}`,
-      label: `Option ${i + 1}`,
-    }));
-  });
-
-  const [displayedOptions, setDisplayedOptions] = useState(() => allOptions.slice(0, 20));
-  const [hasMore, setHasMore] = useState(true);
-  const [selectedValue, setSelectedValue] = useState("option-500"); // Pre-select a value not in initial load
-  const [multiSelectedValue, setMultiSelectedValue] = useState<string[]>([
-    "option-100",
-    "option-200",
-  ]); // Pre-select values not in initial load
-
-  const loadMore = async () => {
-    if (!hasMore) return;
-
-    // Simulate API call delay
-    await new Promise(resolve => setTimeout(resolve, 500));
-
-    const currentLength = displayedOptions.length;
-    const nextBatch = allOptions.slice(currentLength, currentLength + 20);
-
-    if (nextBatch.length === 0) {
-      setHasMore(false);
-    } else {
-      setDisplayedOptions(prev => [...prev, ...nextBatch]);
-      setHasMore(currentLength + nextBatch.length < allOptions.length);
-    }
-  };
-
-  const resetData = () => {
-    setDisplayedOptions(allOptions.slice(0, 20));
-    setHasMore(true);
-    setSelectedValue("");
-    setMultiSelectedValue([]);
-  };
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-2">
-        <div className="al-flex al-gap-4 al-items-center">
-          <h3 className="al-text-lg al-font-medium">Infinite Scroll Examples</h3>
-          <Button onClick={resetData} size="sm" variant="outline">
-            Reset Data
-          </Button>
-        </div>
-        <p className="al-text-sm al-text-muted-foreground">
-          Notice how pre-selected values (Option 500, Option 100, Option 200) show proper labels
-          even though they&apos;re not in the initial 20 options. This demonstrates the valueLabels
-          prop functionality.
-        </p>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Single Select with Infinite Scroll</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Showing {displayedOptions.length} of {allOptions.length} options
-          </p>
-          <Combobox
-            options={displayedOptions}
-            value={selectedValue}
-            onChange={value => setSelectedValue(value as string)}
-            placeholder="Select an option..."
-            onLoadMore={loadMore}
-            hasMore={hasMore}
-            valueLabels={{
-              "option-500": "Option 500",
-            }}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Multi-Select with Infinite Scroll</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Selected: {multiSelectedValue.length} items
-          </p>
-          <Combobox
-            options={displayedOptions}
-            value={multiSelectedValue}
-            onChange={value => setMultiSelectedValue(value as string[])}
-            placeholder="Select multiple options..."
-            multiSelect={true}
-            onLoadMore={loadMore}
-            hasMore={hasMore}
-            valueLabels={{
-              "option-100": "Option 100",
-              "option-200": "Option 200",
-            }}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">
-            Standard Combobox (No Infinite Scroll)
-          </label>
-          <Combobox
-            options={displayedOptions.slice(0, 10)}
-            value="option-5" // Use a value that exists in the first 10 options
-            onChange={value => setSelectedValue(value as string)}
-            placeholder="Standard combobox..."
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxCallbacksExample: StoryFn = () => {
-  const options = [
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-  ];
-
-  const [selectedValue, setSelectedValue] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [openHistory, setOpenHistory] = useState<string[]>([]);
-
-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open);
-    const timestamp = new Date().toLocaleTimeString();
-    setOpenHistory(prev => [`${timestamp}: ${open ? "opened" : "closed"}`, ...prev.slice(0, 4)]);
-  };
-
-  const clearHistory = () => {
-    setOpenHistory([]);
-  };
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-gap-4 al-items-center">
-        <h3 className="al-text-lg al-font-medium">Open/Close Callback Example</h3>
-        <Button onClick={clearHistory} size="sm" variant="outline">
-          Clear History
-        </Button>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Combobox with onOpenChange Callback</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Open and close the combobox to see the callback events
-          </p>
-          <Combobox
-            options={options}
-            value={selectedValue}
-            onChange={value => setSelectedValue(value as string)}
-            placeholder="Select framework..."
-            onOpenChange={handleOpenChange}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Current State:</label>
-          <code className="al-text-sm al-bg-muted al-p-2 al-rounded">
-            Popover is {isOpen ? "open" : "closed"}
-          </code>
-        </div>
-
-        {openHistory.length > 0 && (
-          <div className="al-flex al-flex-col al-gap-2">
-            <label className="al-text-sm al-font-medium">Open/Close History:</label>
-            <ul className="al-text-sm al-bg-muted al-p-2 al-rounded al-space-y-1">
-              {openHistory.map((event, index) => (
-                <li key={index} className="al-font-mono">
-                  {event}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxCustomNodesExample: StoryFn = () => {
-  const [singleValue, setSingleValue] = useState("");
-  const [multiValue, setMultiValue] = useState<string[]>([]);
-
-  // Options with custom node rendering
-  const optionsWithNodes = [
-    {
-      value: "react",
-      label: "React",
-      labelNode: (
-        <div className="al-flex al-items-center al-justify-between al-w-full">
-          <div className="al-flex al-items-center al-gap-2">
-            <div className="al-w-4 al-h-4 al-bg-blue-500 al-rounded"></div>
-            <span>React</span>
-          </div>
-          <span className="al-text-xs al-text-muted-foreground">Meta</span>
-        </div>
-      ),
-    },
-    {
-      value: "vue",
-      label: "Vue",
-      labelNode: (
-        <div className="al-flex al-items-center al-justify-between al-w-full">
-          <div className="al-flex al-items-center al-gap-2">
-            <div className="al-w-4 al-h-4 al-bg-green-500 al-rounded"></div>
-            <span>Vue.js</span>
-          </div>
-          <span className="al-text-xs al-text-muted-foreground">Evan You</span>
-        </div>
-      ),
-    },
-    {
-      value: "angular",
-      label: "Angular",
-      labelNode: (
-        <div className="al-flex al-items-center al-justify-between al-w-full">
-          <div className="al-flex al-items-center al-gap-2">
-            <div className="al-w-4 al-h-4 al-bg-red-500 al-rounded"></div>
-            <span>Angular</span>
-          </div>
-          <span className="al-text-xs al-text-muted-foreground">Google</span>
-        </div>
-      ),
-    },
-    {
-      value: "svelte",
-      label: "Svelte",
-      labelNode: (
-        <div className="al-flex al-items-center al-justify-between al-w-full">
-          <div className="al-flex al-items-center al-gap-2">
-            <div className="al-w-4 al-h-4 al-bg-orange-500 al-rounded"></div>
-            <span>Svelte</span>
-          </div>
-          <span className="al-text-xs al-text-muted-foreground">Rich Harris</span>
-        </div>
-      ),
-    },
-  ];
-
-  // Options with interactive elements
-  const optionsWithButtons = [
-    {
-      value: "typescript",
-      label: "TypeScript",
-      labelNode: (
-        <div className="al-flex al-items-center al-justify-between al-w-full">
-          <div className="al-flex al-items-center al-gap-2">
-            <div className="al-w-4 al-h-4 al-bg-blue-600 al-rounded"></div>
-            <div>
-              <div className="al-font-medium">TypeScript</div>
-              <div className="al-text-xs al-text-muted-foreground">Strongly typed JavaScript</div>
-            </div>
-          </div>
-          <button
-            onClick={e => {
-              e.stopPropagation();
-              alert("TypeScript info clicked!");
-            }}
-            className="al-text-xs al-px-2 al-py-1 al-bg-blue-100 al-text-blue-700 al-rounded hover:al-bg-blue-200"
-          >
-            Info
-          </button>
-        </div>
-      ),
-    },
-    {
-      value: "javascript",
-      label: "JavaScript",
-      labelNode: (
-        <div className="al-flex al-items-center al-justify-between al-w-full">
-          <div className="al-flex al-items-center al-gap-2">
-            <div className="al-w-4 al-h-4 al-bg-yellow-500 al-rounded"></div>
-            <div>
-              <div className="al-font-medium">JavaScript</div>
-              <div className="al-text-xs al-text-muted-foreground">Dynamic scripting language</div>
-            </div>
-          </div>
-          <button
-            onClick={e => {
-              e.stopPropagation();
-              alert("JavaScript info clicked!");
-            }}
-            className="al-text-xs al-px-2 al-py-1 al-bg-yellow-100 al-text-yellow-700 al-rounded hover:al-bg-yellow-200"
-          >
-            Info
-          </button>
-        </div>
-      ),
-    },
-    {
-      value: "python",
-      label: "Python",
-      labelNode: (
-        <div className="al-flex al-items-center al-justify-between al-w-full">
-          <div className="al-flex al-items-center al-gap-2">
-            <div className="al-w-4 al-h-4 al-bg-green-600 al-rounded"></div>
-            <div>
-              <div className="al-font-medium">Python</div>
-              <div className="al-text-xs al-text-muted-foreground">
-                High-level programming language
-              </div>
-            </div>
-          </div>
-          <button
-            onClick={e => {
-              e.stopPropagation();
-              alert("Python info clicked!");
-            }}
-            className="al-text-xs al-px-2 al-py-1 al-bg-green-100 al-text-green-700 al-rounded hover:al-bg-green-200"
-          >
-            Info
-          </button>
-        </div>
-      ),
-    },
-  ];
-
-  // Mixed options - some with nodes, some without
-  const mixedOptions = [
-    { value: "standard1", label: "Standard Option 1" },
-    {
-      value: "custom1",
-      label: "Custom Option 1",
-      labelNode: (
-        <div className="al-flex al-items-center al-gap-2">
-          <div className="al-w-2 al-h-2 al-bg-purple-500 al-rounded-full"></div>
-          <span className="al-italic">Custom with node</span>
-        </div>
-      ),
-    },
-    { value: "standard2", label: "Standard Option 2" },
-    {
-      value: "custom2",
-      label: "Custom Option 2",
-      labelNode: (
-        <div className="al-flex al-items-center al-gap-2">
-          <div className="al-w-2 al-h-2 al-bg-pink-500 al-rounded-full"></div>
-          <span className="al-font-bold">Another custom node</span>
-        </div>
-      ),
-    },
-  ];
-
-  return (
-    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-2">
-        <h3 className="al-text-lg al-font-medium">Custom Node Rendering</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Use the optional <code>node</code> property to provide custom ReactNode rendering for
-          dropdown options while keeping <code>label</code> as a string for text operations.
-        </p>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-6">
-        <div className="al-flex al-flex-col al-gap-4">
-          <h4 className="al-text-md al-font-medium">Framework Selector with Icons & Authors</h4>
-          <p className="al-text-sm al-text-muted-foreground">
-            Custom nodes with colored indicators and author information
-          </p>
-
-          <div className="al-flex al-flex-col al-gap-2">
-            <label className="al-text-sm al-font-medium">Single Select</label>
-            <Combobox
-              options={optionsWithNodes}
-              value={singleValue}
-              onChange={value => setSingleValue(value as string)}
-              placeholder="Select a framework..."
-              buttonProps={{ className: "al-w-[300px]" }}
-            />
-            <div className="al-text-sm">Selected: {singleValue || "None"}</div>
-          </div>
-
-          <div className="al-flex al-flex-col al-gap-2">
-            <label className="al-text-sm al-font-medium">Multi Select</label>
-            <Combobox
-              options={optionsWithNodes}
-              value={multiValue}
-              onChange={value => setMultiValue(value as string[])}
-              placeholder="Select frameworks..."
-              multiSelect={true}
-              buttonProps={{ className: "al-w-[300px]" }}
-            />
-            <div className="al-text-sm">
-              Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
-            </div>
-          </div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-4">
-          <h4 className="al-text-md al-font-medium">Interactive Elements in Options</h4>
-          <p className="al-text-sm al-text-muted-foreground">
-            Options with interactive buttons that can be clicked without selecting the option
-          </p>
-
-          <div className="al-flex al-flex-col al-gap-2">
-            <label className="al-text-sm al-font-medium">
-              Programming Languages with Info Buttons
-            </label>
-            <Combobox
-              options={optionsWithButtons}
-              value={singleValue}
-              onChange={value => setSingleValue(value as string)}
-              placeholder="Select a language..."
-              buttonProps={{ className: "al-w-[350px]" }}
-              popoverContentProps={{ className: "al-w-[350px]" }}
-            />
-          </div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-4">
-          <h4 className="al-text-md al-font-medium">Mixed Standard and Custom Options</h4>
-          <p className="al-text-sm al-text-muted-foreground">
-            Demonstrating that you can mix standard string labels with custom node rendering
-          </p>
-
-          <div className="al-flex al-flex-col al-gap-2">
-            <label className="al-text-sm al-font-medium">Mixed Options</label>
-            <Combobox
-              options={mixedOptions}
-              value={singleValue}
-              onChange={value => setSingleValue(value as string)}
-              placeholder="Select an option..."
-              buttonProps={{ className: "al-w-[250px]" }}
-            />
-            <div className="al-text-sm">Selected: {singleValue || "None"}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxPopoverCustomizationExample: StoryFn = () => {
-  const options = [
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-  ];
-
-  const [selectedValue1, setSelectedValue1] = useState("");
-  const [selectedValue2, setSelectedValue2] = useState("");
-  const [selectedValue3, setSelectedValue3] = useState("");
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <h3 className="al-text-lg al-font-medium">Popover Customization Examples</h3>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Default Popover (Bottom)</label>
-          <Combobox
-            options={options}
-            value={selectedValue1}
-            onChange={value => setSelectedValue1(value as string)}
-            placeholder="Default positioning..."
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">
-            Right Side Popover (with right chevron)
-          </label>
-          <Combobox
-            options={options}
-            value={selectedValue2}
-            onChange={value => setSelectedValue2(value as string)}
-            placeholder="Right side popover..."
-            popoverContentProps={{ side: "right" }}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Custom Styled Popover</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Popover with custom styling and wider width
-          </p>
-          <Combobox
-            options={options}
-            value={selectedValue3}
-            onChange={value => setSelectedValue3(value as string)}
-            placeholder="Custom styled popover..."
-            popoverContentProps={{
-              className: "al-w-[350px] al-border-2 al-border-blue-200",
-              side: "top",
-            }}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxValidationExample: StoryFn = () => {
-  const options = [
-    { value: "databases", label: "Databases" },
-    { value: "api", label: "API" },
-    { value: "frontend", label: "Frontend" },
-    { value: "backend", label: "Backend" },
-    { value: "devops", label: "DevOps" },
-    { value: "mobile", label: "Mobile" },
-  ];
-
-  const [selectedValue, setSelectedValue] = useState<string[]>(["databases"]);
-  const [selectedValueWithoutValidation, setSelectedValueWithoutValidation] = useState<string[]>(
-    []
-  );
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-2">
-        <h3 className="al-text-lg al-font-medium">Validation Examples</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Demonstrating the disableAllDeselect prop for preventing empty selections
-        </p>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-6">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">
-            With Validation (disableAllDeselect=true)
-          </label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Try to deselect all items and click Apply - you&apos;ll see a warning message
-          </p>
-          <Combobox
-            options={options}
-            value={selectedValue}
-            onChange={value => setSelectedValue(value as string[])}
-            placeholder="Select at least one skill..."
-            multiSelect={true}
-            showApplyButton={true}
-            showClearButton={true}
-            disableAllDeselect={true}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">
-            Selected: {selectedValue.length > 0 ? selectedValue.join(", ") : "None"}
-          </div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">
-            Without Validation (disableAllDeselect=false)
-          </label>
-          <p className="al-text-xs al-text-muted-foreground">
-            You can deselect all items and apply with an empty selection
-          </p>
-          <Combobox
-            options={options}
-            value={selectedValueWithoutValidation}
-            onChange={value => setSelectedValueWithoutValidation(value as string[])}
-            placeholder="Select skills (optional)..."
-            multiSelect={true}
-            showApplyButton={true}
-            showClearButton={true}
-            disableAllDeselect={false}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">
-            Selected:{" "}
-            {selectedValueWithoutValidation.length > 0
-              ? selectedValueWithoutValidation.join(", ")
-              : "None"}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxDebouncedSearchExample: StoryFn = () => {
-  const allOptions = [
-    { value: "javascript", label: "JavaScript" },
-    { value: "typescript", label: "TypeScript" },
-    { value: "python", label: "Python" },
-    { value: "java", label: "Java" },
-    { value: "csharp", label: "C#" },
-    { value: "cpp", label: "C++" },
-    { value: "go", label: "Go" },
-    { value: "rust", label: "Rust" },
-    { value: "php", label: "PHP" },
-    { value: "ruby", label: "Ruby" },
-    { value: "swift", label: "Swift" },
-    { value: "kotlin", label: "Kotlin" },
-  ];
-
-  const [selectedValue, setSelectedValue] = useState("");
-  const [filteredOptions, setFilteredOptions] = useState(allOptions);
-  const [searchHistory, setSearchHistory] = useState<string[]>([]);
-
-  const clearHistory = () => {
-    setSearchHistory([]);
-    setFilteredOptions(allOptions);
-  };
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-gap-4 al-items-center">
-        <h3 className="al-text-lg al-font-medium">Debounced Search Example</h3>
-        <Button onClick={clearHistory} size="sm" variant="outline">
-          Clear History
-        </Button>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Search with Default Debounce (300ms)</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Type quickly to see how the search is debounced. The search function will only be called
-            300ms after you stop typing.
-          </p>
-          <Combobox
-            options={filteredOptions}
-            value={selectedValue}
-            onChange={value => setSelectedValue(value as string)}
-            placeholder="Search programming languages..."
-            searchPlaceholder="Type to search languages..."
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">
-            Showing {filteredOptions.length} of {allOptions.length} languages
-          </div>
-        </div>
-
-        {searchHistory.length > 0 && (
-          <div className="al-flex al-flex-col al-gap-2">
-            <label className="al-text-sm al-font-medium">Search History (Last 10 calls):</label>
-            <ul className="al-text-xs al-bg-muted al-p-2 al-rounded al-space-y-1 al-max-h-40 al-overflow-y-auto">
-              {searchHistory.map((entry, index) => (
-                <li key={index} className="al-font-mono">
-                  {entry}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxFilterDropdownCompatibilityExample: StoryFn = () => {
-  const tagOptions = [
-    { value: "urgent", label: "Urgent" },
-    { value: "bug", label: "Bug" },
-    { value: "feature", label: "Feature" },
-    { value: "enhancement", label: "Enhancement" },
-    { value: "documentation", label: "Documentation" },
-    { value: "question", label: "Question" },
-    { value: "duplicate", label: "Duplicate" },
-    { value: "wontfix", label: "Won't Fix" },
-  ];
-
-  const [selectedTags, setSelectedTags] = useState<string[]>(["urgent", "bug"]);
-  const [requiredTags, setRequiredTags] = useState<string[]>(["urgent"]);
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-2">
-        <h3 className="al-text-lg al-font-medium">FilterDropdown Compatibility</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          Demonstrating all FilterDropdown features: debounced search, validation, apply button, and
-          clear functionality
-        </p>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-6">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Full Feature Set</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Multi-select with apply button, clear button, debounced search, and validation
-          </p>
-          <Combobox
-            options={tagOptions}
-            value={selectedTags}
-            onChange={value => setSelectedTags(value as string[])}
-            placeholder="Select tags..."
-            searchPlaceholder="Search tags..."
-            multiSelect={true}
-            showApplyButton={true}
-            showClearButton={true}
-            disableAllDeselect={false}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">
-            Selected tags: {selectedTags.length > 0 ? selectedTags.join(", ") : "None"}
-          </div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">
-            Required Tags (disableAllDeselect=true)
-          </label>
-          <p className="al-text-xs al-text-muted-foreground">
-            At least one tag must always be selected. Try to deselect all and apply.
-          </p>
-          <Combobox
-            options={tagOptions}
-            value={requiredTags}
-            onChange={value => setRequiredTags(value as string[])}
-            placeholder="Select required tags..."
-            searchPlaceholder="Find tags..."
-            multiSelect={true}
-            showApplyButton={true}
-            showClearButton={true}
-            disableAllDeselect={true}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">
-            Required tags: {requiredTags.length > 0 ? requiredTags.join(", ") : "None"}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxHierarchicalExample: StoryFn = () => {
-  const [selectedDepartment, setSelectedDepartment] = useState("");
-  const [selectedMultiDepartment, setSelectedMultiDepartment] = useState<string[]>([]);
-  const [hierarchicalSelection, setHierarchicalSelection] = useState<{
-    value: string;
-    label: string;
-    parent?: { value: string; label: string };
-  } | null>(null);
-
-  // Helper function to handle hierarchical selection
-  const handleHierarchicalSelect = (value: string, parentValue: string, parentLabel: string) => {
-    // Update single select state
-    setSelectedDepartment(value);
-    setHierarchicalSelection({
-      value,
-      label:
-        departmentOptions.find(opt => opt.nestedLabels?.[value])?.nestedLabels?.[value] || value,
-      parent: { value: parentValue, label: parentLabel },
-    });
-
-    // Also update multi-select state (toggle the value) since no apply button
-    setSelectedMultiDepartment(prev => {
-      if (prev.includes(value)) {
-        return prev.filter(v => v !== value);
-      } else {
-        return [...prev, value];
-      }
-    });
-  };
-
-  // Helper function to get the selected value for a nested combobox
-  const getNestedValue = (parentValue: string): string => {
-    const parentOption = departmentOptions.find(opt => opt.value === parentValue);
-    if (parentOption?.nestedLabels && selectedDepartment in parentOption.nestedLabels) {
-      return selectedDepartment;
-    }
-    return "";
-  };
-
-  // Hierarchical options with subcomponents for single select
-  const departmentOptions: ComboboxOption[] = [
-    {
-      value: "engineering",
-      label: "Engineering",
-      nestedLabels: {
-        frontend: "Frontend",
-        backend: "Backend",
-        devops: "DevOps",
-        mobile: "Mobile",
-      },
-      children: (close: () => void) => (
-        <div className="al-flex al-flex-col al-gap-2">
-          <h4 className="al-font-medium al-text-sm">Engineering Teams</h4>
-          <div className="al-grid al-grid-cols-2 al-gap-2">
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                handleHierarchicalSelect("frontend", "engineering", "Engineering");
-                close();
-              }}
-            >
-              Frontend
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                handleHierarchicalSelect("backend", "engineering", "Engineering");
-                close();
-              }}
-            >
-              Backend
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                handleHierarchicalSelect("devops", "engineering", "Engineering");
-                close();
-              }}
-            >
-              DevOps
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                handleHierarchicalSelect("mobile", "engineering", "Engineering");
-                close();
-              }}
-            >
-              Mobile
-            </Button>
-          </div>
-          <div className="al-text-xs al-text-muted-foreground al-mt-2">
-            Click a team to select and close
-          </div>
-        </div>
-      ),
-    },
-    {
-      value: "design",
-      label: "Design",
-      nestedLabels: {
-        "ux-design": "UX Designer",
-        "ui-design": "UI Designer",
-        "product-design": "Product Designer",
-      },
-      children: (close: () => void) => (
-        <div className="al-flex al-flex-col al-gap-2">
-          <h4 className="al-font-medium al-text-sm">Design Roles</h4>
-          <div className="al-space-y-1">
-            <Button
-              size="sm"
-              variant="ghost"
-              className="al-w-full al-justify-start"
-              onClick={() => {
-                handleHierarchicalSelect("ux-design", "design", "Design");
-                close();
-              }}
-            >
-              UX Designer
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="al-w-full al-justify-start"
-              onClick={() => {
-                handleHierarchicalSelect("ui-design", "design", "Design");
-                close();
-              }}
-            >
-              UI Designer
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="al-w-full al-justify-start"
-              onClick={() => {
-                handleHierarchicalSelect("product-design", "design", "Design");
-                close();
-              }}
-            >
-              Product Designer
-            </Button>
-          </div>
-        </div>
-      ),
-    },
-    {
-      value: "marketing",
-      label: "Marketing",
-      nestedLabels: {
-        content: "Content Marketing",
-        social: "Social Media",
-        email: "Email Marketing",
-        seo: "SEO/SEM",
-      },
-      children: (close: () => void) => (
-        <div className="al-flex al-flex-col al-gap-2">
-          <h4 className="al-font-medium al-text-sm">Marketing Channels</h4>
-          <Combobox
-            options={[
-              { value: "content", label: "Content Marketing" },
-              { value: "social", label: "Social Media" },
-              { value: "email", label: "Email Marketing" },
-              { value: "seo", label: "SEO/SEM" },
-            ]}
-            value={getNestedValue("marketing")}
-            onChange={value => {
-              handleHierarchicalSelect(value as string, "marketing", "Marketing");
-              close();
-            }}
-            placeholder="Select marketing area..."
-            buttonProps={{ className: "al-w-full" }}
-          />
-          <div className="al-text-xs al-text-muted-foreground">
-            Nested combobox for marketing specializations
-          </div>
-        </div>
-      ),
-    },
-    {
-      value: "sales",
-      label: "Sales",
-      // No subComponent - regular option
-    },
-    {
-      value: "hr",
-      label: "Human Resources",
-      // No subComponent - regular option
-    },
-  ];
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-2">
-        <h3 className="al-text-lg al-font-medium">Hierarchical Options</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          NEW FEATURE: Options with subComponent show a chevron and display nested content on hover.
-          Mix hierarchical and regular options freely.
-        </p>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-6">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Department Selection (Single)</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Hover over Engineering, Design, or Marketing to see subcomponents. Sales and HR are
-            regular options.
-          </p>
-          <Combobox
-            options={departmentOptions}
-            value={selectedDepartment}
-            onChange={value => setSelectedDepartment(value as string)}
-            placeholder="Select department..."
-            searchPlaceholder="Search departments..."
-            hoverDelayMs={200}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">Selected: {selectedDepartment || "None"}</div>
-          {hierarchicalSelection && (
-            <div className="al-text-sm al-bg-blue-50 al-p-2 al-rounded">
-              <strong>Hierarchical Selection:</strong>
-              <br />
-              Value: {hierarchicalSelection.value}
-              <br />
-              Label: {hierarchicalSelection.label}
-              <br />
-              {hierarchicalSelection.parent && (
-                <>
-                  Parent: {hierarchicalSelection.parent.label} ({hierarchicalSelection.parent.value}
-                  )
-                </>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Department Selection (Multi-Select)</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Multi-select mode also supports hierarchical options. Regular options (Sales/HR) can be
-            selected from dropdown, hierarchical options (Engineering/Design/Marketing) show nested
-            selections on hover.
-          </p>
-          <Combobox
-            options={departmentOptions}
-            value={selectedMultiDepartment}
-            onChange={value => setSelectedMultiDepartment(value as string[])}
-            placeholder="Select departments..."
-            searchPlaceholder="Search departments..."
-            multiSelect={true}
-            showApplyButton={false}
-            hoverDelayMs={300}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">
-            Selected:{" "}
-            {selectedMultiDepartment.length > 0 ? selectedMultiDepartment.join(", ") : "None"}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxEnhancedAsyncExample: StoryFn = () => {
-  const [selectedValue, setSelectedValue] = useState("");
-  const [multiSelectedValue, setMultiSelectedValue] = useState<string[]>([]);
-  const [displayedOptions, setDisplayedOptions] = useState<Array<{ value: string; label: string }>>(
-    []
-  );
-  const [hasMore, setHasMore] = useState(true);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [currentSearch, setCurrentSearch] = useState("");
-
-  // Simulate API data
-  const generateApiData = (search: string = "", page: number = 1) => {
-    const allItems = Array.from({ length: 100 }, (_, i) => ({
-      value: `item-${i + 1}`,
-      label: `${search ? "Filtered " : ""}API Item ${i + 1}`,
-    }));
-
-    const filteredItems = search
-      ? allItems.filter(item => item.label.toLowerCase().includes(search.toLowerCase()))
-      : allItems;
-
-    const startIndex = (page - 1) * 20;
-    const endIndex = startIndex + 20;
-    const pageItems = filteredItems.slice(startIndex, endIndex);
-
-    return {
-      items: pageItems,
-      hasMore: endIndex < filteredItems.length,
-      total: filteredItems.length,
-      page,
-    };
-  };
-
-  const handleLoadMore = useCallback(async (searchValue?: string, page?: number) => {
-    // Simulate API delay
-    await new Promise(resolve => setTimeout(resolve, 800));
-
-    const isNewSearch = searchValue !== currentSearch;
-    const targetPage = page || (isNewSearch ? 1 : currentPage + 1);
-
-    const result = generateApiData(searchValue || "", targetPage);
-
-    if (isNewSearch || targetPage === 1) {
-      setDisplayedOptions(result.items);
-    } else {
-      setDisplayedOptions(prev => [...prev, ...result.items]);
-    }
-
-    setHasMore(result.hasMore);
-    setCurrentPage(targetPage);
-    setCurrentSearch(searchValue || "");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handlePageReset = () => {
-    setDisplayedOptions([]);
-    setCurrentPage(1);
-    setHasMore(true);
-  };
-
-  const resetDemo = () => {
-    setSelectedValue("");
-    setMultiSelectedValue([]);
-    setDisplayedOptions([]);
-    setCurrentPage(1);
-    setCurrentSearch("");
-    setHasMore(true);
-  };
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-gap-4 al-items-center">
-        <h3 className="al-text-lg al-font-medium">Enhanced Async Loading</h3>
-        <Button onClick={resetDemo} size="sm" variant="outline">
-          Reset Demo
-        </Button>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-2">
-        <p className="al-text-sm al-text-muted-foreground">
-          NEW FEATURES: Enhanced onLoadMore with search and page parameters, automatic page
-          management, debounced search with page reset, and improved loading states.
-        </p>
-        <div className="al-text-xs al-bg-blue-50 al-p-2 al-rounded">
-          <strong>Try this:</strong> Open dropdown → scroll to load more → search → see how
-          pagination resets → search again
-        </div>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-6">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Single Select with Enhanced Async</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Page: {currentPage} | Showing: {displayedOptions.length} items | Search: &quot;
-            {currentSearch}&quot; | Has more: {hasMore ? "Yes" : "No"}
-          </p>
-          <Combobox
-            options={displayedOptions}
-            value={selectedValue}
-            onChange={value => setSelectedValue(value as string)}
-            placeholder="Select item..."
-            searchPlaceholder="Search items (debounced)..."
-            onLoadMore={handleLoadMore}
-            hasMore={hasMore}
-            onPageReset={handlePageReset}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">Selected: {selectedValue || "None"}</div>
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Multi-Select with Enhanced Async</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Multi-select mode with apply button and async loading
-          </p>
-          <Combobox
-            options={displayedOptions}
-            value={multiSelectedValue}
-            onChange={value => setMultiSelectedValue(value as string[])}
-            placeholder="Select multiple items..."
-            searchPlaceholder="Search and select..."
-            multiSelect={true}
-            showApplyButton={true}
-            onLoadMore={handleLoadMore}
-            hasMore={hasMore}
-            onPageReset={handlePageReset}
-            buttonProps={{ className: "al-w-[300px]" }}
-          />
-          <div className="al-text-sm">
-            Selected: {multiSelectedValue.length} items{" "}
-            {multiSelectedValue.length > 0 &&
-              `(${multiSelectedValue.slice(0, 3).join(", ")}${multiSelectedValue.length > 3 ? "..." : ""})`}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const ComboboxSheetIntegrationExample: StoryFn = () => {
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState("");
-  const [multiSelectedValue, setSelectedMultiValue] = useState<string[]>([]);
-
-  const options = [
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-    { value: "remix", label: "Remix" },
-    { value: "gatsby", label: "Gatsby" },
-    { value: "ember", label: "Ember.js" },
-    { value: "solid", label: "Solid.js" },
-    { value: "qwik", label: "Qwik" },
-    { value: "alpine", label: "Alpine.js" },
-    { value: "lit", label: "Lit" },
-  ];
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-flex-col al-gap-2">
-        <h3 className="al-text-lg al-font-medium">Sheet Integration</h3>
-        <p className="al-text-sm al-text-muted-foreground">
-          BUG FIX: Fixed scrolling issues when Combobox is used inside Sheet components. Added
-          onWheel stopPropagation to prevent scroll conflicts.
-        </p>
-      </div>
-
-      <Button onClick={() => setIsSheetOpen(true)}>Open Sheet with Combobox</Button>
-
-      {/* Note: This is a simulated sheet for the story. In real usage, you'd use the actual Sheet component */}
-      {isSheetOpen && (
-        <div className="al-fixed al-inset-0 al-bg-black/50 al-z-50 al-flex al-items-center al-justify-center">
-          <div className="al-bg-white al-rounded-lg al-p-6 al-w-[500px] al-max-h-[80vh] al-overflow-y-auto">
-            <div className="al-flex al-justify-between al-items-center al-mb-4">
-              <h4 className="al-text-lg al-font-medium">Sheet with Combobox</h4>
-              <Button variant="ghost" size="sm" onClick={() => setIsSheetOpen(false)}>
-                ✕
-              </Button>
-            </div>
-
-            <div className="al-space-y-4">
-              <div className="al-text-sm al-text-muted-foreground">
-                Try scrolling in the combobox dropdown - it should work properly now!
-              </div>
-
-              <div className="al-flex al-flex-col al-gap-2">
-                <label className="al-text-sm al-font-medium">Single Select in Sheet</label>
-                <Combobox
-                  options={options}
-                  value={selectedValue}
-                  onChange={value => setSelectedValue(value as string)}
-                  placeholder="Select framework..."
-                  searchPlaceholder="Search frameworks..."
-                  buttonProps={{ className: "al-w-full" }}
-                />
-                <div className="al-text-xs">Selected: {selectedValue || "None"}</div>
-              </div>
-
-              <div className="al-flex al-flex-col al-gap-2">
-                <label className="al-text-sm al-font-medium">Multi-Select in Sheet</label>
-                <Combobox
-                  options={options}
-                  value={multiSelectedValue}
-                  onChange={value => setSelectedMultiValue(value as string[])}
-                  placeholder="Select frameworks..."
-                  searchPlaceholder="Search frameworks..."
-                  multiSelect={true}
-                  showApplyButton={true}
-                  buttonProps={{ className: "al-w-full" }}
-                />
-                <div className="al-text-xs">
-                  Selected: {multiSelectedValue.length > 0 ? multiSelectedValue.join(", ") : "None"}
-                </div>
-              </div>
-
-              <div className="al-text-xs al-text-muted-foreground al-bg-green-50 al-p-2 al-rounded">
-                ✅ Mouse wheel scrolling now works properly in both comboboxes!
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      <div className="al-text-sm">
-        Selected in sheet: {selectedValue || "None"} | Multi:{" "}
-        {multiSelectedValue.join(", ") || "None"}
-      </div>
-    </div>
-  );
-};