@stll/ui 0.0.1-placeholder.0 → 0.3.0

package/dist/components/hex-color-picker.js

@@ -0,0 +1,366 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { containedHandler } from "../hooks/use-contained-handler.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/hex-color-picker.tsx
+/**
+* Hex color picker — saturation/brightness square + hue strip.
+*
+* Adapted from react-colorful (MIT, Copyright 2020 Vlad Shilov).
+* https://github.com/omgovich/react-colorful
+*
+* Changes from upstream:
+* - Trimmed to hex-only (no RGB/HSL/alpha variants)
+* - Dropped React.memo, useMemo, useCallback (React Compiler handles this)
+* - Converted CSS classes to Tailwind
+* - Merged small utility files into one module
+* - Strict TypeScript (no `any`, no enums)
+* - Arrow functions per project conventions
+*/
+const clamp = (n, min = 0, max = 1) => (() => {
+	if (n > max) return max;
+	if (n < min) return min;
+	return n;
+})();
+const round = (n, digits = 0) => {
+	const base = 10 ** digits;
+	return Math.round(base * n) / base;
+};
+const hexToRgba = (hex) => {
+	const h = hex.startsWith("#") ? hex.slice(1) : hex;
+	if (h.length < 6) {
+		const r0 = h.charAt(0);
+		const g0 = h.charAt(1);
+		const b0 = h.charAt(2);
+		return {
+			r: Number.parseInt(r0 + r0, 16),
+			g: Number.parseInt(g0 + g0, 16),
+			b: Number.parseInt(b0 + b0, 16),
+			a: 1
+		};
+	}
+	return {
+		r: Number.parseInt(h.slice(0, 2), 16),
+		g: Number.parseInt(h.slice(2, 4), 16),
+		b: Number.parseInt(h.slice(4, 6), 16),
+		a: 1
+	};
+};
+const rgbaToHsva = ({ r, g, b, a }) => {
+	const max = Math.max(r, g, b);
+	const delta = max - Math.min(r, g, b);
+	const hh = (() => {
+		if (delta) return (() => {
+			if (max === r) return (g - b) / delta;
+			if (max === g) return 2 + (b - r) / delta;
+			return 4 + (r - g) / delta;
+		})();
+		return 0;
+	})();
+	return {
+		h: round(60 * (hh < 0 ? hh + 6 : hh)),
+		s: round(max ? delta / max * 100 : 0),
+		v: round(max / 255 * 100),
+		a
+	};
+};
+const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
+const hsvaToRgba = ({ h, s, v, a }) => {
+	const hNorm = h / 360 * 6;
+	const sNorm = s / 100;
+	const vNorm = v / 100;
+	const hFloor = Math.floor(hNorm);
+	const bVal = vNorm * (1 - sNorm);
+	const cVal = vNorm * (1 - (hNorm - hFloor) * sNorm);
+	const dVal = vNorm * (1 - (1 - hNorm + hFloor) * sNorm);
+	const mod = hFloor % 6;
+	const rLookup = [
+		vNorm,
+		cVal,
+		bVal,
+		bVal,
+		dVal,
+		vNorm
+	];
+	const gLookup = [
+		dVal,
+		vNorm,
+		vNorm,
+		cVal,
+		bVal,
+		bVal
+	];
+	const bLookup = [
+		bVal,
+		bVal,
+		dVal,
+		vNorm,
+		vNorm,
+		cVal
+	];
+	return {
+		r: round((rLookup[mod] ?? 0) * 255),
+		g: round((gLookup[mod] ?? 0) * 255),
+		b: round((bLookup[mod] ?? 0) * 255),
+		a: round(a, 2)
+	};
+};
+const formatHexByte = (n) => {
+	const hex = n.toString(16);
+	return hex.length < 2 ? `0${hex}` : hex;
+};
+const rgbaToHex = ({ r, g, b }) => `#${formatHexByte(r)}${formatHexByte(g)}${formatHexByte(b)}`;
+const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
+const hsvaToHsla = ({ h, s, v, a }) => {
+	const hh = (200 - s) * v / 100;
+	return {
+		h: round(h),
+		s: round((() => {
+			if (hh > 0 && hh < 200) return s * v / 100 / (hh <= 100 ? hh : 200 - hh) * 100;
+			return 0;
+		})()),
+		l: round(hh / 2),
+		a: round(a, 2)
+	};
+};
+const hsvaToHslString = (hsva) => {
+	const { h, s, l } = hsvaToHsla(hsva);
+	return `hsl(${h}, ${s}%, ${l}%)`;
+};
+const equalHex = (a, b) => {
+	if (a.toLowerCase() === b.toLowerCase()) return true;
+	const ra = hexToRgba(a);
+	const rb = hexToRgba(b);
+	return ra.r === rb.r && ra.g === rb.g && ra.b === rb.b && ra.a === rb.a;
+};
+const useEventCallback = (handler) => {
+	const callbackRef = useRef(handler);
+	const fn = useRef((value) => {
+		callbackRef.current?.(value);
+	});
+	callbackRef.current = handler;
+	return fn.current;
+};
+const useColorManipulation = (color, onChange) => {
+	const onChangeCallback = useEventCallback(onChange);
+	const [hsva, setHsva] = useState(() => hexToHsva(color));
+	const [committedColor, setCommittedColor] = useState(color);
+	if (!equalHex(color, committedColor)) {
+		setCommittedColor(color);
+		setHsva(hexToHsva(color));
+	}
+	const handleChange = (params) => {
+		const next = {
+			...hsva,
+			...params
+		};
+		setHsva(next);
+		const hex = hsvaToHex(next);
+		if (!equalHex(hex, committedColor)) {
+			setCommittedColor(hex);
+			onChangeCallback(hex);
+		}
+	};
+	return [hsva, handleChange];
+};
+const isTouch = (e) => "touches" in e;
+const isMouseMoveEvent = (event) => "buttons" in event && "pageX" in event && "pageY" in event;
+const isMoveEvent = (event) => isMouseMoveEvent(event) || "touches" in event;
+const getTouchPoint = (touches, id) => {
+	return Array.from(touches).find((t) => t.identifier === id) ?? touches.item(0);
+};
+const getParentWindow = (node) => node?.ownerDocument.defaultView ?? self;
+const getRelativePosition = (node, event, touchId) => {
+	const rect = node.getBoundingClientRect();
+	const pointer = isTouch(event) ? getTouchPoint(event.touches, touchId) : event;
+	if (!pointer) return null;
+	const win = getParentWindow(node);
+	return {
+		left: clamp((pointer.pageX - (rect.left + win.pageXOffset)) / rect.width),
+		top: clamp((pointer.pageY - (rect.top + win.pageYOffset)) / rect.height)
+	};
+};
+const InteractiveArea = ({ onMove, onKey, children, ...rest }) => {
+	const container = useRef(null);
+	const onMoveRef = useEventCallback(onMove);
+	const onKeyRef = useEventCallback(onKey);
+	const touchId = useRef(null);
+	const hasTouch = useRef(false);
+	const listenersRef = useRef(null);
+	const detachListeners = () => {
+		const l = listenersRef.current;
+		if (!l) return;
+		l.win.removeEventListener(l.moveType, l.handleMove);
+		l.win.removeEventListener(l.endType, l.handleEnd);
+		listenersRef.current = null;
+	};
+	const attachListeners = () => {
+		detachListeners();
+		const win = getParentWindow(container.current);
+		const touch = hasTouch.current;
+		const moveType = touch ? "touchmove" : "mousemove";
+		const endType = touch ? "touchend" : "mouseup";
+		const handleMove = (event) => {
+			if (!isMoveEvent(event)) {
+				detachListeners();
+				return;
+			}
+			if (!isTouch(event)) event.preventDefault();
+			if ((isTouch(event) ? event.touches.length > 0 : event.buttons > 0) && container.current) {
+				const position = getRelativePosition(container.current, event, touchId.current);
+				if (position) onMoveRef(position);
+			} else detachListeners();
+		};
+		const handleEnd = () => detachListeners();
+		listenersRef.current = {
+			moveType,
+			endType,
+			handleMove,
+			handleEnd,
+			win
+		};
+		win.addEventListener(moveType, handleMove);
+		win.addEventListener(endType, handleEnd);
+	};
+	useEffect(() => detachListeners, []);
+	const handleStart = (e) => {
+		const el = container.current;
+		if (!el) return;
+		const native = e.nativeEvent;
+		if (!isTouch(native)) native.preventDefault();
+		if (hasTouch.current && !isTouch(native)) return;
+		if (isTouch(native)) {
+			hasTouch.current = true;
+			const first = native.changedTouches.item(0);
+			if (first) touchId.current = first.identifier;
+		}
+		el.focus();
+		const position = getRelativePosition(el, native, touchId.current);
+		if (position) onMoveRef(position);
+		attachListeners();
+	};
+	const handleKeyDown = (e) => {
+		const key = e.key;
+		if (key !== "ArrowLeft" && key !== "ArrowRight" && key !== "ArrowUp" && key !== "ArrowDown") return;
+		e.preventDefault();
+		onKeyRef({
+			left: (() => {
+				if (key === "ArrowRight") return .05;
+				if (key === "ArrowLeft") return -.05;
+				return 0;
+			})(),
+			top: (() => {
+				if (key === "ArrowDown") return .05;
+				if (key === "ArrowUp") return -.05;
+				return 0;
+			})()
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: "absolute inset-0 touch-none rounded-[inherit] outline-none",
+		onKeyDown: handleKeyDown,
+		onMouseDown: containedHandler(container, handleStart),
+		onTouchStart: containedHandler(container, handleStart),
+		ref: container,
+		role: "slider",
+		tabIndex: 0,
+		children
+	});
+};
+const Pointer = ({ left, top = .5, color }) => /* @__PURE__ */ jsx("div", {
+	className: "absolute z-1 size-7 -translate-1/2 rounded-full border-2 border-white shadow-[0_2px_4px_rgba(0,0,0,0.2)]",
+	style: {
+		top: `${top * 100}%`,
+		left: `${left * 100}%`
+	},
+	children: /* @__PURE__ */ jsx("div", {
+		className: "absolute inset-0 rounded-full",
+		style: { backgroundColor: color }
+	})
+});
+const Saturation = ({ hsva, onChange }) => {
+	const handleMove = (interaction) => {
+		onChange({
+			s: interaction.left * 100,
+			v: 100 - interaction.top * 100
+		});
+	};
+	const handleKey = (offset) => {
+		onChange({
+			s: clamp(hsva.s + offset.left * 100, 0, 100),
+			v: clamp(hsva.v - offset.top * 100, 0, 100)
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative grow rounded-t-lg border-b-[12px] border-b-black shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]",
+		style: {
+			backgroundColor: hsvaToHslString({
+				h: hsva.h,
+				s: 100,
+				v: 100,
+				a: 1
+			}),
+			backgroundImage: "linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0))"
+		},
+		children: /* @__PURE__ */ jsx(InteractiveArea, {
+			"aria-label": "Color",
+			"aria-valuemax": 100,
+			"aria-valuemin": 0,
+			"aria-valuenow": round(hsva.s),
+			"aria-valuetext": `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`,
+			onKey: handleKey,
+			onMove: handleMove,
+			children: /* @__PURE__ */ jsx(Pointer, {
+				color: hsvaToHslString(hsva),
+				left: hsva.s / 100,
+				top: 1 - hsva.v / 100
+			})
+		})
+	});
+};
+const HueStrip = ({ hue, onChange }) => {
+	const handleMove = (interaction) => {
+		onChange({ h: 360 * interaction.left });
+	};
+	const handleKey = (offset) => {
+		onChange({ h: clamp(hue + offset.left * 360, 0, 360) });
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative h-6 rounded-b-lg",
+		style: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
+		children: /* @__PURE__ */ jsx(InteractiveArea, {
+			"aria-label": "Hue",
+			"aria-valuemax": 360,
+			"aria-valuemin": 0,
+			"aria-valuenow": round(hue),
+			onKey: handleKey,
+			onMove: handleMove,
+			children: /* @__PURE__ */ jsx(Pointer, {
+				color: hsvaToHslString({
+					h: hue,
+					s: 100,
+					v: 100,
+					a: 1
+				}),
+				left: hue / 360
+			})
+		})
+	});
+};
+const HexColorPicker = ({ color = "000000", onChange, className }) => {
+	const [hsva, updateHsva] = useColorManipulation(color, onChange);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex h-[200px] w-[200px] cursor-default flex-col select-none", className),
+		children: [/* @__PURE__ */ jsx(Saturation, {
+			hsva,
+			onChange: updateHsva
+		}), /* @__PURE__ */ jsx(HueStrip, {
+			hue: hsva.h,
+			onChange: updateHsva
+		})]
+	});
+};
+//#endregion
+export { HexColorPicker };

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

