@agentuity/workbench 0.0.87 → 0.0.88

package/src/components/ui/carousel.tsx

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

package/src/components/ui/checkbox.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon } from 'lucide-react';
-
-import { cn } from '../../lib/utils';
-
-function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-	return (
-		<CheckboxPrimitive.Root
-			data-slot="checkbox"
-			className={cn(
-				'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-				className
-			)}
-			{...props}
-		>
-			<CheckboxPrimitive.Indicator
-				data-slot="checkbox-indicator"
-				className="grid place-content-center text-current transition-none"
-			>
-				<CheckIcon className="size-3.5" />
-			</CheckboxPrimitive.Indicator>
-		</CheckboxPrimitive.Root>
-	);
-}
-
-export { Checkbox };

package/src/components/ui/collapsible.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-
-function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
-}
-
-function CollapsibleTrigger({
-	...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-	return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
-}
-
-function CollapsibleContent({
-	...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-	return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/ui/field.tsx

@@ -1,234 +0,0 @@
-import { useMemo } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../lib/utils';
-import { Label } from './label';
-import { Separator } from './separator';
-
-function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
-	return (
-		<fieldset
-			data-slot="field-set"
-			className={cn(
-				'flex flex-col gap-6',
-				'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-function FieldLegend({
-	className,
-	variant = 'legend',
-	...props
-}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
-	return (
-		<legend
-			data-slot="field-legend"
-			data-variant={variant}
-			className={cn(
-				'mb-3 font-medium',
-				'data-[variant=legend]:text-base',
-				'data-[variant=label]:text-sm',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot="field-group"
-			className={cn(
-				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
-	variants: {
-		orientation: {
-			vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
-			horizontal: [
-				'flex-row items-center',
-				'[&>[data-slot=field-label]]:flex-auto',
-				'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-			],
-			responsive: [
-				'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
-				'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
-				'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-			],
-		},
-	},
-	defaultVariants: {
-		orientation: 'vertical',
-	},
-});
-
-function Field({
-	className,
-	orientation = 'vertical',
-	...props
-}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
-	return (
-		<div
-			role="group"
-			data-slot="field"
-			data-orientation={orientation}
-			className={cn(fieldVariants({ orientation }), className)}
-			{...props}
-		/>
-	);
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot="field-content"
-			className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
-			{...props}
-		/>
-	);
-}
-
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
-	return (
-		<Label
-			data-slot="field-label"
-			className={cn(
-				'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-				'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-				'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot="field-label"
-			className={cn(
-				'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
-	return (
-		<p
-			data-slot="field-description"
-			className={cn(
-				'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-				'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
-				'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-function FieldSeparator({
-	children,
-	className,
-	...props
-}: React.ComponentProps<'div'> & {
-	children?: React.ReactNode;
-}) {
-	return (
-		<div
-			data-slot="field-separator"
-			data-content={!!children}
-			className={cn(
-				'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-				className
-			)}
-			{...props}
-		>
-			<Separator className="absolute inset-0 top-1/2" />
-			{children && (
-				<span
-					className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
-					data-slot="field-separator-content"
-				>
-					{children}
-				</span>
-			)}
-		</div>
-	);
-}
-
-function FieldError({
-	className,
-	children,
-	errors,
-	...props
-}: React.ComponentProps<'div'> & {
-	errors?: Array<{ message?: string } | undefined>;
-}) {
-	const content = useMemo(() => {
-		if (children) {
-			return children;
-		}
-
-		if (!errors?.length) {
-			return null;
-		}
-
-		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
-
-		if (uniqueErrors?.length == 1) {
-			return uniqueErrors[0]?.message;
-		}
-
-		return (
-			<ul className="ml-4 flex list-disc flex-col gap-1">
-				{uniqueErrors.map(
-					(error, index) => error?.message && <li key={index}>{error.message}</li>
-				)}
-			</ul>
-		);
-	}, [children, errors]);
-
-	if (!content) {
-		return null;
-	}
-
-	return (
-		<div
-			role="alert"
-			data-slot="field-error"
-			className={cn('text-destructive text-sm font-normal', className)}
-			{...props}
-		>
-			{content}
-		</div>
-	);
-}
-
-export {
-	Field,
-	FieldLabel,
-	FieldDescription,
-	FieldError,
-	FieldGroup,
-	FieldLegend,
-	FieldSeparator,
-	FieldSet,
-	FieldContent,
-	FieldTitle,
-};

package/src/components/ui/form.tsx

@@ -1,154 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import {
-	Controller,
-	FormProvider,
-	useFormContext,
-	useFormState,
-	type ControllerProps,
-	type FieldPath,
-	type FieldValues,
-} from 'react-hook-form';
-
-import { cn } from '../../lib/utils';
-import { Label } from './label';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-	name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-	...props
-}: ControllerProps<TFieldValues, TName>) => {
-	return (
-		<FormFieldContext.Provider value={{ name: props.name }}>
-			<Controller {...props} />
-		</FormFieldContext.Provider>
-	);
-};
-
-const useFormField = () => {
-	const fieldContext = React.useContext(FormFieldContext);
-	const itemContext = React.useContext(FormItemContext);
-	const { getFieldState } = useFormContext();
-	const formState = useFormState({ name: fieldContext.name });
-	const fieldState = getFieldState(fieldContext.name, formState);
-
-	if (!fieldContext) {
-		throw new Error('useFormField should be used within <FormField>');
-	}
-
-	const { id } = itemContext;
-
-	return {
-		id,
-		name: fieldContext.name,
-		formItemId: `${id}-form-item`,
-		formDescriptionId: `${id}-form-item-description`,
-		formMessageId: `${id}-form-item-message`,
-		...fieldState,
-	};
-};
-
-type FormItemContextValue = {
-	id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-	const id = React.useId();
-
-	return (
-		<FormItemContext.Provider value={{ id }}>
-			<div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
-		</FormItemContext.Provider>
-	);
-}
-
-function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-	const { error, formItemId } = useFormField();
-
-	return (
-		<Label
-			data-slot="form-label"
-			data-error={!!error}
-			className={cn('data-[error=true]:text-destructive', className)}
-			htmlFor={formItemId}
-			{...props}
-		/>
-	);
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-	return (
-		<Slot
-			data-slot="form-control"
-			id={formItemId}
-			aria-describedby={
-				!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-			}
-			aria-invalid={!!error}
-			{...props}
-		/>
-	);
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-	const { formDescriptionId } = useFormField();
-
-	return (
-		<p
-			data-slot="form-description"
-			id={formDescriptionId}
-			className={cn('text-muted-foreground text-sm', className)}
-			{...props}
-		/>
-	);
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-	const { error, formMessageId } = useFormField();
-	const body = error ? String(error?.message ?? '') : props.children;
-
-	if (!body) {
-		return null;
-	}
-
-	return (
-		<p
-			data-slot="form-message"
-			id={formMessageId}
-			className={cn('text-destructive text-sm', className)}
-			{...props}
-		>
-			{body}
-		</p>
-	);
-}
-
-export {
-	useFormField,
-	Form,
-	FormItem,
-	FormLabel,
-	FormControl,
-	FormDescription,
-	FormMessage,
-	FormField,
-};

package/src/components/ui/label.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-
-import { cn } from '../../lib/utils';
-
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-	return (
-		<LabelPrimitive.Root
-			data-slot="label"
-			className={cn(
-				'text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-export { Label };