@alien-id/ui-kit-react 0.1.1

package/dist/index.mjs

@@ -0,0 +1,406 @@
+import { Drawer } from "vaul-base";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useRef, useState } from "react";
+import { VisArea, VisXYContainer } from "@unovis/react";
+import { CurveType } from "@unovis/ts";
+
+//#region src/components/bottom-sheet/index.tsx
+const BottomSheetComponent = ({ renderTrigger, children, open, onOpenChange, dismissible }) => {
+	return /* @__PURE__ */ jsxs(Drawer.Root, {
+		open,
+		onOpenChange,
+		dismissible,
+		children: [renderTrigger && /* @__PURE__ */ jsx(Drawer.Trigger, { render: renderTrigger }), /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Overlay, { className: "alien-bottomsheet-overlay" }), /* @__PURE__ */ jsx(Drawer.Content, {
+			className: "alien-bottomsheet-content",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "alien-bottomsheet-inner",
+				children: [/* @__PURE__ */ jsx(Drawer.Handle, { className: "alien-bottomsheet-handle" }), children]
+			})
+		})] })]
+	});
+};
+BottomSheetComponent.displayName = "BottomSheet";
+const Close = Drawer.Close;
+Close.displayName = "BottomSheet.Close";
+const Title = Drawer.Title;
+Title.displayName = "BottomSheet.Title";
+const Description = 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__ */ 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__ */ jsx(Button, {
+	...props,
+	variant: "primary"
+});
+const SecondaryButton = (props) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	variant: "secondary"
+});
+const TertiaryButton = (props) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	variant: "tertiary"
+});
+const TintedButton = (props) => /* @__PURE__ */ 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 = 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-${useId().replace(/:/g, "")}`;
+	const [internalPeriod, setInternalPeriod] = useState("1D");
+	const activePeriod = controlledPeriod ?? internalPeriod;
+	const lastHoveredDatum = useRef(null);
+	const chartRef = useRef(null);
+	const overlayRef = useRef(null);
+	const dotRef = useRef(null);
+	const crosshairRef = useRef(null);
+	const valueRef = useRef(null);
+	const changeRef = useRef(null);
+	const periodLabelRef = useRef(null);
+	const handlePeriodChange = useCallback((period) => {
+		setInternalPeriod(period);
+		onPeriodChange?.(period);
+	}, [onPeriodChange]);
+	const x = useCallback((_d, i) => i, []);
+	const y = useCallback((d) => d.value, []);
+	const lastPoint = data.length ? data[data.length - 1] : null;
+	const firstValue = data[0]?.value ?? 0;
+	const getDisplayInfo = 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 = 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 = 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 = 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 = useCallback(() => {
+		if (lastHoveredDatum.current && onDataPointClick) onDataPointClick(lastHoveredDatum.current);
+	}, [onDataPointClick]);
+	const handleChartKeyDown = useCallback((e) => {
+		if (e.key === "Enter" || e.key === " ") handleChartClick();
+	}, [handleChartClick]);
+	const initial = getDisplayInfo(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("alien-price-chart", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "alien-price-chart-header",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "alien-price-chart-info",
+					children: [/* @__PURE__ */ jsxs("span", {
+						ref: valueRef,
+						className: "alien-price-chart-value",
+						children: [
+							initial.displayValue,
+							" ",
+							currency || ""
+						]
+					}), label && /* @__PURE__ */ jsx("span", {
+						className: "alien-price-chart-label",
+						children: label
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn("alien-price-chart-stats", showPeriodChange ? "alien-price-chart-stats--end" : "alien-price-chart-stats--start"),
+					children: [showPeriodChange && /* @__PURE__ */ jsxs("div", {
+						className: "alien-price-chart-change",
+						children: [/* @__PURE__ */ jsxs("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 20 20",
+							fill: "none",
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ jsx("circle", {
+								cx: "10",
+								cy: "10",
+								r: "10",
+								fill: initial.isPositive ? color : "#F43F5D",
+								fillOpacity: "0.16"
+							}), initial.isPositive ? /* @__PURE__ */ jsx("path", {
+								d: "M7 13L13 7M13 7H8M13 7V12",
+								stroke: color,
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							}) : /* @__PURE__ */ jsx("path", {
+								d: "M7 7L13 13M13 13H8M13 13V8",
+								stroke: "#F43F5D",
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})]
+						}), /* @__PURE__ */ 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__ */ jsx("span", {
+						ref: periodLabelRef,
+						className: "alien-price-chart-period-label",
+						children: initial.periodLabel
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				ref: chartRef,
+				className: "alien-price-chart-area",
+				type: "button",
+				tabIndex: 0,
+				onClick: handleChartClick,
+				onKeyDown: handleChartKeyDown,
+				onMouseMove: handleMouseMove,
+				onMouseLeave: handleMouseLeave,
+				children: [
+					/* @__PURE__ */ jsx(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__ */ jsx(VisArea, {
+							x,
+							y,
+							color: `url(#${gradientId})`,
+							curveType: CurveType.MonotoneX,
+							line: true,
+							lineColor: color,
+							lineWidth: 2.5,
+							opacity: 1
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: crosshairRef,
+						className: "alien-price-chart-crosshair",
+						style: {
+							background: "rgba(141,141,141,0.24)",
+							opacity: 0,
+							transition: "none"
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: overlayRef,
+						className: "alien-price-chart-overlay",
+						style: {
+							background: "rgba(0, 0, 0, 0.45)",
+							opacity: 0,
+							transition: "none"
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: dotRef,
+						className: "alien-price-chart-dot",
+						style: {
+							background: color,
+							opacity: 0,
+							transition: "none"
+						}
+					})
+				]
+			}),
+			periods.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "alien-price-chart-periods",
+				children: periods.map((period) => /* @__PURE__ */ 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__ */ jsxs("div", {
+		className: "alien-floating-wrapper",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			id,
+			className: [
+				"alien-floating-input",
+				disabled && "alien-floating-input-disabled",
+				className
+			].filter(Boolean).join(" "),
+			placeholder: " ",
+			disabled,
+			...props
+		}), /* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			className: "alien-floating-label",
+			children: label
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/inputs/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: ["alien-input", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+
+//#endregion
+export { BottomSheet, Button, FloatingLabelInput, Input, PriceChart, PrimaryButton, SecondaryButton, TertiaryButton, TintedButton };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@alien-id/ui-kit-react",
+  "version": "0.1.1",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alien-id/ui-kit-react.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "prepublishOnly": "bun run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.9",
+    "@types/react": "^19.2.0",
+    "react": "^19.2.4",
+    "tsdown": "^0.20.3",
+    "typescript": "^5",
+    "storybook": "^10.2.16",
+    "@storybook/react-vite": "^10.2.16",
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-vitest": "^10.2.16",
+    "@storybook/addon-a11y": "^10.2.16",
+    "@storybook/addon-docs": "^10.2.16",
+    "@storybook/addon-onboarding": "^10.2.16",
+    "vitest": "^4.0.18",
+    "playwright": "^1.58.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@unovis/react": "^1.6.4",
+    "@unovis/ts": "^1.6.4",
+    "vaul-base": "^1.0.0"
+  }
+}