@@ -0,0 +1,15 @@
+import { InputProps } from "./input.js";
+import { TextareaProps } from "./textarea.js";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/input-group.d.ts
+declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
+declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+declare const InputGroupInput: ({ className, ...props }: InputProps) => React$1.JSX.Element;
+declare const InputGroupTextarea: ({ className, ...props }: TextareaProps) => React$1.JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input-group.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/input-group.tsx
+const InputGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 relative inline-flex w-full min-w-0 items-center rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[align=block-end]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:h-auto has-data-[align=block-start]:flex-col has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] has-[textarea]:h-auto sm:text-sm dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=inline-start]:**:[input]:ps-2 has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)] **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5", className),
+	"data-slot": "input-group",
+	role: "group",
+	...props
+});
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 leading-none select-none [&_svg]:-mx-0.5 in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80 [&>kbd]:rounded-[calc(var(--radius)-5px)]", {
+	defaultVariants: { align: "inline-start" },
+	variants: { align: {
+		"block-end": "order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
+		"block-start": "order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
+		"inline-end": "order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]",
+		"inline-start": "order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]"
+	} }
+});
+const InputGroupAddon = ({ className, align = "inline-start", ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn(inputGroupAddonVariants({ align }), className),
+	"data-align": align,
+	"data-slot": "input-group-addon",
+	onMouseDown: (e) => {
+		const { target } = e;
+		if (!(target instanceof Element)) return;
+		if (target.closest("button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']")) return;
+		e.preventDefault();
+		const parent = e.currentTarget.parentElement;
+		const input = parent?.querySelector("input, textarea");
+		if (input && !parent?.querySelector("input:focus, textarea:focus")) input.focus();
+	},
+	...props
+});
+const InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-muted-foreground line-clamp-1 flex items-center gap-2 leading-none [&_svg]:pointer-events-none [&_svg]:-mx-0.5 in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4", className),
+	...props
+});
+const InputGroupInput = ({ className, ...props }) => /* @__PURE__ */ jsx(Input, {
+	className,
+	unstyled: true,
+	...props
+});
+const InputGroupTextarea = ({ className, ...props }) => /* @__PURE__ */ jsx(Textarea, {
+	className,
+	unstyled: true,
+	...props
+});
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea };

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

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+import { OTPInput } from "input-otp";
+//#region src/components/input-otp.d.ts
+declare const InputOTP: ({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) => React$1.JSX.Element;
+declare const InputOTPGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const InputOTPSlot: ({ index, className, ...props }: React$1.ComponentProps<"div"> & {
+  index: number;
+}) => React$1.JSX.Element;
+declare const InputOTPSeparator: ({ ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+//#region src/components/input-otp.tsx
+const InputOTP = ({ className, containerClassName, ...props }) => /* @__PURE__ */ jsx(OTPInput, {
+	className: cn("disabled:cursor-not-allowed", className),
+	containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+	"data-slot": "input-otp",
+	...props
+});
+const InputOTPGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center", className),
+	"data-slot": "input-otp-group",
+	...props
+});
+const InputOTPSlot = ({ index, className, ...props }) => {
+	const { char, hasFakeCaret, isActive } = React$1.use(OTPInputContext).slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex h-9 w-9 items-center justify-center border-y border-e text-sm shadow-xs transition-[border-color,outline] outline-none first:rounded-s-md first:border-s last:rounded-e-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", className),
+		"data-active": isActive,
+		"data-slot": "input-otp-slot",
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
+		})]
+	});
+};
+const InputOTPSeparator = ({ ...props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "input-otp-separator",
+	role: "separator",
+	...props,
+	children: /* @__PURE__ */ jsx(MinusIcon, {})
+});
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/input.d.ts
+type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>, "size" | "style"> & {
+  size?: "sm" | "default" | "lg" | number;
+  style?: React$1.CSSProperties;
+  unstyled?: boolean;
+  nativeInput?: boolean;
+};
+declare const Input: ({ className, size, unstyled, nativeInput, dir, onChange, ...props }: InputProps) => React$1.JSX.Element;
+//#endregion
+export { Input, type InputProps };

package/dist/components/input.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { isStructuredInputType, useContentDir } from "../hooks/use-content-dir.js";
+import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/input.tsx
+const Input = ({ className, size = "default", unstyled = false, nativeInput = false, dir, onChange, ...props }) => {
+	const contentDir = useContentDir({
+		dir: dir ?? (isStructuredInputType(props.type) ? "ltr" : void 0),
+		value: props.value,
+		defaultValue: props.defaultValue
+	});
+	const handleChange = (event) => {
+		contentDir.trackValue(event.currentTarget.value);
+		onChange?.(event);
+	};
+	const inputClassName = cn("placeholder:text-foreground-placeholder h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:leading-7.5", size === "sm" && "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5", size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5", props.type === "search" && "ps-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", props.type === "file" && "text-muted-foreground file:text-foreground file:me-3 file:bg-transparent file:text-sm file:font-medium");
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+		"data-size": size,
+		"data-slot": "input-control",
+		dir: contentDir.dir,
+		children: [props.type === "search" && /* @__PURE__ */ jsx(SearchIcon, {
+			"aria-hidden": "true",
+			className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 z-1 size-3.5 -translate-y-1/2",
+			"data-slot": "input-search-icon"
+		}), nativeInput ? /* @__PURE__ */ jsx("input", {
+			className: inputClassName,
+			"data-slot": "input",
+			size: typeof size === "number" ? size : void 0,
+			...props,
+			dir: contentDir.dir,
+			onChange: handleChange
+		}) : /* @__PURE__ */ jsx(Input$1, {
+			className: inputClassName,
+			"data-slot": "input",
+			size: typeof size === "number" ? size : void 0,
+			...props,
+			dir: contentDir.dir,
+			onChange: handleChange
+		})]
+	});
+};
+//#endregion
+export { Input };

package/dist/components/label.d.ts

@@ -0,0 +1,5 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/label.d.ts
+declare function Label({ className, render, ...props }: useRender.ComponentProps<"label">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Label };

package/dist/components/label.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/label.tsx
+function Label({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("text-foreground inline-flex items-center gap-2 text-base/4.5 font-medium sm:text-sm/4", className),
+		"data-slot": "label"
+	};
+	return useRender({
+		defaultTagName: "label",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Label };

package/dist/components/menu.d.ts

@@ -0,0 +1,44 @@
+import * as React$1 from "react";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+//#region src/components/menu.d.ts
+declare const MenuCreateHandle: typeof Menu$1.createHandle;
+declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function MenuTrigger({ tooltip, ...props }: Menu$1.Trigger.Props & {
+  tooltip?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare const MenuPopup: ({ children, className, sideOffset, align, alignOffset, side, anchor, ...props }: Menu$1.Popup.Props & {
+  align?: Menu$1.Positioner.Props["align"];
+  sideOffset?: Menu$1.Positioner.Props["sideOffset"];
+  alignOffset?: Menu$1.Positioner.Props["alignOffset"];
+  side?: Menu$1.Positioner.Props["side"];
+  anchor?: Menu$1.Positioner.Props["anchor"];
+}) => React$1.JSX.Element;
+declare const MenuGroup: (props: Menu$1.Group.Props) => React$1.JSX.Element;
+declare const MenuItem: ({ className, inset, variant, ...props }: Menu$1.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) => React$1.JSX.Element;
+declare const MenuCheckboxItem: ({ className, children, checked, variant, ...props }: Menu$1.CheckboxItem.Props & {
+  variant?: "default" | "switch";
+}) => React$1.JSX.Element;
+declare const MenuRadioGroup: (props: Menu$1.RadioGroup.Props) => React$1.JSX.Element;
+declare const MenuRadioItem: ({ className, children, indicator, ...props }: Menu$1.RadioItem.Props & {
+  indicator?: "check" | "none";
+}) => React$1.JSX.Element;
+declare const MenuGroupLabel: ({ className, inset, ...props }: Menu$1.GroupLabel.Props & {
+  inset?: boolean;
+}) => React$1.JSX.Element;
+declare const MenuSeparator: ({ className, ...props }: Menu$1.Separator.Props) => React$1.JSX.Element;
+declare const MenuShortcut: ({ className, ...props }: React$1.ComponentProps<"kbd">) => React$1.JSX.Element;
+declare const MenuSub: (props: Menu$1.SubmenuRoot.Props) => React$1.JSX.Element;
+declare const MenuSubTrigger: ({ className, inset, children, ...props }: Menu$1.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) => React$1.JSX.Element;
+declare const MenuSubPopup: ({ className, sideOffset, alignOffset, align, ...props }: Menu$1.Popup.Props & {
+  align?: Menu$1.Positioner.Props["align"];
+  sideOffset?: Menu$1.Positioner.Props["sideOffset"];
+  alignOffset?: Menu$1.Positioner.Props["alignOffset"];
+}) => React$1.JSX.Element;
+//#endregion
+export { Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger };