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

package/src/components/molecules/ProgressWidget.tsx

@@ -1,40 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-"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

@@ -1,48 +0,0 @@
-"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/SidebarItem.tsx

@@ -1,134 +0,0 @@
-"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/Toast.tsx

@@ -1,57 +0,0 @@
-"use client"
-import React, { useEffect } from 'react';
-import { CheckCircle, XCircle, Info, X } from 'lucide-react';
-import { cn } from '../../lib/utils'; // Relative path to lib
-import type { ToastVariantKey } from "./generated/variant-keys";
-import { toastDefaultVariantKey } from "./generated/default-variant-keys";
-
-export type ToastType = ToastVariantKey;
-
-export interface ToastProps {
-    message: string;
-    type?: ToastType;
-    isVisible: boolean;
-    onClose: () => void;
-    duration?: number;
-}
-
-export function Toast({ message, type = toastDefaultVariantKey, isVisible, onClose, duration = 3000 }: ToastProps) {
-    useEffect(() => {
-        if (isVisible) {
-            const timer = setTimeout(() => {
-                onClose();
-            }, duration);
-            return () => clearTimeout(timer);
-        }
-    }, [isVisible, duration, onClose]);
-
-    if (!isVisible) return null;
-
-    const icons: Record<ToastVariantKey, React.ReactNode> = {
-        success: <CheckCircle className="text-success" size={20} />,
-        error: <XCircle className="text-destructive" size={20} />,
-        info: <Info className="text-info" size={20} />
-    };
-
-    const bgColors: Record<ToastVariantKey, string> = {
-        success: 'bg-card border-success/20 text-foreground',
-        error: 'bg-card border-destructive/20 text-foreground',
-        info: 'bg-card border-info/20 text-foreground'
-    };
-
-    return (
-        <div className={cn(
-            "fixed top-4 right-4 z-[9999] flex flex-col flex-row items-center w-[384px] max-w-sm w-full md:w-auto gap-3 px-4 py-3 rounded-xl border shadow-2xl animate-in slide-in-from-top-5 fade-in duration-300 pointer-events-auto",
-            bgColors[type]
-        )}>
-            {icons[type]}
-            <p className="text-sm font-medium">{message}</p>
-            <button
-                onClick={onClose}
-                className="ml-2 p-1 text-muted-foreground hover:text-foreground rounded-lg transition-colors"
-            >
-                <X size={14} />
-            </button>
-        </div>
-    );
-}

package/src/components/molecules/Tooltip.tsx

@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "../../lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-    React.ElementRef<typeof TooltipPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-    <TooltipPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={cn(
-            "z-50 flex flex-col w-[168px] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
-    />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

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

@@ -1,22 +0,0 @@
-/* eslint-disable */
-// Generated by `npm run design:sync:components`. Do not edit manually.
-
-import type { AccordionVariantKey, AiChatMessageVariantKey, FilterButtonVariantKey, ListVariantKey, SidebarItemVariantKey, SortButtonVariantKey, ToastVariantKey } from "./variant-keys";
-
-export const accordionDefaultVariantKey: AccordionVariantKey = "collapsed";
-export const aiChatMessageDefaultVariantKey: AiChatMessageVariantKey = "assistant";
-export const filterButtonDefaultVariantKey: FilterButtonVariantKey = "default";
-export const listDefaultVariantKey: ListVariantKey = "dot";
-export const sidebarItemDefaultVariantKey: SidebarItemVariantKey = "default";
-export const sortButtonDefaultVariantKey: SortButtonVariantKey = "none";
-export const toastDefaultVariantKey: ToastVariantKey = "success";
-
-export const moleculeDefaultVariantKeys = {
-  accordion: accordionDefaultVariantKey,
-  aiChatMessage: aiChatMessageDefaultVariantKey,
-  filterButton: filterButtonDefaultVariantKey,
-  list: listDefaultVariantKey,
-  sidebarItem: sidebarItemDefaultVariantKey,
-  sortButton: sortButtonDefaultVariantKey,
-  toast: toastDefaultVariantKey,
-} as const;

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

