@ashwa-io/ui 0.0.3 → 0.0.5

package/dist/components/molecule/FormField/FormField.js

@@ -0,0 +1,47 @@
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../../ui/field.js";
+import { cn } from "../../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/components/molecule/FormField/FormField.tsx
+const FormField = (props) => {
+	const { children, label, hideLabel = false, description, error, required = false, disabled = false, orientation = "vertical", id: idProp, "data-testid": testId } = props;
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const descriptionId = description ? `${id}-description` : void 0;
+	const errorId = error ? `${id}-error` : void 0;
+	const control = children({
+		id,
+		"aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": error ? true : void 0,
+		"aria-required": required ? true : void 0,
+		disabled
+	});
+	const labelNode = /* @__PURE__ */ jsxs(FieldLabel, {
+		htmlFor: id,
+		className: cn(hideLabel && "sr-only"),
+		children: [label, required && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "text-destructive",
+			children: "*"
+		})]
+	});
+	const helpNodes = /* @__PURE__ */ jsxs(Fragment, { children: [description && /* @__PURE__ */ jsx(FieldDescription, {
+		id: descriptionId,
+		children: description
+	}), error && /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		children: error
+	})] });
+	return /* @__PURE__ */ jsx(Field, {
+		orientation,
+		"data-invalid": error ? true : void 0,
+		"data-disabled": disabled || void 0,
+		"data-testid": testId,
+		children: orientation === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [control, /* @__PURE__ */ jsxs(FieldContent, { children: [labelNode, helpNodes] })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			labelNode,
+			control,
+			helpNodes
+		] })
+	});
+};
+export { FormField };

package/dist/components/molecule/FormField/index.d.ts

@@ -0,0 +1,2 @@
+import { FormField, FormFieldControlProps, FormFieldProps } from "./FormField.js";
+export { FormField, type FormFieldControlProps, type FormFieldProps };

package/dist/components/molecule/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  /** Names the dialog (required). */
+  title: string;
+  description?: string;
+  /** Body. */
+  children: React.ReactNode;
+  /** e.g. Cancel + Save buttons, right-aligned. */
+  footer?: React.ReactNode;
+  size?: ModalSize;
+  /** Fixed height (min(40rem, 85dvh)): the body scrolls, header and footer stay put. */
+  fixedHeight?: boolean;
+  /** Body without padding, for lists and tables that run edge to edge. */
+  flush?: boolean;
+  /** false: no close button; Escape and outside clicks do nothing (blocking flows). */
+  closable?: boolean;
+  'data-testid'?: string;
+}
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/molecule/Modal/Modal.js

@@ -0,0 +1,48 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+// src/components/molecule/Modal/Modal.tsx
+const SIZE = {
+	sm: "sm:max-w-md",
+	md: "sm:max-w-lg",
+	lg: "sm:max-w-xl",
+	xl: "sm:max-w-2xl",
+	"2xl": "sm:max-w-3xl"
+};
+const FOCUSABLE = "a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex=\"-1\"])";
+const Modal = (props) => {
+	const { open, onClose, title, description, children, footer, size = "md", fixedHeight = false, flush = false, closable = true, "data-testid": testId } = props;
+	const [needsTabStop, setNeedsTabStop] = useState(false);
+	const bodyRef = useCallback((body) => {
+		if (!body) return void 0;
+		const check = () => setNeedsTabStop(body.scrollHeight > body.clientHeight && !body.querySelector(FOCUSABLE));
+		const observer = new ResizeObserver(check);
+		observer.observe(body);
+		Array.from(body.children).forEach((child) => observer.observe(child));
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next && closable) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: closable,
+			"data-testid": testId,
+			className: cn("flex max-h-[85dvh] flex-col", SIZE[size], fixedHeight && "h-[min(40rem,85dvh)]"),
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+				/* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					"data-slot": "modal-body",
+					tabIndex: needsTabStop ? 0 : void 0,
+					className: cn("min-h-0 flex-1 overflow-y-auto", flush ? "-m-4" : "-m-1 p-1"),
+					children
+				}),
+				footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+			]
+		})
+	});
+};
+export { Modal };

package/dist/components/molecule/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import { Modal, ModalProps, ModalSize } from "./Modal.js";
+export { Modal, type ModalProps, type ModalSize };

package/dist/components/molecule/Popover/Popover.d.ts

@@ -0,0 +1,24 @@
+import "../../atomic/Button/index.js";
+import { ButtonVariant } from "../../atomic/Button/buttonVariant.js";
+import { IconComponent, OverlayAlign, OverlaySide, Size } from "../../../lib/types.js";
+import React from "react";
+export type PopoverWidth = 'sm' | 'md' | 'lg';
+export interface PopoverProps {
+  /** Trigger text (the trigger's aria-label when iconOnly); also names the popup. */
+  label: string;
+  icon?: IconComponent;
+  iconOnly?: boolean;
+  /** Trigger look. */
+  variant?: ButtonVariant;
+  size?: Size;
+  children: React.ReactNode;
+  /** Pass with onOpenChange to control it; otherwise it manages itself. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: OverlaySide;
+  align?: OverlayAlign;
+  width?: PopoverWidth;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+export declare const Popover: React.FC<PopoverProps>;

package/dist/components/molecule/Popover/Popover.js

@@ -0,0 +1,38 @@
+import { buttonLook } from "../../atomic/Button/buttonLook.js";
+import { Button } from "../../ui/button.js";
+import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/molecule/Popover/Popover.tsx
+const WIDTH = {
+	sm: "w-56",
+	md: "w-72",
+	lg: "w-96"
+};
+const Popover = (props) => {
+	const { label, icon: Icon, iconOnly = false, variant = "outline", size = "md", children, open, onOpenChange, side = "bottom", align = "start", width = "md", disabled = false, "data-testid": testId } = props;
+	const look = buttonLook(variant, size, iconOnly);
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open,
+		onOpenChange: (next) => onOpenChange?.(next),
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
+			"aria-label": iconOnly ? label : void 0,
+			"data-testid": testId,
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: look.variant,
+				size: look.size
+			}),
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				"data-icon": iconOnly ? void 0 : "inline-start",
+				"aria-hidden": true
+			}), !iconOnly && label]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side,
+			align,
+			"aria-label": label,
+			className: WIDTH[width],
+			children
+		})]
+	});
+};
+export { Popover };

package/dist/components/molecule/Popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover, PopoverProps, PopoverWidth } from "./Popover.js";
+export { Popover, type PopoverProps, type PopoverWidth };

package/dist/components/molecule/Toaster/Toaster.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+/** Mount once at the app root. */
+export declare const Toaster: React.FC;

package/dist/components/molecule/Toaster/Toaster.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Toaster } from "sonner";
+// src/components/molecule/Toaster/Toaster.tsx
+const TOKENS = {
+	"--normal-bg": "var(--popover)",
+	"--normal-text": "var(--popover-foreground)",
+	"--normal-border": "var(--border)",
+	"--border-radius": "var(--radius)"
+};
+/** Mount once at the app root. */
+const Toaster$1 = () => /* @__PURE__ */ jsx(Toaster, {
+	position: "bottom-right",
+	style: TOKENS,
+	toastOptions: { classNames: {
+		toast: "font-sans",
+		description: "text-muted-foreground!"
+	} }
+});
+export { Toaster$1 as Toaster };

package/dist/components/molecule/Toaster/index.d.ts

@@ -0,0 +1,3 @@
+import { ToastOptions, toast } from "./toast.js";
+import { Toaster } from "./Toaster.js";
+export { type ToastOptions, Toaster, toast };

package/dist/components/molecule/Toaster/toast.d.ts

@@ -0,0 +1,13 @@
+export interface ToastOptions {
+  description?: string;
+  duration?: number;
+}
+/** Works anywhere, including outside React (axios interceptors); needs one mounted <Toaster />. */
+export declare const toast: {
+  message: (message: string, options?: ToastOptions) => string | number;
+  success: (message: string, options?: ToastOptions) => string | number;
+  error: (message: string, options?: ToastOptions) => string | number;
+  info: (message: string, options?: ToastOptions) => string | number;
+  warning: (message: string, options?: ToastOptions) => string | number;
+  dismiss: (id?: string | number) => void;
+};

package/dist/components/molecule/Toaster/toast.js

@@ -0,0 +1,18 @@
+import { toast } from "sonner";
+// src/components/molecule/Toaster/toast.ts
+const show = (notify) => (message, options) => notify(message, {
+	description: options?.description,
+	duration: options?.duration
+});
+/** Works anywhere, including outside React (axios interceptors); needs one mounted <Toaster />. */
+const toast$1 = {
+	message: show(toast.message),
+	success: show(toast.success),
+	error: show(toast.error),
+	info: show(toast.info),
+	warning: show(toast.warning),
+	dismiss: (id) => {
+		toast.dismiss(id);
+	}
+};
+export { toast$1 as toast };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,61 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/ui/alert-dialog.tsx
+const AlertDialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+};
+const AlertDialogPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+};
+const AlertDialogOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+};
+const AlertDialogContent = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", className),
+		...props
+	})] });
+};
+const AlertDialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+};
+const AlertDialogFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+};
+const AlertDialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+};
+const AlertDialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+};
+export { AlertDialog$1 as AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,18 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { Checkbox } from "@base-ui/react/checkbox";
+// src/components/ui/checkbox.tsx
+const Checkbox$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer border-input group-has-[:focus-visible]/field-label:not-data-checked:border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+};
+export { Checkbox$1 as Checkbox };

package/dist/components/ui/dialog.js

@@ -0,0 +1,78 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import "react";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/ui/dialog.tsx
+const Dialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+};
+const DialogPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+};
+const DialogOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+};
+const DialogContent = ({ className, children, showCloseButton = true, ...props }) => {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: cn("bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+			"data-slot": "dialog-close",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "absolute top-2 right-2",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+};
+const DialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+};
+const DialogFooter = ({ className, showCloseButton = false, children, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+			children: "Close"
+		})]
+	});
+};
+const DialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("font-heading text-base leading-none font-medium", className),
+		...props
+	});
+};
+const DialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+};
+export { Dialog$1 as Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,42 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "lucide-react";
+import "react";
+import { Menu } from "@base-ui/react/menu";
+// src/components/ui/dropdown-menu.tsx
+const DropdownMenu = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+};
+const DropdownMenuTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+};
+const DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden", className),
+			...props
+		})
+	}) });
+};
+const DropdownMenuItem = ({ className, inset, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+};
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };

package/dist/components/ui/field.js

@@ -0,0 +1,65 @@
+import { Label } from "./label.js";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+// src/components/ui/field.tsx
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		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 *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const Field = ({ className, orientation = "vertical", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+};
+const FieldContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
+		...props
+	});
+};
+const FieldLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cn("group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-2.5", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
+		...props
+	});
+};
+const FieldDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		...props
+	});
+};
+const 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 /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-destructive text-sm font-normal", className),
+		...props,
+		children: content
+	});
+};
+export { Field, FieldContent, FieldDescription, FieldError, FieldLabel };

package/dist/components/ui/input.js

@@ -0,0 +1,14 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Input } from "@base-ui/react/input";
+// src/components/ui/input.tsx
+const Input$1 = ({ className, type, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		...props
+	});
+};
+export { Input$1 as Input };

package/dist/components/ui/label.js

@@ -0,0 +1,12 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/label.tsx
+const Label = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 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 };

package/dist/components/ui/popover.js

@@ -0,0 +1,32 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Popover } from "@base-ui/react/popover";
+// src/components/ui/popover.tsx
+const Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+};
+const PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+};
+const PopoverContent = ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100", className),
+			...props
+		})
+	}) });
+};
+export { Popover$1 as Popover, PopoverContent, PopoverTrigger };