@gunjo/ui 0.0.1-alpha.0

package/src/components/molecules/AIChatInput.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import * as React from "react";
+import { Send, Paperclip, Loader2, Square } from "lucide-react";
+import { Button } from "../atoms/Button";
+import { Textarea } from "../atoms/Textarea";
+import { cn } from "../../lib/utils";
+import { buttonDefaultVariantKey } from "../atoms/generated/default-variant-keys";
+
+export interface AIChatInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    onSend: (message: string, files?: File[]) => void;
+    onStop?: () => void;
+    isProcessing?: boolean;
+    placeholder?: string;
+    enableAttachments?: boolean;
+}
+
+export function AIChatInput({
+    onSend,
+    onStop,
+    isProcessing = false,
+    placeholder = "メッセージを入力...",
+    enableAttachments = true,
+    className,
+    disabled,
+    ...props
+}: AIChatInputProps) {
+    const [message, setMessage] = React.useState("");
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+    const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+    const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setMessage(e.target.value);
+        adjustHeight();
+    };
+
+    const adjustHeight = () => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = "auto";
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+
+    const handleSend = () => {
+        if (!message.trim() || isProcessing) return;
+        onSend(message);
+        setMessage("");
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+        }
+    };
+
+    const handleUploadClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            // For now, we just pass the files to onSend alongside an empty message or handle it differently
+            // In a real app, we might stage files. Here we'll just expose the capability.
+            onSend(message, Array.from(e.target.files));
+            setMessage(""); // Clear message if sent with file
+
+            if (textareaRef.current) {
+                textareaRef.current.value = ""; // Reset input
+                textareaRef.current.style.height = "auto";
+            }
+            if (fileInputRef.current) {
+                fileInputRef.current.value = ""; // Reset file input
+            }
+        }
+    };
+
+    return (
+        <div className={cn("relative flex flex-col flex-row items-center items-end w-[640px] max-w-full gap-2 p-4 bg-background border border-t border-border", className)}>
+            {enableAttachments && (
+                <>
+                    <input
+                        type="file"
+                        multiple
+                        className="hidden"
+                        ref={fileInputRef}
+                        onChange={handleFileChange}
+                    />
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="flex-shrink-0 text-muted-foreground hover:text-foreground mb-0.5"
+                        onClick={handleUploadClick}
+                        disabled={disabled || isProcessing}
+                    >
+                        <Paperclip className="h-5 w-5" />
+                    </Button>
+                </>
+            )}
+
+            <div className="flex-1 relative">
+                <Textarea
+                    ref={textareaRef}
+                    value={message}
+                    onChange={handleInput}
+                    onKeyDown={handleKeyDown}
+                    placeholder={placeholder}
+                    disabled={disabled || isProcessing}
+                    className="min-h-[44px] max-h-[200px] py-3 pr-4 resize-none rounded-xl border-border focus:ring-ring bg-muted"
+                    rows={1}
+                />
+            </div>
+
+            {isProcessing ? (
+                <Button
+                    variant="destructive"
+                    size="icon"
+                    className="flex-shrink-0 rounded-xl mb-0.5"
+                    onClick={onStop}
+                >
+                    <Square className="h-4 w-4 fill-current" />
+                </Button>
+            ) : (
+                <Button
+                    variant={buttonDefaultVariantKey}
+                    size="icon"
+                    className="mb-0.5 flex-shrink-0 rounded-xl bg-primary text-primary-foreground hover:bg-primary/90"
+                    onClick={handleSend}
+                    disabled={!message.trim() || disabled}
+                >
+                    <Send className="h-4 w-4" />
+                </Button>
+            )}
+        </div>
+    );
+}

