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

package/src/components/feedback/StatusScreen.tsx

@@ -0,0 +1,148 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { statusScreenDefaultVariantKey } from "./generated/default-variant-keys"
+import type { StatusScreenVariantKey } from "./generated/variant-keys"
+
+export type StatusScreenVariant = StatusScreenVariantKey
+
+export interface StatusScreenProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Selects sensible defaults for code / icon tone / title / description. */
+    variant?: StatusScreenVariant
+    /** Large code shown at the top, such as "404". Overrides the variant default. */
+    code?: React.ReactNode
+    /** Icon shown in place of the code for icon-led states. */
+    icon?: React.ReactNode
+    title?: React.ReactNode
+    description?: React.ReactNode
+    /** Primary action or action group, usually Button. */
+    action?: React.ReactNode
+    /** Optional muted detail block, such as request ID or diagnostic text. */
+    details?: React.ReactNode
+}
+
+type VariantPreset = {
+    code?: string
+    tone: "default" | "destructive"
+    title: string
+    description: string
+}
+
+const VARIANT_PRESETS: Record<StatusScreenVariantKey, VariantPreset> = {
+    "not-found": {
+        code: "404",
+        tone: "default",
+        title: "Page not found",
+        description:
+            "The page you are looking for doesn't exist or has been moved.",
+    },
+    error: {
+        code: "500",
+        tone: "destructive",
+        title: "Something went wrong",
+        description: "An unexpected error occurred. We've been notified.",
+    },
+    forbidden: {
+        code: "403",
+        tone: "destructive",
+        title: "Access denied",
+        description: "You don't have permission to view this page.",
+    },
+    offline: {
+        tone: "default",
+        title: "You're offline",
+        description: "Check your connection and try again.",
+    },
+    maintenance: {
+        tone: "default",
+        title: "Under maintenance",
+        description: "We'll be back shortly. Thanks for your patience.",
+    },
+    "coming-soon": {
+        tone: "default",
+        title: "Coming soon",
+        description: "This page isn't available yet. Check back soon.",
+    },
+}
+
+/**
+ * Full-page status screen behind 404 / 500 / offline / 403 / maintenance /
+ * coming-soon states. Pick a variant for defaults, then override code, icon,
+ * title, description, action, or details as needed.
+ */
+const StatusScreen = React.forwardRef<HTMLDivElement, StatusScreenProps>(
+    (
+        {
+            className,
+            variant = statusScreenDefaultVariantKey,
+            code,
+            icon,
+            title,
+            description,
+            action,
+            details,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const preset = VARIANT_PRESETS[variant] ?? VARIANT_PRESETS["not-found"]
+        const resolvedCode = code ?? preset.code
+        const resolvedTitle = title ?? preset.title
+        const resolvedDescription = description ?? preset.description
+
+        return (
+            <div
+                ref={ref}
+                data-variant={variant}
+                className={cn(
+                    "flex min-h-[60vh] w-full flex-col items-center justify-center gap-4 p-8 text-center",
+                    className
+                )}
+                {...props}
+            >
+                {icon ? (
+                    <div
+                        className={cn(
+                            "flex h-16 w-16 items-center justify-center [&_svg]:h-16 [&_svg]:w-16",
+                            preset.tone === "destructive"
+                                ? "text-destructive"
+                                : "text-muted-foreground"
+                        )}
+                        aria-hidden="true"
+                    >
+                        {icon}
+                    </div>
+                ) : resolvedCode ? (
+                    <p
+                        className={cn(
+                            "text-7xl font-extrabold tracking-tight",
+                            preset.tone === "destructive"
+                                ? "text-destructive"
+                                : "text-foreground"
+                        )}
+                    >
+                        {resolvedCode}
+                    </p>
+                ) : null}
+                <p className="text-2xl font-semibold text-foreground">
+                    {resolvedTitle}
+                </p>
+                <p className="max-w-md text-sm text-muted-foreground">
+                    {resolvedDescription}
+                </p>
+                {action ? <div className="mt-2">{action}</div> : null}
+                {details ? (
+                    <pre className="mt-4 max-w-xl overflow-x-auto rounded-md bg-muted p-3 text-left font-mono text-xs text-muted-foreground">
+                        {details}
+                    </pre>
+                ) : null}
+                {children}
+            </div>
+        )
+    }
+)
+StatusScreen.displayName = "StatusScreen"
+
+export { StatusScreen }

package/src/components/{molecules → feedback}/Stepper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Check } from "lucide-react"
+import { IconCheck as Check } from "@tabler/icons-react";
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
@@ -56,11 +56,12 @@ function StepCircle({ state, index }: { state: StepperState; index: number }) {
 }
 
 const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
-    ({ className, orientation, steps, ...props }, ref) => {
+    ({ className, orientation, steps, role = "list", ...props }, ref) => {
         const isHorizontal = orientation !== "vertical"
         return (
             <div
                 ref={ref}
+                role={role}
                 className={cn(stepperVariants({ orientation }), "p-4", className)}
                 {...props}
             >
@@ -69,15 +70,19 @@ const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
                     return (
                         <React.Fragment key={`${step.label}-${idx}`}>
                             <div
+                                role="listitem"
+                                aria-current={step.state === "current" ? "step" : undefined}
+                                data-stepper-item
                                 className={cn(
-                                    "flex items-center gap-2",
-                                    isHorizontal ? "flex-col" : "flex-row"
+                                    "flex min-w-0 items-center gap-2",
+                                    isHorizontal ? "w-16 shrink-0 flex-col text-center sm:w-20" : "flex-row"
                                 )}
                             >
                                 <StepCircle state={step.state} index={idx} />
                                 <span
+                                    data-stepper-label
                                     className={cn(
-                                        "text-xs font-medium",
+                                        "max-w-full text-xs font-medium leading-tight",
                                         step.state === "upcoming"
                                             ? "text-muted-foreground"
                                             : "text-foreground"

package/src/components/feedback/Toast.tsx

@@ -0,0 +1,108 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import { IconAlertTriangle, IconCircleCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
+import { cn } from '../../lib/utils'; // Relative path to lib
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../overlay/Tooltip";
+import type { ToastVariantKey } from "./generated/variant-keys";
+import { toastDefaultVariantKey } from "./generated/default-variant-keys";
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipContent>;
+
+export type ToastType = ToastVariantKey;
+
+export interface ToastProps {
+    message: string;
+    type?: ToastType;
+    isVisible: boolean;
+    onClose: () => void;
+    duration?: number;
+    placement?: "fixed" | "inline";
+    closeLabel?: string;
+    tooltipPortalContainer?: TooltipContentProps["portalContainer"];
+    className?: string;
+}
+
+export function Toast({
+    message,
+    type = toastDefaultVariantKey,
+    isVisible,
+    onClose,
+    duration = 3000,
+    placement = "fixed",
+    closeLabel = "Close notification",
+    tooltipPortalContainer,
+    className,
+}: ToastProps) {
+    const [shouldRender, setShouldRender] = useState(isVisible);
+
+    useEffect(() => {
+        if (isVisible) {
+            const timer = setTimeout(() => {
+                onClose();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [isVisible, duration, onClose]);
+
+    useEffect(() => {
+        if (isVisible) {
+            setShouldRender(true);
+            return;
+        }
+
+        if (!shouldRender) return;
+
+        const timer = setTimeout(() => {
+            setShouldRender(false);
+        }, 300);
+
+        return () => clearTimeout(timer);
+    }, [isVisible, shouldRender]);
+
+    if (!shouldRender) return null;
+
+    const icons: Record<ToastVariantKey, React.ReactNode> = {
+        success: <IconCircleCheck className="text-success" size={20} stroke={2} />,
+        error: <IconAlertTriangle className="text-destructive" size={20} stroke={2} />,
+        info: <IconInfoCircle className="text-info" size={20} stroke={2} />
+    };
+
+    const bgColors: Record<ToastVariantKey, string> = {
+        success: 'bg-success-subtle border-success-border text-success-subtle-foreground',
+        error: 'bg-destructive-subtle border-destructive-border text-destructive-subtle-foreground',
+        info: 'bg-info-subtle border-info-border text-info-subtle-foreground'
+    };
+
+    return (
+        <div
+            role={type === "error" ? "alert" : "status"}
+            className={cn(
+                placement === "fixed" ? "fixed left-4 right-4 top-[72px] z-[9999] sm:left-auto sm:right-6" : "relative",
+                bgColors[type],
+                "flex w-full max-w-[calc(100vw-2rem)] flex-row items-start gap-3 rounded-xl border px-4 py-3 shadow-2xl duration-300 pointer-events-auto transform-gpu will-change-transform [animation-fill-mode:both] sm:w-[360px] sm:max-w-sm",
+                isVisible
+                    ? "animate-in slide-in-from-top-5 fade-in-0"
+                    : "animate-out slide-out-to-top-5 fade-out-0",
+                className
+            )}
+        >
+            {icons[type]}
+            <p className="min-w-0 flex-1 break-words text-sm font-medium [overflow-wrap:anywhere]">{message}</p>
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            aria-label={closeLabel}
+                            className="ml-auto shrink-0 rounded-lg p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                        >
+                            <IconX size={14} stroke={2} />
+                        </button>
+                    </TooltipTrigger>
+                    <TooltipContent portalContainer={tooltipPortalContainer}>{closeLabel}</TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        </div>
+    );
+}

package/src/components/feedback/ToastProvider.tsx

@@ -0,0 +1,78 @@
+"use client"
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { createPortal } from "react-dom";
+import { Toast, ToastType } from './Toast';
+
+interface ToastContextType {
+    showToast: (message: string, type: ToastType, duration?: number) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    labels?: {
+        close?: string;
+    };
+    portalContainer?: HTMLElement | null;
+    placement?: "viewport" | "container";
+}
+
+export const ToastProvider = ({ children, labels, portalContainer, placement = "viewport" }: ToastProviderProps) => {
+    const [toasts, setToasts] = useState<{ id: number, message: string, type: ToastType, duration: number, isVisible: boolean }[]>([]);
+    const [mounted, setMounted] = useState(false);
+
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    const showToast = useCallback((message: string, type: ToastType, duration = 3000) => {
+        const id = Date.now();
+        setToasts(prev => [...prev, { id, message, type, duration, isVisible: true }]);
+    }, []);
+
+    const closeToast = useCallback((id: number) => {
+        setToasts(prev => prev.map(t => t.id === id ? { ...t, isVisible: false } : t));
+        setTimeout(() => {
+            setToasts(prev => prev.filter(t => t.id !== id));
+        }, 300);
+    }, []);
+
+    const target = placement === "container" ? portalContainer : portalContainer ?? (mounted ? document.body : null);
+    const toastStack = (
+        <div
+            className={
+                placement === "container"
+                    ? "absolute right-3 top-3 z-[100] flex w-[min(360px,calc(100%-1.5rem))] flex-col items-stretch gap-2 pointer-events-none"
+                    : "fixed left-4 right-4 top-[72px] z-[100] flex flex-col items-stretch gap-2 pointer-events-none sm:left-auto sm:right-6 sm:w-[360px]"
+            }
+        >
+            {toasts.map(toast => (
+                <Toast
+                    key={toast.id}
+                    message={toast.message}
+                    type={toast.type}
+                    isVisible={toast.isVisible}
+                    onClose={() => closeToast(toast.id)}
+                    duration={toast.duration}
+                    placement="inline"
+                    closeLabel={labels?.close}
+                    tooltipPortalContainer={portalContainer}
+                />
+            ))}
+        </div>
+    );
+
+    return (
+        <ToastContext.Provider value={{ showToast }}>
+            {children}
+            {target ? createPortal(toastStack, target) : null}
+        </ToastContext.Provider>
+    );
+};
+
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) throw new Error('useToast must be used within a ToastProvider');
+    return context;
+};

package/src/components/feedback/generated/default-variant-keys.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { AlertVariantKey, SpinnerVariantKey, StatusScreenVariantKey, ToastVariantKey } from "./variant-keys";
+
+export const alertDefaultVariantKey: AlertVariantKey = "default";
+export const spinnerDefaultVariantKey: SpinnerVariantKey = "default";
+export const statusScreenDefaultVariantKey: StatusScreenVariantKey = "not-found";
+export const toastDefaultVariantKey: ToastVariantKey = "success";
+
+export const feedbackDefaultVariantKeys = {
+  alert: alertDefaultVariantKey,
+  spinner: spinnerDefaultVariantKey,
+  statusScreen: statusScreenDefaultVariantKey,
+  toast: toastDefaultVariantKey,
+} as const;

package/src/components/feedback/generated/variant-keys.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+export const alertVariantKeys = ["default", "destructive", "info", "success", "warning"] as const;
+export type AlertVariantKey = (typeof alertVariantKeys)[number];
+
+export const spinnerVariantKeys = ["default", "lg", "sm"] as const;
+export type SpinnerVariantKey = (typeof spinnerVariantKeys)[number];
+
+export const statusScreenVariantKeys = ["coming-soon", "error", "forbidden", "maintenance", "not-found", "offline"] as const;
+export type StatusScreenVariantKey = (typeof statusScreenVariantKeys)[number];
+
+export const toastVariantKeys = ["error", "info", "success"] as const;
+export type ToastVariantKey = (typeof toastVariantKeys)[number];
+
+export const feedbackVariantKeys = {
+  alert: alertVariantKeys,
+  spinner: spinnerVariantKeys,
+  statusScreen: statusScreenVariantKeys,
+  toast: toastVariantKeys,
+} as const;