tintora 1.1.0 → 1.3.0

package/dist/ProgressBar/ProgressBar2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs");;/* empty css              */let t=require("react/jsx-runtime"),n=require("react");function r({title:r,progress:i,indeterminate:a,valueLabel:o,className:s,"aria-label":c}){let l=(0,n.useId)(),u=a?void 0:Math.min(100,Math.max(0,Number.isFinite(i)?i:0)),d=u===100,f=o??(a?`Indeterminate`:`${u}%`);return(0,t.jsxs)(`div`,{className:e.clsx(`tintora-progress-bar`,s),children:[r&&(0,t.jsxs)(`div`,{className:`tintora-progress-bar__header`,children:[(0,t.jsx)(`span`,{id:l,children:r}),(0,t.jsx)(`span`,{className:`tintora-progress-bar__value`,children:f})]}),(0,t.jsx)(`div`,{role:`progressbar`,"aria-label":c,"aria-labelledby":r?l:void 0,"aria-valuemin":a?void 0:0,"aria-valuemax":a?void 0:100,"aria-valuenow":u,"aria-valuetext":o,className:`tintora-progress-bar__track`,children:(0,t.jsx)(`div`,{className:e.clsx(`tintora-progress-bar__fill`,{"tintora-progress-bar__fill--indeterminate":a,"tintora-progress-bar__fill--complete":d}),style:u===void 0?void 0:{width:`${u}%`}})})]})}exports.ProgressBar=r;

package/dist/ProgressBar/ProgressBar2.js

@@ -0,0 +1,40 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+/* empty css            */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+//#region src/ProgressBar/ProgressBar.tsx
+function i({ title: i, progress: a, indeterminate: o, valueLabel: s, className: c, "aria-label": l }) {
+	let u = r(), d = o ? void 0 : Math.min(100, Math.max(0, Number.isFinite(a) ? a : 0)), f = d === 100, p = s ?? (o ? "Indeterminate" : `${d}%`);
+	return /* @__PURE__ */ n("div", {
+		className: e("tintora-progress-bar", c),
+		children: [i && /* @__PURE__ */ n("div", {
+			className: "tintora-progress-bar__header",
+			children: [/* @__PURE__ */ t("span", {
+				id: u,
+				children: i
+			}), /* @__PURE__ */ t("span", {
+				className: "tintora-progress-bar__value",
+				children: p
+			})]
+		}), /* @__PURE__ */ t("div", {
+			role: "progressbar",
+			"aria-label": l,
+			"aria-labelledby": i ? u : void 0,
+			"aria-valuemin": o ? void 0 : 0,
+			"aria-valuemax": o ? void 0 : 100,
+			"aria-valuenow": d,
+			"aria-valuetext": s,
+			className: "tintora-progress-bar__track",
+			children: /* @__PURE__ */ t("div", {
+				className: e("tintora-progress-bar__fill", {
+					"tintora-progress-bar__fill--indeterminate": o,
+					"tintora-progress-bar__fill--complete": f
+				}),
+				style: d === void 0 ? void 0 : { width: `${d}%` }
+			})
+		})]
+	});
+}
+//#endregion
+export { i as ProgressBar };

package/dist/Radio/Radio2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("./RadioContext.cjs");;/* empty css        */let n=require("react/jsx-runtime");function r({value:r,className:i,disabled:a,...o}){let s=t.useRadioContext();return(0,n.jsxs)(`span`,{className:e.clsx(`tintora-radio`,i),children:[(0,n.jsx)(`input`,{...o,type:`radio`,className:`tintora-radio__input`,name:s.name,value:r,checked:s.value===r,disabled:a||s.disabled,onChange:()=>s.select(r)}),(0,n.jsx)(`span`,{className:`tintora-radio__circle`,"aria-hidden":`true`})]})}exports.Radio=r;

package/dist/Radio/Radio2.js

@@ -0,0 +1,27 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { useRadioContext as t } from "./RadioContext.js";
+/* empty css      */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/Radio/Radio.tsx
+function i({ value: i, className: a, disabled: o, ...s }) {
+	let c = t();
+	return /* @__PURE__ */ r("span", {
+		className: e("tintora-radio", a),
+		children: [/* @__PURE__ */ n("input", {
+			...s,
+			type: "radio",
+			className: "tintora-radio__input",
+			name: c.name,
+			value: i,
+			checked: c.value === i,
+			disabled: o || c.disabled,
+			onChange: () => c.select(i)
+		}), /* @__PURE__ */ n("span", {
+			className: "tintora-radio__circle",
+			"aria-hidden": "true"
+		})]
+	});
+}
+//#endregion
+export { i as Radio };

