@djangocfg/ui-core 2.1.90 → 2.1.92

package/README.md

@@ -1,6 +1,6 @@
 # @djangocfg/ui-core
 
-Pure React UI library with 60+ components built on Radix UI + Tailwind CSS v4.
+Pure React UI library with 60 components built on Radix UI + Tailwind CSS v4.
 
 **No Next.js dependencies** — works with Electron, Vite, CRA, and any React environment.
 
@@ -21,7 +21,7 @@ pnpm add @djangocfg/ui-core
 | `@djangocfg/ui-core` | Electron, Vite, CRA, any React app |
 | `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
 
-## Components (61)
+## Components (60)
 
 ### Forms (16)
 `Label` `Button` `ButtonLink` `Input` `Checkbox` `RadioGroup` `Select` `Textarea` `Switch` `Slider` `Combobox` `MultiSelect` `InputOTP` `PhoneInput` `Form` `Field`
@@ -32,8 +32,8 @@ pnpm add @djangocfg/ui-core
 ### Overlay (7)
 `Dialog` `AlertDialog` `Sheet` `Drawer` `Popover` `HoverCard` `Tooltip`
 
-### Feedback (6)
-`Toast` `Toaster` `Alert` `Progress` `Badge` `Avatar`
+### Feedback (5)
+`Toaster` `Alert` `Progress` `Badge` `Avatar`
 
 ### Data (8)
 `Table` `Tabs` `Accordion` `Collapsible` `Toggle` `ToggleGroup` `Calendar` `Carousel`
@@ -55,22 +55,21 @@ pnpm add @djangocfg/ui-core
 | `useDebounce` | Debounce values |
 | `useDebouncedCallback` | Debounced callbacks |
 | `useImageLoader` | Image loading state |
-| `useToast` | Toast notifications |
+| `useToast` / `toast` | Toast notifications (Sonner) |
 | `useEventListener` | Event bus |
 | `useDebugTools` | Debug utilities |
 
 ## Usage
 
 ```tsx
