@djangocfg/ui-core 1.0.1

package/src/components/image-with-fallback.tsx

@@ -0,0 +1,170 @@
+/**
+ * Enhanced Image with Fallback Component
+ * 
+ * Advanced image component with loading states, error handling, and customizable fallbacks
+ */
+
+import React, { forwardRef } from 'react';
+import { Car, ImageIcon, User, Package, MapPin } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { useImageLoader } from '../hooks/useImageLoader';
+
+export interface ImageWithFallbackProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onLoad' | 'onError'> {
+  src?: string;
+  alt?: string;
+  className?: string;
+  
+  // Fallback options
+  fallbackIcon?: 'car' | 'image' | 'user' | 'package' | 'location';
+  fallbackContent?: React.ReactNode;
+  showLoadingState?: boolean;
+  
+  // Loading placeholder
+  placeholder?: string;
+  blurDataURL?: string;
+  
+  // Callbacks
+  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onLoadStart?: () => void;
+  
+  // Performance
+  priority?: boolean;
+  unoptimized?: boolean;
+}
+
+export const ImageWithFallback = forwardRef<HTMLImageElement, ImageWithFallbackProps>(({
+  src,
+  alt = '',
+  className,
+  
+  // Fallback options
+  fallbackIcon = 'sparkles',
+  fallbackContent,
+  showLoadingState = true,
+  
+  // Loading placeholder
+  placeholder,
+  blurDataURL,
+  
+  // Callbacks
+  onLoad,
+  onError,
+  onLoadStart,
+  
+  // Performance
+  priority = false,
+  unoptimized = false,
+  
+  // Standard img attributes
+  width,
+  height,
+  sizes,
+  loading = priority ? 'eager' : 'lazy',
+  decoding = 'async',
+  ...imgProps
+}, ref) => {
+  const { isLoading, isLoaded, hasError } = useImageLoader(src, {
+    onLoadStart,
+    onLoad,
+    onError,
+  });
+
+  // Get fallback icon
+  const getFallbackIcon = () => {
+    switch (fallbackIcon) {
+      case 'car': return Car;
+      case 'user': return User;
+      case 'package': return Package;
+      case 'location': return MapPin;
+      case 'image':
+      default: return ImageIcon;
+    }
+  };
+
+  const FallbackIcon = getFallbackIcon();
+
+  // Custom fallback content
+  if (hasError || !src) {
+    if (fallbackContent) {
+      return (
+        <div className={cn('flex items-center justify-center', className)}>
+          {fallbackContent}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          'flex items-center justify-center bg-muted/30 text-muted-foreground/50',
+          'transition-colors duration-200',
+          className
+        )}
+      >
+        <FallbackIcon className="h-8 w-8" />
+      </div>
+    );
+  }
+
+  // Loading state
+  if (isLoading && showLoadingState) {
+    return (
+      <div className={cn('relative overflow-hidden', className)}>
+        {/* Blur placeholder if available */}
+        {(placeholder || blurDataURL) && (
+          <img
+            src={placeholder || blurDataURL}
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover blur-sm scale-110"
+            aria-hidden="true"
+          />
+        )}
+        
+        {/* Loading overlay */}
+        <div className={cn(
+          'absolute inset-0 flex items-center justify-center',
+          'bg-muted/20 text-muted-foreground/30 animate-pulse',
+          'backdrop-blur-sm'
+        )}>
+          <FallbackIcon className="h-6 w-6" />
+        </div>
+      </div>
+    );
+  }
+
+  // Successfully loaded image
+  if (isLoaded) {
+    return (
+      <img
+        ref={ref}
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        sizes={sizes}
+        loading={loading}
+        decoding={decoding}
+        className={cn('object-cover transition-opacity duration-300', className)}
+        onLoad={onLoad}
+        onError={onError}
+        {...imgProps}
+      />
+    );
+  }
+
+  // Initial render fallback
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center bg-muted/20 text-muted-foreground/30',
+        'transition-colors duration-200',
+        className
+      )}
+    >
+      <FallbackIcon className="h-6 w-6" />
+    </div>
+  );
+});
+
+ImageWithFallback.displayName = 'ImageWithFallback';

