@gunjo/ui 0.0.1-alpha.0

package/src/components/atoms/Avatar.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "../../lib/utils"
+import type { AvatarVariantKey } from "./generated/variant-keys"
+import { avatarDefaultVariantKey } from "./generated/default-variant-keys"
+
+const avatarSlotClasses: Record<AvatarVariantKey, string> = {
+    fallback: "flex h-full w-full items-center justify-center rounded-full bg-secondary text-sm font-medium text-muted-foreground",
+    image: "aspect-square h-full w-full",
+}
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative inline-flex h-10 w-10 shrink-0 items-center overflow-hidden rounded-full",
+            className
+        )}
+        {...props}
+    />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn(avatarSlotClasses.image, className)}
+        {...props}
+    />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            avatarSlotClasses[avatarDefaultVariantKey],
+            className
+        )}
+        {...props}
+    />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/atoms/Badge.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import type { BadgeVariantKey } from "./generated/variant-keys"
+import { badgeDefaultVariantKey } from "./generated/default-variant-keys"
+
+const badgeVariantClasses: Record<BadgeVariantKey, string> = {
+    default: "bg-foreground text-primary-foreground hover:bg-foreground/80",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+    destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80",
+    outline: "border-border bg-transparent text-foreground",
+}
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: BadgeVariantKey
+}
+
+function Badge({ className, variant = badgeDefaultVariantKey, ...props }: BadgeProps) {
+    return (
+        <div
+            className={cn(
+                "inline-flex items-center w-fit h-5 rounded-full border border-transparent px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                badgeVariantClasses[variant],
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+export { Badge }

package/src/components/atoms/Button.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+import { buttonVariants } from "./ButtonVariants"
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button"
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Button.displayName = "Button"
+
+export { Button }

package/src/components/atoms/ButtonVariants.ts

@@ -0,0 +1,37 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ButtonVariantKey } from "./generated/variant-keys"
+import { buttonDefaultVariantKey } from "./generated/default-variant-keys"
+
+const buttonVariantClasses: Record<ButtonVariantKey, string> = {
+    default:
+        "bg-foreground text-primary-foreground shadow hover:bg-foreground/90",
+    destructive:
+        "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+    outline:
+        "border border-border bg-transparent shadow-sm hover:bg-muted hover:text-foreground",
+    secondary:
+        "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+    ghost: "bg-transparent hover:bg-muted hover:text-foreground",
+    link: "bg-transparent text-foreground underline underline-offset-4 hover:underline",
+}
+
+export const buttonVariants = cva(
+    "inline-flex items-center justify-center w-fit gap-2 rounded-lg rounded-[var(--radius)] text-sm font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: buttonVariantClasses,
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: buttonDefaultVariantKey,
+            size: "default",
+        },
+    }
+)
+
+export type ButtonVariantsProps = VariantProps<typeof buttonVariants>

package/src/components/atoms/Checkbox.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+import { cn } from "../../lib/utils"
+import type { CheckboxVariantKey } from "./generated/variant-keys"
+import { checkboxDefaultVariantKey } from "./generated/default-variant-keys"
+
+const checkboxStateClasses: Record<CheckboxVariantKey, string> = {
+    checked: "border-transparent bg-foreground text-primary-foreground text-xs font-semibold",
+    disabled: "bg-transparent disabled:bg-muted disabled:opacity-50",
+    unchecked: "bg-transparent",
+}
+
+export interface CheckboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    checked?: boolean
+    onCheckedChange?: (checked: boolean) => void
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+    ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
+        const checkboxState: CheckboxVariantKey = disabled
+            ? "disabled"
+            : checked
+                ? "checked"
+                : checkboxDefaultVariantKey
+
+        return (
+            <button
+                type="button"
+                role="checkbox"
+                aria-checked={checked}
+                onClick={() => onCheckedChange?.(!checked)}
+                ref={ref}
+                className={cn(
+                    "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[4px] border border-input bg-transparent ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed",
+                    checkboxStateClasses[checkboxState],
+                    className
+                )}
+                disabled={disabled}
+                {...props}
+            >
+                {checked && (
+                    <Check className="h-3 w-3" strokeWidth={3} />
+                )}
+            </button>
+        )
+    }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/src/components/atoms/Img.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Image as ImageIcon } from "lucide-react"
+import type { ImgVariantKey } from "./generated/variant-keys"
+import { imgDefaultVariantKey } from "./generated/default-variant-keys"
+
+const imgOpacityClasses: Record<ImgVariantKey, string> = {
+    error: "opacity-100",
+    loaded: "opacity-100",
+    loading: "opacity-0",
+}
+
+const imgVariantClasses: Record<ImgVariantKey, string> = {
+    error: "inline-flex items-center w-[256px] h-[256px] gap-2 rounded-lg text-xs font-normal",
+    loaded: "w-[256px] h-[256px] rounded-lg",
+    loading: "w-[256px] h-[256px] rounded-lg",
+}
+
+export interface ImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    fallback?: React.ReactNode
+    aspectRatio?: "square" | "video" | "auto" | "portrait" | "wide"
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down"
+    showSkeleton?: boolean
+}
+
+const Img = React.forwardRef<HTMLImageElement, ImgProps>(
+    ({ className, src, alt, fallback, aspectRatio = "auto", objectFit = "cover", showSkeleton = true, onLoad, onError, ...props }, ref) => {
+        const [status, setStatus] = React.useState<ImgVariantKey>(imgDefaultVariantKey)
+
+        const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+            setStatus("loaded")
+            onLoad?.(e)
+        }
+
+        const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+            setStatus("error")
+            onError?.(e)
+        }
+
+        // Reset status if src changes
+        React.useEffect(() => {
+            setStatus(imgDefaultVariantKey)
+        }, [src])
+
+        const aspectRatioClass = {
+            "square": "aspect-square",
+            "video": "aspect-video",
+            "portrait": "aspect-[3/4]",
+            "wide": "aspect-[21/9]",
+            "auto": "aspect-auto"
+        }[aspectRatio]
+
+        const objectFitClass = {
+            "cover": "object-cover",
+            "contain": "object-contain",
+            "fill": "object-fill",
+            "none": "object-none",
+            "scale-down": "object-scale-down"
+        }[objectFit]
+
+        return (
+            <div className={cn("relative overflow-hidden bg-secondary", imgVariantClasses[status], aspectRatioClass, className)}>
+                {showSkeleton && status === "loading" && (
+                    <div className="absolute inset-0 z-10 flex animate-pulse items-center justify-center bg-secondary">
+                        {/* Optional spinner or just pulse */}
+                        {/* <Loader2 className="w-6 h-6 text-muted-foreground animate-spin" /> */}
+                    </div>
+                )}
+
+                {status === "error" ? (
+                    <div className="absolute inset-0 inline-flex flex-col items-center justify-center bg-secondary p-4 text-center text-muted-foreground">
+                        {fallback || (
+                            <>
+                                <ImageIcon className="mb-2 h-8 w-8 opacity-80" />
+                                <span className="text-xs">Image not found</span>
+                            </>
+                        )}
+                    </div>
+                ) : (
+                    <img
+                        ref={ref}
+                        src={src}
+                        alt={alt}
+                        onLoad={handleLoad}
+                        onError={handleError}
+                        className={cn(
+                            "w-full h-full transition-opacity duration-300",
+                            objectFitClass,
+                            imgOpacityClasses[status]
+                        )}
+                        {...props}
+                    />
+                )}
+            </div>
+        )
+    }
+)
+Img.displayName = "Img"
+
+export { Img }

package/src/components/atoms/Input.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import type { InputVariantKey } from "./generated/variant-keys"
+import { inputDefaultVariantKey } from "./generated/default-variant-keys"
+
+const inputVariantClasses: Record<InputVariantKey, string> = {
+    default: "",
+    disabled: "disabled:bg-muted disabled:text-muted-foreground disabled:opacity-50",
+    placeholder: "placeholder:text-muted-foreground",
+}
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, disabled, ...props }, ref) => {
+        const inputState: InputVariantKey = disabled ? "disabled" : inputDefaultVariantKey
+
+        return (
+            <input
+                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",
+                    inputVariantClasses[inputState],
+                    inputVariantClasses.placeholder,
+                    className
+                )}
+                ref={ref}
+                suppressHydrationWarning
+                disabled={disabled}
+                {...props}
+            />
+        )
+    }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/components/atoms/Kbd.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface KbdProps extends React.HTMLAttributes<HTMLSpanElement> { }
+
+const Kbd = React.forwardRef<HTMLSpanElement, KbdProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <kbd
+                className={cn(
+                    "pointer-events-none inline-flex h-5 w-fit select-none items-center gap-1 rounded-[4px] border border-input bg-secondary py-1 px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100",
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Kbd.displayName = "Kbd"
+
+export { Kbd }

package/src/components/atoms/Label.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> { }
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+    ({ className, ...props }, ref) => (
+        <label
+            ref={ref}
+            className={cn(
+                "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Label.displayName = "Label"
+
+export { Label }

package/src/components/atoms/Progress.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number
+    max?: number
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+    ({ className, value = 0, max = 100, ...props }, ref) => {
+        const percentage = Math.min(100, Math.max(0, ((value || 0) / max) * 100))
+
+        return (
+            <div
+                ref={ref}
+                role="progressbar"
+                aria-valuemin={0}
+                aria-valuemax={max}
+                aria-valuenow={value}
+                className={cn(
+                    "relative h-4 w-[200px] overflow-hidden rounded-full bg-secondary",
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    className="h-full w-full flex-1 bg-foreground transition-all"
+                    style={{ transform: `translateX(-${100 - percentage}%)` }}
+                />
+            </div>
+        )
+    }
+)
+Progress.displayName = "Progress"
+
+export { Progress }

package/src/components/atoms/RadioGroup.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import type { RadioGroupVariantKey } from "./generated/variant-keys"
+import { radioGroupDefaultVariantKey } from "./generated/default-variant-keys"
+
+// Simple Context-less Radio for batch 1, or Context-based?
+// Let's go Simple but composable.
+// Actually standard standard is RadioGroup + RadioGroupItem.
+
+const RadioGroupContext = React.createContext<{
+    value?: string,
+    onValueChange?: (value: string) => void,
+    name?: string
+} | undefined>(undefined);
+
+const radioGroupItemStateClasses: Record<RadioGroupVariantKey, string> = {
+    checked: "border-foreground bg-transparent",
+    unchecked: "border-input bg-transparent",
+}
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+    name?: string
+}
+
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+    ({ className, value, onValueChange, defaultValue, name, children, ...props }, ref) => {
+        const [internalValue, setInternalValue] = React.useState(defaultValue)
+        const activeValue = value !== undefined ? value : internalValue
+
+        const handleValueChange = (v: string) => {
+            if (value === undefined) setInternalValue(v);
+            onValueChange?.(v);
+        }
+
+        return (
+            <RadioGroupContext.Provider value={{ value: activeValue, onValueChange: handleValueChange, name }}>
+                <div className={cn("grid gap-2", className)} ref={ref} {...props}>
+                    {children}
+                </div>
+            </RadioGroupContext.Provider>
+        )
+    }
+)
+RadioGroup.displayName = "RadioGroup"
+
+export interface RadioGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string
+}
+
+const RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+    ({ className, value, ...props }, ref) => {
+        const context = React.useContext(RadioGroupContext)
+        const checked = context?.value === value
+        const itemState: RadioGroupVariantKey = checked ? "checked" : radioGroupDefaultVariantKey
+
+        return (
+            <button
+                type="button"
+                role="radio"
+                aria-checked={checked}
+                onClick={() => context?.onValueChange?.(value)}
+                ref={ref}
+                className={cn(
+                    "aspect-square h-4 w-4 rounded-lg border text-foreground ring-offset-background focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    radioGroupItemStateClasses[itemState],
+                    className
+                )}
+                {...props}
+            >
+                {checked && (
+                    <div className="flex items-center justify-center">
+                        <div className="h-2.5 w-2.5 rounded-full bg-foreground" />
+                    </div>
+                )}
+            </button>
+        )
+    }
+)
+RadioGroupItem.displayName = "RadioGroupItem"
+
+export { RadioGroup, RadioGroupItem }

package/src/components/atoms/Select.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { ChevronDown } from "lucide-react"
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { }
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <div className="relative">
+                <select
+                    className={cn(
+                        "inline-flex h-10 w-[200px] appearance-none items-center justify-between rounded-lg border border-input bg-transparent px-3 py-2 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}
+                >
+                    {children}
+                </select>
+                <ChevronDown className="pointer-events-none absolute right-3 top-3 h-4 w-4 text-muted-foreground" />
+            </div>
+        )
+    }
+)
+Select.displayName = "Select"
+
+export { Select }

package/src/components/atoms/Separator.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import type { SeparatorVariantKey } from "./generated/variant-keys"
+import { separatorDefaultVariantKey } from "./generated/default-variant-keys"
+
+const separatorOrientationClasses: Record<SeparatorVariantKey, string> = {
+    horizontal: "w-[200px] h-[1px]",
+    vertical: "w-[1px] h-6",
+}
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: SeparatorVariantKey
+    className?: string
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+    ({ className, orientation = separatorDefaultVariantKey, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "shrink-0 bg-border",
+                separatorOrientationClasses[orientation],
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Separator.displayName = "Separator"
+
+export { Separator }

package/src/components/atoms/Skeleton.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const skeletonVariants = cva(
+    "animate-pulse rounded-md bg-muted",
+    {
+        variants: {
+            shape: {
+                rectangle: "h-4 w-[200px]",
+                circle: "h-10 w-10 rounded-full",
+                text: "h-3.5 w-[160px] rounded-full",
+            },
+        },
+        defaultVariants: {
+            shape: "rectangle",
+        },
+    }
+)
+
+export interface SkeletonProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof skeletonVariants> {}
+
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+    ({ className, shape, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(skeletonVariants({ shape }), className)}
+            {...props}
+        />
+    )
+)
+Skeleton.displayName = "Skeleton"
+
+export { Skeleton, skeletonVariants }

package/src/components/atoms/Slider.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+    ({ className, ...props }, ref) => (
+        <div className="relative flex w-[200px] touch-none select-none items-center">
+            <input
+                type="range"
+                ref={ref}
+                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
+                )}
+                {...props}
+            />
+        </div>
+    )
+)
+Slider.displayName = "Slider"
+
+export { Slider }