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

package/src/components/inputs/PasswordRequirementList.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import {
+    IconCheck as Check,
+    IconCircle as Circle,
+    IconX as X,
+} from "@tabler/icons-react"
+
+import { cn } from "../../lib/utils"
+
+export interface PasswordRequirement {
+    id: string
+    label: React.ReactNode
+    met?: boolean
+    description?: React.ReactNode
+}
+
+export interface PasswordRequirementListProps
+    extends React.HTMLAttributes<HTMLUListElement> {
+    requirements: PasswordRequirement[]
+    metLabel?: string
+    unmetLabel?: string
+    pendingLabel?: string
+}
+
+const PasswordRequirementList = React.forwardRef<
+    HTMLUListElement,
+    PasswordRequirementListProps
+>(
+    (
+        {
+            className,
+            requirements,
+            metLabel = "Requirement met",
+            unmetLabel = "Requirement not met",
+            pendingLabel = "Requirement pending",
+            ...props
+        },
+        ref
+    ) => {
+        return (
+            <ul
+                ref={ref}
+                className={cn("grid gap-1.5 text-sm", className)}
+                data-slot="password-requirement-list"
+                {...props}
+            >
+                {requirements.map((requirement) => {
+                    const state =
+                        requirement.met === undefined
+                            ? "pending"
+                            : requirement.met
+                              ? "met"
+                              : "unmet"
+                    const label =
+                        state === "met"
+                            ? metLabel
+                            : state === "unmet"
+                              ? unmetLabel
+                              : pendingLabel
+                    const Icon =
+                        state === "met" ? Check : state === "unmet" ? X : Circle
+
+                    return (
+                        <li
+                            key={requirement.id}
+                            className={cn(
+                                "grid grid-cols-[auto_minmax(0,1fr)] items-start gap-2",
+                                state === "met" && "text-success-strong",
+                                state === "unmet" && "text-destructive-strong",
+                                state === "pending" && "text-muted-foreground"
+                            )}
+                        >
+                            <Icon
+                                className="mt-0.5 h-4 w-4 shrink-0"
+                                aria-label={label}
+                            />
+                            <span className="min-w-0">
+                                <span>{requirement.label}</span>
+                                {requirement.description ? (
+                                    <span className="block text-xs text-muted-foreground">
+                                        {requirement.description}
+                                    </span>
+                                ) : null}
+                            </span>
+                        </li>
+                    )
+                })}
+            </ul>
+        )
+    }
+)
+PasswordRequirementList.displayName = "PasswordRequirementList"
+
+export { PasswordRequirementList }

package/src/components/inputs/PasswordStrengthMeter.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface PasswordStrengthMeterProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    score: number
+    maxScore?: number
+    label?: React.ReactNode
+    description?: React.ReactNode
+    valueLabel?: React.ReactNode
+}
+
+function getStrengthClass(score: number, maxScore: number) {
+    const ratio = maxScore <= 0 ? 0 : score / maxScore
+    if (ratio >= 0.75) return "bg-success"
+    if (ratio >= 0.5) return "bg-warning"
+    if (ratio > 0) return "bg-destructive"
+    return "bg-muted"
+}
+
+const PasswordStrengthMeter = React.forwardRef<
+    HTMLDivElement,
+    PasswordStrengthMeterProps
+>(
+    (
+        {
+            className,
+            score,
+            maxScore = 4,
+            label = "Password strength",
+            description,
+            valueLabel,
+            ...props
+        },
+        ref
+    ) => {
+        const normalizedMax = Math.max(1, maxScore)
+        const normalizedScore = Math.max(0, Math.min(score, normalizedMax))
+        const segments = Array.from({ length: normalizedMax }, (_, index) => index)
+        const meterId = React.useId()
+
+        return (
+            <div
+                ref={ref}
+                className={cn("grid gap-2", className)}
+                data-slot="password-strength-meter"
+                {...props}
+            >
+                <div className="flex min-w-0 items-center justify-between gap-3">
+                    <span id={meterId} className="text-sm font-medium">
+                        {label}
+                    </span>
+                    {valueLabel ? (
+                        <span className="text-xs font-medium text-muted-foreground">
+                            {valueLabel}
+                        </span>
+                    ) : null}
+                </div>
+                <div
+                    className="grid gap-1"
+                    style={{ gridTemplateColumns: `repeat(${normalizedMax}, minmax(0, 1fr))` }}
+                    role="meter"
+                    aria-labelledby={meterId}
+                    aria-valuemin={0}
+                    aria-valuemax={normalizedMax}
+                    aria-valuenow={normalizedScore}
+                >
+                    {segments.map((segment) => (
+                        <span
+                            key={segment}
+                            className={cn(
+                                "h-1.5 rounded-full",
+                                segment < normalizedScore
+                                    ? getStrengthClass(normalizedScore, normalizedMax)
+                                    : "bg-muted"
+                            )}
+                            aria-hidden="true"
+                        />
+                    ))}
+                </div>
+                {description ? (
+                    <p className="text-xs text-muted-foreground">{description}</p>
+                ) : null}
+            </div>
+        )
+    }
+)
+PasswordStrengthMeter.displayName = "PasswordStrengthMeter"
+
+export { PasswordStrengthMeter }

package/src/components/inputs/PhoneInput.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import { Input, type InputProps } from "./Input"
+
+export interface PhoneInputProps
+    extends Omit<InputProps, "type" | "value" | "defaultValue" | "onChange"> {
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+    countryCallingCode?: string
+    countryLabel?: React.ReactNode
+    formatValue?: (value: string) => string
+    disabledReason?: React.ReactNode
+}
+
+function formatJapanesePhone(value: string) {
+    const digits = value.replace(/\D/g, "").slice(0, 11)
+    if (digits.length <= 3) return digits
+    if (digits.length <= 7) return `${digits.slice(0, 3)}-${digits.slice(3)}`
+    return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}`
+}
+
+const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+    (
+        {
+            className,
+            value,
+            defaultValue,
+            onValueChange,
+            countryCallingCode = "+81",
+            countryLabel = "Japan",
+            formatValue = formatJapanesePhone,
+            disabled,
+            disabledReason,
+            ...props
+        },
+        ref
+    ) => {
+        const isControlled = value !== undefined
+        const [internalValue, setInternalValue] = React.useState(defaultValue ?? "")
+        const resolvedValue = isControlled ? value : internalValue
+
+        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            const next = formatValue(event.target.value)
+            if (!isControlled) {
+                setInternalValue(next)
+            }
+            onValueChange?.(next)
+        }
+
+        const control = (
+            <div
+                className={cn(
+                    "inline-flex w-[280px] max-w-full items-stretch rounded-lg border border-input bg-transparent shadow-sm focus-within:ring-1 focus-within:ring-ring",
+                    disabled && "opacity-50",
+                    className
+                )}
+                data-slot="phone-input"
+            >
+                <span className="inline-flex min-w-16 items-center justify-center border-r border-input px-3 text-sm text-muted-foreground">
+                    <span className="sr-only">{countryLabel}</span>
+                    {countryCallingCode}
+                </span>
+                <Input
+                    ref={ref}
+                    type="tel"
+                    inputMode="tel"
+                    value={resolvedValue}
+                    onChange={handleChange}
+                    disabled={disabled}
+                    className="h-9 min-w-0 flex-1 border-0 shadow-none focus-visible:ring-0"
+                    {...props}
+                />
+            </div>
+        )
+
+        if (disabled && disabledReason) {
+            return (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <span className="inline-flex max-w-full" tabIndex={0}>
+                            {control}
+                        </span>
+                    </TooltipTrigger>
+                    <TooltipContent>{disabledReason}</TooltipContent>
+                </Tooltip>
+            )
+        }
+
+        return control
+    }
+)
+PhoneInput.displayName = "PhoneInput"
+
+export { PhoneInput, formatJapanesePhone }

package/src/components/inputs/PostalCodeInput.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import { Input, type InputProps } from "./Input"
+
+export interface PostalCodeInputProps
+    extends Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "prefix"> {
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+    prefix?: React.ReactNode
+    formatValue?: (value: string) => string
+    disabledReason?: React.ReactNode
+}
+
+function formatJapanesePostalCode(value: string) {
+    const digits = value.replace(/\D/g, "").slice(0, 7)
+    if (digits.length <= 3) return digits
+    return `${digits.slice(0, 3)}-${digits.slice(3)}`
+}
+
+const PostalCodeInput = React.forwardRef<
+    HTMLInputElement,
+    PostalCodeInputProps
+>(
+    (
+        {
+            className,
+            value,
+            defaultValue,
+            onValueChange,
+            prefix = "〒",
+            formatValue = formatJapanesePostalCode,
+            disabled,
+            disabledReason,
+            ...props
+        },
+        ref
+    ) => {
+        const isControlled = value !== undefined
+        const [internalValue, setInternalValue] = React.useState(defaultValue ?? "")
+        const resolvedValue = isControlled ? value : internalValue
+
+        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            const next = formatValue(event.target.value)
+            if (!isControlled) {
+                setInternalValue(next)
+            }
+            onValueChange?.(next)
+        }
+
+        const control = (
+            <div
+                className={cn(
+                    "inline-flex w-[220px] max-w-full items-stretch rounded-lg border border-input bg-transparent shadow-sm focus-within:ring-1 focus-within:ring-ring",
+                    disabled && "opacity-50",
+                    className
+                )}
+                data-slot="postal-code-input"
+            >
+                <span className="inline-flex items-center justify-center border-r border-input px-3 text-sm text-muted-foreground">
+                    {prefix}
+                </span>
+                <Input
+                    ref={ref}
+                    type="text"
+                    inputMode="numeric"
+                    value={resolvedValue}
+                    onChange={handleChange}
+                    disabled={disabled}
+                    className="h-9 min-w-0 flex-1 border-0 shadow-none focus-visible:ring-0"
+                    {...props}
+                />
+            </div>
+        )
+
+        if (disabled && disabledReason) {
+            return (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <span className="inline-flex max-w-full" tabIndex={0}>
+                            {control}
+                        </span>
+                    </TooltipTrigger>
+                    <TooltipContent>{disabledReason}</TooltipContent>
+                </Tooltip>
+            )
+        }
+
+        return control
+    }
+)
+PostalCodeInput.displayName = "PostalCodeInput"
+
+export { PostalCodeInput, formatJapanesePostalCode }

package/src/components/inputs/RangeSlider.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface RangeSliderProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    value?: [number, number]
+    defaultValue?: [number, number]
+    onValueChange?: (value: [number, number]) => void
+    min?: number
+    max?: number
+    step?: number
+    minLabel?: string
+    maxLabel?: string
+    disabled?: boolean
+    trackClassName?: string
+    rangeClassName?: string
+    thumbClassName?: string
+}
+
+function clamp(value: number, min: number, max: number) {
+    return Math.min(max, Math.max(min, value))
+}
+
+function roundToStep(value: number, step: number) {
+    const precision = String(step).split(".")[1]?.length ?? 0
+    return Number((Math.round(value / step) * step).toFixed(precision))
+}
+
+const RangeSlider = React.forwardRef<HTMLDivElement, RangeSliderProps>(
+    (
+        {
+            className,
+            value,
+            defaultValue,
+            onValueChange,
+            min = 0,
+            max = 100,
+            step = 1,
+            minLabel = "Minimum value",
+            maxLabel = "Maximum value",
+            disabled,
+            trackClassName,
+            rangeClassName,
+            thumbClassName,
+            ...props
+        },
+        ref
+    ) => {
+        const isControlled = value !== undefined
+        const [internalValue, setInternalValue] = React.useState<[number, number]>(
+            defaultValue ?? [min, max]
+        )
+        const currentValue = value ?? internalValue
+        const minValue = clamp(Math.min(currentValue[0], currentValue[1]), min, max)
+        const maxValue = clamp(Math.max(currentValue[0], currentValue[1]), min, max)
+        const minPercent = ((minValue - min) / (max - min)) * 100
+        const maxPercent = ((maxValue - min) / (max - min)) * 100
+
+        const commit = (nextValue: [number, number]) => {
+            const next: [number, number] = [
+                clamp(roundToStep(Math.min(nextValue[0], nextValue[1]), step), min, max),
+                clamp(roundToStep(Math.max(nextValue[0], nextValue[1]), step), min, max),
+            ]
+            if (!isControlled) setInternalValue(next)
+            onValueChange?.(next)
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "relative flex h-7 w-[240px] min-w-0 touch-none select-none items-center",
+                    disabled && "pointer-events-none opacity-50",
+                    className
+                )}
+                data-slot="range-slider"
+                {...props}
+            >
+                <div
+                    className={cn("absolute left-0 right-0 h-2 rounded-full bg-input", trackClassName)}
+                    aria-hidden="true"
+                />
+                <div
+                    className={cn("absolute h-2 rounded-full bg-primary", rangeClassName)}
+                    style={{ left: `${minPercent}%`, right: `${100 - maxPercent}%` }}
+                    aria-hidden="true"
+                />
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={minValue}
+                    disabled={disabled}
+                    onChange={(event) => commit([Number(event.currentTarget.value), maxValue])}
+                    className={cn(
+                        "pointer-events-none absolute inset-0 z-20 h-7 w-full appearance-none bg-transparent",
+                        "[&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-foreground [&::-moz-range-thumb]:bg-background",
+                        "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-foreground [&::-webkit-slider-thumb]:bg-background",
+                        thumbClassName
+                    )}
+                    aria-label={minLabel}
+                />
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={maxValue}
+                    disabled={disabled}
+                    onChange={(event) => commit([minValue, Number(event.currentTarget.value)])}
+                    className={cn(
+                        "pointer-events-none absolute inset-0 z-30 h-7 w-full appearance-none bg-transparent",
+                        "[&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-foreground [&::-moz-range-thumb]:bg-background",
+                        "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-foreground [&::-webkit-slider-thumb]:bg-background",
+                        thumbClassName
+                    )}
+                    aria-label={maxLabel}
+                />
+            </div>
+        )
+    }
+)
+RangeSlider.displayName = "RangeSlider"
+
+export { RangeSlider }

package/src/components/inputs/SearchInput.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { IconSearch as Search, IconX as X } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+
+export interface SearchInputProps
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    value?: string
+    onValueChange?: (value: string) => void
+    /** Show a clear (×) button when value is non-empty. Default true. */
+    clearable?: boolean
+    clearLabel?: string
+}
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+    (
+        {
+            className,
+            value,
+            onValueChange,
+            clearable = true,
+            clearLabel = "Clear search",
+            disabled,
+            placeholder = "Search...",
+            ...props
+        },
+        ref
+    ) => {
+        const showClear = clearable && !!value && !disabled
+
+        return (
+            <div
+                className={cn(
+                    "relative inline-flex items-center w-full",
+                    disabled && "opacity-50 pointer-events-none",
+                    className
+                )}
+                data-slot="search-input"
+            >
+                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <input
+                    ref={ref}
+                    type="search"
+                    value={value ?? ""}
+                    onChange={(e) => onValueChange?.(e.target.value)}
+                    disabled={disabled}
+                    placeholder={placeholder}
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent pl-9 pr-9 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [&::-webkit-search-cancel-button]:hidden"
+                    {...props}
+                />
+                {showClear ? (
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <button
+                                type="button"
+                                tabIndex={-1}
+                                onClick={() => onValueChange?.("")}
+                                className="absolute right-2 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                                aria-label={clearLabel}
+                            >
+                                <X className="h-3.5 w-3.5" />
+                            </button>
+                        </TooltipTrigger>
+                        <TooltipContent>{clearLabel}</TooltipContent>
+                    </Tooltip>
+                ) : null}
+            </div>
+        )
+    }
+)
+SearchInput.displayName = "SearchInput"
+
+export { SearchInput }

package/src/components/inputs/Select.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { IconChevronDown as ChevronDown } from "@tabler/icons-react";
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { }
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+    ({ className, children, ...props }, ref) => {
+        const isFullWidth =
+            typeof className === "string" &&
+            className.split(/\s+/).includes("w-full")
+
+        return (
+            <div
+                className={cn(
+                    "relative inline-block max-w-full align-middle",
+                    isFullWidth && "block w-full"
+                )}
+                data-slot="select"
+            >
+                <select
+                    className={cn(
+                        "inline-flex h-9 w-[200px] max-w-full appearance-none items-center justify-between rounded-lg border border-input bg-transparent px-3 py-2 pr-9 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}
+                    data-slot="select-control"
+                >
+                    {children}
+                </select>
+                <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            </div>
+        )
+    }
+)
+Select.displayName = "Select"
+
+export { Select }

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

@@ -3,18 +3,31 @@
 import * as React from "react"
 import { cn } from "../../lib/utils"
 
-export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> { }
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue"> {
+    value?: number | string
+    defaultValue?: number | string
+    onValueChange?: (value: number) => void
+}
 
 const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
-    ({ className, ...props }, ref) => (
-        <div className="relative flex w-[200px] touch-none select-none items-center">
+    ({ className, onChange, onValueChange, ...props }, ref) => (
+        <div
+            className={cn(
+                "relative flex w-[200px] touch-none select-none items-center",
+                className
+            )}
+            data-slot="slider"
+        >
             <input
                 type="range"
                 ref={ref}
+                onChange={(event) => {
+                    onChange?.(event)
+                    onValueChange?.(Number(event.currentTarget.value))
+                }}
                 className={cn(
                     "h-5 w-full cursor-pointer appearance-none rounded-[10px] bg-input disabled:cursor-not-allowed disabled:opacity-50",
-                    "[&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-foreground [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:transition-colors [&::-webkit-slider-thumb]:focus-visible:outline-none [&::-webkit-slider-thumb]:focus-visible:ring-1 [&::-webkit-slider-thumb]:focus-visible:ring-ring [&::-webkit-slider-thumb]:focus-visible:ring-offset-1 [&::-webkit-slider-thumb]:focus-visible:ring-offset-background [&::-webkit-slider-thumb]:disabled:pointer-events-none [&::-webkit-slider-thumb]:disabled:opacity-50",
-                    className
+                    "[&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-foreground [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:transition-colors [&::-webkit-slider-thumb]:focus-visible:outline-none [&::-webkit-slider-thumb]:focus-visible:ring-1 [&::-webkit-slider-thumb]:focus-visible:ring-ring [&::-webkit-slider-thumb]:focus-visible:ring-offset-1 [&::-webkit-slider-thumb]:focus-visible:ring-offset-background [&::-webkit-slider-thumb]:disabled:pointer-events-none [&::-webkit-slider-thumb]:disabled:opacity-50"
                 )}
                 {...props}
             />