@djangocfg/ui-core 2.1.260 → 2.1.261

package/src/components/select/index.ts

@@ -0,0 +1,59 @@
+/**
+ * Select Components - Unified Collection
+ * 
+ * All select-based components in one place:
+ * - Select: Radix UI primitives with icon/badge support
+ * - Combobox: Searchable single-select with icon/badge support
+ * - MultiSelectPro: Multi-select with badges, icons, animations
+ * - MultiSelectProAsync: Async multi-select with all features
+ */
+
+// Radix Select primitives (enhanced)
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './select';
+
+// Combobox
+export { Combobox } from './combobox';
+export type { ComboboxOption, ComboboxProps } from './combobox';
+
+// MultiSelectPro
+export { MultiSelectPro } from './multi-select-pro';
+export type {
+  MultiSelectProOption,
+  MultiSelectProGroup,
+  MultiSelectProProps,
+  MultiSelectProRef,
+  AnimationConfig,
+  ResponsiveConfig,
+} from './multi-select-pro';
+
+// MultiSelectPro Async
+export { MultiSelectProAsync } from './multi-select-pro-async';
+export type {
+  MultiSelectProAsyncProps,
+  MultiSelectProAsyncOption,
+  MultiSelectProAsyncGroup,
+  MultiSelectProAsyncRef,
+} from './multi-select-pro-async';
+
+// Helpers
+export { createOption, createOptions } from './helpers';
+export type { OptionBuilderConfig } from './helpers';
+
+// Shared types
+export type {
+  BaseSelectOption,
+  SelectOptionGroup,
+  BadgeStyle,
+  SelectAnimationConfig,
+} from './types';

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

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

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

@@ -4,7 +4,7 @@ import { Check, ChevronsUpDown, Search, X } from 'lucide-react';
 import * as React from 'react';
 import { languages, getEmojiFlag, type TLanguageCode, type TCountryCode } from 'countries-list';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../lib/utils';
 
 /**
  * Mapping of language codes (ISO 639-1) to primary country codes (ISO 3166-1 alpha-2)
@@ -285,15 +285,15 @@ export function getLanguageFlag(languageCode: TLanguageCode | string): string {
   if (!countryCode) return '';
   return getEmojiFlag(countryCode);
 }
-import { Badge } from './badge';
-import { Button } from './button';
-import { Checkbox } from './checkbox';
+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 LanguageOption {
   code: TLanguageCode;

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

@@ -18,11 +18,11 @@ import { Check, ChevronsUpDown, Loader2, X, XCircle } from 'lucide-react';
 import * as React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { Badge } from '../badge';
-import { Button } from '../button';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../command';
-import { Popover, PopoverContent, PopoverTrigger } from '../popover';
-import { Separator } from '../separator';
+import { Badge } from '../data/badge';
+import { Button } from '../forms/button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../navigation/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { Separator } from '../layout/separator';
 import { cn } from '../../lib';
 
 // ==================== TYPES ====================

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

@@ -5,11 +5,11 @@ import { Check, ChevronsUpDown, X, XCircle } from 'lucide-react';
 import * as React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { Badge } from '../badge';
-import { Button } from '../button';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../command';
-import { Popover, PopoverContent, PopoverTrigger } from '../popover';
-import { Separator } from '../separator';
+import { Badge } from '../data/badge';
+import { Button } from '../forms/button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../navigation/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { Separator } from '../layout/separator';
 import { cn } from '../../lib';
 
 // ==================== TYPES ====================

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

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

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

@@ -4,14 +4,14 @@ import { Check, ChevronsUpDown, X } 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 { Badge } from './badge';
-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';
+} from '../navigation/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 
 export interface MultiSelectOption {
   value: string

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

@@ -1,6 +1,6 @@
 import { defineStory, useBoolean } from '@djangocfg/playground';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
-import { Label } from './label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.';
+import { Label } from '../forms/label';
 
 export default defineStory({
   title: 'Core/Select',

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

@@ -5,7 +5,8 @@ import * as React from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../lib/utils';
+import { Badge } from '../data/badge';
 
 const Select = SelectPrimitive.Root
 
@@ -15,8 +16,10 @@ const SelectValue = SelectPrimitive.Value
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    icon?: React.ComponentType<{ className?: string }>;
+  }
+>(({ className, children, icon: Icon, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -25,7 +28,10 @@ const SelectTrigger = React.forwardRef<
     )}
     {...props}
   >
-    {children}
+    <span className="flex items-center gap-2 flex-1 min-w-0">
+      {Icon && <Icon className="h-4 w-4 shrink-0" />}
+      {children}
+    </span>
     <SelectPrimitive.Icon asChild>
       <ChevronDownIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
@@ -114,8 +120,12 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & { key?: React.Key }
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & { 
+    key?: React.Key;
+    icon?: React.ComponentType<{ className?: string }>;
+    badge?: string | React.ReactNode;
+  }
+>(({ className, children, icon: Icon, badge, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
@@ -129,7 +139,15 @@ const SelectItem = React.forwardRef<
         <CheckIcon className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <div className="flex items-center gap-2 flex-1 min-w-0 pr-6">
+      {Icon && <Icon className="h-4 w-4 shrink-0" />}
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      {badge && (
+        <Badge variant="outline" className="text-xs shrink-0">
+          {badge}
+        </Badge>
+      )}
+    </div>
   </SelectPrimitive.Item>
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName

package/src/components/select/types.ts

@@ -0,0 +1,57 @@
+/**
+ * Shared types for all select-based components
+ */
+
+import type { ReactNode } from 'react';
+
+/**
+ * Base option interface for all select components
+ */
+export interface BaseSelectOption {
+  /** Unique value */
+  value: string;
+  /** Display label */
+  label: string;
+  /** Optional description/subtitle */
+  description?: string;
+  /** Optional icon component */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Optional badge text */
+  badge?: string | ReactNode;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+  /** Custom styling for badge/icon */
+  style?: {
+    badgeColor?: string;
+    iconColor?: string;
+    gradient?: string;
+  };
+}
+
+/**
+ * Group of options with heading
+ */
+export interface SelectOptionGroup {
+  heading: string;
+  options: BaseSelectOption[];
+}
+
+/**
+ * Style configuration for badge
+ */
+export interface BadgeStyle {
+  badgeColor?: string;
+  iconColor?: string;
+  gradient?: string;
+}
+
+/**
+ * Animation configuration for select components
+ */
+export interface SelectAnimationConfig {
+  badgeAnimation?: 'bounce' | 'pulse' | 'wiggle' | 'fade' | 'slide' | 'none';
+  popoverAnimation?: 'scale' | 'slide' | 'fade' | 'flip' | 'none';
+  optionHoverAnimation?: 'highlight' | 'scale' | 'glow' | 'none';
+  duration?: number;
+  delay?: number;
+}

package/src/components/{copy.story.tsx → specialized/copy/copy.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { CopyButton, CopyField } from './copy';
+import { CopyButton, CopyField } from '.';
 
 export default defineStory({
   title: 'Core/Copy',

package/src/components/{copy.tsx → specialized/copy/index.tsx}

@@ -4,8 +4,8 @@ import { Check, Copy } from 'lucide-react';
 import * as React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { cn } from '../lib/utils';
-import { Button } from './button';
+import { cn } from '../../../lib/utils';
+import { Button } from '../../forms/button';
 
 // =============================================================================
 // CopyButton - Copy button with icon feedback

package/src/components/{image-with-fallback.story.tsx → specialized/image-with-fallback/image-with-fallback.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { ImageWithFallback } from './image-with-fallback';
+import { ImageWithFallback } from '.';
 
 export default defineStory({
   title: 'Core/ImageWithFallback',

package/src/components/{image-with-fallback.tsx → specialized/image-with-fallback/index.tsx}

@@ -7,8 +7,8 @@
 import { Car, ImageIcon, MapPin, Package, User } from 'lucide-react';
 import React, { forwardRef } from 'react';
 
-import { useImageLoader } from '../hooks/useImageLoader';
-import { cn } from '../lib/utils';
+import { useImageLoader } from '../../../hooks/useImageLoader';
+import { cn } from '../../../lib/utils';
 
 export interface ImageWithFallbackProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onLoad' | 'onError'> {
   src?: string;

package/src/components/{item.tsx → specialized/item/index.tsx}

@@ -5,8 +5,8 @@ import * as React from 'react';
 
 import { Slot } from '@radix-ui/react-slot';
 
-import { cn } from '../lib/utils';
-import { Separator } from './separator';
+import { cn } from '../../../lib/utils';
+import { Separator } from '../../layout/separator';
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/{kbd.tsx → specialized/kbd/index.tsx}

@@ -1,4 +1,4 @@
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type KbdSize = "xs" | "sm" | "default" | "lg";
 

package/src/components/{kbd.story.tsx → specialized/kbd/kbd.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { Kbd, KbdGroup } from './kbd';
+import { Kbd, KbdGroup } from '.';
 
 export default defineStory({
   title: 'Core/Kbd',

package/src/components/{token-icon.tsx → specialized/token-icon/index.tsx}

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface TokenIconProps extends React.HTMLAttributes<HTMLDivElement> {
   symbol: string

package/src/lib/dialog-service/dialog-service.story.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { defineStory } from '@djangocfg/playground';
-import { Button } from '../../components/button';
+import { Button } from '../../components/forms/button';
 import { DialogProvider } from './DialogProvider';
 import { useDialog } from './hooks';
 

package/src/lib/dialog-service/dialogs/AlertDialogUI.tsx

@@ -10,7 +10,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '../../../components/alert-dialog';
+} from '../../../components/overlay/alert-dialog';
 import { useHotkey } from '../../../hooks/useHotkey';
 import { I18N_KEYS } from '../constants';
 import type { DialogOptions } from '../types';

package/src/lib/dialog-service/dialogs/ConfirmDialogUI.tsx

@@ -11,8 +11,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '../../../components/alert-dialog';
-import { buttonVariants } from '../../../components/button';
+} from '../../../components/overlay/alert-dialog';
+import { buttonVariants } from '../../../components/forms/button';
 import { useHotkey } from '../../../hooks/useHotkey';
 import { cn } from '../../utils';
 import { I18N_KEYS } from '../constants';

package/src/lib/dialog-service/dialogs/PromptDialogUI.tsx

@@ -9,9 +9,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '../../../components/dialog';
-import { Button } from '../../../components/button';
-import { Input } from '../../../components/input';
+} from '../../../components/overlay/dialog';
+import { Button } from '../../../components/forms/button';
+import { Input } from '../../../components/forms/input';
 import { useHotkey } from '../../../hooks/useHotkey';
 import { I18N_KEYS } from '../constants';
 import type { DialogOptions } from '../types';

package/src/stories/index.ts

@@ -6,14 +6,14 @@
  
  import type { StoryModule } from '@djangocfg/playground';
  
- import * as Button from '../components/button.story';
- import * as Input from '../components/input.story';
- import * as Select from '../components/select.story';
- import * as Slider from '../components/slider.story';
- import * as Dialog from '../components/dialog.story';
- import * as Tabs from '../components/tabs.story';
- import * as Popover from '../components/popover.story';
- import * as Tooltip from '../components/tooltip.story';
+ import * as Button from '../components/forms/button/button.story';
+ import * as Input from '../components/forms/input/input.story';
+ import * as Select from '../components/select/select.story';
+ import * as Slider from '../components/forms/slider/slider.story';
+ import * as Dialog from '../components/overlay/dialog/dialog.story';
+ import * as Tabs from '../components/navigation/tabs/tabs.story';
+ import * as Popover from '../components/overlay/popover/popover.story';
+ import * as Tooltip from '../components/overlay/tooltip/tooltip.story';
  
  export const uiCoreStoryModules: Record<string, StoryModule> = {
    'button.story.tsx': Button,