tembro 3.0.0 → 3.1.5

package/dist/src/components/modern/dual-list-picker.js

@@ -0,0 +1,108 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/modern/dual-list-picker.tsx
+function i({ items: i, picked: a, defaultPicked: o = [], onPickedChange: s, availableTitle: c = "Available", pickedTitle: l = "Selected", searchPlaceholder: u = "Search items...", emptyMessage: d = "Nothing to show.", maxPicked: f, transferAll: p = !0, className: m, ...h }) {
+	let [g, _] = t.useState(o), [v, y] = t.useState(""), b = a ?? g, x = t.useMemo(() => new Set(b), [b]), S = v.trim().toLowerCase(), C = t.useCallback((e) => S ? (typeof e.label == "string" ? e.label : String(e.value)).toLowerCase().includes(S) || e.value.toLowerCase().includes(S) : !0, [S]), w = t.useMemo(() => i.filter((e) => !x.has(e.value) && C(e)), [
+		i,
+		C,
+		x
+	]), T = t.useMemo(() => i.filter((e) => x.has(e.value) && C(e)), [
+		i,
+		C,
+		x
+	]), E = f !== void 0 && b.length >= f, D = t.useCallback((e) => {
+		a === void 0 && _(e), s?.(e);
+	}, [s, a]);
+	function O(e) {
+		if (x.has(e)) {
+			D(b.filter((t) => t !== e));
+			return;
+		}
+		E || D([...b, e]);
+	}
+	function k() {
+		let e = [...b];
+		for (let t of i) if (!(t.disabled || x.has(t.value))) {
+			if (f !== void 0 && e.length >= f) break;
+			e.push(t.value);
+		}
+		D(e);
+	}
+	function A() {
+		D([]);
+	}
+	let j = (e, t) => /* @__PURE__ */ r("div", {
+		className: "min-h-48 rounded-lg border bg-card",
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex items-center justify-between gap-2 border-b px-3 py-2 text-sm font-medium",
+			children: [/* @__PURE__ */ n("span", { children: e }), /* @__PURE__ */ n("span", {
+				className: "text-xs font-normal text-muted-foreground",
+				children: t.length
+			})]
+		}), /* @__PURE__ */ n("div", {
+			className: "grid gap-1 p-2",
+			children: t.length ? t.map((e) => /* @__PURE__ */ r("button", {
+				type: "button",
+				disabled: e.disabled,
+				"aria-pressed": x.has(e.value),
+				className: "flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted disabled:opacity-50",
+				onClick: () => O(e.value),
+				children: [/* @__PURE__ */ n("span", { children: e.label }), /* @__PURE__ */ n("span", {
+					className: "text-muted-foreground",
+					children: x.has(e.value) ? "−" : "+"
+				})]
+			}, e.value)) : /* @__PURE__ */ n("div", {
+				className: "px-2 py-3 text-sm text-muted-foreground",
+				children: d
+			})
+		})]
+	});
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "dual-list-picker",
+		className: e("grid gap-3", m),
+		...h,
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ n("input", {
+					value: v,
+					placeholder: u,
+					className: "h-9 min-w-0 rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40 sm:max-w-xs",
+					onChange: (e) => y(e.currentTarget.value)
+				}), p ? /* @__PURE__ */ r("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ n("button", {
+						type: "button",
+						className: "rounded-md border px-3 py-1.5 text-sm disabled:opacity-50",
+						disabled: E,
+						onClick: k,
+						children: "Add all"
+					}), /* @__PURE__ */ n("button", {
+						type: "button",
+						className: "rounded-md border px-3 py-1.5 text-sm disabled:opacity-50",
+						disabled: b.length === 0,
+						onClick: A,
+						children: "Remove all"
+					})]
+				}) : null]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "grid gap-3 md:grid-cols-2",
+				children: [j(c, w), j(l, T)]
+			}),
+			f === void 0 ? null : /* @__PURE__ */ r("div", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					b.length,
+					" / ",
+					f,
+					" selected"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { i as DualListPicker };

package/dist/src/components/modern/image-cropper.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("react-easy-crop");a=e.__toESM(a,1);function o(e){return e*Math.PI/180}function s(e,t,n){let r=o(n);return{width:Math.abs(Math.cos(r)*e)+Math.abs(Math.sin(r)*t),height:Math.abs(Math.sin(r)*e)+Math.abs(Math.cos(r)*t)}}function c(e,t){return new Promise((n,r)=>{let i=new Image;t&&(i.crossOrigin=t),i.onload=()=>n(i),i.onerror=()=>r(Error(`Crop source image could not be loaded`)),i.src=e})}async function l({src:e,crop:t,rotation:n=0,type:r=`image/png`,quality:i=.92,crossOrigin:a=`anonymous`}){let l=await c(e,a),u=s(l.naturalWidth,l.naturalHeight,n),d=document.createElement(`canvas`);d.width=Math.ceil(u.width),d.height=Math.ceil(u.height);let f=d.getContext(`2d`);if(!f)throw Error(`Canvas 2D context is unavailable`);f.translate(d.width/2,d.height/2),f.rotate(o(n)),f.translate(-l.naturalWidth/2,-l.naturalHeight/2),f.drawImage(l,0,0);let p=document.createElement(`canvas`);p.width=Math.max(1,Math.round(t.width)),p.height=Math.max(1,Math.round(t.height));let m=p.getContext(`2d`);if(!m)throw Error(`Canvas 2D context is unavailable`);return m.drawImage(d,Math.round(t.x),Math.round(t.y),Math.round(t.width),Math.round(t.height),0,0,p.width,p.height),new Promise((e,t)=>{p.toBlob(n=>n?e(n):t(Error(`Cropped image could not be encoded`)),r,i)})}function u({src:e,alt:o=`Image crop preview`,crop:s,defaultCrop:c={x:0,y:0},onCropChange:l,zoom:u,defaultZoom:d=1,onZoomChange:f,rotation:p,defaultRotation:m=0,onRotationChange:h,onCropComplete:g,aspect:_=1,cropShape:v=`rect`,objectFit:y=`contain`,minZoom:b=1,maxZoom:x=3,zoomStep:S=.1,showGrid:C=!0,disabled:w=!1,labels:T,className:E,...D}){let[O,k]=n.useState(c),[A,j]=n.useState(d),[M,N]=n.useState(m),P=s??O,F=u??A,I=p??M;return(0,i.jsxs)(`div`,{"data-slot":`image-cropper`,"data-disabled":w||void 0,className:t.cn(`grid gap-3 data-[disabled]:opacity-60`,E),...D,children:[(0,i.jsx)(`div`,{role:`img`,"aria-label":T?.cropper??o,className:t.cn(`relative min-h-64 overflow-hidden rounded-md bg-black`,w&&`pointer-events-none`),style:{aspectRatio:_},children:(0,i.jsx)(a.default,{image:e,crop:P,zoom:F,rotation:I,aspect:_,cropShape:v,objectFit:y,minZoom:b,maxZoom:x,zoomSpeed:S,showGrid:C,onCropChange:e=>{s===void 0&&k(e),l?.(e)},onZoomChange:e=>{u===void 0&&j(e),f?.(e)},onRotationChange:e=>{p===void 0&&N(e),h?.(e)},onCropComplete:g})}),(0,i.jsxs)(`div`,{className:`grid gap-2 sm:grid-cols-2`,children:[(0,i.jsxs)(`label`,{className:`grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.ZoomInIcon,{className:`size-4`,"aria-hidden":`true`}),(0,i.jsx)(`span`,{className:`sr-only`,children:T?.zoom??`Zoom`}),(0,i.jsx)(`input`,{type:`range`,min:b,max:x,step:S,value:F,disabled:w,"aria-label":T?.zoom??`Zoom`,className:`w-full accent-foreground`,onChange:e=>{let t=Number(e.target.value);u===void 0&&j(t),f?.(t)}}),(0,i.jsxs)(`span`,{className:`w-9 text-right tabular-nums`,children:[F.toFixed(1),`x`]})]}),(0,i.jsxs)(`label`,{className:`grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.RotateCwIcon,{className:`size-4`,"aria-hidden":`true`}),(0,i.jsx)(`span`,{className:`sr-only`,children:T?.rotation??`Rotation`}),(0,i.jsx)(`input`,{type:`range`,min:`-180`,max:`180`,step:`1`,value:I,disabled:w,"aria-label":T?.rotation??`Rotation`,className:`w-full accent-foreground`,onChange:e=>{let t=Number(e.target.value);p===void 0&&N(t),h?.(t)}}),(0,i.jsxs)(`span`,{className:`w-10 text-right tabular-nums`,children:[Math.round(I),`°`]})]})]})]})}exports.ImageCropper=u,exports.createCroppedImageBlob=l;

package/dist/src/components/modern/image-cropper.js

@@ -0,0 +1,143 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { RotateCwIcon as n, ZoomInIcon as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "react-easy-crop";
+//#region src/components/modern/image-cropper.tsx
+function s(e) {
+	return e * Math.PI / 180;
+}
+function c(e, t, n) {
+	let r = s(n);
+	return {
+		width: Math.abs(Math.cos(r) * e) + Math.abs(Math.sin(r) * t),
+		height: Math.abs(Math.sin(r) * e) + Math.abs(Math.cos(r) * t)
+	};
+}
+function l(e, t) {
+	return new Promise((n, r) => {
+		let i = new Image();
+		t && (i.crossOrigin = t), i.onload = () => n(i), i.onerror = () => r(/* @__PURE__ */ Error("Crop source image could not be loaded")), i.src = e;
+	});
+}
+async function u({ src: e, crop: t, rotation: n = 0, type: r = "image/png", quality: i = .92, crossOrigin: a = "anonymous" }) {
+	let o = await l(e, a), u = c(o.naturalWidth, o.naturalHeight, n), d = document.createElement("canvas");
+	d.width = Math.ceil(u.width), d.height = Math.ceil(u.height);
+	let f = d.getContext("2d");
+	if (!f) throw Error("Canvas 2D context is unavailable");
+	f.translate(d.width / 2, d.height / 2), f.rotate(s(n)), f.translate(-o.naturalWidth / 2, -o.naturalHeight / 2), f.drawImage(o, 0, 0);
+	let p = document.createElement("canvas");
+	p.width = Math.max(1, Math.round(t.width)), p.height = Math.max(1, Math.round(t.height));
+	let m = p.getContext("2d");
+	if (!m) throw Error("Canvas 2D context is unavailable");
+	return m.drawImage(d, Math.round(t.x), Math.round(t.y), Math.round(t.width), Math.round(t.height), 0, 0, p.width, p.height), new Promise((e, t) => {
+		p.toBlob((n) => n ? e(n) : t(/* @__PURE__ */ Error("Cropped image could not be encoded")), r, i);
+	});
+}
+function d({ src: s, alt: c = "Image crop preview", crop: l, defaultCrop: u = {
+	x: 0,
+	y: 0
+}, onCropChange: d, zoom: f, defaultZoom: p = 1, onZoomChange: m, rotation: h, defaultRotation: g = 0, onRotationChange: _, onCropComplete: v, aspect: y = 1, cropShape: b = "rect", objectFit: x = "contain", minZoom: S = 1, maxZoom: C = 3, zoomStep: w = .1, showGrid: T = !0, disabled: E = !1, labels: D, className: O, ...k }) {
+	let [A, j] = t.useState(u), [M, N] = t.useState(p), [P, F] = t.useState(g), I = l ?? A, L = f ?? M, R = h ?? P;
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "image-cropper",
+		"data-disabled": E || void 0,
+		className: e("grid gap-3 data-[disabled]:opacity-60", O),
+		...k,
+		children: [/* @__PURE__ */ i("div", {
+			role: "img",
+			"aria-label": D?.cropper ?? c,
+			className: e("relative min-h-64 overflow-hidden rounded-md bg-black", E && "pointer-events-none"),
+			style: { aspectRatio: y },
+			children: /* @__PURE__ */ i(o, {
+				image: s,
+				crop: I,
+				zoom: L,
+				rotation: R,
+				aspect: y,
+				cropShape: b,
+				objectFit: x,
+				minZoom: S,
+				maxZoom: C,
+				zoomSpeed: w,
+				showGrid: T,
+				onCropChange: (e) => {
+					l === void 0 && j(e), d?.(e);
+				},
+				onZoomChange: (e) => {
+					f === void 0 && N(e), m?.(e);
+				},
+				onRotationChange: (e) => {
+					h === void 0 && F(e), _?.(e);
+				},
+				onCropComplete: v
+			})
+		}), /* @__PURE__ */ a("div", {
+			className: "grid gap-2 sm:grid-cols-2",
+			children: [/* @__PURE__ */ a("label", {
+				className: "grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ i(r, {
+						className: "size-4",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ i("span", {
+						className: "sr-only",
+						children: D?.zoom ?? "Zoom"
+					}),
+					/* @__PURE__ */ i("input", {
+						type: "range",
+						min: S,
+						max: C,
+						step: w,
+						value: L,
+						disabled: E,
+						"aria-label": D?.zoom ?? "Zoom",
+						className: "w-full accent-foreground",
+						onChange: (e) => {
+							let t = Number(e.target.value);
+							f === void 0 && N(t), m?.(t);
+						}
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "w-9 text-right tabular-nums",
+						children: [L.toFixed(1), "x"]
+					})
+				]
+			}), /* @__PURE__ */ a("label", {
+				className: "grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ i(n, {
+						className: "size-4",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ i("span", {
+						className: "sr-only",
+						children: D?.rotation ?? "Rotation"
+					}),
+					/* @__PURE__ */ i("input", {
+						type: "range",
+						min: "-180",
+						max: "180",
+						step: "1",
+						value: R,
+						disabled: E,
+						"aria-label": D?.rotation ?? "Rotation",
+						className: "w-full accent-foreground",
+						onChange: (e) => {
+							let t = Number(e.target.value);
+							h === void 0 && F(t), _?.(t);
+						}
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "w-10 text-right tabular-nums",
+						children: [Math.round(R), "°"]
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { d as ImageCropper, u as createCroppedImageBlob };

package/dist/src/components/modern/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./calendar-scheduler.cjs"),t=require("./dual-list-picker.cjs"),n=require("./resizable-panel.cjs"),r=require("./rich-text-editor.cjs"),i=require("./image-cropper.cjs");exports.CalendarScheduler=e.CalendarScheduler,exports.DualListPicker=t.DualListPicker,exports.EditorToolbar=r.EditorToolbar,exports.ImageCropper=i.ImageCropper,exports.ResizableHandle=n.ResizableHandle,exports.ResizablePanel=n.ResizablePanel,exports.ResizablePanelGroup=n.ResizablePanelGroup,exports.RichTextEditor=r.RichTextEditor,exports.createCroppedImageBlob=i.createCroppedImageBlob;

package/dist/src/components/modern/index.js

@@ -0,0 +1,6 @@
+import { CalendarScheduler as e } from "./calendar-scheduler.js";
+import { DualListPicker as t } from "./dual-list-picker.js";
+import { ResizableHandle as n, ResizablePanel as r, ResizablePanelGroup as i } from "./resizable-panel.js";
+import { EditorToolbar as a, RichTextEditor as o } from "./rich-text-editor.js";
+import { ImageCropper as s, createCroppedImageBlob as c } from "./image-cropper.js";
+export { e as CalendarScheduler, t as DualListPicker, a as EditorToolbar, s as ImageCropper, n as ResizableHandle, r as ResizablePanel, i as ResizablePanelGroup, o as RichTextEditor, c as createCroppedImageBlob };

package/dist/src/components/modern/resizable-panel.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a=n.createContext(null);function o(e){if(typeof e==`number`)return e;if(typeof e==`string`){let t=Number.parseFloat(e.replace(`%`,``));return Number.isFinite(t)?t:void 0}}function s({direction:e=`horizontal`,className:r,children:s,...u}){let d=n.useRef(null),f=n.Children.toArray(s).filter(e=>n.isValidElement(e)&&e.type===c),p=f.length,m=n.useMemo(()=>{let e=f.map(e=>o(e.props.defaultSize)),t=e.reduce((e,t)=>e+(t??0),0),n=e.filter(e=>e===void 0).length,r=Math.max(100-t,0),i=n>0?r/n:p>0?100/p:100;return e.map(e=>e??i)},[p,f]),h=n.useMemo(()=>f.map(e=>e.props.minSize??15),[f]),[g,_]=n.useState(m);n.useEffect(()=>{_(m)},[m]);let v=n.useCallback((t,n)=>{let r=d.current;if(!r||t<0||t>=p-1)return;let i=e===`horizontal`?r.getBoundingClientRect().width:r.getBoundingClientRect().height;if(!i)return;let a=n/i*100;_(e=>{let n=[...e],r=n[t]??0,i=n[t+1]??0,o=h[t]??15,s=h[t+1]??15,c=r+a,l=Math.min(Math.max(c,o),r+i-s),u=l-r;return n[t]=l,n[t+1]=i-u,n})},[e,h,p]),y=n.Children.map(s,e=>{if(!n.isValidElement(e))return e;if(e.type===c){let t=f.findIndex(t=>t===e);return n.cloneElement(e,{"data-panel-index":t})}if(e.type===l){let t=n.Children.toArray(s).slice(0,n.Children.toArray(s).indexOf(e)).filter(e=>n.isValidElement(e)&&e.type===c).length-1;return n.cloneElement(e,{"data-handle-index":t})}return e});return(0,i.jsx)(a.Provider,{value:{direction:e,getSize:e=>g[e]??100/Math.max(p,1),resizePanels:v},children:(0,i.jsx)(`div`,{ref:d,"data-slot":`resizable-panel-group`,"data-direction":e,className:t.cn(`flex gap-2`,e===`horizontal`?`flex-row items-stretch`:`flex-col`,r),...u,children:y})})}function c({className:e,style:r,defaultSize:s,...c}){let l=n.useContext(a),u=Number(c[`data-panel-index`]??0),d=l?l.getSize(u):o(s)??100;return(0,i.jsx)(`div`,{"data-slot":`resizable-panel`,className:t.cn(`min-h-24 overflow-auto rounded-lg border bg-card p-3`,e),style:{flexBasis:`${d}%`,flexGrow:0,flexShrink:0,...r},...c})}function l({className:e,...o}){let s=n.useContext(a),c=Number(o[`data-handle-index`]??0),l=n.useRef(null);return(0,i.jsx)(`button`,{type:`button`,"data-slot":`resizable-handle`,"aria-label":`Resize panels`,className:t.cn(`relative flex shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/85 text-muted-foreground shadow-sm transition-colors hover:border-ring/45 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,s?.direction===`horizontal`?`w-3 cursor-col-resize`:`h-3 cursor-row-resize`,e),onPointerDown:e=>{s&&(l.current={pointerId:e.pointerId,axis:s.direction===`horizontal`?e.clientX:e.clientY},e.currentTarget.setPointerCapture(e.pointerId))},onPointerMove:e=>{if(!s||!l.current||l.current.pointerId!==e.pointerId)return;let t=s.direction===`horizontal`?e.clientX:e.clientY,n=t-l.current.axis;n!==0&&(l.current.axis=t,s.resizePanels(c,n))},onPointerUp:e=>{l.current?.pointerId===e.pointerId&&(l.current=null)},onPointerCancel:()=>{l.current=null},onKeyDown:e=>{if(!s)return;let t=e.shiftKey?24:12;s.direction===`horizontal`&&e.key===`ArrowLeft`&&(e.preventDefault(),s.resizePanels(c,-t)),s.direction===`horizontal`&&e.key===`ArrowRight`&&(e.preventDefault(),s.resizePanels(c,t)),s.direction===`vertical`&&e.key===`ArrowUp`&&(e.preventDefault(),s.resizePanels(c,-t)),s.direction===`vertical`&&e.key===`ArrowDown`&&(e.preventDefault(),s.resizePanels(c,t))},...o,children:(0,i.jsx)(r.GripVerticalIcon,{className:t.cn(`size-3`,s?.direction===`vertical`&&`rotate-90`)})})}exports.ResizableHandle=l,exports.ResizablePanel=c,exports.ResizablePanelGroup=s;

package/dist/src/components/modern/resizable-panel.js

@@ -0,0 +1,113 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { GripVerticalIcon as n } from "lucide-react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/modern/resizable-panel.tsx
+var i = t.createContext(null);
+function a(e) {
+	if (typeof e == "number") return e;
+	if (typeof e == "string") {
+		let t = Number.parseFloat(e.replace("%", ""));
+		return Number.isFinite(t) ? t : void 0;
+	}
+}
+function o({ direction: n = "horizontal", className: o, children: l, ...u }) {
+	let d = t.useRef(null), f = t.Children.toArray(l).filter((e) => t.isValidElement(e) && e.type === s), p = f.length, m = t.useMemo(() => {
+		let e = f.map((e) => a(e.props.defaultSize)), t = e.reduce((e, t) => e + (t ?? 0), 0), n = e.filter((e) => e === void 0).length, r = Math.max(100 - t, 0), i = n > 0 ? r / n : p > 0 ? 100 / p : 100;
+		return e.map((e) => e ?? i);
+	}, [p, f]), h = t.useMemo(() => f.map((e) => e.props.minSize ?? 15), [f]), [g, _] = t.useState(m);
+	t.useEffect(() => {
+		_(m);
+	}, [m]);
+	let v = t.useCallback((e, t) => {
+		let r = d.current;
+		if (!r || e < 0 || e >= p - 1) return;
+		let i = n === "horizontal" ? r.getBoundingClientRect().width : r.getBoundingClientRect().height;
+		if (!i) return;
+		let a = t / i * 100;
+		_((t) => {
+			let n = [...t], r = n[e] ?? 0, i = n[e + 1] ?? 0, o = h[e] ?? 15, s = h[e + 1] ?? 15, c = r + a, l = Math.min(Math.max(c, o), r + i - s), u = l - r;
+			return n[e] = l, n[e + 1] = i - u, n;
+		});
+	}, [
+		n,
+		h,
+		p
+	]), y = t.Children.map(l, (e) => {
+		if (!t.isValidElement(e)) return e;
+		if (e.type === s) {
+			let n = f.findIndex((t) => t === e);
+			return t.cloneElement(e, { "data-panel-index": n });
+		}
+		if (e.type === c) {
+			let n = t.Children.toArray(l).slice(0, t.Children.toArray(l).indexOf(e)).filter((e) => t.isValidElement(e) && e.type === s).length - 1;
+			return t.cloneElement(e, { "data-handle-index": n });
+		}
+		return e;
+	});
+	return /* @__PURE__ */ r(i.Provider, {
+		value: {
+			direction: n,
+			getSize: (e) => g[e] ?? 100 / Math.max(p, 1),
+			resizePanels: v
+		},
+		children: /* @__PURE__ */ r("div", {
+			ref: d,
+			"data-slot": "resizable-panel-group",
+			"data-direction": n,
+			className: e("flex gap-2", n === "horizontal" ? "flex-row items-stretch" : "flex-col", o),
+			...u,
+			children: y
+		})
+	});
+}
+function s({ className: n, style: o, defaultSize: s, ...c }) {
+	let l = t.useContext(i), u = Number(c["data-panel-index"] ?? 0), d = l ? l.getSize(u) : a(s) ?? 100;
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "resizable-panel",
+		className: e("min-h-24 overflow-auto rounded-lg border bg-card p-3", n),
+		style: {
+			flexBasis: `${d}%`,
+			flexGrow: 0,
+			flexShrink: 0,
+			...o
+		},
+		...c
+	});
+}
+function c({ className: a, ...o }) {
+	let s = t.useContext(i), c = Number(o["data-handle-index"] ?? 0), l = t.useRef(null);
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		"data-slot": "resizable-handle",
+		"aria-label": "Resize panels",
+		className: e("relative flex shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/85 text-muted-foreground shadow-sm transition-colors hover:border-ring/45 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", s?.direction === "horizontal" ? "w-3 cursor-col-resize" : "h-3 cursor-row-resize", a),
+		onPointerDown: (e) => {
+			s && (l.current = {
+				pointerId: e.pointerId,
+				axis: s.direction === "horizontal" ? e.clientX : e.clientY
+			}, e.currentTarget.setPointerCapture(e.pointerId));
+		},
+		onPointerMove: (e) => {
+			if (!s || !l.current || l.current.pointerId !== e.pointerId) return;
+			let t = s.direction === "horizontal" ? e.clientX : e.clientY, n = t - l.current.axis;
+			n !== 0 && (l.current.axis = t, s.resizePanels(c, n));
+		},
+		onPointerUp: (e) => {
+			l.current?.pointerId === e.pointerId && (l.current = null);
+		},
+		onPointerCancel: () => {
+			l.current = null;
+		},
+		onKeyDown: (e) => {
+			if (!s) return;
+			let t = e.shiftKey ? 24 : 12;
+			s.direction === "horizontal" && e.key === "ArrowLeft" && (e.preventDefault(), s.resizePanels(c, -t)), s.direction === "horizontal" && e.key === "ArrowRight" && (e.preventDefault(), s.resizePanels(c, t)), s.direction === "vertical" && e.key === "ArrowUp" && (e.preventDefault(), s.resizePanels(c, -t)), s.direction === "vertical" && e.key === "ArrowDown" && (e.preventDefault(), s.resizePanels(c, t));
+		},
+		...o,
+		children: /* @__PURE__ */ r(n, { className: e("size-3", s?.direction === "vertical" && "rotate-90") })
+	});
+}
+//#endregion
+export { c as ResizableHandle, s as ResizablePanel, o as ResizablePanelGroup };

package/dist/src/components/modern/rich-text-editor.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("@tiptap/react"),o=require("@tiptap/starter-kit");o=e.__toESM(o,1);let s=require("@tiptap/extension-link");s=e.__toESM(s,1);let c=require("@tiptap/extension-placeholder");c=e.__toESM(c,1);function l(e){return e.replaceAll(`&`,`&amp;`).replaceAll(`<`,`&lt;`).replaceAll(`>`,`&gt;`)}function u(e,t){return t===`html`?e:`<p>${l(e)}</p>`}function d({editor:e,onLinkRequest:t,label:n}){let a=e.getAttributes(`link`).href,o=[{label:`Undo`,icon:r.Undo2Icon,disabled:!e.can().undo(),run:()=>e.chain().focus().undo().run()},{label:`Redo`,icon:r.Redo2Icon,disabled:!e.can().redo(),run:()=>e.chain().focus().redo().run()},{label:`Bold`,icon:r.BoldIcon,active:e.isActive(`bold`),run:()=>e.chain().focus().toggleBold().run()},{label:`Italic`,icon:r.ItalicIcon,active:e.isActive(`italic`),run:()=>e.chain().focus().toggleItalic().run()},{label:`Strike`,icon:r.StrikethroughIcon,active:e.isActive(`strike`),run:()=>e.chain().focus().toggleStrike().run()},{label:`Inline code`,icon:r.CodeIcon,active:e.isActive(`code`),run:()=>e.chain().focus().toggleCode().run()},{label:`Heading`,icon:r.Heading2Icon,active:e.isActive(`heading`,{level:2}),run:()=>e.chain().focus().toggleHeading({level:2}).run()},{label:`Bullet list`,icon:r.ListIcon,active:e.isActive(`bulletList`),run:()=>e.chain().focus().toggleBulletList().run()},{label:`Ordered list`,icon:r.ListOrderedIcon,active:e.isActive(`orderedList`),run:()=>e.chain().focus().toggleOrderedList().run()},{label:`Blockquote`,icon:r.QuoteIcon,active:e.isActive(`blockquote`),run:()=>e.chain().focus().toggleBlockquote().run()}];return t&&o.push({label:`Set link`,icon:r.LinkIcon,active:e.isActive(`link`),run:()=>{let n=t(a);n!=null&&(n.trim()?e.chain().focus().extendMarkRange(`link`).setLink({href:n.trim()}).run():e.chain().focus().unsetLink().run())}}),e.isActive(`link`)&&o.push({label:`Remove link`,icon:r.UnlinkIcon,run:()=>e.chain().focus().unsetLink().run()}),(0,i.jsx)(`div`,{role:`toolbar`,"aria-label":n,className:`flex flex-wrap gap-1 border-b p-1.5`,children:o.map(e=>{let t=e.icon;return(0,i.jsx)(`button`,{type:`button`,title:e.label,"aria-label":e.label,"aria-pressed":e.active||void 0,disabled:e.disabled,className:`inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent aria-pressed:text-foreground disabled:pointer-events-none disabled:opacity-40`,onClick:e.run,children:(0,i.jsx)(t,{className:`size-4`})},e.label)})})}function f({value:e,defaultValue:r=``,onValueChange:l,output:f=`html`,placeholder:p=`Start typing...`,editable:m=!0,autoFocus:h=!1,minHeight:g=144,onLinkRequest:_,labels:v,className:y,...b}){let x=e??r,S=(0,a.useEditor)({immediatelyRender:!0,autofocus:h,editable:m,editorProps:{attributes:{"aria-label":v?.editor??`Rich text editor`,role:`textbox`}},content:u(x,f),extensions:[o.default.configure({link:!1}),s.default.configure({openOnClick:!1,autolink:!0,defaultProtocol:`https`}),c.default.configure({placeholder:p})],onUpdate:({editor:e})=>{l?.(f===`html`?e.getHTML():e.getText())}});return n.useEffect(()=>{!S||e===void 0||(f===`html`?S.getHTML():S.getText())!==e&&S.commands.setContent(u(e,f),{emitUpdate:!1})},[S,f,e]),n.useEffect(()=>{S?.setEditable(m)},[m,S]),(0,i.jsxs)(`div`,{"data-slot":`rich-text-editor`,"data-disabled":!m||void 0,className:t.cn(`overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring data-[disabled]:opacity-60`,y),...b,children:[S&&m?(0,i.jsx)(d,{editor:S,onLinkRequest:_,label:v?.toolbar??`Text formatting`}):null,(0,i.jsx)(a.EditorContent,{editor:S,"aria-label":v?.editor??`Rich text editor`,className:`[&_.tiptap]:px-3 [&_.tiptap]:py-2.5 [&_.tiptap]:outline-none [&_.tiptap_a]:text-primary [&_.tiptap_a]:underline [&_.tiptap_blockquote]:border-l-2 [&_.tiptap_blockquote]:pl-3 [&_.tiptap_h2]:text-lg [&_.tiptap_h2]:font-semibold [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:pl-6 [&_.tiptap_p.is-editor-empty:first-child:before]:pointer-events-none [&_.tiptap_p.is-editor-empty:first-child:before]:float-left [&_.tiptap_p.is-editor-empty:first-child:before]:h-0 [&_.tiptap_p.is-editor-empty:first-child:before]:text-muted-foreground [&_.tiptap_p.is-editor-empty:first-child:before]:content-[attr(data-placeholder)] [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:pl-6`,style:{minHeight:g}})]})}function p(e){let[r,a]=n.useState(!1);return n.useEffect(()=>{a(!0)},[]),r?(0,i.jsx)(f,{...e}):(0,i.jsx)(`div`,{"data-slot":`rich-text-editor`,"data-state":`loading`,className:t.cn(`overflow-hidden rounded-md border bg-background shadow-sm`,e.className),style:{minHeight:e.minHeight??144},"aria-busy":`true`})}exports.EditorToolbar=d,exports.RichTextEditor=p;

package/dist/src/components/modern/rich-text-editor.js

@@ -0,0 +1,172 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { BoldIcon as n, CodeIcon as r, Heading2Icon as i, ItalicIcon as a, LinkIcon as o, ListIcon as s, ListOrderedIcon as c, QuoteIcon as l, Redo2Icon as u, StrikethroughIcon as d, Undo2Icon as f, UnlinkIcon as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { EditorContent as g, useEditor as _ } from "@tiptap/react";
+import v from "@tiptap/starter-kit";
+import y from "@tiptap/extension-link";
+import b from "@tiptap/extension-placeholder";
+//#region src/components/modern/rich-text-editor.tsx
+function x(e) {
+	return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function S(e, t) {
+	return t === "html" ? e : `<p>${x(e)}</p>`;
+}
+function C({ editor: e, onLinkRequest: t, label: h }) {
+	let g = e.getAttributes("link").href, _ = [
+		{
+			label: "Undo",
+			icon: f,
+			disabled: !e.can().undo(),
+			run: () => e.chain().focus().undo().run()
+		},
+		{
+			label: "Redo",
+			icon: u,
+			disabled: !e.can().redo(),
+			run: () => e.chain().focus().redo().run()
+		},
+		{
+			label: "Bold",
+			icon: n,
+			active: e.isActive("bold"),
+			run: () => e.chain().focus().toggleBold().run()
+		},
+		{
+			label: "Italic",
+			icon: a,
+			active: e.isActive("italic"),
+			run: () => e.chain().focus().toggleItalic().run()
+		},
+		{
+			label: "Strike",
+			icon: d,
+			active: e.isActive("strike"),
+			run: () => e.chain().focus().toggleStrike().run()
+		},
+		{
+			label: "Inline code",
+			icon: r,
+			active: e.isActive("code"),
+			run: () => e.chain().focus().toggleCode().run()
+		},
+		{
+			label: "Heading",
+			icon: i,
+			active: e.isActive("heading", { level: 2 }),
+			run: () => e.chain().focus().toggleHeading({ level: 2 }).run()
+		},
+		{
+			label: "Bullet list",
+			icon: s,
+			active: e.isActive("bulletList"),
+			run: () => e.chain().focus().toggleBulletList().run()
+		},
+		{
+			label: "Ordered list",
+			icon: c,
+			active: e.isActive("orderedList"),
+			run: () => e.chain().focus().toggleOrderedList().run()
+		},
+		{
+			label: "Blockquote",
+			icon: l,
+			active: e.isActive("blockquote"),
+			run: () => e.chain().focus().toggleBlockquote().run()
+		}
+	];
+	return t && _.push({
+		label: "Set link",
+		icon: o,
+		active: e.isActive("link"),
+		run: () => {
+			let n = t(g);
+			n != null && (n.trim() ? e.chain().focus().extendMarkRange("link").setLink({ href: n.trim() }).run() : e.chain().focus().unsetLink().run());
+		}
+	}), e.isActive("link") && _.push({
+		label: "Remove link",
+		icon: p,
+		run: () => e.chain().focus().unsetLink().run()
+	}), /* @__PURE__ */ m("div", {
+		role: "toolbar",
+		"aria-label": h,
+		className: "flex flex-wrap gap-1 border-b p-1.5",
+		children: _.map((e) => {
+			let t = e.icon;
+			return /* @__PURE__ */ m("button", {
+				type: "button",
+				title: e.label,
+				"aria-label": e.label,
+				"aria-pressed": e.active || void 0,
+				disabled: e.disabled,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent aria-pressed:text-foreground disabled:pointer-events-none disabled:opacity-40",
+				onClick: e.run,
+				children: /* @__PURE__ */ m(t, { className: "size-4" })
+			}, e.label);
+		})
+	});
+}
+function w({ value: n, defaultValue: r = "", onValueChange: i, output: a = "html", placeholder: o = "Start typing...", editable: s = !0, autoFocus: c = !1, minHeight: l = 144, onLinkRequest: u, labels: d, className: f, ...p }) {
+	let x = n ?? r, w = _({
+		immediatelyRender: !0,
+		autofocus: c,
+		editable: s,
+		editorProps: { attributes: {
+			"aria-label": d?.editor ?? "Rich text editor",
+			role: "textbox"
+		} },
+		content: S(x, a),
+		extensions: [
+			v.configure({ link: !1 }),
+			y.configure({
+				openOnClick: !1,
+				autolink: !0,
+				defaultProtocol: "https"
+			}),
+			b.configure({ placeholder: o })
+		],
+		onUpdate: ({ editor: e }) => {
+			i?.(a === "html" ? e.getHTML() : e.getText());
+		}
+	});
+	return t.useEffect(() => {
+		!w || n === void 0 || (a === "html" ? w.getHTML() : w.getText()) !== n && w.commands.setContent(S(n, a), { emitUpdate: !1 });
+	}, [
+		w,
+		a,
+		n
+	]), t.useEffect(() => {
+		w?.setEditable(s);
+	}, [s, w]), /* @__PURE__ */ h("div", {
+		"data-slot": "rich-text-editor",
+		"data-disabled": !s || void 0,
+		className: e("overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring data-[disabled]:opacity-60", f),
+		...p,
+		children: [w && s ? /* @__PURE__ */ m(C, {
+			editor: w,
+			onLinkRequest: u,
+			label: d?.toolbar ?? "Text formatting"
+		}) : null, /* @__PURE__ */ m(g, {
+			editor: w,
+			"aria-label": d?.editor ?? "Rich text editor",
+			className: "[&_.tiptap]:px-3 [&_.tiptap]:py-2.5 [&_.tiptap]:outline-none [&_.tiptap_a]:text-primary [&_.tiptap_a]:underline [&_.tiptap_blockquote]:border-l-2 [&_.tiptap_blockquote]:pl-3 [&_.tiptap_h2]:text-lg [&_.tiptap_h2]:font-semibold [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:pl-6 [&_.tiptap_p.is-editor-empty:first-child:before]:pointer-events-none [&_.tiptap_p.is-editor-empty:first-child:before]:float-left [&_.tiptap_p.is-editor-empty:first-child:before]:h-0 [&_.tiptap_p.is-editor-empty:first-child:before]:text-muted-foreground [&_.tiptap_p.is-editor-empty:first-child:before]:content-[attr(data-placeholder)] [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:pl-6",
+			style: { minHeight: l }
+		})]
+	});
+}
+function T(n) {
+	let [r, i] = t.useState(!1);
+	return t.useEffect(() => {
+		i(!0);
+	}, []), r ? /* @__PURE__ */ m(w, { ...n }) : /* @__PURE__ */ m("div", {
+		"data-slot": "rich-text-editor",
+		"data-state": "loading",
+		className: e("overflow-hidden rounded-md border bg-background shadow-sm", n.className),
+		style: { minHeight: n.minHeight ?? 144 },
+		"aria-busy": "true"
+	});
+}
+//#endregion
+export { C as EditorToolbar, T as RichTextEditor };

package/dist/src/components/navigation/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`pagination`,`Pagination`,`navigation`,`Controlled page navigation with edge buttons and active state.`)]);exports.navigationShowcaseDemoRegistry=t;

package/dist/src/components/navigation/demo.js

@@ -0,0 +1,5 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/navigation/demo.tsx
+var n = t([e("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state.")]);
+//#endregion
+export { n as navigationShowcaseDemoRegistry };

package/dist/src/components/navigation/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./pagination.cjs");exports.Pagination=e.Pagination,exports.getPaginationItems=e.getPaginationItems;

package/dist/src/components/navigation/index.js

@@ -0,0 +1,2 @@
+import { Pagination as e, getPaginationItems as t } from "./pagination.js";
+export { e as Pagination, t as getPaginationItems };

package/dist/src/components/navigation/pagination.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t){let n=Math.max(t-e+1,0);return Array.from({length:n},(t,n)=>n+e)}function s(e,t,n=1){if(t<=n*2+5)return o(1,t);let r=Math.max(e-n,1),i=Math.min(e+n,t),a=r>2,s=i<t-1;return!a&&s?[...o(1,n*2+3),`ellipsis`,t]:a&&!s?[1,`ellipsis`,...o(t-(n*2+3)+1,t)]:[1,`ellipsis`,...o(r,i),`ellipsis`,t]}function c({className:e,page:r,pageCount:o,onPageChange:c,siblingCount:l=1,showEdges:u=!0,disabled:d=!1,labels:f,compact:p=!1,totalCount:m,pageSize:h,pageSizeOptions:g,onPageSizeChange:_,showSummary:v=!1,...y}){let b=Math.max(o,1),x=Math.min(Math.max(r,1),b),S=s(x,b,l),C=e=>{let t=Math.min(Math.max(e,1),b);t!==x&&c(t)};return(0,a.jsxs)(`nav`,{"data-slot":`pagination`,"aria-label":`Pagination`,className:t.cn(`flex flex-wrap items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur`,e),...y,children:[v&&m!==void 0&&h?(0,a.jsxs)(`div`,{className:`px-2 text-xs text-muted-foreground`,children:[Math.min((x-1)*h+1,m),`-`,Math.min(x*h,m),` of `,m]}):null,u&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x<=1,"aria-label":f?.first??`First page`,onClick:()=>C(1),children:(0,a.jsx)(i.ChevronFirstIcon,{})}),(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x<=1,"aria-label":f?.previous??`Previous page`,onClick:()=>C(x-1),children:(0,a.jsx)(i.ChevronLeftIcon,{})}),S.map((e,r)=>e===`ellipsis`?(0,a.jsxs)(`span`,{"data-slot":`pagination-ellipsis`,className:`flex size-8 items-center justify-center text-muted-foreground`,children:[(0,a.jsx)(i.MoreHorizontalIcon,{className:`size-4`}),(0,a.jsx)(`span`,{className:`sr-only`,children:`More pages`})]},`ellipsis-${r}`):(0,a.jsx)(n.Button,{type:`button`,variant:e===x?`default`:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d,"aria-current":e===x?`page`:void 0,"aria-label":f?.page?.(e)??`Page ${e}`,onClick:()=>C(e),className:t.cn(e!==x&&`border-border/70 bg-background/80 shadow-none`),children:e},e)),(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x>=b,"aria-label":f?.next??`Next page`,onClick:()=>C(x+1),children:(0,a.jsx)(i.ChevronRightIcon,{})}),u&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x>=b,"aria-label":f?.last??`Last page`,onClick:()=>C(b),children:(0,a.jsx)(i.ChevronLastIcon,{})}),g&&h&&_?(0,a.jsxs)(`label`,{className:`ml-1 inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/90 px-3 py-1 text-xs text-muted-foreground`,children:[(0,a.jsx)(`span`,{children:`Rows`}),(0,a.jsx)(`select`,{className:`bg-transparent text-foreground outline-none`,value:h,onChange:e=>_(Number(e.target.value)),disabled:d,children:g.map(e=>(0,a.jsx)(`option`,{value:e,children:e},e))})]}):null]})}exports.Pagination=c,exports.getPaginationItems=s;