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

package/src/components/layout/ScrollArea.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../../lib/utils"
+
+export interface ScrollAreaProps
+    extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    viewportClassName?: string
+    scrollbarClassName?: string
+    thumbClassName?: string
+    scrollbarOrientation?: "vertical" | "horizontal" | "both"
+}
+
+const ScrollArea = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    ScrollAreaProps
+>(({ className, viewportClassName, scrollbarClassName, thumbClassName, scrollbarOrientation = "vertical", children, ...props }, ref) => (
+    <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn("relative overflow-hidden flex min-h-0 min-w-0 flex-col", className)}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Viewport
+            className={cn(
+                "h-full w-full rounded-[inherit] [&>div]:!block [&>div]:!min-w-0 [&>div]:!w-full",
+                viewportClassName
+            )}
+        >
+            {children}
+        </ScrollAreaPrimitive.Viewport>
+        {(scrollbarOrientation === "vertical" || scrollbarOrientation === "both") && (
+            <ScrollBar className={scrollbarClassName} thumbClassName={thumbClassName} />
+        )}
+        {(scrollbarOrientation === "horizontal" || scrollbarOrientation === "both") && (
+            <ScrollBar orientation="horizontal" className={scrollbarClassName} thumbClassName={thumbClassName} />
+        )}
+        <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+export interface ScrollBarProps
+    extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar> {
+    thumbClassName?: string
+}
+
+const ScrollBar = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,
+    ScrollBarProps
+>(({ className, thumbClassName, orientation = "vertical", ...props }, ref) => (
+    <ScrollAreaPrimitive.Scrollbar
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+            "flex touch-none select-none transition-colors",
+            orientation === "vertical" &&
+            "h-full w-2.5 border-l border-l-transparent p-[1px]",
+            orientation === "horizontal" &&
+            "h-2.5 border-t border-t-transparent p-[1px]",
+            className
+        )}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Thumb className={cn("relative flex-1 rounded-full bg-border", thumbClassName)} />
+    </ScrollAreaPrimitive.Scrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/{organisms → layout}/SpatialCanvas.tsx

@@ -1,27 +1,31 @@
 import React from 'react';
 import { cn } from '../../lib/utils';
 
-interface SpatialCanvasProps {
+interface SpatialCanvasProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    className?: string;
     gridSize?: number;
 }
 
-export const SpatialCanvas: React.FC<SpatialCanvasProps> = ({
+export const SpatialCanvas = React.forwardRef<HTMLDivElement, SpatialCanvasProps>(({
     children,
     className,
-    gridSize = 20
-}) => {
+    gridSize = 20,
+    style,
+    ...props
+}, ref) => {
     return (
         <div
+            ref={ref}
             className={cn(
-                "relative flex flex-col w-[640px] h-[360px] w-full h-full overflow-hidden bg-muted/50 select-none",
+                "relative flex h-full min-h-0 w-full min-w-0 select-none flex-col overflow-hidden bg-muted/50",
                 className
             )}
             style={{
+                ...style,
                 backgroundImage: `radial-gradient(circle, hsl(var(--foreground) / 0.08) 1px, transparent 1px)`,
                 backgroundSize: `${gridSize}px ${gridSize}px`
             }}
+            {...props}
         >
             <div className="absolute inset-0 pointer-events-none dark:opacity-20 opacity-5"
                 style={{
@@ -33,4 +37,5 @@ export const SpatialCanvas: React.FC<SpatialCanvasProps> = ({
             {children}
         </div>
     );
-};
+});
+SpatialCanvas.displayName = 'SpatialCanvas';

package/src/components/layout/VStack.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const GAP_MAP = {
+    0: "gap-0",
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    5: "gap-5",
+    6: "gap-6",
+    8: "gap-8",
+    10: "gap-10",
+    12: "gap-12",
+} as const
+
+const ALIGN_MAP = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+} as const
+
+const JUSTIFY_MAP = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly",
+} as const
+
+export interface VStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    gap?: keyof typeof GAP_MAP
+    align?: keyof typeof ALIGN_MAP
+    justify?: keyof typeof JUSTIFY_MAP
+    inline?: boolean
+}
+
+const VStack = React.forwardRef<HTMLDivElement, VStackProps>(
+    (
+        {
+            className,
+            gap = 2,
+            align = "stretch",
+            justify = "start",
+            inline = false,
+            ...props
+        },
+        ref
+    ) => (
+        <div
+            ref={ref}
+            className={cn(
+                inline ? "inline-flex" : "flex",
+                "flex-col",
+                GAP_MAP[gap],
+                ALIGN_MAP[align],
+                JUSTIFY_MAP[justify],
+                className
+            )}
+            {...props}
+        />
+    )
+)
+VStack.displayName = "VStack"
+
+export { VStack }

package/src/components/layout/generated/default-variant-keys.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { AssetInspectorPanelVariantKey, CollapsiblePanelToggleVariantKey, DeviceFrameVariantKey, MarqueeFrameVariantKey } from "./variant-keys";
+
+export const assetInspectorPanelDefaultVariantKey: AssetInspectorPanelVariantKey = "default";
+export const collapsiblePanelToggleDefaultVariantKey: CollapsiblePanelToggleVariantKey = "left";
+export const deviceFrameDefaultVariantKey: DeviceFrameVariantKey = "default";
+export const marqueeFrameDefaultVariantKey: MarqueeFrameVariantKey = "default";
+
+export const layoutDefaultVariantKeys = {
+  assetInspectorPanel: assetInspectorPanelDefaultVariantKey,
+  collapsiblePanelToggle: collapsiblePanelToggleDefaultVariantKey,
+  deviceFrame: deviceFrameDefaultVariantKey,
+  marqueeFrame: marqueeFrameDefaultVariantKey,
+} as const;

package/src/components/layout/generated/variant-keys.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+export const assetInspectorPanelVariantKeys = ["compact", "default"] as const;
+export type AssetInspectorPanelVariantKey = (typeof assetInspectorPanelVariantKeys)[number];
+
+export const collapsiblePanelToggleVariantKeys = ["bottom", "left", "right", "top"] as const;
+export type CollapsiblePanelToggleVariantKey = (typeof collapsiblePanelToggleVariantKeys)[number];
+
+export const deviceFrameVariantKeys = ["default", "windows11"] as const;
+export type DeviceFrameVariantKey = (typeof deviceFrameVariantKeys)[number];
+
+export const marqueeFrameVariantKeys = ["default", "desktop", "mobile", "tablet"] as const;
+export type MarqueeFrameVariantKey = (typeof marqueeFrameVariantKeys)[number];
+
+export const layoutVariantKeys = {
+  assetInspectorPanel: assetInspectorPanelVariantKeys,
+  collapsiblePanelToggle: collapsiblePanelToggleVariantKeys,
+  deviceFrame: deviceFrameVariantKeys,
+  marqueeFrame: marqueeFrameVariantKeys,
+} as const;

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { IconChevronRight as ChevronRight, IconDots as MoreHorizontal } from "@tabler/icons-react";
 
 import { cn } from "../../lib/utils"
 
@@ -90,8 +90,9 @@ BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 
 const BreadcrumbEllipsis = ({
     className,
+    label = "More",
     ...props
-}: React.ComponentProps<"span">) => (
+}: React.ComponentProps<"span"> & { label?: string }) => (
     <span
         role="presentation"
         aria-hidden="true"
@@ -99,10 +100,10 @@ const BreadcrumbEllipsis = ({
         {...props}
     >
         <MoreHorizontal className="h-4 w-4" />
-        <span className="sr-only">More</span>
+        <span className="sr-only">{label}</span>
     </span>
 )
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
 
 export {
     Breadcrumb,

package/src/components/navigation/Command.tsx

@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { IconSearch as Search, IconX as X } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+
+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
+
+type CommandDialogProps = React.ComponentProps<typeof CommandPrimitive.Dialog> & {
+    dialogTitle?: React.ReactNode
+    portalContainer?: HTMLElement | null
+}
+
+const CommandDialog = ({
+    children,
+    dialogTitle = "Command Menu",
+    portalContainer,
+    container,
+    className,
+    overlayClassName,
+    contentClassName,
+    ...props
+}: CommandDialogProps) => {
+    const resolvedContainer = portalContainer ?? container
+
+    return (
+        <CommandPrimitive.Dialog
+            {...props}
+            container={resolvedContainer ?? undefined}
+            overlayClassName={cn(
+                "fixed inset-0 z-50 bg-overlay/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                resolvedContainer && "absolute",
+                overlayClassName
+            )}
+            contentClassName={cn(
+                "fixed left-1/2 top-[10%] z-50 w-[calc(100%-2rem)] max-w-[640px] -translate-x-1/2 overflow-hidden rounded-lg bg-popover text-left text-popover-foreground shadow-lg 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",
+                resolvedContainer && "absolute",
+                contentClassName
+            )}
+            className={cn("flex h-full w-full flex-col overflow-hidden rounded-lg border bg-popover text-left text-popover-foreground", className)}
+        >
+            <DialogPrimitive.Title className="sr-only">{dialogTitle}</DialogPrimitive.Title>
+            {children}
+        </CommandPrimitive.Dialog>
+    )
+}
+
+type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    clearable?: boolean
+    clearLabel?: string
+}
+
+function setNativeInputValue(input: HTMLInputElement, value: string) {
+    const valueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+    )?.set
+    valueSetter?.call(input, value)
+    input.dispatchEvent(new Event("input", { bubbles: true }))
+}
+
+const CommandInput = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Input>,
+    CommandInputProps
+>(({ className, clearable = false, clearLabel = "Clear search", onInput, onValueChange, disabled, ...props }, ref) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
+    const [hasValue, setHasValue] = React.useState(Boolean(props.value ?? props.defaultValue))
+
+    const setRefs = React.useCallback(
+        (node: HTMLInputElement | null) => {
+            inputRef.current = node
+            if (typeof ref === "function") {
+                ref(node)
+            } else if (ref) {
+                ref.current = node
+            }
+        },
+        [ref]
+    )
+
+    const handleClear = React.useCallback(() => {
+        const input = inputRef.current
+        if (!input) return
+        onValueChange?.("")
+        setNativeInputValue(input, "")
+        setHasValue(false)
+        input.focus()
+    }, [onValueChange])
+
+    React.useEffect(() => {
+        setHasValue(Boolean(props.value ?? inputRef.current?.value ?? props.defaultValue))
+    }, [props.defaultValue, props.value])
+
+    return (
+        <div className="relative 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={setRefs}
+                disabled={disabled}
+                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",
+                    clearable && "pr-8",
+                    className
+                )}
+                onInput={(event) => {
+                    setHasValue(Boolean(event.currentTarget.value))
+                    onInput?.(event)
+                }}
+                onValueChange={onValueChange}
+                {...props}
+            />
+            {clearable && hasValue && !disabled ? (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <button
+                            type="button"
+                            className="absolute right-3 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                            aria-label={clearLabel}
+                            onMouseDown={(event) => event.preventDefault()}
+                            onClick={handleClear}
+                        >
+                            <X className="h-3.5 w-3.5" />
+                        </button>
+                    </TooltipTrigger>
+                    <TooltipContent>{clearLabel}</TooltipContent>
+                </Tooltip>
+            ) : null}
+        </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
+
+type CommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    disabledReason?: React.ReactNode
+    disabledReasonLabel?: string
+}
+
+const CommandItem = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Item>,
+    CommandItemProps
+>(({ className, disabledReason, disabledReasonLabel, disabled, ...props }, ref) => {
+    const item = (
+        <CommandPrimitive.Item
+            ref={ref}
+            disabled={disabled}
+            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=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+                className
+            )}
+            {...props}
+        />
+    )
+
+    if (!disabled || !disabledReason) return item
+
+    const label =
+        disabledReasonLabel ?? (typeof disabledReason === "string" ? disabledReason : "Disabled item reason")
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <span className="block rounded-sm" tabIndex={0} aria-label={label}>
+                    {item}
+                </span>
+            </TooltipTrigger>
+            <TooltipContent>{disabledReason}</TooltipContent>
+        </Tooltip>
+    )
+})
+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/navigation/CommandPalette.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import {
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from "./Command"
+import { cn } from "../../lib/utils"
+
+export interface CommandPaletteAction {
+    id: string
+    label: string
+    icon?: React.ReactNode
+    shortcut?: string
+    action: () => void
+}
+
+export interface CommandPaletteGroup {
+    heading: string
+    items: CommandPaletteAction[]
+}
+
+export interface CommandPaletteProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandDialog>, "children"> {
+    groups: CommandPaletteGroup[]
+    placeholder?: string
+    emptyMessage?: React.ReactNode
+    dialogTitle?: React.ReactNode
+    clearLabel?: string
+}
+
+export function CommandPalette({
+    groups,
+    placeholder = "Type a command or search...",
+    emptyMessage = "No results found.",
+    dialogTitle = "Command Menu",
+    clearLabel = "Clear search",
+    className,
+    contentClassName,
+    ...props
+}: CommandPaletteProps) {
+    return (
+        <CommandDialog
+            dialogTitle={dialogTitle}
+            className={cn("flex-col w-[480px] w-full max-h-[min(32rem,calc(100%-2rem))] rounded-lg border", className)}
+            contentClassName={cn("max-w-[640px]", contentClassName)}
+            {...props}
+        >
+            <CommandInput placeholder={placeholder} clearable clearLabel={clearLabel} autoFocus />
+            <CommandList>
+                <CommandEmpty>{emptyMessage}</CommandEmpty>
+                {groups.map((group, groupIndex) => (
+                    <React.Fragment key={group.heading}>
+                        <CommandGroup heading={group.heading}>
+                            {group.items.map((item) => (
+                                <CommandItem
+                                    key={item.id}
+                                    value={item.id}
+                                    keywords={[item.label, item.shortcut].filter(Boolean) as string[]}
+                                    onSelect={item.action}
+                                >
+                                    {item.icon ? (
+                                        <span className="mr-2 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4">
+                                            {item.icon}
+                                        </span>
+                                    ) : null}
+                                    <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                                    {item.shortcut ? <CommandShortcut>{item.shortcut}</CommandShortcut> : null}
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                        {groupIndex < groups.length - 1 ? <CommandSeparator /> : null}
+                    </React.Fragment>
+                ))}
+            </CommandList>
+        </CommandDialog>
+    )
+}