package/dist/Radio/RadioContext.cjs

@@ -0,0 +1 @@
+"use client";let e=require("react");var t=(0,e.createContext)(null);function n(){let n=(0,e.useContext)(t);if(!n)throw Error(`Radio must be rendered inside a RadioGroup`);return n}exports.RadioContext=t,exports.useRadioContext=n;

package/dist/Radio/RadioContext.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/Radio/RadioContext.ts
+var n = e(null);
+function r() {
+	let e = t(n);
+	if (!e) throw Error("Radio must be rendered inside a RadioGroup");
+	return e;
+}
+//#endregion
+export { n as RadioContext, r as useRadioContext };

package/dist/Radio/RadioGroup.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("./RadioContext.cjs");let n=require("react/jsx-runtime"),r=require("react");function i({value:i,defaultValue:a,onValueChange:o,disabled:s=!1,name:c,className:l,...u}){let d=(0,r.useId)(),[f,p]=(0,r.useState)(a??null),m=i!==void 0,h=m?i:f;return(0,n.jsx)(t.RadioContext.Provider,{value:{name:c??d,value:h,select:e=>{e!==h&&(m||p(e),o?.(e))},disabled:s},children:(0,n.jsx)(`div`,{...u,role:`radiogroup`,className:e.clsx(`tintora-radio-group`,l)})})}exports.RadioGroup=i;

package/dist/Radio/RadioGroup.js

@@ -0,0 +1,26 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { RadioContext as t } from "./RadioContext.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useId as r, useState as i } from "react";
+//#region src/Radio/RadioGroup.tsx
+function a({ value: a, defaultValue: o, onValueChange: s, disabled: c = !1, name: l, className: u, ...d }) {
+	let f = r(), [p, m] = i(o ?? null), h = a !== void 0, g = h ? a : p;
+	return /* @__PURE__ */ n(t.Provider, {
+		value: {
+			name: l ?? f,
+			value: g,
+			select: (e) => {
+				e !== g && (h || m(e), s?.(e));
+			},
+			disabled: c
+		},
+		children: /* @__PURE__ */ n("div", {
+			...d,
+			role: "radiogroup",
+			className: e("tintora-radio-group", u)
+		})
+	});
+}
+//#endregion
+export { a as RadioGroup };

