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

package/src/components/inputs/VoiceInputButton.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import * as React from "react";
+import {
+    IconLoader2 as Loader,
+    IconMicrophone as Microphone,
+    IconPlayerStopFilled as Stop,
+} from "@tabler/icons-react";
+import { cn } from "../../lib/utils";
+import { Button, type ButtonProps } from "./Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip";
+
+type SpeechRecognitionEvent = Event & {
+    resultIndex: number;
+    results: SpeechRecognitionResultList;
+};
+
+type SpeechRecognitionErrorEvent = Event & {
+    error?: string;
+};
+
+type SpeechRecognitionInstance = EventTarget & {
+    lang: string;
+    continuous: boolean;
+    interimResults: boolean;
+    maxAlternatives: number;
+    onresult: ((event: SpeechRecognitionEvent) => void) | null;
+    onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
+    onend: (() => void) | null;
+    start: () => void;
+    stop: () => void;
+    abort: () => void;
+};
+
+type SpeechRecognitionConstructor = new () => SpeechRecognitionInstance;
+
+declare global {
+    interface Window {
+        SpeechRecognition?: SpeechRecognitionConstructor;
+        webkitSpeechRecognition?: SpeechRecognitionConstructor;
+    }
+}
+
+export type VoiceInputStatus = "idle" | "requesting" | "listening" | "unsupported" | "permission-denied" | "error";
+
+export interface VoiceInputButtonLabels {
+    start?: string;
+    stop?: string;
+    requesting?: string;
+    unsupported?: string;
+    permissionDenied?: string;
+    error?: string;
+}
+
+export interface VoiceInputButtonProps extends Omit<ButtonProps, "onClick" | "children"> {
+    onTranscript: (transcript: string) => void;
+    onListeningChange?: (listening: boolean) => void;
+    onStatusChange?: (status: VoiceInputStatus) => void;
+    onToggle?: () => void;
+    listening?: boolean;
+    defaultListening?: boolean;
+    language?: string;
+    labels?: VoiceInputButtonLabels;
+}
+
+function getSpeechRecognitionConstructor() {
+    if (typeof window === "undefined") return null;
+    return window.SpeechRecognition ?? window.webkitSpeechRecognition ?? null;
+}
+
+async function requestMicrophoneAccess(timeoutMs = 8000) {
+    if (!navigator.mediaDevices?.getUserMedia) {
+        const error = new Error("Microphone permission API is unavailable.");
+        error.name = "NotSupportedError";
+        throw error;
+    }
+
+    let timeoutId: number | null = null;
+    const timeout = new Promise<never>((_, reject) => {
+        timeoutId = window.setTimeout(() => {
+            const error = new Error("Microphone permission request timed out.");
+            error.name = "TimeoutError";
+            reject(error);
+        }, timeoutMs);
+    });
+
+    let stream: MediaStream;
+    try {
+        stream = await Promise.race([
+            navigator.mediaDevices.getUserMedia({ audio: true }),
+            timeout,
+        ]);
+    } finally {
+        if (timeoutId !== null) {
+            window.clearTimeout(timeoutId);
+        }
+    }
+
+    for (const track of stream.getTracks()) {
+        track.stop();
+    }
+}
+
+export function VoiceInputButton({
+    onTranscript,
+    onListeningChange,
+    onStatusChange,
+    onToggle,
+    listening,
+    defaultListening = false,
+    language = "ja-JP",
+    labels,
+    disabled,
+    className,
+    ...props
+}: VoiceInputButtonProps) {
+    const [status, setStatus] = React.useState<VoiceInputStatus>("idle");
+    const [isSupported, setIsSupported] = React.useState(true);
+    const [uncontrolledListening, setUncontrolledListening] = React.useState(defaultListening);
+    const recognitionRef = React.useRef<SpeechRecognitionInstance | null>(null);
+    const stoppedByUserRef = React.useRef(false);
+    const finalTranscriptRef = React.useRef("");
+    const interimTranscriptRef = React.useRef("");
+    const statusRef = React.useRef<VoiceInputStatus>("idle");
+    const isListeningControlled = listening !== undefined;
+    const currentListening = isListeningControlled ? listening : uncontrolledListening;
+
+    const updateStatus = React.useCallback((nextStatus: VoiceInputStatus) => {
+        statusRef.current = nextStatus;
+        setStatus(nextStatus);
+    }, []);
+
+    const resolvedLabels = {
+        start: labels?.start ?? "音声入力",
+        stop: labels?.stop ?? "録音を停止",
+        requesting: labels?.requesting ?? "マイクのアクセス権を確認しています。",
+        unsupported: labels?.unsupported ?? "このブラウザは音声入力に対応していません。",
+        permissionDenied: labels?.permissionDenied ?? "マイクのアクセス権が許可されていません。",
+        error: labels?.error ?? "音声入力を開始できませんでした。",
+    };
+
+    React.useEffect(() => {
+        const supported = Boolean(getSpeechRecognitionConstructor());
+        setIsSupported(supported);
+        if (!supported) updateStatus("unsupported");
+    }, [updateStatus]);
+
+    React.useEffect(() => {
+        statusRef.current = status;
+        onStatusChange?.(status);
+    }, [onStatusChange, status]);
+
+    React.useEffect(() => {
+        return () => {
+            recognitionRef.current?.abort();
+        };
+    }, []);
+
+    const setListening = React.useCallback(
+        (nextListening: boolean) => {
+            if (!isListeningControlled) {
+                setUncontrolledListening(nextListening);
+            }
+            onListeningChange?.(nextListening);
+        },
+        [isListeningControlled, onListeningChange]
+    );
+
+    const emitTranscript = React.useCallback(() => {
+        const transcript = (finalTranscriptRef.current || interimTranscriptRef.current).trim();
+        finalTranscriptRef.current = "";
+        interimTranscriptRef.current = "";
+        if (transcript.length > 0) {
+            onTranscript(transcript);
+        }
+    }, [onTranscript]);
+
+    const stopRecognition = React.useCallback(() => {
+        stoppedByUserRef.current = true;
+        recognitionRef.current?.stop();
+        setListening(false);
+        updateStatus("idle");
+    }, [setListening, updateStatus]);
+
+    const startRecognition = React.useCallback(async () => {
+        const SpeechRecognition = getSpeechRecognitionConstructor();
+        if (!SpeechRecognition) {
+            setIsSupported(false);
+            updateStatus("unsupported");
+            return;
+        }
+
+        updateStatus("requesting");
+        stoppedByUserRef.current = false;
+        finalTranscriptRef.current = "";
+        interimTranscriptRef.current = "";
+
+        try {
+            await requestMicrophoneAccess();
+
+            const recognition = new SpeechRecognition();
+            recognition.lang = language;
+            recognition.continuous = false;
+            recognition.interimResults = true;
+            recognition.maxAlternatives = 1;
+            recognition.onresult = (event) => {
+                let interim = "";
+                let finalText = "";
+                for (let index = event.resultIndex; index < event.results.length; index += 1) {
+                    const result = event.results[index];
+                    const transcript = result[0]?.transcript ?? "";
+                    if (result.isFinal) {
+                        finalText += transcript;
+                    } else {
+                        interim += transcript;
+                    }
+                }
+                if (finalText) {
+                    finalTranscriptRef.current = `${finalTranscriptRef.current} ${finalText}`.trim();
+                }
+                interimTranscriptRef.current = interim.trim();
+            };
+            recognition.onerror = (event) => {
+                if (event.error === "not-allowed" || event.error === "service-not-allowed") {
+                    updateStatus("permission-denied");
+                } else {
+                    updateStatus("error");
+                }
+                setListening(false);
+            };
+            recognition.onend = () => {
+                emitTranscript();
+                recognitionRef.current = null;
+                setListening(false);
+                if (
+                    stoppedByUserRef.current ||
+                    statusRef.current === "listening" ||
+                    statusRef.current === "requesting"
+                ) {
+                    updateStatus("idle");
+                }
+            };
+            recognitionRef.current = recognition;
+            recognition.start();
+            setListening(true);
+            updateStatus("listening");
+        } catch (error) {
+            const errorName = error instanceof Error ? error.name : "";
+            setListening(false);
+            if (errorName === "NotAllowedError" || errorName === "PermissionDeniedError") {
+                updateStatus("permission-denied");
+            } else if (errorName === "NotSupportedError") {
+                setIsSupported(false);
+                updateStatus("unsupported");
+            } else {
+                updateStatus("error");
+            }
+        }
+    }, [emitTranscript, language, setListening, updateStatus]);
+
+    const handleClick = React.useCallback(() => {
+        onToggle?.();
+        if (currentListening || status === "requesting") {
+            stopRecognition();
+        } else {
+            void startRecognition();
+        }
+    }, [currentListening, onToggle, startRecognition, status, stopRecognition]);
+
+    const isUnavailable = disabled || !isSupported;
+    const tooltip = !isSupported
+        ? resolvedLabels.unsupported
+        : status === "permission-denied"
+            ? resolvedLabels.permissionDenied
+            : status === "error"
+                ? resolvedLabels.error
+                : status === "requesting"
+                    ? resolvedLabels.requesting
+                    : currentListening
+                        ? resolvedLabels.stop
+                        : resolvedLabels.start;
+    const label = currentListening || status === "requesting" ? resolvedLabels.stop : resolvedLabels.start;
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <span className="inline-flex shrink-0 rounded-md" tabIndex={isUnavailable ? 0 : -1}>
+                    <Button
+                        {...props}
+                        type="button"
+                        variant={props.variant ?? "ghost"}
+                        size={props.size ?? "icon"}
+                        className={cn(
+                            "h-9 w-9 shrink-0 text-muted-foreground hover:text-foreground",
+                            currentListening && "bg-destructive-subtle text-destructive-subtle-foreground hover:bg-destructive-subtle hover:text-destructive-subtle-foreground",
+                            status === "requesting" && "bg-primary-subtle text-primary-subtle-foreground hover:bg-primary-subtle hover:text-primary-subtle-foreground",
+                            className
+                        )}
+                        onClick={handleClick}
+                        disabled={isUnavailable}
+                        aria-label={label}
+                        aria-pressed={currentListening}
+                    >
+                        {status === "requesting" ? (
+                            <Loader className="h-5 w-5 animate-spin" />
+                        ) : currentListening ? (
+                            <Stop className="h-4 w-4" />
+                        ) : (
+                            <Microphone className="h-5 w-5" />
+                        )}
+                    </Button>
+                </span>
+            </TooltipTrigger>
+            <TooltipContent>{tooltip}</TooltipContent>
+        </Tooltip>
+    );
+}

