@hanzo/ui 4.5.0 → 4.5.2

package/dist/primitives/navigation-menu.jsx

@@ -0,0 +1,38 @@
+'use client';
+import React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../util';
+const NavigationMenu = React.forwardRef(({ 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(({ 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 = React.forwardRef(({ className, ...props }, ref) => (<NavigationMenuPrimitive.Item ref={ref} className={cn("relative", className)} {...props}/>));
+NavigationMenuItem.displayName = 'NavigationMenuItem';
+const navigationMenuTriggerStyle = cva('group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 ' +
+    'text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent ' +
+    ' focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 ' +
+    'data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50');
+const NavigationMenuTrigger = React.forwardRef(({ 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='true'/>
+  </NavigationMenuPrimitive.Trigger>));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (<NavigationMenuPrimitive.Content ref={ref} className={cn("right-0  absolute", "absolute top-full w-fit bg-popover mt-[5px]", "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 bg-background overflow-hidden rounded-md border", className)} {...props}/>));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (<div className={cn('absolute left-0 top-full flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport className={cn('origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border ', 'bg-background text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]', className)} ref={ref} {...props}/>
+  </div>));
+NavigationMenuViewport.displayName =
+    NavigationMenuPrimitive.Viewport.displayName;
+const NavigationMenuIndicator = React.forwardRef(({ 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 { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, };

package/dist/primitives/next/image.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ImageDef, Dimensions, MediaTransform } from '../../types';
+declare const Image: React.FC<{
+    def: ImageDef;
+    constrainTo?: Dimensions;
+    transform?: MediaTransform;
+    fullWidth?: boolean;
+    className?: string;
+    preload?: boolean;
+}>;
+export default Image;

package/dist/primitives/next/image.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import NextImage from 'next/image';
+import { constrain, cn, spreadToTransform } from '../../util';
+const Image = ({ def, constrainTo, transform = {}, fullWidth = false, className = '', preload = false }) => {
+    const { src, alt: _alt, dim, sizes, svgFillClass: _svgFillClass, } = def;
+    const toSpread = {};
+    if (fullWidth) {
+        toSpread.style = {
+            width: '100%',
+            height: 'auto',
+            ...spreadToTransform(transform)
+        };
+        if (constrainTo) {
+            toSpread.style.maxWidth = constrainTo.w;
+            toSpread.style.maxHeight = constrainTo.h;
+        }
+    }
+    else {
+        const resolved = constrainTo ? constrain(dim, constrainTo) : dim;
+        toSpread.width = resolved.w;
+        toSpread.height = resolved.h;
+        toSpread.style = { ...spreadToTransform(transform) };
+    }
+    if (sizes) {
+        toSpread.sizes = sizes;
+    }
+    // Note: cannot be spread (a Next thing)
+    let alt;
+    if (_alt) {
+        alt = _alt;
+    }
+    else {
+        const tokens = src.split('/');
+        // Something remotely meaningful
+        alt = (tokens.length > 0) ? tokens[tokens.length - 1] : src;
+    }
+    const svgFillClass = _svgFillClass ?? '';
+    return (fullWidth) ? (<div className='relative flex flex-col items-center justify-center w-full'>
+      <NextImage src={src} alt={alt} {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>
+    </div>) : (<NextImage src={src} alt={alt} {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>);
+};
+export default Image;

package/dist/primitives/next/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Image } from './image';
+export { default as InlineIcon } from './inline-icon';
+export { default as LinkElement } from './link-element';
+export { default as MDXLink } from './mdx-link';
+export { default as MediaStack } from './media-stack';
+export { default as NavItems } from './nav-items';
+export { default as YouTubeEmbed } from './youtube-embed';

package/dist/primitives/next/index.js

@@ -0,0 +1,7 @@
+export { default as Image } from './image';
+export { default as InlineIcon } from './inline-icon';
+export { default as LinkElement } from './link-element';
+export { default as MDXLink } from './mdx-link';
+export { default as MediaStack } from './media-stack';
+export { default as NavItems } from './nav-items';
+export { default as YouTubeEmbed } from './youtube-embed';

package/dist/primitives/next/inline-icon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const InlineIcon: React.FC<{
+    /**
+     * If a ReactNode is passed in, it should be set to 'w-full h-auto' so that it can be sized
+     * according to width of parent.
+     */
+    icon: React.ReactNode;
+    /** default should be handled by calling code. */
+    size?: number;
+    agent?: string;
+    className?: string;
+}>;
+export default InlineIcon;

package/dist/primitives/next/inline-icon.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Image from 'next/image';
+const InlineIcon = ({ icon, size, agent, className = '' }) => {
+    if (!icon)
+        return null;
+    const phone = agent === 'phone';
+    if (typeof icon === 'string') {
+        const _size = (phone && size) ? (size * .75) : size;
+        return (<Image src={icon} width={_size} height={_size} alt='icon' className={className}/>);
+    }
+    return (<div className={className}>
+      {icon}
+    </div>);
+};
+export default InlineIcon;

package/dist/primitives/next/link-element.d.ts

@@ -0,0 +1,23 @@
+import React, { type PropsWithChildren } from 'react';
+import type { LinkDef } from '../../types';
+import { buttonVariants } from '../button';
+import { type VariantProps } from '../../util';
+/**
+ * If this is rendered directly (and not auto generated in a Block)
+ * and it has any children, title, icon, and iconAfter
+ * are ignore.
+ */
+declare const LinkElement: React.FC<PropsWithChildren & VariantProps<typeof buttonVariants> & {
+    def: LinkDef;
+    /**
+     * Use to trigger other events in addition to the
+     * link action itself. For example, to also close a drawer menu.
+     */
+    onClick?: () => void;
+    /** overrides def (eg, for title area)*/
+    icon?: React.ReactNode;
+    /** overrides def */
+    iconAfter?: boolean;
+    className?: string;
+}>;
+export default LinkElement;

package/dist/primitives/next/link-element.jsx

@@ -0,0 +1,56 @@
+import React, {} from 'react';
+import Link from 'next/link';
+import { buttonVariants } from '../button';
+import { cn } from '../../util';
+/**
+ * If this is rendered directly (and not auto generated in a Block)
+ * and it has any children, title, icon, and iconAfter
+ * are ignore.
+ */
+const LinkElement = ({ def, 
+// DO NOT provide a default to any of the props that also appear in def!
+onClick, size, variant, rounded, icon, iconAfter, className = '', children, }) => {
+    const { href, newTab, variant: defVariant, size: defSize, rounded: defRounded, title } = def;
+    const linkProps = {};
+    // As per LinkDef docs
+    if (href.startsWith('http') || href.startsWith('mailto')) {
+        linkProps.rel = 'noreferrer noopener';
+        if (newTab ?? true) {
+            linkProps.target = '_blank';
+        }
+    }
+    else if (newTab) {
+        linkProps.target = '_blank';
+    }
+    const toSpread = {
+        href,
+        ...(onClick ? { onClick } : {}),
+        ...linkProps
+    };
+    const Contents = () => {
+        if (React.Children.count(children) > 0)
+            return children;
+        // Props > def fields > defaults.
+        const _icon = (icon) ? icon : (def.icon) ? def.icon : undefined;
+        const _iconAfter = (iconAfter) ? iconAfter : (def.iconAfter) ? def.iconAfter : false;
+        // 'title' is not guaranteed as it could be an icon only button / link
+        return (<>
+      {_icon && !_iconAfter && (<div className='pr-1'>{_icon}</div>)}
+      {title && (<div>{title}</div>)}
+      {_icon && _iconAfter && (<div className='pl-1'>{_icon}</div>)}
+    </>);
+    };
+    return (<Link className={cn(buttonVariants({
+            variant: variant ? variant : (defVariant ? defVariant : 'link'),
+            size: (!defVariant || defVariant.includes('link') || variant?.includes('link')) ?
+                'link'
+                :
+                    (size ? size : defSize),
+            rounded: rounded ? rounded : (defRounded ? defRounded : 'md'),
+        }), 
+        // This is a "label only" LinkDef.  cf: footer"
+        ((href.length > 0 || onClick) ? '' : 'pointer-events-none'), className)} {...toSpread}>
+      <Contents />
+    </Link>);
+};
+export default LinkElement;

package/dist/primitives/next/mdx-link.d.ts

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

package/dist/primitives/next/mdx-link.jsx

@@ -0,0 +1,12 @@
+import React, {} from 'react';
+import Link from 'next/link';
+const MDXLink = ({ href, children, ...rest }) => {
+    // internal link
+    if (href && (href.startsWith('/'))) {
+        return (<Link href={href} {...rest}>
+        {children}
+      </Link>);
+    }
+    return <a target="_blank" href={href} {...rest}>{children}</a>;
+};
+export default MDXLink;

package/dist/primitives/next/media-stack.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MediaStackDef, Dimensions } from '../../types';
+declare const MediaStack: React.FC<{
+    media: MediaStackDef;
+    constrainTo?: Dimensions;
+    clx?: string;
+}>;
+export default MediaStack;

package/dist/primitives/next/media-stack.jsx

@@ -0,0 +1,28 @@
+'use client';
+import React from 'react';
+import Spline from '@splinetool/react-spline';
+import { cn, constrain, spreadToTransform } from '../../util';
+import Image from './image';
+import VideoPlayer from '../video-player';
+const MediaStack = ({ media, constrainTo: cnst = { w: 250, h: 250 }, clx = '' }) => {
+    const { img, video, animation, mediaTransform } = media;
+    const transform = mediaTransform ?? {};
+    // Order of precedence: 3D > MP4 > Image
+    if (animation) {
+        return (<Spline scene={animation} className={cn(clx, 'pointer-events-none')} data-vaul-no-drag style={{
+                // // !aspect-[12/10] 
+                width: (6 / 5 * (typeof cnst.h === 'number' ? cnst.h : parseInt(cnst.h))),
+                height: cnst.h,
+                ...spreadToTransform(transform)
+            }}/>);
+    }
+    if (video) {
+        const dim = constrain(video.dim.md, cnst);
+        return (<VideoPlayer className={clx} sources={video.sources} width={dim.w} height={dim.h} style={{
+                minHeight: dim.h, // prevents layout jumps
+                ...spreadToTransform(transform)
+            }} {...video.videoProps}/>);
+    }
+    return img ? (<Image def={img} constrainTo={cnst} className={clx} transform={transform}/>) : (<div style={{ width: cnst.w, height: cnst.h }} className={cn('bg-level-2', clx)}/>);
+};
+export default MediaStack;

package/dist/primitives/next/nav-items.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LinkDef } from '../../types';
+declare const NavItems: React.FC<{
+    items: LinkDef[];
+    className?: string;
+    as?: React.ElementType;
+    itemClx?: string | ((def: LinkDef) => string);
+    currentAs?: string;
+}>;
+export default NavItems;

package/dist/primitives/next/nav-items.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import LinkElement from './link-element';
+import { cn } from '../../util';
+const NavItems = ({ items, className = '', itemClx, as: Tag = 'nav', currentAs }) => (items.length ? (<Tag className={className}>
+  {items.map((item, index) => {
+        const variant = item.variant ?? 'link';
+        let internalClx = '';
+        // note that linkFG (or any other variant of 'link') 
+        // will not get assigned these classes,
+        // and will remain styles is 'foreground' (hence the name)
+        if (variant === 'link') {
+            internalClx += 'text-nav hover:text-nav-hover ';
+            if (currentAs && currentAs === item.href) {
+                internalClx += 'text-nav-current ';
+            }
+        }
+        else {
+            internalClx += 'min-w-0 lg:min-w-0 ';
+        }
+        const _itemClx = (itemClx) ? (typeof itemClx === 'string' ? itemClx : itemClx(item)) : '';
+        return (<LinkElement def={item} key={index} className={cn(internalClx, _itemClx)}/>);
+    })}
+  </Tag>) : null);
+export default NavItems;

package/dist/primitives/next/youtube-embed.d.ts

@@ -0,0 +1,11 @@
+declare const YouTubeEmbed: React.FC<{
+    youtubeID: string;
+    width: number;
+    height: number;
+    buttonSize?: number;
+    timeAt?: string;
+    title?: string;
+    caption?: string;
+    className?: string;
+}>;
+export default YouTubeEmbed;

package/dist/primitives/next/youtube-embed.jsx

@@ -0,0 +1,23 @@
+'use client';
+import { useState } from 'react';
+import Image from 'next/image';
+import * as Icons from '../icons';
+// Concept based on https://www.youtube.com/watch?v=lLqRchtjN00
+// (https://github.com/a-trost/fableton)
+const YouTubeEmbed = ({ youtubeID, width, height, buttonSize = 100, timeAt, title, caption, className = '' }) => {
+    const [showVideo, setShowVideo] = useState(false);
+    // re autoplay: https://stackoverflow.com/a/45610557/11645689
+    return (<div className={className}>
+      {showVideo ? (<iframe width={width} height={height} src={`https://www.youtube-nocookie.com/embed/${youtubeID + ((timeAt) ? `?t=${timeAt}&` : '?')}rel=0&autoplay=1`} allow='accelerometer ; autoplay *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *;' allowFullScreen title={title || 'Youtube video'} className='aspect-[16/9] h-full w-full p-0 border-0 '/>) : (<button type='button' onClick={() => setShowVideo(true)} className='relative aspect-[16/9] w-full' aria-label={`Play video ${title}`}>
+          <Image src={`https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`} alt='' className='h-full w-full' width={width} height={height} loading='lazy'/>
+          <div className={//https://stackoverflow.com/a/23384995/11645689
+            'absolute z-above-content-2 left-[50%] top-[50%] -translate-y-2/4 -translate-x-2/4 ' +
+                'grid place-items-center ' +
+                'text-xl text-white opacity-90'}>
+            <Icons.youtube width={buttonSize} height={buttonSize} role='img' className='transform transition hover:scale-110' {...{ 'aria-hidden': true }}/>
+          </div>
+          {caption && <p className='hidden md:block whitespace-nowrap typography absolute z-above-content left-[50%] top-[20px] -translate-x-2/4 '>{caption}</p>}
+        </button>)}
+    </div>);
+};
+export default YouTubeEmbed;

package/dist/primitives/popover.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverArrow: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose, PopoverArrow };

package/dist/primitives/popover.jsx

@@ -0,0 +1,18 @@
+'use client';
+import React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../util';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverClose = PopoverPrimitive.Close;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverArrow = PopoverPrimitive.Arrow;
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (<PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content ref={ref} align={align} sideOffset={sideOffset} className={cn('z-above-modal-2 w-72 rounded-md border bg-level-1 p-4 text-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, PopoverAnchor, PopoverClose, PopoverArrow };

package/dist/primitives/progress.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Progress;

package/dist/primitives/progress.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cn } from '../util';
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (<ProgressPrimitive.Root ref={ref} className={cn('relative h-4 w-full overflow-hidden rounded-full bg-level-2', className)} {...props}>
+    <ProgressPrimitive.Indicator className='h-full w-full flex-1 bg-accent transition-all' style={{ transform: `translateX(-${100 - (value || 0)}%)` }}/>
+  </ProgressPrimitive.Root>));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+export default Progress;

package/dist/primitives/radio-group.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    larger?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/primitives/radio-group.jsx

@@ -0,0 +1,18 @@
+"use client";
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "../util";
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return (<RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref}/>);
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ larger = false, className, ...props }, ref) => {
+    return (<RadioGroupPrimitive.Item ref={ref} className={cn(larger ? 'h-5 w-5' : 'h-4 w-4', 'aspect-square rounded-full border border-muted text-foreground ring-offset-background ', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', className)} {...props}>
+      <RadioGroupPrimitive.Indicator className="w-full h-full flex items-center justify-center">
+        <div className={cn(larger ? 'h-[70%] w-[70%] ' : 'h-[75%] w-[75%]', 'rounded-full aspect-square bg-foreground')}/>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>);
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export { RadioGroup, RadioGroupItem };

package/dist/primitives/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };

package/dist/primitives/scroll-area.jsx

@@ -0,0 +1,19 @@
+'use client';
+import React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../util';
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (<ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = 'vertical', ...props }, ref) => (<ScrollAreaPrimitive.ScrollAreaScrollbar 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 flex-col border-t border-t-transparent p-[1px]', className)} {...props}>
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-muted-2'/>
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export { ScrollArea, ScrollBar };

package/dist/primitives/select.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/primitives/select.jsx

@@ -0,0 +1,62 @@
+'use client';
+import React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../util';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (<SelectPrimitive.Trigger ref={ref} className={cn('flex h-10 w-full items-center justify-between rounded-md border border-muted-3 ' +
+        'bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-2 ' +
+        'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ' +
+        'disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className)} {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className='h-4 w-4 opacity-50'/>
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (<SelectPrimitive.ScrollUpButton ref={ref} className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
+    <ChevronUp className='h-4 w-4'/>
+  </SelectPrimitive.ScrollUpButton>));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (<SelectPrimitive.ScrollDownButton ref={ref} className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
+    <ChevronDown className='h-4 w-4'/>
+  </SelectPrimitive.ScrollDownButton>));
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (<SelectPrimitive.Portal>
+    <SelectPrimitive.Content ref={ref} className={cn('relative z-popup max-h-96 min-w-[8rem] overflow-hidden rounded-md border ' +
+        'bg-level-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', (position === 'popper') &&
+        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 ' +
+            'data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className)} position={position} {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport className={cn('p-1', position === 'popper' &&
+        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (<SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props}/>));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (<SelectPrimitive.Item ref={ref} className={cn('relative flex w-full cursor-default select-none items-center rounded-sm ' +
+        'py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-2 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'>
+      <SelectPrimitive.ItemIndicator>
+        <Check className='h-4 w-4'/>
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (<SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-level-1', className)} {...props}/>));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/primitives/separator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Separator;

package/dist/primitives/separator.jsx

@@ -0,0 +1,7 @@
+'use client';
+import React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../util';
+const Separator = React.forwardRef(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (<SeparatorPrimitive.Root ref={ref} decorative={decorative} orientation={orientation} className={cn('shrink-0 bg-muted-2', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)} {...props}/>));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export default Separator;

package/dist/primitives/sheet.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & {
+    closeButtonClass?: string;
+    closeElement?: any;
+    centerElement?: any;
+    duplicateCloseOnBottom?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };