@gunjo/ui 0.0.1-alpha.0

package/src/components/molecules/ProgressWidget.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Progress } from "../atoms/Progress"
+import { Card, CardContent, CardHeader, CardTitle } from "./Card"
+
+export interface ProgressWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string
+    value: number
+    max?: number
+    label?: string
+    subtext?: string
+    icon?: React.ReactNode
+}
+
+const ProgressWidget = React.forwardRef<HTMLDivElement, ProgressWidgetProps>(
+    ({ className, title, value, max = 100, label, subtext, icon, ...props }, ref) => {
+        const percentage = Math.round((value / max) * 100);
+
+        return (
+            <Card ref={ref} className={cn("flex flex-col w-[320px] rounded-lg border overflow-hidden", className)} {...props}>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">{title}</CardTitle>
+                    {icon && <div className="text-muted-foreground">{icon}</div>}
+                </CardHeader>
+                <CardContent>
+                    <div className="text-2xl font-bold">{label || `${percentage}%`}</div>
+                    <Progress value={percentage} className="mt-2 h-2" />
+                    {subtext && (
+                        <p className="text-xs text-muted-foreground mt-2">{subtext}</p>
+                    )}
+                </CardContent>
+            </Card>
+        )
+    }
+)
+ProgressWidget.displayName = "ProgressWidget"
+
+export { ProgressWidget }

package/src/components/molecules/Resizable.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { GripVertical } from "lucide-react"
+// @ts-ignore - Runtime inspection shows Group/Separator but types might verify PanelGroup
+import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from "react-resizable-panels"
+
+import { cn } from "../../lib/utils"
+
+const ResizablePanelGroup = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & { direction: "vertical" | "horizontal"; autoSaveId?: string; onLayout?: (sizes: number[]) => void; id?: string }) => (
+    <PanelGroup
+        className={cn(
+            "flex h-full w-full data-[panel-group-direction=vertical]:flex-col flex-col w-[520px] h-[240px]",
+            className
+        )}
+        {...props}
+    />
+)
+
+const ResizablePanel = Panel
+
+const ResizableHandle = ({
+    withHandle,
+    className,
+    ...props
+}: React.ComponentProps<typeof PanelResizeHandle> & {
+    withHandle?: boolean
+}) => (
+    <PanelResizeHandle
+        className={cn(
+            "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+            className
+        )}
+        {...props}
+    >
+        {withHandle && (
+            <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+                <GripVertical className="h-2.5 w-2.5" />
+            </div>
+        )}
+    </PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/components/molecules/ScrollArea.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../../lib/utils"
+
+const ScrollArea = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+    <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn("relative overflow-hidden flex flex-col w-[320px] h-[240px]", className)}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+            {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+    <ScrollAreaPrimitive.Scrollbar
+        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 border-t border-t-transparent p-[1px]",
+            className
+        )}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Thumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.Scrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/molecules/Sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { type VariantProps, cva } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-overlay/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom:
+                    "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+                right:
+                    "inset-y-0 right-0 h-full w-[384px] w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    }
+)
+
+interface SheetContentProps
+    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> { }
+
+const SheetContent = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Content>,
+    SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            ref={ref}
+            className={cn(sheetVariants({ side }), className)}
+            {...props}
+        >
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+            {children}
+        </SheetPrimitive.Content>
+    </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold text-foreground", className)}
+        {...props}
+    />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+    Sheet,
+    SheetPortal,
+    SheetOverlay,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+}

package/src/components/molecules/SidebarItem.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import React, { memo } from 'react';
+import { Trash2, ChevronRight } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import type { SidebarItemVariantKey } from './generated/variant-keys';
+import { sidebarItemDefaultVariantKey } from "./generated/default-variant-keys";
+
+export interface SidebarItemProps {
+    icon: React.ReactNode;
+    label: string;
+    count?: number;
+    isActive: boolean;
+    onClick: () => void;
+    onDrop?: (e: React.DragEvent) => void;
+    onDragOver?: (e: React.DragEvent) => void;
+    dragOverId?: string | null;
+    dragAction?: 'nest' | 'reorder-above' | 'reorder-below' | null;
+    id: string;
+    level?: number;
+    hasChildren?: boolean;
+    isExpanded?: boolean;
+    onToggleExpand?: (e: React.MouseEvent) => void;
+    onDelete?: (e: React.MouseEvent) => void;
+    draggable?: boolean;
+    onDragStart?: (e: React.DragEvent) => void;
+    className?: string;
+}
+
+export const SidebarItem = memo(({
+    icon,
+    label,
+    count,
+    isActive,
+    onClick,
+    onDrop,
+    onDragOver,
+    dragOverId,
+    dragAction,
+    id,
+    level = 0,
+    hasChildren = false,
+    isExpanded = false,
+    onToggleExpand,
+    onDelete,
+    draggable,
+    onDragStart,
+    className
+}: SidebarItemProps) => {
+    const baseVariant: SidebarItemVariantKey = isActive ? "active" : sidebarItemDefaultVariantKey;
+    const variantClasses: Record<SidebarItemVariantKey, string> = {
+        active: "bg-secondary text-foreground",
+        default: "text-muted-foreground hover:bg-muted hover:text-foreground",
+    };
+
+    const dragNestClass =
+        dragOverId === id && dragAction === "nest"
+            ? "bg-primary/20 text-primary ring-2 ring-primary shadow-lg shadow-primary/40 scale-[1.02] z-10"
+            : null;
+
+    return (
+        <button
+            onClick={(e) => {
+                onClick();
+                if (hasChildren && onToggleExpand) {
+                    onToggleExpand(e);
+                }
+            }}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+            draggable={draggable}
+            onDragStart={onDragStart}
+            className={cn(
+                "w-[320px] w-full h-9 flex flex-col flex-row items-center justify-between px-4 py-1.5 rounded-md text-sm transition-colors group relative",
+                dragNestClass ?? variantClasses[baseVariant],
+                className
+            )}
+            style={{ paddingLeft: `${(level * 16) + 8}px` }}
+        >
+            {dragOverId === id && dragAction === 'reorder-above' && (
+                <div className="absolute top-0 left-0 right-0 h-0.5 bg-primary z-20 pointer-events-none" />
+            )}
+            {dragOverId === id && dragAction === 'reorder-below' && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-20 pointer-events-none" />
+            )}
+            <div className="flex items-center gap-2 overflow-hidden flex-1">
+                {/* Arrow / Spacer - Fixed Width for Alignment */}
+                <div
+                    onClick={(e) => {
+                        if (hasChildren && onToggleExpand) {
+                            e.stopPropagation();
+                            onToggleExpand(e);
+                        }
+                    }}
+                    className={cn(
+                        "w-5 h-5 flex items-center justify-center cursor-pointer transition-colors",
+                        hasChildren ? "" : "pointer-events-none"
+                    )}
+                >
+                    {hasChildren && (
+                        <ChevronRight size={12} className={cn("transition-transform", isExpanded ? "rotate-90" : "")} />
+                    )}
+                </div>
+
+                <div className={cn("flex-shrink-0", isActive ? "text-primary" : "text-muted-foreground group-hover:text-foreground")}>
+                    {icon}
+                </div>
+                <span className="truncate" title={label}>{label}</span>
+            </div>
+
+            {/* Right Side: Delete + Count */}
+            <div className="flex items-center -mr-1">
+                {/* Delete Button */}
+                <div
+                    onClick={(e) => onDelete && onDelete(e)}
+                    className={cn(
+                        "w-6 h-6 flex items-center justify-center transition-opacity cursor-pointer mr-0.5",
+                        onDelete
+                            ? (isActive
+                                ? "opacity-100 text-destructive"
+                                : "text-muted-foreground/50 hover:text-destructive opacity-100 md:opacity-0 md:group-hover:opacity-100")
+                            : "pointer-events-none"
+                    )}
+                >
+                    {onDelete && <Trash2 size={12} />}
+                </div>
+
+                {count !== undefined && (
+                    <span className="text-xs opacity-60 w-6 text-center tabular-nums text-muted-foreground translate-y-[0.5px]">{count}</span>
+                )}
+            </div>
+        </button>
+    );
+});

package/src/components/molecules/SortButton.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { ArrowDownAZ, ArrowUpAZ, ArrowUpDown, type LucideIcon } from "lucide-react"
+import { Button, ButtonProps } from "../atoms/Button"
+import { cn } from "../../lib/utils"
+import { sortButtonDefaultVariantKey } from "./generated/default-variant-keys"
+import { sortButtonVariantKeys, type SortButtonVariantKey } from "./generated/variant-keys"
+
+export interface SortButtonProps extends Omit<ButtonProps, "onChange"> {
+    value?: SortButtonVariantKey
+    onSortChange?: (value: SortButtonVariantKey) => void
+    label?: string
+}
+
+const sortIconByValue: Record<SortButtonVariantKey, LucideIcon> = {
+    asc: ArrowUpAZ,
+    desc: ArrowDownAZ,
+    none: ArrowUpDown,
+}
+
+const sortButtonStateClasses: Record<SortButtonVariantKey, string> = {
+    none: "flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md",
+    asc: "inline-flex items-center h-9 py-2 px-3 gap-2 rounded-md",
+    desc: "inline-flex items-center h-9 py-2 px-3 gap-2 rounded-md",
+}
+
+const SortButton = React.forwardRef<HTMLButtonElement, SortButtonProps>(
+    ({ className, value = sortButtonDefaultVariantKey, onSortChange, label = "Sort", variant = "ghost", size = "sm", ...props }, ref) => {
+
+        const handleClick = () => {
+            const currentIndex = sortButtonVariantKeys.indexOf(value)
+            const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % sortButtonVariantKeys.length
+            onSortChange?.(sortButtonVariantKeys[nextIndex])
+        }
+
+        const Icon = sortIconByValue[value]
+
+        return (
+            <Button
+                ref={ref}
+                variant={variant}
+                size={size}
+                className={cn(sortButtonStateClasses[value], className)}
+                onClick={handleClick}
+                {...props}
+            >
+                <Icon className="h-4 w-4" />
+                <span>{label}</span>
+            </Button>
+        )
+    }
+)
+SortButton.displayName = "SortButton"
+
+export { SortButton }

package/src/components/molecules/StatusBar.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface StatusBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    leftNode?: React.ReactNode
+    rightNode?: React.ReactNode
+    fixed?: boolean
+}
+
+const StatusBar = React.forwardRef<HTMLDivElement, StatusBarProps>(
+    ({ className, leftNode, rightNode, fixed = true, children, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "flex flex-col flex-row items-center w-[640px] justify-between px-4 py-1 bg-primary text-primary-foreground text-xs z-50 shadow-md",
+                    fixed && "fixed bottom-0 left-0 right-0",
+                    className
+                )}
+                {...props}
+            >
+                <div className="flex items-center gap-4">
+                    {leftNode}
+                </div>
+
+                <div className="flex items-center gap-2">
+                    {children}
+                </div>
+
+                <div className="flex items-center gap-4">
+                    {rightNode}
+                </div>
+            </div>
+        )
+    }
+)
+StatusBar.displayName = "StatusBar"
+
+export { StatusBar }

package/src/components/molecules/Stepper.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { Check } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const stepperVariants = cva("inline-flex items-start", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row gap-0",
+            vertical: "flex-col gap-0",
+        },
+    },
+    defaultVariants: { orientation: "horizontal" },
+})
+
+export type StepperState = "completed" | "current" | "upcoming"
+
+export interface StepperStep {
+    label: string
+    state: StepperState
+}
+
+export interface StepperProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof stepperVariants> {
+    steps: StepperStep[]
+}
+
+function StepCircle({ state, index }: { state: StepperState; index: number }) {
+    const baseClasses =
+        "inline-flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold"
+    if (state === "completed") {
+        return (
+            <div className={cn(baseClasses, "bg-foreground text-background")}>
+                <Check className="h-4 w-4" />
+            </div>
+        )
+    }
+    if (state === "current") {
+        return (
+            <div
+                className={cn(
+                    baseClasses,
+                    "border-2 border-foreground bg-background text-foreground"
+                )}
+            >
+                {index + 1}
+            </div>
+        )
+    }
+    return (
+        <div className={cn(baseClasses, "bg-muted text-muted-foreground")}>
+            {index + 1}
+        </div>
+    )
+}
+
+const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+    ({ className, orientation, steps, ...props }, ref) => {
+        const isHorizontal = orientation !== "vertical"
+        return (
+            <div
+                ref={ref}
+                className={cn(stepperVariants({ orientation }), "p-4", className)}
+                {...props}
+            >
+                {steps.map((step, idx) => {
+                    const isLast = idx === steps.length - 1
+                    return (
+                        <React.Fragment key={`${step.label}-${idx}`}>
+                            <div
+                                className={cn(
+                                    "flex items-center gap-2",
+                                    isHorizontal ? "flex-col" : "flex-row"
+                                )}
+                            >
+                                <StepCircle state={step.state} index={idx} />
+                                <span
+                                    className={cn(
+                                        "text-xs font-medium",
+                                        step.state === "upcoming"
+                                            ? "text-muted-foreground"
+                                            : "text-foreground"
+                                    )}
+                                >
+                                    {step.label}
+                                </span>
+                            </div>
+                            {!isLast ? (
+                                <div
+                                    className={cn(
+                                        "bg-border",
+                                        isHorizontal
+                                            ? "mx-2 mt-4 h-0.5 w-[60px] self-start"
+                                            : "my-2 ml-4 h-[24px] w-0.5 self-start"
+                                    )}
+                                />
+                            ) : null}
+                        </React.Fragment>
+                    )
+                })}
+            </div>
+        )
+    }
+)
+Stepper.displayName = "Stepper"
+
+export { Stepper, stepperVariants }