package/src/components/inputs/calendar-holidays.ts

@@ -0,0 +1,56 @@
+export interface CalendarHoliday {
+    date: Date
+    label: string
+}
+
+function holiday(year: number, month: number, day: number, label: string): CalendarHoliday {
+    return { date: new Date(year, month - 1, day), label }
+}
+
+export function calendarDateKey(date: Date): string {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, "0")
+    const day = String(date.getDate()).padStart(2, "0")
+    return `${year}-${month}-${day}`
+}
+
+// Source: Cabinet Office, Government of Japan, "国民の祝日について".
+// Keep this list isolated so applications can replace it with their own
+// holiday file without changing Calendar rendering logic.
+export const japaneseHolidays: CalendarHoliday[] = [
+    holiday(2026, 1, 1, "元日"),
+    holiday(2026, 1, 12, "成人の日"),
+    holiday(2026, 2, 11, "建国記念の日"),
+    holiday(2026, 2, 23, "天皇誕生日"),
+    holiday(2026, 3, 20, "春分の日"),
+    holiday(2026, 4, 29, "昭和の日"),
+    holiday(2026, 5, 3, "憲法記念日"),
+    holiday(2026, 5, 4, "みどりの日"),
+    holiday(2026, 5, 5, "こどもの日"),
+    holiday(2026, 5, 6, "休日"),
+    holiday(2026, 7, 20, "海の日"),
+    holiday(2026, 8, 11, "山の日"),
+    holiday(2026, 9, 21, "敬老の日"),
+    holiday(2026, 9, 22, "休日"),
+    holiday(2026, 9, 23, "秋分の日"),
+    holiday(2026, 10, 12, "スポーツの日"),
+    holiday(2026, 11, 3, "文化の日"),
+    holiday(2026, 11, 23, "勤労感謝の日"),
+    holiday(2027, 1, 1, "元日"),
+    holiday(2027, 1, 11, "成人の日"),
+    holiday(2027, 2, 11, "建国記念の日"),
+    holiday(2027, 2, 23, "天皇誕生日"),
+    holiday(2027, 3, 21, "春分の日"),
+    holiday(2027, 3, 22, "休日"),
+    holiday(2027, 4, 29, "昭和の日"),
+    holiday(2027, 5, 3, "憲法記念日"),
+    holiday(2027, 5, 4, "みどりの日"),
+    holiday(2027, 5, 5, "こどもの日"),
+    holiday(2027, 7, 19, "海の日"),
+    holiday(2027, 8, 11, "山の日"),
+    holiday(2027, 9, 20, "敬老の日"),
+    holiday(2027, 9, 23, "秋分の日"),
+    holiday(2027, 10, 11, "スポーツの日"),
+    holiday(2027, 11, 3, "文化の日"),
+    holiday(2027, 11, 23, "勤労感謝の日"),
+]

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

