experimental-ui 0.3.0 → 0.4.0-canary.2

package/Button/Button.js

@@ -8,58 +8,58 @@ import { BTN, BUTTON_MAP } from "./Button.interface.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Button = (t) => {
-	let i = c(81), l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M;
-	i[0] === t ? (l = i[1], u = i[2], d = i[3], f = i[4], p = i[5], m = i[6], h = i[7], g = i[8], _ = i[9], v = i[10], y = i[11], b = i[12], x = i[13], S = i[14], C = i[15], w = i[16], T = i[17], E = i[18], D = i[19], O = i[20], k = i[21], A = i[22], j = i[23], M = i[24]) : ({ref: S, children: u, href: v, shape: E, size: A, variant: j, color: f, startIcon: O, endIcon: g, wide: M, fullWidth: _, responsive: w, noAnimation: x, loading: y, loadingVariant: b, active: l, disabled: h, soft: D, dash: p, ripple: T, dataTheme: m, className: d, style: k, ...C} = t, i[0] = t, i[1] = l, i[2] = u, i[3] = d, i[4] = f, i[5] = p, i[6] = m, i[7] = h, i[8] = g, i[9] = _, i[10] = v, i[11] = y, i[12] = b, i[13] = x, i[14] = S, i[15] = C, i[16] = w, i[17] = T, i[18] = E, i[19] = D, i[20] = O, i[21] = k, i[22] = A, i[23] = j, i[24] = M);
-	let N = A === void 0 ? "md" : A, P;
-	i[25] === T ? P = i[26] : (P = typeof T == "object" ? T : {}, i[25] = T, i[26] = P);
-	let ne = useRipple(P), re = (O && !y || g) && "gap-2", F = f && BUTTON_MAP[f], I = j && BUTTON_MAP[j], L = N !== "md" && BUTTON_MAP[N], R = E && BUTTON_MAP[E], z = M && BUTTON_MAP.wide, B = _ && BUTTON_MAP.fullWidth, V = w && BUTTON_MAP.responsive, H = l && BUTTON_MAP.active, U = h && BUTTON_MAP.disabled, W = x && BUTTON_MAP.noAnimation, G = D && BUTTON_MAP.soft, K = p && BUTTON_MAP.dash, q = T && "btn-ripple", J;
-	i[27] !== d || i[28] !== V || i[29] !== H || i[30] !== U || i[31] !== W || i[32] !== G || i[33] !== K || i[34] !== q || i[35] !== re || i[36] !== F || i[37] !== I || i[38] !== L || i[39] !== R || i[40] !== z || i[41] !== B ? (J = cn("btn", re, F, I, L, R, z, B, V, H, U, W, G, K, q, d), i[27] = d, i[28] = V, i[29] = H, i[30] = U, i[31] = W, i[32] = G, i[33] = K, i[34] = q, i[35] = re, i[36] = F, i[37] = I, i[38] = L, i[39] = R, i[40] = z, i[41] = B, i[42] = J) : J = i[42];
-	let Y = J, X;
-	i[43] !== ne || i[44] !== h || i[45] !== v || i[46] !== y || i[47] !== C || i[48] !== T ? (X = (e) => {
-		T && !h && !y && ne(e), C.onClick?.(e);
-	}, i[43] = ne, i[44] = h, i[45] = v, i[46] = y, i[47] = C, i[48] = T, i[49] = X) : X = i[49];
-	let Z = X;
-	if (v) {
-		let e = C, t = S, n = h ? void 0 : v, r;
-		i[50] !== h || i[51] !== Z ? (r = h ? _temp : Z, i[50] = h, i[51] = Z, i[52] = r) : r = i[52];
-		let a = !!O && O, o = !!g && g, s;
-		return i[53] !== e || i[54] !== u || i[55] !== Y || i[56] !== m || i[57] !== h || i[58] !== k || i[59] !== t || i[60] !== n || i[61] !== r || i[62] !== a || i[63] !== o ? (s = /* @__PURE__ */ jsxs("a", {
+	let i = c(81), o, s, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A;
+	i[0] === t ? (o = i[1], s = i[2], l = i[3], u = i[4], d = i[5], f = i[6], p = i[7], m = i[8], h = i[9], g = i[10], _ = i[11], v = i[12], y = i[13], b = i[14], x = i[15], S = i[16], C = i[17], w = i[18], T = i[19], E = i[20], D = i[21], O = i[22], k = i[23], A = i[24]) : ({ref: b, children: s, href: g, shape: w, size: O, variant: k, color: u, startIcon: E, endIcon: m, wide: A, fullWidth: h, responsive: S, noAnimation: y, loading: _, loadingVariant: v, active: o, disabled: p, soft: T, dash: d, ripple: C, dataTheme: f, className: l, style: D, ...x} = t, i[0] = t, i[1] = o, i[2] = s, i[3] = l, i[4] = u, i[5] = d, i[6] = f, i[7] = p, i[8] = m, i[9] = h, i[10] = g, i[11] = _, i[12] = v, i[13] = y, i[14] = b, i[15] = x, i[16] = S, i[17] = C, i[18] = w, i[19] = T, i[20] = E, i[21] = D, i[22] = O, i[23] = k, i[24] = A);
+	let j = O === void 0 ? "md" : O, M;
+	i[25] === C ? M = i[26] : (M = typeof C == "object" ? C : {}, i[25] = C, i[26] = M);
+	let N = useRipple(M), ie = (E && !_ || m) && "gap-2", ae = u && BUTTON_MAP[u], P = k && BUTTON_MAP[k], F = j !== "md" && BUTTON_MAP[j], I = w && BUTTON_MAP[w], L = A && BUTTON_MAP.wide, R = h && BUTTON_MAP.fullWidth, z = S && BUTTON_MAP.responsive, B = o && BUTTON_MAP.active, V = p && BUTTON_MAP.disabled, H = y && BUTTON_MAP.noAnimation, U = T && BUTTON_MAP.soft, W = d && BUTTON_MAP.dash, G = C && "btn-ripple", K;
+	i[27] !== l || i[28] !== z || i[29] !== B || i[30] !== V || i[31] !== H || i[32] !== U || i[33] !== W || i[34] !== G || i[35] !== ie || i[36] !== ae || i[37] !== P || i[38] !== F || i[39] !== I || i[40] !== L || i[41] !== R ? (K = cn("btn", ie, ae, P, F, I, L, R, z, B, V, H, U, W, G, l), i[27] = l, i[28] = z, i[29] = B, i[30] = V, i[31] = H, i[32] = U, i[33] = W, i[34] = G, i[35] = ie, i[36] = ae, i[37] = P, i[38] = F, i[39] = I, i[40] = L, i[41] = R, i[42] = K) : K = i[42];
+	let q = K, J;
+	i[43] !== N || i[44] !== p || i[45] !== g || i[46] !== _ || i[47] !== x || i[48] !== C ? (J = (e) => {
+		C && !p && !_ && N(e), x.onClick?.(e);
+	}, i[43] = N, i[44] = p, i[45] = g, i[46] = _, i[47] = x, i[48] = C, i[49] = J) : J = i[49];
+	let Y = J;
+	if (g) {
+		let e = x, t = b, n = p ? void 0 : g, r;
+		i[50] !== p || i[51] !== Y ? (r = p ? _temp : Y, i[50] = p, i[51] = Y, i[52] = r) : r = i[52];
+		let a;
+		return i[53] !== e || i[54] !== s || i[55] !== q || i[56] !== f || i[57] !== p || i[58] !== m || i[59] !== E || i[60] !== D || i[61] !== t || i[62] !== n || i[63] !== r ? (a = /* @__PURE__ */ jsxs("a", {
 			...e,
 			ref: t,
-			className: Y,
-			style: k,
+			className: q,
+			style: D,
 			href: n,
-			"data-theme": m,
-			"aria-disabled": h,
+			"data-theme": f,
+			"aria-disabled": p,
 			onClick: r,
 			children: [
-				a,
-				u,
-				o
+				E,
+				s,
+				m
 			]
-		}), i[53] = e, i[54] = u, i[55] = Y, i[56] = m, i[57] = h, i[58] = k, i[59] = t, i[60] = n, i[61] = r, i[62] = a, i[63] = o, i[64] = s) : s = i[64], s;
+		}), i[53] = e, i[54] = s, i[55] = q, i[56] = f, i[57] = p, i[58] = m, i[59] = E, i[60] = D, i[61] = t, i[62] = n, i[63] = r, i[64] = a) : a = i[64], a;
 	}
-	let ie = C, ae = S, oe = h ?? y, Q;
-	i[65] !== y || i[66] !== b || i[67] !== N ? (Q = y && /* @__PURE__ */ jsx(Loading_default, {
-		variant: b,
-		size: N
-	}), i[65] = y, i[66] = b, i[67] = N, i[68] = Q) : Q = i[68];
-	let se = !!O && O, ce = !!g && g, $;
-	return i[69] !== u || i[70] !== Y || i[71] !== m || i[72] !== Z || i[73] !== k || i[74] !== ie || i[75] !== ae || i[76] !== oe || i[77] !== Q || i[78] !== se || i[79] !== ce ? ($ = /* @__PURE__ */ jsxs("button", {
-		...ie,
-		ref: ae,
-		"data-theme": m,
-		className: Y,
-		style: k,
+	let X = x, Z = b, oe = p ?? _, Q;
+	i[65] !== _ || i[66] !== v || i[67] !== j ? (Q = _ && /* @__PURE__ */ jsx(Loading_default, {
+		variant: v,
+		size: j
+	}), i[65] = _, i[66] = v, i[67] = j, i[68] = Q) : Q = i[68];
+	let $;
+	return i[69] !== s || i[70] !== q || i[71] !== f || i[72] !== m || i[73] !== Y || i[74] !== E || i[75] !== D || i[76] !== X || i[77] !== Z || i[78] !== oe || i[79] !== Q ? ($ = /* @__PURE__ */ jsxs("button", {
+		...X,
+		ref: Z,
+		"data-theme": f,
+		className: q,
+		style: D,
 		disabled: oe,
-		onClick: Z,
+		onClick: Y,
 		children: [
 			Q,
-			se,
-			u,
-			ce
+			E,
+			s,
+			m
 		]
-	}), i[69] = u, i[70] = Y, i[71] = m, i[72] = Z, i[73] = k, i[74] = ie, i[75] = ae, i[76] = oe, i[77] = Q, i[78] = se, i[79] = ce, i[80] = $) : $ = i[80], $;
+	}), i[69] = s, i[70] = q, i[71] = f, i[72] = m, i[73] = Y, i[74] = E, i[75] = D, i[76] = X, i[77] = Z, i[78] = oe, i[79] = Q, i[80] = $) : $ = i[80], $;
 };
 Button.displayName = "Button";
 var Button_default = Button;

package/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react';
+import { ReactElement } from 'react';
 import { CheckboxProps } from './Checkbox.interface';
-declare const Checkbox: ({ ref: propRef, register: propRegister, error: propError, disabled: propDisabled, indeterminate: propIndeterminate, name, color, label, labelPosition, size, dataTheme, ...props }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ ref: propRef, register: propRegister, error: propError, disabled: propDisabled, indeterminate: propIndeterminate, name, color, label, labelPosition, size, dataTheme, ...props }: CheckboxProps) => ReactElement;
 export default Checkbox;

package/Range/Range.d.ts

@@ -1,4 +1,3 @@
-import { ReactElement } from 'react';
-import { RangeProps } from './Range.interface';
-declare const Range: ({ ref: propRef, register: propRegister, error: propError, disabled: propDisabled, name, color, size, step, min, max, marks, dataTheme, className, classes, onChange, markDisplay, allowStepsWithMarks, ...props }: RangeProps) => ReactElement;
+import { RangeProps } from './Range.interface.ts';
+declare function Range({ value, min, max, step, orientation, onChange, className, progressColor, thumbColor, marks, showSteps, snapToMarks, markStyle, size, }: RangeProps): import("react/jsx-runtime").JSX.Element;
 export default Range;

package/Range/Range.interface.d.ts

@@ -1,63 +1,21 @@
-import { InputHTMLAttributes } from 'react';
-import { FieldError, FieldValues, UseFormRegister } from 'react-hook-form';
-import { ComponentColor, IComponentBaseProps, Size } from '../types';
-import { MarkProps } from './Range.CustomMarks';
-export declare const RANGE = "range";
-export declare const PADDING_X_MAP: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
-export declare const RANGE_MAP: {
-    vertical: string;
-    primary: string;
-    secondary: string;
-    error: string;
-    info: string;
-    success: string;
-    warning: string;
-    accent: string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
-export interface MarkDisplayOptions {
-    showValue?: boolean;
-    showTick?: boolean;
-    customTick?: string;
+export interface Mark {
+    value: number;
+    label?: string;
 }
-export type RangeProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & IComponentBaseProps & {
-    ref?: React.Ref<HTMLInputElement>;
-    color?: Exclude<ComponentColor, "ghost" | "neutral">;
-    size?: Size;
-    step?: number;
+export interface RangeProps {
+    value: number | [number, number];
     min?: number;
     max?: number;
-    name: string;
-    register?: UseFormRegister<FieldValues>;
-    error?: FieldError;
+    step?: number;
+    orientation?: "horizontal" | "vertical";
+    onChange: (value: number | [number, number]) => void;
     disabled?: boolean;
-    hiddeStepValue?: boolean;
-    marks?: MarkProps[];
-    markDisplay?: MarkDisplayOptions;
-    /**
-     * When true, combines step values with custom marks values
-     * allowing the slider to snap to both step intervals and custom mark positions
-     * @default false
-     */
-    allowStepsWithMarks?: boolean;
-    classes?: {
-        customMarks?: {
-            container?: string;
-            mark?: string;
-        };
-        defaultMarks?: {
-            container?: string;
-            mark?: string;
-        };
-    };
-};
+    className?: string;
+    progressColor?: string;
+    thumbColor?: string;
+    marks?: Mark[] | boolean;
+    showSteps?: boolean;
+    snapToMarks?: boolean;
+    markStyle?: "circle" | "line";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}

package/Range/Range.js

@@ -1,155 +1,212 @@
 "use strict";
 "use client";
-import cn from "../utils.ts/utils.js";
-import mergeRefs from "../libs/vendor/merge-refs.js";
-import { defaultSize } from "../constants.ts/constants.js";
-import use_RHF_integration_default from "../hooks/use-RHF-integration.js";
-import Range_CustomMarks_default from "./Range.CustomMarks.js";
-import Range_DefaultMarks_default from "./Range.DefaultMarks.js";
-import { PADDING_X_MAP, RANGE, RANGE_MAP } from "./Range.interface.js";
-import { c } from "react/compiler-runtime";
+import clsx_default from "../libs/vendor/clsx.js";
+import v4_default from "../libs/vendor/uuid4.js";
 import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-var Range_default = (n) => {
-	let r = c(103), i, a, o, s, l, u, d, f, p, m, h, g, _, v, y, b, x, S;
-	r[0] === n ? (i = r[1], a = r[2], o = r[3], s = r[4], l = r[5], u = r[6], d = r[7], f = r[8], p = r[9], m = r[10], h = r[11], g = r[12], _ = r[13], v = r[14], y = r[15], b = r[16], x = r[17], S = r[18]) : ({ref: h, register: g, error: m, disabled: p, name: d, color: o, size: v, step: y, min: b, max: x, marks: u, dataTheme: s, className: i, classes: a, onChange: f, markDisplay: l, allowStepsWithMarks: S, ..._} = n, r[0] = n, r[1] = i, r[2] = a, r[3] = o, r[4] = s, r[5] = l, r[6] = u, r[7] = d, r[8] = f, r[9] = p, r[10] = m, r[11] = h, r[12] = g, r[13] = _, r[14] = v, r[15] = y, r[16] = b, r[17] = x, r[18] = S);
-	let C = b === void 0 ? 0 : b, w = x === void 0 ? 100 : x, T = S === void 0 ? !1 : S, me = useRef(null), { error: he, disabled: E, registerRef: D, registerRest: O } = use_RHF_integration_default(d, g, m, p), k = v && RANGE_MAP[v], A = o && RANGE_MAP[o], j = !!he, M;
-	r[19] !== i || r[20] !== k || r[21] !== A || r[22] !== j ? (M = cn(RANGE, "block w-full", k, A, { "range-error": j }, i), r[19] = i, r[20] = k, r[21] = A, r[22] = j, r[23] = M) : M = r[23];
-	let N = M, P = PADDING_X_MAP[v ?? "md"], F;
-	r[24] === P ? F = r[25] : (F = cn(P), r[24] = P, r[25] = F);
-	let I = F, ge = a?.customMarks?.container, L;
-	r[26] !== I || r[27] !== ge ? (L = cn(I, ge), r[26] = I, r[27] = ge, r[28] = L) : L = r[28];
-	let R = L, _e = a?.customMarks?.mark, z;
-	r[29] === _e ? z = r[30] : (z = cn(_e), r[29] = _e, r[30] = z);
-	let B;
-	r[31] === z ? B = r[32] : (B = { mark: z }, r[31] = z, r[32] = B);
-	let V = B, H;
-	bb0: {
-		if (T && y && u) {
-			let e;
-			if (r[33] !== u || r[34] !== w || r[35] !== C || r[36] !== y) {
-				let t = /* @__PURE__ */ new Set();
-				for (let e = C; e <= w; e += y) t.add(e);
-				for (let e of u) e.value >= C && e.value <= w && t.add(e.value);
-				e = Array.from(t).sort(_temp), r[33] = u, r[34] = w, r[35] = C, r[36] = y, r[37] = e;
-			} else e = r[37];
-			H = e;
-			break bb0;
-		}
-		if (u && !y) {
-			let e;
-			if (r[38] !== u || r[39] !== w || r[40] !== C) {
-				let t;
-				r[42] !== w || r[43] !== C ? (t = (e) => e.value >= C && e.value <= w, r[42] = w, r[43] = C, r[44] = t) : t = r[44], e = u.filter(t).map(_temp2).sort(_temp3), r[38] = u, r[39] = w, r[40] = C, r[41] = e;
-			} else e = r[41];
-			let t = e;
-			H = t.length > 0 ? t : null;
-			break bb0;
-		}
-		H = null;
-	}
-	let U = H, W;
-	r[45] === U ? W = r[46] : (W = (e) => {
-		if (!U) return e;
-		let t = U[0], n = Math.abs(e - t);
-		for (let fe of U) {
-			let pe = Math.abs(e - fe);
-			pe < n && (n = pe, t = fe);
-		}
-		return t;
-	}, r[45] = U, r[46] = W);
-	let ve = W, G;
-	r[47] !== E || r[48] !== f ? (G = (e) => {
-		if (E) return;
-		let t = me.current;
-		if (!t) return;
-		t.value = String(e);
-		let n = new Event("change", { bubbles: !0 });
-		Object.defineProperty(n, "target", {
-			writable: !1,
-			value: t
-		}), f && f(n), t.dispatchEvent(new Event("input", { bubbles: !0 }));
-	}, r[47] = E, r[48] = f, r[49] = G) : G = r[49];
-	let K = G, q;
-	r[50] !== ve || r[51] !== f || r[52] !== O || r[53] !== U ? (q = (e) => {
-		if (U && U.length > 0) {
-			let t = Number(e.target.value), n = ve(t);
-			t !== n && (e.target.value = String(n));
-		}
-		O?.onChange && O.onChange(e), f && f(e);
-	}, r[50] = ve, r[51] = f, r[52] = O, r[53] = U, r[54] = q) : q = r[54];
-	let ye = q, be = T && U || u && !y && U ? 1 : y, J;
-	r[55] !== h || r[56] !== D ? (J = mergeRefs(h, me, D), r[55] = h, r[56] = D, r[57] = J) : J = r[57];
-	let Y;
-	r[58] !== s || r[59] !== E || r[60] !== be || r[61] !== ye || r[62] !== w || r[63] !== C || r[64] !== d || r[65] !== _ || r[66] !== N || r[67] !== O || r[68] !== J ? (Y = /* @__PURE__ */ jsx("input", {
-		type: "range",
-		id: d,
-		name: d,
-		step: be,
-		min: C,
-		max: w,
-		disabled: E,
-		"data-theme": s,
-		className: N,
-		..._,
-		...O,
-		ref: J,
-		onChange: ye
-	}), r[58] = s, r[59] = E, r[60] = be, r[61] = ye, r[62] = w, r[63] = C, r[64] = d, r[65] = _, r[66] = N, r[67] = O, r[68] = J, r[69] = Y) : Y = r[69];
-	let X;
-	r[70] !== K || r[71] !== l || r[72] !== u || r[73] !== R || r[74] !== V || r[75] !== w || r[76] !== C || r[77] !== y ? (X = !!y && !u && /* @__PURE__ */ jsx(Range_DefaultMarks_default, {
-		step: y,
-		min: C,
-		max: w,
-		className: R,
-		classes: V,
-		onMarkClick: K,
-		markDisplay: l
-	}), r[70] = K, r[71] = l, r[72] = u, r[73] = R, r[74] = V, r[75] = w, r[76] = C, r[77] = y, r[78] = X) : X = r[78];
-	let Z;
-	r[79] !== T || r[80] !== K || r[81] !== u || r[82] !== R || r[83] !== V || r[84] !== w || r[85] !== C ? (Z = !!u && !T && /* @__PURE__ */ jsx(Range_CustomMarks_default, {
-		min: C,
-		max: w,
-		marks: u,
-		className: R,
-		classes: V,
-		onMarkClick: K
-	}), r[79] = T, r[80] = K, r[81] = u, r[82] = R, r[83] = V, r[84] = w, r[85] = C, r[86] = Z) : Z = r[86];
-	let Q;
-	r[87] !== T || r[88] !== K || r[89] !== l || r[90] !== u || r[91] !== R || r[92] !== V || r[93] !== w || r[94] !== C || r[95] !== y || r[96] !== U ? (Q = !!u && !!y && T && U && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Range_DefaultMarks_default, {
-		step: y,
-		min: C,
-		max: w,
-		className: R,
-		classes: V,
-		onMarkClick: K,
-		markDisplay: l
-	}), /* @__PURE__ */ jsx(Range_CustomMarks_default, {
-		min: C,
-		max: w,
-		marks: u,
-		className: R,
-		classes: V,
-		onMarkClick: K
-	})] }), r[87] = T, r[88] = K, r[89] = l, r[90] = u, r[91] = R, r[92] = V, r[93] = w, r[94] = C, r[95] = y, r[96] = U, r[97] = Q) : Q = r[97];
-	let $;
-	return r[98] !== Y || r[99] !== X || r[100] !== Z || r[101] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
-		className: "w-full",
-		children: [
-			Y,
-			X,
-			Z,
-			Q
-		]
-	}), r[98] = Y, r[99] = X, r[100] = Z, r[101] = Q, r[102] = $) : $ = r[102], $;
+import { jsx, jsxs } from "react/jsx-runtime";
+var clamp = (t, o, s) => Math.min(Math.max(t, o), s), toPercent = (t, o, s) => (t - o) / (s - o) * 100, thumbSizes = {
+	xs: "calc(var(--size-selector, 0.25rem) * 3)",
+	sm: "calc(var(--size-selector, 0.25rem) * 4)",
+	md: "calc(var(--size-selector, 0.25rem) * 5)",
+	lg: "calc(var(--size-selector, 0.25rem) * 6)",
+	xl: "calc(var(--size-selector, 0.25rem) * 7)"
+}, trackSizes = {
+	xs: "calc(var(--size-selector, 0.25rem) * 4)",
+	sm: "calc(var(--size-selector, 0.25rem) * 5)",
+	md: "calc(var(--size-selector, 0.25rem) * 6)",
+	lg: "calc(var(--size-selector, 0.25rem) * 7)",
+	xl: "calc(var(--size-selector, 0.25rem) * 8)"
+}, getThumbOffset = (t) => `calc((var(--size-selector, 0.25rem) * ${{
+	xs: 3,
+	sm: 4,
+	md: 5,
+	lg: 6,
+	xl: 7
+}[t]}) / 2 + 2px)`, getAdjustedPosition = (t, o) => `calc(${t}% - ${getThumbOffset(o)})`, getAdjustedWidth = (t, o, s) => {
+	let c = getThumbOffset(s);
+	return `calc(${o - t}% + ${c} + ${c})`;
 };
-function _temp(e, t) {
-	return e - t;
-}
-function _temp2(e) {
-	return e.value;
-}
-function _temp3(e, t) {
-	return e - t;
+function Range({ value: f, min: p = 0, max: m = 100, step: h = 1, orientation: g = "horizontal", onChange: _, className: v, progressColor: y = "bg-primary", thumbColor: b = "border-primary", marks: x, showSteps: S = !1, snapToMarks: C = !1, markStyle: w = "circle", size: T = "md" }) {
+	let E = useRef(null), D = Array.isArray(f), O = D ? f : [f], k = useRef([]);
+	k.current.length !== O.length && (k.current = O.map((t, s) => `thumb-${D ? s === 0 ? "start" : "end" : "single"}-${v4_default()}`));
+	let A = O.map((t) => toPercent(t, p, m)), j = x === !0 ? Array.from({ length: Math.floor((m - p) / h) + 1 }, (t, o) => ({ value: p + o * h })) : x === !1 || !x ? [] : x, M = (t) => {
+		if (!C || j.length === 0) return t;
+		let o = j.map((t) => t.value);
+		return o.reduce((o, s) => Math.abs(s - t) < Math.abs(o - t) ? s : o, o[0]);
+	}, N = (t, o) => {
+		if (!E.current) return;
+		let s = E.current.getBoundingClientRect(), c = g === "horizontal" ? s.width : s.height, l = g === "horizontal" ? o - s.left : s.bottom - o, u = p + Math.round(l / c * (m - p) / h) * h;
+		u = clamp(u, p, m), C && (u = M(u));
+		let d = [...O];
+		d[t] = u, D ? (d.sort((t, o) => t - o), _(d)) : _(d[0]);
+	}, P = (t) => {
+		if (D) {
+			let o = O.map((o) => Math.abs(o - t)), s = o.indexOf(Math.min(...o)), c = [...O];
+			c[s] = t, c.sort((t, o) => t - o), _(c);
+		} else _(t);
+	}, F = (t, o) => {
+		(t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), P(o));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-full",
+		children: /* @__PURE__ */ jsx("div", {
+			className: clsx_default("relative rounded-full bg-base-300", v),
+			style: { ...g === "horizontal" ? {
+				height: trackSizes[T],
+				width: "100%",
+				paddingLeft: getThumbOffset(T),
+				paddingRight: getThumbOffset(T)
+			} : {
+				width: trackSizes[T],
+				height: "10rem",
+				paddingTop: getThumbOffset(T),
+				paddingBottom: getThumbOffset(T)
+			} },
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: E,
+				role: "presentation",
+				className: "relative h-full w-full touch-none select-none",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: clsx_default("absolute rounded-full", y, g === "horizontal" ? "h-full" : "w-full"),
+						style: D ? g === "horizontal" ? {
+							left: getAdjustedPosition(A[0], T),
+							width: getAdjustedWidth(A[0], A[1], T)
+						} : {
+							bottom: getAdjustedPosition(A[0], T),
+							height: getAdjustedWidth(A[0], A[1], T)
+						} : g === "horizontal" ? {
+							left: getAdjustedPosition(0, T),
+							width: `calc(${A[0]}% + ${getThumbOffset(T)}*2)`
+						} : {
+							bottom: getAdjustedPosition(0, T),
+							height: `calc(${A[0]}% + ${getThumbOffset(T)}*2)`
+						}
+					}),
+					O.map((o, s) => /* @__PURE__ */ jsx("div", {
+						"data-thumb": !0,
+						className: clsx_default("absolute z-10 cursor-grab rounded-full border bg-base-100 active:cursor-grabbing", b),
+						style: {
+							width: thumbSizes[T],
+							height: thumbSizes[T],
+							...g === "horizontal" ? {
+								left: `${A[s]}%`,
+								top: "50%",
+								transform: "translate(-50%, -50%)"
+							} : {
+								bottom: `${A[s]}%`,
+								left: "50%",
+								transform: "translate(-50%, 50%)"
+							}
+						},
+						onPointerDown: (t) => {
+							t.currentTarget.setPointerCapture(t.pointerId);
+							let o = (t) => N(s, g === "horizontal" ? t.clientX : t.clientY), c = () => {
+								window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", c);
+							};
+							window.addEventListener("pointermove", o), window.addEventListener("pointerup", c);
+						}
+					}, k.current[s])),
+					j.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none absolute inset-0",
+						children: j.map((t) => {
+							if (t.label) return null;
+							let o = toPercent(t.value, p, m);
+							return w === "line" ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Set value to ${t.value}`,
+								className: "pointer-events-auto absolute cursor-pointer border-0 bg-base-content/40 p-0 transition-colors hover:bg-base-content/60",
+								onClick: (o) => {
+									o.stopPropagation(), P(t.value);
+								},
+								onKeyDown: (o) => F(o, t.value),
+								style: g === "horizontal" ? {
+									left: `${o}%`,
+									top: "0",
+									width: "2px",
+									height: "50%",
+									transform: "translateY(50%)"
+								} : {
+									bottom: `${o}%`,
+									left: "0",
+									height: "2px",
+									width: "100%",
+									transform: "translateY(50%)"
+								}
+							}, `track-mark-${t.value}`) : /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Set value to ${t.value}`,
+								className: "pointer-events-auto absolute z-5 h-1.5 w-1.5 cursor-pointer rounded-full border-0 bg-base-content/50 p-0 transition-colors hover:bg-base-content/70",
+								onClick: (o) => {
+									o.stopPropagation(), P(t.value);
+								},
+								onKeyDown: (o) => F(o, t.value),
+								style: g === "horizontal" ? {
+									left: `${o}%`,
+									top: "50%",
+									transform: "translate(-50%, -50%)"
+								} : {
+									bottom: `${o}%`,
+									left: "50%",
+									transform: "translate(-50%, 50%)"
+								}
+							}, `track-mark-${t.value}`);
+						})
+					}),
+					S && /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none absolute inset-0 flex items-center justify-between",
+						children: Array.from({ length: Math.floor((m - p) / h) + 1 }, (t, o) => {
+							let s = p + o * h, l = toPercent(s, p, m);
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Set value to ${s}`,
+								className: "pointer-events-auto absolute z-0 h-2 w-2 cursor-pointer rounded-full border-0 bg-base-content/30 p-0 transition-colors hover:bg-base-content/50",
+								onClick: (t) => {
+									t.stopPropagation(), P(s);
+								},
+								onKeyDown: (t) => F(t, s),
+								style: g === "horizontal" ? {
+									left: `${l}%`,
+									top: "50%",
+									transform: "translate(-50%, -50%)"
+								} : {
+									bottom: `${l}%`,
+									left: "50%",
+									transform: "translate(-50%, 50%)"
+								}
+							}, `step-${s}`);
+						})
+					}),
+					j.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: clsx_default("pointer-events-none absolute", g === "horizontal" ? "top-full mt-1 w-full" : "left-full ml-1 h-full"),
+						children: j.map((t) => {
+							let o = toPercent(t.value, p, m);
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Set value to ${t.value}`,
+								className: "pointer-events-auto absolute flex cursor-pointer items-center border-0 bg-transparent p-0 transition-opacity hover:opacity-70",
+								onClick: (o) => {
+									o.stopPropagation(), P(t.value);
+								},
+								onKeyDown: (o) => F(o, t.value),
+								style: g === "horizontal" ? {
+									left: `${o}%`,
+									transform: "translateX(-50%)"
+								} : {
+									bottom: `${o}%`,
+									transform: "translateY(50%)"
+								},
+								children: t.label && /* @__PURE__ */ jsx("span", {
+									className: "whitespace-nowrap text-base-content/70 text-xs",
+									children: t.label
+								})
+							}, `mark-${t.value}`);
+						})
+					})
+				]
+			})
+		})
+	});
 }
+var Range_default = Range;
 export { Range_default as default };

package/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { SelectProps } from './Select.interface';
 declare const Select: {
-    ({ ref: refExternal, name, borderOffset, size, color, dataTheme, classes, register: propRegister, error: propError, disabled: propDisabled, helper, label, placeholder, placeholderAsItem, children, ...props }: SelectProps): ReactElement;
+    ({ ref: refExternal, name, id, borderOffset, size, color, dataTheme, classes, register: propRegister, error: propError, disabled: propDisabled, helper, label, placeholder, placeholderAsItem, children, ...props }: SelectProps): ReactElement;
     displayName: string;
 };
 export default Select;

package/Select/Select.interface.d.ts

@@ -28,7 +28,7 @@ export declare const SELECT_MAP: {
     lg: string;
     xl: string;
 };
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "color" | "id">, IComponentBaseProps {
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "color">, IComponentBaseProps {
     ref?: Ref<HTMLSelectElement>;
     noBordered?: boolean;
     borderOffset?: boolean;
@@ -36,6 +36,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
     placeholder?: string;
     placeholderAsItem?: boolean;
     name: FieldPath<FieldValues>;
+    id?: string;
     color?: Exclude<ComponentColor, "neutral">;
     register?: UseFormRegister<FieldValues>;
     label?: ReactNode;

package/Select/Select.js

@@ -8,49 +8,49 @@ import { SELECT, SELECT_MAP } from "./Select.interface.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Select = (u) => {
-	let d = c(46), f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D;
-	d[0] === u ? (f = d[1], p = d[2], m = d[3], h = d[4], g = d[5], _ = d[6], v = d[7], y = d[8], b = d[9], x = d[10], S = d[11], C = d[12], w = d[13], T = d[14], E = d[15], D = d[16]) : ({ref: w, name: v, borderOffset: E, size: T, color: m, dataTheme: h, classes: p, register: S, error: x, disabled: b, helper: g, label: _, placeholder: y, placeholderAsItem: D, children: f, ...C} = u, d[0] = u, d[1] = f, d[2] = p, d[3] = m, d[4] = h, d[5] = g, d[6] = _, d[7] = v, d[8] = y, d[9] = b, d[10] = x, d[11] = S, d[12] = C, d[13] = w, d[14] = T, d[15] = E, d[16] = D);
-	let O = E === void 0 ? !0 : E, k = D === void 0 ? !1 : D, { error: A, disabled: j, registerRef: M, registerRest: N } = use_RHF_integration_default(v, S, x, b), P = p?.input, F = T && SELECT_MAP[T], I = m && SELECT_MAP[m], L = !!A, R = !O, z;
-	d[17] !== P || d[18] !== F || d[19] !== I || d[20] !== L || d[21] !== R ? (z = cn(SELECT, P, F, I, {
-		"input-error": L,
-		"focus:outline-offset-0": R
-	}), d[17] = P, d[18] = F, d[19] = I, d[20] = L, d[21] = R, d[22] = z) : z = d[22];
-	let B = z, V;
-	d[23] !== w || d[24] !== M ? (V = mergeRefs(w, M), d[23] = w, d[24] = M, d[25] = V) : V = d[25];
-	let H = y ? "" : void 0, U;
-	d[26] !== y || d[27] !== k ? (U = !!y && /* @__PURE__ */ jsx("option", {
+	let d = c(48), f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O;
+	d[0] === u ? (f = d[1], p = d[2], m = d[3], h = d[4], g = d[5], _ = d[6], v = d[7], y = d[8], b = d[9], x = d[10], S = d[11], C = d[12], w = d[13], T = d[14], E = d[15], D = d[16], O = d[17]) : ({ref: T, name: y, id: _, borderOffset: D, size: E, color: m, dataTheme: h, classes: p, register: C, error: S, disabled: x, helper: g, label: v, placeholder: b, placeholderAsItem: O, children: f, ...w} = u, d[0] = u, d[1] = f, d[2] = p, d[3] = m, d[4] = h, d[5] = g, d[6] = _, d[7] = v, d[8] = y, d[9] = b, d[10] = x, d[11] = S, d[12] = C, d[13] = w, d[14] = T, d[15] = E, d[16] = D, d[17] = O);
+	let k = D === void 0 ? !0 : D, A = O === void 0 ? !1 : O, { error: j, disabled: M, registerRef: N, registerRest: P } = use_RHF_integration_default(y, C, S, x), F = p?.input, I = E && SELECT_MAP[E], L = m && SELECT_MAP[m], R = !!j, z = !k, B;
+	d[18] !== F || d[19] !== I || d[20] !== L || d[21] !== R || d[22] !== z ? (B = cn(SELECT, F, I, L, {
+		"input-error": R,
+		"focus:outline-offset-0": z
+	}), d[18] = F, d[19] = I, d[20] = L, d[21] = R, d[22] = z, d[23] = B) : B = d[23];
+	let V = B, H;
+	d[24] !== T || d[25] !== N ? (H = mergeRefs(T, N), d[24] = T, d[25] = N, d[26] = H) : H = d[26];
+	let U = _ ?? y, W = b ? "" : void 0, G;
+	d[27] !== b || d[28] !== A ? (G = !!b && /* @__PURE__ */ jsx("option", {
 		disabled: !0,
-		hidden: !k,
+		hidden: !A,
 		className: "text-white",
 		value: "",
-		children: y
-	}), d[26] = y, d[27] = k, d[28] = U) : U = d[28];
-	let W;
-	d[29] !== f || d[30] !== B || d[31] !== h || d[32] !== j || d[33] !== v || d[34] !== C || d[35] !== N || d[36] !== H || d[37] !== U || d[38] !== V ? (W = /* @__PURE__ */ jsxs("select", {
-		ref: V,
-		id: v,
-		name: v,
-		disabled: j,
-		className: B,
+		children: b
+	}), d[27] = b, d[28] = A, d[29] = G) : G = d[29];
+	let K;
+	d[30] !== f || d[31] !== V || d[32] !== h || d[33] !== M || d[34] !== y || d[35] !== w || d[36] !== P || d[37] !== U || d[38] !== W || d[39] !== G || d[40] !== H ? (K = /* @__PURE__ */ jsxs("select", {
+		ref: H,
+		id: U,
+		name: y,
+		disabled: M,
+		className: V,
 		"data-theme": h,
-		defaultValue: H,
-		...C,
-		...N,
-		children: [U, f]
-	}), d[29] = f, d[30] = B, d[31] = h, d[32] = j, d[33] = v, d[34] = C, d[35] = N, d[36] = H, d[37] = U, d[38] = V, d[39] = W) : W = d[39];
-	let G = W;
-	if (_) {
-		let e = A?.message, l;
-		return d[40] !== g || d[41] !== _ || d[42] !== v || d[43] !== e || d[44] !== G ? (l = /* @__PURE__ */ jsx(Label_default, {
-			htmlFor: v,
+		defaultValue: W,
+		...w,
+		...P,
+		children: [G, f]
+	}), d[30] = f, d[31] = V, d[32] = h, d[33] = M, d[34] = y, d[35] = w, d[36] = P, d[37] = U, d[38] = W, d[39] = G, d[40] = H, d[41] = K) : K = d[41];
+	let q = K;
+	if (v) {
+		let e = _ ?? y, s = j?.message, l;
+		return d[42] !== g || d[43] !== v || d[44] !== e || d[45] !== s || d[46] !== q ? (l = /* @__PURE__ */ jsx(Label_default, {
+			htmlFor: e,
 			position: "top",
-			label: _,
+			label: v,
 			helper: g,
-			error: e,
-			children: G
-		}), d[40] = g, d[41] = _, d[42] = v, d[43] = e, d[44] = G, d[45] = l) : l = d[45], l;
+			error: s,
+			children: q
+		}), d[42] = g, d[43] = v, d[44] = e, d[45] = s, d[46] = q, d[47] = l) : l = d[47], l;
 	}
-	return G;
+	return q;
 };
 Select.displayName = "Select";
 var Select_default = Select;

package/index.css

@@ -1,2 +1,2 @@
 /*By DaxStack: Build in compile time, it's a copy from src/index.css*/
-@plugin "daisyui"{themes:light --default}&>span{opacity:1}.btn-circle{overflow:hidden}.form-control{@apply items-center;}div.form-control:has(.checkbox,.toggle){@apply w-fit;}.range-reverse{transform:scaleX(-1)}.range-vertical{transform:rotate(-90deg)}.range-reverse.range-vertical{transform:scaleY(-1) rotate(-90deg)}.range-padding-x-xs{padding-left:.5rem;padding-right:.5rem}.range-padding-x-sm{padding-left:.625rem;padding-right:.625rem}.range-padding-x-md{padding-left:.75rem;padding-right:.75rem}.range-padding-x-lg{padding-left:1rem;padding-right:1rem}.input{@apply w-full;}.form-control:has(.input) .label-text{@apply py-[8px];}.form-control:has(.input) .label-text,div:has(.form-control):has(.input) .label-text-alt{@apply mx-[0.3rem];}.toggle-error{border-color:hsl(var(--errorColor))}.form-control:not(.flex-row-reverse,:has(.input)) .label-text{margin-right:.666rem}.form-control:not(.flex-row-reverse):has([class$='-xs']) .label-text{margin-right:.5rem}.form-control:not(.flex-row-reverse):has([class$='-sm']) .label-text{margin-right:.583rem}.form-control:not(.flex-row-reverse):has([class$='-lg']) .label-text{margin-right:.75rem}.form-control.flex-row-reverse .label-text{margin-left:.666rem}.form-control.flex-row-reverse:has([class$='-xs']) .label-text{margin-left:.5rem}.form-control.flex-row-reverse:has([class$='-sm']) .label-text{margin-left:.583rem}.form-control.flex-row-reverse:has([class$='-lg']) .label-text{margin-left:.75rem}.select{@apply w-full;}.select option[disabled]{background-color:#d3d3d3!important}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}.btn-ripple{position:relative;overflow:hidden}.ripple-effect{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);animation:ripple .6s linear}
+@plugin "daisyui"{themes:light --default}.btn{background-image:none}&>span{opacity:1}.btn-circle{overflow:hidden}.form-control{@apply items-center;}div.form-control:has(.checkbox,.toggle){@apply w-fit;}.range-reverse{transform:scaleX(-1)}.range-vertical{transform:rotate(-90deg)}.range-reverse.range-vertical{transform:scaleY(-1) rotate(-90deg)}.range-padding-x-xs{padding-left:.5rem;padding-right:.5rem}.range-padding-x-sm{padding-left:.625rem;padding-right:.625rem}.range-padding-x-md{padding-left:.75rem;padding-right:.75rem}.range-padding-x-lg{padding-left:1rem;padding-right:1rem}.input{@apply w-full;}.form-control:has(.input) .label-text{@apply py-[8px];}.form-control:has(.input) .label-text,div:has(.form-control):has(.input) .label-text-alt{@apply mx-[0.3rem];}.toggle-error{border-color:hsl(var(--errorColor))}.form-control:not(.flex-row-reverse,:has(.input)) .label-text{margin-right:.666rem}.form-control:not(.flex-row-reverse):has([class$='-xs']) .label-text{margin-right:.5rem}.form-control:not(.flex-row-reverse):has([class$='-sm']) .label-text{margin-right:.583rem}.form-control:not(.flex-row-reverse):has([class$='-lg']) .label-text{margin-right:.75rem}.form-control.flex-row-reverse .label-text{margin-left:.666rem}.form-control.flex-row-reverse:has([class$='-xs']) .label-text{margin-left:.5rem}.form-control.flex-row-reverse:has([class$='-sm']) .label-text{margin-left:.583rem}.form-control.flex-row-reverse:has([class$='-lg']) .label-text{margin-left:.75rem}.select{@apply w-full;}.select option[disabled]{background-color:#d3d3d3!important}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}.btn-ripple{position:relative;overflow:hidden}.ripple-effect{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);animation:ripple .6s linear}

package/libs/vendor/clsx.js

@@ -13,4 +13,5 @@ function clsx() {
 	for (var t, n, i = 0, a = "", o = arguments.length; i < o; i++) (t = arguments[i]) && (n = r(t)) && (a && (a += " "), a += n);
 	return a;
 }
-export { clsx };
+var clsx_default = clsx;
+export { clsx, clsx_default as default };

package/libs/vendor/uuid.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+var byteToHex = [];
+for (let t = 0; t < 256; ++t) byteToHex.push((t + 256).toString(16).slice(1));
+function unsafeStringify(t, n = 0) {
+	return (byteToHex[t[n + 0]] + byteToHex[t[n + 1]] + byteToHex[t[n + 2]] + byteToHex[t[n + 3]] + "-" + byteToHex[t[n + 4]] + byteToHex[t[n + 5]] + "-" + byteToHex[t[n + 6]] + byteToHex[t[n + 7]] + "-" + byteToHex[t[n + 8]] + byteToHex[t[n + 9]] + "-" + byteToHex[t[n + 10]] + byteToHex[t[n + 11]] + byteToHex[t[n + 12]] + byteToHex[t[n + 13]] + byteToHex[t[n + 14]] + byteToHex[t[n + 15]]).toLowerCase();
+}
+export { unsafeStringify };

package/libs/vendor/uuid2.js

@@ -0,0 +1,11 @@
+"use strict";
+"use client";
+var getRandomValues, rnds8 = new Uint8Array(16);
+function rng() {
+	if (!getRandomValues) {
+		if (typeof crypto > "u" || !crypto.getRandomValues) throw Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+		getRandomValues = crypto.getRandomValues.bind(crypto);
+	}
+	return getRandomValues(rnds8);
+}
+export { rng as default };

package/libs/vendor/uuid3.js

@@ -0,0 +1,4 @@
+"use strict";
+"use client";
+var native_default = { randomUUID: typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto) };
+export { native_default as default };

package/libs/vendor/uuid4.js

@@ -0,0 +1,21 @@
+"use strict";
+"use client";
+import { unsafeStringify } from "./uuid.js";
+import rng from "./uuid2.js";
+import native_default from "./uuid3.js";
+function _v4(n, r, i) {
+	n ||= {};
+	let a = n.random ?? n.rng?.() ?? rng();
+	if (a.length < 16) throw Error("Random bytes length must be >= 16");
+	if (a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, r) {
+		if (i ||= 0, i < 0 || i + 16 > r.length) throw RangeError(`UUID byte range ${i}:${i + 15} is out of buffer bounds`);
+		for (let e = 0; e < 16; ++e) r[i + e] = a[e];
+		return r;
+	}
+	return unsafeStringify(a);
+}
+function v4(e, t, i) {
+	return native_default.randomUUID && !t && !e ? native_default.randomUUID() : _v4(e, t, i);
+}
+var v4_default = v4;
+export { v4_default as default };

package/package.json

@@ -2,7 +2,7 @@
   "name": "experimental-ui",
   "private": false,
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.4.0-canary.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -29,6 +29,10 @@
     "react-hook-form": "^7.65.0",
     "tailwindcss": "^4.1.16"
   },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
   "sideEffects": false,
   "exports": {
     ".": "./index.js",

package/utils.ts/utils.js

@@ -3,24 +3,24 @@
 import { clsx } from "../libs/vendor/clsx.js";
 import { twMerge } from "../libs/vendor/tailwind-merge.js";
 import { Fragment, cloneElement, isValidElement } from "react";
-const isReactFragment = (e) => e ? e?.type ? e?.type === Fragment : e === Fragment : !1, wrapWithElementIfInvalid = ({ node: e, wrapper: n, props: r }) => {
+const isReactFragment = (e) => e ? e?.type ? e?.type === Fragment : e === Fragment : !1, wrapWithElementIfInvalid = ({ node: e, wrapper: r, props: i }) => {
 	if (e) if (isValidElement(e)) {
-		if (isReactFragment(e)) return cloneElement(n, {
-			...r,
-			className: cn(e.props?.className, r?.className)
+		if (isReactFragment(e)) return cloneElement(r, {
+			...i,
+			className: cn(e.props?.className, i?.className)
 		}, e.props.children);
 		{
-			let { className: n, ...a } = r ?? {}, o = cn(e.props?.className, n);
+			let { className: r, ...o } = i ?? {}, s = cn(e.props?.className, r);
 			return cloneElement(e, {
-				...a,
-				className: o
+				...o,
+				className: s
 			});
 		}
-	} else return cloneElement(n, r, e);
-	else return cloneElement(n, r);
-}, isSingleStringChild = (e) => typeof e == "string", colorToOklch = (e, n = !1) => {
-	let { l: r, c: i, h: a } = colorToOklchc(e);
-	return n ? `oklch(${r + (r < .5 ? .8 : .4)} ${i - .15} ${a})` : `oklch(${r} ${i} ${a})`;
+	} else return cloneElement(r, i, e);
+	else return cloneElement(r, i);
+}, isSingleStringChild = (e) => typeof e == "string", colorToOklch = (e, r = !1) => {
+	let { l: i, c: a, h: o } = colorToOklchc(e);
+	return r ? `oklch(${i + (i < .5 ? .8 : .4)} ${a - .15} ${o})` : `oklch(${i} ${a} ${o})`;
 };
 var w3cx11 = {
 	aliceblue: "#f0f8ff",
@@ -178,27 +178,26 @@ var w3cx11 = {
 	yellow: "#ffff00",
 	yellowgreen: "#9acd32"
 };
+function srgbToLinear(e) {
+	return e /= 255, e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
+}
 function colorToOklchc(e) {
-	let n = e;
-	if (Object.hasOwn(w3cx11, e.toLowerCase()) && (n = w3cx11[e.toLowerCase()]), !/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/.test(n)) return console.error(`Invalid color format: ${e}`), {
+	let r = e;
+	if (Object.hasOwn(w3cx11, e.toLowerCase()) && (r = w3cx11[e.toLowerCase()]), !/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/.test(r)) return console.error(`Invalid color format: ${e}`), {
 		l: 0,
 		c: 0,
 		h: 0
 	};
-	let r = 0, i = 0, a = 0;
-	n.length === 4 ? (r = Number.parseInt(n[1] + n[1], 16), i = Number.parseInt(n[2] + n[2], 16), a = Number.parseInt(n[3] + n[3], 16)) : n.length === 7 && (r = Number.parseInt(n.slice(1, 3), 16), i = Number.parseInt(n.slice(3, 5), 16), a = Number.parseInt(n.slice(5, 7), 16));
-	function o(e) {
-		return e /= 255, e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
-	}
-	r = o(r), i = o(i), a = o(a);
-	let s = r * .4124564 + i * .3575761 + a * .1804375, c = r * .2126729 + i * .7151522 + a * .072175, l = r * .0193339 + i * .119192 + a * .9503041, u = .8189330101 * s + .3618667424 * c - .1288597137 * l, d = .0329845436 * s + .9293118715 * c + .0361456387 * l, f = .0482003018 * s + .2643662691 * c + .633851707 * l, p = Math.cbrt(u), m = Math.cbrt(d), h = Math.cbrt(f), g = .2104542553 * p + .793617785 * m - .0040720468 * h, _ = 1.9779984951 * p - 2.428592205 * m + .4505937099 * h, v = .0259040371 * p + .7827717662 * m - .808675766 * h;
+	let i = 0, a = 0, o = 0;
+	r.length === 4 ? (i = Number.parseInt(r[1] + r[1], 16), a = Number.parseInt(r[2] + r[2], 16), o = Number.parseInt(r[3] + r[3], 16)) : r.length === 7 && (i = Number.parseInt(r.slice(1, 3), 16), a = Number.parseInt(r.slice(3, 5), 16), o = Number.parseInt(r.slice(5, 7), 16)), i = srgbToLinear(i), a = srgbToLinear(a), o = srgbToLinear(o);
+	let s = i * .4124564 + a * .3575761 + o * .1804375, c = i * .2126729 + a * .7151522 + o * .072175, l = i * .0193339 + a * .119192 + o * .9503041, u = .8189330101 * s + .3618667424 * c - .1288597137 * l, d = .0329845436 * s + .9293118715 * c + .0361456387 * l, f = .0482003018 * s + .2643662691 * c + .633851707 * l, p = Math.cbrt(u), m = Math.cbrt(d), h = Math.cbrt(f), g = .2104542553 * p + .793617785 * m - .0040720468 * h, _ = 1.9779984951 * p - 2.428592205 * m + .4505937099 * h, v = .0259040371 * p + .7827717662 * m - .808675766 * h;
 	return {
 		l: g,
 		c: Math.hypot(_ * _ + v * v),
 		h: (Math.atan2(v, _) * 180 / Math.PI + 360) % 360
 	};
 }
-function cn(...r) {
-	return twMerge(clsx(r));
+function cn(...i) {
+	return twMerge(clsx(i));
 }
 export { colorToOklch, cn as default, isSingleStringChild, wrapWithElementIfInvalid };

package/Range/Range.CustomMarks.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-type ShowInScreen = "none" | "all" | "sm" | "md" | "lg" | "xl";
-export interface MarkProps {
-    value: number;
-    label: ReactNode;
-    showInScreen?: ShowInScreen;
-}
-declare function CustomMarks({ marks, max, classes, className, min, onMarkClick, }: Readonly<{
-    marks: MarkProps[];
-    className?: string;
-    classes?: {
-        mark?: string;
-    };
-    max: number;
-    min: number;
-    onMarkClick?: (value: number) => void;
-}>): import("react/jsx-runtime").JSX.Element;
-export default CustomMarks;

package/Range/Range.CustomMarks.js

@@ -1,46 +0,0 @@
-"use strict";
-"use client";
-import cn from "../utils.ts/utils.js";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-var RANGE_VISIBLE_MAP = {
-	none: "invisible",
-	all: "visible",
-	sm: "sm:visible",
-	md: "md:visible",
-	lg: "lg:visible",
-	xl: "xl:visible"
-};
-function CustomMarks(a) {
-	let o = c(22), { marks: s, max: l, classes: u, className: d, min: f, onMarkClick: p } = a, m, h, g;
-	if (o[0] !== d || o[1] !== u?.mark || o[2] !== s || o[3] !== l || o[4] !== f || o[5] !== p) {
-		let i = s.slice().sort(_temp);
-		o[9] === d ? g = o[10] : (g = cn("w-full", d), o[9] = d, o[10] = g), m = "relative flex w-full";
-		let a;
-		o[11] !== u?.mark || o[12] !== l || o[13] !== f || o[14] !== p ? (a = (i) => {
-			let a = `${(i.value - f) / (l - f) * 100}%`;
-			return /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn("absolute -translate-x-1/2 cursor-pointer text-center first:relative", "invisible first:visible last:visible", i?.showInScreen && RANGE_VISIBLE_MAP[i.showInScreen], u?.mark),
-				style: { left: a },
-				onClick: () => p?.(i.value),
-				children: i.label
-			}, i.value);
-		}, o[11] = u?.mark, o[12] = l, o[13] = f, o[14] = p, o[15] = a) : a = o[15], h = i.map(a), o[0] = d, o[1] = u?.mark, o[2] = s, o[3] = l, o[4] = f, o[5] = p, o[6] = m, o[7] = h, o[8] = g;
-	} else m = o[6], h = o[7], g = o[8];
-	let _;
-	o[16] !== m || o[17] !== h ? (_ = /* @__PURE__ */ jsx("div", {
-		className: m,
-		children: h
-	}), o[16] = m, o[17] = h, o[18] = _) : _ = o[18];
-	let v;
-	return o[19] !== g || o[20] !== _ ? (v = /* @__PURE__ */ jsx("div", {
-		className: g,
-		children: _
-	}), o[19] = g, o[20] = _, o[21] = v) : v = o[21], v;
-}
-function _temp(e, i) {
-	return e.value - i.value;
-}
-var Range_CustomMarks_default = CustomMarks;
-export { Range_CustomMarks_default as default };

package/Range/Range.DefaultMarks.d.ts

@@ -1,16 +0,0 @@
-declare function DefaultMarks({ step, min, max, className, classes, onMarkClick, markDisplay, }: Readonly<{
-    step: number;
-    min: number;
-    max: number;
-    className?: string;
-    classes?: {
-        mark?: string;
-    };
-    onMarkClick?: (value: number) => void;
-    markDisplay?: {
-        showValue?: boolean;
-        showTick?: boolean;
-        customTick?: string;
-    };
-}>): import("react/jsx-runtime").JSX.Element;
-export default DefaultMarks;

package/Range/Range.DefaultMarks.js

@@ -1,48 +0,0 @@
-"use strict";
-"use client";
-import cn from "../utils.ts/utils.js";
-import { c } from "react/compiler-runtime";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function DefaultMarks(i) {
-	let a = c(18), { step: o, min: s, max: l, className: u, classes: d, onMarkClick: f, markDisplay: p } = i, m;
-	a[0] === p ? m = a[1] : (m = p === void 0 ? {
-		showValue: !0,
-		showTick: !0,
-		customTick: "|"
-	} : p, a[0] = p, a[1] = m);
-	let h = m;
-	if ((l - s) % o !== 0) throw Error("step no es múltiplo de la diferencia entre min y max");
-	let g = Math.floor((l - s) / o), _;
-	if (a[2] !== g) {
-		_ = [];
-		for (let e = 0; e <= g; e++) {
-			let r = `${e * 100 / g}%`;
-			_.push(r);
-		}
-		a[2] = g, a[3] = _;
-	} else _ = a[3];
-	let v = _, { showValue: y, showTick: b, customTick: x } = h, S = y === void 0 ? !0 : y, C = b === void 0 ? !0 : b, w = x === void 0 ? "|" : x, T;
-	a[4] === u ? T = a[5] : (T = cn("w-full", u), a[4] = u, a[5] = T);
-	let E;
-	a[6] !== d?.mark || a[7] !== w || a[8] !== v || a[9] !== s || a[10] !== f || a[11] !== C || a[12] !== S || a[13] !== o ? (E = /* @__PURE__ */ jsx("div", {
-		className: "relative flex w-full",
-		children: v.map((r, i) => {
-			let a = i * o + s;
-			return /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: cn("absolute -translate-x-1/2 cursor-pointer text-center first:relative", d?.mark),
-				style: { left: r },
-				onClick: () => f?.(a),
-				children: [C && /* @__PURE__ */ jsx("div", { children: w }), S && /* @__PURE__ */ jsx("div", { children: a })]
-			}, r);
-		})
-	}), a[6] = d?.mark, a[7] = w, a[8] = v, a[9] = s, a[10] = f, a[11] = C, a[12] = S, a[13] = o, a[14] = E) : E = a[14];
-	let D;
-	return a[15] !== T || a[16] !== E ? (D = /* @__PURE__ */ jsx("div", {
-		className: T,
-		children: E
-	}), a[15] = T, a[16] = E, a[17] = D) : D = a[17], D;
-}
-var Range_DefaultMarks_default = DefaultMarks;
-export { Range_DefaultMarks_default as default };

package/Range/Range.interface.js

@@ -1,32 +0,0 @@
-"use strict";
-"use client";
-const RANGE = "range";
-var SIZE_MAP = {
-	xs: "range-xs",
-	sm: "range-sm",
-	md: "range-md",
-	lg: "range-lg",
-	xl: "range-xl"
-};
-const PADDING_X_MAP = {
-	xs: "range-padding-x-xs",
-	sm: "range-padding-x-sm",
-	md: "range-padding-x-md",
-	lg: "range-padding-x-lg",
-	xl: "range-padding-x-xl"
-};
-var COLOR_MAP = {
-	primary: "range-primary",
-	secondary: "range-secondary",
-	error: "range-error",
-	info: "range-info",
-	success: "range-success",
-	warning: "range-warning",
-	accent: "range-accent"
-};
-const RANGE_MAP = {
-	...SIZE_MAP,
-	...COLOR_MAP,
-	vertical: "range-vertical"
-};
-export { PADDING_X_MAP, RANGE, RANGE_MAP };