@ponti-studios/ui 2.0.1 → 3.0.0

package/dist/components/forms/drop-zone.js

@@ -0,0 +1,184 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../primitives/button.js";
+import { Progress as n } from "../feedback/progress.js";
+import { useCallback as r, useId as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { FileIcon as u, UploadIcon as d, XIcon as f } from "lucide-react";
+//#region src/components/forms/drop-zone.tsx
+function p(e) {
+	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(2)} MB`;
+}
+function m({ status: m, file: h = null, error: g = null, notice: _ = null, accept: v, multiple: y = !1, disabled: b = !1, className: x, emptyLabel: S = /* @__PURE__ */ l(s, { children: ["Drop a file here, or ", /* @__PURE__ */ c("span", {
+	className: "text-accent-text font-medium",
+	children: "browse"
+})] }), emptyHint: C, draggingLabel: w = "Release to attach", busyLabel: T = "Processing…", busyDescription: E, submitLabel: D = "Upload", retryLabel: O = "Try again", clearLabel: k = "Use a different file", cancelLabel: A = "Cancel", failedActions: j, onFiles: M, onSubmit: N, onClear: P, onCancel: F, onRetry: I }) {
+	let L = i(), R = a(null), z = a(null), [B, V] = o(!1), H = m === "busy", U = !b && !H, W = r(() => {
+		U && R.current?.click();
+	}, [U]), G = r((e) => {
+		if (!e || !U) return;
+		let t = Array.from(e);
+		t.length !== 0 && M(t);
+	}, [U, M]), K = (e) => {
+		e.preventDefault(), e.stopPropagation(), U && V(!0);
+	}, q = (e) => {
+		e.preventDefault(), e.stopPropagation(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy");
+	}, J = (e) => {
+		e.preventDefault(), e.stopPropagation();
+		let t = e.relatedTarget;
+		t instanceof Node && z.current?.contains(t) || V(!1);
+	}, Y = (e) => {
+		e.preventDefault(), e.stopPropagation(), V(!1), U && G(e.dataTransfer.files);
+	}, X = (e) => {
+		G(e.target.files), e.target.value = "";
+	}, Z = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), W());
+	}, Q = B && U, $ = e(Q && "border-ring bg-primary/5", m === "failed" && !Q && "border-destructive bg-destructive/5", m === "busy" && "border-border bg-muted/30", m !== "failed" && m !== "busy" && !Q && "border-border bg-card");
+	return /* @__PURE__ */ l("div", {
+		className: e("w-full space-y-3", x),
+		children: [
+			/* @__PURE__ */ c("input", {
+				ref: R,
+				id: L,
+				type: "file",
+				accept: v,
+				multiple: y,
+				disabled: !U,
+				className: "pointer-events-none sr-only",
+				onChange: X,
+				tabIndex: -1,
+				"aria-hidden": !0
+			}),
+			/* @__PURE__ */ c("div", {
+				ref: z,
+				role: "button",
+				tabIndex: U ? 0 : -1,
+				"aria-disabled": !U,
+				"aria-busy": H,
+				"aria-label": "File upload drop zone",
+				className: e("relative flex min-h-44 w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-dashed p-6 text-center outline-none", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2", "motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-in-out motion-reduce:transition-none", U ? "cursor-pointer" : "cursor-default", Q ? "scale-[1.01] motion-reduce:scale-100" : "scale-100", $),
+				onClick: U ? W : void 0,
+				onKeyDown: U ? Z : void 0,
+				onDragEnter: K,
+				onDragOver: q,
+				onDragLeave: J,
+				onDrop: Y,
+				children: /* @__PURE__ */ l("div", {
+					className: "flex w-full max-w-sm flex-col items-center gap-3",
+					children: [
+						Q ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
+							className: "text-accent-text size-8 motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-in-out motion-reduce:transition-none motion-safe:-translate-y-0.5 motion-reduce:translate-y-0",
+							"aria-hidden": !0
+						}), /* @__PURE__ */ c("p", {
+							className: "body-3 text-foreground",
+							children: w
+						})] }) : null,
+						!Q && m === "empty" ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
+							className: "size-8 text-muted-foreground",
+							"aria-hidden": !0
+						}), /* @__PURE__ */ l("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ c("p", {
+								className: "body-3 text-foreground",
+								children: S
+							}), C ? /* @__PURE__ */ c("p", {
+								className: "body-4 text-muted-foreground",
+								children: C
+							}) : null]
+						})] }) : null,
+						!Q && m === "armed" && h ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u, {
+							className: "size-8 text-muted-foreground",
+							"aria-hidden": !0
+						}), /* @__PURE__ */ l("div", {
+							className: "min-w-0 max-w-full space-y-1",
+							children: [/* @__PURE__ */ c("p", {
+								className: "subheading-4 truncate text-foreground",
+								children: h.name
+							}), /* @__PURE__ */ c("p", {
+								className: "body-4 text-muted-foreground",
+								children: p(h.size)
+							})]
+						})] }) : null,
+						!Q && m === "busy" ? /* @__PURE__ */ l("div", {
+							className: "w-full space-y-3",
+							children: [/* @__PURE__ */ l("div", {
+								className: "space-y-1",
+								children: [
+									/* @__PURE__ */ c("p", {
+										className: "subheading-4 text-foreground",
+										children: T
+									}),
+									E ? /* @__PURE__ */ c("p", {
+										className: "body-4 text-muted-foreground",
+										children: E
+									}) : null,
+									h ? /* @__PURE__ */ c("p", {
+										className: "body-4 truncate text-muted-foreground",
+										children: h.name
+									}) : null
+								]
+							}), /* @__PURE__ */ c(n, {
+								className: "h-1.5 opacity-80 motion-safe:animate-pulse",
+								"aria-label": typeof T == "string" ? T : "Processing",
+								value: 50
+							})]
+						}) : null,
+						!Q && m === "failed" ? /* @__PURE__ */ l("div", {
+							className: "w-full space-y-2",
+							children: [
+								h ? /* @__PURE__ */ c("p", {
+									className: "subheading-4 truncate text-foreground",
+									children: h.name
+								}) : null,
+								g ? /* @__PURE__ */ c("p", {
+									className: "body-3 text-destructive-text",
+									children: g
+								}) : null,
+								j
+							]
+						}) : null
+					]
+				})
+			}),
+			_ ? /* @__PURE__ */ c("p", {
+				className: "body-4 text-muted-foreground",
+				children: _
+			}) : null,
+			/* @__PURE__ */ l("div", {
+				className: "grid gap-2",
+				children: [
+					m === "armed" && N ? /* @__PURE__ */ l(t, {
+						type: "button",
+						className: "w-full",
+						onClick: N,
+						children: [/* @__PURE__ */ c(d, { className: "size-4" }), D]
+					}) : null,
+					m === "failed" && I ? /* @__PURE__ */ c(t, {
+						type: "button",
+						className: "w-full",
+						onClick: I,
+						children: O
+					}) : null,
+					m === "busy" && F ? /* @__PURE__ */ l(t, {
+						type: "button",
+						variant: "outline",
+						className: "w-full",
+						onClick: F,
+						children: [/* @__PURE__ */ c(f, { className: "size-4" }), A]
+					}) : null,
+					(m === "armed" || m === "failed") && P ? /* @__PURE__ */ c(t, {
+						type: "button",
+						variant: "ghost",
+						className: "w-full",
+						onClick: (e) => {
+							e.stopPropagation(), P();
+						},
+						children: k
+					}) : null
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { m as DropZone };

package/{src/components/forms/index.ts → dist/components/forms/index.d.ts}

@@ -10,18 +10,12 @@ export { DropZone } from "./drop-zone";
 export type { DropZoneProps } from "./drop-zone";
 export { Input } from "./input";
 export { Label } from "./label";
+/** @deprecated Import from `@ponti-studios/ui/auth` instead. */
 export { PasskeyManagement } from "./passkey-management";
+/** @deprecated Import from `@ponti-studios/ui/auth` instead. */
 export type { PasskeyManagementProps, PasskeyRecord } from "./passkey-management";
 export { RadioGroup, RadioGroupItem } from "./radio-group";
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from "./select";
 export { Slider } from "./slider";
 export { Stepper } from "./stepper";
 export type { StepperProps } from "./stepper";

package/dist/components/forms/index.js

@@ -0,0 +1,17 @@
+import { Select as e, SelectContent as t, SelectGroup as n, SelectItem as r, SelectLabel as i, SelectTrigger as a, SelectValue as o } from "./select.js";
+import { FilterSelect as s } from "../filters/filter-select.js";
+import { Checkbox as c } from "./checkbox.js";
+import { formatDateInput as l, parseDateInput as u, todayDateInput as d } from "./date-utils.js";
+import { DatePicker as f } from "./date-picker.js";
+import { DateMonthSelect as p, getCurrentMonthYear as m } from "./date-month-select.js";
+import { DropZone as h } from "./drop-zone.js";
+import { Input as g } from "./input.js";
+import { Label as _ } from "./label.js";
+import { PasskeyManagement as v } from "./passkey-management.js";
+import { RadioGroup as y, RadioGroupItem as b } from "./radio-group.js";
+import { Slider as x } from "./slider.js";
+import { Stepper as S } from "./stepper.js";
+import { Switch as C } from "./switch.js";
+import { TextField as w } from "./text-field.js";
+import { Textarea as T } from "./textarea.js";
+export { c as Checkbox, p as DateMonthSelect, f as DatePicker, h as DropZone, s as FilterSelect, g as Input, _ as Label, v as PasskeyManagement, y as RadioGroup, b as RadioGroupItem, e as Select, t as SelectContent, n as SelectGroup, r as SelectItem, i as SelectLabel, a as SelectTrigger, o as SelectValue, x as Slider, S as Stepper, C as Switch, w as TextField, T as Textarea, l as formatDateInput, m as getCurrentMonthYear, u as parseDateInput, d as todayDateInput };

package/dist/components/forms/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };

package/dist/components/forms/input.js

@@ -0,0 +1,15 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/forms/input.tsx
+function n({ className: n, type: r, ...i }) {
+	return /* @__PURE__ */ t("input", {
+		type: r,
+		"data-slot": "input",
+		className: e("bg-background text-foreground border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-colors md:text-sm", "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium", "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:ring-destructive/20 aria-invalid:border-destructive", n),
+		...i
+	});
+}
+//#endregion
+export { n as Input };

package/dist/components/forms/label.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
+export { Label };

package/dist/components/forms/label.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/forms/label.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("label", {
+		"data-slot": "label",
+		className: e("text-sm leading-none font-medium select-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "group-has-disabled:cursor-not-allowed group-has-disabled:opacity-50", n),
+		...r
+	});
+}
+//#endregion
+export { n as Label };

package/dist/components/forms/passkey-management.d.ts

@@ -0,0 +1,14 @@
+export interface PasskeyRecord {
+    id: string;
+    name?: string;
+    createdAt?: string;
+}
+export interface PasskeyManagementProps {
+    passkeys?: PasskeyRecord[];
+    isLoading?: boolean;
+    error?: string | null;
+    onAdd: () => Promise<boolean>;
+    onDelete: (id: string) => Promise<boolean>;
+}
+/** List, add, and remove passkeys. The host app owns the WebAuthn ceremony via `onAdd`/`onDelete`. */
+export declare function PasskeyManagement({ passkeys: passkeysProp, isLoading, error: externalError, onAdd, onDelete, }: PasskeyManagementProps): import("react").JSX.Element;

package/dist/components/forms/passkey-management.js

@@ -0,0 +1,132 @@
+"use client";
+import { Spinner as e } from "../feedback/spinner.js";
+import { Button as t } from "../primitives/button.js";
+import { Card as n, CardHeader as r } from "../primitives/card.js";
+import { useCallback as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { KeyRound as c, Plus as l, Trash2 as u, X as d } from "lucide-react";
+//#region src/components/forms/passkey-management.tsx
+function f({ passkeys: f, isLoading: p = !1, error: m, onAdd: h, onDelete: g }) {
+	let [_, v] = a(!1), [y, b] = a(null), [x, S] = a(null), C = f ?? [], w = m ?? (x?.passkeyId ? null : x?.message), T = i(async () => {
+		v(!0), S(null);
+		try {
+			await h() || S({ message: "Passkey registration was cancelled or failed." });
+		} catch {
+			S({ message: "An error occurred during passkey registration." });
+		} finally {
+			v(!1);
+		}
+	}, [h]), E = i(async (e) => {
+		b(e), S(null);
+		try {
+			if (!await g(e)) throw Error("Failed to delete passkey");
+		} catch {
+			S({
+				message: "Could not delete passkey. Please try again.",
+				passkeyId: e
+			});
+		} finally {
+			b(null);
+		}
+	}, [g]);
+	return /* @__PURE__ */ s(n, {
+		"aria-labelledby": "passkey-heading",
+		className: "gap-0 overflow-hidden w-full",
+		children: [
+			/* @__PURE__ */ s(r, {
+				className: "flex-row items-center border-b p-4",
+				children: [/* @__PURE__ */ o("h2", {
+					id: "passkey-heading",
+					className: "text-foreground text-sm font-medium",
+					children: "Passkeys"
+				}), /* @__PURE__ */ o(t, {
+					type: "button",
+					size: "sm",
+					onClick: () => void T(),
+					isLoading: _,
+					loadingLabel: "Adding passkey",
+					"aria-label": "Add a passkey",
+					className: "ml-auto",
+					children: /* @__PURE__ */ o(l, {
+						className: "size-4",
+						"aria-hidden": !0
+					})
+				})]
+			}),
+			w ? /* @__PURE__ */ o("p", {
+				role: "alert",
+				className: "text-destructive-text border-b px-4 py-3 text-sm",
+				children: w
+			}) : null,
+			p ? /* @__PURE__ */ o(e, {
+				presentation: "centered",
+				size: "sm",
+				label: "Loading passkeys"
+			}) : C.length === 0 ? /* @__PURE__ */ s("div", {
+				className: "text-muted-foreground flex items-center gap-3 p-4 text-sm",
+				children: [/* @__PURE__ */ o(c, {
+					className: "size-4 shrink-0",
+					"aria-hidden": !0
+				}), /* @__PURE__ */ o("span", { children: "No passkeys registered. Add one to sign in faster." })]
+			}) : /* @__PURE__ */ o("ul", {
+				className: "divide-border divide-y",
+				"aria-label": "Registered passkeys",
+				children: C.map((t) => {
+					let n = x?.passkeyId === t.id ? x.message : null;
+					return /* @__PURE__ */ s("li", {
+						className: "flex flex-col gap-2 px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ s("div", {
+							className: "flex items-center justify-between gap-4",
+							children: [/* @__PURE__ */ s("div", {
+								className: "flex min-w-0 items-center gap-3",
+								children: [/* @__PURE__ */ o(c, {
+									className: "text-muted-foreground size-4 shrink-0",
+									"aria-hidden": !0
+								}), /* @__PURE__ */ s("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ o("span", {
+										className: "font-medium",
+										children: t.name ?? "Passkey"
+									}), t.createdAt ? /* @__PURE__ */ s("span", {
+										className: "text-muted-foreground ml-2 text-xs",
+										children: ["Added ", new Date(t.createdAt).toLocaleDateString()]
+									}) : null]
+								})]
+							}), /* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => void E(t.id),
+								disabled: y === t.id,
+								"aria-busy": y === t.id,
+								"aria-label": `Remove passkey ${t.name ?? t.id}`,
+								className: "hover:text-destructive-text text-muted-foreground focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50",
+								children: y === t.id ? /* @__PURE__ */ o(e, {
+									size: "sm",
+									"aria-hidden": !0
+								}) : /* @__PURE__ */ o(u, {
+									className: "size-4",
+									"aria-hidden": !0
+								})
+							})]
+						}), n ? /* @__PURE__ */ s("div", {
+							role: "alert",
+							className: "bg-destructive/5 text-destructive-text flex items-start justify-between gap-3 rounded-md px-3 py-2 text-sm",
+							children: [/* @__PURE__ */ o("span", { children: n }), /* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => S(null),
+								"aria-label": "Dismiss passkey error",
+								title: "Dismiss error",
+								className: "hover:text-destructive focus-visible:ring-ring -m-1 shrink-0 rounded-sm p-1 focus-visible:ring-2 focus-visible:outline-none",
+								children: /* @__PURE__ */ o(d, {
+									className: "size-4",
+									"aria-hidden": !0
+								})
+							})]
+						}) : null]
+					}, t.id);
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { f as PasskeyManagement };

package/dist/components/forms/radio-group.d.ts

@@ -0,0 +1,6 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import * as React from "react";
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.Props<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioPrimitive.Root.Props<unknown>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/components/forms/radio-group.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Circle as r } from "lucide-react";
+import { Radio as i } from "@base-ui/react/radio";
+import { RadioGroup as a } from "@base-ui/react/radio-group";
+//#region src/components/forms/radio-group.tsx
+var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a, {
+	className: e("grid gap-2", t),
+	...r,
+	ref: i
+}));
+o.displayName = "RadioGroup";
+var s = t.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ n(i.Root, {
+	"data-slot": "radio-group-item",
+	ref: o,
+	className: e("border-ring bg-background flex aspect-square size-6 items-center justify-center rounded-full border", "focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", t),
+	...a,
+	children: /* @__PURE__ */ n(i.Indicator, {
+		keepMounted: !0,
+		className: "data-unchecked:opacity-0 data-checked:opacity-100 data-starting-style:animate-fade-in data-ending-style:animate-fade-out",
+		children: /* @__PURE__ */ n(r, { className: "fill-ring size-5" })
+	})
+}));
+s.displayName = "Radio";
+//#endregion
+export { o as RadioGroup, s as RadioGroupItem };

package/dist/components/forms/select.d.ts

@@ -0,0 +1,18 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import * as React from "react";
+type SelectProps = Omit<React.ComponentProps<typeof SelectPrimitive.Root<string>>, "value" | "defaultValue"> & {
+    value?: string | null;
+    defaultValue?: string | null;
+};
+declare function Select({ children, items, ...props }: SelectProps): React.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+declare function SelectContent({ className, children, position: _position, ...props }: React.ComponentProps<typeof SelectPrimitive.Popup> & {
+    position?: "item-aligned" | "popper";
+}): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue };

package/dist/components/forms/select.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Select as i } from "@base-ui/react/select";
+import { CheckIcon as a, ChevronDownIcon as o, ChevronUpIcon as s } from "lucide-react";
+//#region src/components/forms/select.tsx
+function c({ children: e, items: t, ...r }) {
+	let a = t ?? h(e);
+	return /* @__PURE__ */ n(i.Root, {
+		"data-slot": "select",
+		items: a,
+		...r,
+		children: e
+	});
+}
+function l({ ...e }) {
+	return /* @__PURE__ */ n(i.Group, {
+		"data-slot": "select-group",
+		...e
+	});
+}
+function u({ ...e }) {
+	return /* @__PURE__ */ n(i.Value, {
+		"data-slot": "select-value",
+		...e
+	});
+}
+function d({ className: t, size: a = "default", children: s, ...c }) {
+	return /* @__PURE__ */ r(i.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": a,
+		className: e("border-input flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none", "data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-inset", "aria-invalid:ring-destructive/20 aria-invalid:border-destructive", "disabled:cursor-not-allowed disabled:opacity-50", "data-[size=default]:h-9 data-[size=sm]:h-8", "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
+		...c,
+		children: [s, /* @__PURE__ */ n(i.Icon, { children: /* @__PURE__ */ n(o, { className: "size-4 opacity-50" }) })]
+	});
+}
+function f({ className: t, children: a, position: o = "popper", ...s }) {
+	return /* @__PURE__ */ r(i.Portal, { children: [/* @__PURE__ */ n(i.Backdrop, { className: "ui-mobile-sheet-backdrop" }), /* @__PURE__ */ n(i.Positioner, {
+		className: "ui-mobile-sheet-positioner",
+		alignItemWithTrigger: o === "item-aligned",
+		sideOffset: 4,
+		children: /* @__PURE__ */ r(i.Popup, {
+			"data-slot": "select-content",
+			className: e("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none ui-mobile-sheet-popup", t),
+			...s,
+			children: [
+				/* @__PURE__ */ n(g, {}),
+				/* @__PURE__ */ n(i.List, { children: a }),
+				/* @__PURE__ */ n(_, {})
+			]
+		})
+	})] });
+}
+function p({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Label, {
+		"data-slot": "select-label",
+		className: e("text-muted-foreground px-2 py-1.5 text-xs", t),
+		...r
+	});
+}
+function m({ className: t, children: o, ...s }) {
+	return /* @__PURE__ */ r(i.Item, {
+		"data-slot": "select-item",
+		className: e("data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50", t),
+		...s,
+		children: [/* @__PURE__ */ n("span", {
+			className: "absolute right-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ n(i.ItemIndicator, { children: /* @__PURE__ */ n(a, { className: "size-4" }) })
+		}), /* @__PURE__ */ n(i.ItemText, { children: o })]
+	});
+}
+function h(e) {
+	let n = {};
+	return t.Children.forEach(e, (e) => {
+		if (!t.isValidElement(e)) return;
+		let r = e;
+		if (r.type === m) {
+			let e = r.props.value;
+			typeof e == "string" && (n[e] = r.props.children);
+			return;
+		}
+		r.props.children && Object.assign(n, h(r.props.children));
+	}), n;
+}
+function g({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: e("flex cursor-default items-center justify-center py-1", t),
+		...r,
+		children: /* @__PURE__ */ n(s, { className: "size-4" })
+	});
+}
+function _({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: e("flex cursor-default items-center justify-center py-1", t),
+		...r,
+		children: /* @__PURE__ */ n(o, { className: "size-4" })
+	});
+}
+//#endregion
+export { c as Select, f as SelectContent, l as SelectGroup, m as SelectItem, p as SelectLabel, d as SelectTrigger, u as SelectValue };

package/dist/components/forms/slider.d.ts

@@ -0,0 +1,9 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import * as React from "react";
+type SliderProps = Omit<React.ComponentProps<typeof SliderPrimitive.Root>, "onValueChange" | "value" | "defaultValue"> & {
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+};
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Slider };

package/dist/components/forms/slider.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Slider as i } from "@base-ui/react/slider";
+//#region src/components/forms/slider.tsx
+var a = t.forwardRef(({ className: t, onValueChange: a, "aria-label": o, "aria-labelledby": s, ...c }, l) => /* @__PURE__ */ n(i.Root, {
+	ref: l,
+	...c,
+	onValueChange: (e) => a?.(Array.isArray(e) ? [...e] : [e]),
+	children: /* @__PURE__ */ n(i.Control, {
+		className: e("relative flex w-full touch-none items-center py-2 select-none", t),
+		children: /* @__PURE__ */ r(i.Track, {
+			className: "bg-muted relative h-2 w-full grow rounded-full",
+			children: [/* @__PURE__ */ n(i.Indicator, { className: "bg-primary absolute h-full rounded-full" }), /* @__PURE__ */ n(i.Thumb, {
+				"aria-label": o ?? "Slider",
+				"aria-labelledby": s,
+				className: "border-border focus-visible:border-ring focus-visible:bg-primary focus-visible:ring-ring bg-background z-10 block h-6 w-6 rounded-full border shadow-sm ring-1 ring-border/5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+			})]
+		})
+	})
+}));
+a.displayName = "Slider";
+//#endregion
+export { a as Slider };

package/dist/components/forms/stepper.d.ts

@@ -0,0 +1,15 @@
+interface StepperProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    format?: (value: number) => string;
+    onChange: (value: number) => void;
+    className?: string;
+    disabled?: boolean;
+    increaseLabel?: string;
+    decreaseLabel?: string;
+}
+declare function Stepper({ value, min, max, step, format, onChange, className, disabled, increaseLabel, decreaseLabel, }: StepperProps): import("react").JSX.Element;
+export { Stepper };
+export type { StepperProps };