@almanaclabs/blaze-ui 0.3.1 → 0.4.0

package/dist/components/questionnaire/questionnaire-primitive.js

@@ -0,0 +1,353 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as t from "react";
+import { mergeProps as n } from "@base-ui/react/merge-props";
+import { useRender as r } from "@base-ui/react/use-render";
+//#region src/components/questionnaire/questionnaire-primitive.tsx
+var i = t.createContext(null), a = t.createContext(null), o = t.createContext(null);
+function s(e) {
+	let n = t.useContext(i);
+	if (!n) throw Error(`${e} must be used within Questionnaire`);
+	return n;
+}
+function c(e) {
+	let n = t.useContext(a);
+	if (!n) throw Error(`${e} must be used within QuestionnaireItem`);
+	return n;
+}
+function l(e) {
+	let n = t.useContext(o);
+	if (!n) throw Error(`${e} must be used within QuestionnaireChoice`);
+	return n;
+}
+function u({ defaultItem: n, item: r, items: a = [], onItemChange: o, shortcuts: s, onReset: c, onSubmit: l, onKeyDown: u, ...d }) {
+	let [f, p] = t.useState([]), m = t.useMemo(() => a.filter((e) => !e.disabled).map((e) => e.name), [a]), h = m.length ? m : f, [g, _] = t.useState(n ?? m[0] ?? null), v = r ?? g ?? h[0] ?? null, y = Math.max(0, h.indexOf(v ?? "")), [b, x] = t.useState({}), [S, C] = t.useState({}), w = t.useCallback((e) => {
+		!e || e === v || (r === void 0 && _(e), o?.(e));
+	}, [
+		v,
+		r,
+		o
+	]), T = t.useCallback((e) => (p((t) => t.includes(e) ? t : [...t, e]), () => p((t) => t.filter((t) => t !== e))), []), E = t.useCallback((e, t) => {
+		x((n) => ({
+			...n,
+			[e]: t ? "answered" : "unanswered"
+		}));
+	}, []), D = t.useCallback((e, t, n, r) => {
+		C((i) => {
+			let a = i[e] ?? [], o = r ? n ? [.../* @__PURE__ */ new Set([...a, t])] : [t] : a.filter((e) => e !== t);
+			return E(e, o.length > 0), {
+				...i,
+				[e]: o
+			};
+		});
+	}, [E]), O = t.useCallback(() => {
+		w(h[y - 1]);
+	}, [
+		y,
+		h,
+		w
+	]), k = t.useCallback(() => {
+		if (v) {
+			if (a.find((e) => e.name === v)?.required && b[v] !== "answered") {
+				x((e) => ({
+					...e,
+					[v]: "unanswered"
+				}));
+				return;
+			}
+			w(h[y + 1]);
+		}
+	}, [
+		y,
+		v,
+		a,
+		h,
+		w,
+		b
+	]), A = t.useCallback(() => {
+		v && (x((e) => ({
+			...e,
+			[v]: "skipped"
+		})), w(h[y + 1]));
+	}, [
+		y,
+		v,
+		h,
+		w
+	]), j = t.useMemo(() => ({
+		activeName: v,
+		current: h.length ? y + 1 : 0,
+		first: y === 0,
+		last: y === h.length - 1,
+		total: h.length,
+		shortcuts: s ?? null,
+		itemDefinitions: a,
+		statuses: b,
+		selections: S,
+		registerItem: T,
+		setAnswered: E,
+		setSelection: D,
+		goPrevious: O,
+		goNext: k,
+		skip: A
+	}), [
+		y,
+		v,
+		k,
+		O,
+		a,
+		h.length,
+		T,
+		S,
+		E,
+		D,
+		s,
+		A,
+		b
+	]);
+	return /* @__PURE__ */ e(i.Provider, {
+		value: j,
+		children: /* @__PURE__ */ e("form", {
+			...d,
+			noValidate: !0,
+			onReset: (e) => {
+				c?.(e), !e.defaultPrevented && (x({}), C({}), w(n ?? h[0]));
+			},
+			onSubmit: l,
+			onKeyDown: (e) => {
+				u?.(e), !e.defaultPrevented && (e.metaKey || e.ctrlKey) && e.key === "Enter" && (e.preventDefault(), j.last ? e.currentTarget.requestSubmit() : j.goNext());
+			}
+		})
+	});
+}
+function d({ children: e, render: t, ...i }) {
+	let { current: a, first: o, last: c, total: l } = s("QuestionnaireProgress"), u = l ? `Question ${a} of ${l}` : void 0;
+	return r({
+		defaultTagName: "div",
+		props: n({
+			children: e ?? u,
+			role: "progressbar",
+			"aria-label": "Questionnaire progress",
+			"aria-live": "polite",
+			"aria-valuemin": l ? 1 : void 0,
+			"aria-valuemax": l || void 0,
+			"aria-valuenow": l ? a : void 0,
+			"aria-valuetext": u
+		}, i),
+		render: t,
+		state: {
+			current: a,
+			first: o,
+			last: c,
+			total: l
+		}
+	});
+}
+function f({ disabled: n = !1, invalid: r = !1, multiple: i = !1, name: o, onStatusChange: c, required: l = !1, ...u }) {
+	let d = s("QuestionnaireItem"), f = t.useRef(c);
+	t.useLayoutEffect(() => {
+		f.current = c;
+	}, [c]), t.useLayoutEffect(() => d.registerItem(o), [o, d.registerItem]);
+	let p = d.statuses[o] ?? "unanswered", m = d.statuses[o] !== void 0, h = d.activeName === o;
+	t.useEffect(() => f.current?.(p), [p]);
+	let g = t.useMemo(() => ({
+		disabled: n,
+		invalid: r || l && m && p === "unanswered",
+		multiple: i,
+		name: o,
+		required: l,
+		status: p
+	}), [
+		m,
+		n,
+		r,
+		i,
+		o,
+		l,
+		p
+	]);
+	return /* @__PURE__ */ e(a.Provider, {
+		value: g,
+		children: /* @__PURE__ */ e("fieldset", {
+			...u,
+			disabled: n,
+			hidden: !h,
+			inert: !h || void 0,
+			"aria-invalid": g.invalid || void 0,
+			"data-active": h ? "" : void 0,
+			"data-status": p
+		})
+	});
+}
+function p({ render: e, ...t }) {
+	return c("QuestionnaireTitle"), r({
+		defaultTagName: "legend",
+		props: t,
+		render: e,
+		state: { slot: "questionnaire-title" }
+	});
+}
+function m({ render: e, ...t }) {
+	return c("QuestionnaireDescription"), r({
+		defaultTagName: "p",
+		props: t,
+		render: e,
+		state: { slot: "questionnaire-description" }
+	});
+}
+function h(t) {
+	return c("QuestionnaireChoices"), /* @__PURE__ */ e("div", { ...t });
+}
+function g({ checked: n, defaultChecked: r = !1, disabled: i = !1, onChange: a, value: l, ...u }) {
+	let d = s("QuestionnaireChoice"), f = d.setSelection, p = c("QuestionnaireChoice"), m = d.selections[p.name] ?? [], h = n ?? (m.includes(l) || r), g = p.multiple ? "checkbox" : "radio", _ = (d.itemDefinitions.find((e) => e.name === p.name)?.choices?.filter((e) => !e.disabled) ?? []).findIndex((e) => e.value === l), v = _ < 0 || !d.shortcuts ? null : d.shortcuts === "letters" ? String.fromCharCode(65 + _) : String(_ + 1), y = p.disabled || i;
+	t.useLayoutEffect(() => {
+		r && !m.includes(l) && f(p.name, l, p.multiple, !0);
+	}, [
+		r,
+		p.multiple,
+		p.name,
+		m,
+		f,
+		l
+	]);
+	let b = {
+		checked: h,
+		disabled: y,
+		name: p.name,
+		required: p.required && !p.multiple,
+		type: g,
+		value: l,
+		onChange: (e) => {
+			a?.(e), e.defaultPrevented || d.setSelection(p.name, l, p.multiple, e.target.checked);
+		}
+	}, x = t.useMemo(() => ({
+		checked: h,
+		disabled: y,
+		invalid: p.invalid,
+		inputProps: b,
+		shortcut: v,
+		type: g
+	}), [
+		h,
+		y,
+		b,
+		p.invalid,
+		v,
+		g
+	]);
+	return /* @__PURE__ */ e(o.Provider, {
+		value: x,
+		children: /* @__PURE__ */ e("label", {
+			...u,
+			"data-checked": h ? "" : void 0,
+			"data-disabled": y ? "" : void 0,
+			"data-invalid": p.invalid ? "" : void 0,
+			"data-shortcut": v ?? void 0,
+			"data-type": g
+		})
+	});
+}
+function _(t) {
+	let { inputProps: n } = l("QuestionnaireChoiceInput");
+	return /* @__PURE__ */ e("input", {
+		...n,
+		...t
+	});
+}
+function v(t) {
+	return l("QuestionnaireChoiceLabel"), /* @__PURE__ */ e("span", { ...t });
+}
+function y({ children: t, ...n }) {
+	let { shortcut: r } = l("QuestionnaireChoiceShortcut");
+	return /* @__PURE__ */ e("span", {
+		...n,
+		"aria-hidden": !0,
+		hidden: !r,
+		children: t ?? r
+	});
+}
+function b({ onChange: t, ...n }) {
+	let r = s("QuestionnaireInput"), i = c("QuestionnaireInput");
+	return /* @__PURE__ */ e("input", {
+		...n,
+		name: i.name,
+		disabled: i.disabled || n.disabled,
+		"aria-invalid": i.invalid || void 0,
+		onChange: (e) => {
+			t?.(e), e.defaultPrevented || r.setAnswered(i.name, e.target.value.trim().length > 0);
+		}
+	});
+}
+function x({ children: t, ...n }) {
+	let r = c("QuestionnaireError");
+	return /* @__PURE__ */ e("p", {
+		...n,
+		hidden: !r.invalid,
+		role: r.invalid ? "alert" : void 0,
+		children: t ?? (r.required ? "Choose an answer to continue." : "Choose an answer or skip this question.")
+	});
+}
+function S(t) {
+	let n = s("QuestionnairePrevious");
+	return /* @__PURE__ */ e("button", {
+		...t,
+		type: t.type ?? "button",
+		hidden: n.first,
+		"aria-hidden": n.first || void 0,
+		onClick: (e) => {
+			t.onClick?.(e), e.defaultPrevented || n.goPrevious();
+		}
+	});
+}
+function C(t) {
+	let n = s("QuestionnaireSkip");
+	return /* @__PURE__ */ e("button", {
+		...t,
+		type: t.type ?? "button",
+		hidden: n.last,
+		"aria-hidden": n.last || void 0,
+		onClick: (e) => {
+			t.onClick?.(e), e.defaultPrevented || n.skip();
+		}
+	});
+}
+function w(t) {
+	let n = s("QuestionnaireNext");
+	return /* @__PURE__ */ e("button", {
+		...t,
+		type: t.type ?? "button",
+		hidden: n.last,
+		"aria-hidden": n.last || void 0,
+		onClick: (e) => {
+			t.onClick?.(e), e.defaultPrevented || n.goNext();
+		}
+	});
+}
+function T(t) {
+	let n = s("QuestionnaireSubmit");
+	return /* @__PURE__ */ e("button", {
+		...t,
+		type: t.type ?? "submit",
+		hidden: !n.last,
+		"aria-hidden": !n.last || void 0
+	});
+}
+var E = {
+	Root: u,
+	Progress: d,
+	Item: f,
+	Title: p,
+	Description: m,
+	Choices: h,
+	Choice: g,
+	ChoiceInput: _,
+	ChoiceLabel: v,
+	ChoiceShortcut: y,
+	Input: b,
+	Error: x,
+	Previous: S,
+	Skip: C,
+	Next: w,
+	Submit: T
+};
+//#endregion
+export { E as QuestionnairePrimitive };

package/dist/components/questionnaire/questionnaire.js

@@ -0,0 +1,169 @@
+import { cn as e } from "../../lib/utils.js";
+import { buttonVariants as t } from "../button/button.js";
+import { QuestionnairePrimitive as n } from "./questionnaire-primitive.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import "react";
+import { IconCheck as a } from "@tabler/icons-react";
+//#region src/components/questionnaire/questionnaire.tsx
+function o({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n.Root, {
+		"data-slot": "questionnaire",
+		className: e("flex w-full min-w-0 flex-col gap-4", t),
+		...i
+	});
+}
+function s({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n.Progress, {
+		"data-slot": "questionnaire-progress",
+		className: e("min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums", t),
+		...i
+	});
+}
+function c({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n.Item, {
+		"data-slot": "questionnaire-item",
+		className: e("flex min-w-0 flex-col gap-4 border-0 p-0 outline-none", t),
+		...i
+	});
+}
+function l({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n.Title, {
+		"data-slot": "questionnaire-title",
+		className: e("font-heading text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4", t),
+		...i
+	});
+}
+function u({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n.Description, {
+		"data-slot": "questionnaire-description",
+		className: e("text-sm text-pretty text-muted-foreground", t),
+		...i
+	});
+}
+function d({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n.Choices, {
+		"data-slot": "questionnaire-choices",
+		className: e("group/questionnaire-choices grid min-w-0 gap-2", t),
+		...i
+	});
+}
+function f({ children: t, className: o, ...s }) {
+	return /* @__PURE__ */ i(n.Choice, {
+		"data-slot": "questionnaire-choice",
+		className: e("group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", o),
+		...s,
+		children: [
+			/* @__PURE__ */ r(n.ChoiceInput, {
+				"data-slot": "questionnaire-choice-input",
+				className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+			}),
+			/* @__PURE__ */ i("span", {
+				"aria-hidden": "true",
+				"data-slot": "questionnaire-choice-indicator",
+				className: "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary",
+				children: [/* @__PURE__ */ r("span", {
+					"data-slot": "questionnaire-choice-indicator-dot",
+					className: "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				}), /* @__PURE__ */ r(a, {
+					"data-slot": "questionnaire-choice-indicator-check",
+					className: "hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				})]
+			}),
+			/* @__PURE__ */ r(n.ChoiceLabel, {
+				"data-slot": "questionnaire-choice-label",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug",
+				children: t
+			}),
+			/* @__PURE__ */ r(n.ChoiceShortcut, {
+				"data-slot": "questionnaire-choice-shortcut",
+				className: "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+			})
+		]
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ r("span", {
+		"data-slot": "questionnaire-choice-description",
+		className: e("text-muted-foreground", t),
+		...n
+	});
+}
+function m({ className: t, ...i }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "questionnaire-input-wrapper",
+		className: "group/questionnaire-input relative w-full min-w-0",
+		children: /* @__PURE__ */ r(n.Input, {
+			"data-slot": "questionnaire-input",
+			className: e("h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground", t),
+			...i
+		})
+	});
+}
+function h({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n.Error, {
+		"data-slot": "questionnaire-error",
+		className: e("mt-2 text-sm text-destructive", t),
+		...i
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "questionnaire-actions",
+		className: e("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8", t),
+		...n
+	});
+}
+function _({ children: i, className: a, size: o = "default", variant: s = "outline", ...c }) {
+	return /* @__PURE__ */ r(n.Previous, {
+		"data-slot": "questionnaire-previous",
+		"data-size": o,
+		"data-variant": s,
+		className: e(t({
+			size: o,
+			variant: s
+		}), "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0", a),
+		...c,
+		children: i ?? "Previous"
+	});
+}
+function v({ children: i, className: a, size: o = "default", variant: s = "outline", ...c }) {
+	return /* @__PURE__ */ r(n.Skip, {
+		"data-slot": "questionnaire-skip",
+		"data-size": o,
+		"data-variant": s,
+		className: e(t({
+			size: o,
+			variant: s
+		}), "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0", a),
+		...c,
+		children: i ?? "Skip"
+	});
+}
+function y({ children: i, className: a, size: o = "default", variant: s = "default", ...c }) {
+	return /* @__PURE__ */ r(n.Next, {
+		"data-slot": "questionnaire-next",
+		"data-size": o,
+		"data-variant": s,
+		className: e(t({
+			size: o,
+			variant: s
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", a),
+		...c,
+		children: i ?? "Next"
+	});
+}
+function b({ children: i, className: a, size: o = "default", variant: s = "default", ...c }) {
+	return /* @__PURE__ */ r(n.Submit, {
+		"data-slot": "questionnaire-submit",
+		"data-size": o,
+		"data-variant": s,
+		className: e(t({
+			size: o,
+			variant: s
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", a),
+		...c,
+		children: i ?? "Submit"
+	});
+}
+//#endregion
+export { o as Questionnaire, g as QuestionnaireActions, f as QuestionnaireChoice, p as QuestionnaireChoiceDescription, d as QuestionnaireChoices, u as QuestionnaireDescription, h as QuestionnaireError, m as QuestionnaireInput, c as QuestionnaireItem, y as QuestionnaireNext, _ as QuestionnairePrevious, s as QuestionnaireProgress, v as QuestionnaireSkip, b as QuestionnaireSubmit, l as QuestionnaireTitle };

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

@@ -0,0 +1,26 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Radio as n } from "@base-ui/react/radio";
+import { RadioGroup as r } from "@base-ui/react/radio-group";
+//#region src/components/radio-group/radio-group.tsx
+function i({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r, {
+		"data-slot": "radio-group",
+		className: e("grid w-full gap-2", n),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "radio-group-item",
+		className: e("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none 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", r),
+		...i,
+		children: /* @__PURE__ */ t(n.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ t("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+		})
+	});
+}
+//#endregion
+export { i as RadioGroup, a as RadioGroupItem };

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { ScrollArea as r } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-area/scroll-area.tsx
+function i({ className: i, children: o, ...s }) {
+	return /* @__PURE__ */ n(r.Root, {
+		"data-slot": "scroll-area",
+		className: e("relative", i),
+		...s,
+		children: [
+			/* @__PURE__ */ t(r.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+				children: o
+			}),
+			/* @__PURE__ */ t(a, {}),
+			/* @__PURE__ */ t(r.Corner, {})
+		]
+	});
+}
+function a({ className: n, orientation: i = "vertical", ...a }) {
+	return /* @__PURE__ */ t(r.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		"data-orientation": i,
+		orientation: i,
+		className: e("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", n),
+		...a,
+		children: /* @__PURE__ */ t(r.Thumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "relative flex-1 rounded-full bg-border"
+		})
+	});
+}
+//#endregion
+export { i as ScrollArea, a as ScrollBar };

package/dist/components/select/select.js

@@ -0,0 +1,98 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { IconCheck as r, IconChevronDown as i, IconChevronUp as a } from "@tabler/icons-react";
+import { Select as o } from "@base-ui/react/select";
+//#region src/components/select/select.tsx
+var s = o.Root;
+function c({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.Group, {
+		"data-slot": "select-group",
+		className: e("scroll-my-1 p-1", n),
+		...r
+	});
+}
+function l({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.Value, {
+		"data-slot": "select-value",
+		className: e("flex flex-1 text-left", n),
+		...r
+	});
+}
+function u({ className: r, size: a = "default", children: s, "aria-label": c = "Select an option", ...l }) {
+	return /* @__PURE__ */ n(o.Trigger, {
+		"aria-label": c,
+		"data-slot": "select-trigger",
+		"data-size": a,
+		className: e("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none 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 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", r),
+		...l,
+		children: [s, /* @__PURE__ */ t(o.Icon, { render: /* @__PURE__ */ t(i, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
+	});
+}
+function d({ className: r, children: i, side: a = "bottom", sideOffset: s = 4, align: c = "center", alignOffset: l = 0, alignItemWithTrigger: u = !0, ...d }) {
+	return /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(o.Positioner, {
+		side: a,
+		sideOffset: s,
+		align: c,
+		alignOffset: l,
+		alignItemWithTrigger: u,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ n(o.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": u,
+			className: e("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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", r),
+			...d,
+			children: [
+				/* @__PURE__ */ t(h, {}),
+				/* @__PURE__ */ t(o.List, { children: i }),
+				/* @__PURE__ */ t(g, {})
+			]
+		})
+	}) });
+}
+function f({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.GroupLabel, {
+		"data-slot": "select-label",
+		className: e("px-1.5 py-1 text-xs text-muted-foreground", n),
+		...r
+	});
+}
+function p({ className: i, children: a, ...s }) {
+	return /* @__PURE__ */ n(o.Item, {
+		"data-slot": "select-item",
+		className: e("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", i),
+		...s,
+		children: [/* @__PURE__ */ t(o.ItemText, {
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children: a
+		}), /* @__PURE__ */ t(o.ItemIndicator, {
+			render: /* @__PURE__ */ t("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ t(r, { className: "pointer-events-none" })
+		})]
+	});
+}
+function m({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.Separator, {
+		"data-slot": "select-separator",
+		className: e("pointer-events-none -mx-1 my-1 h-px bg-border", n),
+		...r
+	});
+}
+function h({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: e("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", n),
+		...r,
+		children: /* @__PURE__ */ t(a, {})
+	});
+}
+function g({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: e("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", n),
+		...r,
+		children: /* @__PURE__ */ t(i, {})
+	});
+}
+//#endregion
+export { s as Select, d as SelectContent, c as SelectGroup, p as SelectItem, f as SelectLabel, g as SelectScrollDownButton, h as SelectScrollUpButton, m as SelectSeparator, u as SelectTrigger, l as SelectValue };