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

package/src/components/{molecules → inputs}/SortButton.tsx

@@ -1,12 +1,15 @@
 "use client"
 
 import * as React from "react"
-import { ArrowDownAZ, ArrowUpAZ, ArrowUpDown, type LucideIcon } from "lucide-react"
-import { Button, ButtonProps } from "../atoms/Button"
+import { IconSortDescendingLetters as ArrowDownAZ, IconSortAscendingLetters as ArrowUpAZ, IconArrowsSort as ArrowUpDown } from "@tabler/icons-react";
+import type { Icon as LucideIcon } from "@tabler/icons-react";
+import { Button, ButtonProps } from "../inputs/Button"
 import { cn } from "../../lib/utils"
 import { sortButtonDefaultVariantKey } from "./generated/default-variant-keys"
 import { sortButtonVariantKeys, type SortButtonVariantKey } from "./generated/variant-keys"
 
+export type { SortButtonVariantKey }
+
 export interface SortButtonProps extends Omit<ButtonProps, "onChange"> {
     value?: SortButtonVariantKey
     onSortChange?: (value: SortButtonVariantKey) => void

package/src/components/{atoms → inputs}/Switch.tsx

@@ -16,15 +16,26 @@ export interface SwitchProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-    ({ className, checked, onCheckedChange, ...props }, ref) => {
-        const switchState: SwitchVariantKey = checked ? "checked" : switchDefaultVariantKey
+    ({ className, checked, defaultChecked, onCheckedChange, onClick, ...props }, ref) => {
+        const [uncontrolledChecked, setUncontrolledChecked] = React.useState(Boolean(defaultChecked))
+        const isControlled = checked !== undefined
+        const currentChecked = isControlled ? checked : uncontrolledChecked
+        const switchState: SwitchVariantKey = currentChecked ? "checked" : switchDefaultVariantKey
+
+        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+            onClick?.(event)
+            if (event.defaultPrevented) return
+            const nextChecked = !currentChecked
+            if (!isControlled) setUncontrolledChecked(nextChecked)
+            onCheckedChange?.(nextChecked)
+        }
 
         return (
             <button
                 type="button"
                 role="switch"
-                aria-checked={checked}
-                onClick={() => onCheckedChange?.(!checked)}
+                aria-checked={currentChecked}
+                onClick={handleClick}
                 className={cn(
                     "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
                     switchStateClasses[switchState],

package/src/components/inputs/TagInput.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { Tag } from "../display/Tag"
+
+export interface TagInputProps {
+    id?: string
+    value?: string[]
+    onValueChange?: (value: string[]) => void
+    placeholder?: string
+    /** Keys that commit the current input value as a tag. Default ["Enter", ","]. */
+    commitKeys?: string[]
+    /** Reject duplicates (case-insensitive). Default true. */
+    dedupe?: boolean
+    maxTags?: number
+    removeLabel?: string
+    className?: string
+    disabled?: boolean
+}
+
+const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
+    (
+        {
+            value,
+            id,
+            onValueChange,
+            placeholder = "Add tag...",
+            commitKeys = ["Enter", ","],
+            dedupe = true,
+            maxTags,
+            removeLabel = "Remove tag",
+            className,
+            disabled,
+        },
+        ref
+    ) => {
+        const [draft, setDraft] = React.useState("")
+        const isComposingRef = React.useRef(false)
+        const tags = value ?? []
+
+        const commit = React.useCallback(() => {
+            const trimmed = draft.trim()
+            if (!trimmed) return
+            if (maxTags !== undefined && tags.length >= maxTags) return
+            if (dedupe && tags.some((t) => t.toLowerCase() === trimmed.toLowerCase()))
+                return
+            onValueChange?.([...tags, trimmed])
+            setDraft("")
+        }, [draft, tags, dedupe, maxTags, onValueChange])
+
+        const remove = (target: string) => {
+            onValueChange?.(tags.filter((t) => t !== target))
+        }
+
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+            const nativeEvent = event.nativeEvent as KeyboardEvent & { keyCode?: number }
+            if (nativeEvent.isComposing || isComposingRef.current || nativeEvent.keyCode === 229) {
+                return
+            }
+            if (commitKeys.includes(event.key)) {
+                event.preventDefault()
+                commit()
+            } else if (event.key === "Backspace" && !draft && tags.length > 0) {
+                remove(tags[tags.length - 1])
+            }
+        }
+
+        return (
+            <div
+                className={cn(
+                    "flex flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-2 py-1 text-sm shadow-sm focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
+                    disabled && "opacity-50 pointer-events-none",
+                    className
+                )}
+                data-slot="tag-input"
+            >
+                {tags.map((tag) => (
+                    <Tag
+                        key={tag}
+                        size="sm"
+                        onRemove={disabled ? undefined : () => remove(tag)}
+                        removeLabel={removeLabel}
+                    >
+                        {tag}
+                    </Tag>
+                ))}
+                <input
+                    id={id}
+                    ref={ref}
+                    type="text"
+                    value={draft}
+                    onChange={(e) => setDraft(e.target.value)}
+                    onCompositionStart={() => {
+                        isComposingRef.current = true
+                    }}
+                    onCompositionEnd={(event) => {
+                        isComposingRef.current = false
+                        setDraft(event.currentTarget.value)
+                    }}
+                    onKeyDown={handleKeyDown}
+                    onBlur={commit}
+                    placeholder={tags.length === 0 ? placeholder : ""}
+                    disabled={disabled}
+                    className="min-w-[80px] flex-1 bg-transparent px-1 py-0.5 outline-none placeholder:text-muted-foreground"
+                />
+            </div>
+        )
+    }
+)
+TagInput.displayName = "TagInput"
+
+export { TagInput }

package/src/components/{atoms → inputs}/Textarea.tsx

@@ -25,6 +25,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
                 ref={ref}
                 disabled={disabled}
                 {...props}
+                data-slot="textarea"
             />
         )
     }

package/src/components/inputs/TimePicker.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { IconClock as Clock } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+
+export interface TimePickerProps {
+    /** Time value in 24-hour format "HH:mm" (e.g. "14:30"). Empty string = unset. */
+    value?: string
+    onValueChange?: (value: string) => void
+    /** 12-hour with AM/PM, or 24-hour. Default 24. */
+    hour12?: boolean
+    /** Granularity of minute select. Default 1. */
+    minuteStep?: 1 | 5 | 10 | 15 | 30
+    className?: string
+    disabled?: boolean
+    hourLabel?: string
+    minuteLabel?: string
+    periodLabel?: string
+}
+
+function parse(value: string | undefined): {
+    hour: number | null
+    minute: number | null
+} {
+    if (!value) return { hour: null, minute: null }
+    const match = /^(\d{1,2}):(\d{2})$/.exec(value)
+    if (!match) return { hour: null, minute: null }
+    return { hour: Number(match[1]), minute: Number(match[2]) }
+}
+
+function format2(n: number) {
+    return n.toString().padStart(2, "0")
+}
+
+const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
+    (
+        {
+            value,
+            onValueChange,
+            hour12 = false,
+            minuteStep = 1,
+            className,
+            disabled,
+            hourLabel = "Hour",
+            minuteLabel = "Minute",
+            periodLabel = "AM/PM",
+        },
+        ref
+    ) => {
+        const { hour, minute } = parse(value)
+        const displayHour = hour ?? 0
+        const displayMinute = minute ?? 0
+
+        const hourOptions = hour12
+            ? Array.from({ length: 12 }, (_, i) => i + 1)
+            : Array.from({ length: 24 }, (_, i) => i)
+
+        const minuteOptions = Array.from(
+            { length: 60 / minuteStep },
+            (_, i) => i * minuteStep
+        )
+
+        const ampm = displayHour >= 12 ? "PM" : "AM"
+        const display12 =
+            displayHour === 0 ? 12 : displayHour > 12 ? displayHour - 12 : displayHour
+
+        const setHour = (h: number) => {
+            const newHour = hour12
+                ? ampm === "PM"
+                    ? h === 12
+                        ? 12
+                        : h + 12
+                    : h === 12
+                      ? 0
+                      : h
+                : h
+            onValueChange?.(`${format2(newHour)}:${format2(displayMinute)}`)
+        }
+
+        const setMinute = (m: number) => {
+            onValueChange?.(`${format2(displayHour)}:${format2(m)}`)
+        }
+
+        const setAmPm = (next: "AM" | "PM") => {
+            let newHour = displayHour
+            if (next === "AM" && displayHour >= 12) newHour = displayHour - 12
+            else if (next === "PM" && displayHour < 12) newHour = displayHour + 12
+            onValueChange?.(`${format2(newHour)}:${format2(displayMinute)}`)
+        }
+
+        const selectClass =
+            "h-9 rounded-md border border-input bg-transparent px-2 py-1 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
+
+        return (
+            <div
+                ref={ref}
+                className={cn("inline-flex items-center gap-2", className)}
+                data-slot="time-picker"
+            >
+                <Clock className="h-4 w-4 text-muted-foreground" />
+                <select
+                    aria-label={hourLabel}
+                    disabled={disabled}
+                    value={hour12 ? display12 : displayHour}
+                    onChange={(e) => setHour(Number(e.target.value))}
+                    className={selectClass}
+                >
+                    {hourOptions.map((h) => (
+                        <option key={h} value={h}>
+                            {format2(h)}
+                        </option>
+                    ))}
+                </select>
+                <span aria-hidden className="text-muted-foreground">
+                    :
+                </span>
+                <select
+                    aria-label={minuteLabel}
+                    disabled={disabled}
+                    value={displayMinute}
+                    onChange={(e) => setMinute(Number(e.target.value))}
+                    className={selectClass}
+                >
+                    {minuteOptions.map((m) => (
+                        <option key={m} value={m}>
+                            {format2(m)}
+                        </option>
+                    ))}
+                </select>
+                {hour12 ? (
+                    <select
+                        aria-label={periodLabel}
+                        disabled={disabled}
+                        value={ampm}
+                        onChange={(e) => setAmPm(e.target.value as "AM" | "PM")}
+                        className={selectClass}
+                    >
+                        <option value="AM">AM</option>
+                        <option value="PM">PM</option>
+                    </select>
+                ) : null}
+            </div>
+        )
+    }
+)
+TimePicker.displayName = "TimePicker"
+
+export { TimePicker }

package/src/components/inputs/Toggle.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+export const toggleVariants = cva(
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:border disabled:border-input disabled:bg-muted/50 disabled:text-muted-foreground disabled:opacity-100 data-[state=on]:!bg-primary data-[state=on]:!text-primary-foreground disabled:data-[state=on]:!bg-primary-subtle disabled:data-[state=on]:!text-primary-subtle-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default: "bg-transparent",
+                outline:
+                    "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+            },
+            size: {
+                default: "h-9 px-2.5 min-w-9",
+                sm: "h-8 px-2 min-w-8",
+                lg: "h-10 px-3 min-w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+export interface ToggleProps
+    extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,
+        VariantProps<typeof toggleVariants> {}
+
+const Toggle = React.forwardRef<
+    React.ElementRef<typeof TogglePrimitive.Root>,
+    ToggleProps
+>(({ className, variant, size, ...props }, ref) => (
+    <TogglePrimitive.Root
+        ref={ref}
+        className={cn(toggleVariants({ variant, size }), className)}
+        {...props}
+    />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle }

package/src/components/{atoms → inputs}/ToggleGroup.tsx

@@ -8,7 +8,7 @@ import type { ToggleGroupVariantKey } from "./generated/variant-keys"
 import { toggleGroupDefaultVariantKey } from "./generated/default-variant-keys"
 
 const toggleGroupVariantClasses: Record<ToggleGroupVariantKey, string> = {
-    default: "bg-secondary text-foreground hover:bg-secondary/80",
+    default: "bg-secondary text-foreground hover:bg-muted hover:text-muted-foreground",
     outline: "border border-input bg-transparent text-foreground hover:bg-muted",
 }
 
@@ -40,7 +40,7 @@ const ToggleGroupItem = React.forwardRef<
         <ToggleGroupPrimitive.Item
             ref={ref}
             className={cn(
-                "inline-flex w-fit items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-foreground data-[state=on]:text-primary-foreground",
+                "inline-flex w-fit items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:border disabled:border-input disabled:bg-muted/50 disabled:text-muted-foreground disabled:opacity-100 data-[state=on]:bg-foreground data-[state=on]:text-background data-[state=on]:!bg-primary data-[state=on]:!text-primary-foreground disabled:data-[state=on]:!bg-primary-subtle disabled:data-[state=on]:!text-primary-subtle-foreground",
                 // Size variants
                 size === "default" && "h-9 py-0 px-3",
                 size === "sm" && "h-8 px-2",

package/src/components/inputs/TooltipButton.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import * as React from "react"
+import { Button, type ButtonProps } from "./Button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import { cn } from "../../lib/utils"
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipContent>
+
+export interface TooltipButtonProps extends ButtonProps {
+    tooltip: React.ReactNode
+    tooltipSide?: TooltipContentProps["side"]
+    tooltipAlign?: TooltipContentProps["align"]
+    tooltipSideOffset?: TooltipContentProps["sideOffset"]
+    tooltipContentClassName?: string
+    tooltipPortalContainer?: TooltipContentProps["portalContainer"]
+    tooltipOpenOnClick?: boolean
+    tooltipCloseOnPress?: boolean
+    tooltipClickDuration?: number
+}
+
+const TooltipButton = React.forwardRef<HTMLButtonElement, TooltipButtonProps>(
+    (
+        {
+            tooltip,
+            tooltipSide,
+            tooltipAlign,
+            tooltipSideOffset,
+            tooltipContentClassName,
+            tooltipPortalContainer,
+            tooltipOpenOnClick = false,
+            tooltipCloseOnPress = false,
+            tooltipClickDuration = 1600,
+            className,
+            onClick,
+            onBlur,
+            onPointerDown,
+            onPointerLeave,
+            ...props
+        },
+        ref
+    ) => {
+        const [open, setOpen] = React.useState(false)
+        const closeTimerRef = React.useRef<number | null>(null)
+        const suppressHoverRef = React.useRef(false)
+
+        React.useEffect(() => {
+            return () => {
+                if (closeTimerRef.current !== null) {
+                    window.clearTimeout(closeTimerRef.current)
+                }
+            }
+        }, [])
+
+        const scheduleClose = React.useCallback(() => {
+            if (closeTimerRef.current !== null) {
+                window.clearTimeout(closeTimerRef.current)
+            }
+            closeTimerRef.current = window.setTimeout(() => {
+                setOpen(false)
+                closeTimerRef.current = null
+            }, tooltipClickDuration)
+        }, [tooltipClickDuration])
+
+        const handleClick = React.useCallback(
+            (event: React.MouseEvent<HTMLButtonElement>) => {
+                onClick?.(event)
+                if (tooltipCloseOnPress && !tooltipOpenOnClick) {
+                    setOpen(false)
+                }
+                if (!tooltipOpenOnClick || event.defaultPrevented) return
+                setOpen(true)
+                scheduleClose()
+            },
+            [onClick, scheduleClose, tooltipCloseOnPress, tooltipOpenOnClick]
+        )
+
+        const handlePointerDown = React.useCallback(
+            (event: React.PointerEvent<HTMLButtonElement>) => {
+                onPointerDown?.(event)
+                if (!tooltipCloseOnPress || event.defaultPrevented) return
+                suppressHoverRef.current = true
+                setOpen(false)
+            },
+            [onPointerDown, tooltipCloseOnPress]
+        )
+
+        const handlePointerLeave = React.useCallback(
+            (event: React.PointerEvent<HTMLButtonElement>) => {
+                onPointerLeave?.(event)
+                if (tooltipCloseOnPress) {
+                    suppressHoverRef.current = false
+                }
+            },
+            [onPointerLeave, tooltipCloseOnPress]
+        )
+
+        const handleBlur = React.useCallback(
+            (event: React.FocusEvent<HTMLButtonElement>) => {
+                onBlur?.(event)
+                if (tooltipOpenOnClick) {
+                    setOpen(false)
+                }
+            },
+            [onBlur, tooltipOpenOnClick]
+        )
+
+        const handleOpenChange = React.useCallback(
+            (nextOpen: boolean) => {
+                if (tooltipCloseOnPress && suppressHoverRef.current && nextOpen) return
+                setOpen(nextOpen)
+            },
+            [tooltipCloseOnPress]
+        )
+
+        const tooltipRootProps = tooltipOpenOnClick || tooltipCloseOnPress
+            ? { open, onOpenChange: handleOpenChange }
+            : undefined
+
+        return (
+            <Tooltip {...tooltipRootProps} openOnPress={!tooltipCloseOnPress}>
+                <TooltipTrigger asChild>
+                    <Button
+                        ref={ref}
+                        className={cn(className)}
+                        onClick={handleClick}
+                        onBlur={handleBlur}
+                        onPointerDown={handlePointerDown}
+                        onPointerLeave={handlePointerLeave}
+                        {...props}
+                    />
+                </TooltipTrigger>
+                <TooltipContent
+                    side={tooltipSide}
+                    align={tooltipAlign}
+                    sideOffset={tooltipSideOffset}
+                    portalContainer={tooltipPortalContainer}
+                    className={tooltipContentClassName}
+                >
+                    {tooltip}
+                </TooltipContent>
+            </Tooltip>
+        )
+    }
+)
+TooltipButton.displayName = "TooltipButton"
+
+export { TooltipButton }