package/dist/SearchInput/SearchInput2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css              */let t=require("react/jsx-runtime");function n({className:n,disabled:r,...i}){return(0,t.jsxs)(`label`,{className:e.clsx(`tintora-search-input`,r&&`tintora-search-input--disabled`,n),children:[(0,t.jsxs)(`svg`,{className:`tintora-search-input__icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,"aria-hidden":`true`,children:[(0,t.jsx)(`circle`,{cx:`11`,cy:`11`,r:`7`}),(0,t.jsx)(`path`,{d:`M20 20l-3.5-3.5`})]}),(0,t.jsx)(`input`,{...i,type:`search`,disabled:r,className:`tintora-search-input__input`})]})}exports.SearchInput=n;

package/dist/SearchInput/SearchInput2.js

@@ -0,0 +1,30 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css            */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SearchInput/SearchInput.tsx
+function r({ className: r, disabled: i, ...a }) {
+	return /* @__PURE__ */ n("label", {
+		className: e("tintora-search-input", i && "tintora-search-input--disabled", r),
+		children: [/* @__PURE__ */ n("svg", {
+			className: "tintora-search-input__icon",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ t("circle", {
+				cx: "11",
+				cy: "11",
+				r: "7"
+			}), /* @__PURE__ */ t("path", { d: "M20 20l-3.5-3.5" })]
+		}), /* @__PURE__ */ t("input", {
+			...a,
+			type: "search",
+			disabled: i,
+			className: "tintora-search-input__input"
+		})]
+	});
+}
+//#endregion
+export { r as SearchInput };

package/dist/Select/Select2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../hooks/useOutsidePress.cjs"),n=require("../hooks/useTopLayerPosition.cjs");;/* empty css         */const r=require("./SelectContext.cjs"),i=require("./SelectOption.cjs");let a=require("react/jsx-runtime"),o=require("react");var s=4;function c({defaultValue:c,options:l,disabled:u,value:d,placeholder:f,onValueChange:p,name:m,className:h,onClick:g,onKeyDown:_,onKeyUp:v,"aria-label":y,...b}){let x=(0,o.useId)(),S=(0,o.useRef)(null),C=(0,o.useRef)(null),w=(0,o.useRef)(null),[T,E]=(0,o.useState)(c??null),[D,O]=(0,o.useState)(!1),[k,A]=(0,o.useState)(-1),j=d!==void 0,M=j?d:T,N=l.findIndex(e=>e.value===M),P=e=>l[e]?.disabled!==!0,F=()=>l.findIndex((e,t)=>P(t)),I=(e,t)=>{for(let n=e+t;n>=0&&n<l.length;n+=t)if(P(n))return n;return e},L=()=>{let e=I(l.length,-1);return e===l.length?-1:e},R=e=>l.findIndex(t=>t.value===e),z=()=>{A(N>=0&&P(N)?N:F()),O(!0)},B=()=>O(!1),V=e=>{let t=R(e);t<0||!P(t)||(B(),e!==M&&(j||E(e),p?.(e)))},H=e=>{if(_?.(e),e.defaultPrevented)return;let{key:t}=e;if(t===`Tab`)return B();if(!D){[`Enter`,` `,`ArrowDown`,`ArrowUp`].includes(t)&&(e.preventDefault(),z());return}let n={ArrowDown:()=>k<0?F():I(k,1),ArrowUp:()=>k<0?F():I(k,-1),Home:F,End:L};t in n?(e.preventDefault(),A(n[t]())):t===`Enter`||t===` `?(e.preventDefault(),k>=0?V(l[k].value):B()):t===`Escape`&&(e.preventDefault(),B())},U=e=>{v?.(e),e.key===` `&&e.preventDefault()},W=n.useTopLayerPosition(D,w,()=>{let e=w.current,t=C.current;if(!e||!t)return null;let n=t.getBoundingClientRect(),r=e.offsetHeight,i=n.bottom+s+r<=window.innerHeight,a=n.top-s-r>=0;return{top:i||!a?n.bottom+s:n.top-s-r,left:n.left,minWidth:n.width}},[]),G=e=>{g?.(e),!e.defaultPrevented&&(D?B():z())};t.useOutsidePress(D,S,B),(0,o.useEffect)(()=>{D&&k>=0&&w.current?.children.item(k)?.scrollIntoView?.({block:`nearest`})},[D,k]);let K=e=>`${x}-option-${R(e)}`,q=D?l[k]?.value??null:null,J=l[N]?.label;return(0,a.jsx)(r.SelectContext.Provider,{value:{value:M,activeValue:q,select:V,optionId:K,activate:e=>A(R(e))},children:(0,a.jsxs)(`div`,{ref:S,className:`tintora-select`,children:[(0,a.jsxs)(`button`,{...b,ref:C,type:`button`,role:`combobox`,"aria-label":y,"aria-haspopup":`listbox`,"aria-expanded":D,"aria-controls":D?x:void 0,"aria-activedescendant":q===null?void 0:K(q),disabled:u,className:e.clsx(`tintora-select__trigger`,h),onClick:G,onKeyDown:H,onKeyUp:U,children:[(0,a.jsx)(`span`,{className:e.clsx(`tintora-select__value`,J===void 0&&`tintora-select__value--placeholder`),children:J??f}),(0,a.jsx)(`svg`,{className:`tintora-select__chevron`,width:`10`,height:`10`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:(0,a.jsx)(`path`,{d:`M6 9l6 6 6-6`})})]}),D&&(0,a.jsx)(`div`,{ref:w,id:x,role:`listbox`,"aria-label":y,popover:`manual`,className:`tintora-select__menu`,style:W??{},onMouseDown:e=>e.preventDefault(),children:l.map(e=>(0,a.jsx)(i.SelectOption,{...e},e.value))}),m&&(0,a.jsx)(`input`,{type:`hidden`,name:m,value:M??``,disabled:u})]})})}exports.Select=c;

package/dist/Select/Select2.js

@@ -0,0 +1,128 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { useOutsidePress as t } from "../hooks/useOutsidePress.js";
+import { useTopLayerPosition as n } from "../hooks/useTopLayerPosition.js";
+/* empty css       */
+import { SelectContext as r } from "./SelectContext.js";
+import { SelectOption as i } from "./SelectOption.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
+//#region src/Select/Select.tsx
+var d = 4;
+function f({ defaultValue: f, options: p, disabled: m, value: h, placeholder: g, onValueChange: _, name: v, className: y, onClick: b, onKeyDown: x, onKeyUp: S, "aria-label": C, ...w }) {
+	let T = c(), E = l(null), D = l(null), O = l(null), [k, A] = u(f ?? null), [j, M] = u(!1), [N, P] = u(-1), F = h !== void 0, I = F ? h : k, L = p.findIndex((e) => e.value === I), R = (e) => p[e]?.disabled !== !0, z = () => p.findIndex((e, t) => R(t)), B = (e, t) => {
+		for (let n = e + t; n >= 0 && n < p.length; n += t) if (R(n)) return n;
+		return e;
+	}, V = () => {
+		let e = B(p.length, -1);
+		return e === p.length ? -1 : e;
+	}, H = (e) => p.findIndex((t) => t.value === e), U = () => {
+		P(L >= 0 && R(L) ? L : z()), M(!0);
+	}, W = () => M(!1), G = (e) => {
+		let t = H(e);
+		t < 0 || !R(t) || (W(), e !== I && (F || A(e), _?.(e)));
+	}, K = (e) => {
+		if (x?.(e), e.defaultPrevented) return;
+		let { key: t } = e;
+		if (t === "Tab") return W();
+		if (!j) {
+			[
+				"Enter",
+				" ",
+				"ArrowDown",
+				"ArrowUp"
+			].includes(t) && (e.preventDefault(), U());
+			return;
+		}
+		let n = {
+			ArrowDown: () => N < 0 ? z() : B(N, 1),
+			ArrowUp: () => N < 0 ? z() : B(N, -1),
+			Home: z,
+			End: V
+		};
+		t in n ? (e.preventDefault(), P(n[t]())) : t === "Enter" || t === " " ? (e.preventDefault(), N >= 0 ? G(p[N].value) : W()) : t === "Escape" && (e.preventDefault(), W());
+	}, q = (e) => {
+		S?.(e), e.key === " " && e.preventDefault();
+	}, J = n(j, O, () => {
+		let e = O.current, t = D.current;
+		if (!e || !t) return null;
+		let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + d + r <= window.innerHeight, a = n.top - d - r >= 0;
+		return {
+			top: i || !a ? n.bottom + d : n.top - d - r,
+			left: n.left,
+			minWidth: n.width
+		};
+	}, []), Y = (e) => {
+		b?.(e), !e.defaultPrevented && (j ? W() : U());
+	};
+	t(j, E, W), s(() => {
+		j && N >= 0 && O.current?.children.item(N)?.scrollIntoView?.({ block: "nearest" });
+	}, [j, N]);
+	let X = (e) => `${T}-option-${H(e)}`, Z = j ? p[N]?.value ?? null : null, Q = p[L]?.label;
+	return /* @__PURE__ */ a(r.Provider, {
+		value: {
+			value: I,
+			activeValue: Z,
+			select: G,
+			optionId: X,
+			activate: (e) => P(H(e))
+		},
+		children: /* @__PURE__ */ o("div", {
+			ref: E,
+			className: "tintora-select",
+			children: [
+				/* @__PURE__ */ o("button", {
+					...w,
+					ref: D,
+					type: "button",
+					role: "combobox",
+					"aria-label": C,
+					"aria-haspopup": "listbox",
+					"aria-expanded": j,
+					"aria-controls": j ? T : void 0,
+					"aria-activedescendant": Z === null ? void 0 : X(Z),
+					disabled: m,
+					className: e("tintora-select__trigger", y),
+					onClick: Y,
+					onKeyDown: K,
+					onKeyUp: q,
+					children: [/* @__PURE__ */ a("span", {
+						className: e("tintora-select__value", Q === void 0 && "tintora-select__value--placeholder"),
+						children: Q ?? g
+					}), /* @__PURE__ */ a("svg", {
+						className: "tintora-select__chevron",
+						width: "10",
+						height: "10",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ a("path", { d: "M6 9l6 6 6-6" })
+					})]
+				}),
+				j && /* @__PURE__ */ a("div", {
+					ref: O,
+					id: T,
+					role: "listbox",
+					"aria-label": C,
+					popover: "manual",
+					className: "tintora-select__menu",
+					style: J ?? {},
+					onMouseDown: (e) => e.preventDefault(),
+					children: p.map((e) => /* @__PURE__ */ a(i, { ...e }, e.value))
+				}),
+				v && /* @__PURE__ */ a("input", {
+					type: "hidden",
+					name: v,
+					value: I ?? "",
+					disabled: m
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { f as Select };

package/dist/Select/SelectContext.cjs

@@ -0,0 +1 @@
+"use client";let e=require("react");var t=(0,e.createContext)(null),n=()=>{let n=(0,e.useContext)(t);if(!n)throw Error(`SelectOption must be rendered inside a Select`);return n};exports.SelectContext=t,exports.useSelectContext=n;

package/dist/Select/SelectContext.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/Select/SelectContext.ts
+var n = e(null), r = () => {
+	let e = t(n);
+	if (!e) throw Error("SelectOption must be rendered inside a Select");
+	return e;
+};
+//#endregion
+export { n as SelectContext, r as useSelectContext };

package/dist/Select/SelectOption.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("./SelectContext.cjs");let n=require("react/jsx-runtime");function r({label:r,value:i,disabled:a}){let{select:o,activate:s,optionId:c,value:l,activeValue:u}=t.useSelectContext();return(0,n.jsx)(`div`,{id:c(i),role:`option`,"aria-selected":l===i,"aria-disabled":a||void 0,className:e.clsx(`tintora-select__option`,u===i&&`tintora-select__option--active`),onClick:()=>o(i),onMouseMove:()=>!a&&s(i),children:r})}exports.SelectOption=r;

package/dist/Select/SelectOption.js

@@ -0,0 +1,20 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { useSelectContext as t } from "./SelectContext.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/Select/SelectOption.tsx
+function r({ label: r, value: i, disabled: a }) {
+	let { select: o, activate: s, optionId: c, value: l, activeValue: u } = t();
+	return /* @__PURE__ */ n("div", {
+		id: c(i),
+		role: "option",
+		"aria-selected": l === i,
+		"aria-disabled": a || void 0,
+		className: e("tintora-select__option", u === i && "tintora-select__option--active"),
+		onClick: () => o(i),
+		onMouseMove: () => !a && s(i),
+		children: r
+	});
+}
+//#endregion
+export { r as SelectOption };

package/dist/SettingsRow/SettingsRow2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css              */let t=require("react/jsx-runtime");function n({title:n,description:r,children:i,controlPosition:a=`end`,className:o,...s}){return(0,t.jsxs)(`div`,{...s,className:e.clsx(`tintora-settings-row`,`tintora-settings-row--control-${a}`,r&&`tintora-settings-row--described`,o),children:[(0,t.jsxs)(`div`,{className:`tintora-settings-row__text`,children:[(0,t.jsx)(`div`,{className:`tintora-settings-row__title`,children:n}),r&&(0,t.jsx)(`div`,{className:`tintora-settings-row__description`,children:r})]}),i]})}exports.SettingsRow=n;

package/dist/SettingsRow/SettingsRow2.js

@@ -0,0 +1,22 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css            */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SettingsRow/SettingsRow.tsx
+function r({ title: r, description: i, children: a, controlPosition: o = "end", className: s, ...c }) {
+	return /* @__PURE__ */ n("div", {
+		...c,
+		className: e("tintora-settings-row", `tintora-settings-row--control-${o}`, i && "tintora-settings-row--described", s),
+		children: [/* @__PURE__ */ n("div", {
+			className: "tintora-settings-row__text",
+			children: [/* @__PURE__ */ t("div", {
+				className: "tintora-settings-row__title",
+				children: r
+			}), i && /* @__PURE__ */ t("div", {
+				className: "tintora-settings-row__description",
+				children: i
+			})]
+		}), a]
+	});
+}
+//#endregion
+export { r as SettingsRow };

package/dist/Skeleton/Skeleton2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css           */let t=require("react/jsx-runtime");function n({width:n,height:r,className:i,style:a,...o}){let s={...n!==void 0&&{width:n},...r!==void 0&&{height:r}};return(0,t.jsx)(`span`,{...o,"aria-hidden":`true`,className:e.clsx(`tintora-skeleton`,i),style:{...s,...a}})}exports.Skeleton=n;

package/dist/Skeleton/Skeleton2.js

@@ -0,0 +1,21 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css         */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/Skeleton/Skeleton.tsx
+function n({ width: n, height: r, className: i, style: a, ...o }) {
+	let s = {
+		...n !== void 0 && { width: n },
+		...r !== void 0 && { height: r }
+	};
+	return /* @__PURE__ */ t("span", {
+		...o,
+		"aria-hidden": "true",
+		className: e("tintora-skeleton", i),
+		style: {
+			...s,
+			...a
+		}
+	});
+}
+//#endregion
+export { n as Skeleton };

package/dist/Spinner/Spinner2.cjs

@@ -0,0 +1 @@
+;/* empty css          */let e=require("react/jsx-runtime");var t={small:{width:16,height:16,strokeWidth:3.5},medium:{width:24,height:24,strokeWidth:3},large:{width:40,height:40,strokeWidth:2.4}};function n({size:n=`medium`,color:r=`accent`}){let{width:i,height:a,strokeWidth:o}=t[n];return(0,e.jsxs)(`svg`,{className:`tintora-spinner`,width:i,height:a,viewBox:`0 0 24 24`,fill:`none`,role:`img`,"aria-label":`Loading`,children:[(0,e.jsx)(`circle`,{cx:`12`,cy:`12`,r:`9`,stroke:`currentColor`,strokeOpacity:r===`accent`?.25:.35,strokeWidth:o}),(0,e.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9`,stroke:r===`accent`?`var(--tintora-control-fill)`:`currentColor`,strokeWidth:o,strokeLinecap:`round`})]})}exports.SPINNER_SIZE_MAP=t,exports.Spinner=n;

package/dist/Spinner/Spinner2.js

@@ -0,0 +1,47 @@
+/* empty css        */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/Spinner/Spinner.tsx
+var n = {
+	small: {
+		width: 16,
+		height: 16,
+		strokeWidth: 3.5
+	},
+	medium: {
+		width: 24,
+		height: 24,
+		strokeWidth: 3
+	},
+	large: {
+		width: 40,
+		height: 40,
+		strokeWidth: 2.4
+	}
+};
+function r({ size: r = "medium", color: i = "accent" }) {
+	let { width: a, height: o, strokeWidth: s } = n[r];
+	return /* @__PURE__ */ t("svg", {
+		className: "tintora-spinner",
+		width: a,
+		height: o,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		role: "img",
+		"aria-label": "Loading",
+		children: [/* @__PURE__ */ e("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9",
+			stroke: "currentColor",
+			strokeOpacity: i === "accent" ? .25 : .35,
+			strokeWidth: s
+		}), /* @__PURE__ */ e("path", {
+			d: "M21 12a9 9 0 0 0-9-9",
+			stroke: i === "accent" ? "var(--tintora-control-fill)" : "currentColor",
+			strokeWidth: s,
+			strokeLinecap: "round"
+		})]
+	});
+}
+//#endregion
+export { n as SPINNER_SIZE_MAP, r as Spinner };

package/dist/Switch/Switch2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../hooks/useCheckedState.cjs");;/* empty css         */let n=require("react/jsx-runtime");function r({checked:r,defaultChecked:i,onCheckedChange:a,className:o,...s}){let c=t.useCheckedState({checked:r,defaultChecked:i,onCheckedChange:a});return(0,n.jsxs)(`span`,{className:e.clsx(`tintora-switch`,o),children:[(0,n.jsx)(`input`,{...s,type:`checkbox`,role:`switch`,className:`tintora-switch__input`,checked:c.checked,onChange:c.onChange}),(0,n.jsx)(`span`,{className:`tintora-switch__track`,"aria-hidden":`true`})]})}exports.Switch=r;

package/dist/Switch/Switch2.js

@@ -0,0 +1,29 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { useCheckedState as t } from "../hooks/useCheckedState.js";
+/* empty css       */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/Switch/Switch.tsx
+function i({ checked: i, defaultChecked: a, onCheckedChange: o, className: s, ...c }) {
+	let l = t({
+		checked: i,
+		defaultChecked: a,
+		onCheckedChange: o
+	});
+	return /* @__PURE__ */ r("span", {
+		className: e("tintora-switch", s),
+		children: [/* @__PURE__ */ n("input", {
+			...c,
+			type: "checkbox",
+			role: "switch",
+			className: "tintora-switch__input",
+			checked: l.checked,
+			onChange: l.onChange
+		}), /* @__PURE__ */ n("span", {
+			className: "tintora-switch__track",
+			"aria-hidden": "true"
+		})]
+	});
+}
+//#endregion
+export { i as Switch };

package/dist/Tabs/Tab.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("./TabsContext.cjs");let n=require("react/jsx-runtime");function r({value:r,className:i,onClick:a,children:o,...s}){let c=t.useTabsContext(),l=c.value===r,u=e=>{a?.(e),e.defaultPrevented||c.select(r)};return(0,n.jsx)(`button`,{...s,type:`button`,role:`tab`,"aria-selected":l,tabIndex:l?0:-1,className:e.clsx(`tintora-tab`,i),onClick:u,children:o})}exports.Tab=r;

package/dist/Tabs/Tab.js

@@ -0,0 +1,22 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { useTabsContext as t } from "./TabsContext.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/Tabs/Tab.tsx
+function r({ value: r, className: i, onClick: a, children: o, ...s }) {
+	let c = t(), l = c.value === r, u = (e) => {
+		a?.(e), e.defaultPrevented || c.select(r);
+	};
+	return /* @__PURE__ */ n("button", {
+		...s,
+		type: "button",
+		role: "tab",
+		"aria-selected": l,
+		tabIndex: l ? 0 : -1,
+		className: e("tintora-tab", i),
+		onClick: u,
+		children: o
+	});
+}
+//#endregion
+export { r as Tab };

package/dist/Tabs/Tabs2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("./TabsContext.cjs");;/* empty css       */let n=require("react/jsx-runtime"),r=require("react");var i=[`ArrowLeft`,`ArrowRight`,`Home`,`End`];function a({value:a,defaultValue:o,onValueChange:s,variant:c=`segmented`,className:l,children:u,onKeyDown:d,...f}){let[p,m]=(0,r.useState)(o),h=a!==void 0,g=h?a:p,_=e=>{e!==g&&(h||m(e),s?.(e))},v=e=>{if(d?.(e),e.defaultPrevented||!i.includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`[role="tab"]:not(:disabled)`)),n=t.indexOf(e.target);if(n<0)return;e.preventDefault();let r=t.length-1,a=e.key===`Home`?0:e.key===`End`?r:(n+(e.key===`ArrowRight`?1:-1)+t.length)%t.length;t[a].focus(),t[a].click()};return(0,n.jsx)(t.TabsContext.Provider,{value:{value:g,select:_},children:(0,n.jsx)(`div`,{...f,role:`tablist`,className:e.clsx(`tintora-tabs`,`tintora-tabs--${c}`,l),onKeyDown:v,children:u})})}exports.Tabs=a;

package/dist/Tabs/Tabs2.js

@@ -0,0 +1,40 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { TabsContext as t } from "./TabsContext.js";
+/* empty css     */
+import { jsx as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+//#region src/Tabs/Tabs.tsx
+var i = [
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+];
+function a({ value: a, defaultValue: o, onValueChange: s, variant: c = "segmented", className: l, children: u, onKeyDown: d, ...f }) {
+	let [p, m] = r(o), h = a !== void 0, g = h ? a : p, _ = (e) => {
+		e !== g && (h || m(e), s?.(e));
+	}, v = (e) => {
+		if (d?.(e), e.defaultPrevented || !i.includes(e.key)) return;
+		let t = Array.from(e.currentTarget.querySelectorAll("[role=\"tab\"]:not(:disabled)")), n = t.indexOf(e.target);
+		if (n < 0) return;
+		e.preventDefault();
+		let r = t.length - 1, a = e.key === "Home" ? 0 : e.key === "End" ? r : (n + (e.key === "ArrowRight" ? 1 : -1) + t.length) % t.length;
+		t[a].focus(), t[a].click();
+	};
+	return /* @__PURE__ */ n(t.Provider, {
+		value: {
+			value: g,
+			select: _
+		},
+		children: /* @__PURE__ */ n("div", {
+			...f,
+			role: "tablist",
+			className: e("tintora-tabs", `tintora-tabs--${c}`, l),
+			onKeyDown: v,
+			children: u
+		})
+	});
+}
+//#endregion
+export { a as Tabs };

package/dist/Tabs/TabsContext.cjs

@@ -0,0 +1 @@
+"use client";let e=require("react");var t=(0,e.createContext)(null);function n(){let n=(0,e.useContext)(t);if(!n)throw Error(`Tab must be rendered inside Tabs`);return n}exports.TabsContext=t,exports.useTabsContext=n;

package/dist/Tabs/TabsContext.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/Tabs/TabsContext.ts
+var n = e(null);
+function r() {
+	let e = t(n);
+	if (!e) throw Error("Tab must be rendered inside Tabs");
+	return e;
+}
+//#endregion
+export { n as TabsContext, r as useTabsContext };

package/dist/Tag/Tag2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css      */let t=require("react/jsx-runtime");function n({children:n,className:r,variant:i=`neutral`,size:a=`medium`,...o}){return(0,t.jsx)(`span`,{...o,className:e.clsx(`tintora-tag`,`tintora-tag--${i}`,`tintora-tag--${a}`,r),children:n})}exports.Tag=n;

package/dist/Tag/Tag2.js

@@ -0,0 +1,13 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css    */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/Tag/Tag.tsx
+function n({ children: n, className: r, variant: i = "neutral", size: a = "medium", ...o }) {
+	return /* @__PURE__ */ t("span", {
+		...o,
+		className: e("tintora-tag", `tintora-tag--${i}`, `tintora-tag--${a}`, r),
+		children: n
+	});
+}
+//#endregion
+export { n as Tag };

package/dist/TextField/TextField2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs");;/* empty css            */let t=require("react/jsx-runtime"),n=require("react");function r({label:r,hint:i,error:a,id:o,className:s,disabled:c,"aria-describedby":l,"aria-invalid":u,...d}){let f=(0,n.useId)(),p=o??f,m=`${p}-message`,h=a??i;return(0,t.jsxs)(`div`,{className:e.clsx(`tintora-textfield`,c&&`tintora-textfield--disabled`,s),children:[(0,t.jsx)(`label`,{htmlFor:p,className:`tintora-textfield__label`,children:r}),(0,t.jsx)(`input`,{...d,id:p,disabled:c,className:`tintora-textfield__input`,"aria-invalid":a?!0:u,"aria-describedby":e.clsx(h&&m,l)||void 0}),h&&(0,t.jsx)(`span`,{id:m,className:e.clsx(`tintora-textfield__hint`,a&&`tintora-textfield__hint--error`),children:h})]})}exports.TextField=r;

package/dist/TextField/TextField2.js

@@ -0,0 +1,34 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+/* empty css          */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+//#region src/TextField/TextField.tsx
+function i({ label: i, hint: a, error: o, id: s, className: c, disabled: l, "aria-describedby": u, "aria-invalid": d, ...f }) {
+	let p = r(), m = s ?? p, h = `${m}-message`, g = o ?? a;
+	return /* @__PURE__ */ n("div", {
+		className: e("tintora-textfield", l && "tintora-textfield--disabled", c),
+		children: [
+			/* @__PURE__ */ t("label", {
+				htmlFor: m,
+				className: "tintora-textfield__label",
+				children: i
+			}),
+			/* @__PURE__ */ t("input", {
+				...f,
+				id: m,
+				disabled: l,
+				className: "tintora-textfield__input",
+				"aria-invalid": o ? !0 : d,
+				"aria-describedby": e(g && h, u) || void 0
+			}),
+			g && /* @__PURE__ */ t("span", {
+				id: h,
+				className: e("tintora-textfield__hint", o && "tintora-textfield__hint--error"),
+				children: g
+			})
+		]
+	});
+}
+//#endregion
+export { i as TextField };

package/dist/Toast/Toast2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../hooks/useLatest.cjs");;/* empty css        */const n=require("./ToastIcons.cjs");let r=require("react/jsx-runtime"),i=require("react");var a={success:(0,r.jsx)(n.SuccessIcon,{}),error:(0,r.jsx)(n.ErrorIcon,{}),info:(0,r.jsx)(n.InfoIcon,{}),warning:(0,r.jsx)(n.WarningIcon,{})};function o({status:o,children:s,action:c,onDismiss:l,duration:u=5e3,timerBar:d=!1,className:f,...p}){let[m,h]=(0,i.useState)(!1),[g,_]=(0,i.useState)(!1),v=m||g,y=t.useLatest(l),b=(0,i.useRef)(u);(0,i.useEffect)(()=>{b.current=u},[u]),(0,i.useEffect)(()=>{if(u<=0||v)return;let e=Date.now(),t=setTimeout(()=>y.current(),b.current);return()=>{clearTimeout(t),b.current-=Date.now()-e}},[u,v,y]);let x=d&&u>0,S={"--tintora-toast-animation-duration":`${u}ms`};return(0,r.jsxs)(`div`,{...p,role:`status`,className:e.clsx(`tintora-toast`,x&&`tintora-toast--timer`,v&&`tintora-toast--paused`,f),onMouseEnter:e=>{p.onMouseEnter?.(e),h(!0)},onMouseLeave:e=>{p.onMouseLeave?.(e),h(!1)},onFocus:e=>{p.onFocus?.(e),_(!0)},onBlur:e=>{p.onBlur?.(e),e.currentTarget.contains(e.relatedTarget)||_(!1)},children:[o&&a[o],(0,r.jsx)(`span`,{className:`tintora-toast__message`,children:s}),c&&(0,r.jsx)(`button`,{type:`button`,className:`tintora-toast__action`,onClick:c.onClick,children:c.label}),(0,r.jsx)(`button`,{type:`button`,className:`tintora-toast__close`,"aria-label":`Dismiss`,onClick:l,children:(0,r.jsx)(n.CloseIcon,{})}),x&&(0,r.jsx)(`span`,{className:`tintora-toast__progress`,style:S})]})}exports.Toast=o;