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

package/src/components/navigation/DocumentPager.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from "react"
+import { IconChevronLeft as ChevronLeft, IconChevronRight as ChevronRight } from "@tabler/icons-react";
+import { cn } from "../../lib/utils"
+
+export interface DocumentPagerItem {
+    href: string
+    directionLabel: React.ReactNode
+    title: React.ReactNode
+    subtitle?: React.ReactNode
+    description?: React.ReactNode
+    categoryLabel?: React.ReactNode
+    thumbnailSrc?: string
+    thumbnailAlt?: string
+    thumbnailFallback?: React.ReactNode
+    ariaLabel?: string
+}
+
+export interface DocumentPagerLinkProps {
+    href: string
+    className?: string
+    "aria-label"?: string
+    children: React.ReactNode
+}
+
+export interface DocumentPagerProps extends React.HTMLAttributes<HTMLElement> {
+    previous?: DocumentPagerItem | null
+    next?: DocumentPagerItem | null
+    linkComponent?: React.ElementType<DocumentPagerLinkProps>
+}
+
+function DocumentPagerThumb({
+    src,
+    alt,
+    fallback,
+}: {
+    src?: string
+    alt?: string
+    fallback?: React.ReactNode
+}) {
+    const [errored, setErrored] = React.useState(false)
+
+    if (!src && !errored) return null
+
+    return (
+        <div className="relative h-20 w-24 shrink-0 overflow-hidden rounded-md border border-border/70 bg-muted/40 p-1.5 sm:w-28">
+            {src && !errored ? (
+                /* eslint-disable-next-line @next/next/no-img-element */
+                <img
+                    src={src}
+                    alt={alt ?? ""}
+                    onError={() => setErrored(true)}
+                    loading="lazy"
+                    decoding="async"
+                    className="h-full w-full rounded-[4px] object-cover object-top shadow-sm"
+                />
+            ) : (
+                <div className="grid h-full w-full place-items-center rounded-[4px] bg-muted text-center text-[10px] leading-tight text-muted-foreground">
+                    {fallback ?? "Preview"}
+                </div>
+            )}
+        </div>
+    )
+}
+
+function DocumentPagerCard({
+    item,
+    direction,
+    LinkComponent,
+}: {
+    item: DocumentPagerItem
+    direction: "previous" | "next"
+    LinkComponent: React.ElementType<DocumentPagerLinkProps>
+}) {
+    const ariaLabel =
+        item.ariaLabel ??
+        `${typeof item.directionLabel === "string" ? item.directionLabel : direction}: ${
+            typeof item.title === "string" ? item.title : ""
+        }`
+
+    return (
+        <LinkComponent
+            href={item.href}
+            className="group block h-full rounded-md border border-border/70 bg-background p-3 transition-colors hover:border-primary-border hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            aria-label={ariaLabel}
+        >
+            <div
+                className={cn(
+                    "mb-2.5 flex items-center",
+                    direction === "next" ? "justify-end" : "justify-start"
+                )}
+            >
+                <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-muted-foreground transition-colors group-hover:text-primary">
+                    {direction === "previous" ? <ChevronLeft className="h-4 w-4" /> : null}
+                    {item.directionLabel}
+                    {direction === "next" ? <ChevronRight className="h-4 w-4" /> : null}
+                </span>
+            </div>
+
+            <div className="flex min-w-0 gap-3">
+                <DocumentPagerThumb
+                    src={item.thumbnailSrc}
+                    alt={item.thumbnailAlt}
+                    fallback={item.thumbnailFallback}
+                />
+                <div className="min-w-0 flex-1 space-y-2">
+                    <div className="flex min-w-0 flex-col items-start gap-1.5">
+                        <span className="min-w-0 max-w-full space-y-0.5 text-sm font-semibold tracking-tight transition-colors group-hover:text-primary">
+                            <span className="block break-words leading-snug">{item.title}</span>
+                            {item.subtitle ? (
+                                <span className="block break-words text-[10px] font-normal leading-snug text-muted-foreground">
+                                    {item.subtitle}
+                                </span>
+                            ) : null}
+                        </span>
+                        {item.categoryLabel ? (
+                            <span className="inline-flex min-h-5 max-w-full shrink-0 items-center rounded-full border border-border/60 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                                {item.categoryLabel}
+                            </span>
+                        ) : null}
+                    </div>
+                    {item.description ? (
+                        <p className="line-clamp-3 text-xs leading-relaxed text-muted-foreground">
+                            {item.description}
+                        </p>
+                    ) : null}
+                </div>
+            </div>
+        </LinkComponent>
+    )
+}
+
+const DocumentPager = React.forwardRef<HTMLElement, DocumentPagerProps>(
+    ({ previous, next, linkComponent, className, ...props }, ref) => {
+        const LinkComponent = linkComponent ?? "a"
+
+        if (!previous && !next) return null
+
+        return (
+            <nav
+                ref={ref}
+                className={cn(
+                    "grid w-full gap-3 border-t border-border/60 px-0 pb-0 pt-5 xl:grid-cols-2",
+                    className
+                )}
+                {...props}
+            >
+                {previous ? (
+                    <DocumentPagerCard
+                        item={previous}
+                        direction="previous"
+                        LinkComponent={LinkComponent}
+                    />
+                ) : (
+                    <div className="hidden md:block" aria-hidden="true" />
+                )}
+                {next ? (
+                    <DocumentPagerCard
+                        item={next}
+                        direction="next"
+                        LinkComponent={LinkComponent}
+                    />
+                ) : null}
+            </nav>
+        )
+    }
+)
+DocumentPager.displayName = "DocumentPager"
+
+export { DocumentPager }

package/src/components/navigation/Footer.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Footer = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => (
+    <footer
+        ref={ref}
+        className={cn(
+            "flex w-full flex-col gap-6 border-t border-border bg-background px-6 py-8",
+            className
+        )}
+        {...props}
+    />
+))
+Footer.displayName = "Footer"
+
+const FooterColumns = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4", className)}
+        {...props}
+    />
+))
+FooterColumns.displayName = "FooterColumns"
+
+interface FooterSectionProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode
+}
+
+const FooterSection = React.forwardRef<HTMLDivElement, FooterSectionProps>(
+    ({ className, title, children, ...props }, ref) => (
+        <div ref={ref} className={cn("flex flex-col gap-2", className)} {...props}>
+            {title ? (
+                <p className="text-sm font-semibold text-foreground">{title}</p>
+            ) : null}
+            {children}
+        </div>
+    )
+)
+FooterSection.displayName = "FooterSection"
+
+const FooterLink = React.forwardRef<
+    HTMLAnchorElement,
+    React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(({ className, ...props }, ref) => (
+    <a
+        ref={ref}
+        className={cn(
+            "text-sm text-muted-foreground transition-colors hover:text-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+FooterLink.displayName = "FooterLink"
+
+const FooterBrand = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex flex-col gap-2", className)}
+        {...props}
+    />
+))
+FooterBrand.displayName = "FooterBrand"
+
+const FooterCopyright = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("border-t border-border pt-4 text-xs text-muted-foreground", className)}
+        {...props}
+    />
+))
+FooterCopyright.displayName = "FooterCopyright"
+
+export { Footer, FooterColumns, FooterSection, FooterLink, FooterBrand, FooterCopyright }