@@ -0,0 +1,32 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { ButtonVariantKey, ChatComposerVariantKey, ChatInputVariantKey, CheckboxVariantKey, CopyButtonVariantKey, FilterButtonVariantKey, InputVariantKey, RadioGroupVariantKey, SortButtonVariantKey, SwitchVariantKey, TextareaVariantKey, ToggleGroupVariantKey } from "./variant-keys";
+
+export const buttonDefaultVariantKey: ButtonVariantKey = "default";
+export const chatComposerDefaultVariantKey: ChatComposerVariantKey = "default";
+export const chatInputDefaultVariantKey: ChatInputVariantKey = "default";
+export const checkboxDefaultVariantKey: CheckboxVariantKey = "unchecked";
+export const copyButtonDefaultVariantKey: CopyButtonVariantKey = "default";
+export const filterButtonDefaultVariantKey: FilterButtonVariantKey = "default";
+export const inputDefaultVariantKey: InputVariantKey = "default";
+export const radioGroupDefaultVariantKey: RadioGroupVariantKey = "unchecked";
+export const sortButtonDefaultVariantKey: SortButtonVariantKey = "none";
+export const switchDefaultVariantKey: SwitchVariantKey = "unchecked";
+export const textareaDefaultVariantKey: TextareaVariantKey = "default";
+export const toggleGroupDefaultVariantKey: ToggleGroupVariantKey = "default";
+
+export const inputsDefaultVariantKeys = {
+  button: buttonDefaultVariantKey,
+  chatComposer: chatComposerDefaultVariantKey,
+  chatInput: chatInputDefaultVariantKey,
+  checkbox: checkboxDefaultVariantKey,
+  copyButton: copyButtonDefaultVariantKey,
+  filterButton: filterButtonDefaultVariantKey,
+  input: inputDefaultVariantKey,
+  radioGroup: radioGroupDefaultVariantKey,
+  sortButton: sortButtonDefaultVariantKey,
+  switch: switchDefaultVariantKey,
+  textarea: textareaDefaultVariantKey,
+  toggleGroup: toggleGroupDefaultVariantKey,
+} as const;

package/src/components/{atoms → inputs}/generated/variant-keys.ts

@@ -1,23 +1,23 @@
 /* eslint-disable */
 // Generated by `npm run design:sync:components`. Do not edit manually.
 
-export const alertVariantKeys = ["default", "destructive"] as const;
-export type AlertVariantKey = (typeof alertVariantKeys)[number];
-
-export const avatarVariantKeys = ["fallback", "image"] as const;
-export type AvatarVariantKey = (typeof avatarVariantKeys)[number];
+export const buttonVariantKeys = ["default", "destructive", "ghost", "info", "link", "outline", "primary", "secondary", "success", "warning"] as const;
+export type ButtonVariantKey = (typeof buttonVariantKeys)[number];
 
-export const badgeVariantKeys = ["default", "destructive", "outline", "secondary"] as const;
-export type BadgeVariantKey = (typeof badgeVariantKeys)[number];
+export const chatComposerVariantKeys = ["context", "default", "prompt"] as const;
+export type ChatComposerVariantKey = (typeof chatComposerVariantKeys)[number];
 
-export const buttonVariantKeys = ["default", "destructive", "ghost", "link", "outline", "secondary"] as const;
-export type ButtonVariantKey = (typeof buttonVariantKeys)[number];
+export const chatInputVariantKeys = ["default", "processing"] as const;
+export type ChatInputVariantKey = (typeof chatInputVariantKeys)[number];
 
 export const checkboxVariantKeys = ["checked", "disabled", "unchecked"] as const;
 export type CheckboxVariantKey = (typeof checkboxVariantKeys)[number];
 
