xiod-ui 1.0.0

package/dist/components/ruler-picker.d.ts

@@ -0,0 +1,27 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/ruler-picker.d.ts
+export declare const rulerPickerVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tickContainerVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const majorTickVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface RulerPickerProps extends Omit<React$1.ComponentPropsWithRef<"div">, "onChange" | "value" | "defaultValue">, VariantProps<typeof rulerPickerVariants> {
+  min?: number;
+  max?: number;
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  itemWidth?: number;
+  subDivisions?: number;
+}
+declare function RulerPicker({ className, min, max, value, defaultValue, onChange, itemWidth, subDivisions, size, ref, ...props }: RulerPickerProps): React$1.JSX.Element;
+//#endregion
+export { RulerPicker };

package/dist/components/ruler-picker.js

@@ -0,0 +1,253 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/ruler-picker.tsx
+const rulerPickerVariants = cva("relative overflow-hidden bg-background border border-border/80 shadow-xs/5 select-none focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-1 focus-within:ring-offset-background before:absolute before:inset-0 before:pointer-events-none before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] not-dark:bg-clip-padding", {
+	variants: { size: {
+		sm: "h-14 rounded-xl before:rounded-[calc(var(--radius-xl)-1px)] w-full",
+		md: "h-16 rounded-2xl before:rounded-[calc(var(--radius-2xl)-1px)] w-full",
+		lg: "h-20 rounded-2xl before:rounded-[calc(var(--radius-2xl)-1px)] w-full"
+	} },
+	defaultVariants: { size: "md" }
+});
+const labelVariants = cva("relative z-20 text-foreground font-semibold tabular-nums select-none origin-bottom transition-colors duration-200", {
+	variants: { size: {
+		sm: "text-[10px] mb-0.5",
+		md: "text-xs mb-0.5",
+		lg: "text-sm mb-1"
+	} },
+	defaultVariants: { size: "md" }
+});
+const tickContainerVariants = cva("relative flex w-full items-end justify-center", {
+	variants: { size: {
+		sm: "h-3.5 mt-0.5",
+		md: "h-4 mt-0.5",
+		lg: "h-5 mt-1"
+	} },
+	defaultVariants: { size: "md" }
+});
+const majorTickVariants = cva("w-[2px] rounded-t-full bg-muted-foreground/60", {
+	variants: { size: {
+		sm: "h-3",
+		md: "h-4",
+		lg: "h-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+function RulerPicker({ className, min = 0, max = 100, value, defaultValue, onChange, itemWidth = 80, subDivisions = 4, size = "md", ref, ...props }) {
+	const rootRef = React$1.useRef(null);
+	const scrollContainerRef = React$1.useRef(null);
+	const isMountedRef = React$1.useRef(false);
+	const itemWidthRef = React$1.useRef(itemWidth);
+	React$1.useEffect(() => {
+		itemWidthRef.current = itemWidth;
+	}, [itemWidth]);
+	const internalValueRef = React$1.useRef(null);
+	const [activeValue, setActiveValue] = React$1.useState(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : min);
+	React$1.useImperativeHandle(ref, () => rootRef.current);
+	const updateStyles = React$1.useCallback((container) => {
+		const scrollLeft = container.scrollLeft;
+		const children = container.children;
+		const length = children.length;
+		const closestVal = min + Math.max(0, Math.min(length - 1, Math.round(scrollLeft / itemWidth)));
+		for (let i = 0; i < length; i++) {
+			const itemEl = children[i];
+			if (!itemEl) continue;
+			const distance = Math.abs(i * itemWidth - scrollLeft);
+			const maxDistance = itemWidth * 1.2;
+			const pct = Math.min(1, distance / maxDistance);
+			const opacity = 1 - pct * .7;
+			const scale = 1.1 - pct * .2;
+			const label = itemEl.firstElementChild;
+			if (label && label.getAttribute("data-slot") === "ruler-picker-label") {
+				label.style.opacity = opacity.toString();
+				label.style.transform = `scale(${scale})`;
+			}
+		}
+		return closestVal;
+	}, [min, itemWidth]);
+	const onScroll = React$1.useCallback((e) => {
+		const container = e.currentTarget;
+		const closestVal = updateStyles(container);
+		if (closestVal !== internalValueRef.current) {
+			internalValueRef.current = closestVal;
+			setActiveValue(closestVal);
+			onChange?.(closestVal);
+		}
+	}, [updateStyles, onChange]);
+	React$1.useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container || value === void 0) return;
+		const targetScrollLeft = (value - min) * itemWidth;
+		if (Math.round(container.scrollLeft / itemWidth) + min !== value) {
+			container.scrollTo({
+				left: targetScrollLeft,
+				behavior: isMountedRef.current ? "smooth" : "instant"
+			});
+			updateStyles(container);
+		}
+	}, [
+		value,
+		min,
+		itemWidth,
+		updateStyles
+	]);
+	React$1.useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		container.scrollLeft = ((value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : min) - min) * itemWidth;
+		updateStyles(container);
+		isMountedRef.current = true;
+	}, [
+		min,
+		itemWidth,
+		value,
+		defaultValue,
+		updateStyles
+	]);
+	React$1.useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		let snapTimeout = null;
+		const handleWheel = (e) => {
+			const scrollAmount = e.deltaY || e.deltaX;
+			if (scrollAmount !== 0) {
+				e.preventDefault();
+				container.classList.remove("scroll-smooth");
+				container.scrollLeft += scrollAmount * .8;
+				if (snapTimeout) clearTimeout(snapTimeout);
+				snapTimeout = setTimeout(() => {
+					container.classList.add("scroll-smooth");
+					const closestIndex = Math.round(container.scrollLeft / itemWidthRef.current);
+					container.scrollTo({
+						left: closestIndex * itemWidthRef.current,
+						behavior: "smooth"
+					});
+				}, 150);
+			}
+		};
+		container.addEventListener("wheel", handleWheel, { passive: false });
+		return () => {
+			container.removeEventListener("wheel", handleWheel);
+			if (snapTimeout) clearTimeout(snapTimeout);
+		};
+	}, []);
+	const onMouseDown = (e) => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		e.preventDefault();
+		container.classList.remove("scroll-smooth", "snap-x", "snap-mandatory");
+		const startX = e.pageX - container.offsetLeft;
+		const startScrollLeft = container.scrollLeft;
+		let isMoving = false;
+		const onMouseMove = (moveEvent) => {
+			isMoving = true;
+			document.body.style.cursor = "grabbing";
+			const walk = (moveEvent.pageX - container.offsetLeft - startX) * 1.5;
+			container.scrollLeft = startScrollLeft - walk;
+		};
+		const onMouseUp = () => {
+			document.body.style.cursor = "";
+			container.classList.add("scroll-smooth", "snap-x", "snap-mandatory");
+			if (isMoving) {
+				const scrollLeft = container.scrollLeft;
+				const closestValue = Math.round(scrollLeft / itemWidth) * itemWidth;
+				container.scrollTo({
+					left: closestValue,
+					behavior: "smooth"
+				});
+			}
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("mouseup", onMouseUp);
+		};
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseUp);
+	};
+	const onKeyDown = (e) => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			const currentSnapped = Math.round(container.scrollLeft / itemWidth);
+			const nextSnapped = Math.min(max - min, currentSnapped + 1);
+			container.scrollTo({
+				left: nextSnapped * itemWidth,
+				behavior: "smooth"
+			});
+		} else if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			const currentSnapped = Math.round(container.scrollLeft / itemWidth);
+			const prevSnapped = Math.max(0, currentSnapped - 1);
+			container.scrollTo({
+				left: prevSnapped * itemWidth,
+				behavior: "smooth"
+			});
+		}
+	};
+	const range = max - min;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: cn(rulerPickerVariants({ size }), className),
+		onMouseDown,
+		onKeyDown,
+		tabIndex: 0,
+		"aria-label": "Ruler Picker",
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": activeValue,
+		role: "slider",
+		"data-slot": "ruler-picker",
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "pointer-events-none absolute inset-y-0 left-1/2 z-10 flex -translate-x-1/2 flex-col items-center",
+				"data-slot": "ruler-picker-indicator",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("bg-primary shadow-xs/5 rounded-b-xs", size === "sm" ? "h-2 w-3.5" : size === "lg" ? "h-3.5 w-6" : "h-2.5 w-4.5"),
+					style: { clipPath: "polygon(0 0, 100% 0, 70% 100%, 30% 100%)" }
+				}), /* @__PURE__ */ jsx("div", { className: cn("w-[1.5px] grow bg-primary", size === "sm" && "w-px", size === "lg" && "w-[2px]") })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollContainerRef,
+				onScroll,
+				className: cn("h-full w-full overflow-x-auto flex items-end snap-x snap-mandatory scroll-smooth scrollbar-none cursor-grab active:cursor-grabbing", size === "lg" ? "pb-2" : "pb-1.5"),
+				style: {
+					paddingLeft: `calc(50% - ${itemWidth / 2}px)`,
+					paddingRight: `calc(50% - ${itemWidth / 2}px)`
+				},
+				"data-slot": "ruler-picker-track",
+				children: Array.from({ length: range + 1 }, (_, index) => {
+					const val = min + index;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col justify-end items-center h-full shrink-0 relative",
+						style: { width: itemWidth },
+						"data-slot": "ruler-picker-item",
+						"data-value": val,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: labelVariants({ size }),
+							"data-slot": "ruler-picker-label",
+							children: val
+						}), /* @__PURE__ */ jsxs("div", {
+							className: tickContainerVariants({ size }),
+							"data-slot": "ruler-picker-ticks",
+							children: [/* @__PURE__ */ jsx("div", { className: majorTickVariants({ size }) }), val !== max && Array.from({ length: subDivisions }).map((_subdivision, idx) => {
+								const stepPercent = (idx + 1) / (subDivisions + 1) * 100;
+								const isMedium = subDivisions === 9 && idx === 4;
+								return /* @__PURE__ */ jsx("div", {
+									className: cn("absolute bottom-0 -translate-x-1/2 w-[1.2px] rounded-t-full bg-muted-foreground/30", size === "sm" ? isMedium ? "h-2 bg-muted-foreground/45" : "h-1.5" : size === "lg" ? isMedium ? "h-4 bg-muted-foreground/45" : "h-3" : isMedium ? "h-3 bg-muted-foreground/45" : "h-2"),
+									style: { left: `calc(50% + ${stepPercent}%)` }
+								}, idx);
+							})]
+						})]
+					}, val);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", { className: cn("from-background via-background/50 pointer-events-none absolute inset-y-0 left-0 z-30 bg-linear-to-r to-transparent", size === "sm" ? "w-12" : size === "lg" ? "w-20" : "w-16") }),
+			/* @__PURE__ */ jsx("div", { className: cn("from-background via-background/50 pointer-events-none absolute inset-y-0 right-0 z-30 bg-linear-to-l to-transparent", size === "sm" ? "w-12" : size === "lg" ? "w-20" : "w-16") })
+		]
+	});
+}
+//#endregion
+export { RulerPicker, labelVariants, majorTickVariants, rulerPickerVariants, tickContainerVariants };

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,13 @@
+import { ScrollBar, ScrollBarProps } from "./scroll-bar.js";
+import * as React$1 from "react";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-area.d.ts
+declare function ScrollArea({ className, children, scrollFade, scrollbarGutter, scrollbarSize, scrollbarVariant, scrollbarVisibility, ...props }: ScrollArea$1.Root.Props & {
+  scrollFade?: boolean;
+  scrollbarGutter?: boolean;
+  scrollbarSize?: ScrollBarProps["size"];
+  scrollbarVariant?: ScrollBarProps["variant"];
+  scrollbarVisibility?: ScrollBarProps["visibility"];
+}): React$1.JSX.Element;
+//#endregion
+export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.js

