@djangocfg/ui-core 2.1.259 → 2.1.261

package/src/components/{tabs.story.tsx → navigation/tabs/tabs.story.tsx}

@@ -1,9 +1,9 @@
 import { defineStory } from '@djangocfg/playground';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
-import { Input } from './input';
-import { Label } from './label';
-import { Button } from './button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '.';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../layout/card';
+import { Input } from '../../forms/input';
+import { Label } from '../../forms/label';
+import { Button } from '../../forms/button';
 
 export default defineStory({
   title: 'Core/Tabs',

package/src/components/{alert-dialog.story.tsx → overlay/alert-dialog/alert-dialog.story.tsx}

@@ -9,8 +9,8 @@ import {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-} from './alert-dialog';
-import { Button } from './button';
+} from '.';
+import { Button } from '../../forms/button';
 
 export default defineStory({
   title: 'Core/Alert Dialog',

package/src/components/{alert-dialog.tsx → overlay/alert-dialog/index.tsx}

@@ -4,8 +4,8 @@ import * as React from 'react';
 
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../lib/utils';
-import { buttonVariants } from './button';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../../forms/button';
 
 const AlertDialog = AlertDialogPrimitive.Root
 

package/src/components/{dialog.story.tsx → overlay/dialog/dialog.story.tsx}

@@ -8,10 +8,10 @@ import {
   DialogTitle,
   DialogDescription,
   DialogClose,
-} from './dialog';
-import { Button } from './button';
-import { Input } from './input';
-import { Label } from './label';
+} from '.';
+import { Button } from '../../forms/button';
+import { Input } from '../../forms/input';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/Dialog',

package/src/components/{dialog.tsx → overlay/dialog/index.tsx}

@@ -5,7 +5,7 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Dialog = DialogPrimitive.Root
 

package/src/components/{drawer.story.tsx → overlay/drawer/drawer.story.tsx}

@@ -8,10 +8,10 @@ import {
   DrawerTitle,
   DrawerDescription,
   DrawerClose,
-} from './drawer';
-import { Button } from './button';
-import { Input } from './input';
-import { Label } from './label';
+} from '.';
+import { Button } from '../../forms/button';
+import { Input } from '../../forms/input';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/Drawer',

package/src/components/{drawer.tsx → overlay/drawer/index.tsx}

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Drawer = ({
   shouldScaleBackground = true,

package/src/components/{hover-card.story.tsx → overlay/hover-card/hover-card.story.tsx}

@@ -1,7 +1,7 @@
 import { defineStory } from '@djangocfg/playground';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
-import { Avatar, AvatarFallback, AvatarImage } from './avatar';
-import { Button } from './button';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '.';
+import { Avatar, AvatarFallback, AvatarImage } from '../../data/avatar';
+import { Button } from '../../forms/button';
 import { CalendarDays } from 'lucide-react';
 
 export default defineStory({

package/src/components/{hover-card.tsx → overlay/hover-card/index.tsx}

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const HoverCard = HoverCardPrimitive.Root
 

package/src/components/{popover.tsx → overlay/popover/index.tsx}

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Popover = PopoverPrimitive.Root
 

package/src/components/{popover.story.tsx → overlay/popover/popover.story.tsx}

@@ -1,8 +1,8 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import { Button } from './button';
-import { Input } from './input';
-import { Label } from './label';
+import { Popover, PopoverContent, PopoverTrigger } from '.';
+import { Button } from '../../forms/button';
+import { Input } from '../../forms/input';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/Popover',

package/src/components/{responsive-sheet.tsx → overlay/responsive-sheet/index.tsx}

@@ -9,7 +9,7 @@
 
 import * as React from 'react';
 
-import { useIsMobile } from '../hooks/useMobile';
+import { useIsMobile } from '../../../hooks/useMobile';
 
 import {
   Dialog,
@@ -18,7 +18,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from './dialog';
+} from '../../overlay/dialog';
 
 import {
   Drawer,
@@ -27,7 +27,7 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
-} from './drawer';
+} from '../../overlay/drawer';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Context

package/src/components/{responsive-sheet.story.tsx → overlay/responsive-sheet/responsive-sheet.story.tsx}

@@ -7,10 +7,10 @@ import {
   ResponsiveSheetTitle,
   ResponsiveSheetDescription,
   ResponsiveSheetFooter,
-} from './responsive-sheet';
-import { Button } from './button';
-import { Input } from './input';
-import { Label } from './label';
+} from '.';
+import { Button } from '../../forms/button';
+import { Input } from '../../forms/input';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/ResponsiveSheet',

package/src/components/{sheet.tsx → overlay/sheet/index.tsx}

@@ -6,7 +6,7 @@ import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Sheet = SheetPrimitive.Root
 

package/src/components/{sheet.story.tsx → overlay/sheet/sheet.story.tsx}

@@ -8,10 +8,10 @@ import {
   SheetTitle,
   SheetDescription,
   SheetClose,
-} from './sheet';
-import { Button } from './button';
-import { Input } from './input';
-import { Label } from './label';
+} from '.';
+import { Button } from '../../forms/button';
+import { Input } from '../../forms/input';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/Sheet',

package/src/components/{tooltip.tsx → overlay/tooltip/index.tsx}

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const TooltipProvider = TooltipPrimitive.Provider
 

package/src/components/{tooltip.story.tsx → overlay/tooltip/tooltip.story.tsx}

@@ -1,6 +1,6 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
-import { Button } from './button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '.';
+import { Button } from '../../forms/button';
 import { Plus, Settings, HelpCircle } from 'lucide-react';
 
 export default defineStory({

package/src/components/select/README.md

@@ -0,0 +1,272 @@
+# Select Components
+
+Unified collection of all select-based components with consistent API supporting **icons** and **badges**.
+
+## Structure
+
+```
+components/select/
+├── index.ts           # Re-exports everything
+├── select.tsx         # Radix UI primitives (enhanced)
+├── combobox.tsx       # Searchable single-select
+├── multi-select.tsx   # Simple multi-select
+├── multi-select-pro/  # Advanced multi-select
+│   ├── index.tsx      # MultiSelectPro
+│   ├── async.tsx      # Async version
+│   └── helpers.tsx    # Option builders
+└── types.ts           # Shared types
+```
+
+## Components
+
+### 1. Select (Radix Primitives)
+
+Low-level primitives with icon and badge support.
+
+```tsx
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@djangocfg/ui-core';
+
+// With icon in trigger
+<Select>
+  <SelectTrigger icon={MailIcon}>
+    <SelectValue placeholder="Select email" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="work" icon={BriefcaseIcon} badge="Work">
+      john@company.com
+    </SelectItem>
+    <SelectItem value="personal" icon={HomeIcon}>
+      john@gmail.com
+    </SelectItem>
+  </SelectContent>
+</Select>
+```
+
+### 2. Combobox
+
+Searchable single-select with icon and badge support.
+
+```tsx
+import { Combobox } from '@djangocfg/ui-core';
+
+// Basic usage
+<Combobox
+  options={[
+    { 
+      value: 'react', 
+      label: 'React',
+      icon: ReactIcon,
+      badge: 'Popular',
+      style: { badgeColor: '#3b82f6' }
+    },
+    { 
+      value: 'vue', 
+      label: 'Vue',
+      icon: VueIcon,
+      badge: 'New',
+      style: { gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }
+    },
+  ]}
+  value={selected}
+  onValueChange={setSelected}
+/>
+
+// With custom render
+<Combobox
+  options={frameworks}
+  renderValue={(option) => (
+    <div className="flex items-center gap-2">
+      {option?.icon && <option.icon className="h-4 w-4" />}
+      <span>{option?.label}</span>
+      {option?.badge && <Badge>{option.badge}</Badge>}
+    </div>
+  )}
+/>
+```
+
+### 3. MultiSelectPro
+
+Advanced multi-select with badges, icons, animations.
+
+```tsx
+import { MultiSelectPro } from '@djangocfg/ui-core';
+
+<MultiSelectPro
+  options={[
+    { 
+      label: 'JavaScript', 
+      value: 'js',
+      icon: JsIcon,
+      style: { badgeColor: '#f7df1e', iconColor: '#000' }
+    },
+    { 
+      label: 'TypeScript', 
+      value: 'ts',
+      icon: TsIcon,
+      badge: 'Recommended',
+      style: { badgeColor: '#3178c6' }
+    },
+    { 
+      label: 'Python', 
+      value: 'py',
+      icon: PythonIcon,
+      description: 'Great for ML/AI'
+    },
+  ]}
+  onValueChange={setSelected}
+  maxCount={3}
+  variant="default"
+/>
+
+// With groups
+<MultiSelectPro
+  options={[
+    {
+      heading: 'Frontend',
+      options: [
+        { label: 'React', value: 'react', icon: ReactIcon },
+        { label: 'Vue', value: 'vue', icon: VueIcon },
+      ]
+    },
+    {
+      heading: 'Backend',
+      options: [
+        { label: 'Node.js', value: 'node', icon: NodeIcon },
+        { label: 'Django', value: 'django', icon: DjangoIcon },
+      ]
+    }
+  ]}
+/>
+```
+
+### 4. MultiSelectProAsync
+
+Async version with debounced search.
+
+```tsx
+import { MultiSelectProAsync } from '@djangocfg/ui-core';
+
+<MultiSelectProAsync
+  options={loadedOptions}
+  searchValue={search}
+  onSearchChange={(value) => {
+    setSearch(value);
+    debouncedSearch(value); // Your async search
+  }}
+  isLoading={isLoading}
+  onValueChange={setSelected}
+/>
+```
+
+### 5. Option Builders
+
+Helper utilities for creating options from data.
+
+```tsx
+import { createOption, createOptions } from '@djangocfg/ui-core';
+
+// Single option builder
+const buildUserOption = createOption({
+  getValue: (user) => user.id,
+  getLabel: (user) => user.name,
+  getDescription: (user) => user.email,
+  getIcon: (user) => user.avatar ? AvatarIcon : UserIcon,
+  getStyle: (user) => user.isPremium 
+    ? { gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' }
+    : undefined,
+});
+
+const option = buildUserOption(user);
+
+// Batch create options
+const options = createOptions(users, {
+  getValue: (u) => u.id,
+  getLabel: (u) => u.name,
+  getDescription: (u) => u.role,
+  isDisabled: (u) => !u.isActive,
+});
+```
+
+## Option API
+
+All components share the same option interface:
+
+```typescript
+interface BaseSelectOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  badge?: string | React.ReactNode;
+  disabled?: boolean;
+  style?: {
+    badgeColor?: string;
+    iconColor?: string;
+    gradient?: string;
+  };
+}
+```
+
+### Examples
+
+```tsx
+// Minimal
+{ value: 'a', label: 'Option A' }
+
+// With icon
+{ value: 'b', label: 'Option B', icon: MailIcon }
+
+// With badge
+{ value: 'c', label: 'Option C', badge: 'New' }
+
+// With description
+{ value: 'd', label: 'Option D', description: 'Extra info here' }
+
+// Full featured
+{
+  value: 'e',
+  label: 'Premium Option',
+  icon: StarIcon,
+  badge: '⭐ Premium',
+  description: 'Includes all features',
+  style: {
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    iconColor: '#fff'
+  }
+}
+
+// Disabled
+{ value: 'f', label: 'Disabled', disabled: true }
+```
+
+## Migration
+
+### Old imports (still work for backwards compatibility)
+
+```tsx
+import { Combobox, Select, MultiSelectPro } from '@djangocfg/ui-core';
+```
+
+### New imports (recommended)
+
+```tsx
+import { 
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+  Combobox,
+  MultiSelectPro,
+  MultiSelectProAsync,
+  createOption,
+  createOptions,
+} from '@djangocfg/ui-core';
+
+// Or deep import
+import { Combobox } from '@djangocfg/ui-core/components/select';
+```
+
+## What's New
+
+✅ **Icon support** — all components can display icons in options and triggers  
+✅ **Badge support** — display badges in triggers and dropdown items  
+✅ **Custom styling** — gradient badges, custom colors via `style` prop  
+✅ **Unified API** — consistent option interface across all components  
+✅ **Organized structure** — all select components in one place

package/src/components/{combobox.story.tsx → select/combobox.story.tsx}

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { defineStory, useBoolean } from '@djangocfg/playground';
-import { Combobox, type ComboboxOption } from './combobox';
-import { Label } from './label';
+import { Combobox, type ComboboxOption } from '.';
+import { Label } from '../forms/label';
 
 export default defineStory({
   title: 'Core/Combobox',

package/src/components/{combobox.tsx → select/combobox.tsx}

@@ -4,19 +4,27 @@ import { Check, ChevronsUpDown } from 'lucide-react';
 import * as React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../hooks/useStoredValue';
-import { cn } from '../lib/utils';
-import { Button } from './button';
+import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../../hooks/useStoredValue';
+import { cn } from '../../lib/utils';
+import { Badge } from '../data/badge';
+import { Button } from '../forms/button';
 import {
-    Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
-} from './command';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
+  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
+} from '../navigation/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 
 export interface ComboboxOption {
   value: string
   label: string
   description?: string
+  icon?: React.ComponentType<{ className?: string }>
+  badge?: string | React.ReactNode
   disabled?: boolean
+  style?: {
+    badgeColor?: string
+    iconColor?: string
+    gradient?: string
+  }
 }
 
 export interface ComboboxProps {
@@ -194,6 +202,32 @@ export function Combobox({
     [value, storageKey, setStoredValue, controlledValue, onValueChange],
   );
 
+  // Render badge for selected option in trigger
+  const renderSelectedBadge = (option: ComboboxOption) => {
+    const { style, icon: Icon, badge } = option;
+    const badgeStyle: React.CSSProperties = {};
+
+    if (style?.gradient) {
+      badgeStyle.background = style.gradient;
+      badgeStyle.color = style.iconColor || "white";
+    } else if (style?.badgeColor) {
+      badgeStyle.backgroundColor = style.badgeColor;
+      badgeStyle.color = style.iconColor || "white";
+    }
+
+    return (
+      <div className="flex items-center gap-2">
+        {Icon && <Icon className="h-4 w-4 shrink-0" />}
+        <span className="truncate">{option.label}</span>
+        {badge && (
+          <Badge variant="secondary" className="text-xs" style={Object.keys(badgeStyle).length > 0 ? badgeStyle : undefined}>
+            {badge}
+          </Badge>
+        )}
+      </div>
+    );
+  };
+
   return (
     <Popover
       open={open}
@@ -219,7 +253,7 @@ export function Combobox({
           {renderValue && selectedOption
             ? renderValue(selectedOption)
             : selectedOption
-            ? selectedOption.label
+            ? renderSelectedBadge(selectedOption)
             : resolvedPlaceholder}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
@@ -266,11 +300,19 @@ export function Combobox({
                         value === option.value ? "opacity-100" : "opacity-0"
                       )}
                     />
+                    {option.icon && <option.icon className="mr-2 h-4 w-4 shrink-0" />}
                     {renderOption ? (
                       renderOption(option)
                     ) : (
                       <div className="flex flex-col flex-1 min-w-0">
-                        <span className="truncate">{option.label}</span>
+                        <div className="flex items-center gap-2 truncate">
+                          <span className="truncate">{option.label}</span>
+                          {option.badge && (
+                            <Badge variant="outline" className="text-xs shrink-0">
+                              {option.badge}
+                            </Badge>
+                          )}
+                        </div>
                         {option.description && (
                           <span className="text-xs text-muted-foreground truncate">
                             {option.description}

package/src/components/{country-select.story.tsx → select/country-select.story.tsx}

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { defineStory } from '@djangocfg/playground';
 import { CountrySelect, type TCountryCode } from './country-select';
-import { Label } from './label';
+import { Label } from '../forms/label';
 
 export default defineStory({
   title: 'Core/CountrySelect',

package/src/components/{country-select.tsx → select/country-select.tsx}

@@ -4,16 +4,16 @@ import { Check, ChevronsUpDown, Search, X } from 'lucide-react';
 import * as React from 'react';
 import { countries, getEmojiFlag, type TCountryCode } from 'countries-list';
 
-import { cn } from '../lib/utils';
-import { Badge } from './badge';
-import { Button } from './button';
-import { Checkbox } from './checkbox';
+import { cn } from '../../lib/utils';
+import { Badge } from '../data/badge';
+import { Button } from '../forms/button';
+import { Checkbox } from '../forms/checkbox';
 import {
   Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
-} from './command';
-import { Input } from './input';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import { ScrollArea } from './scroll-area';
+} from '../navigation/command';
+import { Input } from '../forms/input';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { ScrollArea } from '../layout/scroll-area';
 
 export interface CountryOption {
   code: TCountryCode;

package/src/components/{multi-select-pro → select}/helpers.tsx

@@ -2,8 +2,8 @@
  * Helper utilities for MultiSelectPro components
  */
 
-import type { MultiSelectProOption } from './index'
-import type { MultiSelectProAsyncOption } from './async'
+import type { MultiSelectProOption } from './multi-select-pro'
+import type { MultiSelectProAsyncOption } from './multi-select-pro-async'
 
 // ==================== TYPES ====================