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

package/src/components/{molecules → navigation}/Pagination.tsx

@@ -1,8 +1,14 @@
 import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import {
+    IconChevronLeft as ChevronLeft,
+    IconChevronLeftPipe as ChevronLeftPipe,
+    IconChevronRight as ChevronRight,
+    IconChevronRightPipe as ChevronRightPipe,
+    IconDots as MoreHorizontal,
+} from "@tabler/icons-react";
 import { cn } from "../../lib/utils"
-import { ButtonProps } from "../atoms/Button"
-import { buttonVariants } from "../atoms/ButtonVariants"
+import { ButtonProps } from "../inputs/Button"
+import { buttonVariants } from "../inputs/ButtonVariants"
 
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
@@ -40,6 +46,10 @@ type PaginationLinkProps = {
 } & Pick<ButtonProps, "size"> &
     React.ComponentProps<"a">
 
+type PaginationDirectionProps = React.ComponentProps<typeof PaginationLink> & {
+    label?: React.ReactNode
+}
+
 const PaginationLink = ({
     className,
     isActive,
@@ -53,6 +63,7 @@ const PaginationLink = ({
                 variant: isActive ? "outline" : "ghost",
                 size,
             }),
+            "aria-disabled:pointer-events-none aria-disabled:opacity-50",
             className
         )}
         {...props}
