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

package/src/components/inputs/EditableField.tsx

@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import { IconPencil as Pencil } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { Button } from "./Button"
+import { Textarea } from "./Textarea"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+
+export interface EditableFieldLabels {
+    edit?: string
+    save?: string
+    cancel?: string
+}
+
+export interface EditableFieldProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    label: React.ReactNode
+    value: string
+    onSave?: (value: string) => void | Promise<void>
+    labels?: EditableFieldLabels
+    placeholder?: string
+    minRows?: number
+    maxRows?: number
+    fieldClassName?: string
+    inputClassName?: string
+    disabled?: boolean
+    error?: React.ReactNode
+}
+
+const rowHeight = 20
+const verticalPadding = 18
+const borderHeight = 2
+
+function getRowsHeight(rows: number) {
+    return rows * rowHeight + verticalPadding
+}
+
+const EditableField = React.forwardRef<HTMLDivElement, EditableFieldProps>(
+    (
+        {
+            label,
+            value,
+            onSave,
+            labels,
+            placeholder = "-",
+            minRows = 1,
+            maxRows = 3,
+            fieldClassName,
+            inputClassName,
+            disabled,
+            error,
+            className,
+            ...props
+        },
+        ref
+    ) => {
+        const [editing, setEditing] = React.useState(false)
+        const [draft, setDraft] = React.useState(value)
+        const [saving, setSaving] = React.useState(false)
+        const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+        const resolvedMinRows = Math.max(1, minRows)
+        const resolvedMaxRows = Math.max(resolvedMinRows, maxRows)
+        const minHeight = getRowsHeight(resolvedMinRows)
+        const maxHeight = getRowsHeight(resolvedMaxRows)
+
+        React.useEffect(() => {
+            if (!editing) {
+                setDraft(value)
+            }
+        }, [editing, value])
+
+        React.useLayoutEffect(() => {
+            if (!editing || !textareaRef.current) return
+            const textarea = textareaRef.current
+            textarea.style.height = "auto"
+            const nextHeight = Math.min(maxHeight, Math.max(minHeight, textarea.scrollHeight + borderHeight))
+            textarea.style.height = `${nextHeight}px`
+        }, [draft, editing, maxHeight, minHeight])
+
+        const commit = async () => {
+            try {
+                setSaving(true)
+                await onSave?.(draft.trim())
+                setEditing(false)
+            } catch {
+                // Keep edit mode open so controlled error feedback can explain the failure.
+            } finally {
+                setSaving(false)
+            }
+        }
+
+        const surfaceClass = cn(
+            "box-border w-full min-w-0 rounded-md border bg-muted/20 px-3 py-2 text-sm leading-5 text-foreground shadow-none",
+            "whitespace-pre-wrap break-words",
+            error && "border-destructive-border",
+            fieldClassName
+        )
+
+        return (
+            <div ref={ref} className={cn("relative grid w-full gap-1.5 p-0", className)} {...props} data-slot="editable-field">
+                <div className="relative flex h-7 items-center pr-28">
+                    <div className="min-w-0 text-xs font-medium leading-5 text-foreground">{label}</div>
+                    <div className="absolute right-0 top-0 flex h-7 shrink-0 items-center justify-end gap-1">
+                        {onSave && !editing ? (
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-7 w-7 text-muted-foreground"
+                                        aria-label={labels?.edit ?? "Edit"}
+                                        disabled={disabled}
+                                        onClick={() => {
+                                            setDraft(value)
+                                            setEditing(true)
+                                        }}
+                                    >
+                                        <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>{labels?.edit ?? "Edit"}</TooltipContent>
+                            </Tooltip>
+                        ) : null}
+                        {editing ? (
+                            <>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 px-2"
+                                    disabled={saving}
+                                    onClick={() => {
+                                        setDraft(value)
+                                        setEditing(false)
+                                    }}
+                                >
+                                    {labels?.cancel ?? "Cancel"}
+                                </Button>
+                                <Button type="button" size="sm" className="h-7 px-2" disabled={saving} onClick={commit}>
+                                    {labels?.save ?? "Save"}
+                                </Button>
+                            </>
+                        ) : null}
+                    </div>
+                </div>
+                {editing ? (
+                    <Textarea
+                        ref={textareaRef}
+                        value={draft}
+                        onChange={(event) => setDraft(event.target.value)}
+                        className={cn(surfaceClass, "block h-auto resize-none overflow-y-auto align-top", inputClassName)}
+                        rows={resolvedMinRows}
+                        aria-invalid={error ? true : undefined}
+                        style={{ minHeight, maxHeight }}
+                    />
+                ) : (
+                    <div
+                        className={cn(surfaceClass, "overflow-y-auto")}
+                        style={{ minHeight, maxHeight }}
+                    >
+                        {value ? (
+                            <span className="min-w-0 break-words">{value}</span>
+                        ) : (
+                            <span className="text-muted-foreground">{placeholder}</span>
+                        )}
+                    </div>
+                )}
+                {error ? (
+                    <p className="text-xs leading-5 text-destructive" role="alert">
+                        {error}
+                    </p>
+                ) : null}
+            </div>
+        )
+    }
+)
+EditableField.displayName = "EditableField"
+
+export { EditableField }

package/src/components/{organisms → inputs}/FileUploader.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import * as React from "react"
-import { Upload, X, FileText, CheckCircle, AlertCircle } from "lucide-react"
+import { IconUpload as Upload, IconX as X, IconFileText as FileText, IconCircleCheck as CheckCircle, IconAlertCircle as AlertCircle } from "@tabler/icons-react";
 import { cn } from "../../lib/utils"
-import { Button } from "../atoms/Button"
-import { Progress } from "../atoms/Progress"
+import { Button } from "../inputs/Button"
+import { Progress } from "../feedback/Progress"
 
 export interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
     onValueChange?: (files: File[]) => void
@@ -12,6 +12,13 @@ export interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement>
     maxSize?: number // in bytes
     accept?: Record<string, string[]>
     disabled?: boolean
+    labels?: {
+        browse?: React.ReactNode
+        drop?: React.ReactNode
+        maxSize?: (sizeMb: number) => React.ReactNode
+        removeFile?: string
+        fileTooLarge?: string
+    }
 }
 
 interface FileState {
@@ -22,10 +29,11 @@ interface FileState {
 }
 
 export const FileUploader = React.forwardRef<HTMLDivElement, FileUploaderProps>(
-    ({ className, onValueChange, maxFiles = 1, maxSize = 1024 * 1024 * 5, accept, disabled, ...props }, ref) => {
+    ({ className, onValueChange, maxFiles = 1, maxSize = 1024 * 1024 * 5, accept, disabled, labels, ...props }, ref) => {
         const [dragActive, setDragActive] = React.useState(false)
         const [files, setFiles] = React.useState<FileState[]>([])
         const inputRef = React.useRef<HTMLInputElement>(null)
+        const maxSizeMb = Math.round(maxSize / 1024 / 1024)
 
         const handleDrag = React.useCallback((e: React.DragEvent) => {
             e.preventDefault()
@@ -38,7 +46,7 @@ export const FileUploader = React.forwardRef<HTMLDivElement, FileUploaderProps>(
         }, [])
 
         const validateFile = (file: File): string | undefined => {
-            if (file.size > maxSize) return "File too large"
+            if (file.size > maxSize) return labels?.fileTooLarge ?? "File too large"
             // Simple check, in real app use proper mime matching
             return undefined
         }
@@ -89,11 +97,16 @@ export const FileUploader = React.forwardRef<HTMLDivElement, FileUploaderProps>(
         // For this UI component, we just accept the files.
 
         return (
-            <div className={cn("grid gap-4 w-[640px] w-full", className)} ref={ref} {...props}>
+            <div
+                className={cn("grid w-full max-w-[640px] gap-4", className)}
+                ref={ref}
+                {...props}
+                data-slot="file-uploader"
+            >
                 <div
                     className={cn(
                         "relative flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed transition-colors",
-                        dragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:bg-muted/50",
+                        dragActive ? "border-primary-border bg-primary-subtle" : "border-muted-foreground/25 hover:bg-muted/50",
                         disabled && "opacity-60 cursor-not-allowed"
                     )}
                     onDragEnter={handleDrag}
@@ -112,10 +125,11 @@ export const FileUploader = React.forwardRef<HTMLDivElement, FileUploaderProps>(
                     <div className="flex flex-col items-center justify-center pt-5 pb-6 text-center cursor-pointer" onClick={() => inputRef.current?.click()}>
                         <Upload className="w-8 h-8 mb-3 text-muted-foreground" />
                         <p className="mb-1 text-sm text-foreground">
-                            <span className="font-semibold">Click to upload</span> or drag and drop
+                            <span className="font-semibold">{labels?.browse ?? "Click to upload"}</span>{" "}
+                            {labels?.drop ?? "or drag and drop"}
                         </p>
                         <p className="text-xs text-muted-foreground">
-                            Max size {Math.round(maxSize / 1024 / 1024)}MB
+                            {labels?.maxSize?.(maxSizeMb) ?? `Max size ${maxSizeMb}MB`}
                         </p>
                     </div>
                 </div>
@@ -137,6 +151,7 @@ export const FileUploader = React.forwardRef<HTMLDivElement, FileUploaderProps>(
                                     size="icon"
                                     className="h-6 w-6"
                                     onClick={() => removeFile(index)}
+                                    aria-label={labels?.removeFile ?? "Remove file"}
                                 >
                                     <X className="h-4 w-4" />
                                 </Button>

package/src/components/inputs/FilterButton.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import * as React from "react"
+import { IconFilter as FilterIcon, IconCheck as Check } from "@tabler/icons-react";
+import { Button, ButtonProps } from "../inputs/Button"
+import { Popover, PopoverTrigger, PopoverContent } from "../overlay/Popover"
+import { Command, CommandGroup, CommandItem, CommandList } from "../navigation/Command"
+import { cn } from "../../lib/utils"
+import { Badge } from "../display/Badge"
+import type { FilterButtonVariantKey } from "./generated/variant-keys"
+import { filterButtonDefaultVariantKey } from "./generated/default-variant-keys"
+
+export interface FilterOption {
+    label: string
+    value: string
+}
+
+export interface FilterButtonProps extends ButtonProps {
+    title?: string
+    icon?: React.ReactNode
+    options?: FilterOption[]
+    selectedValues?: Set<string>
+    onFilterChange?: (values: Set<string>) => void
+    clearLabel?: string
+    selectedLabel?: (count: number) => string
+    contentClassName?: string
+    contentAlign?: React.ComponentPropsWithoutRef<typeof PopoverContent>["align"]
+    portalContainer?: HTMLElement | null
+    children?: React.ReactNode
+}
+
+const FilterButton = React.forwardRef<HTMLButtonElement, FilterButtonProps>(
+    (
+        {
+            className,
+            title = "Filter",
+            icon,
+            options = [],
+            selectedValues = new Set(),
+            onFilterChange,
+            clearLabel = "Clear filters",
+            selectedLabel = (count) => `${count} selected`,
+            contentClassName,
+            contentAlign = "start",
+            portalContainer,
+            children,
+            variant = "outline",
+            size = "sm",
+            ...props
+        },
+        ref
+    ) => {
+        const [isOpen, setIsOpen] = React.useState(false)
+
+        const triggerStyles: Record<FilterButtonVariantKey, string> = {
+            default: "inline-flex h-9 max-w-full flex-row items-center gap-2 rounded-md border border-dashed px-3 py-2",
+            popover: "inline-flex h-9 max-w-full flex-row items-center gap-2 rounded-md border border-primary-border bg-primary-subtle px-3 py-2 text-primary-subtle-foreground",
+            selected: "inline-flex h-9 max-w-full flex-row items-center gap-2 rounded-md border border-primary bg-primary-subtle px-3 py-2 text-primary-subtle-foreground",
+        }
+
+        const triggerVariant: FilterButtonVariantKey =
+            selectedValues.size > 0 ? "selected" : isOpen ? "popover" : filterButtonDefaultVariantKey
+
+        const handleSelect = (value: string) => {
+            const newSet = new Set(selectedValues)
+            if (newSet.has(value)) {
+                newSet.delete(value)
+            } else {
+                newSet.add(value)
+            }
+            onFilterChange?.(newSet)
+        }
+        const popoverContent = children ?? (
+            <Command>
+                <CommandList>
+                    <CommandGroup>
+                        {options.map((option) => {
+                            const isSelected = selectedValues.has(option.value)
+                            return (
+                                <CommandItem
+                                    key={option.value}
+                                    onSelect={() => handleSelect(option.value)}
+                                >
+                                    <div
+                                        className={cn(
+                                            "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                                            isSelected
+                                                ? "bg-primary text-primary-foreground"
+                                                : "opacity-50 [&_svg]:invisible"
+                                        )}
+                                    >
+                                        <Check className="h-4 w-4" />
+                                    </div>
+                                    <span>{option.label}</span>
+                                </CommandItem>
+                            )
+                        })}
+                    </CommandGroup>
+                    {selectedValues.size > 0 && (
+                        <>
+                            <div className="h-px bg-border mx-1 my-1" />
+                            <CommandGroup>
+                                <CommandItem
+                                    onSelect={() => onFilterChange?.(new Set())}
+                                    className="justify-center text-center"
+                                >
+                                    {clearLabel}
+                                </CommandItem>
+                            </CommandGroup>
+                        </>
+                    )}
+                </CommandList>
+            </Command>
+        )
+
+        return (
+            <Popover open={isOpen} onOpenChange={setIsOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        ref={ref}
+                        variant={variant}
+                        size={size}
+                        className={cn(triggerStyles[triggerVariant], className)}
+                        {...props}
+                    >
+                        {icon ?? <FilterIcon className="h-4 w-4" aria-hidden="true" />}
+                        <span className="min-w-0 truncate">{title}</span>
+                        <Badge variant="secondary"
+                            className={cn(
+                                "ml-0.5 inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs leading-none",
+                                selectedValues.size === 0 && "invisible"
+                            )}
+                            aria-hidden={selectedValues.size === 0 ? "true" : undefined}
+                            aria-label={selectedValues.size > 0 ? selectedLabel(selectedValues.size) : undefined}
+                        >
+                            {selectedValues.size || 0}
+                        </Badge>
+                    </Button>
+                </PopoverTrigger>
+                {contentClassName ? (
+                    <PopoverContent
+                        className={contentClassName}
+                        align={contentAlign}
+                        portalContainer={portalContainer}
+                    >
+                        {popoverContent}
+                    </PopoverContent>
+                ) : (
+                    <PopoverContent
+                        className="w-[200px] p-0"
+                        align={contentAlign}
+                        portalContainer={portalContainer}
+                    >
+                        {popoverContent}
+                    </PopoverContent>
+                )}
+            </Popover>
+        )
+    }
+)
+FilterButton.displayName = "FilterButton"
+
+export { FilterButton }

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

@@ -3,16 +3,28 @@ import { cva } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const formFieldVariants = cva("flex flex-col gap-1.5 p-4")
+const formGroupVariants = cva(
+    "flex flex-col gap-1.5 p-0 [&_[data-slot=combobox]]:!w-full [&_[data-slot=date-picker]]:!w-full [&_[data-slot=date-range-picker]]:!w-full [&_[data-slot=editable-field]]:!w-full [&_[data-slot=file-uploader]]:!w-full [&_[data-slot=form-control]]:w-full [&_[data-slot=input]]:!w-full [&_[data-slot=input-otp]]:!w-full [&_[data-slot=mention]]:!w-full [&_[data-slot=number-input]]:!w-full [&_[data-slot=password-group]]:!w-full [&_[data-slot=password-input]]:!w-full [&_[data-slot=phone-input]]:!w-full [&_[data-slot=postal-code-input]]:!w-full [&_[data-slot=range-slider]]:!w-full [&_[data-slot=search-input]]:!w-full [&_[data-slot=select-control]]:!w-full [&_[data-slot=slider]]:!w-full [&_[data-slot=tag-input]]:!w-full [&_[data-slot=textarea]]:!w-full [&_[data-slot=time-picker]]:!w-full"
+)
 
 export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn(formFieldVariants(), className)} {...props} />
+        <div ref={ref} className={cn(formFieldVariants(), className)} {...props} data-slot="form-field" />
     )
 )
 FormField.displayName = "FormField"
 
+export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const FormGroup = React.forwardRef<HTMLDivElement, FormGroupProps>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn(formGroupVariants(), className)} {...props} data-slot="form-group" />
+    )
+)
+FormGroup.displayName = "FormGroup"
+
 export interface FormLabelProps
     extends React.LabelHTMLAttributes<HTMLLabelElement> {}
 
@@ -25,6 +37,7 @@ const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(
                 className
             )}
             {...props}
+            data-slot="form-label"
         />
     )
 )
@@ -34,7 +47,7 @@ export interface FormControlProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn(className)} {...props} />
+        <div ref={ref} className={cn(className)} {...props} data-slot="form-control" />
     )
 )
 FormControl.displayName = "FormControl"
@@ -50,6 +63,7 @@ const FormDescription = React.forwardRef<
         ref={ref}
         className={cn("text-xs font-normal text-muted-foreground", className)}
         {...props}
+        data-slot="form-description"
     />
 ))
 FormDescription.displayName = "FormDescription"
@@ -63,6 +77,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
             ref={ref}
             className={cn("text-xs font-medium text-destructive", className)}
             {...props}
+            data-slot="form-message"
         >
             {children}
         </p>
@@ -74,7 +89,7 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {}
 
 const Form = React.forwardRef<HTMLFormElement, FormProps>(
     ({ className, ...props }, ref) => (
-        <form ref={ref} className={cn("flex flex-col gap-4", className)} {...props} />
+        <form ref={ref} className={cn("flex flex-col gap-4", className)} {...props} data-slot="form" />
     )
 )
 Form.displayName = "Form"
@@ -82,9 +97,11 @@ Form.displayName = "Form"
 export {
     Form,
     FormField,
+    FormGroup,
     FormLabel,
     FormControl,
     FormDescription,
     FormMessage,
     formFieldVariants,
+    formGroupVariants,
 }

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

@@ -20,6 +20,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 type={type}
                 className={cn(
                     "inline-flex h-9 w-[280px] max-w-full items-center rounded-lg border border-input bg-transparent px-3 py-2 text-sm font-normal shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed",
+                    "aria-invalid:border-destructive-border aria-invalid:ring-destructive-border aria-invalid:focus-visible:ring-destructive-border",
                     inputVariantClasses[inputState],
                     inputVariantClasses.placeholder,
                     className
@@ -28,6 +29,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 suppressHydrationWarning
                 disabled={disabled}
                 {...props}
+                data-slot="input"
             />
         )
     }

package/src/components/inputs/InputOTP.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { IconMinus as Minus } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+
+const InputOTP = React.forwardRef<
+    React.ElementRef<typeof OTPInput>,
+    React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+    <OTPInput
+        ref={ref}
+        containerClassName={cn(
+            "flex items-center gap-2 has-[:disabled]:opacity-50",
+            containerClassName
+        )}
+        className={cn("disabled:cursor-not-allowed", className)}
+        {...props}
+        data-slot="input-otp"
+    />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+    React.ElementRef<"div">,
+    React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+    React.ElementRef<"div">,
+    React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext)
+    const slot = inputOTPContext?.slots[index]
+    const char = slot?.char
+    const hasFakeCaret = slot?.hasFakeCaret ?? false
+    const isActive = slot?.isActive ?? false
+
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+                isActive && "z-10 ring-1 ring-ring",
+                className
+            )}
+            {...props}
+        >
+            {char}
+            {hasFakeCaret ? (
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                    <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+                </div>
+            ) : null}
+        </div>
+    )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+    React.ElementRef<"div">,
+    React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+    <div ref={ref} role="separator" {...props}>
+        <Minus className="h-4 w-4 text-muted-foreground" />
+    </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }