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

package/src/components/molecules/Carousel.tsx

@@ -1,261 +0,0 @@
-"use client"
-
-import * as React from "react"
-import useEmblaCarousel, {
-    type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-import { Button } from "../atoms/Button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-    opts?: CarouselOptions
-    plugins?: CarouselPlugin
-    orientation?: "horizontal" | "vertical"
-    setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-    carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-    api: CarouselApi
-    scrollPrev: () => void
-    scrollNext: () => void
-    canScrollPrev: boolean
-    canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-    const context = React.useContext(CarouselContext)
-
-    if (!context) {
-        throw new Error("useCarousel must be used within a <Carousel />")
-    }
-
-    return context
-}
-
-const Carousel = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-    (
-        {
-            orientation = "horizontal",
-            opts,
-            setApi,
-            plugins,
-            className,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        const [carouselRef, api] = useEmblaCarousel(
-            {
-                ...opts,
-                axis: orientation === "horizontal" ? "x" : "y",
-            },
-            plugins
-        )
-        const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-        const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-        const onSelect = React.useCallback((api: CarouselApi) => {
-            if (!api) {
-                return
-            }
-
-            setCanScrollPrev(api.canScrollPrev())
-            setCanScrollNext(api.canScrollNext())
-        }, [])
-
-        const scrollPrev = React.useCallback(() => {
-            api?.scrollPrev()
-        }, [api])
-
-        const scrollNext = React.useCallback(() => {
-            api?.scrollNext()
-        }, [api])
-
-        const handleKeyDown = React.useCallback(
-            (event: React.KeyboardEvent<HTMLDivElement>) => {
-                if (event.key === "ArrowLeft") {
-                    event.preventDefault()
-                    scrollPrev()
-                } else if (event.key === "ArrowRight") {
-                    event.preventDefault()
-                    scrollNext()
-                }
-            },
-            [scrollPrev, scrollNext]
-        )
-
-        React.useEffect(() => {
-            if (!api || !setApi) {
-                return
-            }
-
-            setApi(api)
-        }, [api, setApi])
-
-        React.useEffect(() => {
-            if (!api) {
-                return
-            }
-
-            onSelect(api)
-            api.on("reInit", onSelect)
-            api.on("select", onSelect)
-
-            return () => {
-                api?.off("select", onSelect)
-            }
-        }, [api, onSelect])
-
-        return (
-            <CarouselContext.Provider
-                value={{
-                    carouselRef,
-                    api: api,
-                    opts,
-                    orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-                    scrollPrev,
-                    scrollNext,
-                    canScrollPrev,
-                    canScrollNext,
-                }}
-            >
-                <div
-                    ref={ref}
-                    onKeyDown={handleKeyDown}
-                    className={cn("relative w-[640px]", className)}
-                    role="region"
-                    aria-roledescription="carousel"
-                    {...props}
-                >
-                    {children}
-                </div>
-            </CarouselContext.Provider>
-        )
-    }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel()
-
-    return (
-        <div ref={carouselRef} className="overflow-hidden">
-            <div
-                ref={ref}
-                className={cn(
-                    "flex",
-                    orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-                    className
-                )}
-                {...props}
-            />
-        </div>
-    )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-    const { orientation } = useCarousel()
-
-    return (
-        <div
-            ref={ref}
-            role="group"
-            aria-roledescription="slide"
-            className={cn(
-                "min-w-0 shrink-0 grow-0 basis-full",
-                orientation === "horizontal" ? "pl-4" : "pt-4",
-                className
-            )}
-            {...props}
-        />
-    )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-    HTMLButtonElement,
-    React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-    return (
-        <Button
-            ref={ref}
-            variant={variant}
-            size={size}
-            className={cn(
-                "absolute h-8 w-8 rounded-full",
-                orientation === "horizontal"
-                    ? "-left-12 top-1/2 -translate-y-1/2"
-                    : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-                className
-            )}
-            disabled={!canScrollPrev}
-            onClick={scrollPrev}
-            {...props}
-        >
-            <ArrowLeft className="h-4 w-4" />
-            <span className="sr-only">Previous slide</span>
-        </Button>
-    )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-    HTMLButtonElement,
-    React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-    return (
-        <Button
-            ref={ref}
-            variant={variant}
-            size={size}
-            className={cn(
-                "absolute h-8 w-8 rounded-full",
-                orientation === "horizontal"
-                    ? "-right-12 top-1/2 -translate-y-1/2"
-                    : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-                className
-            )}
-            disabled={!canScrollNext}
-            onClick={scrollNext}
-            {...props}
-        >
-            <ArrowRight className="h-4 w-4" />
-            <span className="sr-only">Next slide</span>
-        </Button>
-    )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-    type CarouselApi,
-    Carousel,
-    CarouselContent,
-    CarouselItem,
-    CarouselPrevious,
-    CarouselNext,
-}

package/src/components/molecules/Command.tsx

@@ -1,152 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Search } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-const Command = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive
-        ref={ref}
-        className={cn(
-            "flex h-full w-[320px] w-full flex-col overflow-hidden rounded-md border bg-popover text-popover-foreground",
-            className
-        )}
-        {...props}
-    />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandDialog = ({ children, ...props }: React.ComponentProps<typeof CommandPrimitive.Dialog>) => {
-    return (
-        <CommandPrimitive.Dialog
-            {...props}
-            className={cn(
-                "fixed inset-0 z-50 flex items-start justify-center bg-overlay/80 p-4 pt-[10%]",
-                props.className
-            )}
-        >
-            <DialogPrimitive.Title className="hidden">Command Menu</DialogPrimitive.Title>
-            <div className="w-full max-w-lg overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-lg">
-                {children}
-            </div>
-        </CommandPrimitive.Dialog>
-    )
-}
-
-const CommandInput = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Input>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-    <div className="flex items-center border-b px-3 py-2" cmdk-input-wrapper="">
-        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-        <CommandPrimitive.Input
-            ref={ref}
-            className={cn(
-                "flex h-10 w-full rounded-md bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                className
-            )}
-            {...props}
-        />
-    </div>
-))
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.List
-        ref={ref}
-        className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-        {...props}
-    />
-))
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Empty>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-    <CommandPrimitive.Empty
-        ref={ref}
-        className="py-6 text-center text-sm"
-        {...props}
-    />
-))
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Group>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.Group
-        ref={ref}
-        className={cn(
-            "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground",
-            className
-        )}
-        {...props}
-    />
-))
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.Separator
-        ref={ref}
-        className={cn("-mx-1 h-px bg-border", className)}
-        {...props}
-    />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.Item
-        ref={ref}
-        className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-            className
-        )}
-        {...props}
-    />
-))
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-    return (
-        <span
-            className={cn(
-                "ml-auto text-xs tracking-widest text-muted-foreground",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-    Command,
-    CommandDialog,
-    CommandInput,
-    CommandList,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandShortcut,
-    CommandSeparator,
-}

package/src/components/molecules/FilterButton.tsx

@@ -1,133 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Filter as FilterIcon, Check } from "lucide-react"
-import { Button, ButtonProps } from "../atoms/Button"
-import { Popover, PopoverTrigger, PopoverContent } from "./Popover"
-import { Command, CommandGroup, CommandItem, CommandList } from "./Command"
-import { cn } from "../../lib/utils"
-import { Badge } from "../atoms/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
-    options: FilterOption[]
-    selectedValues: Set<string>
-    onFilterChange: (values: Set<string>) => void
-}
-
-const FilterButton = React.forwardRef<HTMLButtonElement, FilterButtonProps>(
-    ({ className, title = "Filter", options, selectedValues, onFilterChange, variant = "outline", size = "sm", ...props }, ref) => {
-        const [isOpen, setIsOpen] = React.useState(false)
-
-        const triggerStyles: Record<FilterButtonVariantKey, string> = {
-            default: "flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md border border-dashed",
-            popover: "flex flex-col w-[200px] rounded-lg border border-primary/40 bg-primary/5 text-primary",
-            selected: "flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md border border-primary bg-primary/10 text-primary",
-        }
-
-        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)
-        }
-
-        return (
-            <Popover open={isOpen} onOpenChange={setIsOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        ref={ref}
-                        variant={variant}
-                        size={size}
-                        className={cn(triggerStyles[triggerVariant], className)}
-                        {...props}
-                    >
-                        <FilterIcon className="h-4 w-4" />
-                        <span>{title}</span>
-                        {selectedValues.size > 0 && (
-                            <>
-                                <div className="hidden space-x-1 lg:flex bg-transparent">
-                                    {selectedValues.size > 2 ? (
-                                        <Badge variant="secondary" className="rounded-sm px-1 font-normal">
-                                            {selectedValues.size} selected
-                                        </Badge>
-                                    ) : (
-                                        options
-                                            .filter((option) => selectedValues.has(option.value))
-                                            .map((option) => (
-                                                <Badge
-                                                    key={option.value}
-                                                    variant="secondary"
-                                                    className="rounded-sm px-1 font-normal text-[10px]"
-                                                >
-                                                    {option.label}
-                                                </Badge>
-                                            ))
-                                    )}
-                                </div>
-                            </>
-                        )}
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0" align="start">
-                    <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={cn("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"
-                                        >
-                                            Clear filters
-                                        </CommandItem>
-                                    </CommandGroup>
-                                </>
-                            )}
-                        </CommandList>
-                    </Command>
-                </PopoverContent>
-            </Popover>
-        )
-    }
-)
-FilterButton.displayName = "FilterButton"
-
-export { FilterButton }

