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

package/src/components/inputs/Mention.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface MentionOption {
+    id: string
+    label: string
+    /** Hint shown next to label (e.g. real name, role). */
+    hint?: string
+}
+
+export interface MentionProps
+    extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value"> {
+    value?: string
+    onValueChange?: (value: string) => void
+    /** Trigger character. Default "@". */
+    trigger?: string
+    /** Available people / items to suggest. */
+    options: MentionOption[]
+    /** Limit shown suggestions. Default 6. */
+    maxSuggestions?: number
+}
+
+function escapeRegExp(value: string) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
+function getClippingRect(root: HTMLElement) {
+    let element = root.parentElement
+
+    while (element && element !== document.documentElement) {
+        const style = window.getComputedStyle(element)
+        const overflow = `${style.overflow} ${style.overflowX} ${style.overflowY}`
+
+        if (/(auto|scroll|hidden|clip)/.test(overflow)) {
+            return element.getBoundingClientRect()
+        }
+
+        element = element.parentElement
+    }
+
+    return { top: 0, bottom: window.innerHeight }
+}
+
+const Mention = React.forwardRef<HTMLTextAreaElement, MentionProps>(
+    (
+        {
+            className,
+            value: controlledValue,
+            onValueChange,
+            trigger = "@",
+            options,
+            maxSuggestions = 6,
+            disabled,
+            placeholder,
+            rows = 3,
+            ...props
+        },
+        ref
+    ) => {
+        const [internalValue, setInternalValue] = React.useState("")
+        const isControlled = controlledValue !== undefined
+        const value = isControlled ? controlledValue : internalValue
+
+        const setValue = (next: string) => {
+            if (!isControlled) setInternalValue(next)
+            onValueChange?.(next)
+        }
+
+        const [activeIndex, setActiveIndex] = React.useState(0)
+        const [suggestionsDismissed, setSuggestionsDismissed] = React.useState(false)
+        const [suggestionSide, setSuggestionSide] = React.useState<"top" | "bottom">("bottom")
+        const [suggestionMaxHeight, setSuggestionMaxHeight] = React.useState<number | undefined>(undefined)
+        const rootRef = React.useRef<HTMLDivElement | null>(null)
+        const internalRef = React.useRef<HTMLTextAreaElement | null>(null)
+        const setRef = (node: HTMLTextAreaElement | null) => {
+            internalRef.current = node
+            if (typeof ref === "function") ref(node)
+            else if (ref) ref.current = node
+        }
+
+        const triggerInfo = React.useMemo(() => {
+            const el = internalRef.current
+            const cursor = el?.selectionStart ?? value.length
+            const before = value.slice(0, cursor)
+            const triggerIdx = before.lastIndexOf(trigger)
+            if (triggerIdx === -1) return null
+            // Reject if there's whitespace between trigger and cursor (means we left the mention scope)
+            const segment = before.slice(triggerIdx + trigger.length)
+            if (/\s/.test(segment)) return null
+            return { triggerIdx, query: segment }
+        }, [value, trigger])
+
+        const filtered = React.useMemo(() => {
+            if (!triggerInfo) return []
+            const q = triggerInfo.query.toLowerCase()
+            return options
+                .filter((o) => o.label.toLowerCase().includes(q))
+                .slice(0, maxSuggestions)
+        }, [triggerInfo, options, maxSuggestions])
+
+        React.useEffect(() => {
+            setActiveIndex(0)
+        }, [triggerInfo?.query])
+
+        const showSuggestions = !suggestionsDismissed && !!triggerInfo && filtered.length > 0
+        const mentionPattern = React.useMemo(() => {
+            const labels = options
+                .map((option) => option.label)
+                .filter(Boolean)
+                .sort((a, b) => b.length - a.length)
+                .map(escapeRegExp)
+            if (labels.length === 0) return null
+            return new RegExp(`${escapeRegExp(trigger)}(${labels.join("|")})(?=\\s|$)`, "g")
+        }, [options, trigger])
+
+        const highlightedValue = React.useMemo(() => {
+            if (!mentionPattern || value.length === 0) return value
+
+            const parts: React.ReactNode[] = []
+            let lastIndex = 0
+            for (const match of value.matchAll(mentionPattern)) {
+                const index = match.index ?? 0
+                if (index > lastIndex) {
+                    parts.push(value.slice(lastIndex, index))
+                }
+                parts.push(
+                    <span key={`${index}-${match[0]}`} className="font-medium text-primary">
+                        {match[0]}
+                    </span>
+                )
+                lastIndex = index + match[0].length
+            }
+            if (lastIndex < value.length) {
+                parts.push(value.slice(lastIndex))
+            }
+            return parts
+        }, [mentionPattern, value])
+
+        React.useLayoutEffect(() => {
+            if (!showSuggestions) return
+            const root = rootRef.current
+            if (!root) return
+            const rootRect = root.getBoundingClientRect()
+            const contentFitEmbed =
+                !!root.closest("[data-embed-fit-height-content='true']") ||
+                (typeof window !== "undefined" &&
+                    new URLSearchParams(window.location.search).get("fitHeight") === "content")
+            const estimatedHeight = Math.min(filtered.length, maxSuggestions) * 36 + 8
+            if (contentFitEmbed) {
+                setSuggestionSide("bottom")
+                setSuggestionMaxHeight(Math.min(estimatedHeight, 4 * 36 + 8))
+                return
+            }
+            const clippingRect = getClippingRect(root)
+            const bottomSpace = clippingRect.bottom - rootRect.bottom
+            const topSpace = rootRect.top - clippingRect.top
+            const nextSide = bottomSpace < estimatedHeight && topSpace > bottomSpace ? "top" : "bottom"
+            const availableSpace = Math.max(0, nextSide === "top" ? topSpace : bottomSpace)
+            setSuggestionSide(nextSide)
+            setSuggestionMaxHeight(Math.floor(Math.max(0, availableSpace - 8)))
+        }, [showSuggestions, filtered.length])
+
+        const insertMention = (option: MentionOption) => {
+            if (!triggerInfo) return
+            const cursor = internalRef.current?.selectionStart ?? value.length
+            const before = value.slice(0, triggerInfo.triggerIdx)
+            const after = value.slice(cursor)
+            const newValue = `${before}${trigger}${option.label} ${after}`
+            setSuggestionsDismissed(true)
+            setValue(newValue)
+            // Move cursor after inserted mention
+            window.setTimeout(() => {
+                const target = internalRef.current
+                if (!target) return
+                const pos = before.length + trigger.length + option.label.length + 1
+                target.setSelectionRange(pos, pos)
+                target.focus()
+            }, 0)
+        }
+
+        const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+            const nativeEvent = event.nativeEvent as InputEvent
+            const inputData = typeof nativeEvent.data === "string" ? nativeEvent.data : null
+            if (inputData === trigger || !suggestionsDismissed) {
+                setSuggestionsDismissed(false)
+            } else {
+                setSuggestionsDismissed(true)
+            }
+            setValue(event.target.value)
+        }
+
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (!showSuggestions) return
+            if (event.key === "ArrowDown") {
+                event.preventDefault()
+                setActiveIndex((i) => (i + 1) % filtered.length)
+            } else if (event.key === "ArrowUp") {
+                event.preventDefault()
+                setActiveIndex((i) => (i - 1 + filtered.length) % filtered.length)
+            } else if (event.key === "Enter" || event.key === "Tab") {
+                event.preventDefault()
+                insertMention(filtered[activeIndex])
+            } else if (event.key === "Escape") {
+                event.preventDefault()
+                setSuggestionsDismissed(true)
+            }
+        }
+
+        return (
+            <div ref={rootRef} className={cn("relative w-full", className)} data-slot="mention">
+                {value ? (
+                    <div
+                        aria-hidden="true"
+                        className="pointer-events-none absolute inset-0 whitespace-pre-wrap break-words rounded-md border border-transparent px-3 py-2 text-sm text-foreground"
+                    >
+                        {highlightedValue}
+                    </div>
+                ) : null}
+                <textarea
+                    ref={setRef}
+                    rows={rows}
+                    value={value}
+                    onKeyDown={handleKeyDown}
+                    onClick={() => setSuggestionsDismissed(true)}
+                    disabled={disabled}
+                    placeholder={placeholder}
+                    onChange={handleChange}
+                    className={cn(
+                        "relative flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm caret-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                        value && "text-transparent selection:bg-primary-subtle"
+                    )}
+                    {...props}
+                />
+                {showSuggestions ? (
+                    <div
+                        data-slot="mention-suggestions"
+                        className={cn(
+                            "absolute left-0 z-50 w-full max-w-xs rounded-md border bg-popover p-1 shadow-md",
+                            suggestionSide === "top" ? "bottom-full mb-1" : "top-full mt-1"
+                        )}
+                        style={{ maxHeight: suggestionMaxHeight }}
+                    >
+                        <ul role="listbox" className="max-h-[inherit] overflow-y-auto">
+                            {filtered.map((option, idx) => (
+                                <li key={option.id}>
+                                    <button
+                                        type="button"
+                                        role="option"
+                                        aria-selected={idx === activeIndex}
+                                        onMouseEnter={() => setActiveIndex(idx)}
+                                        onMouseDown={(event) => event.preventDefault()}
+                                        onClick={() => insertMention(option)}
+                                        className={cn(
+                                            "flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm",
+                                            idx === activeIndex && "bg-muted"
+                                        )}
+                                    >
+                                        <span className="font-medium">{option.label}</span>
+                                        {option.hint ? (
+                                            <span className="text-xs text-muted-foreground">
+                                                {option.hint}
+                                            </span>
+                                        ) : null}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ) : null}
+            </div>
+        )
+    }
+)
+Mention.displayName = "Mention"
+
+export { Mention }

package/src/components/inputs/NumberInput.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { IconChevronDown as ChevronDown, IconChevronUp as ChevronUp } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+
+export interface NumberInputProps
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> {
+    value?: number
+    onValueChange?: (value: number) => void
+    min?: number
+    max?: number
+    step?: number
+    incrementLabel?: string
+    decrementLabel?: string
+}
+
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+    (
+        {
+            className,
+            value,
+            onValueChange,
+            min,
+            max,
+            step = 1,
+            incrementLabel = "Increment",
+            decrementLabel = "Decrement",
+            disabled,
+            ...props
+        },
+        ref
+    ) => {
+        const clamp = React.useCallback(
+            (next: number) => {
+                let result = next
+                if (min !== undefined) result = Math.max(min, result)
+                if (max !== undefined) result = Math.min(max, result)
+                return result
+            },
+            [min, max]
+        )
+
+        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            const raw = event.target.value
+            if (raw === "" || raw === "-") return
+            const parsed = Number(raw)
+            if (Number.isNaN(parsed)) return
+            onValueChange?.(clamp(parsed))
+        }
+
+        const adjust = (delta: number) => {
+            const current = value ?? 0
+            onValueChange?.(clamp(current + delta))
+        }
+
+        return (
+            <div
+                className={cn(
+                    "inline-flex items-center rounded-md border border-input bg-transparent shadow-sm focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
+                    disabled && "opacity-50 pointer-events-none",
+                    className
+                )}
+                data-slot="number-input"
+            >
+                <input
+                    ref={ref}
+                    type="number"
+                    inputMode={step % 1 === 0 ? "numeric" : "decimal"}
+                    value={value ?? ""}
+                    onChange={handleChange}
+                    disabled={disabled}
+                    min={min}
+                    max={max}
+                    step={step}
+                    className="h-9 w-full rounded-l-md bg-transparent px-3 py-1 text-sm placeholder:text-muted-foreground focus-visible:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    {...props}
+                />
+                <div className="flex flex-col border-l border-input">
+                    <button
+                        type="button"
+                        tabIndex={-1}
+                        onClick={() => adjust(step)}
+                        disabled={disabled || (max !== undefined && (value ?? 0) >= max)}
+                        className="flex h-[18px] w-7 items-center justify-center text-muted-foreground hover:bg-muted disabled:opacity-50"
+                        aria-label={incrementLabel}
+                    >
+                        <ChevronUp className="h-3 w-3" />
+                    </button>
+                    <div className="h-px bg-input" />
+                    <button
+                        type="button"
+                        tabIndex={-1}
+                        onClick={() => adjust(-step)}
+                        disabled={disabled || (min !== undefined && (value ?? 0) <= min)}
+                        className="flex h-[18px] w-7 items-center justify-center text-muted-foreground hover:bg-muted disabled:opacity-50"
+                        aria-label={decrementLabel}
+                    >
+                        <ChevronDown className="h-3 w-3" />
+                    </button>
+                </div>
+            </div>
+        )
+    }
+)
+NumberInput.displayName = "NumberInput"
+
+export { NumberInput }

