@nocoo/basalt 2.0.0-rc.1

package/dist/styles/tailwind.css

@@ -0,0 +1,103 @@
+@import "./tokens.css";
+
+@theme inline {
+	--color-basalt-background: hsl(var(--basalt-background));
+	--color-basalt-foreground: hsl(var(--basalt-foreground));
+	--color-basalt-card: hsl(var(--basalt-card));
+	--color-basalt-card-foreground: hsl(var(--basalt-card-foreground));
+	--color-basalt-secondary: hsl(var(--basalt-secondary));
+	--color-basalt-secondary-foreground: hsl(var(--basalt-secondary-foreground));
+	--color-basalt-popover: hsl(var(--basalt-popover));
+	--color-basalt-popover-foreground: hsl(var(--basalt-popover-foreground));
+	--color-basalt-bright: hsl(var(--basalt-bright));
+	--color-basalt-primary: hsl(var(--basalt-primary));
+	--color-basalt-primary-foreground: hsl(var(--basalt-primary-foreground));
+	--color-basalt-muted: hsl(var(--basalt-muted));
+	--color-basalt-muted-foreground: hsl(var(--basalt-muted-foreground));
+	--color-basalt-accent: hsl(var(--basalt-accent));
+	--color-basalt-accent-foreground: hsl(var(--basalt-accent-foreground));
+	--color-basalt-destructive: hsl(var(--basalt-destructive));
+	--color-basalt-destructive-foreground: hsl(var(--basalt-destructive-foreground));
+	--color-basalt-info: hsl(var(--basalt-info));
+	--color-basalt-info-tint: hsl(var(--basalt-info-tint));
+	--color-basalt-warning: hsl(var(--basalt-warning));
+	--color-basalt-warning-tint: hsl(var(--basalt-warning-tint));
+	--color-basalt-danger: hsl(var(--basalt-danger));
+	--color-basalt-danger-tint: hsl(var(--basalt-danger-tint));
+	--color-basalt-border: hsl(var(--basalt-border));
+	--color-basalt-input: hsl(var(--basalt-input));
+	--color-basalt-ring: hsl(var(--basalt-ring));
+	--color-basalt-chart-1: hsl(var(--basalt-chart-1));
+	--color-basalt-chart-2: hsl(var(--basalt-chart-2));
+	--color-basalt-chart-3: hsl(var(--basalt-chart-3));
+	--color-basalt-chart-4: hsl(var(--basalt-chart-4));
+	--color-basalt-chart-5: hsl(var(--basalt-chart-5));
+	--color-basalt-chart-6: hsl(var(--basalt-chart-6));
+	--color-basalt-chart-7: hsl(var(--basalt-chart-7));
+	--color-basalt-chart-8: hsl(var(--basalt-chart-8));
+	--color-basalt-chart-9: hsl(var(--basalt-chart-9));
+	--color-basalt-chart-10: hsl(var(--basalt-chart-10));
+	--color-basalt-chart-11: hsl(var(--basalt-chart-11));
+	--color-basalt-chart-12: hsl(var(--basalt-chart-12));
+	--color-basalt-chart-13: hsl(var(--basalt-chart-13));
+	--color-basalt-chart-14: hsl(var(--basalt-chart-14));
+	--color-basalt-chart-15: hsl(var(--basalt-chart-15));
+	--color-basalt-chart-16: hsl(var(--basalt-chart-16));
+	--color-basalt-chart-17: hsl(var(--basalt-chart-17));
+	--color-basalt-chart-18: hsl(var(--basalt-chart-18));
+	--color-basalt-chart-19: hsl(var(--basalt-chart-19));
+	--color-basalt-chart-20: hsl(var(--basalt-chart-20));
+	--color-basalt-chart-21: hsl(var(--basalt-chart-21));
+	--color-basalt-chart-22: hsl(var(--basalt-chart-22));
+	--color-basalt-chart-23: hsl(var(--basalt-chart-23));
+	--color-basalt-chart-24: hsl(var(--basalt-chart-24));
+	--color-basalt-chart-axis: hsl(var(--basalt-chart-axis));
+	--color-basalt-chart-muted: hsl(var(--basalt-chart-muted));
+	--color-basalt-heatmap-green-1: hsl(var(--basalt-heatmap-green-1));
+	--color-basalt-heatmap-green-2: hsl(var(--basalt-heatmap-green-2));
+	--color-basalt-heatmap-green-3: hsl(var(--basalt-heatmap-green-3));
+	--color-basalt-heatmap-green-4: hsl(var(--basalt-heatmap-green-4));
+	--color-basalt-heatmap-red-1: hsl(var(--basalt-heatmap-red-1));
+	--color-basalt-heatmap-red-2: hsl(var(--basalt-heatmap-red-2));
+	--color-basalt-heatmap-red-3: hsl(var(--basalt-heatmap-red-3));
+	--color-basalt-heatmap-red-4: hsl(var(--basalt-heatmap-red-4));
+	--color-basalt-heatmap-blue-1: hsl(var(--basalt-heatmap-blue-1));
+	--color-basalt-heatmap-blue-2: hsl(var(--basalt-heatmap-blue-2));
+	--color-basalt-heatmap-blue-3: hsl(var(--basalt-heatmap-blue-3));
+	--color-basalt-heatmap-blue-4: hsl(var(--basalt-heatmap-blue-4));
+	--color-basalt-heatmap-orange-1: hsl(var(--basalt-heatmap-orange-1));
+	--color-basalt-heatmap-orange-2: hsl(var(--basalt-heatmap-orange-2));
+	--color-basalt-heatmap-orange-3: hsl(var(--basalt-heatmap-orange-3));
+	--color-basalt-heatmap-orange-4: hsl(var(--basalt-heatmap-orange-4));
+	--radius-basalt-lg: var(--basalt-radius);
+	--radius-basalt-md: calc(var(--basalt-radius) - 2px);
+	--radius-basalt-sm: calc(var(--basalt-radius) - 4px);
+	--radius-basalt-island: var(--basalt-radius-island);
+	--radius-basalt-card: var(--basalt-radius-card);
+	--radius-basalt-widget: var(--basalt-radius-widget);
+	--font-basalt-sans: var(--basalt-font-sans);
+	--font-basalt-display: var(--basalt-font-display);
+	--animate-basalt-accordion-down: basalt-accordion-down 0.2s ease-out;
+	--animate-basalt-accordion-up: basalt-accordion-up 0.2s ease-out;
+	--animate-basalt-spin: basalt-spin 1s linear infinite;
+	--animate-basalt-loader: basalt-loader-spin 1.4s linear infinite;
+	--animate-pulse: basalt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	--animate-basalt-overlay-in: basalt-overlay-in 200ms ease-out;
+	--animate-basalt-overlay-out: basalt-overlay-out 150ms ease-in forwards;
+	--animate-basalt-dialog-in: basalt-dialog-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
+	--animate-basalt-dialog-out: basalt-dialog-out 140ms cubic-bezier(0.4, 0, 1, 1) forwards;
+	--animate-basalt-collapsible-down: basalt-collapsible-down 150ms ease-out;
+	--animate-basalt-collapsible-up: basalt-collapsible-up 100ms ease-in;
+	--animate-basalt-shimmer: basalt-shimmer 1.5s ease-in-out infinite;
+	--animate-basalt-tab-in: basalt-tab-in 180ms ease-out;
+}
+
+.basalt-chart .recharts-wrapper :focus,
+.basalt-chart .recharts-wrapper :focus-visible,
+.basalt-chart .recharts-surface :focus,
+.basalt-chart .recharts-surface :focus-visible,
+.basalt-chart .recharts-sector:focus,
+.basalt-chart .recharts-rectangle:focus,
+.basalt-chart .recharts-layer:focus {
+	outline: none;
+}

package/dist/styles/tokens.css

@@ -0,0 +1,277 @@
+:root,
+.light,
+[data-mode="light"] {
+	--basalt-background: 220 14% 94%;
+	--basalt-foreground: 0 0% 12%;
+	--basalt-card: 220 14% 97%;
+	--basalt-card-foreground: 0 0% 12%;
+	--basalt-secondary: 220 14% 99%;
+	--basalt-secondary-foreground: 0 0% 12%;
+	--basalt-popover: 0 0% 100%;
+	--basalt-popover-foreground: 0 0% 12%;
+	--basalt-bright: 0 0% 100%;
+	--basalt-primary: 217 91% 60%;
+	--basalt-primary-foreground: 0 0% 100%;
+	--basalt-muted: 220 14% 92%;
+	--basalt-muted-foreground: 0 0% 45%;
+	--basalt-accent: 220 14% 92%;
+	--basalt-accent-foreground: 0 0% 12%;
+	--basalt-destructive: 0 72% 51%;
+	--basalt-destructive-foreground: 0 0% 100%;
+	--basalt-info: 221 72% 38%;
+	--basalt-info-tint: 217 80% 95%;
+	--basalt-warning: 28 72% 36%;
+	--basalt-warning-tint: 40 86% 95%;
+	--basalt-danger: 0 70% 40%;
+	--basalt-danger-tint: 0 78% 96%;
+	--basalt-border: 220 13% 88%;
+	--basalt-input: 220 13% 88%;
+	--basalt-ring: 217 91% 60%;
+	--basalt-radius: 0.75rem;
+	--basalt-radius-island: 20px;
+	--basalt-radius-card: 14px;
+	--basalt-radius-widget: 10px;
+	--basalt-font-sans: "Inter", system-ui, -apple-system, sans-serif;
+	--basalt-font-display: "DM Sans", system-ui, sans-serif;
+	--basalt-chart-1: 217 91% 60%;
+	--basalt-chart-2: 200 90% 55%;
+	--basalt-chart-3: 186 80% 45%;
+	--basalt-chart-4: 166 72% 44%;
+	--basalt-chart-5: 142 71% 45%;
+	--basalt-chart-6: 84 65% 46%;
+	--basalt-chart-7: 45 93% 47%;
+	--basalt-chart-8: 30 90% 55%;
+	--basalt-chart-9: 15 85% 52%;
+	--basalt-chart-10: 0 72% 51%;
+	--basalt-chart-11: 340 82% 55%;
+	--basalt-chart-12: 320 70% 55%;
+	--basalt-chart-13: 290 65% 55%;
+	--basalt-chart-14: 270 70% 60%;
+	--basalt-chart-15: 250 65% 58%;
+	--basalt-chart-16: 230 70% 56%;
+	--basalt-chart-17: 210 55% 50%;
+	--basalt-chart-18: 195 45% 55%;
+	--basalt-chart-19: 160 50% 50%;
+	--basalt-chart-20: 100 50% 48%;
+	--basalt-chart-21: 60 65% 45%;
+	--basalt-chart-22: 22 80% 50%;
+	--basalt-chart-23: 350 65% 50%;
+	--basalt-chart-24: 0 0% 25%;
+	--basalt-chart-axis: 0 0% 40%;
+	--basalt-chart-muted: 0 0% 70%;
+	--basalt-heatmap-green-1: 142 50% 85%;
+	--basalt-heatmap-green-2: 142 55% 65%;
+	--basalt-heatmap-green-3: 142 60% 45%;
+	--basalt-heatmap-green-4: 142 65% 30%;
+	--basalt-heatmap-red-1: 0 55% 85%;
+	--basalt-heatmap-red-2: 0 60% 65%;
+	--basalt-heatmap-red-3: 0 65% 48%;
+	--basalt-heatmap-red-4: 0 65% 35%;
+	--basalt-heatmap-blue-1: 217 50% 85%;
+	--basalt-heatmap-blue-2: 217 55% 65%;
+	--basalt-heatmap-blue-3: 217 60% 48%;
+	--basalt-heatmap-blue-4: 217 65% 35%;
+	--basalt-heatmap-orange-1: 30 55% 85%;
+	--basalt-heatmap-orange-2: 30 60% 65%;
+	--basalt-heatmap-orange-3: 30 65% 48%;
+	--basalt-heatmap-orange-4: 30 65% 35%;
+}
+
+.dark,
+[data-mode="dark"] {
+	--basalt-background: 0 0% 9%;
+	--basalt-foreground: 0 0% 93%;
+	--basalt-card: 0 0% 10.6%;
+	--basalt-card-foreground: 0 0% 93%;
+	--basalt-secondary: 0 0% 12.2%;
+	--basalt-secondary-foreground: 0 0% 93%;
+	--basalt-popover: 0 0% 10.6%;
+	--basalt-popover-foreground: 0 0% 93%;
+	--basalt-bright: 0 0% 14%;
+	--basalt-primary: 217 91% 60%;
+	--basalt-primary-foreground: 0 0% 100%;
+	--basalt-muted: 0 0% 12.2%;
+	--basalt-muted-foreground: 0 0% 48%;
+	--basalt-accent: 0 0% 14%;
+	--basalt-accent-foreground: 0 0% 93%;
+	--basalt-destructive: 0 72% 51%;
+	--basalt-destructive-foreground: 0 0% 100%;
+	--basalt-info: 217 80% 72%;
+	--basalt-info-tint: 217 40% 16%;
+	--basalt-warning: 32 80% 68%;
+	--basalt-warning-tint: 32 35% 16%;
+	--basalt-danger: 0 75% 70%;
+	--basalt-danger-tint: 0 40% 16%;
+	--basalt-border: 0 0% 16%;
+	--basalt-input: 0 0% 18%;
+	--basalt-ring: 217 91% 60%;
+	--basalt-chart-1: 217 91% 65%;
+	--basalt-chart-2: 200 90% 60%;
+	--basalt-chart-3: 186 80% 50%;
+	--basalt-chart-4: 166 72% 50%;
+	--basalt-chart-5: 142 71% 50%;
+	--basalt-chart-6: 84 65% 52%;
+	--basalt-chart-7: 45 93% 52%;
+	--basalt-chart-8: 30 90% 60%;
+	--basalt-chart-9: 15 85% 57%;
+	--basalt-chart-10: 0 72% 56%;
+	--basalt-chart-11: 340 82% 60%;
+	--basalt-chart-12: 320 70% 60%;
+	--basalt-chart-13: 290 65% 60%;
+	--basalt-chart-14: 270 70% 65%;
+	--basalt-chart-15: 250 65% 63%;
+	--basalt-chart-16: 230 70% 61%;
+	--basalt-chart-17: 210 55% 56%;
+	--basalt-chart-18: 195 45% 60%;
+	--basalt-chart-19: 160 50% 55%;
+	--basalt-chart-20: 100 50% 53%;
+	--basalt-chart-21: 60 65% 50%;
+	--basalt-chart-22: 22 80% 55%;
+	--basalt-chart-23: 350 65% 55%;
+	--basalt-chart-24: 0 0% 65%;
+	--basalt-chart-axis: 0 0% 50%;
+	--basalt-chart-muted: 0 0% 35%;
+	--basalt-heatmap-green-1: 142 45% 25%;
+	--basalt-heatmap-green-2: 142 50% 35%;
+	--basalt-heatmap-green-3: 142 55% 45%;
+	--basalt-heatmap-green-4: 142 60% 58%;
+	--basalt-heatmap-red-1: 0 45% 25%;
+	--basalt-heatmap-red-2: 0 55% 35%;
+	--basalt-heatmap-red-3: 0 60% 45%;
+	--basalt-heatmap-red-4: 0 65% 55%;
+	--basalt-heatmap-blue-1: 217 45% 25%;
+	--basalt-heatmap-blue-2: 217 50% 35%;
+	--basalt-heatmap-blue-3: 217 55% 45%;
+	--basalt-heatmap-blue-4: 217 60% 55%;
+	--basalt-heatmap-orange-1: 30 45% 25%;
+	--basalt-heatmap-orange-2: 30 55% 35%;
+	--basalt-heatmap-orange-3: 30 60% 45%;
+	--basalt-heatmap-orange-4: 30 65% 55%;
+}
+
+@keyframes basalt-accordion-down {
+	from {
+		height: 0;
+	}
+	to {
+		height: var(--radix-accordion-content-height);
+	}
+}
+
+@keyframes basalt-accordion-up {
+	from {
+		height: var(--radix-accordion-content-height);
+	}
+	to {
+		height: 0;
+	}
+}
+
+@keyframes basalt-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes basalt-loader-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	12% {
+		transform: rotate(18deg);
+	}
+	55% {
+		transform: rotate(300deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes basalt-pulse {
+	50% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes basalt-overlay-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes basalt-overlay-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes basalt-dialog-in {
+	from {
+		opacity: 0;
+		scale: 0.92;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes basalt-dialog-out {
+	from {
+		opacity: 1;
+		scale: 1;
+	}
+	to {
+		opacity: 0;
+		scale: 0.92;
+	}
+}
+
+@keyframes basalt-collapsible-down {
+	from {
+		height: 0;
+		opacity: 0;
+	}
+	to {
+		height: var(--radix-collapsible-content-height);
+		opacity: 1;
+	}
+}
+
+@keyframes basalt-collapsible-up {
+	from {
+		height: var(--radix-collapsible-content-height);
+		opacity: 1;
+	}
+	to {
+		height: 0;
+		opacity: 0;
+	}
+}
+
+@keyframes basalt-shimmer {
+	from {
+		transform: translateX(-100%);
+	}
+	to {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes basalt-tab-in {
+	from {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,11 @@
+"use client";
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region src/utils/cn.ts
+function n(...n) {
+	return t(e(n));
+}
+//#endregion
+export { n as cn };
+
+//# sourceMappingURL=cn.js.map

package/dist/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../src/utils/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":";;;;AAGA,SAAgB,EAAG,GAAG,GAAsB;CAC3C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC5B"}

package/dist/utils/control-surface.d.ts

@@ -0,0 +1,2 @@
+export declare const CONTROL_SURFACE_CLASS = "rounded-basalt-md border border-basalt-border bg-basalt-secondary text-sm";
+export declare function controlSurfaceClass(className?: string): string;

package/dist/utils/control-surface.js

@@ -0,0 +1,11 @@
+"use client";
+import { cn as e } from "./cn.js";
+//#region src/utils/control-surface.ts
+var t = "rounded-basalt-md border border-basalt-border bg-basalt-secondary text-sm";
+function n(n) {
+	return e(t, n);
+}
+//#endregion
+export { t as CONTROL_SURFACE_CLASS, n as controlSurfaceClass };
+
+//# sourceMappingURL=control-surface.js.map

package/dist/utils/control-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-surface.js","names":[],"sources":["../../src/utils/control-surface.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\nexport const CONTROL_SURFACE_CLASS =\n\t\"rounded-basalt-md border border-basalt-border bg-basalt-secondary text-sm\";\n\nexport function controlSurfaceClass(className?: string) {\n\treturn cn(CONTROL_SURFACE_CLASS, className);\n}\n"],"mappings":";;;AAEA,IAAa,IACZ;AAED,SAAgB,EAAoB,GAAoB;CACvD,OAAO,EAAG,GAAuB,CAAS;AAC3C"}

package/dist/utils/selection-indicator.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export declare const SELECTION_INDICATOR_MOTION_CLASS = "transition-[left,width,top,height] duration-200 ease-out";
+export type SelectionGeometry = {
+    left: number;
+    width: number;
+    top: number;
+    height: number;
+};
+export type SelectionIndicatorState = SelectionGeometry & {
+    visible: boolean;
+    animated: boolean;
+};
+export declare function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null): void;
+export declare function measureSelectionItem(item: HTMLElement): SelectionGeometry;
+export declare function useSelectionIndicator({ itemSelector, enabled, mapGeometry, ref, }: {
+    itemSelector: string;
+    enabled?: boolean;
+    mapGeometry?: (item: HTMLElement, root: HTMLElement) => SelectionGeometry;
+    ref?: React.Ref<HTMLElement | null>;
+}): {
+    ref: (node: HTMLElement | null) => void;
+    state: SelectionIndicatorState;
+    motionClassName: string | undefined;
+};

package/dist/utils/selection-indicator.js

@@ -0,0 +1,108 @@
+"use client";
+import * as e from "react";
+//#region src/utils/selection-indicator.ts
+var t = "transition-[left,width,top,height] duration-200 ease-out", n = {
+	left: 0,
+	width: 0,
+	top: 0,
+	height: 0
+};
+function r(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function i(e) {
+	return {
+		left: e.offsetLeft,
+		width: e.offsetWidth,
+		top: e.offsetTop,
+		height: e.offsetHeight
+	};
+}
+function a() {
+	return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function o(e) {
+	let t = [e];
+	for (let n of e.children) n instanceof HTMLElement && n.getAttribute("aria-hidden") !== "true" && t.push(n);
+	return t;
+}
+function s({ itemSelector: s, enabled: c = !0, mapGeometry: l = i, ref: u }) {
+	let d = e.useRef(null), f = e.useMemo(() => (e) => {
+		d.current = e, r(u, e);
+	}, [u]), [p, m] = e.useState({
+		...n,
+		visible: !1,
+		animated: !1
+	}), [h, g] = e.useState(a);
+	e.useEffect(() => {
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => g(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []);
+	let _ = e.useCallback(() => {
+		let e = d.current;
+		if (!e || !c) {
+			m((e) => ({
+				...e,
+				...n,
+				visible: !1,
+				animated: !1
+			}));
+			return;
+		}
+		let t = e.querySelector(s);
+		if (!t) {
+			m((e) => ({
+				...e,
+				width: 0,
+				height: 0,
+				visible: !1,
+				animated: !1
+			}));
+			return;
+		}
+		let r = l(t, e);
+		m((e) => ({
+			...r,
+			visible: !0,
+			animated: e.visible && !h
+		}));
+	}, [
+		c,
+		s,
+		l,
+		h
+	]);
+	return e.useLayoutEffect(() => {
+		let e = d.current;
+		if (!e || !c) return;
+		let t = 0, n = new ResizeObserver(() => {
+			cancelAnimationFrame(t), t = requestAnimationFrame(_);
+		}), r = () => {
+			n.disconnect();
+			for (let t of o(e)) n.observe(t);
+		};
+		r(), _();
+		let i = new MutationObserver(() => {
+			cancelAnimationFrame(t), t = requestAnimationFrame(() => {
+				r(), _();
+			});
+		});
+		return i.observe(e, {
+			attributes: !0,
+			subtree: !0,
+			childList: !0,
+			characterData: !0,
+			attributeFilter: ["data-state"]
+		}), () => {
+			cancelAnimationFrame(t), i.disconnect(), n.disconnect();
+		};
+	}, [c, _]), {
+		ref: f,
+		state: p,
+		motionClassName: p.animated && !h ? t : void 0
+	};
+}
+//#endregion
+export { t as SELECTION_INDICATOR_MOTION_CLASS, r as assignRef, i as measureSelectionItem, s as useSelectionIndicator };
+
+//# sourceMappingURL=selection-indicator.js.map

package/dist/utils/selection-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-indicator.js","names":[],"sources":["../../src/utils/selection-indicator.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport const SELECTION_INDICATOR_MOTION_CLASS =\n\t\"transition-[left,width,top,height] duration-200 ease-out\";\n\nexport type SelectionGeometry = {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n};\n\nexport type SelectionIndicatorState = SelectionGeometry & {\n\tvisible: boolean;\n\tanimated: boolean;\n};\n\nconst EMPTY: SelectionGeometry = { left: 0, width: 0, top: 0, height: 0 };\n\nexport function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n\tif (typeof ref === \"function\") {\n\t\tref(value);\n\t} else if (ref) {\n\t\t(ref as React.MutableRefObject<T | null>).current = value;\n\t}\n}\n\nexport function measureSelectionItem(item: HTMLElement): SelectionGeometry {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop,\n\t\theight: item.offsetHeight,\n\t};\n}\n\nfunction prefersReducedMotion() {\n\treturn (\n\t\ttypeof window !== \"undefined\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n\t);\n}\n\nfunction selectionTargets(root: HTMLElement) {\n\tconst targets: HTMLElement[] = [root];\n\tfor (const node of root.children) {\n\t\tif (node instanceof HTMLElement && node.getAttribute(\"aria-hidden\") !== \"true\") {\n\t\t\ttargets.push(node);\n\t\t}\n\t}\n\treturn targets;\n}\n\nexport function useSelectionIndicator({\n\titemSelector,\n\tenabled = true,\n\tmapGeometry = measureSelectionItem,\n\tref,\n}: {\n\titemSelector: string;\n\tenabled?: boolean;\n\tmapGeometry?: (item: HTMLElement, root: HTMLElement) => SelectionGeometry;\n\tref?: React.Ref<HTMLElement | null>;\n}) {\n\tconst rootRef = React.useRef<HTMLElement | null>(null);\n\tconst composedRef = React.useMemo(() => {\n\t\treturn (node: HTMLElement | null) => {\n\t\t\trootRef.current = node;\n\t\t\tassignRef(ref, node);\n\t\t};\n\t}, [ref]);\n\tconst [state, setState] = React.useState<SelectionIndicatorState>({\n\t\t...EMPTY,\n\t\tvisible: false,\n\t\tanimated: false,\n\t});\n\tconst [reduced, setReduced] = React.useState(prefersReducedMotion);\n\n\tReact.useEffect(() => {\n\t\tconst media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tconst onChange = () => setReduced(media.matches);\n\t\tonChange();\n\t\tmedia.addEventListener(\"change\", onChange);\n\t\treturn () => media.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\tconst sync = React.useCallback(() => {\n\t\tconst root = rootRef.current;\n\t\tif (!root || !enabled) {\n\t\t\tsetState((current) => ({ ...current, ...EMPTY, visible: false, animated: false }));\n\t\t\treturn;\n\t\t}\n\t\tconst item = root.querySelector<HTMLElement>(itemSelector);\n\t\tif (!item) {\n\t\t\tsetState((current) => ({ ...current, width: 0, height: 0, visible: false, animated: false }));\n\t\t\treturn;\n\t\t}\n\t\tconst geometry = mapGeometry(item, root);\n\t\tsetState((current) => ({\n\t\t\t...geometry,\n\t\t\tvisible: true,\n\t\t\tanimated: current.visible && !reduced,\n\t\t}));\n\t}, [enabled, itemSelector, mapGeometry, reduced]);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst root = rootRef.current;\n\t\tif (!root || !enabled) {\n\t\t\treturn;\n\t\t}\n\t\tlet frame = 0;\n\t\tconst ro = new ResizeObserver(() => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tframe = requestAnimationFrame(sync);\n\t\t});\n\t\tconst observe = () => {\n\t\t\tro.disconnect();\n\t\t\tfor (const node of selectionTargets(root)) {\n\t\t\t\tro.observe(node);\n\t\t\t}\n\t\t};\n\t\tobserve();\n\t\tsync();\n\t\tconst mo = new MutationObserver(() => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tframe = requestAnimationFrame(() => {\n\t\t\t\tobserve();\n\t\t\t\tsync();\n\t\t\t});\n\t\t});\n\t\tmo.observe(root, {\n\t\t\tattributes: true,\n\t\t\tsubtree: true,\n\t\t\tchildList: true,\n\t\t\tcharacterData: true,\n\t\t\tattributeFilter: [\"data-state\"],\n\t\t});\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tmo.disconnect();\n\t\t\tro.disconnect();\n\t\t};\n\t}, [enabled, sync]);\n\n\treturn {\n\t\tref: composedRef,\n\t\tstate,\n\t\tmotionClassName: state.animated && !reduced ? SELECTION_INDICATOR_MOTION_CLASS : undefined,\n\t};\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,107 @@
+{
+	"name": "@nocoo/basalt",
+	"version": "2.0.0-rc.1",
+	"type": "module",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/nocoo/basalt.git",
+		"directory": "packages/basalt"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"dist",
+		"README.md",
+		"LICENSE"
+	],
+	"scripts": {
+		"build": "bun run build:css && vite build && tsc -p tsconfig.build.json && bun scripts/rewrite-declarations.ts && bun scripts/verify-dist.ts && bun scripts/root-boundary.ts && node scripts/verify-runtime.mjs",
+		"build:css": "bun ../../scripts/build-basalt-standalone.ts",
+		"pack:check": "bun scripts/verify-pack.ts",
+		"prepublishOnly": "bun run --cwd ../.. package:prepublish",
+		"publint": "publint --strict --pack npm",
+		"types:check": "tsc -p type-tests/tsconfig.bundler.json --noEmit && tsc -p type-tests/tsconfig.nodenext.json --noEmit"
+	},
+	"sideEffects": [
+		"*.css"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./components/*": {
+			"types": "./dist/components/*.d.ts",
+			"import": "./dist/components/*.js"
+		},
+		"./providers/*": {
+			"types": "./dist/providers/*.d.ts",
+			"import": "./dist/providers/*.js"
+		},
+		"./charts/*": {
+			"types": "./dist/charts/*.d.ts",
+			"import": "./dist/charts/*.js"
+		},
+		"./styles": "./dist/styles/tailwind.css",
+		"./styles/tailwind": "./dist/styles/tailwind.css",
+		"./styles/standalone": "./dist/styles/standalone.css"
+	},
+	"dependencies": {
+		"@radix-ui/react-accordion": "1.2.20",
+		"@radix-ui/react-alert-dialog": "1.1.23",
+		"@radix-ui/react-avatar": "1.2.6",
+		"@radix-ui/react-checkbox": "1.3.11",
+		"@radix-ui/react-collapsible": "1.1.20",
+		"@radix-ui/react-context-menu": "2.3.7",
+		"@radix-ui/react-dialog": "1.1.23",
+		"@radix-ui/react-dropdown-menu": "2.1.24",
+		"@radix-ui/react-hover-card": "1.1.23",
+		"@radix-ui/react-label": "2.1.15",
+		"@radix-ui/react-menubar": "1.1.24",
+		"@radix-ui/react-navigation-menu": "1.2.22",
+		"@radix-ui/react-popover": "1.1.23",
+		"@radix-ui/react-progress": "1.1.16",
+		"@radix-ui/react-radio-group": "1.4.7",
+		"@radix-ui/react-scroll-area": "1.2.18",
+		"@radix-ui/react-select": "2.3.7",
+		"@radix-ui/react-separator": "1.1.15",
+		"@radix-ui/react-slider": "1.4.7",
+		"@radix-ui/react-slot": "1.3.3",
+		"@radix-ui/react-switch": "1.3.7",
+		"@radix-ui/react-tabs": "1.1.21",
+		"@radix-ui/react-toast": "1.2.23",
+		"@radix-ui/react-toggle": "1.1.18",
+		"@radix-ui/react-toggle-group": "1.1.19",
+		"@radix-ui/react-tooltip": "1.2.16",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"sonner": "2.0.8",
+		"tailwind-merge": "3.6.0"
+	},
+	"peerDependencies": {
+		"react": "^19",
+		"react-dom": "^19",
+		"lucide-react": "*",
+		"recharts": "^3",
+		"react-day-picker": "^10",
+		"@tanstack/react-table": "^9",
+		"tailwindcss": "^4"
+	},
+	"peerDependenciesMeta": {
+		"tailwindcss": {
+			"optional": true
+		},
+		"recharts": {
+			"optional": true
+		},
+		"react-day-picker": {
+			"optional": true
+		},
+		"@tanstack/react-table": {
+			"optional": true
+		}
+	}
+}