@altimateai/ui-components 0.0.52 → 0.0.53

package/dist/storybook/Combobox.stories.tsx

@@ -9,6 +9,79 @@ export default {
   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" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"