@gunjo/ui 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/components/overlay/MediaPickerDialog.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import * as React from "react"
+import { IconSearch as Search } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { AssetGrid } from "../display/AssetGrid"
+import { AssetCard } from "../display/AssetCard"
+import type { AssetCardAsset } from "../display/AssetCard"
+import { Button } from "../inputs/Button"
+import { Input } from "../inputs/Input"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "./Dialog"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip"
+import { mediaPickerDialogDefaultVariantKey } from "./generated/default-variant-keys"
+import type { MediaPickerDialogVariantKey } from "./generated/variant-keys"
+
+export interface MediaPickerDialogLabels {
+    title?: React.ReactNode
+    description?: React.ReactNode
+    searchPlaceholder?: string
+    cancel?: React.ReactNode
+    confirm?: React.ReactNode | ((selectedCount: number) => React.ReactNode)
+    confirmDisabledReason?: React.ReactNode
+    emptyTitle?: React.ReactNode
+    emptyDescription?: React.ReactNode
+    close?: string
+}
+
+export interface MediaPickerDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    items: AssetCardAsset[]
+    portalContainer?: HTMLElement | null
+    variant?: MediaPickerDialogVariantKey
+    selectedIds?: string[]
+    multiSelect?: boolean
+    labels?: MediaPickerDialogLabels
+    onConfirm: (items: AssetCardAsset[]) => void
+}
+
+const variantClasses: Record<MediaPickerDialogVariantKey, { content: string; grid: string }> = {
+    default: {
+        content: "max-w-5xl",
+        grid: "",
+    },
+    compact: {
+        content: "max-w-3xl",
+        grid: "",
+    },
+}
+
+const MediaPickerDialog = React.forwardRef<HTMLDivElement, MediaPickerDialogProps>(
+    (
+        {
+            open,
+            onOpenChange,
+            items,
+            portalContainer,
+            variant = mediaPickerDialogDefaultVariantKey,
+            selectedIds,
+            multiSelect,
+            labels,
+            onConfirm,
+        },
+        ref
+    ) => {
+        const [query, setQuery] = React.useState("")
+        const [internalSelectedIds, setInternalSelectedIds] = React.useState<string[]>(selectedIds ?? [])
+        const classes = variantClasses[variant]
+
+        React.useEffect(() => {
+            if (open) setInternalSelectedIds(selectedIds ?? [])
+        }, [open, selectedIds])
+
+        const selectedSet = React.useMemo(() => new Set(internalSelectedIds), [internalSelectedIds])
+        const filteredItems = React.useMemo(() => {
+            const normalized = query.trim().toLowerCase()
+            if (!normalized) return items
+            return items.filter((item) => item.title.toLowerCase().includes(normalized) || item.type?.toLowerCase().includes(normalized))
+        }, [items, query])
+
+        const handleSelect = (asset: AssetCardAsset) => {
+            if (!multiSelect) {
+                setInternalSelectedIds([asset.id])
+                onConfirm([asset])
+                onOpenChange(false)
+                return
+            }
+            setInternalSelectedIds((current) =>
+                current.includes(asset.id)
+                    ? current.filter((id) => id !== asset.id)
+                    : [...current, asset.id]
+            )
+        }
+
+        const handleConfirm = () => {
+            onConfirm(items.filter((item) => selectedSet.has(item.id)))
+            onOpenChange(false)
+        }
+        const confirmLabel =
+            typeof labels?.confirm === "function"
+                ? labels.confirm(internalSelectedIds.length)
+                : labels?.confirm ?? `${internalSelectedIds.length} selected`
+        const confirmDisabledReason = labels?.confirmDisabledReason ?? "Select at least one asset before confirming."
+
+        return (
+            <Dialog open={open} onOpenChange={onOpenChange}>
+                <DialogContent
+                    ref={ref}
+                    portalContainer={portalContainer}
+                    closeLabel={labels?.close}
+                    className={cn(
+                        "grid h-[calc(100%-2rem)] max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden p-0",
+                        classes.content
+                    )}
+                >
+                    <DialogHeader className="border-b p-6 pb-4">
+                        <DialogTitle>{labels?.title ?? "Choose media"}</DialogTitle>
+                        <DialogDescription>
+                            {labels?.description ?? "Select assets from the library."}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className={cn("grid min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-4 overflow-hidden p-6", !multiSelect && "pb-8")}>
+                        <div className="relative">
+                            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
+                            <Input
+                                value={query}
+                                onChange={(event) => setQuery(event.target.value)}
+                                placeholder={labels?.searchPlaceholder ?? "Search assets..."}
+                                className="w-full pl-9"
+                            />
+                        </div>
+                        <div className="min-h-0 overflow-y-auto pb-4 pr-1">
+                            <AssetGrid
+                                items={filteredItems}
+                                selectedIds={internalSelectedIds}
+                                selectionMode={multiSelect ? "multiple" : "single"}
+                                onSelect={handleSelect}
+                                emptyTitle={labels?.emptyTitle ?? "No assets"}
+                                emptyDescription={labels?.emptyDescription ?? "Try a different search query."}
+                                minColumnWidth={150}
+                                className={classes.grid}
+                                renderItem={(asset, state) => (
+                                    <AssetCard
+                                        asset={asset}
+                                        selected={state.selected}
+                                        variant={variant === "compact" ? "compact" : "default"}
+                                        selectionMode={multiSelect ? "multiple" : "single"}
+                                        imageFit="contain"
+                                        portalContainer={portalContainer}
+                                        onSelect={handleSelect}
+                                    />
+                                )}
+                            />
+                        </div>
+                    </div>
+
+                    {multiSelect ? (
+                        <DialogFooter className="border-t p-4">
+                            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                                {labels?.cancel ?? "Cancel"}
+                            </Button>
+                            {internalSelectedIds.length === 0 ? (
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span className="inline-flex">
+                                            <Button type="button" disabled>
+                                                {confirmLabel}
+                                            </Button>
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent portalContainer={portalContainer}>
+                                        {confirmDisabledReason}
+                                    </TooltipContent>
+                                </Tooltip>
+                            ) : (
+                                <Button type="button" onClick={handleConfirm}>
+                                    {confirmLabel}
+                                </Button>
+                            )}
+                        </DialogFooter>
+                    ) : null}
+                </DialogContent>
+            </Dialog>
+        )
+    }
+)
+MediaPickerDialog.displayName = "MediaPickerDialog"
+
+export { MediaPickerDialog }

package/src/components/overlay/Modal.tsx

@@ -0,0 +1,103 @@
+"use client"
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { IconX as X } from "@tabler/icons-react";
+import { cn } from '../../lib/utils';
+
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    portalContainer?: HTMLElement | null;
+    closeLabel?: string;
+    overlayClassName?: string;
+    className?: string;
+}
+
+export function Modal({
+    isOpen,
+    onClose,
+    title,
+    children,
+    footer,
+    portalContainer,
+    closeLabel = "Close",
+    overlayClassName,
+    className,
+}: ModalProps) {
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+
+        if (isOpen && !portalContainer) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            if (!portalContainer) {
+                document.body.style.overflow = 'unset';
+            }
+        };
+    }, [isOpen, onClose, portalContainer]);
+
+    if (!isOpen) return null;
+
+    const content = (
+        <div
+            data-prevent-deselect="true"
+            className={cn(
+                "fixed inset-0 z-[9999] flex items-center justify-center bg-overlay/60 backdrop-blur-sm animate-in fade-in duration-200",
+                portalContainer && "absolute",
+                overlayClassName
+            )}
+            onClick={(e) => {
+                e.stopPropagation();
+                onClose();
+            }}
+        >
+            <div
+                ref={modalRef}
+                role="dialog"
+                aria-modal="true"
+                aria-label={title}
+                onClick={(e) => e.stopPropagation()}
+                className={cn(
+                    "mx-4 flex w-[448px] max-w-md max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-lg border border-border bg-card shadow-xl animate-in zoom-in-95 duration-200",
+                    className
+                )}
+            >
+                <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+                    <h3 className="min-w-0 pr-3 font-semibold text-foreground">{title}</h3>
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                        aria-label={closeLabel}
+                    >
+                        <X size={18} />
+                    </button>
+                </div>
+                <div className="p-4">
+                    {children}
+                </div>
+                {footer && (
+                    <div className="px-4 py-3 bg-muted/50 border-t border-border flex justify-end gap-2">
+                        {footer}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    if (typeof document !== 'undefined') {
+        return createPortal(content, portalContainer ?? document.body);
+    }
+    return content;
+}

package/src/components/overlay/OnboardingFlow.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+import { IconCheck as Check, IconChevronLeft as ChevronLeft, IconChevronRight as ChevronRight } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { Button } from "../inputs/Button"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip"
+
+export interface OnboardingStep {
+    id: string
+    title: React.ReactNode
+    description?: React.ReactNode
+    content: React.ReactNode
+}
+
+export interface OnboardingFlowProps {
+    steps: OnboardingStep[]
+    /** Controlled current step index (0-based). */
+    currentIndex?: number
+    onCurrentIndexChange?: (index: number) => void
+    /** Called when the user clicks Continue on the final step. */
+    onComplete?: () => void
+    /** Optional override for the back button label. */
+    backLabel?: string
+    /** Optional override for the next button label (non-final step). */
+    nextLabel?: string
+    /** Optional override for the final step button label. */
+    completeLabel?: string
+    /** Accessible label for the step indicator. */
+    progressLabel?: string
+    /** Text shown above the active step title. */
+    stepLabel?: (current: number, total: number) => React.ReactNode
+    /** Disabled reason shown on the back button when the first step is active. */
+    backDisabledReason?: string
+    /** Minimum height for the step title, description, and content area. Keeps footer actions stable across steps. */
+    bodyMinHeight?: React.CSSProperties["minHeight"]
+    className?: string
+}
+
+const OnboardingFlow = React.forwardRef<HTMLDivElement, OnboardingFlowProps>(
+    (
+        {
+            steps,
+            currentIndex: controlledIndex,
+            onCurrentIndexChange,
+            onComplete,
+            backLabel = "Back",
+            nextLabel = "Continue",
+            completeLabel = "Finish",
+            progressLabel = "Onboarding progress",
+            stepLabel = (current, total) => `Step ${current} of ${total}`,
+            backDisabledReason = "This is the first step.",
+            bodyMinHeight,
+            className,
+        },
+        ref
+    ) => {
+        const [internalIndex, setInternalIndex] = React.useState(0)
+        const isControlled = controlledIndex !== undefined
+        const index = isControlled ? controlledIndex : internalIndex
+
+        const setIndex = (next: number) => {
+            const clamped = Math.max(0, Math.min(steps.length - 1, next))
+            if (!isControlled) setInternalIndex(clamped)
+            onCurrentIndexChange?.(clamped)
+        }
+
+        const isFirst = index === 0
+        const isLast = index === steps.length - 1
+        const step = steps[index]
+
+        if (!step) return null
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "flex w-full flex-col gap-6 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm",
+                    className
+                )}
+            >
+                {/* Step indicator */}
+                <ol className="flex items-center gap-2" aria-label={progressLabel}>
+                    {steps.map((s, idx) => {
+                        const isComplete = idx < index
+                        const isActive = idx === index
+                        return (
+                            <React.Fragment key={s.id}>
+                                <li
+                                    aria-current={isActive ? "step" : undefined}
+                                    className={cn(
+                                        "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
+                                        isComplete
+                                            ? "bg-foreground text-background"
+                                            : isActive
+                                              ? "bg-foreground text-background"
+                                              : "border border-border bg-background text-muted-foreground"
+                                    )}
+                                >
+                                    {isComplete ? (
+                                        <Check className="h-3 w-3" aria-hidden />
+                                    ) : (
+                                        idx + 1
+                                    )}
+                                </li>
+                                {idx < steps.length - 1 ? (
+                                    <span
+                                        aria-hidden
+                                        className={cn(
+                                            "h-0.5 flex-1",
+                                            idx < index ? "bg-foreground" : "bg-border"
+                                        )}
+                                    />
+                                ) : null}
+                            </React.Fragment>
+                        )
+                    })}
+                </ol>
+
+                {/* Content */}
+                <div className="flex flex-col gap-6" style={bodyMinHeight ? { minHeight: bodyMinHeight } : undefined}>
+                    <div className="flex flex-col gap-2">
+                        <p className="text-xs font-medium text-muted-foreground">
+                            {stepLabel(index + 1, steps.length)}
+                        </p>
+                        <h3 className="text-lg font-semibold tracking-tight">
+                            {step.title}
+                        </h3>
+                        {step.description ? (
+                            <p className="text-sm text-muted-foreground">{step.description}</p>
+                        ) : null}
+                    </div>
+                    <div>{step.content}</div>
+                </div>
+
+                {/* Footer actions */}
+                <div className="flex items-center justify-between">
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <span className={cn("inline-flex", isFirst ? "cursor-not-allowed" : "")}>
+                                    <Button
+                                        variant="outline"
+                                        onClick={() => setIndex(index - 1)}
+                                        disabled={isFirst}
+                                    >
+                                        <ChevronLeft className="mr-1 h-4 w-4" />
+                                        {backLabel}
+                                    </Button>
+                                </span>
+                            </TooltipTrigger>
+                            {isFirst ? <TooltipContent>{backDisabledReason}</TooltipContent> : null}
+                        </Tooltip>
+                    </TooltipProvider>
+                    <Button
+                        onClick={() => {
+                            if (isLast) onComplete?.()
+                            else setIndex(index + 1)
+                        }}
+                    >
+                        {isLast ? completeLabel : nextLabel}
+                        {!isLast ? <ChevronRight className="ml-1 h-4 w-4" /> : null}
+                    </Button>
+                </div>
+            </div>
+        )
+    }
+)
+OnboardingFlow.displayName = "OnboardingFlow"
+
+export { OnboardingFlow }

package/src/components/overlay/Popover.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+        portalContainer?: HTMLElement | null
+    }
+>(({ className, align = "center", sideOffset = 4, collisionPadding = 16, portalContainer, ...props }, ref) => (
+    <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
+        <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            collisionPadding={collisionPadding}
+            className={cn(
+                "z-50 flex max-h-[min(var(--radix-popper-available-height),calc(100vh-2rem))] w-72 w-[288px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-md rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
+        />
+    </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverAnchor, PopoverTrigger, PopoverContent }