package/src/components/inputs/PasswordGroup.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import {
+    FormControl,
+    FormDescription,
+    FormGroup,
+    FormLabel,
+    FormMessage,
+} from "./Form"
+import { PasswordInput, type PasswordInputProps } from "./PasswordInput"
+import {
+    PasswordRequirementList,
+    type PasswordRequirement,
+} from "./PasswordRequirementList"
+import { PasswordStrengthMeter } from "./PasswordStrengthMeter"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+
+export interface PasswordGroupProps
+    extends Omit<
+        React.HTMLAttributes<HTMLDivElement>,
+        "defaultValue" | "onChange"
+    > {
+    id?: string
+    label?: React.ReactNode
+    description?: React.ReactNode
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+    requirements?: PasswordRequirement[]
+    strengthScore?: number
+    strengthLabel?: React.ReactNode
+    strengthDescription?: React.ReactNode
+    strengthValueLabel?: React.ReactNode
+    error?: React.ReactNode
+    disabled?: boolean
+    disabledReason?: React.ReactNode
+    passwordInputProps?: Omit<
+        PasswordInputProps,
+        "id" | "value" | "defaultValue" | "onChange" | "disabled"
+    >
+}
+
+const PasswordGroup = React.forwardRef<HTMLDivElement, PasswordGroupProps>(
+    (
+        {
+            className,
+            id: idProp,
+            label = "Password",
+            description,
+            value,
+            defaultValue,
+            onValueChange,
+            requirements,
+            strengthScore,
+            strengthLabel,
+            strengthDescription,
+            strengthValueLabel,
+            error,
+            disabled,
+            disabledReason,
+            passwordInputProps,
+            ...props
+        },
+        ref
+    ) => {
+        const generatedId = React.useId()
+        const id = idProp ?? generatedId
+        const isControlled = value !== undefined
+        const [internalValue, setInternalValue] = React.useState(defaultValue ?? "")
+        const resolvedValue = isControlled ? value : internalValue
+
+        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            if (!isControlled) {
+                setInternalValue(event.target.value)
+            }
+            onValueChange?.(event.target.value)
+        }
+
+        const input = (
+            <PasswordInput
+                {...passwordInputProps}
+                id={id}
+                value={resolvedValue}
+                onChange={handleChange}
+                disabled={disabled}
+                aria-invalid={error ? true : passwordInputProps?.["aria-invalid"]}
+            />
+        )
+
+        return (
+            <div
+                ref={ref}
+                className={cn("w-full", className)}
+                data-slot="password-group"
+                {...props}
+            >
+                <FormGroup>
+                    {label ? <FormLabel htmlFor={id}>{label}</FormLabel> : null}
+                    <FormControl>
+                        {disabled && disabledReason ? (
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <span className="block w-full" tabIndex={0}>
+                                        {input}
+                                    </span>
+                                </TooltipTrigger>
+                                <TooltipContent>{disabledReason}</TooltipContent>
+                            </Tooltip>
+                        ) : (
+                            input
+                        )}
+                    </FormControl>
+                    {description ? (
+                        <FormDescription>{description}</FormDescription>
+                    ) : null}
+                    {strengthScore !== undefined ? (
+                        <PasswordStrengthMeter
+                            score={strengthScore}
+                            label={strengthLabel}
+                            description={strengthDescription}
+                            valueLabel={strengthValueLabel}
+                        />
+                    ) : null}
+                    {requirements && requirements.length > 0 ? (
+                        <PasswordRequirementList requirements={requirements} />
+                    ) : null}
+                    {error ? <FormMessage>{error}</FormMessage> : null}
+                </FormGroup>
+            </div>
+        )
+    }
+)
+PasswordGroup.displayName = "PasswordGroup"
+
+export { PasswordGroup }

