@alien-id/ui-kit-react 0.1.1

package/README.md

@@ -0,0 +1,43 @@
+# @alien-id/ui-kit-react
+
+UI components for Alien miniapps.
+
+## Installation
+
+```bash
+bun add @alien-id/ui-kit-react
+# or
+npm install @alien-id/ui-kit-react
+```
+
+Import styles in your app entry:
+
+```tsx
+import "@alien-id/ui-kit-react/styles.css";
+```
+
+## Storybook
+
+Browse all components and their variants in the live Storybook:
+
+**https://main.d1duwphdfo3vec.amplifyapp.com**
+
+To run Storybook locally:
+
+```bash
+npm run storybook
+```
+
+## Components
+
+- **Buttons** — Primary, Secondary, Tertiary, Tinted variants
+- **Input** — Basic text input
+- **FloatingLabelInput** — Input with animated floating label
+- **BottomSheet** — Draggable bottom sheet built on vaul-base
+- **PriceChart** — Interactive area chart with period selection
+
+See the [Storybook](https://main.d1duwphdfo3vec.amplifyapp.com) for live examples, props, and usage.
+
+## Theming
+
+CSS custom properties are used for theming — see `styles/global.css` for available variables.

package/dist/index.cjs

@@ -0,0 +1,443 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let vaul_base = require("vaul-base");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = __toESM(react);
+let _unovis_react = require("@unovis/react");
+let _unovis_ts = require("@unovis/ts");
+
+//#region src/components/bottom-sheet/index.tsx
+const BottomSheetComponent = ({ renderTrigger, children, open, onOpenChange, dismissible }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul_base.Drawer.Root, {
+		open,
+		onOpenChange,
+		dismissible,
+		children: [renderTrigger && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul_base.Drawer.Trigger, { render: renderTrigger }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul_base.Drawer.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul_base.Drawer.Overlay, { className: "alien-bottomsheet-overlay" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul_base.Drawer.Content, {
+			className: "alien-bottomsheet-content",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "alien-bottomsheet-inner",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul_base.Drawer.Handle, { className: "alien-bottomsheet-handle" }), children]
+			})
+		})] })]
+	});
+};
+BottomSheetComponent.displayName = "BottomSheet";
+const Close = vaul_base.Drawer.Close;
+Close.displayName = "BottomSheet.Close";
+const Title = vaul_base.Drawer.Title;
+Title.displayName = "BottomSheet.Title";
+const Description = vaul_base.Drawer.Description;
+Description.displayName = "BottomSheet.Description";
+const BottomSheet = Object.assign(BottomSheetComponent, {
+	Close,
+	Title,
+	Description
+});
+
+//#endregion
+//#region src/components/buttons/button.tsx
+const Button = ({ children, variant = "primary", className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: [
+			"alien-button",
+			`alien-button-${variant}`,
+			className
+		].filter(Boolean).join(" "),
+		...props,
+		children
+	});
+};
+
+//#endregion
+//#region src/components/buttons/index.tsx
+const PrimaryButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	...props,
+	variant: "primary"
+});
+const SecondaryButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	...props,
+	variant: "secondary"
+});
+const TertiaryButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	...props,
+	variant: "tertiary"
+});
+const TintedButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	...props,
+	variant: "tinted"
+});
+
+//#endregion
+//#region src/helpers/cn.ts
+const cn = (...classes) => {
+	return classes.filter(Boolean).join(" ");
+};
+
+//#endregion
+//#region src/components/charts/const.ts
+const DEFAULT_COLOR = "#2979FF";
+const PERIOD_LABELS = {
+	"1H": "Today",
+	"1D": "Today",
+	"1W": "This week",
+	"1M": "This month"
+};
+const PERIOD_TIME_FORMAT = {
+	"1H": {
+		hour: "2-digit",
+		minute: "2-digit"
+	},
+	"1D": {
+		hour: "2-digit",
+		minute: "2-digit"
+	},
+	"1W": {
+		month: "short",
+		day: "numeric"
+	},
+	"1M": {
+		month: "short",
+		day: "numeric"
+	}
+};
+
+//#endregion
+//#region src/components/charts/helpers.ts
+function formatTimestamp(timestamp, period) {
+	if (typeof timestamp === "number") return String(timestamp);
+	const date = new Date(timestamp);
+	if (Number.isNaN(date.getTime())) return String(timestamp);
+	const opts = period ? PERIOD_TIME_FORMAT[period] : void 0;
+	return date.toLocaleString(void 0, opts);
+}
+const defaultFormatValue = (v) => v < .01 && v > 0 ? v.toFixed(6) : v.toFixed(2);
+
+//#endregion
+//#region src/components/charts/index.tsx
+const PriceChart = (0, react.memo)(({ data, height = 200, label, currency, activePeriod: controlledPeriod, periods = [
+	"1H",
+	"1D",
+	"1W",
+	"1M"
+], onPeriodChange, onDataPointClick, formatValue = defaultFormatValue, color = DEFAULT_COLOR, className, showPeriodChange = true }) => {
+	const gradientId = `price-chart-gradient-${(0, react.useId)().replace(/:/g, "")}`;
+	const [internalPeriod, setInternalPeriod] = (0, react.useState)("1D");
+	const activePeriod = controlledPeriod ?? internalPeriod;
+	const lastHoveredDatum = (0, react.useRef)(null);
+	const chartRef = (0, react.useRef)(null);
+	const overlayRef = (0, react.useRef)(null);
+	const dotRef = (0, react.useRef)(null);
+	const crosshairRef = (0, react.useRef)(null);
+	const valueRef = (0, react.useRef)(null);
+	const changeRef = (0, react.useRef)(null);
+	const periodLabelRef = (0, react.useRef)(null);
+	const handlePeriodChange = (0, react.useCallback)((period) => {
+		setInternalPeriod(period);
+		onPeriodChange?.(period);
+	}, [onPeriodChange]);
+	const x = (0, react.useCallback)((_d, i) => i, []);
+	const y = (0, react.useCallback)((d) => d.value, []);
+	const lastPoint = data.length ? data[data.length - 1] : null;
+	const firstValue = data[0]?.value ?? 0;
+	const getDisplayInfo = (0, react.useCallback)((point) => {
+		const displayPoint = point ?? lastPoint;
+		const displayValue = displayPoint ? formatValue(displayPoint.value) : "—";
+		const changePercent = displayPoint && data.length >= 2 && firstValue !== 0 ? (displayPoint.value - firstValue) / firstValue * 100 : 0;
+		return {
+			displayValue,
+			changePercent,
+			isPositive: changePercent >= 0,
+			periodLabel: point ? formatTimestamp(point.timestamp, activePeriod) : PERIOD_LABELS[activePeriod] ?? activePeriod
+		};
+	}, [
+		lastPoint,
+		firstValue,
+		data.length,
+		formatValue,
+		activePeriod
+	]);
+	const updateHeader = (0, react.useCallback)((point) => {
+		const { displayValue, changePercent, isPositive, periodLabel } = getDisplayInfo(point);
+		if (valueRef.current) valueRef.current.textContent = `${displayValue} ${currency || ""}`;
+		if (changeRef.current) {
+			changeRef.current.textContent = `${isPositive ? "+" : ""}${changePercent.toFixed(2)}%`;
+			changeRef.current.className = cn("alien-price-chart-change-text", isPositive ? "alien-price-chart-change-text--positive" : "alien-price-chart-change-text--negative");
+		}
+		if (periodLabelRef.current) periodLabelRef.current.textContent = periodLabel;
+	}, [getDisplayInfo, currency]);
+	const handleMouseMove = (0, react.useCallback)((e) => {
+		const chart = chartRef.current;
+		if (!chart || data.length < 2) return;
+		const rect = chart.getBoundingClientRect();
+		const mouseX = e.clientX - rect.left;
+		const ratio = Math.max(0, Math.min(1, mouseX / rect.width));
+		const idx = Math.round(ratio * (data.length - 1));
+		const datum = data[idx];
+		if (!datum) return;
+		lastHoveredDatum.current = datum;
+		updateHeader(datum);
+		const snappedX = idx / (data.length - 1) * rect.width;
+		const line = crosshairRef.current;
+		if (line) {
+			line.style.left = `${snappedX}px`;
+			line.style.opacity = "1";
+		}
+		const overlay = overlayRef.current;
+		if (overlay) {
+			overlay.style.left = `${snappedX}px`;
+			overlay.style.width = `${rect.width - snappedX}px`;
+			overlay.style.opacity = "1";
+		}
+		const dot = dotRef.current;
+		if (dot) {
+			const maxValue = Math.max(...data.map((d) => d.value));
+			const yPixel = height - (height - 10) * (datum.value / (maxValue || 1));
+			dot.style.left = `${snappedX - 4}px`;
+			dot.style.top = `${yPixel - 4}px`;
+			dot.style.opacity = "1";
+		}
+	}, [
+		data,
+		height,
+		updateHeader
+	]);
+	const handleMouseLeave = (0, react.useCallback)(() => {
+		lastHoveredDatum.current = null;
+		updateHeader(null);
+		const line = crosshairRef.current;
+		if (line) line.style.opacity = "0";
+		const overlay = overlayRef.current;
+		if (overlay) overlay.style.opacity = "0";
+		const dot = dotRef.current;
+		if (dot) dot.style.opacity = "0";
+	}, [updateHeader]);
+	const handleChartClick = (0, react.useCallback)(() => {
+		if (lastHoveredDatum.current && onDataPointClick) onDataPointClick(lastHoveredDatum.current);
+	}, [onDataPointClick]);
+	const handleChartKeyDown = (0, react.useCallback)((e) => {
+		if (e.key === "Enter" || e.key === " ") handleChartClick();
+	}, [handleChartClick]);
+	const initial = getDisplayInfo(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("alien-price-chart", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "alien-price-chart-header",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "alien-price-chart-info",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						ref: valueRef,
+						className: "alien-price-chart-value",
+						children: [
+							initial.displayValue,
+							" ",
+							currency || ""
+						]
+					}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "alien-price-chart-label",
+						children: label
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cn("alien-price-chart-stats", showPeriodChange ? "alien-price-chart-stats--end" : "alien-price-chart-stats--start"),
+					children: [showPeriodChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "alien-price-chart-change",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 20 20",
+							fill: "none",
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								cx: "10",
+								cy: "10",
+								r: "10",
+								fill: initial.isPositive ? color : "#F43F5D",
+								fillOpacity: "0.16"
+							}), initial.isPositive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+								d: "M7 13L13 7M13 7H8M13 7V12",
+								stroke: color,
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+								d: "M7 7L13 13M13 13H8M13 13V8",
+								stroke: "#F43F5D",
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							ref: changeRef,
+							className: cn("alien-price-chart-change-text", initial.isPositive ? "alien-price-chart-change-text--positive" : "alien-price-chart-change-text--negative"),
+							children: [
+								initial.isPositive ? "+" : "",
+								initial.changePercent.toFixed(2),
+								"%"
+							]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						ref: periodLabelRef,
+						className: "alien-price-chart-period-label",
+						children: initial.periodLabel
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				ref: chartRef,
+				className: "alien-price-chart-area",
+				type: "button",
+				tabIndex: 0,
+				onClick: handleChartClick,
+				onKeyDown: handleChartKeyDown,
+				onMouseMove: handleMouseMove,
+				onMouseLeave: handleMouseLeave,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_unovis_react.VisXYContainer, {
+						data,
+						height,
+						padding: {
+							top: 10,
+							bottom: 0,
+							left: 0,
+							right: 0
+						},
+						autoMargin: false,
+						margin: {
+							top: 0,
+							bottom: 0,
+							left: 0,
+							right: 0
+						},
+						svgDefs: `
+            <linearGradient id="${gradientId}" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="${color}" stop-opacity="0.3"/>
+              <stop offset="100%" stop-color="${color}" stop-opacity="0.02"/>
+            </linearGradient>
+          `,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_unovis_react.VisArea, {
+							x,
+							y,
+							color: `url(#${gradientId})`,
+							curveType: _unovis_ts.CurveType.MonotoneX,
+							line: true,
+							lineColor: color,
+							lineWidth: 2.5,
+							opacity: 1
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: crosshairRef,
+						className: "alien-price-chart-crosshair",
+						style: {
+							background: "rgba(141,141,141,0.24)",
+							opacity: 0,
+							transition: "none"
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: overlayRef,
+						className: "alien-price-chart-overlay",
+						style: {
+							background: "rgba(0, 0, 0, 0.45)",
+							opacity: 0,
+							transition: "none"
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: dotRef,
+						className: "alien-price-chart-dot",
+						style: {
+							background: color,
+							opacity: 0,
+							transition: "none"
+						}
+					})
+				]
+			}),
+			periods.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "alien-price-chart-periods",
+				children: periods.map((period) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => handlePeriodChange(period),
+					className: cn("alien-price-chart-period-btn", activePeriod === period && "alien-price-chart-period-btn--active"),
+					children: period
+				}, period))
+			})
+		]
+	});
+});
+PriceChart.displayName = "PriceChart";
+
+//#endregion
+//#region src/components/inputs/floating-label-input.tsx
+function FloatingLabelInput({ id, label, className, disabled, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "alien-floating-wrapper",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "text",
+			id,
+			className: [
+				"alien-floating-input",
+				disabled && "alien-floating-input-disabled",
+				className
+			].filter(Boolean).join(" "),
+			placeholder: " ",
+			disabled,
+			...props
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			htmlFor: id,
+			className: "alien-floating-label",
+			children: label
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/inputs/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type,
+		"data-slot": "input",
+		className: ["alien-input", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+
+//#endregion
+exports.BottomSheet = BottomSheet;
+exports.Button = Button;
+exports.FloatingLabelInput = FloatingLabelInput;
+exports.Input = Input;
+exports.PriceChart = PriceChart;
+exports.PrimaryButton = PrimaryButton;
+exports.SecondaryButton = SecondaryButton;
+exports.TertiaryButton = TertiaryButton;
+exports.TintedButton = TintedButton;