package/src/components/molecules/AIChatMessage.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import * as React from "react";
+import { User, Sparkles, Copy, ThumbsUp, ThumbsDown } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../atoms/Avatar";
+import { Button } from "../atoms/Button";
+import { cn } from "../../lib/utils";
+import type { AiChatMessageVariantKey } from "./generated/variant-keys";
+import { aiChatMessageDefaultVariantKey } from "./generated/default-variant-keys";
+
+type AIChatMessageRole = AiChatMessageVariantKey | "system";
+
+export interface AIChatMessageProps {
+    role: AIChatMessageRole;
+    content: string;
+    avatarSrc?: string;
+    userName?: string;
+    timestamp?: string;
+    isTyping?: boolean;
+    className?: string;
+}
+
+export function AIChatMessage({
+    role,
+    content,
+    avatarSrc,
+    userName = role === "user" ? "You" : "AI Assistant",
+    timestamp,
+    isTyping = false,
+    className
+}: AIChatMessageProps) {
+    if (role === "system") {
+        return (
+            <div className={cn("flex justify-center my-4", className)}>
+                <span className="text-xs text-muted-foreground bg-muted px-3 py-1 rounded-full">
+                    {content}
+                </span>
+            </div>
+        );
+    }
+
+    const messageRole: AiChatMessageVariantKey =
+        role === "user" ? "user" : aiChatMessageDefaultVariantKey;
+    const isUser = messageRole === "user";
+
+    const rowDirectionClasses: Record<AiChatMessageVariantKey, string> = {
+        assistant: "flex-row",
+        user: "flex-row-reverse",
+    };
+
+    const bubbleClasses: Record<AiChatMessageVariantKey, string> = {
+        assistant: "bg-background border border-border text-foreground rounded-tl-none",
+        user: "bg-primary text-primary-foreground rounded-tr-none",
+    };
+
+    return (
+        <div className={cn(
+            "flex gap-4 p-4 w-[720px] max-w-full transition-colors hover:bg-muted/50 group",
+            rowDirectionClasses[messageRole],
+            className
+        )}>
+            {/* Avatar */}
+            <div className="flex-shrink-0 mt-1">
+                <Avatar className={cn("h-8 w-8", isUser ? "ring-2 ring-primary/20" : "bg-primary text-primary-foreground")}>
+                    {avatarSrc ? (
+                        <AvatarImage src={avatarSrc} alt={userName} />
+                    ) : (
+                        <AvatarFallback className={cn(isUser ? "bg-background text-muted-foreground" : "bg-transparent text-primary-foreground")}>
+                            {isUser ? <User className="h-4 w-4" /> : <Sparkles className="h-4 w-4" />}
+                        </AvatarFallback>
+                    )}
+                </Avatar>
+            </div>
+
+            {/* Content Body */}
+            <div className={cn("flex flex-col max-w-[80%]", isUser ? "items-end" : "items-start")}>
+                <div className="flex items-center gap-2 mb-1">
+                    <span className="text-sm font-semibold text-foreground">{userName}</span>
+                    {timestamp && <span className="text-xs text-muted-foreground">{timestamp}</span>}
+                </div>
+
+                <div className={cn(
+                    "text-sm leading-relaxed rounded-2xl px-4 py-3 shadow-sm whitespace-pre-wrap",
+                    bubbleClasses[messageRole]
+                )}>
+                    {content}
+                    {isTyping && (
+                        <span className="inline-block w-1.5 h-4 ml-1 align-middle bg-current animate-pulse" />
+                    )}
+                </div>
+
+                {/* Actions (Only for assistant messages usually, but logic allows both) */}
+                {!isUser && !isTyping && (
+                    <div className="flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground">
+                            <Copy className="h-3 w-3" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground">
+                            <ThumbsUp className="h-3 w-3" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground">
+                            <ThumbsDown className="h-3 w-3" />
+                        </Button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/molecules/Accordion.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import type { AccordionVariantKey } from "./generated/variant-keys"
+import { accordionDefaultVariantKey } from "./generated/default-variant-keys"
+
+function buildVariantStateMap(
+    defaultVariantKey: AccordionVariantKey,
+    defaultStateClass: string,
+    alternateStateClass: string
+): Record<AccordionVariantKey, string> {
+    return defaultVariantKey === "collapsed"
+        ? { collapsed: defaultStateClass, expanded: alternateStateClass }
+        : { collapsed: alternateStateClass, expanded: defaultStateClass }
+}
+
+const expandedAccordionVariantKey: AccordionVariantKey =
+    accordionDefaultVariantKey === "collapsed" ? "expanded" : "collapsed"
+
+const triggerStateClasses = buildVariantStateMap(
+    accordionDefaultVariantKey,
+    "",
+    "[&[data-state=open]>svg]:rotate-180"
+)
+
+const contentStateClasses = buildVariantStateMap(
+    accordionDefaultVariantKey,
+    "data-[state=closed]:animate-accordion-up",
+    "data-[state=open]:animate-accordion-down"
+)
+
+const Accordion = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Root
+        ref={ref}
+        className={cn("flex flex-col w-[400px] border", className)}
+        {...props}
+    />
+))
+Accordion.displayName = AccordionPrimitive.Root.displayName
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item
+        ref={ref}
+        className={cn("border-b", className)}
+        {...props}
+    />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                "flex flex-1 items-center justify-between px-4 py-4 text-sm font-medium transition-all hover:underline",
+                triggerStateClasses[expandedAccordionVariantKey],
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className={cn(
+            "overflow-hidden text-sm text-muted-foreground transition-all",
+            contentStateClasses[accordionDefaultVariantKey],
+            contentStateClasses[expandedAccordionVariantKey]
+        )}
+        {...props}
+    >
+        <div className={cn("px-4 pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/molecules/Breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Breadcrumb = React.forwardRef<
+    HTMLElement,
+    React.ComponentPropsWithoutRef<"nav"> & {
+        separator?: React.ReactNode
+    }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+    HTMLOListElement,
+    React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            "flex flex-col flex-row flex-wrap items-center w-fit gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+            className
+        )}
+        {...props}
+    />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        {...props}
+    />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+    HTMLAnchorElement,
+    React.ComponentPropsWithoutRef<"a"> & {
+        asChild?: boolean
+    }
+>(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a"
+
+    return (
+        <Comp
+            ref={ref}
+            className={cn("underline underline-offset-2 transition-colors hover:text-foreground", className)}
+            {...props}
+        />
+    )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+    HTMLSpanElement,
+    React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn("font-medium text-foreground", className)}
+        {...props}
+    />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+    children,
+    className,
+    ...props
+}: React.ComponentProps<"li">) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn("[&>svg]:size-3.5", className)}
+        {...props}
+    >
+        {children ?? <ChevronRight />}
+    </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+    className,
+    ...props
+}: React.ComponentProps<"span">) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        className={cn("flex h-9 w-9 items-center justify-center", className)}
+        {...props}
+    >
+        <MoreHorizontal className="h-4 w-4" />
+        <span className="sr-only">More</span>
+    </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+}

