@m3000/market 0.0.1

package/dist/components/primitives/Feedback.js

@@ -0,0 +1,147 @@
+import { cn } from "../../lib/cn.js";
+import * as React from "react";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/components/primitives/Feedback.tsx
+const FeedbackContext = createContext(null);
+function useFeedback() {
+	const context = useContext(FeedbackContext);
+	if (!context) throw new Error("Feedback.Content must be used within Feedback.Root");
+	return context;
+}
+const positionStyles = {
+	bottom: "top-full right-0 left-0",
+	top: "bottom-full right-0 left-0",
+	left: "right-full top-0 bottom-0",
+	right: "left-full top-0 bottom-0"
+};
+const initialAnimations = {
+	bottom: { y: "-100%" },
+	top: { y: "100%" },
+	left: { x: "100%" },
+	right: { x: "-100%" }
+};
+const FeedbackRoot = ({ children, show = false, position = "bottom", className, transition = {
+	stiffness: 300,
+	damping: 20
+} }) => {
+	const contextValue = React.useMemo(() => ({
+		show,
+		position,
+		transition: {
+			stiffness: transition.stiffness ?? 300,
+			damping: transition.damping ?? 20
+		}
+	}), [
+		show,
+		position,
+		transition
+	]);
+	return /* @__PURE__ */ jsx(FeedbackContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("relative inline-block", className),
+			children: React.Children.map(children, (child) => {
+				if (React.isValidElement(child) && child.type === FeedbackContent) return child;
+				return /* @__PURE__ */ jsx("span", {
+					className: "relative z-10",
+					children: child
+				});
+			})
+		})
+	});
+};
+const contentAnimations = {
+	crossfade: {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 }
+	},
+	"slide-up": {
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -8
+		}
+	},
+	"slide-down": {
+		initial: {
+			opacity: 0,
+			y: -8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: 8
+		}
+	}
+};
+function getContentKey(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children);
+	if (React.isValidElement(children)) return children.key ?? JSON.stringify(children.props);
+	return JSON.stringify(children);
+}
+const FeedbackContent = ({ children, className, contentKey, mode = "slide-up" }) => {
+	const { show, position, transition } = useFeedback();
+	const key = contentKey ?? getContentKey(children);
+	const contentAnimation = contentAnimations[mode];
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: show && /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				...initialAnimations[position],
+				opacity: 0,
+				rotateZ: 5
+			},
+			animate: {
+				x: "0%",
+				y: "0%",
+				opacity: 1,
+				rotateZ: 0
+			},
+			exit: {
+				...initialAnimations[position],
+				opacity: 0,
+				rotateZ: 0
+			},
+			className: cn("absolute z-0 flex items-center justify-center", positionStyles[position], className),
+			transition: {
+				type: "spring",
+				stiffness: transition.stiffness,
+				damping: transition.damping
+			},
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				children: /* @__PURE__ */ jsx(motion.span, {
+					initial: contentAnimation.initial,
+					animate: contentAnimation.animate,
+					exit: contentAnimation.exit,
+					transition: {
+						duration: .2,
+						ease: "easeInOut"
+					},
+					children
+				}, key)
+			})
+		}, "feedback-container")
+	});
+};
+const Feedback = {
+	Root: FeedbackRoot,
+	Content: FeedbackContent
+};
+
+//#endregion
+export { Feedback };

package/dist/components/primitives/MorphDialog.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/primitives/MorphDialog.d.ts
+type OpenChangeDetails = Parameters<NonNullable<React.ComponentProps<typeof Dialog.Root>["onOpenChange"]>>[1];
+interface MorphDialogProps {
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+  contentClosesDialog?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeDetails) => void;
+  className?: string;
+  triggerClassName?: string;
+  popupClassName?: string;
+  backdropClassName?: string;
+  modal?: React.ComponentProps<typeof Dialog.Root>["modal"];
+  initialFocus?: React.ComponentProps<typeof Dialog.Popup>["initialFocus"];
+  finalFocus?: React.ComponentProps<typeof Dialog.Popup>["finalFocus"];
+  popupAriaLabel?: string;
+}
+declare function MorphDialog({
+  trigger,
+  content,
+  contentClosesDialog,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className,
+  triggerClassName,
+  popupClassName,
+  backdropClassName,
+  modal,
+  initialFocus,
+  finalFocus,
+  popupAriaLabel
+}: MorphDialogProps): React.ReactElement;
+//#endregion
+export { MorphDialog, MorphDialogProps };

package/dist/components/primitives/MorphDialog.js

@@ -0,0 +1,87 @@
+"use client";
+
+import { cn } from "../../lib/cn.js";
+import { springs, transitions } from "../../lib/motion.js";
+import { useCallback, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, LayoutGroup, motion, useReducedMotion } from "motion/react";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/primitives/MorphDialog.tsx
+function MorphDialog({ trigger, content, contentClosesDialog = false, open, defaultOpen = false, onOpenChange, className, triggerClassName, popupClassName, backdropClassName, modal = true, initialFocus, finalFocus, popupAriaLabel }) {
+	const generatedId = useId();
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const prefersReducedMotion = useReducedMotion();
+	const isControlled = open !== void 0;
+	const isOpen = isControlled ? open : uncontrolledOpen;
+	const layoutId = useMemo(() => `morph-dialog-${generatedId.replace(/:/g, "")}`, [generatedId]);
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (!isControlled) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen, eventDetails);
+	}, [isControlled, onOpenChange]);
+	const handleBackdropClick = useCallback(() => {
+		handleOpenChange(false, {});
+	}, [handleOpenChange]);
+	const handleContentClick = useCallback((event) => {
+		event.stopPropagation();
+	}, []);
+	return /* @__PURE__ */ jsx(LayoutGroup, {
+		id: layoutId,
+		children: /* @__PURE__ */ jsxs(Dialog.Root, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			modal,
+			children: [/* @__PURE__ */ jsx("div", {
+				className,
+				children: /* @__PURE__ */ jsx(Dialog.Trigger, {
+					className: cn("block cursor-pointer appearance-none border-0 bg-transparent p-0 text-left outline-none disabled:cursor-default", triggerClassName),
+					children: /* @__PURE__ */ jsx(motion.div, {
+						layout: !prefersReducedMotion,
+						layoutId: prefersReducedMotion ? void 0 : layoutId,
+						transition: springs.quick,
+						className: "h-full w-full",
+						children: trigger
+					})
+				})
+			}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				className: cn("fixed inset-0 z-60 cursor-pointer backdrop-blur-sm transition-opacity duration-150 ease-out", isOpen ? "opacity-100" : "opacity-0", backdropClassName),
+				onClick: handleBackdropClick
+			}), /* @__PURE__ */ jsx(Dialog.Popup, {
+				"aria-label": popupAriaLabel,
+				initialFocus,
+				finalFocus,
+				className: "fixed inset-0 z-70 flex items-center justify-center p-5 outline-none sm:p-8",
+				onClick: handleBackdropClick,
+				children: /* @__PURE__ */ jsx(AnimatePresence, {
+					initial: false,
+					children: isOpen ? /* @__PURE__ */ jsx(motion.div, {
+						layout: !prefersReducedMotion,
+						layoutId: prefersReducedMotion ? void 0 : layoutId,
+						initial: prefersReducedMotion ? {
+							opacity: 0,
+							scale: .98
+						} : false,
+						animate: {
+							opacity: 1,
+							scale: 1
+						},
+						exit: prefersReducedMotion ? {
+							opacity: 0,
+							scale: .98
+						} : void 0,
+						transition: prefersReducedMotion ? transitions.fade : springs.quick,
+						className: cn("pointer-events-auto max-h-[90vh] max-w-[90vw]", popupClassName),
+						onClick: handleContentClick,
+						children: contentClosesDialog ? /* @__PURE__ */ jsx(Dialog.Close, {
+							className: "block cursor-pointer appearance-none border-0 bg-transparent p-0 text-left outline-none",
+							children: content
+						}) : content
+					}, "morph-dialog-content") : null
+				})
+			})] })]
+		})
+	});
+}
+
+//#endregion
+export { MorphDialog };

package/dist/components/primitives/Price.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+//#region src/components/primitives/Price.d.ts
+type FormatPriceOptions = {
+  /**
+  * Enable K / M / B abbreviation for large values.
+  * @default false
+  */
+  abbreviate?: boolean;
+  /**
+  * Maximum decimal digits to display. Excess precision is ceiled (rounded up)
+  * for safety in price contexts. When `undefined`, full precision is shown
+  * (trailing zeros stripped).
+  */
+  maxDecimals?: number;
+  /**
+  * Minimum decimal digits to display. Pads trailing zeros when needed.
+  */
+  minDecimals?: number;
+};
+/**
+* Format a bigint price value into a human-readable string.
+* All arithmetic stays in bigint to preserve precision.
+*/
+declare function formatPrice(value: bigint | number | string, decimals: number, options?: FormatPriceOptions): string;
+interface PriceProps extends React.ComponentProps<"span"> {
+  /** The raw integer price value. */
+  value: bigint | number | string;
+  /** Number of decimal places for the value. */
+  decimals: number;
+  /** Enable K / M / B abbreviation for large values. */
+  abbreviate?: boolean;
+  /** Max decimal digits to show. Excess is ceiled (rounded up). */
+  maxDecimals?: number;
+  /** Minimum decimal digits to show. Pads trailing zeros when needed. */
+  minDecimals?: number;
+}
+interface PriceValueProps extends React.ComponentProps<"span"> {
+  /**
+  * A BCP 47 locale tag (e.g. `"de-DE"`, `"ja-JP"`) used to localise
+  * decimal and thousands separators. When omitted the raw formatted string
+  * is rendered as-is (dot decimal separator, no grouping).
+  */
+  locale?: string;
+}
+/**
+* Renders the formatted numeric value. Reads config from the parent `<Price>`.
+*/
+declare function PriceValue({
+  locale,
+  className,
+  ...props
+}: PriceValueProps): React.ReactElement;
+interface PriceSymbolProps extends React.ComponentProps<"span"> {}
+/**
+* Renders a currency symbol or label. Just a styled `<span>` — you control
+* placement by ordering it before or after `<Price.Value>`.
+*
+* @example Suffix (default pattern)
+* ```tsx
+* <Price value={1000000n} decimals={6}>
+*   <Price.Value /> <Price.Symbol>USD</Price.Symbol>
+* </Price>
+* ```
+*
+* @example Prefix
+* ```tsx
+* <Price value={12345n} decimals={2}>
+*   <Price.Symbol>$</Price.Symbol><Price.Value />
+* </Price>
+* ```
+*/
+declare function PriceSymbol({
+  children,
+  className,
+  ...props
+}: PriceSymbolProps): React.ReactElement;
+declare const Price: {
+  (props: PriceProps): React.ReactElement;
+  Value: typeof PriceValue;
+  Symbol: typeof PriceSymbol;
+};
+//#endregion
+export { FormatPriceOptions, Price, PriceProps, PriceSymbolProps, PriceValueProps, formatPrice };

package/dist/components/primitives/Price.js

@@ -0,0 +1,255 @@
+import { cn } from "../../lib/cn.js";
+import * as React from "react";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/Price.tsx
+function bigIntPow(base, exp) {
+	let result = 1n;
+	let b = base;
+	let e = exp;
+	while (e > 0) {
+		if (e & 1) result *= b;
+		b *= b;
+		e >>= 1;
+	}
+	return result;
+}
+var BigIntDecimal = class BigIntDecimal {
+	constructor(int, decimals) {
+		this.int = int;
+		this.decimals = decimals;
+	}
+	clone() {
+		return new BigIntDecimal(this.int, this.decimals);
+	}
+	/**
+	* Remove trailing zeros after the decimal point without losing precision.
+	*/
+	optimizeDecimals() {
+		const base = 10n;
+		while (this.decimals > 0 && this.int % base === 0n) {
+			this.decimals--;
+			this.int = this.int / base;
+		}
+	}
+	/**
+	* Round UP (ceil) to `precision` decimal places. If the current number of
+	* decimals is already ≤ precision, only trailing zeros are stripped.
+	*/
+	ceil(precision) {
+		if (precision < 0) throw new Error("decimal precision < 0");
+		if (this.decimals === 0) return;
+		if (this.decimals <= precision) {
+			this.optimizeDecimals();
+			return;
+		}
+		const base = 10n;
+		while (this.decimals > precision) {
+			if (this.int % base > 0n) this.int = this.int + base;
+			this.decimals--;
+			this.int = this.int / base;
+		}
+		this.optimizeDecimals();
+	}
+	/**
+	* Full-precision decimal string, e.g. "1.001" or "0" or "42".
+	*/
+	toString() {
+		const isNegative = this.int < 0n;
+		let full = (isNegative ? -this.int : this.int).toString();
+		if (this.decimals === 0) return `${isNegative ? "-" : ""}${full}`;
+		if (this.decimals >= full.length) full = full.padStart(this.decimals + 1, "0");
+		const decIdx = full.length - this.decimals;
+		return `${isNegative ? "-" : ""}${full.slice(0, decIdx)}.${full.slice(decIdx)}`;
+	}
+	/**
+	* Abbreviate large numbers: 100K, 2.5M, etc.
+	* Values < 1 are not abbreviated but still have maxDecimals applied.
+	*/
+	abbreviate(maxDecimals = 3) {
+		const symbols = [
+			{
+				exponent: 9,
+				symbol: "B"
+			},
+			{
+				exponent: 6,
+				symbol: "M"
+			},
+			{
+				exponent: 3,
+				symbol: "K"
+			}
+		];
+		const base = (this.int < 0n ? -this.int : this.int) / bigIntPow(10n, this.decimals);
+		if (base < 1n) {
+			this.ceil(maxDecimals);
+			return this.toString();
+		}
+		for (const { exponent, symbol } of symbols) if (base >= bigIntPow(10n, exponent)) {
+			this.decimals += exponent;
+			this.ceil(maxDecimals);
+			return this.toString() + symbol;
+		}
+		this.ceil(maxDecimals);
+		return this.toString();
+	}
+};
+function toBigInt(value) {
+	if (typeof value === "bigint") return value;
+	try {
+		return BigInt(value);
+	} catch {
+		return BigInt(0);
+	}
+}
+function padMinimumDecimals(formatted, minDecimals) {
+	if (minDecimals <= 0) return formatted;
+	const suffixMatch = formatted.match(/([KMB])$/);
+	const suffix = suffixMatch ? suffixMatch[1] : "";
+	const [integerPart, fractionPart = ""] = (suffix ? formatted.slice(0, -1) : formatted).split(".");
+	if (fractionPart.length >= minDecimals) return formatted;
+	return `${integerPart}.${fractionPart.padEnd(minDecimals, "0")}${suffix}`;
+}
+/**
+* Format a bigint price value into a human-readable string.
+* All arithmetic stays in bigint to preserve precision.
+*/
+function formatPrice(value, decimals, options) {
+	const num = new BigIntDecimal(toBigInt(value), decimals);
+	num.optimizeDecimals();
+	if (options?.abbreviate) return num.abbreviate(options.maxDecimals ?? 3);
+	if (typeof options?.maxDecimals === "number") num.ceil(options.maxDecimals);
+	const formatted = num.toString();
+	if (typeof options?.minDecimals === "number") return padMinimumDecimals(formatted, options.minDecimals);
+	return formatted;
+}
+const PriceContext = React.createContext(null);
+function usePriceContext() {
+	const ctx = React.useContext(PriceContext);
+	if (!ctx) throw new Error("Price compound components must be used within a <Price> root");
+	return ctx;
+}
+/**
+* Root component. Can be used standalone (renders the formatted number) or
+* with compound children for full control over symbol placement and layout.
+*
+* @example Standalone
+* ```tsx
+* <Price value={500000000000000000n} decimals={18} maxDecimals={4} />
+* ```
+*
+* @example Composed
+* ```tsx
+* <Price value={500000000000000000n} decimals={18} maxDecimals={4}>
+*   <Price.Symbol>USD</Price.Symbol>
+*   <Price.Value />
+* </Price>
+* ```
+*/
+function PriceRoot({ value, decimals, abbreviate = false, maxDecimals, minDecimals, children, className, ...props }) {
+	const ctx = useMemo(() => ({
+		value,
+		decimals,
+		abbreviate,
+		maxDecimals,
+		minDecimals
+	}), [
+		value,
+		decimals,
+		abbreviate,
+		maxDecimals,
+		minDecimals
+	]);
+	const hasChildren = children !== void 0 && children !== null && children !== true && children !== false;
+	return /* @__PURE__ */ jsx(PriceContext, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("tabular-nums", className),
+			...props,
+			children: hasChildren ? children : /* @__PURE__ */ jsx(PriceValue, {})
+		})
+	});
+}
+/**
+* Localise a formatted price string by replacing the decimal separator and
+* inserting thousands separators according to the given locale. Delegates
+* integer grouping to `Intl.NumberFormat` so locale-specific patterns (e.g.
+* Indian lakh grouping) are handled correctly. Works on abbreviated strings
+* like "2.5K" too.
+*/
+function localizeFormatted(formatted, locale) {
+	const suffixMatch = formatted.match(/([KMB])$/);
+	const suffix = suffixMatch ? suffixMatch[1] : "";
+	const [intPart, fracPart] = (suffix ? formatted.slice(0, -1) : formatted).split(".");
+	const isNegative = intPart.startsWith("-");
+	const absInt = isNegative ? intPart.slice(1) : intPart;
+	const intNum = Number(absInt);
+	const intFmt = new Intl.NumberFormat(locale, {
+		useGrouping: true,
+		maximumFractionDigits: 0
+	});
+	const grouped = (isNegative ? "-" : "") + intFmt.format(intNum);
+	if (fracPart === void 0) return grouped + suffix;
+	return `${grouped}${new Intl.NumberFormat(locale).formatToParts(1.1).find((p) => p.type === "decimal")?.value ?? "."}${fracPart}${suffix}`;
+}
+/**
+* Renders the formatted numeric value. Reads config from the parent `<Price>`.
+*/
+function PriceValue({ locale, className, ...props }) {
+	const ctx = usePriceContext();
+	const formatted = useMemo(() => {
+		const raw = formatPrice(ctx.value, ctx.decimals, {
+			abbreviate: ctx.abbreviate,
+			maxDecimals: ctx.maxDecimals,
+			minDecimals: ctx.minDecimals
+		});
+		if (locale) return localizeFormatted(raw, locale);
+		return raw;
+	}, [
+		ctx.value,
+		ctx.decimals,
+		ctx.abbreviate,
+		ctx.maxDecimals,
+		ctx.minDecimals,
+		locale
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		...props,
+		children: formatted
+	});
+}
+/**
+* Renders a currency symbol or label. Just a styled `<span>` — you control
+* placement by ordering it before or after `<Price.Value>`.
+*
+* @example Suffix (default pattern)
+* ```tsx
+* <Price value={1000000n} decimals={6}>
+*   <Price.Value /> <Price.Symbol>USD</Price.Symbol>
+* </Price>
+* ```
+*
+* @example Prefix
+* ```tsx
+* <Price value={12345n} decimals={2}>
+*   <Price.Symbol>$</Price.Symbol><Price.Value />
+* </Price>
+* ```
+*/
+function PriceSymbol({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		...props,
+		children
+	});
+}
+const Price = Object.assign(PriceRoot, {
+	Value: PriceValue,
+	Symbol: PriceSymbol
+});
+
+//#endregion
+export { Price, formatPrice };

package/dist/components/primitives/PriceInput.d.ts

@@ -0,0 +1,33 @@
+import { SteppedInput } from "./SteppedInput.js";
+import * as React from "react";
+
+//#region src/components/primitives/PriceInput.d.ts
+interface PriceInputRootProps {
+  value: bigint;
+  onChange: (value: bigint) => void;
+  min?: bigint;
+  max?: bigint;
+  getTickSize: (currentValue: bigint) => bigint;
+  decimals?: number;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  snapToTick?: "up" | "down" | "nearest" | false;
+}
+declare function Root({
+  decimals,
+  ...props
+}: PriceInputRootProps): React.ReactElement;
+interface PriceInputComponent {
+  Root: typeof Root;
+  Group: typeof SteppedInput.Group;
+  Decrement: typeof SteppedInput.Decrement;
+  Increment: typeof SteppedInput.Increment;
+  ScrubArea: typeof SteppedInput.ScrubArea;
+  ScrubAreaCursor: typeof SteppedInput.ScrubAreaCursor;
+  Input: typeof SteppedInput.Input;
+  Value: typeof SteppedInput.Value;
+}
+declare const PriceInput: PriceInputComponent;
+//#endregion
+export { PriceInput };

package/dist/components/primitives/PriceInput.js

@@ -0,0 +1,25 @@
+"use client";
+
+import { SteppedInput } from "./SteppedInput.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/PriceInput.tsx
+function Root({ decimals = 2, ...props }) {
+	return /* @__PURE__ */ jsx(SteppedInput.Root, {
+		...props,
+		decimals
+	});
+}
+const PriceInput = {
+	Root,
+	Group: SteppedInput.Group,
+	Decrement: SteppedInput.Decrement,
+	Increment: SteppedInput.Increment,
+	ScrubArea: SteppedInput.ScrubArea,
+	ScrubAreaCursor: SteppedInput.ScrubAreaCursor,
+	Input: SteppedInput.Input,
+	Value: SteppedInput.Value
+};
+
+//#endregion
+export { PriceInput };