@hanzo/ui 4.5.0 → 4.5.3

package/dist/primitives/breadcrumb.jsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from '../util';
+const Breadcrumb = React.forwardRef(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props}/>);
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (<ol ref={ref} className={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-2 sm:gap-2.5", className)} {...props}/>));
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (<li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props}/>));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (<Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props}/>);
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (<span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("font-normal text-foreground", className)} {...props}/>));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = ({ children, className, ...props }) => (<li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = ({ className, ...props }) => (<span role="presentation" aria-hidden="true" className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <MoreHorizontal className="h-4 w-4"/>
+    <span className="sr-only">More</span>
+  </span>);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/primitives/breakpoint-indicator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const BreakpointIndicator: React.FC;
+export default BreakpointIndicator;

package/dist/primitives/breakpoint-indicator.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+const BreakpointIndicator = () => {
+    if (process?.env?.NODE_ENV !== undefined && process.env.NODE_ENV === "production")
+        return null;
+    return (<div className="fixed bottom-1 left-1 z-floating flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-primary">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>);
+};
+export default BreakpointIndicator;

package/dist/primitives/button.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "outline" | "destructive" | "ghost" | "linkFG" | "linkMuted" | null | undefined;
+    size?: "link" | "default" | "xs" | "sm" | "square" | "lg" | "icon" | null | undefined;
+    rounded?: "none" | "md" | "sm" | "lg" | "full" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button as default, type ButtonProps, buttonVariants, };

package/dist/primitives/button.jsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../util";
+// Define all variants
+const variant = {
+    primary: "bg-primary text-primary-fg sm:hover:bg-primary-hover font-nav whitespace-nowrap not-typography",
+    secondary: "bg-secondary text-secondary-fg sm:hover:bg-secondary-hover font-nav whitespace-nowrap not-typography",
+    outline: "text-foreground bg-background border border-muted-4 sm:hover:bg-level-1 sm:hover:text-accent sm:hover:border-accent font-nav whitespace-nowrap not-typography",
+    destructive: "bg-destructive text-destructive-fg font-sans whitespace-nowrap sm:hover:bg-destructive-hover",
+    ghost: "text-foreground sm:hover:bg-level-1 sm:hover:text-accent whitespace-nowrap font-sans ",
+    link: "text-foreground sm:hover:text-muted-1 font-sans ",
+    linkFG: "text-foreground sm:hover:text-muted-1 font-sans ", // marker to style nav as regular link
+    linkMuted: "text-muted-1 sm:hover:text-foreground font-sans ",
+};
+// Define all sizes
+const size = {
+    link: '',
+    xs: "h-8 px-2 text-xs",
+    sm: "h-9 px-3 text-xs",
+    square: 'h-9 py-2 px-2 text-sm aspect-square',
+    default: "h-9 py-2 px-4 text-sm md:text-base font-semibold min-w-0",
+    lg: "h-10 px-8 text-sm md:text-base font-semibold min-w-0 md:min-w-[260px] lg:min-w-[300px]",
+    icon: "h-10 w-10",
+};
+// Define rounded options
+const rounded = {
+    full: 'rounded-full',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    none: ''
+};
+// Updated buttonVariants with the latest Shadcn patterns
+const buttonVariants = cva("inline-flex items-center justify-center font-medium ring-offset-background transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
+    "disabled:opacity-50 disabled:pointer-events-none", {
+    variants: {
+        variant,
+        size,
+        rounded
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "default",
+        rounded: 'md'
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, rounded, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (<Comp className={cn(buttonVariants({ variant, size, rounded }), className)} ref={ref} {...props}/>);
+});
+Button.displayName = "Button";
+export { Button as default, buttonVariants, };

package/dist/primitives/calendar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { DayPicker } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export default Calendar;

package/dist/primitives/calendar.jsx

@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../util";
+import { buttonVariants } from "./button";
+function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+    return (<DayPicker showOutsideDays={showOutsideDays} className={cn("p-3", className)} classNames={{
+            months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+            month: "space-y-4",
+            caption: "flex justify-center pt-1 relative items-center",
+            caption_label: "text-sm font-medium",
+            nav: "space-x-1 flex items-center",
+            nav_button: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+            nav_button_previous: "absolute left-1",
+            nav_button_next: "absolute right-1",
+            table: "w-full border-collapse space-y-1",
+            head_row: "flex",
+            head_cell: "text-muted-1 rounded-md w-8 font-normal text-[0.8rem]",
+            row: "flex w-full mt-2",
+            cell: cn("relative p-0 text-center text-sm focus-within:relative focus-within:z-above-content [&:has([aria-selected])]:bg-level-1 [&:has([aria-selected].day-outside)]:bg-level-1/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range"
+                ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+                : "[&:has([aria-selected])]:rounded-md"),
+            day: cn(buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"),
+            day_range_start: "day-range-start",
+            day_range_end: "day-range-end",
+            day_selected: "bg-primary text-primary-fg hover:bg-primary hover:text-primary-fg focus:bg-primary focus:text-primary-fg",
+            day_today: "bg-accent text-primary-fg",
+            day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-1 aria-selected:opacity-30",
+            day_disabled: "text-muted-foreground opacity-50",
+            day_range_middle: "aria-selected:bg-accent aria-selected:text-primary-fg",
+            day_hidden: "invisible",
+            ...classNames,
+        }} components={{
+            IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4"/>,
+            IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4"/>,
+        }} {...props}/>);
+}
+Calendar.displayName = "Calendar";
+export default Calendar;

package/dist/primitives/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/primitives/card.jsx

@@ -0,0 +1,18 @@
+'use client';
+import * as React from "react";
+import { cn } from "../util";
+const Card = React.forwardRef(({ className, ...props }, ref) => {
+    return (<div ref={ref} className={cn("rounded-lg border overflow-hidden shadow-sm", className)} {...props}/>);
+});
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("flex flex-col p-4 lg:p-5 xl:px-6 xl:py-5 border-b", className)} {...props}/>));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (<h5 ref={ref} className={cn("leading-none tracking-tight", className)} {...props}/>));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (<h6 ref={ref} className={className} {...props}/>));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("p-6", className)} {...props}/>));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("flex items-center px-6 py-3 border-t", className)} {...props}/>));
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/primitives/carousel.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
+type CarouselApi = EmblaCarouselType;
+type CarouselOptions = EmblaOptionsType;
+type CarouselPlugin = EmblaPluginType;
+type CarouselProps = {
+    options?: CarouselOptions;
+    plugins?: CarouselPlugin[];
+    orientation?: 'horizontal' | 'vertical';
+    setApi?: (api: CarouselApi) => void;
+    onCarouselSelect?: (api: CarouselApi) => void;
+};
+declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("./button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("./button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { type CarouselApi, type CarouselOptions, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/dist/primitives/carousel.jsx

@@ -0,0 +1,106 @@
+'use client';
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { cn } from '../util';
+import Button from './button';
+const CarouselContext = React.createContext(null);
+const useCarousel = () => {
+    const service = React.useContext(CarouselContext);
+    if (!service) {
+        throw new Error('useCarousel must be used within a <Carousel />');
+    }
+    return service;
+};
+// https://github.com/emilkowalski/vaul/pull/250
+// See data-vaul-no-drag throughout
+const Carousel = React.forwardRef(({ orientation = 'horizontal', options, setApi, plugins, className, children, onCarouselSelect, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel({ ...options, axis: orientation === 'horizontal' ? 'x' : 'y' }, plugins);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api) => {
+        if (!api) {
+            return;
+        } // would this ever happen??
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+        if (onCarouselSelect) {
+            onCarouselSelect(api);
+        }
+    }, []);
+    const scrollPrev = React.useCallback(() => { api?.scrollPrev(); }, [api]);
+    const scrollNext = React.useCallback(() => { api?.scrollNext(); }, [api]);
+    const handleKeyDown = React.useCallback((event) => {
+        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,
+            options,
+            orientation: orientation || (options?.axis === 'y' ? 'vertical' : 'horizontal'),
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext,
+        }}>
+        <div ref={ref} onKeyDownCapture={handleKeyDown} className={cn('relative', className)} role='region' aria-roledescription='carousel' data-vaul-no-drag {...props}>
+          {children}
+        </div>
+      </CarouselContext.Provider>);
+});
+Carousel.displayName = 'Carousel';
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+    return (<div ref={carouselRef} className='overflow-hidden' data-vaul-no-drag>
+      <div ref={ref} className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props}/>
+    </div>);
+});
+CarouselContent.displayName = 'CarouselContent';
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+    return (<div ref={ref} role='group' aria-roledescription='slide' data-vaul-no-drag 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(({ className, variant = 'ghost', 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(({ className, variant = 'ghost', 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 { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/dist/primitives/checkbox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Checkbox;

package/dist/primitives/checkbox.jsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '../util';
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (<CheckboxPrimitive.Root ref={ref} className={cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background ' +
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
+        'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' +
+        'data-[state=checked]:bg-primary data-[state=checked]:text-primary-fg', className)} {...props}>
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className='h-4 w-4'/>
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export default Checkbox;

package/dist/primitives/combobox.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type ListAdaptor from './list-adaptor';
+interface ComboboxTriggerProps<T> {
+    current: T | null;
+    currentLabel: string | null;
+    imageUrl: string | null;
+    placeholder?: string;
+    buttonClx?: string;
+    imageClx?: string;
+    disabled?: boolean;
+    imageSize?: number;
+    noChevron?: boolean;
+    open: boolean;
+}
+declare const Combobox: <T, P extends ComboboxTriggerProps<T>>({ elements, initial, current, setCurrent, closeOnSelect, adaptor, popoverClx, listItemClx, listItemSelectedClx, listItemDisabledClx, noCheckmark, listItemImageClx, searchPlaceholder, noneFoundMessage, listItemImageSize, noSearch, popoverAlign, popoverSideOffset, Trigger, triggerProps }: {
+    elements: T[];
+    initial?: T | null;
+    current?: T | null;
+    setCurrent: (c: T | null) => void;
+    closeOnSelect?: boolean;
+    adaptor: ListAdaptor<T>;
+    popoverClx?: string;
+    listItemClx?: string;
+    listItemSelectedClx?: string;
+    listItemDisabledClx?: string;
+    listItemImageClx?: string;
+    listItemImageSize?: number;
+    noCheckmark?: boolean;
+    searchPlaceholder?: string;
+    noneFoundMessage?: string;
+    noSearch?: boolean;
+    popoverAlign?: "center" | "end" | "start";
+    popoverSideOffset?: number;
+    /** If (custom) Trigger is not supplied,
+     * passed to default trigger */
+    triggerProps: P;
+    Trigger?: <T_1, P_1>(props: P_1 & {
+        ref?: React.ForwardedRef<HTMLButtonElement>;
+    }) => React.ReactNode;
+}) => React.JSX.Element;
+export { Combobox as default, type ComboboxTriggerProps };

package/dist/primitives/combobox.jsx

@@ -0,0 +1,77 @@
+'use client';
+import React, { useState } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+import { cn } from '../util';
+import Button from './button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command';
+import { Popover, PopoverContent, PopoverTrigger, } from './popover';
+const DEFAULT_IMAGE_SIZE = 32;
+const DefaultTriggerInner = ({ current, currentLabel, imageUrl, buttonClx = '', imageClx = '', placeholder = '(select)', disabled = false, imageSize = DEFAULT_IMAGE_SIZE, noChevron = false, open, ...rest }, ref) => (<Button ref={ref} {...rest} variant='outline' role='combobox' aria-expanded={open} className={cn('flex', noChevron ? 'justify-start' : 'justify-between', buttonClx)} disabled={disabled}>
+    <div className='flex justify-start items-center gap-2'>
+    {(current && imageUrl) ? (<img src={imageUrl} alt={currentLabel + ' image'} height={imageSize} width={imageSize} loading="eager" className={cn('block', imageClx)}/>) : (<div style={{ width: imageSize, height: imageSize }}/>)}
+      <span className='block'>{currentLabel}</span>
+    </div>
+    {!noChevron && (<ChevronDown className={cn('block', open ? '' : 'opacity-50')}/>)}
+  </Button>);
+const DefaultTrigger = React.forwardRef(DefaultTriggerInner);
+const Combobox = ({ elements, initial, current, setCurrent, closeOnSelect = true, adaptor, popoverClx = '', listItemClx = '', listItemSelectedClx = '', listItemDisabledClx = '', noCheckmark = false, listItemImageClx = '', searchPlaceholder = 'Search...', noneFoundMessage = 'None found.', listItemImageSize = DEFAULT_IMAGE_SIZE, noSearch = false, popoverAlign = 'center', popoverSideOffset = 4, Trigger, triggerProps }) => {
+    const [_open, _setOpen] = useState(false);
+    // for non-controlled base (must declare the hook either way)
+    const [_current, _setCurrent] = useState(initial ?? null);
+    const handleSelect = (selString) => {
+        const found = elements.find((el) => (adaptor.valueEquals(el, selString)));
+        if (found) {
+            // non-controlled ('initial' supplied (may have been null))
+            if (initial !== undefined) {
+                _setCurrent(found);
+            }
+            setCurrent(found);
+        }
+        if (closeOnSelect) {
+            _setOpen(false);
+        }
+    };
+    const isCurrent = (el) => {
+        // non-controlled?
+        const curr = (current === undefined) ? _current : current;
+        return !!curr && adaptor.equals(el, curr);
+    };
+    const _triggerProps = current ? {
+        ...triggerProps,
+        current,
+        currentLabel: adaptor.getLabel ? adaptor.getLabel(current) : adaptor.getValue(current),
+        imageUrl: adaptor.getImageUrl ? adaptor.getImageUrl(current) : null,
+        open: _open
+    } : {
+        ...triggerProps,
+        current: null,
+        currentLabel: null,
+        imageUrl: null,
+        open: _open
+    };
+    return (<Popover open={_open} onOpenChange={_setOpen}>
+      <PopoverTrigger asChild>
+        {Trigger ? (<Trigger {..._triggerProps}/>) : (<DefaultTrigger {..._triggerProps}/>)}
+      </PopoverTrigger>
+      <PopoverContent className={cn('p-0', popoverClx)} align={popoverAlign} sideOffset={popoverSideOffset}>
+        <Command>
+          {!noSearch && (<CommandInput placeholder={searchPlaceholder}/>)}
+          <CommandList>
+            <CommandEmpty>{noneFoundMessage}</CommandEmpty>
+            <CommandGroup>
+            {elements.map((el) => (<CommandItem key={adaptor.getValue(el)} value={adaptor.getValue(el)} onSelect={handleSelect} disabled={adaptor.isDisabled ? adaptor.isDisabled(el) : false} className={cn('flex', noCheckmark ? 'justify-start' : 'justify-between', listItemClx, (isCurrent(el) ? listItemSelectedClx : ''), ((adaptor.isDisabled && adaptor.isDisabled(el)) ? listItemDisabledClx : ''))}>
+                <div className='flex justify-start items-center gap-2'>
+                {(adaptor.getImageUrl && adaptor.getImageUrl(el)) ? (<img src={adaptor.getImageUrl(el)} alt={adaptor.getValue(el) + ' image'} height={listItemImageSize} width={listItemImageSize} loading="eager" className={listItemImageClx}/>) : (<div style={{ width: listItemImageSize, height: listItemImageSize }}/>)}
+                  <span>{adaptor.getLabel ? adaptor.getLabel(el) : adaptor.getValue(el)}</span>
+                </div>
+                {!noCheckmark && (<div>
+                  <Check className={cn('ml-auto', (isCurrent(el)) ? '' : 'invisible')}/>
+                </div>)}
+              </CommandItem>))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>);
+};
+export { Combobox as default };

package/dist/primitives/command.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+declare const Command: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
+interface CommandDialogProps extends DialogProps {
+}
+declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => React.JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
+declare const CommandList: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
+declare const CommandItem: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/primitives/command.jsx

@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import {} from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../util";
+import { Dialog, DialogContent } from "./dialog";
+const Command = React.forwardRef(({ className, ...props }, ref) => (<CommandPrimitive ref={ref} className={cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-level-1 text-foreground", className)} {...props}/>));
+Command.displayName = CommandPrimitive.displayName;
+const CommandDialog = ({ children, ...props }) => {
+    return (<Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-1 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>);
+};
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50"/>
+    <CommandPrimitive.Input ref={ref} className={cn("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-2 disabled:cursor-not-allowed disabled:opacity-50", className)} {...props}/>
+  </div>));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef(({ 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((props, ref) => (<CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props}/>));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef(({ 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-medium [&_[cmdk-group-heading]]:text-muted", className)} {...props}/>));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef(({ 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(({ 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', 'data-selected:bg-level-3 aria-selected:text-accent', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-35', className)} {...props}/>));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+    return (<span className={cn("ml-auto text-xs tracking-widest text-muted", className)} {...props}/>);
+};
+CommandShortcut.displayName = "CommandShortcut";
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/primitives/context-menu.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/primitives/context-menu.jsx

@@ -0,0 +1,57 @@
+"use client";
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../util";
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (<ContextMenuPrimitive.SubTrigger ref={ref} className={cn('flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none ' +
+        'focus:bg-level-1 focus:text-accent data-[state=open]:bg-level-1 data-[state=open]:text-accent', inset && "pl-8", className)} {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4"/>
+  </ContextMenuPrimitive.SubTrigger>));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (<ContextMenuPrimitive.SubContent ref={ref} className={cn('z-popup min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md ' +
+        '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}/>));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (<ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content ref={ref} className={cn("z-popup min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md animate-in fade-in-80 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}/>
+  </ContextMenuPrimitive.Portal>));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (<ContextMenuPrimitive.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-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)} {...props}/>));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (<ContextMenuPrimitive.CheckboxItem ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} checked={checked} {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4"/>
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>));
+ContextMenuCheckboxItem.displayName =
+    ContextMenuPrimitive.CheckboxItem.displayName;
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (<ContextMenuPrimitive.RadioItem ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current"/>
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (<ContextMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)} {...props}/>));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (<ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props}/>));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+const ContextMenuShortcut = ({ className, ...props }) => {
+    return (<span className={cn("ml-auto text-xs tracking-widest text-muted", className)} {...props}/>);
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/primitives/dialog-video-controller.d.ts

@@ -0,0 +1,3 @@
+import React, { type PropsWithChildren } from 'react';
+declare const DialogVideoController: React.FC<PropsWithChildren>;
+export default DialogVideoController;