package/src/components/inputs/PasswordInput.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { IconEye as Eye, IconEyeOff as EyeOff } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+
+export interface PasswordInputProps
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** If provided, controls the show/hide state externally. */
+    show?: boolean
+    onShowChange?: (show: boolean) => void
+    showLabel?: string
+    hideLabel?: string
+}
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+    (
+        {
+            className,
+            show: showProp,
+            onShowChange,
+            showLabel = "Show password",
+            hideLabel = "Hide password",
+            disabled,
+            ...props
+        },
+        ref
+    ) => {
+        const [internalShow, setInternalShow] = React.useState(false)
+        const isControlled = showProp !== undefined
+        const show = isControlled ? showProp : internalShow
+
+        const toggle = () => {
+            const next = !show
+            if (!isControlled) setInternalShow(next)
+            onShowChange?.(next)
+        }
+
+        const Icon = show ? EyeOff : Eye
+
+        return (
+            <div
+                className={cn(
+                    "relative inline-flex items-center w-full",
+                    disabled && "opacity-50 pointer-events-none",
+                    className
+                )}
+                data-slot="password-input"
+            >
+                <input
+                    ref={ref}
+                    type={show ? "text" : "password"}
+                    disabled={disabled}
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pr-10 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    {...props}
+                />
+                <button
+                    type="button"
+                    tabIndex={-1}
+                    onClick={toggle}
+                    disabled={disabled}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                    aria-label={show ? hideLabel : showLabel}
+                >
+                    <Icon className="h-4 w-4" />
+                </button>
+            </div>
+        )
+    }
+)
+PasswordInput.displayName = "PasswordInput"
+
+export { PasswordInput }