-export const imgVariantKeys = ["error", "loaded", "loading"] as const;
-export type ImgVariantKey = (typeof imgVariantKeys)[number];
+export const copyButtonVariantKeys = ["default", "label"] as const;
+export type CopyButtonVariantKey = (typeof copyButtonVariantKeys)[number];
+
+export const filterButtonVariantKeys = ["default", "popover", "selected"] as const;
+export type FilterButtonVariantKey = (typeof filterButtonVariantKeys)[number];
 
 export const inputVariantKeys = ["default", "disabled", "placeholder"] as const;
 export type InputVariantKey = (typeof inputVariantKeys)[number];
@@ -25,11 +25,8 @@ export type InputVariantKey = (typeof inputVariantKeys)[number];
 export const radioGroupVariantKeys = ["checked", "unchecked"] as const;
 export type RadioGroupVariantKey = (typeof radioGroupVariantKeys)[number];
 
-export const separatorVariantKeys = ["horizontal", "vertical"] as const;
-export type SeparatorVariantKey = (typeof separatorVariantKeys)[number];
-
-export const spinnerVariantKeys = ["default", "lg", "sm"] as const;
-export type SpinnerVariantKey = (typeof spinnerVariantKeys)[number];
+export const sortButtonVariantKeys = ["asc", "desc", "none"] as const;
+export type SortButtonVariantKey = (typeof sortButtonVariantKeys)[number];
 
 export const switchVariantKeys = ["checked", "unchecked"] as const;
 export type SwitchVariantKey = (typeof switchVariantKeys)[number];
@@ -40,22 +37,17 @@ export type TextareaVariantKey = (typeof textareaVariantKeys)[number];
 export const toggleGroupVariantKeys = ["default", "outline"] as const;
 export type ToggleGroupVariantKey = (typeof toggleGroupVariantKeys)[number];
 
-export const toolPillVariantKeys = ["danger", "primary", "secondary"] as const;
-export type ToolPillVariantKey = (typeof toolPillVariantKeys)[number];
-
-export const atomVariantKeys = {
-  alert: alertVariantKeys,
-  avatar: avatarVariantKeys,
-  badge: badgeVariantKeys,
+export const inputsVariantKeys = {
   button: buttonVariantKeys,
+  chatComposer: chatComposerVariantKeys,
+  chatInput: chatInputVariantKeys,
   checkbox: checkboxVariantKeys,
-  img: imgVariantKeys,
+  copyButton: copyButtonVariantKeys,
+  filterButton: filterButtonVariantKeys,
   input: inputVariantKeys,
   radioGroup: radioGroupVariantKeys,
-  separator: separatorVariantKeys,
-  spinner: spinnerVariantKeys,
+  sortButton: sortButtonVariantKeys,
   switch: switchVariantKeys,
   textarea: textareaVariantKeys,
   toggleGroup: toggleGroupVariantKeys,
-  toolPill: toolPillVariantKeys,
 } as const;

package/src/components/layout/AspectRatio.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import * as React from "react"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export type AspectRatioProps = React.ComponentPropsWithoutRef<
+    typeof AspectRatioPrimitive.Root
+>
+
+export { AspectRatio }