package/src/components/index.ts

@@ -0,0 +1,86 @@
+// Basic Components
+export { Button, ButtonLink, buttonVariants } from './button';
+export type { ButtonProps, ButtonLinkProps } from './button';
+export { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from './card';
+export { Badge } from './badge';
+export { Input } from './input';
+export { Textarea } from './textarea';
+export { Label } from './label';
+export { Section, SectionHeader } from './section';
+export { ImageWithFallback } from './image-with-fallback';
+
+// Form Components
+export { Checkbox } from './checkbox';
+export { RadioGroup, RadioGroupItem } from './radio-group';
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+export { Combobox } from './combobox';
+export type { ComboboxOption, ComboboxProps } from './combobox';
+export { MultiSelect } from './multi-select';
+export type { MultiSelectOption, MultiSelectProps } from './multi-select';
+export { Switch } from './switch';
+export { Slider } from './slider';
+export { InputOTP, InputOTPGroup, InputOTPSlot } from './input-otp';
+
+// Layout Components
+export { Separator } from './separator';
+export { Skeleton } from './skeleton';
+export { AspectRatio } from './aspect-ratio';
+export { ScrollArea, ScrollBar } from './scroll-area';
+export type { ScrollAreaHandle, ScrollAreaProps } from './scroll-area';
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable';
+export type { ResizableHandleProps } from './resizable';
+export { Sticky } from './sticky';
+export { Portal } from './portal';
+export type { PortalProps } from './portal';
+
+// Overlay Components
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from './dialog';
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from './alert-dialog';
+export { Popover, PopoverContent, PopoverTrigger } from './popover';
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './sheet';
+export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from './drawer';
+export { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+
+// Data Display Components
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from './table';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+export { Progress } from './progress';
+export { Avatar, AvatarFallback, AvatarImage } from './avatar';
+export { Calendar } from './calendar';
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './carousel';
+export { TokenIcon, getAllTokenSymbols, searchTokens, getTokensByCategory } from './token-icon';
+export type { TokenIconProps, TokenSymbol, TokenCategory } from './token-icon';
+
+// Chart Components
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle } from './chart';
+
+// Interactive Components
+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';
+
+// 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';
+export { ButtonGroup } from './button-group';
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from './empty';
+export { Spinner } from './spinner';
+export { Preloader, PreloaderSkeleton } from './preloader';
+export type { PreloaderProps, PreloaderSkeletonProps } from './preloader';
+export { Kbd, KbdGroup } from './kbd';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea } from './input-group';
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter } from './item';
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle } from './field';
+
+export { CopyButton, CopyField } from './copy';
+export type { CopyButtonProps, CopyFieldProps } from './copy';
+export { OgImage } from './og-image';
+export type { OgImageProps } from './og-image';

package/src/components/input-group.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
+        "h-9 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/src/components/input-otp.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext, type OTPInputProps as BaseOTPInputProps } from "input-otp"
+import { cn } from "../lib/utils"
+import { MinusIcon } from "@radix-ui/react-icons"
+
+type ChildrenBranch = Extract<BaseOTPInputProps, { render?: never }>;
+type InputOTPProps = Omit<ChildrenBranch, 'className' | 'containerClassName'> & {
+  className?: string;
+  containerClassName?: string;
+} & {
+  children: React.ReactNode;
+}
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  InputOTPProps
+>(({ className, containerClassName, children, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  >
+    {children}
+  </OTPInput>
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const slot = inputOTPContext.slots[index]
+  if (!slot) return null
+  const { char, hasFakeCaret, isActive } = slot
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <MinusIcon />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/components/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }