@wilshop/dashboard 3.5.2

package/src/lib/components/ui/grid-layout.tsx

@@ -0,0 +1,376 @@
+import * as React from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { cn } from "@/vdb/lib/utils.js";
+
+export interface GridLayout {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    i: string;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
+}
+
+export interface GridLayoutProps {
+    children: React.ReactElement[];
+    layouts: GridLayout[];
+    onLayoutChange?: (layouts: GridLayout[]) => void;
+    cols?: number;
+    rowHeight?: number;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+    className?: string;
+    gutter?: number;
+}
+
+interface GridItemProps {
+    layout: GridLayout;
+    children: React.ReactNode;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+    onLayoutChange?: (layout: GridLayout) => void;
+    onInteractionStart?: () => void;
+    onInteractionEnd?: () => void;
+    cols?: number;
+    rowHeight?: number;
+    gutter?: number;
+}
+
+function GridItem({
+    layout,
+    children,
+    isDraggable = false,
+    isResizable = false,
+    onLayoutChange,
+    onInteractionStart,
+    onInteractionEnd,
+    cols = 12,
+    rowHeight = 100,
+    gutter = 10,
+}: GridItemProps) {
+    const [isResizing, setIsResizing] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0, mouseX: 0, mouseY: 0 });
+    const itemRef = useRef<HTMLDivElement>(null);
+
+    const handleMouseDown = useCallback((e: React.MouseEvent) => {
+        if (!isDraggable || isResizing) return;
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const rect = itemRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        
+        setIsDragging(true);
+        onInteractionStart?.();
+        setDragStart({
+            x: layout.x,
+            y: layout.y,
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+        });
+    }, [isDraggable, isResizing, layout.x, layout.y, onInteractionStart]);
+
+    const handleResizeStart = useCallback((e: React.MouseEvent) => {
+        if (!isResizable) return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsResizing(true);
+        onInteractionStart?.();
+        setDragStart({
+            x: layout.w,
+            y: layout.h,
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+        });
+    }, [isResizable, layout.w, layout.h, onInteractionStart]);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!itemRef.current) return;
+            
+            const containerRect = itemRef.current.parentElement?.getBoundingClientRect();
+            if (!containerRect) return;
+            
+            const colWidth = (containerRect.width - gutter * (cols - 1)) / cols;
+            
+            if (isDragging && onLayoutChange) {
+                const deltaX = e.clientX - dragStart.mouseX;
+                const deltaY = e.clientY - dragStart.mouseY;
+                
+                const newX = Math.round(dragStart.x + deltaX / colWidth);
+                const newY = Math.round(dragStart.y + deltaY / rowHeight);
+                
+                onLayoutChange({
+                    ...layout,
+                    x: Math.max(0, Math.min(cols - layout.w, newX)),
+                    y: Math.max(0, newY),
+                });
+            } else if (isResizing && onLayoutChange) {
+                const deltaX = e.clientX - dragStart.mouseX;
+                const deltaY = e.clientY - dragStart.mouseY;
+                
+                const newW = Math.round(dragStart.x + deltaX / colWidth);
+                const newH = Math.round(dragStart.y + deltaY / rowHeight);
+                
+                // Apply min/max constraints
+                const minW = layout.minW ?? 1;
+                const minH = layout.minH ?? 1;
+                const maxW = layout.maxW ?? (cols - layout.x);
+                const maxH = layout.maxH ?? 999;
+                
+                onLayoutChange({
+                    ...layout,
+                    w: Math.max(minW, Math.min(maxW, Math.min(cols - layout.x, newW))),
+                    h: Math.max(minH, Math.min(maxH, newH)),
+                });
+            }
+        };
+
+        const handleMouseUp = () => {
+            if (isDragging || isResizing) {
+                onInteractionEnd?.();
+            }
+            setIsDragging(false);
+            setIsResizing(false);
+        };
+
+        if (isDragging || isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, isResizing, dragStart, layout, onLayoutChange, onInteractionEnd, cols, rowHeight]);
+
+    const colWidth = `calc((100% - ${gutter * (cols - 1)}px) / ${cols})`;
+    const style: React.CSSProperties = {
+        position: 'absolute',
+        left: `calc(${layout.x} * (${colWidth} + ${gutter}px))`,
+        top: `calc(${layout.y} * (${rowHeight}px + ${gutter}px))`,
+        width: `calc(${layout.w} * ${colWidth} + ${(layout.w - 1) * gutter}px)`,
+        height: `calc(${layout.h} * ${rowHeight}px + ${(layout.h - 1) * gutter}px)`,
+        zIndex: isDragging || isResizing ? 1000 : 10, // Normal widgets above grid (10), active widget much higher (1000)
+    };
+
+    return (
+        <div
+            ref={itemRef}
+            style={style}
+            className={cn(
+                "transition-shadow",
+                isDraggable && !isResizing && "cursor-move",
+                (isDragging || isResizing) && "shadow-lg",
+            )}
+            onMouseDown={handleMouseDown}
+        >
+            <div className="h-full w-full">
+                {children}
+            </div>
+            {isResizable && (
+                <div
+                    className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize bg-muted-foreground/20 hover:bg-muted-foreground/40 transition-colors"
+                    style={{
+                        clipPath: "polygon(100% 0%, 0% 100%, 100% 100%)",
+                    }}
+                    onMouseDown={handleResizeStart}
+                />
+            )}
+        </div>
+    );
+}
+
+export function GridLayout({
+    children,
+    layouts,
+    onLayoutChange,
+    cols = 12,
+    rowHeight = 100,
+    isDraggable = false,
+    isResizable = false,
+    className,
+    gutter = 10,
+}: GridLayoutProps) {
+    const [showGrid, setShowGrid] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    
+    // Detect mobile screen size
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768); // Tailwind's md breakpoint
+        };
+        
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    
+    // Transform layouts for mobile - stack widgets vertically in full width
+    const mobileLayouts = React.useMemo(() => {
+        if (!isMobile) return layouts;
+        
+        return layouts.map((layout, index) => ({
+            ...layout,
+            x: 0,
+            y: layouts.slice(0, index).reduce((sum, l) => sum + l.h, 0),
+            w: cols, // Full width
+        }));
+    }, [layouts, isMobile, cols]);
+    
+    const effectiveLayouts = isMobile ? mobileLayouts : layouts;
+    const effectiveGutter = isMobile ? 5 : gutter; // Smaller gutter on mobile
+    const maxRow = Math.max(...effectiveLayouts.map(l => l.y + l.h), 4); // Minimum 4 rows
+    const containerHeight = maxRow * rowHeight + (maxRow - 1) * effectiveGutter;
+
+    // Helper function to check if two layouts overlap
+    const layoutsOverlap = (a: GridLayout, b: GridLayout): boolean => {
+        return !(
+            a.x + a.w <= b.x || // a is left of b
+            b.x + b.w <= a.x || // b is left of a
+            a.y + a.h <= b.y || // a is above b
+            b.y + b.h <= a.y    // b is above a
+        );
+    };
+
+    // Helper function to find the next available position for a widget
+    const findNextAvailablePosition = (
+        widget: GridLayout,
+        occupiedLayouts: GridLayout[],
+        draggedWidget?: GridLayout
+    ): GridLayout => {
+        const sortedLayouts = [...occupiedLayouts]
+            .filter(l => l.i !== widget.i && (!draggedWidget || l.i !== draggedWidget.i))
+            .sort((a, b) => a.y === b.y ? a.x - b.x : a.y - b.y);
+
+        // Try to place widget in rows, starting from its current position
+        for (let y = widget.y; y < 100; y++) { // Max 100 rows
+            for (let x = 0; x <= cols - widget.w; x++) {
+                const testLayout = { ...widget, x, y };
+                
+                // Check if this position overlaps with any other widget
+                const hasOverlap = sortedLayouts.some(layout => layoutsOverlap(testLayout, layout));
+                
+                // Also check overlap with dragged widget if provided
+                if (!hasOverlap && (!draggedWidget || !layoutsOverlap(testLayout, draggedWidget))) {
+                    return testLayout;
+                }
+            }
+        }
+        
+        // Fallback: place at the bottom
+        const maxY = Math.max(...sortedLayouts.map(l => l.y + l.h), 0);
+        return { ...widget, x: 0, y: maxY };
+    };
+
+    const handleItemLayoutChange = useCallback((newLayout: GridLayout) => {
+        if (onLayoutChange && !isMobile) { // Disable layout changes on mobile
+            const newLayouts = [...layouts];
+            const draggedIndex = layouts.findIndex(l => l.i === newLayout.i);
+            
+            if (draggedIndex === -1) return;
+            
+            // Update the dragged widget's position
+            newLayouts[draggedIndex] = newLayout;
+            
+            // Find widgets that overlap with the new position
+            const overlappingWidgets: number[] = [];
+            
+            for (let i = 0; i < newLayouts.length; i++) {
+                if (i !== draggedIndex && layoutsOverlap(newLayout, newLayouts[i])) {
+                    overlappingWidgets.push(i);
+                }
+            }
+            
+            // Move overlapping widgets to new positions
+            for (const index of overlappingWidgets) {
+                const widgetToMove = newLayouts[index];
+                const newPosition = findNextAvailablePosition(widgetToMove, newLayouts, newLayout);
+                newLayouts[index] = newPosition;
+            }
+            
+            onLayoutChange(newLayouts);
+        }
+    }, [layouts, onLayoutChange, cols, isMobile]);
+
+    const handleInteractionStart = useCallback(() => {
+        setShowGrid(true);
+    }, []);
+
+    const handleInteractionEnd = useCallback(() => {
+        setShowGrid(false);
+    }, []);
+
+    // Create grid overlay
+    const renderGridOverlay = () => {
+        if (!showGrid) return null;
+        
+        const gridCells = [];
+        for (let row = 0; row < maxRow; row++) {
+            for (let col = 0; col < cols; col++) {
+                const colWidth = `calc((100% - ${effectiveGutter * (cols - 1)}px) / ${cols})`;
+                const cellStyle: React.CSSProperties = {
+                    position: 'absolute',
+                    left: `calc(${col} * (${colWidth} + ${effectiveGutter}px))`,
+                    top: `calc(${row} * (${rowHeight}px + ${effectiveGutter}px))`,
+                    width: colWidth,
+                    height: `${rowHeight}px`,
+                    pointerEvents: 'none',
+                    zIndex: 0, // Behind widgets but above background
+                    boxSizing: 'border-box',
+                };
+                
+                gridCells.push(
+                    <div
+                        key={`grid-${row}-${col}`}
+                        style={cellStyle}
+                        className="transition-opacity duration-200 border-2 border-dashed border-primary bg-primary/10"
+                    />
+                );
+            }
+        }
+        
+        return gridCells;
+    };
+
+    return (
+        <div
+            className={cn("relative w-full bg-muted/10", className)}
+            style={{ 
+                height: `${containerHeight}px`,
+                backgroundImage: `
+                    linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px),
+                    linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px)
+                `,
+                backgroundSize: `${100 / cols}% ${rowHeight}px`,
+            }}
+        >
+            {children.map((child, index) => {
+                const layout = effectiveLayouts[index];
+                if (!layout) return null;
+
+                return (
+                    <GridItem
+                        key={layout.i}
+                        layout={layout}
+                        isDraggable={isDraggable && !isMobile} // Disable dragging on mobile
+                        isResizable={isResizable && !isMobile} // Disable resizing on mobile
+                        onLayoutChange={handleItemLayoutChange}
+                        onInteractionStart={handleInteractionStart}
+                        onInteractionEnd={handleInteractionEnd}
+                        cols={cols}
+                        rowHeight={rowHeight}
+                        gutter={effectiveGutter}
+                    >
+                        {child}
+                    </GridItem>
+                );
+            })}
+            {renderGridOverlay()}
+        </div>
+    );
+}

