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

package/src/components/atoms/Avatar.tsx

@@ -1,57 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "../../lib/utils"
-import type { AvatarVariantKey } from "./generated/variant-keys"
-import { avatarDefaultVariantKey } from "./generated/default-variant-keys"
-
-const avatarSlotClasses: Record<AvatarVariantKey, string> = {
-    fallback: "flex h-full w-full items-center justify-center rounded-full bg-secondary text-sm font-medium text-muted-foreground",
-    image: "aspect-square h-full w-full",
-}
-
-const Avatar = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Root
-        ref={ref}
-        className={cn(
-            "relative inline-flex h-10 w-10 shrink-0 items-center overflow-hidden rounded-full",
-            className
-        )}
-        {...props}
-    />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Image>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Image
-        ref={ref}
-        className={cn(avatarSlotClasses.image, className)}
-        {...props}
-    />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Fallback>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Fallback
-        ref={ref}
-        className={cn(
-            avatarSlotClasses[avatarDefaultVariantKey],
-            className
-        )}
-        {...props}
-    />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

package/src/components/atoms/Select.tsx

@@ -1,28 +0,0 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
-import { ChevronDown } from "lucide-react"
-
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { }
-
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-    ({ className, children, ...props }, ref) => {
-        return (
-            <div className="relative">
-                <select
-                    className={cn(
-                        "inline-flex h-10 w-[200px] appearance-none items-center justify-between rounded-lg border border-input bg-transparent px-3 py-2 text-sm font-normal text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-50",
-                        className
-                    )}
-                    ref={ref}
-                    {...props}
-                >
-                    {children}
-                </select>
-                <ChevronDown className="pointer-events-none absolute right-3 top-3 h-4 w-4 text-muted-foreground" />
-            </div>
-        )
-    }
-)
-Select.displayName = "Select"
-
-export { Select }

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

@@ -1,36 +0,0 @@
-/* eslint-disable */
-// Generated by `npm run design:sync:components`. Do not edit manually.
-
-import type { AlertVariantKey, AvatarVariantKey, BadgeVariantKey, ButtonVariantKey, CheckboxVariantKey, ImgVariantKey, InputVariantKey, RadioGroupVariantKey, SeparatorVariantKey, SpinnerVariantKey, SwitchVariantKey, TextareaVariantKey, ToggleGroupVariantKey, ToolPillVariantKey } from "./variant-keys";
-
-export const alertDefaultVariantKey: AlertVariantKey = "default";
-export const avatarDefaultVariantKey: AvatarVariantKey = "fallback";
-export const badgeDefaultVariantKey: BadgeVariantKey = "default";
-export const buttonDefaultVariantKey: ButtonVariantKey = "default";
-export const checkboxDefaultVariantKey: CheckboxVariantKey = "unchecked";
-export const imgDefaultVariantKey: ImgVariantKey = "loading";
-export const inputDefaultVariantKey: InputVariantKey = "default";
-export const radioGroupDefaultVariantKey: RadioGroupVariantKey = "unchecked";
-export const separatorDefaultVariantKey: SeparatorVariantKey = "horizontal";
-export const spinnerDefaultVariantKey: SpinnerVariantKey = "default";
-export const switchDefaultVariantKey: SwitchVariantKey = "unchecked";
-export const textareaDefaultVariantKey: TextareaVariantKey = "default";
-export const toggleGroupDefaultVariantKey: ToggleGroupVariantKey = "default";
-export const toolPillDefaultVariantKey: ToolPillVariantKey = "primary";
-
-export const atomDefaultVariantKeys = {
-  alert: alertDefaultVariantKey,
-  avatar: avatarDefaultVariantKey,
-  badge: badgeDefaultVariantKey,
-  button: buttonDefaultVariantKey,
-  checkbox: checkboxDefaultVariantKey,
-  img: imgDefaultVariantKey,
-  input: inputDefaultVariantKey,
-  radioGroup: radioGroupDefaultVariantKey,
-  separator: separatorDefaultVariantKey,
-  spinner: spinnerDefaultVariantKey,
-  switch: switchDefaultVariantKey,
-  textarea: textareaDefaultVariantKey,
-  toggleGroup: toggleGroupDefaultVariantKey,
-  toolPill: toolPillDefaultVariantKey,
-} as const;

package/src/components/molecules/AIChatInput.tsx

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

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

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

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