@@ -0,0 +1,34 @@
+"use client";
+import { ScrollBar } from "./scroll-bar.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-area.tsx
+function ScrollArea({ className, children, scrollFade = false, scrollbarGutter = false, scrollbarSize = "sm", scrollbarVariant = "default", scrollbarVisibility = "auto", ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+		className: cn("size-full min-h-0", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				className: cn("h-full overscroll-contain rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5"),
+				"data-slot": "scroll-area-viewport",
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "vertical",
+				size: scrollbarSize,
+				variant: scrollbarVariant,
+				visibility: scrollbarVisibility
+			}),
+			/* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "horizontal",
+				size: scrollbarSize,
+				variant: scrollbarVariant,
+				visibility: scrollbarVisibility
+			}),
+			/* @__PURE__ */ jsx(ScrollArea$1.Corner, { "data-slot": "scroll-area-corner" })
+		]
+	});
+}
+//#endregion
+export { ScrollArea, ScrollBar };

package/dist/components/scroll-bar.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-bar.d.ts
+declare const scrollBarVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+  variant?: "default" | "card" | null | undefined;
+  visibility?: "auto" | "always" | "hover" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ScrollBarProps extends ScrollArea.Scrollbar.Props, VariantProps<typeof scrollBarVariants> {}
+declare function ScrollBar({ className, orientation, size, variant, visibility, ...props }: ScrollBarProps): React$1.JSX.Element;
+//#endregion
+export { ScrollBar, scrollBarVariants };

package/dist/components/scroll-bar.js

@@ -0,0 +1,47 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-bar.tsx
+const scrollBarVariants = cva("m-1 flex select-none touch-none transition-[opacity,width,height] duration-200 ease-out opacity-0 z-50", {
+	variants: {
+		size: {
+			sm: "data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1 data-hovering:data-[orientation=horizontal]:h-1.5 data-hovering:data-[orientation=vertical]:w-1.5 data-scrolling:data-[orientation=horizontal]:h-1.5 data-scrolling:data-[orientation=vertical]:w-1.5",
+			md: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-hovering:data-[orientation=horizontal]:h-2.5 data-hovering:data-[orientation=vertical]:w-2.5 data-scrolling:data-[orientation=horizontal]:h-2.5 data-scrolling:data-[orientation=vertical]:w-2.5",
+			lg: "data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-hovering:data-[orientation=horizontal]:h-3.5 data-hovering:data-[orientation=vertical]:w-3.5 data-scrolling:data-[orientation=horizontal]:h-3.5 data-scrolling:data-[orientation=vertical]:w-3.5"
+		},
+		variant: {
+			default: "bg-transparent",
+			card: "bg-muted/30 border border-border/40 rounded-full"
+		},
+		visibility: {
+			auto: "delay-300 data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100",
+			always: "opacity-100",
+			hover: "data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100"
+		}
+	},
+	defaultVariants: {
+		size: "sm",
+		variant: "default",
+		visibility: "auto"
+	}
+});
+function ScrollBar({ className, orientation = "vertical", size, variant, visibility, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		className: cn(scrollBarVariants({
+			size,
+			variant,
+			visibility
+		}), className),
+		"data-slot": "scroll-bar",
+		orientation,
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+			className: cn("relative flex-1 rounded-full bg-foreground/20 transition-[background-color,transform] duration-150 ease-out cursor-grab active:cursor-grabbing hover:bg-foreground/35 active:bg-foreground/50", "after:absolute after:inset-0 in-[[data-slot=scroll-bar][data-orientation=vertical]]:after:-inset-x-2.5 in-[[data-slot=scroll-bar][data-orientation=horizontal]]:after:-inset-y-2.5 pointer-coarse:in-[[data-slot=scroll-bar][data-orientation=vertical]]:after:-inset-x-4 pointer-coarse:in-[[data-slot=scroll-bar][data-orientation=horizontal]]:after:-inset-y-4"),
+			"data-slot": "scroll-bar-thumb"
+		})
+	});
+}
+//#endregion
+export { ScrollBar, scrollBarVariants };