@@ -60,10 +71,30 @@ const PaginationLink = ({
 )
 PaginationLink.displayName = "PaginationLink"
 
+const PaginationFirst = ({
+    className,
+    children,
+    label = "First",
+    ...props
+}: PaginationDirectionProps) => (
+    <PaginationLink
+        aria-label="Go to first page"
+        size="default"
+        className={cn("gap-1 pl-2.5", className)}
+        {...props}
+    >
+        <ChevronLeftPipe className="h-4 w-4" />
+        <span>{children ?? label}</span>
+    </PaginationLink>
+)
+PaginationFirst.displayName = "PaginationFirst"
+
 const PaginationPrevious = ({
     className,
+    children,
+    label = "Previous",
     ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: PaginationDirectionProps) => (
     <PaginationLink
         aria-label="Go to previous page"
         size="default"
@@ -71,27 +102,47 @@ const PaginationPrevious = ({
         {...props}
     >
         <ChevronLeft className="h-4 w-4" />
-        <span>Previous</span>
+        <span>{children ?? label}</span>
     </PaginationLink>
 )
 PaginationPrevious.displayName = "PaginationPrevious"
 
 const PaginationNext = ({
     className,
+    children,
+    label = "Next",
     ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: PaginationDirectionProps) => (
     <PaginationLink
         aria-label="Go to next page"
         size="default"
         className={cn("gap-1 pr-2.5", className)}
         {...props}
     >
-        <span>Next</span>
+        <span>{children ?? label}</span>
         <ChevronRight className="h-4 w-4" />
     </PaginationLink>
 )
 PaginationNext.displayName = "PaginationNext"
 
+const PaginationLast = ({
+    className,
+    children,
+    label = "Last",
+    ...props
+}: PaginationDirectionProps) => (
+    <PaginationLink
+        aria-label="Go to last page"
+        size="default"
+        className={cn("gap-1 pr-2.5", className)}
+        {...props}
+    >
+        <span>{children ?? label}</span>
+        <ChevronRightPipe className="h-4 w-4" />
+    </PaginationLink>
+)
+PaginationLast.displayName = "PaginationLast"
+
 const PaginationEllipsis = ({
     className,
     ...props
@@ -111,7 +162,9 @@ export {
     Pagination,
     PaginationContent,
     PaginationEllipsis,
+    PaginationFirst,
     PaginationItem,
+    PaginationLast,
     PaginationLink,
     PaginationNext,
     PaginationPrevious,

package/src/components/{organisms → navigation}/RightRail.tsx

@@ -13,7 +13,7 @@ const RightRail = React.forwardRef<HTMLDivElement, RightRailProps>(
             <div
                 ref={ref}
                 className={cn(
-                    "flex flex-col w-[256px] h-[360px] h-full border border-l border-border bg-background z-30 flex-shrink-0",
+                    "z-30 flex h-full min-h-0 flex-shrink-0 flex-col border-l border-border bg-background",
                     width,
                     className
                 )}

package/src/components/navigation/Sidebar.tsx

@@ -0,0 +1,223 @@
+"use client"
+
+import * as React from "react"
+import {
+    IconChevronLeft as ChevronLeft,
+    IconChevronRight as ChevronRight,
+} from "@tabler/icons-react"
+
+import { cn } from "../../lib/utils"
+import { TooltipButton, type TooltipButtonProps } from "../inputs/TooltipButton"
+
+interface SidebarContextValue {
+    collapsed: boolean
+    setCollapsed: (collapsed: boolean) => void
+    toggleCollapsed: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null)
+
+export function useSidebar() {
+    const ctx = React.useContext(SidebarContext)
+    if (!ctx)
+        throw new Error("useSidebar must be used within <SidebarProvider>")
+    return ctx
+}
+
+export interface SidebarProviderProps {
+    defaultCollapsed?: boolean
+    collapsed?: boolean
+    onCollapsedChange?: (collapsed: boolean) => void
+    children: React.ReactNode
+}
+
+const SidebarProvider = ({
+    defaultCollapsed = false,
+    collapsed: controlledCollapsed,
+    onCollapsedChange,
+    children,
+}: SidebarProviderProps) => {
+    const [internalCollapsed, setInternalCollapsed] =
+        React.useState(defaultCollapsed)
+    const isControlled = controlledCollapsed !== undefined
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed
+
+    const setCollapsed = React.useCallback(
+        (value: boolean) => {
+            if (!isControlled) setInternalCollapsed(value)
+            onCollapsedChange?.(value)
+        },
+        [isControlled, onCollapsedChange]
+    )
+
+    const toggleCollapsed = React.useCallback(
+        () => setCollapsed(!collapsed),
+        [collapsed, setCollapsed]
+    )
+
+    const value = React.useMemo(
+        () => ({ collapsed, setCollapsed, toggleCollapsed }),
+        [collapsed, setCollapsed, toggleCollapsed]
+    )
+
+    return (
+        <SidebarContext.Provider value={value}>
+            {children}
+        </SidebarContext.Provider>
+    )
+}
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => {
+    const { collapsed } = useSidebar()
+    return (
+        <aside
+            ref={ref}
+            data-collapsed={collapsed}
+            className={cn(
+                "relative flex h-full flex-col overflow-visible border-r bg-muted/40 transition-[width] duration-200",
+                collapsed ? "w-[60px]" : "w-[240px]",
+                className
+            )}
+            {...props}
+        />
+    )
+})
+Sidebar.displayName = "Sidebar"
+
+const SidebarHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "flex items-center gap-2 border-b bg-background px-4 py-3",
+            className
+        )}
+        {...props}
+    />
+))
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarBody = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "flex-1 overflow-y-auto flex flex-col gap-0.5 p-2",
+            // Scrollbar UX: hide by default, reveal a thin, track-less
+            // thumb only while the cursor is inside the sidebar. Firefox
+            // uses `scrollbar-width` / `scrollbar-color`; WebKit uses
+            // ::-webkit-scrollbar pseudo-elements. Consumers can override
+            // by passing their own scrollbar utilities through className.
+            "[scrollbar-width:none] hover:[scrollbar-width:thin]",
+            "[scrollbar-color:transparent_transparent] hover:[scrollbar-color:hsl(var(--border))_transparent]",
+            "[&::-webkit-scrollbar]:w-0 hover:[&::-webkit-scrollbar]:w-1.5",
+            "[&::-webkit-scrollbar-track]:bg-transparent",
+            "[&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-border/60",
+            "[&::-webkit-scrollbar-thumb]:rounded-full",
+            className
+        )}
+        {...props}
+    />
+))
+SidebarBody.displayName = "SidebarBody"
+
+const SidebarFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "flex items-center gap-2 border-t bg-background px-4 py-3",
+            className
+        )}
+        {...props}
+    />
+))
+SidebarFooter.displayName = "SidebarFooter"
+
+export interface SidebarToggleProps
+    extends Omit<TooltipButtonProps, "children" | "tooltip" | "onClick"> {
+    expandLabel?: React.ReactNode
+    collapseLabel?: React.ReactNode
+    placement?: "center" | "header" | "footer"
+}
+
+const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
+    (
+        {
+            className,
+            expandLabel = "Expand sidebar",
+            collapseLabel = "Collapse sidebar",
+            placement = "footer",
+            tooltipSide = "right",
+            tooltipAlign = "center",
+            tooltipSideOffset = 8,
+            ...props
+        },
+        ref
+    ) => {
+        const { collapsed, toggleCollapsed } = useSidebar()
+        const label = collapsed ? expandLabel : collapseLabel
+        const placementClass = {
+            center: "top-1/2 -translate-y-1/2",
+            header: "top-[52px] -translate-y-1/2",
+            footer: "bottom-[52px] translate-y-1/2",
+        }[placement]
+
+        return (
+            <TooltipButton
+                ref={ref}
+                type="button"
+                variant="outline"
+                size="icon"
+                className={cn(
+                    "absolute right-0 z-20 h-7 w-7 translate-x-1/2 rounded-full bg-background shadow-sm",
+                    placementClass,
+                    className
+                )}
+                tooltip={label}
+                tooltipSide={tooltipSide}
+                tooltipAlign={tooltipAlign}
+                tooltipSideOffset={tooltipSideOffset}
+                onClick={toggleCollapsed}
+                aria-label={typeof label === "string" ? label : undefined}
+                {...props}
+            >
+                {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+            </TooltipButton>
+        )
+    }
+)
+SidebarToggle.displayName = "SidebarToggle"
+
+const SidebarSeparator = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="separator"
+        className={cn("mx-2 my-2 h-px bg-border", className)}
+        {...props}
+    />
+))
+SidebarSeparator.displayName = "SidebarSeparator"
+
+export {
+    Sidebar,
+    SidebarProvider,
+    SidebarHeader,
+    SidebarBody,
+    SidebarFooter,
+    SidebarToggle,
+    SidebarSeparator,
+}