-import { Button, Card, Input, useToast } from '@djangocfg/ui-core';
+import { Button, Card, Input } from '@djangocfg/ui-core';
+import { toast } from '@djangocfg/ui-core/hooks';
 
 function Example() {
-  const { toast } = useToast();
-
   return (
     <Card>
       <Input placeholder="Email" />
-      <Button onClick={() => toast({ title: 'Saved!' })}>
+      <Button onClick={() => toast.success('Saved!')}>
         Submit
       </Button>
     </Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.90",
+  "version": "2.1.92",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -53,7 +53,9 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
     "tailwindcss": "^4.0.0",
-    "zod": "^4.0.0"
+    "zod": "^4.0.0",
+    "zustand": "^5.0.0",
+    "consola": "^3.4.2"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
@@ -102,7 +104,7 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.90",
+    "@djangocfg/typescript-config": "^2.1.92",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/button-download.tsx

@@ -0,0 +1,276 @@
+"use client"
+
+import { AlertCircle, CheckCircle2, Download, Loader2 } from 'lucide-react';
+import * as React from 'react';
+
+import { Button, type ButtonProps } from './button';
+import { cn } from '../lib';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+
+// Token key used by the API client
+const TOKEN_KEY = "auth_token"
+
+export interface DownloadButtonProps extends Omit<ButtonProps, 'onClick'> {
+  /**
+   * URL to download from
+   */
+  url: string
+
+  /**
+   * Optional filename override. If not provided, will try to extract from Content-Disposition header
+   */
+  filename?: string
+
+  /**
+   * Optional callback when download starts
+   */
+  onDownloadStart?: () => void
+
+  /**
+   * Optional callback when download completes
+   */
+  onDownloadComplete?: (filename: string) => void
+
+  /**
+   * Optional callback when download fails
+   */
+  onDownloadError?: (error: Error) => void
+
+  /**
+   * Use fetch API for download (allows progress tracking and auth headers)
+   * Default: true
+   */
+  useFetch?: boolean
+
+  /**
+   * Show download status icons (loading, success, error)
+   * Default: true
+   */
+  showStatus?: boolean
+
+  /**
+   * Auto-reset status after success/error (in ms)
+   * Default: 2000
+   */
+  statusResetDelay?: number
+
+  /**
+   * Method for download (GET or POST)
+   * Default: GET
+   */
+  method?: 'GET' | 'POST'
+
+  /**
+   * Optional request body for POST requests
+   */
+  body?: any
+}
+
+type DownloadStatus = 'idle' | 'downloading' | 'success' | 'error'
+
+const DownloadButton = React.forwardRef<HTMLButtonElement, DownloadButtonProps>(
+  (
+    {
+      url,
+      filename,
+      onDownloadStart,
+      onDownloadComplete,
+      onDownloadError,
+      useFetch = true,
+      showStatus = true,
+      statusResetDelay = 2000,
+      method = 'GET',
+      body,
+      children,
+      disabled,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [status, setStatus] = React.useState<DownloadStatus>('idle')
+    const resetTimeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
+
+    // Get auth token from localStorage
+    const [token] = useLocalStorage<string>(TOKEN_KEY, '')
+
+    // Clean up timeout on unmount
+    React.useEffect(() => {
+      return () => {
+        if (resetTimeoutRef.current) {
+          clearTimeout(resetTimeoutRef.current)
+        }
+      }
+    }, [])
+
+    /**
+     * Extract filename from Content-Disposition header
+     */
+    const extractFilename = (headers: Headers): string | null => {
+      const disposition = headers.get('Content-Disposition')
+      if (!disposition) return null
+
+      // Try to match: filename*=UTF-8''example.txt or filename="example.txt"
+      const filenameMatch = disposition.match(/filename\*?=(?:UTF-8'')?["']?([^"';]+)["']?/i)
+      if (filenameMatch && filenameMatch[1]) {
+        return decodeURIComponent(filenameMatch[1])
+      }
+
+      return null
+    }
+
+    /**
+     * Trigger browser download for blob
+     */
+    const triggerDownload = (blob: Blob, downloadFilename: string) => {
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = downloadFilename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      window.URL.revokeObjectURL(url)
+    }
+
+    /**
+     * Reset status after delay
+     */
+    const scheduleStatusReset = () => {
+      if (resetTimeoutRef.current) {
+        clearTimeout(resetTimeoutRef.current)
+      }
+      resetTimeoutRef.current = setTimeout(() => {
+        setStatus('idle')
+      }, statusResetDelay)
+    }
+
+    /**
+     * Download using fetch API (supports auth, progress, error handling)
+     */
+    const downloadWithFetch = async () => {
+      try {
+        setStatus('downloading')
+        onDownloadStart?.()
+
+        const headers: HeadersInit = {}
+
+        // Add authorization header if token is available
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const options: RequestInit = {
+          method,
+          headers,
+        }
+
+        if (method === 'POST' && body) {
+          options.body = JSON.stringify(body)
+          options.headers = {
+            ...options.headers,
+            'Content-Type': 'application/json',
+          }
+        }
+
+        const response = await fetch(url, options)
+
+        if (!response.ok) {
+          throw new Error(`Download failed: ${response.status} ${response.statusText}`)
+        }
+
+        const blob = await response.blob()
+
+        // Determine filename
+        const downloadFilename =
+          filename ||
+          extractFilename(response.headers) ||
+          `download-${Date.now()}.bin`
+
+        // Trigger download
+        triggerDownload(blob, downloadFilename)
+
+        setStatus('success')
+        onDownloadComplete?.(downloadFilename)
+        scheduleStatusReset()
+      } catch (error) {
+        console.error('Download error:', error)
+        setStatus('error')
+        onDownloadError?.(error as Error)
+        scheduleStatusReset()
+      }
+    }
+
+    /**
+     * Simple download using window.open (fallback)
+     */
+    const downloadWithWindowOpen = () => {
+      try {
+        setStatus('downloading')
+        onDownloadStart?.()
+        window.open(url, '_blank')
+
+        // We can't really track success/failure with window.open
+        // So just assume success after a short delay
+        setTimeout(() => {
+          setStatus('success')
+          onDownloadComplete?.(filename || 'file')
+          scheduleStatusReset()
+        }, 500)
+      } catch (error) {
+        console.error('Download error:', error)
+        setStatus('error')
+        onDownloadError?.(error as Error)
+        scheduleStatusReset()
+      }
+    }
+
+    /**
+     * Handle download click
+     */
+    const handleDownload = () => {
+      if (status === 'downloading') return
+
+      if (useFetch) {
+        downloadWithFetch()
+      } else {
+        downloadWithWindowOpen()
+      }
+    }
+
+    /**
+     * Render status icon
+     */
+    const renderStatusIcon = () => {
+      if (!showStatus) return null
+
+      switch (status) {
+        case 'downloading':
+          return <Loader2 className="animate-spin" />
+        case 'success':
+          return <CheckCircle2 className="text-green-600" />
+        case 'error':
+          return <AlertCircle className="text-red-600" />
+        default:
+          return <Download />
+      }
+    }
+
+    return (
+      <Button
+        ref={ref}
+        onClick={handleDownload}
+        disabled={disabled || status === 'downloading'}
+        className={cn(className)}
+        {...props}
+      >
+        {renderStatusIcon()}
+        {children}
+      </Button>
+    )
+  }
+)
+
+DownloadButton.displayName = "DownloadButton"
+
+export { DownloadButton }

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../lib';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-600 min-w-32 overflow-hidden rounded-sm border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-600 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-32 overflow-y-auto overflow-x-hidden rounded-sm border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-sm",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+    href?: string
+    key?: React.Key
+  }
+>(({ className, inset, href, children, ...props }, ref) => {
+  const classes = cn(
+    "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+    inset && "pl-8",
+    className
+  )
+
+  if (href) {
+    return (
+      <DropdownMenuPrimitive.Item asChild ref={ref} {...props}>
+        <a href={href} className={classes}>
+          {children}
+        </a>
+      </DropdownMenuPrimitive.Item>
+    )
+  }
+
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={classes}
+      {...props}
+    >
+      {children}
+    </DropdownMenuPrimitive.Item>
+  )
+})
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & { key?: React.Key }
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & { key?: React.Key }
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/components/index.ts

@@ -17,9 +17,15 @@ export { Combobox } from './combobox';
 export type { ComboboxOption, ComboboxProps } from './combobox';
 export { MultiSelect } from './multi-select';
 export type { MultiSelectOption, MultiSelectProps } from './multi-select';
+export { MultiSelectPro } from './multi-select-pro';
+export type { MultiSelectProOption, MultiSelectProGroup, MultiSelectProProps, MultiSelectProRef, AnimationConfig, ResponsiveConfig } from './multi-select-pro';
+export { MultiSelectProAsync } from './multi-select-pro/async';
+export type { MultiSelectProAsyncProps } from './multi-select-pro/async';
 export { Switch } from './switch';
 export { Slider } from './slider';
 export { InputOTP, InputOTPGroup, InputOTPSlot } from './input-otp';
+export { OTPInput, InputOTPSeparator, useSmartOTP } from './otp';
+export type { SmartOTPProps as OTPInputProps, OTPValidationMode, OTPPasteBehavior, OTPValidator } from './otp/types';
 
 // Layout Components
 export { Separator } from './separator';
@@ -64,11 +70,10 @@ export { Toggle } from './toggle';
 export { ToggleGroup, ToggleGroupItem } from './toggle-group';
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './command';
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from './context-menu';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup } from './dropdown-menu';
 
 // Feedback Components
 export { Alert, AlertDescription, AlertTitle } from './alert';
-export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './toast';
-export { Toaster } from './toaster';
 
 // Form Components
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './form';
@@ -85,5 +90,14 @@ export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegen
 
 export { CopyButton, CopyField } from './copy';
 export type { CopyButtonProps, CopyFieldProps } from './copy';
+export { DownloadButton } from './button-download';
+export type { DownloadButtonProps } from './button-download';
 export { OgImage } from './og-image';
 export type { OgImageProps } from './og-image';
+
+// Additional Components
+export { Toaster } from './sonner';
+export { PhoneInput } from './phone-input';
+export type { PhoneInputProps } from './phone-input';
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport } from './navigation-menu';
+export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarSub, MenubarShortcut } from './menubar';