@@ -1,33 +0,0 @@
-/* eslint-disable */
-// Generated by `npm run design:sync:components`. Do not edit manually.
-
-export const accordionVariantKeys = ["collapsed", "expanded"] as const;
-export type AccordionVariantKey = (typeof accordionVariantKeys)[number];
-
-export const aiChatMessageVariantKeys = ["assistant", "user"] as const;
-export type AiChatMessageVariantKey = (typeof aiChatMessageVariantKeys)[number];
-
-export const filterButtonVariantKeys = ["default", "popover", "selected"] as const;
-export type FilterButtonVariantKey = (typeof filterButtonVariantKeys)[number];
-
-export const listVariantKeys = ["check", "circle", "dot"] as const;
-export type ListVariantKey = (typeof listVariantKeys)[number];
-
-export const sidebarItemVariantKeys = ["active", "default"] as const;
-export type SidebarItemVariantKey = (typeof sidebarItemVariantKeys)[number];
-
-export const sortButtonVariantKeys = ["asc", "desc", "none"] as const;
-export type SortButtonVariantKey = (typeof sortButtonVariantKeys)[number];
-
-export const toastVariantKeys = ["error", "info", "success"] as const;
-export type ToastVariantKey = (typeof toastVariantKeys)[number];
-
-export const moleculeVariantKeys = {
-  accordion: accordionVariantKeys,
-  aiChatMessage: aiChatMessageVariantKeys,
-  filterButton: filterButtonVariantKeys,
-  list: listVariantKeys,
-  sidebarItem: sidebarItemVariantKeys,
-  sortButton: sortButtonVariantKeys,
-  toast: toastVariantKeys,
-} as const;

package/src/components/organisms/CommandPalette.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-    CommandDialog,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-    CommandShortcut,
-} from "../molecules/Command"
-
-import { DialogProps } from "@radix-ui/react-dialog"
-
-interface ToggleAction {
-    id: string
-    label: string
-    icon?: React.ReactNode
-    shortcut?: string
-    action: () => void
-}
-
-interface CommandPaletteProps extends DialogProps {
-    groups: {
-        heading: string
-        items: ToggleAction[]
-    }[]
-    placeholder?: string
-}
-
-export function CommandPalette({ groups, placeholder = "Type a command or search...", ...props }: CommandPaletteProps) {
-    return (
-        <CommandDialog {...props}>
-            <div className="flex flex-col w-[480px] max-w-full rounded-lg border">
-                <CommandInput placeholder={placeholder} />
-                <CommandList>
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    {groups.map((group) => (
-                        <React.Fragment key={group.heading}>
-                            <CommandGroup heading={group.heading}>
-                                {group.items.map((item) => (
-                                    <CommandItem key={item.id} onSelect={item.action}>
-                                        {item.icon && <span className="mr-2 h-4 w-4">{item.icon}</span>}
-                                        <span>{item.label}</span>
-                                        {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
-                                    </CommandItem>
-                                ))}
-                            </CommandGroup>
-                            <CommandSeparator />
-                        </React.Fragment>
-                    ))}
-                </CommandList>
-            </div>
-        </CommandDialog>
-    )
-}

package/src/components/organisms/FloatingPanel.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { cn } from '../../lib/utils';
-import { motion, HTMLMotionProps } from 'framer-motion';
-
-interface FloatingPanelProps extends HTMLMotionProps<"div"> {
-    children: React.ReactNode;
-    className?: string;
-    variant?: 'glass' | 'solid' | 'ghost';
-    title?: string;
-    contentClassName?: string;
-}
-
-export const FloatingPanel: React.FC<FloatingPanelProps> = ({
-    children,
-    className,
-    variant = 'glass',
-    title,
-    contentClassName,
-    ...props
-}) => {
-    return (
-        <motion.div
-            initial={{ opacity: 0, y: 10, scale: 0.98 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 10, scale: 0.98 }}
-            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-            className={cn(
-                "w-[360px] rounded-2xl border flex flex-col overflow-hidden transition-all duration-300 hover:shadow-lg", // Reduced hover shadow intensity
-                variant === 'glass' && "bg-background/80 backdrop-blur-md border-border/70",
-                variant === 'solid' && "bg-background border-border",
-                variant === 'ghost' && "bg-transparent border-transparent shadow-none hover:shadow-none",
-                className
-            )}
-            {...props}
-        >
-            {title && (
-                <div className="px-4 py-3 border-b border-border/60 flex items-center justify-between shrink-0">
-                    <h3 className="font-semibold text-sm text-foreground">{title}</h3>
-                </div>
-            )}
-            <div className={cn("flex-1 overflow-auto", contentClassName)}>
-                {children}
-            </div>
-        </motion.div>
-    );
-};