package/src/components/navigation/Header.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Header = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => (
+    <header
+        ref={ref}
+        className={cn(
+            "flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-3 border-b border-border bg-background px-4 py-3 sm:px-6",
+            className
+        )}
+        {...props}
+    />
+))
+Header.displayName = "Header"
+
+const HeaderBrand = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex min-w-0 shrink-0 items-center gap-2", className)}
+        {...props}
+    />
+))
+HeaderBrand.displayName = "HeaderBrand"
+
+const HeaderNav = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => (
+    <nav
+        ref={ref}
+        className={cn(
+            "order-last flex w-full min-w-0 items-center gap-4 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:order-none sm:w-auto",
+            className
+        )}
+        {...props}
+    />
+))
+HeaderNav.displayName = "HeaderNav"
+
+interface HeaderNavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    active?: boolean
+}
+
+const HeaderNavLink = React.forwardRef<HTMLAnchorElement, HeaderNavLinkProps>(
+    ({ className, active, ...props }, ref) => (
+        <a
+            ref={ref}
+            className={cn(
+                "whitespace-nowrap text-sm transition-colors hover:text-foreground",
+                active ? "font-medium text-foreground" : "text-muted-foreground",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+HeaderNavLink.displayName = "HeaderNavLink"
+
+const HeaderActions = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("ml-auto flex shrink-0 items-center gap-2", className)}
+        {...props}
+    />
+))
+HeaderActions.displayName = "HeaderActions"
+
+export { Header, HeaderBrand, HeaderNav, HeaderNavLink, HeaderActions }

package/src/components/{molecules → navigation}/Menubar.tsx

@@ -2,9 +2,10 @@
 
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { IconCheck as Check, IconChevronRight as ChevronRight, IconCircle as Circle } from "@tabler/icons-react";
 
 import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
 
 const Menubar = React.forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Root>,
@@ -98,18 +99,50 @@ const MenubarItem = React.forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Item>,
     React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
         inset?: boolean
+        disabledReason?: React.ReactNode
+        disabledReasonLabel?: string
+        disabledReasonPortalContainer?: HTMLElement | null
     }
->(({ className, inset, ...props }, ref) => (
-    <MenubarPrimitive.Item
-        ref={ref}
-        className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-            inset && "pl-8",
-            className
-        )}
-        {...props}
-    />
-))
+>(({ className, inset, disabledReason, disabledReasonLabel, disabledReasonPortalContainer, disabled, onSelect, ...props }, ref) => {
+    const item = (
+        <MenubarPrimitive.Item
+            ref={ref}
+            disabled={disabled}
+            onSelect={(event) => {
+                if (disabled) {
+                    event.preventDefault()
+                    return
+                }
+                onSelect?.(event)
+            }}
+            className={cn(
+                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+                inset && "pl-8",
+                className
+            )}
+            {...props}
+        />
+    )
+
+    if (!disabled || !disabledReason) return item
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <span
+                    className="block w-full"
+                    tabIndex={0}
+                    aria-label={disabledReasonLabel ?? (typeof disabledReason === "string" ? disabledReason : undefined)}
+                >
+                    {item}
+                </span>
+            </TooltipTrigger>
+            <TooltipContent portalContainer={disabledReasonPortalContainer} className="max-w-64 text-left">
+                {disabledReason}
+            </TooltipContent>
+        </Tooltip>
+    )
+})
 MenubarItem.displayName = MenubarPrimitive.Item.displayName
 
 const MenubarCheckboxItem = React.forwardRef<

package/src/components/navigation/NavigationMenu.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { IconChevronDown as ChevronDown } from "@tabler/icons-react";
+import { cva } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const NavigationMenu = React.forwardRef<
+    React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+    <NavigationMenuPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative z-10 flex max-w-max flex-1 items-center justify-center",
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <NavigationMenuViewport />
+    </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+    React.ElementRef<typeof NavigationMenuPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <NavigationMenuPrimitive.List
+        ref={ref}
+        className={cn(
+            "group flex flex-1 list-none items-center justify-center space-x-1",
+            className
+        )}
+        {...props}
+    />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+export const navigationMenuTriggerStyle = cva(
+    "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+    React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <NavigationMenuPrimitive.Trigger
+        ref={ref}
+        className={cn(navigationMenuTriggerStyle(), "group", className)}
+        {...props}
+    >
+        {children}{" "}
+        <ChevronDown
+            className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+            aria-hidden
+        />
+    </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+    React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <NavigationMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+            "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+            className
+        )}
+        {...props}
+    />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+    React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+    <div className={cn("absolute left-1/2 top-full flex -translate-x-1/2 justify-center")}>
+        <NavigationMenuPrimitive.Viewport
+            className={cn(
+                "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-[min(var(--radix-navigation-menu-viewport-width),calc(100vw-2rem))] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
+                className
+            )}
+            ref={ref}
+            {...props}
+        />
+    </div>
+))
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+    React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+    <NavigationMenuPrimitive.Indicator
+        ref={ref}
+        className={cn(
+            "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+            className
+        )}
+        {...props}
+    >
+        <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+    NavigationMenuPrimitive.Indicator.displayName
+
+export {
+    NavigationMenu,
+    NavigationMenuList,
+    NavigationMenuItem,
+    NavigationMenuContent,
+    NavigationMenuTrigger,
+    NavigationMenuLink,
+    NavigationMenuIndicator,
+    NavigationMenuViewport,
+}

package/src/components/navigation/PageAside.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../display/Accordion"
+import { RightRail } from "./RightRail"
+
+export interface PageAsideProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React.ReactNode
+    renderAside: () => React.ReactNode
+    children: React.ReactNode
+    asideLabel?: string
+    contentLabel?: string
+    mobileDescription?: React.ReactNode
+    defaultOpen?: boolean
+    width?: string
+    contentClassName?: string
+    mobileClassName?: string
+    railClassName?: string
+    railContentClassName?: string
+    openLabel?: string
+    closeLabel?: string
+}
+
+const PageAside = React.forwardRef<HTMLDivElement, PageAsideProps>(
+    (
+        {
+            className,
+            title,
+            renderAside,
+            children,
+            asideLabel,
+            contentLabel,
+            mobileDescription,
+            defaultOpen = true,
+            width = "w-72",
+            contentClassName,
+            mobileClassName,
+            railClassName,
+            railContentClassName,
+            openLabel = "Open",
+            closeLabel = "Close",
+            ...props
+        },
+        ref
+    ) => {
+        const label = asideLabel ?? (typeof title === "string" ? title : undefined)
+
+        return (
+            <div ref={ref} className={cn("flex min-h-0 w-full flex-col lg:flex-row", className)} {...props}>
+                <div className={cn("min-w-0 flex-1", contentClassName)} aria-label={contentLabel}>
+                    <aside className={cn("mb-4 rounded-md border bg-background p-3 lg:hidden", mobileClassName)} aria-label={label}>
+                        <Accordion type="single" collapsible defaultValue={defaultOpen ? "page-aside" : undefined} className="w-full border-0">
+                            <AccordionItem value="page-aside" className="border-0">
+                                <AccordionTrigger className="px-0 py-0 text-left hover:no-underline" openLabel={openLabel} closeLabel={closeLabel}>
+                                    <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                        {title}
+                                    </span>
+                                </AccordionTrigger>
+                                <AccordionContent className="px-0 pb-0 pt-3">
+                                    <div className="space-y-3">
+                                        {mobileDescription ? (
+                                            <p className="text-xs text-muted-foreground">{mobileDescription}</p>
+                                        ) : null}
+                                        {renderAside()}
+                                    </div>
+                                </AccordionContent>
+                            </AccordionItem>
+                        </Accordion>
+                    </aside>
+                    {children}
+                </div>
+                <RightRail width={width} className={cn("hidden bg-background lg:flex", railClassName)} aria-label={label}>
+                    <div className={cn("space-y-5 p-4", railContentClassName)}>
+                        {renderAside()}
+                    </div>
+                </RightRail>
+            </div>
+        )
+    }
+)
+PageAside.displayName = "PageAside"
+
+export { PageAside }