package/src/components/molecules/Calendar.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "../../lib/utils"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    ...props
+}: CalendarProps) {
+    return (
+        <DayPicker
+            showOutsideDays={showOutsideDays}
+            className={cn("flex flex-col w-[320px] rounded-md rounded-lg border bg-card p-4", className)}
+            classNames={{
+                months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 relative",
+                month: "space-y-4",
+                caption: "flex justify-center pt-1 relative items-center w-full",
+                month_caption: "flex justify-center pt-1 relative items-center w-full",
+                caption_label: "text-sm font-semibold",
+                nav: "absolute left-0 top-0 right-0 flex items-center justify-between px-1 pointer-events-none",
+                nav_button: cn(
+                    "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 text-foreground pointer-events-auto hover:bg-accent rounded-md flex items-center justify-center transition-colors"
+                ),
+                nav_button_previous: "absolute left-1 top-1",
+                nav_button_next: "absolute right-1 top-1",
+                table: "w-full border-collapse space-y-1",
+                head_row: "",
+                head_cell:
+                    "text-muted-foreground rounded-md w-9 font-normal text-xs",
+                row: "w-full mt-2",
+                cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+                day: "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+                day_button: cn(
+                    "h-9 w-9 p-0 font-normal aria-selected:opacity-100 hover:bg-accent/50 rounded-md flex items-center justify-center transition-colors"
+                ),
+                day_range_end: "day-range-end",
+                day_selected:
+                    "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+                day_today: "bg-accent text-accent-foreground",
+                day_outside:
+                    "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+                day_disabled: "text-muted-foreground opacity-50",
+                day_range_middle:
+                    "aria-selected:bg-accent aria-selected:text-accent-foreground",
+                day_hidden: "invisible",
+                ...classNames,
+            }}
+            {...props}
+        />
+    )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

package/src/components/molecules/Card.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "w-[350px] rounded-lg border bg-card text-card-foreground shadow-sm",
+            className
+        )}
+        {...props}
+    />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
+        {...props}
+    />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            "text-xl font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex items-center justify-between gap-3 p-6 pt-0", className)}
+        {...props}
+    />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }