@ciridae/ui 0.2.0

package/dist/components/ui/field.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@ciridae/ui/utils";
+import { Label } from "@ciridae/ui/label";
+import { Separator } from "@ciridae/ui/separator";
+function FieldSet({ className, ...props }) {
+    return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-[calc(var(--panel-gap)+0.5rem)]", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+    return (_jsx("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 }) {
+    return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-[calc(var(--panel-gap)+0.75rem)] data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-(--panel-gap)", 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 @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]: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 }) {
+    return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
+}
+function FieldContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className), ...props }));
+}
+function FieldLabel({ children, className, required, ...props }) {
+    return (_jsxs(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-(--panel-padding)", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", className), ...props, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })) : null] }));
+}
+function FieldTitle({ className, ...props }) {
+    return (_jsx("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 }) {
+    return (_jsx("p", { "data-slot": "field-description", className: cn("text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function FieldSeparator({ children, className, ...props }) {
+    return (_jsxs("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, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
+}
+function FieldError({ className, children, errors, ...props }) {
+    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 (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
+}
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/components/ui/file-upload-field-parts.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+type FileUploadControlProps = {
+    acceptedFileTypes: string | undefined;
+    disabled: boolean;
+    dragActive: boolean;
+    error: string | undefined;
+    files: File[];
+    inputId: string;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    maxAttachments: number;
+    onAddFiles: (files: FileList | File[]) => void;
+    onDragActiveChange: (active: boolean) => void;
+};
+declare function FileUploadCompactControl({ acceptedFileTypes, disabled, dragActive, error, files, inputId, inputRef, maxAttachments, onAddFiles, onDragActiveChange, }: FileUploadControlProps): import("react/jsx-runtime").JSX.Element;
+declare function FileUploadDropZone({ acceptedFileTypes, disabled, dragActive, error, files, inputId, inputRef, maxAttachments, onAddFiles, onDragActiveChange, }: FileUploadControlProps): import("react/jsx-runtime").JSX.Element;
+declare function FileUploadList({ disabled, files, onRemoveFile, }: {
+    disabled: boolean;
+    files: File[];
+    onRemoveFile: (index: number) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { FileUploadCompactControl, FileUploadDropZone, FileUploadList };

package/dist/components/ui/file-upload-field-parts.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileIcon, PaperclipIcon, UploadCloudIcon, XIcon } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+import { Button } from "@ciridae/ui/button";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "@ciridae/ui/item";
+function FileUploadCompactControl({ acceptedFileTypes, disabled, dragActive, error, files, inputId, inputRef, maxAttachments, onAddFiles, onDragActiveChange, }) {
+    const isAtLimit = files.length >= maxAttachments;
+    return (_jsxs("div", { "data-drag-active": dragActive, className: cn("flex items-center gap-3 rounded-md border bg-card px-3 py-2 transition-colors", "data-[drag-active=true]:border-ring data-[drag-active=true]:bg-muted/50", disabled && "cursor-not-allowed opacity-60"), onDragEnter: (event) => handleDragEnter(event, disabled, onDragActiveChange), onDragLeave: (event) => handleDragLeave(event, onDragActiveChange), onDragOver: (event) => event.preventDefault(), onDrop: (event) => handleDrop(event, { disabled, onAddFiles, onDragActiveChange }), children: [_jsx("input", { accept: acceptedFileTypes, "aria-describedby": error ? `${inputId}-error` : undefined, className: "sr-only", disabled: disabled || isAtLimit, id: inputId, multiple: true, onChange: (event) => handleFileInputChange(event, onAddFiles), ref: inputRef, type: "file" }), _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(PaperclipIcon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: files.length > 0 ? `${files.length} attached` : "Attach files" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: "Files stay in the browser until submit." })] })] }), _jsx(Button, { disabled: disabled || isAtLimit, onClick: () => inputRef.current?.click(), size: "sm", type: "button", variant: "outline", children: "Attach" })] }));
+}
+function FileUploadDropZone({ acceptedFileTypes, disabled, dragActive, error, files, inputId, inputRef, maxAttachments, onAddFiles, onDragActiveChange, }) {
+    const isAtLimit = files.length >= maxAttachments;
+    return (_jsxs("div", { "data-drag-active": dragActive, className: cn("grid gap-3 rounded-lg border border-dashed bg-card p-(--panel-padding) transition-colors", "data-[drag-active=true]:border-ring data-[drag-active=true]:bg-muted/50", disabled && "cursor-not-allowed opacity-60"), onDragEnter: (event) => handleDragEnter(event, disabled, onDragActiveChange), onDragLeave: (event) => handleDragLeave(event, onDragActiveChange), onDragOver: (event) => event.preventDefault(), onDrop: (event) => handleDrop(event, { disabled, onAddFiles, onDragActiveChange }), children: [_jsx(FileUploadDropZoneContent, { disabled: disabled, files: files, inputRef: inputRef, maxAttachments: maxAttachments }), _jsx("input", { accept: acceptedFileTypes, "aria-describedby": error ? `${inputId}-error` : undefined, className: "sr-only", disabled: disabled || isAtLimit, id: inputId, multiple: true, onChange: (event) => handleFileInputChange(event, onAddFiles), ref: inputRef, type: "file" })] }));
+}
+function FileUploadDropZoneContent({ disabled, files, inputRef, maxAttachments, }) {
+    const isAtLimit = files.length >= maxAttachments;
+    return (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-md border bg-muted", children: _jsx(UploadCloudIcon, { className: "size-4 text-muted-foreground" }) }), _jsxs("div", { className: "grid flex-1 gap-1", children: [_jsx("div", { className: "text-sm font-medium", children: "Drop files here or browse" }), _jsx("div", { className: "text-sm text-muted-foreground", children: "Supports images, PDFs, spreadsheets, text files, and documents." })] }), _jsx(Button, { disabled: disabled || isAtLimit, onClick: () => inputRef.current?.click(), type: "button", variant: "outline", children: "Browse" })] }));
+}
+function FileUploadList({ disabled, files, onRemoveFile, }) {
+    if (files.length === 0)
+        return null;
+    return (_jsx(ItemGroup, { className: "gap-2", children: files.map((file, index) => (_jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "max-w-full break-all", children: file.name }), _jsx(ItemDescription, { className: "font-mono tabular-nums", children: formatFileSize(file.size) })] }), _jsx(ItemActions, { children: _jsx(Button, { "aria-label": `Remove ${file.name}`, disabled: disabled, onClick: () => onRemoveFile(index), size: "icon-sm", type: "button", variant: "ghost", children: _jsx(XIcon, {}) }) })] }, `${file.name}-${file.size}-${index}`))) }));
+}
+function handleDragEnter(event, disabled, onDragActiveChange) {
+    event.preventDefault();
+    if (!disabled)
+        onDragActiveChange(true);
+}
+function handleDragLeave(event, onDragActiveChange) {
+    event.preventDefault();
+    const nextTarget = event.relatedTarget;
+    if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget))
+        return;
+    onDragActiveChange(false);
+}
+function handleDrop(event, options) {
+    event.preventDefault();
+    options.onDragActiveChange(false);
+    if (options.disabled)
+        return;
+    if (event.dataTransfer.files.length > 0)
+        options.onAddFiles(event.dataTransfer.files);
+}
+function handleFileInputChange(event, onAddFiles) {
+    if (!event.target.files)
+        return;
+    if (event.target.files.length > 0)
+        onAddFiles(event.target.files);
+    event.currentTarget.value = "";
+}
+function formatFileSize(size) {
+    if (size < 1024 * 1024)
+        return `${Math.max(1, Math.round(size / 1024))} KB`;
+    return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+export { FileUploadCompactControl, FileUploadDropZone, FileUploadList };

package/dist/components/ui/file-upload-field.d.ts

@@ -0,0 +1,15 @@
+type FileUploadFieldProps = {
+    acceptedFileTypes?: string;
+    className?: string;
+    description?: string;
+    disabled?: boolean;
+    files: File[];
+    label?: string;
+    maxAttachmentSizeMb?: number;
+    maxAttachments?: number;
+    onFilesChange: (files: File[]) => void;
+    showConstraints?: boolean;
+    variant?: "compact" | "dropzone";
+};
+declare function FileUploadField({ acceptedFileTypes, className, description, disabled, files, label, maxAttachmentSizeMb, maxAttachments, onFilesChange, showConstraints, variant, }: FileUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+export { FileUploadField, type FileUploadFieldProps };

package/dist/components/ui/file-upload-field.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FileUploadCompactControl, FileUploadDropZone, FileUploadList, } from "./file-upload-field-parts";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@ciridae/ui/field";
+function FileUploadField({ acceptedFileTypes, className, description, disabled = false, files, label = "Attachments", maxAttachmentSizeMb = 10, maxAttachments = 4, onFilesChange, showConstraints = true, variant = "dropzone", }) {
+    const inputId = React.useId();
+    const uploadState = useFileUploadFieldState({
+        acceptedFileTypes,
+        files,
+        maxAttachmentSizeMb,
+        maxAttachments,
+        onFilesChange,
+    });
+    const fieldDescription = description ??
+        (variant === "compact"
+            ? "Optional supporting files."
+            : "Attach screenshots, documents, or source files that help explain the request.");
+    return (_jsxs(Field, { className: className, "data-invalid": !!uploadState.error, children: [_jsxs(FieldContent, { children: [_jsx(FieldLabel, { htmlFor: inputId, children: label }), _jsx(FieldDescription, { children: getFieldDescription(fieldDescription, showConstraints, {
+                            maxAttachmentSizeMb,
+                            maxAttachments,
+                        }) })] }), variant === "compact" ? (_jsx(FileUploadCompactControl, { acceptedFileTypes: acceptedFileTypes, disabled: disabled, dragActive: uploadState.dragActive, error: uploadState.error, files: files, inputId: inputId, inputRef: uploadState.inputRef, maxAttachments: maxAttachments, onAddFiles: uploadState.addFiles, onDragActiveChange: uploadState.setDragActive })) : (_jsx(FileUploadDropZone, { acceptedFileTypes: acceptedFileTypes, disabled: disabled, dragActive: uploadState.dragActive, error: uploadState.error, files: files, inputId: inputId, inputRef: uploadState.inputRef, maxAttachments: maxAttachments, onAddFiles: uploadState.addFiles, onDragActiveChange: uploadState.setDragActive })), _jsx(FileUploadList, { disabled: disabled, files: files, onRemoveFile: uploadState.removeFile }), uploadState.error ? (_jsx(FieldError, { id: `${inputId}-error`, children: uploadState.error })) : null] }));
+}
+function useFileUploadFieldState({ acceptedFileTypes, files, maxAttachmentSizeMb, maxAttachments, onFilesChange, }) {
+    const inputRef = React.useRef(null);
+    const [dragActive, setDragActive] = React.useState(false);
+    const [error, setError] = React.useState();
+    const addFiles = (incomingFiles) => {
+        const nextFiles = Array.from(incomingFiles);
+        const validationError = getFileUploadError({
+            acceptedFileTypes,
+            currentCount: files.length,
+            files: nextFiles,
+            maxAttachmentSizeMb: maxAttachmentSizeMb ?? 10,
+            maxAttachments: maxAttachments ?? 4,
+        });
+        setError(validationError);
+        if (validationError)
+            return;
+        onFilesChange([...files, ...nextFiles]);
+        if (inputRef.current)
+            inputRef.current.value = "";
+    };
+    const removeFile = (indexToRemove) => {
+        setError(undefined);
+        onFilesChange(files.filter((_, index) => index !== indexToRemove));
+    };
+    return { addFiles, dragActive, error, inputRef, removeFile, setDragActive };
+}
+function getFieldDescription(description, showConstraints, { maxAttachmentSizeMb, maxAttachments, }) {
+    if (!showConstraints)
+        return description;
+    return `${description} Up to ${maxAttachments} files, ${maxAttachmentSizeMb} MB each.`;
+}
+function getFileUploadError({ acceptedFileTypes, currentCount, files, maxAttachmentSizeMb, maxAttachments, }) {
+    if (currentCount + files.length > maxAttachments) {
+        return `Attach up to ${maxAttachments} files.`;
+    }
+    const oversizedFile = files.find((file) => file.size > maxAttachmentSizeMb * 1024 * 1024);
+    if (oversizedFile) {
+        return `${oversizedFile.name} is larger than ${maxAttachmentSizeMb} MB.`;
+    }
+    const unsupportedFile = files.find((file) => !isAcceptedFile(file, acceptedFileTypes));
+    if (unsupportedFile) {
+        return `${unsupportedFile.name} is not an accepted file type.`;
+    }
+    return undefined;
+}
+function isAcceptedFile(file, acceptedFileTypes) {
+    if (!acceptedFileTypes)
+        return true;
+    const rules = acceptedFileTypes
+        .split(",")
+        .map((rule) => rule.trim().toLowerCase())
+        .filter(Boolean);
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+    return rules.some((rule) => {
+        if (rule.startsWith("."))
+            return fileName.endsWith(rule);
+        if (rule.endsWith("/*"))
+            return fileType.startsWith(rule.slice(0, -1));
+        return fileType === rule;
+    });
+}
+export { FileUploadField };

package/dist/components/ui/form-context.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type FieldPath, type FieldValues } from "react-hook-form";
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+};
+type FormItemContextValue = {
+    id: string;
+};
+declare const FormFieldContext: React.Context<FormFieldContextValue<FieldValues, string> | null>;
+declare const FormItemContext: React.Context<FormItemContextValue | null>;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+export { FormFieldContext, FormItemContext, useFormField };

package/dist/components/ui/form-context.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { useFormContext, useFormState } from "react-hook-form";
+const FormFieldContext = React.createContext(null);
+const FormItemContext = React.createContext(null);
+function useFormFieldContext() {
+    const context = React.useContext(FormFieldContext);
+    if (!context) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    return context;
+}
+function useFormItemContext() {
+    const context = React.useContext(FormItemContext);
+    if (!context) {
+        throw new Error("useFormField should be used within <FormItem>");
+    }
+    return context;
+}
+const useFormField = () => {
+    const fieldContext = useFormFieldContext();
+    const itemContext = useFormItemContext();
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+export { FormFieldContext, FormItemContext, useFormField };

package/dist/components/ui/form.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { Label as LabelPrimitive } from "radix-ui";
+import { Slot } from "radix-ui";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/components/ui/form.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { Controller, FormProvider, } from "react-hook-form";
+import { cn } from "@ciridae/ui/utils";
+import { FormFieldContext, FormItemContext, useFormField } from "@ciridae/ui/form-context";
+import { Label } from "@ciridae/ui/label";
+const Form = FormProvider;
+const FormField = ({ ...props }) => {
+    const contextValue = React.useMemo(() => ({ name: props.name }), [props.name]);
+    return (_jsx(FormFieldContext.Provider, { value: contextValue, children: _jsx(Controller, { ...props }) }));
+};
+function FormItem({ className, ...props }) {
+    const id = React.useId();
+    const contextValue = React.useMemo(() => ({ id }), [id]);
+    return (_jsx(FormItemContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) }));
+}
+function FormLabel({ className, ...props }) {
+    const { error, formItemId } = useFormField();
+    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props }));
+}
+function FormControl({ ...props }) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot.Root, { "data-slot": "form-control", id: formItemId, "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+}
+function FormDescription({ className, ...props }) {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function FormMessage({ className, ...props }) {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-sm text-destructive", className), ...props, children: body }));
+}
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/components/ui/hover-card.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
+declare function HoverCardPortalContainerProvider({ children, container, }: {
+    children: React.ReactNode;
+    container: HTMLElement | null;
+}): import("react/jsx-runtime").JSX.Element;
+declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardPortalContainerProvider };

package/dist/components/ui/hover-card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+const HoverCardPortalContainerContext = React.createContext({
+    container: null,
+});
+function HoverCardPortalContainerProvider({ children, container, }) {
+    const value = React.useMemo(() => ({ container }), [container]);
+    return (_jsx(HoverCardPortalContainerContext.Provider, { value: value, children: children }));
+}
+function HoverCard({ ...props }) {
+    return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return _jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
+    const { container } = React.useContext(HoverCardPortalContainerContext);
+    return (_jsx(HoverCardPrimitive.Portal, { container: container ?? undefined, "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-(--panel-padding) text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }) }));
+}
+export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardPortalContainerProvider };

package/dist/components/ui/input-group.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "@ciridae/ui/button";
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/components/ui/input-group.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@ciridae/ui/utils";
+import { Button } from "@ciridae/ui/button";
+import { Input } from "@ciridae/ui/input";
+import { Textarea } from "@ciridae/ui/textarea";
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-(--control-height) min-w-0 has-[>textarea]:h-auto", 
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", 
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[var(--focus-ring-width)] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", 
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className), ...props }));
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+            "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+            "block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+            "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+        },
+    },
+    defaultVariants: {
+        align: "inline-start",
+    },
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target instanceof HTMLElement && e.target.closest("button")) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector("input")?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+    variants: {
+        size: {
+            xs: "h-(--control-height-xs) gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: "h-(--control-height-sm) gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+            "icon-xs": "size-(--control-height-xs) rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+            "icon-sm": "size-(--control-height-sm) p-0 has-[>svg]:p-0",
+        },
+    },
+    defaultVariants: {
+        size: "xs",
+    },
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/components/ui/input-otp.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { OTPInput } from "input-otp";
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/dist/components/ui/input-otp.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+function InputOTP({ className, containerClassName, ...props }) {
+    return (_jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props }));
+}
+function InputOTPGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-otp-group", className: cn("flex items-center", className), ...props }));
+}
+function InputOTPSlot({ index, className, ...props }) {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[var(--focus-ring-width)] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
+}
+function InputOTPSeparator({ ...props }) {
+    return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));
+}
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export { Input };

package/dist/components/ui/input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@ciridae/ui/utils";
+function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-(--control-height) w-full min-w-0 rounded-md border border-input bg-transparent px-(--control-padding-x) py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-[calc(var(--control-height)-0.375rem)] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Input };

package/dist/components/ui/item.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "@ciridae/ui/separator";
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "muted" | "outline" | null | undefined;
+    size?: "sm" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };