@jfrader/ui 0.4.0 → 0.5.1

package/dist/use-slider-interaction-ChL-208h.js

@@ -0,0 +1,234 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./use-controlled-state-DpeVQZNR.js";
+import { t as i } from "./renderable-DzcIj1Lo.js";
+import { useEffect as a, useId as o, useMemo as s, useRef as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+//#region src/components/slider/slider-style.ts
+var d = e({
+	display: "grid",
+	gap: u.space[2],
+	minInlineSize: 0,
+	inlineSize: "100%",
+	fontFamily: u.font.sans,
+	fontSize: u.textSize.sm,
+	lineHeight: u.lineHeight.base,
+	color: u.color.text
+}), f = e({
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "space-between",
+	gap: u.space[2],
+	alignItems: "baseline"
+}), p = e({ fontWeight: u.fontWeight.medium }), m = e({
+	fontVariantNumeric: "tabular-nums",
+	overflowWrap: "anywhere"
+}), h = e({ color: u.color.textMuted }), g = e({ color: u.color.dangerText }), _ = e({
+	display: "flex",
+	alignItems: "center",
+	gap: u.space[3],
+	minInlineSize: 0,
+	paddingBlockStart: u.space[8]
+}), v = e({
+	position: "relative",
+	flex: 1,
+	minInlineSize: u.space[8],
+	marginInline: u.space[4],
+	touchAction: "pan-y",
+	userSelect: "none",
+	cursor: "pointer",
+	"&[data-disabled]": { cursor: "default" }
+}), y = {
+	sm: e({ minBlockSize: u.space[8] }),
+	md: e({ minBlockSize: u.space[10] })
+}, b = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: u.space[2]
+}), x = e({
+	minBlockSize: u.space[8],
+	minInlineSize: u.space[8],
+	paddingBlock: u.space[1],
+	paddingInline: u.space[2],
+	font: "inherit",
+	overflowWrap: "anywhere",
+	maxInlineSize: "100%",
+	color: u.color.text,
+	background: u.color.surfaceRaised,
+	border: `1px solid ${u.color.borderControl}`,
+	borderRadius: u.radius.md,
+	cursor: "pointer",
+	"&:focus-visible": t,
+	"&:disabled": { cursor: "default" },
+	[n]: { borderColor: "ButtonText" }
+}), S = 1e-7, C = "data-slider-thumb";
+function w(e, t) {
+	return typeof e == "number" ? e === t : typeof t != "number" && e[0] === t[0] && e[1] === t[1];
+}
+function T(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function E(e) {
+	return i(e) && e !== "";
+}
+function D(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function O(e, t, n) {
+	let r = s(() => new Intl.NumberFormat(e, t), [e, t]);
+	return {
+		formatter: r,
+		format: (e) => n ? n(e, r) : r.format(e)
+	};
+}
+function k(e) {
+	let { component: t, range: n, value: i, defaultValue: s, min: u, max: d, step: f, largeStep: p, minStepsBetweenThumbs: m, disabled: h, onValueChange: g, onValueCommit: _, onPointerSample: v, resolvePointer: y, onGestureEnd: b } = e, x = (d - u) / f;
+	if (![
+		u,
+		d,
+		f,
+		x
+	].every(Number.isFinite) || d <= u || f <= 0 || !Number.isSafeInteger(Math.round(x)) || Math.abs(x - Math.round(x)) > S) throw Error(`${t} requires finite min < max, a positive step, and max aligned to min + n * step.`);
+	if (!Number.isInteger(m) || m < 0 || m > Math.round(x)) throw Error(`${t} minStepsBetweenThumbs must be a nonnegative integer that fits the domain.`);
+	if (p !== void 0 && (!Number.isFinite(p) || p <= 0)) throw Error(`${t} largeStep must be finite and positive.`);
+	let T = m * f, E = Math.max(1, Math.round((p ?? (d - u) / 10) / f)) * f, D = (e) => {
+		if (!Number.isFinite(e)) throw Error(`${t} values must be finite.`);
+		let n = Math.max(0, Math.min(Math.round(x), Math.round((e - u) / f))), r = u + n * f, i = Number(r.toPrecision(15));
+		return Math.abs(i - r) <= f * S ? i : r;
+	}, O = (e) => {
+		if (!n) {
+			if (typeof e != "number") throw Error(`${t} single mode requires a number.`);
+			return D(e);
+		}
+		if (typeof e == "number" || e.length !== 2 || e[0] > e[1]) throw Error(`${t} range requires an ordered [lower, upper] tuple.`);
+		let r = D(e[0]), i = D(e[1]);
+		if ((i - r) / f + S < m) throw Error(`${t} range values must respect minStepsBetweenThumbs.`);
+		return [r, i];
+	}, [k] = l(() => O(s ?? (n ? [u, d] : u))), [A, j, M] = r(i, k, g), N = O(A ?? k), P = typeof N == "number" ? [N] : N, F = o(), I = c(null), L = c(null), R = c(0), [z, B] = l(null), V = (e) => n ? [e === 0 ? u : D(P[0] + T), e === 0 ? D(P[1] - T) : d] : [u, d], H = (e, t) => {
+		let [r, i] = V(e), a = D(Math.max(r, Math.min(i, t)));
+		return n ? e === 0 ? [a, P[1]] : [P[0], a] : a;
+	}, U = (e) => {
+		w(N, e) || j(e);
+	}, W = (e) => {
+		let t = L.current;
+		t && (L.current = null, B(null), b?.(e), t.control.hasPointerCapture(t.pointerId) && t.control.releasePointerCapture(t.pointerId), e && !w(t.initial, t.candidate) && _(t.candidate));
+	};
+	a(() => {
+		h && W(!1);
+	}, [h]), a(() => () => {
+		let e = L.current;
+		L.current = null, e?.control.hasPointerCapture(e.pointerId) && e.control.releasePointerCapture(e.pointerId);
+	}, []), a(() => {
+		let e = I.current?.closest("form");
+		if (!e) return;
+		let t = (e) => {
+			queueMicrotask(() => {
+				e.defaultPrevented || (W(!1), M());
+			});
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [M]);
+	let G = (e) => I.current?.querySelector(`[${C}="${e}"]`)?.focus(), K = () => I.current?.matches(":dir(rtl)") ?? !1, q = (e) => {
+		let t = I.current.getBoundingClientRect(), n = t.width > 0 ? (e - t.left) / t.width : 0;
+		return u + (K() ? 1 - n : n) * (d - u);
+	}, J = (e) => n ? Math.abs(e - P[0]) === Math.abs(e - P[1]) ? R.current : Math.abs(e - P[0]) < Math.abs(e - P[1]) ? 0 : 1 : 0, Y = (e) => {
+		let t = L.current;
+		if (!t || e.pointerId !== t.pointerId || h) return;
+		t.coincident && e.clientX !== t.originX && (t.thumb = e.clientX > t.originX === K() ? 0 : 1, t.coincident = !1, B(t.thumb), G(t.thumb));
+		let [n, r] = V(t.thumb), i = I.current.getBoundingClientRect().width, a = {
+			raw: q(e.clientX - t.offset),
+			low: n,
+			high: r,
+			pxPerUnit: i / (d - u),
+			rtl: K(),
+			pointerType: e.pointerType
+		};
+		v?.(a);
+		let o = H(t.thumb, y ? y(a) : a.raw);
+		w(t.candidate, o) || (t.candidate = o, U(o));
+	}, X = (e) => {
+		if (e.defaultPrevented || h || L.current || !e.isPrimary || e.button !== 0) return;
+		let t = e.target.closest(`[${C}]`), r = t ? Number(t.getAttribute(C)) : J(q(e.clientX)), i = t?.getBoundingClientRect(), a = i ? e.clientX - (i.left + i.width / 2) : 0;
+		L.current = {
+			pointerId: e.pointerId,
+			thumb: r,
+			offset: a,
+			originX: e.clientX,
+			coincident: n && P[0] === P[1],
+			initial: N,
+			candidate: N,
+			control: e.currentTarget
+		}, e.currentTarget.setPointerCapture(e.pointerId), e.preventDefault(), B(r), G(r), t || Y(e);
+	}, Z = (e, t) => {
+		if (h || e.defaultPrevented) return;
+		let n = K() ? -1 : 1, r = e.shiftKey ? E : f, [i, a] = V(t), o = {
+			ArrowRight: P[t] + r * n,
+			ArrowLeft: P[t] - r * n,
+			ArrowUp: P[t] + r,
+			ArrowDown: P[t] - r,
+			PageUp: P[t] + E,
+			PageDown: P[t] - E,
+			Home: i,
+			End: a
+		}[e.key];
+		if (o === void 0) return;
+		e.preventDefault();
+		let s = H(t, o);
+		w(N, s) || (U(s), _(s));
+	};
+	return {
+		id: F,
+		controlRef: I,
+		current: N,
+		values: P,
+		active: z,
+		bounds: V,
+		percent: (e) => (e - u) / (d - u) * 100,
+		normalizeMarks: (e) => Array.from(new Map(e.flatMap((e) => {
+			let t = typeof e == "number" ? { value: e } : e;
+			return Number.isFinite(t.value) && t.value >= u && t.value <= d ? [[D(t.value), {
+				...t,
+				value: D(t.value)
+			}]] : [];
+		})).values()),
+		controlHandlers: (e) => ({
+			ref: (t) => {
+				I.current = t;
+				let n = e?.ref;
+				if (typeof n == "function") return n(t);
+				n && (n.current = t);
+			},
+			onPointerDown: (t) => {
+				e?.onPointerDown?.(t), X(t);
+			},
+			onPointerMove: (t) => {
+				e?.onPointerMove?.(t), t.defaultPrevented || Y(t);
+			},
+			onPointerUp: (t) => {
+				e?.onPointerUp?.(t), L.current?.pointerId === t.pointerId && W(!0);
+			},
+			onPointerCancel: (t) => {
+				e?.onPointerCancel?.(t), L.current?.pointerId === t.pointerId && W(!1);
+			},
+			onLostPointerCapture: (t) => {
+				e?.onLostPointerCapture?.(t), L.current?.pointerId === t.pointerId && W(!1);
+			}
+		}),
+		handleRootKeyDown: (e) => {
+			let t = e.target.closest(`[${C}]`);
+			t && I.current?.contains(t) && Z(e, Number(t.getAttribute(C)));
+		},
+		selectMark: (e) => {
+			if (h) return;
+			let t = H(J(e), e);
+			w(N, t) || (U(t), _(t));
+		},
+		noteFocus: (e) => {
+			R.current = e;
+		}
+	};
+}
+//#endregion
+export { k as a, g as c, x as d, b as f, y as g, _ as h, O as i, f as l, d as m, D as n, v as o, m as p, T as r, h as s, E as t, p as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -34,14 +34,26 @@
       "types": "./dist/types/components/alert/index.d.ts",
       "import": "./dist/alert.js"
     },
+    "./announcement-bar": {
+      "types": "./dist/types/components/announcement-bar/index.d.ts",
+      "import": "./dist/announcement-bar.js"
+    },
     "./avatar": {
       "types": "./dist/types/components/avatar/index.d.ts",
       "import": "./dist/avatar.js"
     },
+    "./avatar-group": {
+      "types": "./dist/types/components/avatar-group/index.d.ts",
+      "import": "./dist/avatar-group.js"
+    },
     "./badge": {
       "types": "./dist/types/components/badge/index.d.ts",
       "import": "./dist/badge.js"
     },
+    "./bottom-sheet": {
+      "types": "./dist/types/components/bottom-sheet/index.d.ts",
+      "import": "./dist/bottom-sheet.js"
+    },
     "./breadcrumbs": {
       "types": "./dist/types/components/breadcrumbs/index.d.ts",
       "import": "./dist/breadcrumbs.js"
@@ -58,10 +70,26 @@
       "types": "./dist/types/components/card/index.d.ts",
       "import": "./dist/card.js"
     },
+    "./carousel": {
+      "types": "./dist/types/components/carousel/index.d.ts",
+      "import": "./dist/carousel.js"
+    },
     "./checkbox": {
       "types": "./dist/types/components/checkbox/index.d.ts",
       "import": "./dist/checkbox.js"
     },
+    "./chip-group": {
+      "types": "./dist/types/components/chip-group/index.d.ts",
+      "import": "./dist/chip-group.js"
+    },
+    "./code-block": {
+      "types": "./dist/types/components/code-block/index.d.ts",
+      "import": "./dist/code-block.js"
+    },
+    "./code-block/shiki": {
+      "types": "./dist/types/components/code-block/shiki.d.ts",
+      "import": "./dist/code-block/shiki.js"
+    },
     "./combobox": {
       "types": "./dist/types/components/combobox/index.d.ts",
       "import": "./dist/combobox.js"
@@ -70,14 +98,34 @@
       "types": "./dist/types/components/command-palette/index.d.ts",
       "import": "./dist/command-palette.js"
     },
+    "./comment-thread": {
+      "types": "./dist/types/components/comment-thread/index.d.ts",
+      "import": "./dist/comment-thread.js"
+    },
     "./container": {
       "types": "./dist/types/components/container/index.d.ts",
       "import": "./dist/container.js"
     },
+    "./context-menu": {
+      "types": "./dist/types/components/context-menu/index.d.ts",
+      "import": "./dist/context-menu.js"
+    },
+    "./copy-button": {
+      "types": "./dist/types/components/copy-button/index.d.ts",
+      "import": "./dist/copy-button.js"
+    },
+    "./countdown": {
+      "types": "./dist/types/components/countdown/index.d.ts",
+      "import": "./dist/countdown.js"
+    },
     "./date-picker": {
       "types": "./dist/types/components/date-picker/index.d.ts",
       "import": "./dist/date-picker.js"
     },
+    "./date-range-picker": {
+      "types": "./dist/types/components/date-range-picker/index.d.ts",
+      "import": "./dist/date-range-picker.js"
+    },
     "./dialog": {
       "types": "./dist/types/components/dialog/index.d.ts",
       "import": "./dist/dialog.js"
@@ -86,18 +134,78 @@
       "types": "./dist/types/components/divider/index.d.ts",
       "import": "./dist/divider.js"
     },
+    "./drawer": {
+      "types": "./dist/types/components/drawer/index.d.ts",
+      "import": "./dist/drawer.js"
+    },
+    "./elastic-slider": {
+      "types": "./dist/types/components/elastic-slider/index.d.ts",
+      "import": "./dist/elastic-slider.js"
+    },
+    "./empty-state": {
+      "types": "./dist/types/components/empty-state/index.d.ts",
+      "import": "./dist/empty-state.js"
+    },
+    "./expandable-card": {
+      "types": "./dist/types/components/expandable-card/index.d.ts",
+      "import": "./dist/expandable-card.js"
+    },
+    "./expanding-search": {
+      "types": "./dist/types/components/expanding-search/index.d.ts",
+      "import": "./dist/expanding-search.js"
+    },
+    "./file-dropzone": {
+      "types": "./dist/types/components/file-dropzone/index.d.ts",
+      "import": "./dist/file-dropzone.js"
+    },
+    "./filter-toolbar": {
+      "types": "./dist/types/components/filter-toolbar/index.d.ts",
+      "import": "./dist/filter-toolbar.js"
+    },
     "./flex": {
       "types": "./dist/types/components/flex/index.d.ts",
       "import": "./dist/flex.js"
     },
+    "./hold-to-confirm": {
+      "types": "./dist/types/components/hold-to-confirm/index.d.ts",
+      "import": "./dist/hold-to-confirm.js"
+    },
+    "./image-compare": {
+      "types": "./dist/types/components/image-compare/index.d.ts",
+      "import": "./dist/image-compare.js"
+    },
+    "./inline-edit": {
+      "types": "./dist/types/components/inline-edit/index.d.ts",
+      "import": "./dist/inline-edit.js"
+    },
+    "./hover-card": {
+      "types": "./dist/types/components/hover-card/index.d.ts",
+      "import": "./dist/hover-card.js"
+    },
+    "./json-viewer": {
+      "types": "./dist/types/components/json-viewer/index.d.ts",
+      "import": "./dist/json-viewer.js"
+    },
     "./kbd": {
       "types": "./dist/types/components/kbd/index.d.ts",
       "import": "./dist/kbd.js"
     },
+    "./mention-input": {
+      "types": "./dist/types/components/mention-input/index.d.ts",
+      "import": "./dist/mention-input.js"
+    },
     "./menu": {
       "types": "./dist/types/components/menu/index.d.ts",
       "import": "./dist/menu.js"
     },
+    "./metric-card": {
+      "types": "./dist/types/components/metric-card/index.d.ts",
+      "import": "./dist/metric-card.js"
+    },
+    "./multi-select": {
+      "types": "./dist/types/components/multi-select/index.d.ts",
+      "import": "./dist/multi-select.js"
+    },
     "./navigation": {
       "types": "./dist/types/components/navigation/index.d.ts",
       "import": "./dist/navigation.js"
@@ -106,6 +214,10 @@
       "types": "./dist/types/components/pagination/index.d.ts",
       "import": "./dist/pagination.js"
     },
+    "./password-field": {
+      "types": "./dist/types/components/password-field/index.d.ts",
+      "import": "./dist/password-field.js"
+    },
     "./pill": {
       "types": "./dist/types/components/pill/index.d.ts",
       "import": "./dist/pill.js"
@@ -118,26 +230,70 @@
       "types": "./dist/types/components/progress/index.d.ts",
       "import": "./dist/progress.js"
     },
+    "./radio-cards": {
+      "types": "./dist/types/components/radio-cards/index.d.ts",
+      "import": "./dist/radio-cards.js"
+    },
     "./radio-group": {
       "types": "./dist/types/components/radio-group/index.d.ts",
       "import": "./dist/radio-group.js"
     },
+    "./resizable-panels": {
+      "types": "./dist/types/components/resizable-panels/index.d.ts",
+      "import": "./dist/resizable-panels.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/types/components/scroll-area/index.d.ts",
+      "import": "./dist/scroll-area.js"
+    },
+    "./search-field": {
+      "types": "./dist/types/components/search-field/index.d.ts",
+      "import": "./dist/search-field.js"
+    },
+    "./segmented-control": {
+      "types": "./dist/types/components/segmented-control/index.d.ts",
+      "import": "./dist/segmented-control.js"
+    },
     "./select": {
       "types": "./dist/types/components/select/index.d.ts",
       "import": "./dist/select.js"
     },
+    "./signature-pad": {
+      "types": "./dist/types/components/signature-pad/index.d.ts",
+      "import": "./dist/signature-pad.js"
+    },
     "./skeleton": {
       "types": "./dist/types/components/skeleton/index.d.ts",
       "import": "./dist/skeleton.js"
     },
+    "./slider": {
+      "types": "./dist/types/components/slider/index.d.ts",
+      "import": "./dist/slider.js"
+    },
+    "./sortable-data-table": {
+      "types": "./dist/types/components/sortable-data-table/index.d.ts",
+      "import": "./dist/sortable-data-table.js"
+    },
     "./spinner": {
       "types": "./dist/types/components/spinner/index.d.ts",
       "import": "./dist/spinner.js"
     },
+    "./split-button": {
+      "types": "./dist/types/components/split-button/index.d.ts",
+      "import": "./dist/split-button.js"
+    },
     "./stack": {
       "types": "./dist/types/components/stack/index.d.ts",
       "import": "./dist/stack.js"
     },
+    "./stepper": {
+      "types": "./dist/types/components/stepper/index.d.ts",
+      "import": "./dist/stepper.js"
+    },
+    "./swipe-actions": {
+      "types": "./dist/types/components/swipe-actions/index.d.ts",
+      "import": "./dist/swipe-actions.js"
+    },
     "./switch": {
       "types": "./dist/types/components/switch/index.d.ts",
       "import": "./dist/switch.js"
@@ -146,6 +302,10 @@
       "types": "./dist/types/components/tabs/index.d.ts",
       "import": "./dist/tabs.js"
     },
+    "./tag-input": {
+      "types": "./dist/types/components/tag-input/index.d.ts",
+      "import": "./dist/tag-input.js"
+    },
     "./text-field": {
       "types": "./dist/types/components/text-field/index.d.ts",
       "import": "./dist/text-field.js"
@@ -158,10 +318,26 @@
       "types": "./dist/types/components/theme-root/index.d.ts",
       "import": "./dist/theme-root.js"
     },
+    "./theme-switch": {
+      "types": "./dist/types/components/theme-switch/index.d.ts",
+      "import": "./dist/theme-switch.js"
+    },
+    "./time-picker": {
+      "types": "./dist/types/components/time-picker/index.d.ts",
+      "import": "./dist/time-picker.js"
+    },
+    "./timeline": {
+      "types": "./dist/types/components/timeline/index.d.ts",
+      "import": "./dist/timeline.js"
+    },
     "./toast": {
       "types": "./dist/types/components/toast/index.d.ts",
       "import": "./dist/toast.js"
     },
+    "./toast-stack": {
+      "types": "./dist/types/components/toast-stack/index.d.ts",
+      "import": "./dist/toast-stack.js"
+    },
     "./toggle-group": {
       "types": "./dist/types/components/toggle-group/index.d.ts",
       "import": "./dist/toggle-group.js"
@@ -169,6 +345,14 @@
     "./tooltip": {
       "types": "./dist/types/components/tooltip/index.d.ts",
       "import": "./dist/tooltip.js"
+    },
+    "./tree-view": {
+      "types": "./dist/types/components/tree-view/index.d.ts",
+      "import": "./dist/tree-view.js"
+    },
+    "./usage-meter": {
+      "types": "./dist/types/components/usage-meter/index.d.ts",
+      "import": "./dist/usage-meter.js"
     }
   },
   "publishConfig": {
@@ -178,11 +362,18 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
-    "@jfrader/tokens": "0.4.0"
+    "motion": "^14.1.0",
+    "@jfrader/tokens": "0.5.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "shiki": "^4.4.3"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.1",
@@ -191,6 +382,7 @@
     "@vitejs/plugin-react": "^6.1.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
+    "shiki": "^4.4.3",
     "storybook": "^10.6.1",
     "typescript": "^7.0.2",
     "vite": "^8.3.4"