package/src/lib/components/ui/hover-card.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button.js';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card.js';
+
+const meta = {
+    title: 'UI/Hover Card',
+    component: HoverCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <HoverCard>
+            <HoverCardTrigger asChild>
+                <Button variant="link">@username</Button>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-80">
+                <div className="flex justify-between space-x-4">
+                    <div className="space-y-1">
+                        <h4 className="text-sm font-semibold">@username</h4>
+                        <p className="text-sm">
+                            The React Framework – created and maintained by @vercel.
+                        </p>
+                        <div className="flex items-center pt-2">
+                            <span className="text-xs text-muted-foreground">Joined December 2021</span>
+                        </div>
+                    </div>
+                </div>
+            </HoverCardContent>
+        </HoverCard>
+    ),
+};

package/src/lib/components/ui/hover-card.tsx

@@ -0,0 +1,36 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
+
+import { cn } from '@/vdb/lib/utils.js';
+
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+    return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+    return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+function HoverCardContent({
+    className,
+    align = 'center',
+    sideOffset = 4,
+    ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+    return (
+        <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+            <HoverCardPrimitive.Content
+                data-slot="hover-card-content"
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    'bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+                    className,
+                )}
+                {...props}
+            />
+        </HoverCardPrimitive.Portal>
+    );
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/src/lib/components/ui/input-group.tsx

@@ -0,0 +1,149 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { cn } from '@/vdb/lib/utils.js';
+
+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 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+                '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]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+                // 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 items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+    {
+        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.45rem] has-[>kbd]:mr-[-0.35rem]',
+                'block-start':
+                    'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+                'block-end':
+                    'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-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('text-sm shadow-none flex gap-2 items-center', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+            sm: 'h-8 px-2.5 gap-1.5 rounded-md 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]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+                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,
+            )}
+            value={props.value}
+            {...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, InputGroupInput, InputGroupText, InputGroupTextarea };

package/src/lib/components/ui/input-otp.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from './input-otp.js';
+
+const meta = {
+    title: 'UI/Input OTP',
+    component: InputOTP,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof InputOTP>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
+            <InputOTPGroup>
+                <InputOTPSlot index={0} />
+                <InputOTPSlot index={1} />
+                <InputOTPSlot index={2} />
+                <InputOTPSlot index={3} />
+                <InputOTPSlot index={4} />
+                <InputOTPSlot index={5} />
+            </InputOTPGroup>
+        </InputOTP>
+    ),
+};