@siyahi/ui 0.1.9-next.33 → 0.1.9-next.35

package/dist/components/ui/carousel.js

@@ -0,0 +1,131 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/components/ui/carousel.tsx
+const CarouselContext = React$1.createContext(null);
+function useCarousel() {
+	const context = React$1.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
+	const onSelect = React$1.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = React$1.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React$1.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = React$1.useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	React$1.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React$1.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: cn("relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
+}
+function CarouselContent({ className, ...props }) {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+			...props
+		})
+	});
+}
+function CarouselItem({ className, ...props }) {
+	const { orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		...props
+	});
+}
+function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-previous",
+		variant,
+		size,
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+}
+function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-next",
+		variant,
+		size,
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+//#endregion
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

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

@@ -0,0 +1,5 @@
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/ui/checkbox.d.ts
+declare function Checkbox({ className, ...props }: Checkbox$1.Root.Props): import("react").JSX.Element;
+//#endregion
+export { Checkbox };

package/dist/components/ui/checkbox.js

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

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

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+import { Combobox as Combobox$1 } from "@base-ui/react";
+//#region src/components/ui/combobox.d.ts
+declare const Combobox: typeof Combobox$1.Root;
+declare function ComboboxValue({ ...props }: Combobox$1.Value.Props): React$1.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Combobox$1.Trigger.Props): React$1.JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: Combobox$1.Input.Props & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+}): React$1.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React$1.JSX.Element;
+declare function ComboboxList({ className, ...props }: Combobox$1.List.Props): React$1.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): React$1.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): React$1.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: Combobox$1.GroupLabel.Props): React$1.JSX.Element;
+declare function ComboboxCollection({ ...props }: Combobox$1.Collection.Props): React$1.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: Combobox$1.Empty.Props): React$1.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: Combobox$1.Separator.Props): React$1.JSX.Element;
+declare function ComboboxChips({ className, ...props }: React$1.ComponentPropsWithRef<typeof Combobox$1.Chips> & Combobox$1.Chips.Props): React$1.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: Combobox$1.Chip.Props & {
+  showRemove?: boolean;
+}): React$1.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: Combobox$1.Input.Props): React$1.JSX.Element;
+declare function useComboboxAnchor(): React$1.RefObject<HTMLDivElement | null>;
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/components/ui/combobox.js

@@ -0,0 +1,162 @@
+"use client";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { cn } from "cn";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Combobox as Combobox$1 } from "@base-ui/react";
+//#region src/components/ui/combobox.tsx
+const Combobox = Combobox$1.Root;
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
+		"data-slot": "combobox-trigger",
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		}),
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox$1.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+			"data-slot": "combobox-content",
+			"data-chips": !!anchor,
+			className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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", className),
+			...props
+		})
+	}) });
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		"data-slot": "combobox-item",
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-slot": "combobox-group",
+		className: cn(className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function ComboboxChips({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
+		"data-slot": "combobox-chips",
+		className: cn("flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-xs"
+			}),
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		"data-slot": "combobox-chip-input",
+		className: cn("min-w-16 flex-1 outline-none", className),
+		...props
+	});
+}
+function useComboboxAnchor() {
+	return React$1.useRef(null);
+}
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/components/ui/command.js

@@ -1,6 +1,6 @@
 "use client";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
 import { cn } from "cn";
 import { CheckIcon, SearchIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -0,0 +1,2 @@
+import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
+export { DirectionProvider, useDirection };

package/dist/components/ui/direction.js

@@ -0,0 +1 @@
+export { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";

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

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
+//#region src/components/ui/drawer.d.ts
+declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: Drawer$1.Root.Props & {
+  showSwipeHandle?: boolean;
+}): React$1.JSX.Element;
+declare function DrawerTrigger({ ...props }: Drawer$1.Trigger.Props): React$1.JSX.Element;
+declare function DrawerPortal({ ...props }: Drawer$1.Portal.Props): React$1.JSX.Element;
+declare function DrawerClose({ ...props }: Drawer$1.Close.Props): React$1.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: Drawer$1.Backdrop.Props): React$1.JSX.Element;
+declare function DrawerSwipeHandle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: Drawer$1.Popup.Props): React$1.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DrawerTitle({ className, ...props }: Drawer$1.Title.Props): React$1.JSX.Element;
+declare function DrawerDescription({ className, ...props }: Drawer$1.Description.Props): React$1.JSX.Element;
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

package/dist/components/ui/drawer.js

@@ -0,0 +1,123 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
+//#region src/components/ui/drawer.tsx
+const DrawerContext = React$1.createContext(null);
+function useDrawer() {
+	const context = React$1.useContext(DrawerContext);
+	if (!context) throw new Error("useDrawer must be used within a Drawer.");
+	return context;
+}
+function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", ...props }) {
+	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+	const contextValue = React$1.useMemo(() => ({
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	}), [
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	]);
+	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Drawer$1.Root, {
+			"data-slot": "drawer",
+			modal,
+			snapPoints,
+			swipeDirection,
+			...props
+		})
+	});
+}
+function DrawerTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Portal, {
+		"data-slot": "drawer-portal",
+		...props
+	});
+}
+function DrawerClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Backdrop, {
+		"data-slot": "drawer-overlay",
+		className: cn("fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className),
+		...props
+	});
+}
+function DrawerSwipeHandle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", className),
+		...props
+	});
+}
+function DrawerContent({ className, children, ...props }) {
+	const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		"data-slot": "drawer-portal",
+		children: [modal === true && /* @__PURE__ */ jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : void 0 }), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
+			"data-slot": "drawer-viewport",
+			"data-modal": modal,
+			className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto",
+			children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
+				"data-slot": "drawer-popup",
+				"data-swipe-axis": swipeAxis,
+				"data-snap-points": hasSnapPoints ? "" : void 0,
+				className: cn("group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className),
+				...props,
+				children: [showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}), /* @__PURE__ */ jsx(Drawer$1.Content, {
+					"data-slot": "drawer-content",
+					className: cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"),
+					children
+				})]
+			})
+		})]
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Title, {
+		"data-slot": "drawer-title",
+		className: cn("font-heading text-base font-medium text-foreground", className),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Description, {
+		"data-slot": "drawer-description",
+		className: cn("text-sm text-balance text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

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

@@ -0,0 +1,13 @@
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/empty.d.ts
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/ui/empty.js

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

package/dist/components/ui/field.js

@@ -1,5 +1,5 @@
-import { Label } from "./label.js";
 import { Separator } from "./separator.js";
+import { Label } from "./label.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";

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

@@ -0,0 +1,7 @@
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.d.ts
+declare function HoverCard({ ...props }: PreviewCard.Root.Props): import("react").JSX.Element;
+declare function HoverCardTrigger({ ...props }: PreviewCard.Trigger.Props): import("react").JSX.Element;
+declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCard.Popup.Props & Pick<PreviewCard.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.tsx
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "hover-card-content",
+				className: cn("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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", className),
+				...props
+			})
+		})
+	});
+}
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };