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

package/src/components/display/TagEditor.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import { IconPlus as Plus } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { Button } from "../inputs/Button"
+import { TagInput } from "../inputs/TagInput"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import { tagEditorDefaultVariantKey } from "./generated/default-variant-keys"
+import type { TagEditorVariantKey } from "./generated/variant-keys"
+
+export interface TagEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: string[]
+    onValueChange?: (value: string[]) => void
+    suggestions?: string[]
+    label?: React.ReactNode
+    placeholder?: string
+    removeLabel?: string
+    maxTagsReachedLabel?: string
+    disabledLabel?: string
+    maxTags?: number
+    variant?: TagEditorVariantKey
+    disabled?: boolean
+}
+
+const variantClasses: Record<TagEditorVariantKey, { root: string; input: string }> = {
+    default: {
+        root: "space-y-3",
+        input: "min-h-10",
+    },
+    compact: {
+        root: "space-y-2",
+        input: "min-h-9 text-xs",
+    },
+}
+
+function addTag(value: string[], next: string, maxTags?: number) {
+    const trimmed = next.trim()
+    if (!trimmed) return value
+    if (maxTags !== undefined && value.length >= maxTags) return value
+    if (value.some((tag) => tag.toLowerCase() === trimmed.toLowerCase())) return value
+    return [...value, trimmed]
+}
+
+const TagEditor = React.forwardRef<HTMLDivElement, TagEditorProps>(
+    (
+        {
+            value,
+            onValueChange,
+            suggestions = [],
+            label = "Tags",
+            placeholder = "Add tag...",
+            removeLabel = "Remove tag",
+            maxTagsReachedLabel = "Maximum number of tags reached",
+            disabledLabel = "Tag editing is disabled",
+            maxTags,
+            variant = tagEditorDefaultVariantKey,
+            disabled,
+            className,
+            ...props
+        },
+        ref
+    ) => {
+        const classes = variantClasses[variant]
+        const isAtMax = maxTags !== undefined && value.length >= maxTags
+        const availableSuggestions = suggestions.filter(
+            (suggestion) => !value.some((tag) => tag.toLowerCase() === suggestion.toLowerCase())
+        )
+
+        return (
+            <div ref={ref} className={cn("w-full p-0", classes.root, className)} {...props}>
+                {label ? (
+                    <div className="flex items-center justify-between gap-3">
+                        <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                            {label}
+                        </span>
+                        {maxTags ? (
+                            <span className="text-xs text-muted-foreground">
+                                {value.length}/{maxTags}
+                            </span>
+                        ) : null}
+                    </div>
+                ) : null}
+                <TagInput
+                    value={value}
+                    onValueChange={onValueChange}
+                    placeholder={placeholder}
+                    removeLabel={removeLabel}
+                    maxTags={maxTags}
+                    disabled={disabled}
+                    className={classes.input}
+                />
+                {availableSuggestions.length > 0 ? (
+                    <div className="flex flex-wrap gap-1.5">
+                        {availableSuggestions.slice(0, 6).map((suggestion) => {
+                            const suggestionDisabled = disabled || isAtMax
+                            const button = (
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    disabled={suggestionDisabled}
+                                    className="h-7 gap-1 px-2 text-xs"
+                                    onClick={() => onValueChange?.(addTag(value, suggestion, maxTags))}
+                                >
+                                    <Plus className="h-3 w-3" aria-hidden="true" />
+                                    {suggestion}
+                                </Button>
+                            )
+
+                            if (!suggestionDisabled) {
+                                return (
+                                    <React.Fragment key={suggestion}>
+                                        {button}
+                                    </React.Fragment>
+                                )
+                            }
+
+                            const disabledReason = isAtMax ? maxTagsReachedLabel : disabledLabel
+
+                            return (
+                                <Tooltip key={suggestion}>
+                                    <TooltipTrigger asChild>
+                                        <span className="inline-flex cursor-not-allowed" tabIndex={0}>
+                                            {button}
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent>{disabledReason}</TooltipContent>
+                                </Tooltip>
+                            )
+                        })}
+                    </div>
+                ) : null}
+            </div>
+        )
+    }
+)
+TagEditor.displayName = "TagEditor"
+
+export { TagEditor }

package/src/components/display/Timeline.tsx

@@ -0,0 +1,121 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Timeline = React.forwardRef<
+    HTMLOListElement,
+    React.HTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn("relative flex flex-col", className)}
+        {...props}
+    />
+))
+Timeline.displayName = "Timeline"
+
+export interface TimelineItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Whether to draw a connector line below this item. Default true; set false on last item. */
+    connector?: boolean
+    /** Marker variant. */
+    variant?: "default" | "muted" | "active" | "outline"
+    /** Custom marker node (icon, etc.). Overrides default dot. */
+    marker?: React.ReactNode
+}
+
+const VARIANT_CLASS = {
+    default: "bg-foreground",
+    muted: "bg-muted-foreground",
+    active: "gunjo-timeline-marker-active border-2 border-primary-border bg-primary",
+    outline: "border-2 border-foreground bg-background",
+} as const
+
+function hasTimelineTime(children: React.ReactNode): boolean {
+    return React.Children.toArray(children).some((child) => {
+        if (!React.isValidElement(child)) return false
+        const type = child.type as { displayName?: string }
+        return type.displayName === "TimelineTime"
+    })
+}
+
+const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
+    (
+        {
+            className,
+            connector = true,
+            variant = "default",
+            marker,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const hasTime = hasTimelineTime(children)
+
+        return (
+            <li
+                ref={ref}
+                className={cn("relative flex items-start gap-3", className)}
+                {...props}
+            >
+                <div className={cn("flex self-stretch flex-col items-center", hasTime ? "pt-1" : "pt-0.5")}>
+                    {marker ? (
+                        <div className="flex h-4 w-4 items-center justify-center">
+                            {marker}
+                        </div>
+                    ) : (
+                        <span
+                            aria-hidden
+                            className={cn("h-4 w-4 rounded-full", VARIANT_CLASS[variant])}
+                        />
+                    )}
+                    {connector ? (
+                        <span aria-hidden className={cn("min-h-4 w-0.5 flex-1 bg-border", hasTime ? "-mb-1" : "-mb-0.5")} />
+                    ) : null}
+                </div>
+                <div className={cn("min-w-0 pb-6", connector ? "" : "pb-0")}>
+                    {children}
+                </div>
+            </li>
+        )
+    }
+)
+TimelineItem.displayName = "TimelineItem"
+
+const TimelineTitle = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("text-sm font-semibold text-foreground", className)}
+        {...props}
+    />
+))
+TimelineTitle.displayName = "TimelineTitle"
+
+const TimelineDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+TimelineDescription.displayName = "TimelineDescription"
+
+const TimelineTime = React.forwardRef<
+    HTMLTimeElement,
+    React.TimeHTMLAttributes<HTMLTimeElement>
+>(({ className, ...props }, ref) => (
+    <time
+        ref={ref}
+        className={cn("text-xs text-muted-foreground", className)}
+        {...props}
+    />
+))
+TimelineTime.displayName = "TimelineTime"
+
+export { Timeline, TimelineItem, TimelineTitle, TimelineDescription, TimelineTime }

package/src/components/{atoms → display}/ToolPill.tsx

@@ -1,15 +1,26 @@
+"use client";
+
 import React from 'react';
 import { cn } from '../../lib/utils';
-import { LucideIcon } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../overlay/Tooltip';
 import type { ToolPillVariantKey } from "./generated/variant-keys";
 import { toolPillDefaultVariantKey } from "./generated/default-variant-keys";
 
+type ToolPillIcon = React.ComponentType<{
+    className?: string;
+    size?: string | number;
+    strokeWidth?: string | number;
+}>;
+
+type ToolPillTooltipSide = "top" | "right" | "bottom" | "left";
+
 interface ToolPillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    icon: LucideIcon;
+    icon: ToolPillIcon;
     label?: string;
     isActive?: boolean;
     variant?: ToolPillVariantKey;
     size?: 'sm' | 'md' | 'lg';
+    tooltipSide?: ToolPillTooltipSide;
 }
 
 export const ToolPill: React.FC<ToolPillProps> = ({
@@ -18,13 +29,15 @@ export const ToolPill: React.FC<ToolPillProps> = ({
     isActive,
     variant = toolPillDefaultVariantKey,
     size = 'md',
+    tooltipSide = 'top',
     className,
     ...props
 }) => {
+    const { disabled, "aria-label": ariaLabel } = props;
     const sizeClasses = {
-        sm: 'p-1.5',
-        md: 'p-2.5',
-        lg: 'p-3.5',
+        sm: 'h-8 w-8 rounded-lg p-1.5',
+        md: 'h-10 w-10 rounded-xl p-2.5',
+        lg: 'h-12 w-12 rounded-xl p-3.5',
     };
 
     const iconSizes = {
@@ -35,43 +48,54 @@ export const ToolPill: React.FC<ToolPillProps> = ({
 
     const variantClasses: Record<ToolPillVariantKey, { inactive: string; active: string }> = {
         primary: {
-            inactive: "bg-primary/10 text-primary hover:bg-primary/20 hover:shadow-md hover:-translate-y-0.5",
-            active: "bg-primary text-primary-foreground shadow-lg shadow-primary/30 ring-2 ring-primary/20",
+            inactive: "bg-primary-subtle text-primary-subtle-foreground hover:bg-primary-subtle hover:shadow-md hover:-translate-y-0.5",
+            active: "bg-primary text-primary-foreground shadow-lg shadow-primary-border ring-2 ring-primary-border",
         },
         secondary: {
             inactive: "bg-background/70 text-muted-foreground hover:bg-background hover:shadow-md hover:-translate-y-0.5",
             active: "bg-secondary text-secondary-foreground shadow-lg shadow-foreground/10 ring-2 ring-border",
         },
         danger: {
-            inactive: "bg-destructive/10 text-destructive hover:bg-destructive/20 hover:shadow-md hover:-translate-y-0.5",
-            active: "bg-destructive text-destructive-foreground shadow-lg shadow-destructive/30 ring-2 ring-destructive/20",
+            inactive: "bg-destructive-subtle text-destructive-subtle-foreground hover:bg-destructive-subtle hover:shadow-md hover:-translate-y-0.5",
+            active: "bg-destructive-strong text-destructive-strong-foreground shadow-lg shadow-destructive-border ring-2 ring-destructive-border",
         },
     };
 
-    return (
+    const button = (
         <button
             type="button"
             className={cn(
-                "group relative flex h-10 w-10 items-center justify-center rounded-xl transition-all duration-200",
+                "group relative flex items-center justify-center transition-all duration-200",
                 isActive ? variantClasses[variant].active : variantClasses[variant].inactive,
 
                 sizeClasses[size],
                 className
             )}
             {...props}
+            aria-label={ariaLabel ?? label}
         >
             <Icon size={iconSizes[size]} strokeWidth={isActive ? 2.5 : 2} />
 
             {label && (
                 <span className="sr-only">{label}</span>
             )}
-
-            {/* Tooltip on Hover */}
-            {label && (
-                <div className="absolute left-full ml-2 px-2 py-1 bg-foreground text-background text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-50">
-                    {label}
-                </div>
-            )}
         </button>
     );
+
+    if (!label) return button;
+
+    const trigger = disabled ? (
+        <span className="inline-flex" tabIndex={0} aria-label={label}>
+            {button}
+        </span>
+    ) : button;
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+            <TooltipContent side={tooltipSide} className="text-xs">
+                {label}
+            </TooltipContent>
+        </Tooltip>
+    );
 };

package/src/components/display/TreeView.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from "react"
+import { IconChevronDown as ChevronDown, IconChevronRight as ChevronRight } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+
+export interface TreeNode {
+    id: string
+    label: React.ReactNode
+    icon?: React.ReactNode
+    children?: TreeNode[]
+}
+
+export interface TreeViewProps extends React.HTMLAttributes<HTMLUListElement> {
+    nodes: TreeNode[]
+    /** Controlled set of expanded ids. */
+    expanded?: Set<string>
+    onExpandedChange?: (expanded: Set<string>) => void
+    /** Default-expanded ids when uncontrolled. */
+    defaultExpanded?: string[]
+    /** Selected id. */
+    selectedId?: string
+    /** Selected ids for controlled multi-selection display. */
+    selectedIds?: Iterable<string>
+    /** Selection semantics used for aria state and selected row styling. */
+    selectionMode?: "single" | "multiple" | "none"
+    onSelectedIdChange?: (id: string) => void
+    /** Optional supplemental content shown after the label, such as item count or file size. */
+    renderNodeMeta?: (node: TreeNode) => React.ReactNode
+    /** Optional actions rendered at the end of each row. */
+    renderNodeActions?: (node: TreeNode) => React.ReactNode
+    /** Optional props applied to the row wrapper, useful for drag and drop or instrumentation. */
+    getNodeRowProps?: (node: TreeNode) => React.HTMLAttributes<HTMLDivElement> | undefined
+}
+
+const TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(
+    (
+        {
+            className,
+            nodes,
+            expanded: controlledExpanded,
+            onExpandedChange,
+            defaultExpanded,
+            selectedId,
+            selectedIds,
+            selectionMode = "single",
+            onSelectedIdChange,
+            renderNodeMeta,
+            renderNodeActions,
+            getNodeRowProps,
+            ...props
+        },
+        ref
+    ) => {
+        const [internalExpanded, setInternalExpanded] = React.useState<Set<string>>(
+            () => new Set(defaultExpanded ?? [])
+        )
+        const isControlled = controlledExpanded !== undefined
+        const expanded = isControlled ? controlledExpanded : internalExpanded
+        const selectedSet = React.useMemo(
+            () => (selectedIds ? new Set(selectedIds) : undefined),
+            [selectedIds]
+        )
+
+        const setExpanded = (next: Set<string>) => {
+            if (!isControlled) setInternalExpanded(next)
+            onExpandedChange?.(next)
+        }
+
+        const toggle = (id: string) => {
+            const next = new Set(expanded)
+            if (next.has(id)) next.delete(id)
+            else next.add(id)
+            setExpanded(next)
+        }
+
+        return (
+            <ul
+                ref={ref}
+                role="tree"
+                aria-multiselectable={selectionMode === "multiple" ? true : undefined}
+                className={cn("flex flex-col gap-0.5", className)}
+                {...props}
+            >
+                {nodes.map((node) => (
+                    <TreeViewItem
+                        key={node.id}
+                        node={node}
+                        depth={0}
+                        expanded={expanded}
+                        onToggle={toggle}
+                        selectedId={selectedId}
+                        selectedIds={selectedSet}
+                        selectionMode={selectionMode}
+                        onSelect={onSelectedIdChange}
+                        renderNodeMeta={renderNodeMeta}
+                        renderNodeActions={renderNodeActions}
+                        getNodeRowProps={getNodeRowProps}
+                    />
+                ))}
+            </ul>
+        )
+    }
+)
+TreeView.displayName = "TreeView"
+
+interface TreeViewItemProps {
+    node: TreeNode
+    depth: number
+    expanded: Set<string>
+    onToggle: (id: string) => void
+    selectedId?: string
+    selectedIds?: Set<string>
+    selectionMode: "single" | "multiple" | "none"
+    onSelect?: (id: string) => void
+    renderNodeMeta?: (node: TreeNode) => React.ReactNode
+    renderNodeActions?: (node: TreeNode) => React.ReactNode
+    getNodeRowProps?: (node: TreeNode) => React.HTMLAttributes<HTMLDivElement> | undefined
+}
+
+function TreeViewItem({
+    node,
+    depth,
+    expanded,
+    onToggle,
+    selectedId,
+    selectedIds,
+    selectionMode,
+    onSelect,
+    renderNodeMeta,
+    renderNodeActions,
+    getNodeRowProps,
+}: TreeViewItemProps) {
+    const hasChildren = !!node.children && node.children.length > 0
+    const isOpen = expanded.has(node.id)
+    const isSelected = selectionMode !== "none" && (selectedIds ? selectedIds.has(node.id) : selectedId === node.id)
+    const meta = renderNodeMeta?.(node)
+    const actions = renderNodeActions?.(node)
+    const rowProps = getNodeRowProps?.(node)
+    const {
+        className: rowClassName,
+        style: rowStyle,
+        ...rowPropsRest
+    } = rowProps ?? {}
+    const rowStyleWithIndent = {
+        ...rowStyle,
+        "--tree-view-indent": `calc(0.5rem + ${depth}rem)`,
+    } as React.CSSProperties
+
+    return (
+        <li
+            role="treeitem"
+            aria-expanded={hasChildren ? isOpen : undefined}
+            aria-selected={selectionMode !== "none" ? isSelected : undefined}
+        >
+            <div
+                {...rowPropsRest}
+                data-tree-view-row
+                className={cn(
+                    "group flex w-full items-center rounded-md text-sm hover:bg-muted",
+                    isSelected && "bg-muted font-medium",
+                    rowClassName
+                )}
+                style={rowStyleWithIndent}
+            >
+                <button
+                    type="button"
+                    onClick={() => {
+                        if (hasChildren) onToggle(node.id)
+                        onSelect?.(node.id)
+                    }}
+                    className="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm py-1.5 pr-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+                >
+                    {hasChildren ? (
+                        isOpen ? (
+                            <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                        ) : (
+                            <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                        )
+                    ) : (
+                        <span className="w-3.5 shrink-0" aria-hidden />
+                    )}
+                    {node.icon ? (
+                        <span className="flex shrink-0 items-center" aria-hidden>
+                            {node.icon}
+                        </span>
+                    ) : null}
+                    <span className="min-w-0 flex-1 truncate">{node.label}</span>
+                    {meta !== null && meta !== undefined ? (
+                        <span className="shrink-0 text-xs font-normal tabular-nums text-muted-foreground">
+                            {meta}
+                        </span>
+                    ) : null}
+                </button>
+                {actions !== null && actions !== undefined ? (
+                    <div className="flex shrink-0 items-center gap-1 pr-1">
+                        {actions}
+                    </div>
+                ) : null}
+            </div>
+            {hasChildren && isOpen ? (
+                <ul role="group" className="flex flex-col gap-0.5">
+                    {node.children!.map((child) => (
+                        <TreeViewItem
+                            key={child.id}
+                            node={child}
+                            depth={depth + 1}
+                            expanded={expanded}
+                            onToggle={onToggle}
+                            selectedId={selectedId}
+                            selectedIds={selectedIds}
+                            selectionMode={selectionMode}
+                            onSelect={onSelect}
+                            renderNodeMeta={renderNodeMeta}
+                            renderNodeActions={renderNodeActions}
+                            getNodeRowProps={getNodeRowProps}
+                        />
+                    ))}
+                </ul>
+            ) : null}
+        </li>
+    )
+}
+
+export { TreeView }