@djangocfg/ui-core 1.0.1

package/src/components/preloader.tsx

@@ -0,0 +1,250 @@
+/**
+ * Preloader Component
+ *
+ * Universal loading indicator component with multiple variants
+ * Supports inline, fullscreen, and custom layouts
+ */
+
+'use client';
+
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Spinner } from './spinner';
+
+export interface PreloaderProps {
+  /**
+   * Loading text to display
+   * @default undefined (no text)
+   */
+  text?: string;
+
+  /**
+   * Additional description/subtitle text
+   */
+  description?: string;
+
+  /**
+   * Size variant
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * Variant: inline (fits container) or fullscreen (fixed overlay)
+   * @default 'inline'
+   */
+  variant?: 'inline' | 'fullscreen';
+
+  /**
+   * Show backdrop (only for fullscreen variant)
+   * @default true
+   */
+  backdrop?: boolean;
+
+  /**
+   * Backdrop opacity (0-100, only for fullscreen with backdrop)
+   * @default 80
+   */
+  backdropOpacity?: number;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * Spinner className override
+   */
+  spinnerClassName?: string;
+}
+
+const sizeMap = {
+  sm: 'h-4 w-4',
+  md: 'h-6 w-6',
+  lg: 'h-8 w-8',
+  xl: 'h-12 w-12',
+};
+
+/**
+ * Preloader - Universal loading indicator
+ *
+ * Features:
+ * - Multiple size variants (sm, md, lg, xl)
+ * - Inline or fullscreen variants
+ * - Optional text and description
+ * - Optional backdrop for fullscreen
+ * - Accessible (ARIA labels)
+ *
+ * @example
+ * ```tsx
+ * // Inline loading
+ * <Preloader text="Loading..." />
+ *
+ * // Fullscreen with backdrop
+ * <Preloader variant="fullscreen" text="Loading data..." />
+ *
+ * // Custom size
+ * <Preloader size="lg" text="Processing..." />
+ *
+ * // Without text
+ * <Preloader />
+ * ```
+ */
+export function Preloader({
+  text,
+  description,
+  size = 'md',
+  variant = 'inline',
+  backdrop = true,
+  backdropOpacity = 80,
+  className,
+  spinnerClassName,
+}: PreloaderProps) {
+  const spinnerSize = sizeMap[size];
+
+  // Fullscreen variant
+  if (variant === 'fullscreen') {
+    const backdropClasses = backdrop
+      ? backdropOpacity >= 90
+        ? 'bg-background/95'
+        : backdropOpacity >= 70
+          ? 'bg-background/90'
+          : backdropOpacity >= 50
+            ? 'bg-background/80'
+            : 'bg-background/60'
+      : 'bg-transparent';
+
+    return (
+      <div
+        className={cn(
+          'fixed inset-0 z-50 flex items-center justify-center',
+          backdropClasses,
+          className
+        )}
+        role="status"
+        aria-label={text || 'Loading'}
+        aria-live="polite"
+      >
+        <div className="flex flex-col items-center gap-4 animate-in fade-in duration-300">
+          {/* Spinner */}
+          <Loader2
+            className={cn('animate-spin text-primary', spinnerSize, spinnerClassName)}
+            aria-hidden="true"
+          />
+
+          {/* Text content */}
+          {(text || description) && (
+            <div className="flex flex-col items-center gap-2 text-center">
+              {text && (
+                <p className="text-base font-medium text-foreground">{text}</p>
+              )}
+              {description && (
+                <p className="text-sm text-muted-foreground">{description}</p>
+              )}
+              {/* Animated dots */}
+              {text && (
+                <div className="flex gap-1 mt-1">
+                  <span
+                    className="h-1.5 w-1.5 animate-bounce rounded-full bg-primary"
+                    style={{ animationDelay: '0ms' }}
+                  />
+                  <span
+                    className="h-1.5 w-1.5 animate-bounce rounded-full bg-primary"
+                    style={{ animationDelay: '150ms' }}
+                  />
+                  <span
+                    className="h-1.5 w-1.5 animate-bounce rounded-full bg-primary"
+                    style={{ animationDelay: '300ms' }}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Inline variant
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center',
+        text || description ? 'gap-3' : '',
+        className
+      )}
+      role="status"
+      aria-label={text || 'Loading'}
+      aria-live="polite"
+    >
+      <Loader2
+        className={cn('animate-spin text-primary', spinnerSize, spinnerClassName)}
+        aria-hidden="true"
+      />
+      {(text || description) && (
+        <div className="flex flex-col gap-1">
+          {text && (
+            <p className="text-sm font-medium text-foreground">{text}</p>
+          )}
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * PreloaderSkeleton - Loading skeleton variant
+ * Useful for content placeholders
+ */
+export interface PreloaderSkeletonProps {
+  /**
+   * Number of skeleton lines
+   * @default 3
+   */
+  lines?: number;
+
+  /**
+   * Show avatar skeleton
+   * @default false
+   */
+  showAvatar?: boolean;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export function PreloaderSkeleton({
+  lines = 3,
+  showAvatar = false,
+  className,
+}: PreloaderSkeletonProps) {
+  return (
+    <div className={cn('space-y-3', className)}>
+      {showAvatar && (
+        <div className="flex items-center gap-3">
+          <div className="h-10 w-10 rounded-full bg-muted animate-pulse" />
+          <div className="space-y-2 flex-1">
+            <div className="h-4 w-24 rounded bg-muted animate-pulse" />
+            <div className="h-3 w-32 rounded bg-muted animate-pulse" />
+          </div>
+        </div>
+      )}
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            'h-4 rounded bg-muted animate-pulse',
+            i === lines - 1 ? 'w-3/4' : 'w-full'
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+

package/src/components/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "../lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/src/components/radio-group.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { cn } from "../lib/utils"
+import { DotFilledIcon } from "@radix-ui/react-icons"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & { key?: React.Key }
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <DotFilledIcon className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/src/components/resizable.tsx

@@ -0,0 +1,111 @@
+"use client"
+import * as React from "react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../lib/utils"
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+// Size variants for the handle hit area
+const sizeVariants = {
+  sm: { hitArea: 4, indicator: 4 },   // 4px hit area, 4px indicator height
+  md: { hitArea: 8, indicator: 8 },   // 8px hit area, 8px indicator height
+  lg: { hitArea: 12, indicator: 12 }, // 12px hit area, 12px indicator height
+} as const
+
+export interface ResizableHandleProps
+  extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+  /** Show classic dots handle icon */
+  withHandle?: boolean
+  /** Size variant - controls hit area and indicator size */
+  size?: keyof typeof sizeVariants
+  /** Show visual indicator on hover */
+  showIndicator?: boolean
+  /** Custom indicator height in pixels (overrides size variant) */
+  indicatorHeight?: number
+}
+
+const ResizableHandle = ({
+  withHandle,
+  size = "md",
+  showIndicator = true,
+  indicatorHeight,
+  className,
+  ...props
+}: ResizableHandleProps) => {
+  const variant = sizeVariants[size]
+  const hitAreaPx = variant.hitArea
+  const indicatorPx = indicatorHeight ?? variant.indicator * 4 // 32px default for md
+
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={cn(
+        "group/resize relative flex items-center justify-center",
+        "bg-border transition-colors",
+        "hover:bg-primary/30 active:bg-primary/50",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        // Horizontal (default)
+        "w-px",
+        // Vertical
+        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
+        className
+      )}
+      style={{
+        // Expand hit area without changing visual width
+        // Using padding to increase clickable area
+      }}
+      {...props}
+    >
+      {/* Expanded hit area - invisible but clickable */}
+      <div
+        className={cn(
+          "absolute inset-y-0 cursor-ew-resize z-10",
+          "data-[panel-group-direction=vertical]:inset-x-0 data-[panel-group-direction=vertical]:inset-y-auto",
+          "data-[panel-group-direction=vertical]:cursor-ns-resize"
+        )}
+        style={{
+          left: -hitAreaPx / 2,
+          right: -hitAreaPx / 2,
+        }}
+      />
+
+      {/* Visual indicator - appears on hover */}
+      {showIndicator && (
+        <div
+          className={cn(
+            "absolute rounded-full bg-border opacity-0 transition-opacity",
+            "group-hover/resize:opacity-100 group-active/resize:bg-primary/50",
+            // Horizontal
+            "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-1",
+            // Vertical
+            "data-[panel-group-direction=vertical]:w-auto data-[panel-group-direction=vertical]:h-1",
+          )}
+          style={{ height: indicatorPx }}
+        />
+      )}
+
+      {/* Classic dots handle */}
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+          <DragHandleDots2Icon className="h-2.5 w-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/components/scroll-area.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../lib/utils"
+
+/**
+ * ScrollArea imperative handle for programmatic control
+ */
+export interface ScrollAreaHandle {
+  /** Scroll to bottom of the content */
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+  /** Scroll to top of the content */
+  scrollToTop: (behavior?: ScrollBehavior) => void;
+  /** Scroll to a specific position */
+  scrollTo: (options: ScrollToOptions) => void;
+  /** Get the viewport element */
+  getViewport: () => HTMLDivElement | null;
+}
+
+export interface ScrollAreaProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  /** Ref to access the viewport element directly */
+  viewportRef?: React.RefObject<HTMLDivElement>;
+  /** Additional className for the viewport */
+  viewportClassName?: string;
+}
+
+const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
+  ({ className, children, viewportRef, viewportClassName, ...props }, ref) => {
+    const internalViewportRef = React.useRef<HTMLDivElement>(null);
+    const actualViewportRef = viewportRef || internalViewportRef;
+
+    // Expose imperative methods
+    React.useImperativeHandle(ref, () => ({
+      scrollToBottom: (behavior: ScrollBehavior = 'smooth') => {
+        const viewport = actualViewportRef.current;
+        if (viewport) {
+          viewport.scrollTo({
+            top: viewport.scrollHeight,
+            behavior,
+          });
+        }
+      },
+      scrollToTop: (behavior: ScrollBehavior = 'smooth') => {
+        const viewport = actualViewportRef.current;
+        if (viewport) {
+          viewport.scrollTo({
+            top: 0,
+            behavior,
+          });
+        }
+      },
+      scrollTo: (options: ScrollToOptions) => {
+        actualViewportRef.current?.scrollTo(options);
+      },
+      getViewport: () => actualViewportRef.current,
+    }), [actualViewportRef]);
+
+    return (
+      <ScrollAreaPrimitive.Root
+        className={cn("relative overflow-hidden", className)}
+        {...props}
+      >
+        <ScrollAreaPrimitive.Viewport
+          ref={actualViewportRef as React.RefObject<HTMLDivElement>}
+          className={cn("h-full w-full rounded-[inherit]", viewportClassName)}
+        >
+          {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+      </ScrollAreaPrimitive.Root>
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea"
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/section.tsx

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+
+import { cn } from '../lib/utils';
+
+interface SectionProps {
+  children: ReactNode;
+  className?: string;
+  variant?: "default" | "dark" | "gradient" | "card";
+  size?: "sm" | "md" | "lg" | "xl";
+}
+
+export const Section = ({ 
+  children, 
+  className, 
+  variant = "default",
+  size = "lg" 
+}: SectionProps) => {
+  const paddingClasses = {
+    sm: "py-12",
+    md: "py-16", 
+    lg: "py-24",
+    xl: "py-32"
+  };
+
+  const variantClasses = {
+    default: "bg-background",
+    dark: "bg-card relative",
+    gradient: "gradient-hero relative overflow-hidden",
+    card: "gradient-card relative"
+  };
+
+  return (
+    <section className={cn('section-padding', variantClasses[variant], className)}>
+      <div className="w-full px-4 sm:px-6 lg:px-8">
+        {children}
+      </div>
+    </section>
+  );
+};
+
+interface SectionHeaderProps {
+  title: string;
+  subtitle?: string;
+  className?: string;
+}
+
+export const SectionHeader = ({ title, subtitle, className }: SectionHeaderProps) => (
+  <div className={cn("text-center mb-16 animate-fade-in", className)}>
+    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-6">
+      {title}
+    </h2>
+    {subtitle && (
+      <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+        {subtitle}
+      </p>
+    )}
+  </div>
+);