package/src/components/navigation/SidebarItem.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import React, { memo } from 'react';
+import { IconTrash as Trash2, IconChevronRight as ChevronRight } from "@tabler/icons-react";
+import { cn } from '../../lib/utils';
+import type { SidebarItemVariantKey } from './generated/variant-keys';
+import { sidebarItemDefaultVariantKey } from "./generated/default-variant-keys";
+import { TooltipButton } from "../inputs/TooltipButton";
+
+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;
+    reserveChevronSpace?: boolean;
+    onToggleExpand?: (e: React.MouseEvent) => void;
+    onDelete?: (e: React.MouseEvent) => void;
+    deleteLabel?: React.ReactNode;
+    draggable?: boolean;
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: (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,
+    reserveChevronSpace = true,
+    onToggleExpand,
+    onDelete,
+    deleteLabel = "Delete",
+    draggable,
+    onDragStart,
+    onDragEnd,
+    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-subtle text-primary-subtle-foreground ring-2 ring-primary-border shadow-lg shadow-primary-border scale-[1.02] z-10"
+            : null;
+    const showChevronSlot = hasChildren || reserveChevronSpace;
+    const deleteAriaLabel = typeof deleteLabel === "string" ? deleteLabel : undefined;
+
+    return (
+        <div
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+            draggable={draggable}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            className={cn(
+                "group relative flex h-9 w-full cursor-pointer items-center rounded-md text-sm transition-colors",
+                dragNestClass ?? variantClasses[baseVariant],
+                className
+            )}
+        >
+            {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" />
+            )}
+            <button
+                type="button"
+                onClick={(e) => {
+                    onClick();
+                    if (hasChildren && onToggleExpand) {
+                        onToggleExpand(e);
+                    }
+                }}
+                data-sidebar-item-button
+                className="flex h-full min-w-0 flex-1 items-center gap-2 overflow-hidden py-1.5 pr-0 text-left"
+                style={{ "--sidebar-item-indent": `calc(0.5rem + ${level}rem)` } as React.CSSProperties}
+                aria-current={isActive ? "page" : undefined}
+            >
+                {showChevronSlot ? (
+                    <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>
+                ) : null}
+
+                <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>
+            </button>
+
+            {/* Right Side: Delete + Count */}
+            <div className="grid w-14 shrink-0 grid-cols-[1.5rem_1.5rem] items-center justify-end">
+                {onDelete ? (
+                    <TooltipButton
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                            "w-6 h-6 transition-opacity",
+                            isActive
+                                ? "text-destructive"
+                                : "text-muted-foreground/50 hover:text-destructive opacity-100 md:opacity-0 md:group-hover:opacity-100"
+                        )}
+                        tooltip={deleteLabel}
+                        tooltipSide="right"
+                        aria-label={deleteAriaLabel}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onDelete(e);
+                        }}
+                    >
+                        <Trash2 size={12} />
+                    </TooltipButton>
+                ) : (
+                    <div className="h-6 w-6" aria-hidden />
+                )}
+
+                {count !== undefined && (
+                    <span className="text-xs opacity-60 w-6 text-center tabular-nums text-muted-foreground translate-y-[0.5px]">{count}</span>
+                )}
+            </div>
+        </div>
+    );
+});

package/src/components/{molecules → navigation}/Tabs.tsx

@@ -23,7 +23,7 @@ const TabsList = React.forwardRef<
     <TabsPrimitive.List
         ref={ref}
         className={cn(
-            "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+            "inline-flex min-h-12 items-center justify-center overflow-y-hidden rounded-md bg-muted p-1.5 text-muted-foreground",
             className
         )}
         {...props}
@@ -38,7 +38,7 @@ const TabsTrigger = React.forwardRef<
     <TabsPrimitive.Trigger
         ref={ref}
         className={cn(
-            "inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+            "inline-flex h-9 cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
             className
         )}
         {...props}

package/src/components/navigation/TextLink.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { IconExternalLink } from "@tabler/icons-react"
+
+import { cn } from "../../lib/utils"
+import { Icon } from "../display/Icon"
+import { textLinkDefaultVariantKey } from "./generated/default-variant-keys"
+import type { TextLinkVariantKey } from "./generated/variant-keys"
+
+const textLinkVariantClasses: Record<TextLinkVariantKey, string> = {
+    default: "font-medium text-primary underline underline-offset-4 hover:text-primary-strong",
+    muted: "font-medium text-foreground underline underline-offset-4 hover:text-primary",
+}
+
+export interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: TextLinkVariantKey
+    newTabLabel?: string
+    external?: boolean
+}
+
+function normalizeRel(rel: string | undefined, opensNewTab: boolean): string | undefined {
+    if (!opensNewTab) return rel
+    const tokens = new Set((rel ?? "").split(/\s+/).filter(Boolean))
+    tokens.add("noreferrer")
+    return Array.from(tokens).join(" ")
+}
+
+const TextLink = React.forwardRef<HTMLAnchorElement, TextLinkProps>(
+    (
+        {
+            children,
+            className,
+            external,
+            newTabLabel = "opens in a new tab",
+            rel,
+            target,
+            variant = textLinkDefaultVariantKey,
+            ...props
+        },
+        ref
+    ) => {
+        const opensNewTab = target === "_blank"
+        const showExternalIcon = opensNewTab || Boolean(external)
+
+        return (
+            <a
+                ref={ref}
+                className={cn(
+                    "inline-flex items-center gap-1 p-0 align-baseline text-sm transition-colors",
+                    textLinkVariantClasses[variant],
+                    className
+                )}
+                rel={normalizeRel(rel, opensNewTab)}
+                target={target}
+                {...props}
+            >
+                <span>{children}</span>
+                {showExternalIcon ? (
+                    <>
+                        <Icon icon={IconExternalLink} size="xs" decorative className="translate-y-px" />
+                        {opensNewTab && newTabLabel ? <span className="sr-only">({newTabLabel})</span> : null}
+                    </>
+                ) : null}
+            </a>
+        )
+    }
+)
+TextLink.displayName = "TextLink"
+
+export { TextLink }

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

@@ -0,0 +1,12 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { SidebarItemVariantKey, TextLinkVariantKey } from "./variant-keys";
+
+export const sidebarItemDefaultVariantKey: SidebarItemVariantKey = "default";
+export const textLinkDefaultVariantKey: TextLinkVariantKey = "default";
+
+export const navigationDefaultVariantKeys = {
+  sidebarItem: sidebarItemDefaultVariantKey,
+  textLink: textLinkDefaultVariantKey,
+} as const;

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

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+export const sidebarItemVariantKeys = ["active", "default"] as const;
+export type SidebarItemVariantKey = (typeof sidebarItemVariantKeys)[number];
+
+export const textLinkVariantKeys = ["default", "muted"] as const;
+export type TextLinkVariantKey = (typeof textLinkVariantKeys)[number];
+
+export const navigationVariantKeys = {
+  sidebarItem: sidebarItemVariantKeys,
+  textLink: textLinkVariantKeys,
+} as const;

package/src/components/overlay/AIChatInput.tsx

@@ -0,0 +1,5 @@
+export { ChatInput as AIChatInput } from "../inputs/ChatInput";
+export type {
+    ChatInputLabels as AIChatInputLabels,
+    ChatInputProps as AIChatInputProps,
+} from "../inputs/ChatInput";

package/src/components/overlay/AIChatMessage.tsx

@@ -0,0 +1,6 @@
+export { ChatMessage as AIChatMessage } from "../display/ChatMessage";
+export type {
+    ChatMessageProps as AIChatMessageProps,
+    ChatMessageRole as AIChatMessageRole,
+    ChatMessageLabels as AIChatMessageLabels,
+} from "../display/ChatMessage";