package/dist/components/select.d.ts

@@ -0,0 +1,29 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/components/select.d.ts
+declare const Select: typeof Select$1.Root;
+declare const selectTriggerVariants: (props?: ({
+  size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SelectButtonProps extends useRender.ComponentProps<"button"> {
+  size?: VariantProps<typeof selectTriggerVariants>["size"];
+}
+declare function SelectButton({ className, size, render, children, ...props }: SelectButtonProps): React$1.ReactElement;
+declare function SelectTrigger({ className, size, children, ...props }: Select$1.Trigger.Props & VariantProps<typeof selectTriggerVariants>): React$1.JSX.Element;
+declare function SelectValue({ className, ...props }: Select$1.Value.Props): React$1.JSX.Element;
+declare function SelectPopup({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, anchor, ...props }: Select$1.Popup.Props & {
+  side?: Select$1.Positioner.Props["side"];
+  sideOffset?: Select$1.Positioner.Props["sideOffset"];
+  align?: Select$1.Positioner.Props["align"];
+  alignOffset?: Select$1.Positioner.Props["alignOffset"];
+  alignItemWithTrigger?: Select$1.Positioner.Props["alignItemWithTrigger"];
+  anchor?: Select$1.Positioner.Props["anchor"];
+}): React$1.JSX.Element;
+declare function SelectItem({ className, children, ...props }: Select$1.Item.Props): React$1.JSX.Element;
+declare function SelectSeparator({ className, ...props }: Select$1.Separator.Props): React$1.JSX.Element;
+declare function SelectGroup(props: Select$1.Group.Props): React$1.JSX.Element;
+declare function SelectGroupLabel(props: Select$1.GroupLabel.Props): React$1.JSX.Element;
+//#endregion
+export { Select, SelectButton, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };

package/dist/components/select.js

@@ -0,0 +1,140 @@
+"use client";
+import { cn } from "cn";
+import { ChevronDown } from "xiod-icons/icons/ChevronDown";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { UnfoldMore } from "xiod-icons/icons/UnfoldMore";
+import { Select as Select$1 } from "@base-ui/react/select";
+import { ChevronUp } from "xiod-icons/icons/ChevronUp";
+//#region src/components/select.tsx
+const Select = Select$1.Root;
+const selectTriggerVariants = cva("relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", {
+	defaultVariants: { size: "default" },
+	variants: { size: {
+		default: "",
+		lg: "min-h-10 sm:min-h-9",
+		sm: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7"
+	} }
+});
+const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4";
+function SelectButton({ className, size, render, children, ...props }) {
+	const typeValue = render ? void 0 : "button";
+	const defaultProps = {
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1 truncate in-data-placeholder:text-muted-foreground/72",
+			children
+		}), /* @__PURE__ */ jsx(UnfoldMore, { className: selectTriggerIconClassName })] }),
+		className: cn(selectTriggerVariants({ size }), "min-w-0", className),
+		"data-slot": "select-button",
+		type: typeValue
+	};
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		className: cn(selectTriggerVariants({ size }), className),
+		"data-slot": "select-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
+			"data-slot": "select-icon",
+			children: /* @__PURE__ */ jsx(UnfoldMore, { className: selectTriggerIconClassName })
+		})]
+	});
+}
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Value, {
+		className: cn("flex-1 truncate data-placeholder:text-muted-foreground", className),
+		"data-slot": "select-value",
+		...props
+	});
+}
+function SelectPopup({ className, children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, alignItemWithTrigger = true, anchor, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+		align,
+		alignItemWithTrigger,
+		alignOffset,
+		anchor,
+		className: "z-50 select-none",
+		"data-slot": "select-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
+			className: "origin-(--transform-origin) text-foreground transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-97 data-starting-style:scale-97 data-ending-style:opacity-0 data-starting-style:opacity-0",
+			"data-slot": "select-popup",
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+					className: "top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover",
+					"data-slot": "select-scroll-up-arrow",
+					children: /* @__PURE__ */ jsx(ChevronUp, { className: "relative size-4.5 sm:size-4" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+					children: /* @__PURE__ */ jsx(Select$1.List, {
+						className: cn("max-h-(--available-height) overflow-y-auto p-1", className),
+						"data-slot": "select-list",
+						children
+					})
+				}),
+				/* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+					className: "bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover",
+					"data-slot": "select-scroll-down-arrow",
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "relative size-4.5 sm:size-4" })
+				})
+			]
+		})
+	}) });
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		className: cn("grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "select-item",
+		...props,
+		children: [/* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+			className: "col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/1500/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx(Select$1.ItemText, {
+			className: "col-start-2 min-w-0",
+			children
+		})]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Separator, {
+		className: cn("mx-2 my-1 h-px bg-border", className),
+		"data-slot": "select-separator",
+		...props
+	});
+}
+function SelectGroup(props) {
+	return /* @__PURE__ */ jsx(Select$1.Group, {
+		"data-slot": "select-group",
+		...props
+	});
+}
+function SelectGroupLabel(props) {
+	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		className: "px-2 py-1.5 font-medium text-muted-foreground text-xs",
+		"data-slot": "select-group-label",
+		...props
+	});
+}
+//#endregion
+export { Select, SelectButton, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };

package/dist/components/separator.d.ts

@@ -0,0 +1,6 @@
+import * as React$1 from "react";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+//#region src/components/separator.d.ts
+declare function Separator({ className, orientation, ...props }: Separator$1.Props): React$1.JSX.Element;
+//#endregion
+export { Separator };

package/dist/components/separator.js

@@ -0,0 +1,15 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+//#region src/components/separator.tsx
+function Separator({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch", className),
+		"data-slot": "separator",
+		orientation,
+		...props
+	});
+}
+//#endregion
+export { Separator };

package/dist/components/sidebar.d.ts

@@ -0,0 +1,65 @@
+import { Separator } from "./separator.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { TooltipContent as TooltipPopup } from "./tooltip.js";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/sidebar.d.ts
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}): React$1.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React$1.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset" | "modal";
+  collapsible?: "offcanvas" | "icon" | "none";
+}): React$1.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function SidebarRail({ className, ...props }: React$1.ComponentProps<"button">): React$1.JSX.Element;
+declare function SidebarInset({ className, ...props }: React$1.ComponentProps<"main">): React$1.JSX.Element;
+declare function SidebarInput({ className, ...props }: React$1.ComponentProps<typeof Input>): React$1.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): React$1.JSX.Element;
+declare function SidebarContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button">): React$1.ReactElement;
+declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+export declare const sidebarMenuButtonVariants: (props?: ({
+  size?: "sm" | "lg" | "default" | null | undefined;
+  variant?: "default" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ isActive, variant, size, tooltip, className, render, ...props }: useRender.ComponentProps<"button"> & {
+  isActive?: boolean;
+  tooltip?: string | React$1.ComponentProps<typeof TooltipPopup>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React$1.JSX.Element;
+declare function SidebarMenuAction({ className, showOnHover, render, ...props }: useRender.ComponentProps<"button"> & {
+  showOnHover?: boolean;
+}): React$1.ReactElement;
+declare function SidebarMenuBadge({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React$1.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}): React$1.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function SidebarMenuSubButton({ size, isActive, className, render, ...props }: useRender.ComponentProps<"a"> & {
+  size?: "sm" | "md";
+  isActive?: boolean;
+}): React$1.ReactElement;
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };