@codefast/ui 0.3.13-canary.2 → 0.3.13-canary.4

package/dist/components/dropdown-menu.mjs

@@ -0,0 +1,129 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ children, className, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
+		className: cn("flex items-center gap-x-2", "px-2 py-1.5", "rounded-sm outline-hidden", "text-sm", "cursor-default select-none", "focus:bg-accent focus:text-accent-foreground", "data-inset:pl-8", "data-open:bg-accent data-open:text-accent-foreground", className),
+		"data-inset": inset,
+		"data-slot": "dropdown-menu-sub-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", "ml-auto") })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
+			className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "origin-(--radix-dropdown-menu-content-transform-origin)", className),
+			"data-slot": "dropdown-menu-sub-content",
+			...props
+		})
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+			className: cn("z-50", "max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "origin-(--radix-dropdown-menu-content-transform-origin)", className),
+			"data-slot": "dropdown-menu-content",
+			sideOffset,
+			...props
+		})
+	});
+}
+function DropdownMenuItem({ className, inset, variant, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+		className: cn("group/dropdown-menu-item relative flex items-center gap-x-2", "px-2 py-1.5", "rounded-sm outline-hidden", "text-sm", "cursor-default select-none", "focus:bg-accent focus:text-accent-foreground", "aria-disabled:opacity-50", "data-inset:pl-8", "data-[variant=destructive]:text-destructive", "data-[variant=destructive]:focus:bg-destructive/10", "dark:data-[variant=destructive]:focus:bg-destructive/20", "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		"data-inset": inset,
+		"data-slot": "dropdown-menu-item",
+		"data-variant": variant,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ checked, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
+		checked,
+		className: cn("group/dropdown-menu-item relative flex items-center gap-x-2", "py-1.5 pr-2 pl-8", "rounded-sm outline-hidden", "text-sm", "cursor-default select-none", "focus:bg-accent focus:text-accent-foreground", "aria-disabled:opacity-50", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		"data-slot": "dropdown-menu-checkbox-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("absolute flex items-center justify-center", "left-2"),
+			children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
+		className: cn("group/dropdown-menu-item relative flex items-center gap-x-2", "py-1.5 pr-2 pl-8", "rounded-sm outline-hidden", "text-sm", "cursor-default select-none", "focus:bg-accent focus:text-accent-foreground", "aria-disabled:opacity-50", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		"data-slot": "dropdown-menu-radio-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("absolute flex items-center justify-center", "left-2"),
+			children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, { className: cn("size-4", "fill-current") }) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
+		className: cn("flex items-center gap-x-2", "px-2 py-1.5", "text-sm font-semibold", "data-inset:pl-8", className),
+		"data-inset": inset,
+		"data-slot": "dropdown-menu-label",
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
+		className: cn("mx-2 my-1 h-px", "bg-border", className),
+		"data-slot": "dropdown-menu-separator",
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto", "text-xs tracking-widest text-muted-foreground", "group-data-[variant=destructive]/dropdown-menu-item:text-destructive/80", className),
+		"data-slot": "dropdown-menu-shortcut",
+		...props
+	});
+}
+function DropdownMenuArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Arrow, {
+		className: cn("fill-popover", className),
+		"data-slot": "dropdown-menu-arrow",
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/empty.d.mts

@@ -0,0 +1,44 @@
+import { VariantProps } from "../lib/utils.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/empty.d.ts
+declare const emptyMediaVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  variant: {
+    default: string;
+    icon: string[];
+  };
+}, Record<string, never>>;
+type EmptyProps = ComponentProps<"div">;
+declare function Empty({
+  className,
+  ...props
+}: EmptyProps): JSX.Element;
+type EmptyHeaderProps = ComponentProps<"div">;
+declare function EmptyHeader({
+  className,
+  ...props
+}: EmptyHeaderProps): JSX.Element;
+type EmptyMediaProps = ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>;
+declare function EmptyMedia({
+  className,
+  variant,
+  ...props
+}: EmptyMediaProps): JSX.Element;
+type EmptyTitleProps = ComponentProps<"div">;
+declare function EmptyTitle({
+  className,
+  ...props
+}: EmptyTitleProps): JSX.Element;
+type EmptyDescriptionProps = ComponentProps<"p">;
+declare function EmptyDescription({
+  className,
+  ...props
+}: EmptyDescriptionProps): JSX.Element;
+type EmptyContentProps = ComponentProps<"div">;
+declare function EmptyContent({
+  className,
+  ...props
+}: EmptyContentProps): JSX.Element;
+//#endregion
+export { Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps, emptyMediaVariants };

package/dist/components/empty.mjs

@@ -0,0 +1,64 @@
+import { cn, tv } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/empty.tsx
+const emptyMediaVariants = tv({
+	base: ["mb-2 flex shrink-0 items-center justify-center", "[&_svg]:pointer-events-none [&_svg]:shrink-0"],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: [
+			"flex size-10 shrink-0 items-center justify-center",
+			"rounded-xl",
+			"bg-muted text-foreground",
+			"[&_svg:not([class*='size-'])]:size-6"
+		]
+	} }
+});
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-6", "rounded-xl border-dashed", "text-center text-balance", "md:p-12", className),
+		"data-slot": "empty",
+		...props
+	});
+}
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex max-w-sm flex-col items-center gap-2", "text-center", className),
+		"data-slot": "empty-header",
+		...props
+	});
+}
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: emptyMediaVariants({
+			className,
+			variant
+		}),
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-lg font-medium tracking-tight", className),
+		"data-slot": "empty-title",
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-sm/relaxed text-muted-foreground", "[&>a]:underline [&>a]:underline-offset-4", "[&>a:hover]:text-primary", className),
+		"data-slot": "empty-description",
+		...props
+	});
+}
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4", "text-sm text-balance", className),
+		"data-slot": "empty-content",
+		...props
+	});
+}
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants };

package/dist/components/field.d.mts

@@ -0,0 +1,79 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { Label } from "./label.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/field.d.ts
+declare const fieldVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  orientation: {
+    horizontal: string[];
+    responsive: string[];
+    vertical: string[];
+  };
+}, Record<string, never>>;
+type FieldSetProps = ComponentProps<"fieldset">;
+declare function FieldSet({
+  className,
+  ...props
+}: FieldSetProps): JSX.Element;
+type FieldLegendProps = ComponentProps<"legend"> & {
+  variant?: "label" | "legend";
+};
+declare function FieldLegend({
+  className,
+  variant,
+  ...props
+}: FieldLegendProps): JSX.Element;
+type FieldGroupProps = ComponentProps<"div">;
+declare function FieldGroup({
+  className,
+  ...props
+}: FieldGroupProps): JSX.Element;
+type FieldProps = ComponentProps<"div"> & VariantProps<typeof fieldVariants>;
+declare function Field({
+  className,
+  orientation,
+  ...props
+}: FieldProps): JSX.Element;
+type FieldContentProps = ComponentProps<"div">;
+declare function FieldContent({
+  className,
+  ...props
+}: FieldContentProps): JSX.Element;
+type FieldLabelProps = ComponentProps<typeof Label>;
+declare function FieldLabel({
+  className,
+  ...props
+}: FieldLabelProps): JSX.Element;
+type FieldTitleProps = ComponentProps<"div">;
+declare function FieldTitle({
+  className,
+  ...props
+}: FieldTitleProps): JSX.Element;
+type FieldDescriptionProps = ComponentProps<"p">;
+declare function FieldDescription({
+  className,
+  ...props
+}: FieldDescriptionProps): JSX.Element;
+type FieldSeparatorProps = ComponentProps<"div"> & {
+  children?: ComponentProps<"span">["children"];
+};
+declare function FieldSeparator({
+  children,
+  className,
+  ...props
+}: FieldSeparatorProps): JSX.Element;
+interface FieldErrorMessage {
+  message?: string;
+}
+interface FieldErrorProps extends ComponentProps<"div"> {
+  errors?: (FieldErrorMessage | undefined)[];
+}
+declare function FieldError({
+  children,
+  className,
+  errors,
+  ...props
+}: FieldErrorProps): JSX.Element | null;
+//#endregion
+export { Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, fieldVariants };

package/dist/components/field.mjs

@@ -0,0 +1,132 @@
+"use client";
+import { cn, tv } from "../lib/utils.mjs";
+import { Separator } from "./separator.mjs";
+import { Label } from "./label.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+//#region src/components/field.tsx
+const fieldVariants = tv({
+	base: ["group/field flex w-full gap-3", "data-[invalid=true]:text-destructive"],
+	defaultVariants: { orientation: "vertical" },
+	variants: { orientation: {
+		horizontal: [
+			"flex-row items-center",
+			"has-[>[data-slot=field-content]]:items-start",
+			"[&>[data-slot=field-label]]:flex-auto",
+			"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		responsive: [
+			"flex-col",
+			"@md/field-group:flex-row @md/field-group:items-center",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start",
+			"[&>*]: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]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		vertical: [
+			"flex-col",
+			"[&>*]:w-full",
+			"[&>.sr-only]:w-auto"
+		]
+	} }
+});
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3", "has-[>[data-slot=radio-group]]:gap-3", className),
+		"data-slot": "field-set",
+		...props
+	});
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ jsx("legend", {
+		className: cn("mb-3", "text-base font-medium", "data-[variant=label]:text-sm", className),
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		...props
+	});
+}
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		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),
+		"data-slot": "field-group",
+		...props
+	});
+}
+function Field({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: fieldVariants({
+			className,
+			orientation
+		}),
+		"data-orientation": orientation,
+		"data-slot": "field",
+		role: "group",
+		...props
+	});
+}
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("group/field-content flex flex-1 flex-col gap-1.5", "leading-snug", className),
+		"data-slot": "field-content",
+		...props
+	});
+}
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug", "group-data-disabled/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border", "has-data-checked:border-primary has-data-checked:bg-primary/5", "dark:has-data-checked:bg-primary/10", "[&>*]:data-[slot=field]:p-4", className),
+		"data-slot": "field-label",
+		...props
+	});
+}
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", "group-data-disabled/field:opacity-50", className),
+		"data-slot": "field-label",
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		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", "[&>a]:underline [&>a]:underline-offset-4", "[&>a:hover]:text-primary", "[[data-variant=legend]+&]:-mt-1.5", className),
+		"data-slot": "field-description",
+		...props
+	});
+}
+function FieldSeparator({ children, className, ...props }) {
+	const hasContent = Boolean(children);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", "-my-2 h-5 text-sm", "group-data-[variant=outline]/field-group:-mb-2", className),
+		"data-content": hasContent,
+		"data-slot": "field-separator",
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: cn("absolute", "inset-0 top-1/2") }), hasContent ? /* @__PURE__ */ jsx("span", {
+			className: cn("relative block", "mx-auto w-fit px-2", "bg-background text-muted-foreground"),
+			"data-slot": "field-separator-content",
+			children
+		}) : null]
+	});
+}
+function FieldError({ children, className, errors, ...props }) {
+	const fallbackContent = useMemo(() => {
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors.length === 1) return uniqueErrors[0]?.message ?? null;
+		return /* @__PURE__ */ jsx("ul", {
+			className: cn("flex flex-col gap-1", "ml-4", "list-disc"),
+			children: uniqueErrors.map((error) => error?.message ? /* @__PURE__ */ jsx("li", { children: error.message }, error.message) : null)
+		});
+	}, [errors]);
+	const content = children ?? fallbackContent;
+	if (content === null || content === void 0 || content === false) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-sm font-normal text-destructive", className),
+		"data-slot": "field-error",
+		role: "alert",
+		...props,
+		children: content
+	});
+}
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, fieldVariants };

package/dist/components/form.d.mts

@@ -0,0 +1,48 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ComponentProps, JSX, ReactNode } from "react";
+import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
+import { Scope } from "@radix-ui/react-context";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as _$react_hook_form0 from "react-hook-form";
+import { ControllerProps, FieldPath, FieldValues, FormProvider } from "react-hook-form";
+
+//#region src/components/form.d.ts
+type FormProps = ComponentProps<typeof FormProvider>;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: _$react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+type ScopedProps<P> = P & {
+  __scopeFormField?: Scope;
+};
+declare const createFormFieldScope: _$_radix_ui_react_context0.CreateScope;
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ControllerProps<TFieldValues, TName>;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(formFieldProps: ScopedProps<FormFieldProps<TFieldValues, TName>>): JSX.Element;
+type FormItemProps = ComponentProps<"div">;
+declare function FormItem({
+  __scopeFormField,
+  className,
+  ...props
+}: ScopedProps<FormItemProps>): JSX.Element;
+type FormLabelProps = ComponentProps<typeof LabelPrimitive.Root>;
+declare function FormLabel({
+  __scopeFormField,
+  ...props
+}: ScopedProps<FormLabelProps>): JSX.Element;
+type FormControlProps = ComponentProps<typeof Slot>;
+declare function FormControl({
+  __scopeFormField,
+  ...props
+}: ScopedProps<FormControlProps>): JSX.Element;
+type FormDescriptionProps = ComponentProps<"p">;
+declare function FormDescription({
+  __scopeFormField,
+  className,
+  ...props
+}: ScopedProps<FormDescriptionProps>): JSX.Element;
+type FormMessageProps = ComponentProps<"p">;
+declare function FormMessage({
+  __scopeFormField,
+  children,
+  className,
+  ...props
+}: ScopedProps<FormMessageProps>): ReactNode;
+//#endregion
+export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormItem, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, createFormFieldScope };

package/dist/components/form.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Label } from "./label.mjs";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+//#region src/components/form.tsx
+const Form = FormProvider;
+const FORM_FIELD_NAME = "FormField";
+const [createFormFieldContext, createFormFieldScope] = createContextScope(FORM_FIELD_NAME);
+const [FormFieldContextProvider, useFormFieldContext] = createFormFieldContext(FORM_FIELD_NAME);
+function useFormItem(consumerName, scope) {
+	const { id } = useFormItemContext(consumerName, scope);
+	const { name } = useFormFieldContext(consumerName, scope);
+	const { getFieldState } = useFormContext();
+	const fieldState = getFieldState(name, useFormState({ name }));
+	return {
+		formDescriptionId: `form-item-description-${id}`,
+		formItemId: `form-item-${id}`,
+		formMessageId: `form-item-message-${id}`,
+		id,
+		name,
+		...fieldState
+	};
+}
+function FormField(formFieldProps) {
+	const { __scopeFormField, ...props } = formFieldProps;
+	return /* @__PURE__ */ jsx(FormFieldContextProvider, {
+		name: props.name,
+		scope: __scopeFormField,
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+}
+const [FormItemContextProvider, useFormItemContext] = createFormFieldContext("FormItem");
+function FormItem({ __scopeFormField, className, ...props }) {
+	return /* @__PURE__ */ jsx(FormItemContextProvider, {
+		id: useId(),
+		scope: __scopeFormField,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-2", className),
+			"data-slot": "form-item",
+			...props
+		})
+	});
+}
+const FORM_LABEL_NAME = "FormLabel";
+function FormLabel({ __scopeFormField, ...props }) {
+	const { error, formItemId } = useFormItem(FORM_LABEL_NAME, __scopeFormField);
+	return /* @__PURE__ */ jsx(Label, {
+		"data-invalid": error ? true : void 0,
+		"data-slot": "form-label",
+		htmlFor: formItemId,
+		...props
+	});
+}
+const FORM_CONTROL_NAME = "FormControl";
+function FormControl({ __scopeFormField, ...props }) {
+	const { error, formDescriptionId, formItemId, formMessageId } = useFormItem(FORM_CONTROL_NAME, __scopeFormField);
+	return /* @__PURE__ */ jsx(Slot, {
+		"aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+		"aria-invalid": Boolean(error),
+		"data-slot": "form-control",
+		id: formItemId,
+		...props
+	});
+}
+function FormDescription({ __scopeFormField, className, ...props }) {
+	const { formDescriptionId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-xs text-muted-foreground", className),
+		"data-slot": "form-description",
+		id: formDescriptionId,
+		...props
+	});
+}
+const FORM_MESSAGE_NAME = "FormMessage";
+function FormMessage({ __scopeFormField, children, className, ...props }) {
+	const { error, formMessageId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
+	const body = error?.message ?? children;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-xs", error?.message ? "font-medium text-destructive" : "text-muted-foreground", className),
+		"data-slot": "form-message",
+		id: formMessageId,
+		...props,
+		children: body
+	});
+}
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, createFormFieldScope };

package/dist/components/hover-card.d.mts

@@ -0,0 +1,26 @@
+import { ComponentProps, JSX } from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+//#region src/components/hover-card.d.ts
+type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root>;
+declare function HoverCard({
+  ...props
+}: HoverCardProps): JSX.Element;
+type HoverCardTriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;
+declare function HoverCardTrigger({
+  ...props
+}: HoverCardTriggerProps): JSX.Element;
+type HoverCardContentProps = ComponentProps<typeof HoverCardPrimitive.Content>;
+declare function HoverCardContent({
+  align,
+  className,
+  sideOffset,
+  ...props
+}: HoverCardContentProps): JSX.Element;
+type HoverCardArrowProps = ComponentProps<typeof HoverCardPrimitive.Arrow>;
+declare function HoverCardArrow({
+  className,
+  ...props
+}: HoverCardArrowProps): JSX.Element;
+//#endregion
+export { HoverCard, HoverCardArrow, type HoverCardArrowProps, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps };

package/dist/components/hover-card.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+//#region src/components/hover-card.tsx
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCardPrimitive.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+function HoverCardContent({ align = "center", className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+		align,
+		className: cn("z-50", "min-w-32 p-4", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "origin-(--radix-hover-card-content-transform-origin)", className),
+		"data-slot": "hover-card-content",
+		sideOffset,
+		...props
+	}) });
+}
+function HoverCardArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(HoverCardPrimitive.Arrow, {
+		className: cn("fill-popover", className),
+		"data-slot": "hover-card-arrow",
+		...props
+	});
+}
+//#endregion
+export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger };