@djangocfg/layouts 1.2.48 → 1.2.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.48",
+  "version": "1.2.49",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.48",
-    "@djangocfg/og-image": "^1.2.48",
-    "@djangocfg/ui": "^1.2.48",
+    "@djangocfg/api": "^1.2.49",
+    "@djangocfg/og-image": "^1.2.49",
+    "@djangocfg/ui": "^1.2.49",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.48",
+    "@djangocfg/typescript-config": "^1.2.49",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-20T17:19:40.883Z
+ * Last updated: 2025-11-21T05:40:14.485Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.48"
+    "version": "1.2.49"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.48"
+    "version": "1.2.49"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.48"
+    "version": "1.2.49"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.48"
+    "version": "1.2.49"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.48"
+    "version": "1.2.49"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.48"
+    "version": "1.2.49"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.48"
+    "version": "1.2.49"
   }
 ];
 

package/src/layouts/UILayout/config/components/forms.config.tsx

@@ -22,6 +22,7 @@ import {
   Slider,
   Combobox,
   MultiSelect,
+  SearchableMultiSelect,
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
@@ -391,6 +392,74 @@ export const FORM_COMPONENTS: ComponentConfig[] = [
       />
     ),
   },
+  {
+    name: 'SearchableMultiSelect',
+    category: 'forms',
+    description: 'Multi-select with integrated search and debounced filtering. Wraps MultiSelect with search functionality.',
+    importPath: "import { SearchableMultiSelect } from '@djangocfg/ui';",
+    example: `const [searchValue, setSearchValue] = useState('');
+const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+// Filter options based on search
+const filteredOptions = useMemo(() => {
+  if (!searchValue) return allOptions;
+  return allOptions.filter(opt =>
+    opt.label.toLowerCase().includes(searchValue.toLowerCase())
+  );
+}, [searchValue, allOptions]);
+
+<SearchableMultiSelect
+  // Search props
+  searchValue={searchValue}
+  onSearchChange={setSearchValue}
+  searchPlaceholder="Search countries..."
+  searchDebounceMs={300}
+
+  // MultiSelect props
+  options={filteredOptions}
+  value={selectedValues}
+  onChange={setSelectedValues}
+  placeholder="Select countries..."
+  isLoading={isLoading}
+  emptyText="No countries found."
+  maxDisplay={3}
+/>`,
+    preview: (
+      <div className="space-y-4">
+        <SearchableMultiSelect
+          searchValue=""
+          onSearchChange={() => {}}
+          searchPlaceholder="Search frameworks..."
+          options={[
+            { value: "react", label: "React" },
+            { value: "vue", label: "Vue" },
+            { value: "angular", label: "Angular" },
+            { value: "svelte", label: "Svelte" },
+            { value: "next", label: "Next.js" },
+            { value: "nuxt", label: "Nuxt" },
+            { value: "gatsby", label: "Gatsby" },
+          ]}
+          value={[]}
+          onChange={() => {}}
+          placeholder="Select frameworks..."
+          emptyText="No framework found."
+          maxDisplay={2}
+          className="w-[300px]"
+        />
+
+        <div className="p-4 border rounded-md bg-muted/50">
+          <p className="text-sm font-medium mb-2">Features:</p>
+          <ul className="space-y-1 text-sm text-muted-foreground">
+            <li>• Integrated search input above MultiSelect</li>
+            <li>• Debounced search (default 300ms)</li>
+            <li>• Loading state support</li>
+            <li>• All MultiSelect features included</li>
+            <li>• Combine with API calls for dynamic filtering</li>
+          </ul>
+        </div>
+      </div>
+    ),
+  },
   {
     name: 'InputOTP',
     category: 'forms',

package/src/layouts/UILayout/config/components/hooks.config.tsx

@@ -92,20 +92,56 @@ const countdown = useCountdown(targetDate);
   {
     name: 'useDebounce',
     category: 'hooks',
-    description: 'Debounce value changes',
+    description: 'Debounce value changes to reduce API calls and improve performance. Perfect for search inputs and form fields.',
     importPath: "import { useDebounce } from '@djangocfg/ui';",
-    example: `const [search, setSearch] = useState('');
-const debouncedSearch = useDebounce(search, 500);
+    example: `// Basic search debouncing
+const [search, setSearch] = useState('');
+const debouncedSearch = useDebounce(search, 300); // Default 300ms
 
-// debouncedSearch updates 500ms after last change`,
+useEffect(() => {
+  if (debouncedSearch) {
+    // API call only fires 300ms after user stops typing
+    fetchResults(debouncedSearch);
+  }
+}, [debouncedSearch]);
+
+// With SearchableMultiSelect
+const [searchValue, setSearchValue] = useState('');
+const debouncedSearchValue = useDebounce(searchValue, 500);
+
+useEffect(() => {
+  // Fetch options from API with debounced search
+  if (debouncedSearchValue) {
+    fetchOptions(debouncedSearchValue);
+  }
+}, [debouncedSearchValue]);
+
+<SearchableMultiSelect
+  searchValue={searchValue}
+  onSearchChange={setSearchValue}
+  options={filteredOptions}
+  // ... other props
+/>`,
     preview: (
       <div className="p-4 border rounded-md">
         <code className="text-sm">
-          useDebounce(value, delay)
+          const debouncedValue = useDebounce(value, delay);
         </code>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Debounces value changes with specified delay
-        </p>
+        <div className="mt-3 space-y-2 text-sm text-muted-foreground">
+          <p><strong>Parameters:</strong></p>
+          <ul className="list-disc list-inside space-y-1 ml-2">
+            <li><code>value</code>: Any value to debounce</li>
+            <li><code>delay</code>: Delay in milliseconds (default: 300ms)</li>
+          </ul>
+          <p className="mt-2"><strong>Returns:</strong> Debounced value</p>
+          <p className="mt-2"><strong>Use Cases:</strong></p>
+          <ul className="list-disc list-inside space-y-1 ml-2">
+            <li>Search inputs (reduce API calls)</li>
+            <li>Form validation</li>
+            <li>Auto-save functionality</li>
+            <li>Scroll/resize event handlers</li>
+          </ul>
+        </div>
       </div>
     ),
   },