package/src/components/molecules/HoverCard.tsx

@@ -1,29 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "../../lib/utils"
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-    React.ElementRef<typeof HoverCardPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-    <HoverCardPrimitive.Content
-        ref={ref}
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-            "z-50 flex flex-col items-center w-64 w-[256px] gap-2 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            className
-        )}
-        {...props}
-    />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src/components/molecules/Modal.tsx

@@ -1,66 +0,0 @@
-"use client"
-import React, { useEffect, useRef } from 'react';
-import { X } from 'lucide-react';
-import { cn } from '../../lib/utils';
-
-export interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title: string;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-}
-
-export function Modal({ isOpen, onClose, title, children, footer }: ModalProps) {
-    const modalRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') onClose();
-        };
-
-        if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
-            document.body.style.overflow = 'hidden';
-        }
-
-        return () => {
-            document.removeEventListener('keydown', handleEscape);
-            document.body.style.overflow = 'unset';
-        };
-    }, [isOpen, onClose]);
-
-    if (!isOpen) return null;
-
-    const content = (
-        <div data-prevent-deselect="true" className="fixed inset-0 z-[9999] flex items-center justify-center bg-overlay/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={(e) => e.stopPropagation()}>
-            <div
-                ref={modalRef}
-                onClick={(e) => e.stopPropagation()}
-                className="flex flex-col w-[448px] bg-card border border-border rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden animate-in zoom-in-95 duration-200"
-            >
-                <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-                    <h3 className="font-semibold text-foreground">{title}</h3>
-                    <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
-                        <X size={18} />
-                    </button>
-                </div>
-                <div className="p-4">
-                    {children}
-                </div>
-                {footer && (
-                    <div className="px-4 py-3 bg-muted/50 border-t border-border flex justify-end gap-2">
-                        {footer}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-
-    // Use Portal if available
-    if (typeof document !== 'undefined') {
-        const { createPortal } = require('react-dom');
-        return createPortal(content, document.body);
-    }
-    return content;
-}

package/src/components/molecules/Popover.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "../../lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-    React.ElementRef<typeof PopoverPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-    <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-            ref={ref}
-            align={align}
-            sideOffset={sideOffset}
-            className={cn(
-                "z-50 flex flex-col w-72 w-[288px] rounded-md rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-                className
-            )}
-            {...props}
-        />
-    </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }