@m3000/market 0.0.1

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Separator } from "@base-ui/react/separator";
+
+//#region src/components/primitives/Separator.d.ts
+type SeparatorVariantsProps = {
+  color?: "default" | "subtle";
+  orientation?: "horizontal" | "vertical";
+};
+type SeparatorOwnProps = SeparatorVariantsProps & {
+  label?: React.ReactNode;
+};
+interface SeparatorProps extends React.ComponentProps<typeof Separator>, SeparatorOwnProps {}
+declare function Separator$1({
+  className,
+  color,
+  orientation,
+  label,
+  ref,
+  ...props
+}: SeparatorProps): React.ReactElement;
+//#endregion
+export { Separator$1 as Separator };

package/dist/components/primitives/Separator.js

@@ -0,0 +1,62 @@
+import { cn } from "../../lib/cn.js";
+import { Text } from "./Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+
+//#region src/components/primitives/Separator.tsx
+const separatorVariants = (props) => {
+	return `${{
+		default: "bg-border",
+		subtle: "bg-separator"
+	}[props.color ?? "default"]} ${{
+		horizontal: "h-px",
+		vertical: "w-px"
+	}[props.orientation ?? "horizontal"]}`;
+};
+function Separator$1({ className, color, orientation, label, ref, ...props }) {
+	const colorClass = color ?? "default";
+	const orientationValue = orientation ?? "horizontal";
+	const lineColorClass = colorClass === "default" ? "bg-border" : "bg-separator";
+	if (label) {
+		if (orientationValue === "vertical") return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-h-0 min-w-px flex-col items-center justify-center gap-2", className),
+			"aria-hidden": true,
+			children: [
+				/* @__PURE__ */ jsx("div", { className: cn("min-h-0 w-px flex-1", lineColorClass) }),
+				/* @__PURE__ */ jsx(Text, {
+					size: "1",
+					color: "secondary",
+					className: "shrink-0",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("div", { className: cn("min-h-0 w-px flex-1", lineColorClass) })
+			]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 items-center gap-3 py-2", className),
+			"aria-hidden": true,
+			children: [
+				/* @__PURE__ */ jsx("div", { className: cn("h-px min-w-0 flex-1", lineColorClass) }),
+				/* @__PURE__ */ jsx(Text, {
+					size: "1",
+					color: "secondary",
+					className: "shrink-0",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("div", { className: cn("h-px min-w-0 flex-1", lineColorClass) })
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
+		className: cn(separatorVariants({
+			color,
+			orientation
+		}), className),
+		orientation,
+		...props
+	});
+}
+
+//#endregion
+export { Separator$1 as Separator };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/primitives/Skeleton.d.ts
+type SkeletonProps = Omit<useRender.ComponentProps<"span">, "color">;
+type SkeletonElement = React.ComponentRef<"span">;
+declare function Skeleton({
+  className,
+  render,
+  ref,
+  ...props
+}: SkeletonProps): React.ReactElement;
+//#endregion
+export { Skeleton, SkeletonElement, SkeletonProps };

package/dist/components/primitives/Skeleton.js

@@ -0,0 +1,20 @@
+import { cn } from "../../lib/cn.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/primitives/Skeleton.tsx
+function Skeleton({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			className: cn("pointer-events-none animate-pulse rounded-xs border-none! bg-muted bg-none! text-transparent! shadow-none! select-none *:invisible empty:block", className),
+			"aria-hidden": true,
+			tabIndex: -1
+		}, props),
+		ref
+	});
+}
+
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { NumberField } from "@base-ui/react/number-field";
+
+//#region src/components/primitives/SteppedInput.d.ts
+type SnapToTickMode = "up" | "down" | "nearest";
+interface RootProps {
+  value: bigint;
+  onChange: (value: bigint) => void;
+  min?: bigint;
+  max?: bigint;
+  getTickSize: (currentValue: bigint) => bigint;
+  decimals?: number;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  snapToTick?: SnapToTickMode | false;
+}
+declare function Root({
+  value,
+  onChange,
+  min,
+  max,
+  getTickSize,
+  decimals,
+  disabled,
+  className,
+  children,
+  snapToTick
+}: RootProps): React.ReactElement;
+interface GroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+declare function Group({
+  children,
+  className
+}: GroupProps): React.ReactElement;
+interface DecrementProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+declare function Decrement({
+  className,
+  children
+}: DecrementProps): React.ReactElement;
+interface IncrementProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+declare function Increment({
+  className,
+  children
+}: IncrementProps): React.ReactElement;
+interface ScrubAreaProps {
+  children: React.ReactNode;
+  className?: string;
+}
+declare function ScrubArea({
+  children,
+  className
+}: ScrubAreaProps): React.ReactElement;
+interface InputProps {
+  className?: string;
+}
+declare function Input({
+  className
+}: InputProps): React.ReactElement;
+interface ValueProps {
+  children: (context: {
+    value: bigint;
+    inputValue: number;
+    step: number;
+    disabled: boolean;
+  }) => React.ReactNode;
+  className?: string;
+}
+declare function Value({
+  children,
+  className
+}: ValueProps): React.ReactElement;
+declare function CursorGrowIcon(props: React.ComponentProps<"svg">): React.ReactElement;
+interface SteppedInputComponent {
+  Root: typeof Root;
+  Group: typeof Group;
+  Decrement: typeof Decrement;
+  Increment: typeof Increment;
+  ScrubArea: typeof ScrubArea;
+  ScrubAreaCursor: typeof NumberField.ScrubAreaCursor;
+  Input: typeof Input;
+  Value: typeof Value;
+}
+declare const SteppedInput: SteppedInputComponent;
+//#endregion
+export { CursorGrowIcon, SteppedInput };

package/dist/components/primitives/SteppedInput.js

@@ -0,0 +1,154 @@
+"use client";
+
+import { cn } from "../../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowsHorizontal } from "@tabler/icons-react";
+import { NumberField } from "@base-ui/react/number-field";
+
+//#region src/components/primitives/SteppedInput.tsx
+const SteppedInputContext = React.createContext(null);
+function useSteppedInput() {
+	const context = React.useContext(SteppedInputContext);
+	if (!context) throw new Error("useSteppedInput must be used within SteppedInput.Root");
+	return context;
+}
+function getScale(decimals) {
+	return 10 ** decimals;
+}
+function toInputValue(value, decimals) {
+	return Number(value) / getScale(decimals);
+}
+function fromInputValue(value, decimals) {
+	return BigInt(Math.round(value * getScale(decimals)));
+}
+function snapValueToTick(value, tickSize, mode, min) {
+	if (tickSize <= 0n) return value;
+	const remainder = value % tickSize;
+	if (remainder === 0n) return value;
+	let snapped;
+	switch (mode) {
+		case "up":
+			snapped = value - remainder + tickSize;
+			break;
+		case "down":
+			snapped = value - remainder;
+			break;
+		case "nearest":
+			snapped = remainder * 2n >= tickSize ? value - remainder + tickSize : value - remainder;
+			break;
+	}
+	if (min !== void 0 && snapped < min) snapped = min;
+	return snapped;
+}
+function Root({ value, onChange, min, max, getTickSize, decimals = 0, disabled = false, className, children, snapToTick = false }) {
+	const inputValue = toInputValue(value, decimals);
+	const step = toInputValue(getTickSize(value), decimals);
+	const handleValueChange = React.useCallback((val) => {
+		if (val === null || val === void 0) return;
+		let newValue = fromInputValue(val, decimals);
+		if (min !== void 0 && newValue < min) newValue = min;
+		if (max !== void 0 && newValue > max) newValue = max;
+		if (snapToTick) {
+			const tickSize = getTickSize(value);
+			newValue = snapValueToTick(newValue, tickSize, snapToTick, min);
+		}
+		onChange(newValue);
+	}, [
+		decimals,
+		snapToTick,
+		getTickSize,
+		min,
+		max,
+		onChange,
+		value
+	]);
+	const contextValue = React.useMemo(() => ({
+		value,
+		inputValue,
+		step,
+		disabled
+	}), [
+		value,
+		inputValue,
+		step,
+		disabled
+	]);
+	return /* @__PURE__ */ jsx(SteppedInputContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(NumberField.Root, {
+			value: inputValue,
+			onValueChange: handleValueChange,
+			min: min !== void 0 ? toInputValue(min, decimals) : -Infinity,
+			max: max !== void 0 ? toInputValue(max, decimals) : Infinity,
+			step,
+			className: cn("w-full", className),
+			disabled,
+			children
+		})
+	});
+}
+function Group({ children, className }) {
+	return /* @__PURE__ */ jsx(NumberField.Group, {
+		className: cn("flex", className),
+		children
+	});
+}
+function Decrement({ className, children }) {
+	return /* @__PURE__ */ jsx(NumberField.Decrement, {
+		className: cn("flex size-10 items-center justify-center rounded-l-md border-y border-l", "border-input bg-muted text-foreground select-none", "hover:bg-accent-hover", "active:bg-accent-active", "disabled:cursor-not-allowed disabled:border-disabled disabled:bg-disabled disabled:text-disabled-foreground", className),
+		children: children ?? "-"
+	});
+}
+function Increment({ className, children }) {
+	return /* @__PURE__ */ jsx(NumberField.Increment, {
+		className: cn("flex size-10 items-center justify-center rounded-r-md border-y border-r", "border-input bg-muted text-foreground select-none", "hover:bg-accent-hover", "active:bg-accent-active", "disabled:cursor-not-allowed disabled:border-disabled disabled:bg-disabled disabled:text-disabled-foreground", className),
+		children: children ?? "+"
+	});
+}
+function ScrubArea({ children, className }) {
+	return /* @__PURE__ */ jsx(NumberField.ScrubArea, {
+		className: cn("relative flex w-full items-center", "disabled:cursor-not-allowed", className),
+		children
+	});
+}
+function Input({ className }) {
+	return /* @__PURE__ */ jsx(NumberField.Input, { className: cn("h-10 w-auto grow border border-input bg-background px-4", "text-center text-sm leading-[21px] text-foreground tabular-nums", "focus:ring-2 focus:ring-ring focus:outline-none focus:ring-inset", "disabled:cursor-not-allowed disabled:border-disabled disabled:text-disabled-foreground", className) });
+}
+function Value({ children, className }) {
+	const { value, inputValue, step, disabled } = useSteppedInput();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex h-10 grow items-center border border-input bg-background", "px-4", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-inset", className),
+		children: [/* @__PURE__ */ jsx(NumberField.Input, {
+			readOnly: true,
+			className: "sr-only"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "w-full text-center text-sm leading-[21px] text-foreground tabular-nums",
+			children: children({
+				value,
+				inputValue,
+				step,
+				disabled
+			})
+		})]
+	});
+}
+function CursorGrowIcon(props) {
+	return /* @__PURE__ */ jsx(IconArrowsHorizontal, {
+		"aria-label": "Drag to adjust",
+		...props
+	});
+}
+const SteppedInput = {
+	Root,
+	Group,
+	Decrement,
+	Increment,
+	ScrubArea,
+	ScrubAreaCursor: NumberField.ScrubAreaCursor,
+	Input,
+	Value
+};
+
+//#endregion
+export { CursorGrowIcon, SteppedInput };

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/primitives/Tabs.d.ts
+type TabsContextType = {
+  layout: "default" | "centered";
+  variant: "default" | "underline" | "segmented";
+};
+interface TabsProps extends React.ComponentProps<typeof Tabs.Root> {
+  layout?: TabsContextType["layout"];
+  variant?: TabsContextType["variant"];
+}
+declare function Tabs$1({
+  className,
+  layout,
+  variant,
+  ...props
+}: TabsProps): React.ReactElement;
+declare function TabsList({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Tabs.List>): React.ReactElement;
+declare function TabsIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Tabs.Indicator>): React.ReactElement;
+declare function Tab({
+  className,
+  ...props
+}: React.ComponentProps<typeof Tabs.Tab>): React.ReactElement;
+declare function TabsPanel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Tabs.Panel>): React.ReactElement;
+//#endregion
+export { Tab, Tabs$1 as Tabs, TabsContextType, TabsIndicator, TabsList, TabsPanel };

package/dist/components/primitives/Tabs.js

@@ -0,0 +1,99 @@
+"use client";
+
+import { cn } from "../../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/primitives/Tabs.tsx
+const TabsLayoutContext = React.createContext({
+	layout: "default",
+	variant: "default"
+});
+function Tabs$1({ className, layout = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(TabsLayoutContext, {
+		value: {
+			layout,
+			variant
+		},
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			className: cn("flex flex-col", className),
+			...props
+		})
+	});
+}
+const tabsListVariants = cva("relative flex", {
+	variants: {
+		layout: {
+			default: "items-center gap-5",
+			centered: "justify-between px-1"
+		},
+		variant: {
+			default: "border-b border-b-border pb-4",
+			underline: "border-b border-b-border pb-4",
+			segmented: "inline-flex items-center gap-1 rounded-lg border border-border bg-muted/30 p-1"
+		}
+	},
+	defaultVariants: {
+		layout: "default",
+		variant: "default"
+	}
+});
+function TabsList({ children, className, ...props }) {
+	const context = React.useContext(TabsLayoutContext);
+	return /* @__PURE__ */ jsxs(Tabs.List, {
+		className: cn(tabsListVariants({
+			layout: context.layout,
+			variant: context.variant
+		}), context.variant === "segmented" && context.layout === "centered" && "justify-start px-1", className),
+		...props,
+		children: [children, context.variant === "underline" ? /* @__PURE__ */ jsx(TabsIndicator, {}) : null]
+	});
+}
+function TabsIndicator({ className, ...props }) {
+	const context = React.useContext(TabsLayoutContext);
+	return /* @__PURE__ */ jsx(Tabs.Indicator, {
+		className: cn("absolute bottom-0 left-0 z-1 h-[3px] w-(--active-tab-width) translate-x-(--active-tab-left) bg-foreground transition-transform duration-200 ease-in-out", {
+			"w-[calc(var(--active-tab-width)+4px)]": context.layout === "centered",
+			"translate-x-[calc(var(--active-tab-left)-4px)]": context.layout === "centered"
+		}, className),
+		...props
+	});
+}
+const tabVariants = cva("relative rounded-xs font-sans text-sm leading-none whitespace-nowrap text-muted-foreground after:pointer-events-auto after:absolute after:z-0 after:rounded-xs after:bg-transparent after:content-[''] hover:text-foreground focus-visible:ring focus-visible:outline-none data-active:text-foreground", {
+	variants: {
+		layout: {
+			default: "after:-inset-x-2.5 after:-inset-y-1.5",
+			centered: "w-full after:inset-x-0 after:-inset-y-1.5"
+		},
+		variant: {
+			default: "",
+			underline: "",
+			segmented: "rounded-md border border-transparent px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors after:hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-active:border-border data-active:bg-background data-active:text-foreground data-active:shadow-[0_1px_2px_0_rgb(0,0,0,0.04)] aria-selected:border-border aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-[0_1px_2px_0_rgb(0,0,0,0.04)]"
+		}
+	},
+	defaultVariants: {
+		layout: "default",
+		variant: "default"
+	}
+});
+function Tab({ className, ...props }) {
+	const context = React.useContext(TabsLayoutContext);
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		className: cn(tabVariants({
+			layout: context.layout,
+			variant: context.variant
+		}), context.variant === "segmented" && context.layout === "centered" && "w-auto", className),
+		...props
+	});
+}
+function TabsPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		className: cn("focus-visible:outline-none", className),
+		...props
+	});
+}
+
+//#endregion
+export { Tab, Tabs$1 as Tabs, TabsIndicator, TabsList, TabsPanel };

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

@@ -0,0 +1,24 @@
+import { TextProps } from "./Text.js";
+import * as React from "react";
+
+//#region src/components/primitives/Tag.d.ts
+type TagVariantsProps = {
+  type?: "informative" | "interactive";
+};
+type BaseTagProps = Omit<TextProps, "render"> & TagVariantsProps;
+type TagInformativeProps = BaseTagProps & {
+  type?: "informative";
+} & Omit<React.ComponentProps<"span">, "color">;
+type TagButtonProps = BaseTagProps & {
+  type: "interactive";
+} & Omit<React.ComponentProps<"button">, "type">;
+type TagProps = TagInformativeProps | TagButtonProps;
+type TagElement = HTMLSpanElement | HTMLButtonElement;
+declare function Tag({
+  className,
+  type,
+  children,
+  ...rest
+}: TagProps): React.ReactElement;
+//#endregion
+export { Tag, TagElement, TagProps };

package/dist/components/primitives/Tag.js

@@ -0,0 +1,22 @@
+import { cn } from "../../lib/cn.js";
+import { Text } from "./Text.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/Tag.tsx
+const tagVariants = (props) => {
+	return `inline-flex rounded-xs border border-solid border-border bg-muted px-1 leading-none ${{
+		informative: "",
+		interactive: "underline hover:bg-accent-hover focus-visible:ring focus-visible:outline-none"
+	}[props.type ?? "informative"]}`;
+};
+function Tag({ className, type = "informative", children, ...rest }) {
+	return /* @__PURE__ */ jsx(Text, {
+		render: type === "interactive" ? /* @__PURE__ */ jsx("button", { type: "button" }) : /* @__PURE__ */ jsx("span", {}),
+		className: cn(tagVariants({ type }), className),
+		...rest,
+		children
+	});
+}
+
+//#endregion
+export { Tag };

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { VariantProps as VariantProps$1 } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/primitives/Text.d.ts
+declare const textVariants: (props?: {
+  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+  weight?: "regular" | "medium" | "semibold";
+  align?: "left" | "center" | "right";
+  color?: "primary" | "secondary" | "tertiary" | "disabled" | "current" | "success" | "error";
+  tabularNums?: true;
+  className?: string;
+}) => string;
+type TextVariants = typeof textVariants;
+interface TextProps extends VariantProps$1<TextVariants>, Omit<useRender.ComponentProps<"span">, "color"> {}
+type TextElement = React.ComponentRef<"span">;
+declare function Text({
+  as,
+  className,
+  align,
+  size,
+  weight,
+  color,
+  tabularNums,
+  render,
+  ref,
+  ...props
+}: TextProps & {
+  as?: React.ElementType;
+}): React.ReactElement;
+//#endregion
+export { Text, TextElement, TextProps, textVariants };

package/dist/components/primitives/Text.js

@@ -0,0 +1,65 @@
+import { cn } from "../../lib/cn.js";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/primitives/Text.tsx
+const textVariants = cva("font-sans", {
+	variants: {
+		size: {
+			"1": "text-xs leading-[18px]",
+			"2": "text-sm leading-[21px]",
+			"3": "text-base leading-6",
+			"4": "text-xl leading-7",
+			"5": "text-2xl leading-8",
+			"6": "text-[28px] leading-9",
+			"7": "text-[32px] leading-10",
+			"8": "text-[36px] leading-[44px]",
+			"9": "text-5xl leading-[56px]"
+		},
+		weight: {
+			regular: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold"
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		color: {
+			primary: "text-foreground",
+			secondary: "text-muted-foreground",
+			tertiary: "text-muted-foreground",
+			disabled: "text-disabled-foreground",
+			current: "text-current",
+			success: "text-success",
+			error: "text-destructive"
+		},
+		tabularNums: { true: "tabular-nums" }
+	},
+	defaultVariants: {
+		size: "2",
+		weight: "regular",
+		color: "primary"
+	}
+});
+function Text({ as, className, align, size, weight, color, tabularNums, render, ref, ...props }) {
+	const defaultProps = { className: cn(textVariants({
+		align,
+		size,
+		weight,
+		color,
+		tabularNums
+	}), className) };
+	return useRender({
+		defaultTagName: "span",
+		render: render ?? (as ? React.createElement(as) : void 0),
+		props: mergeProps(defaultProps, props),
+		ref
+	});
+}
+
+//#endregion
+export { Text, textVariants };

package/dist/components/primitives/countdown/Countdown.d.ts

@@ -0,0 +1,24 @@
+import { UseCountdownResult } from "../../../hooks/useCountdown.js";
+
+//#region src/components/primitives/countdown/Countdown.d.ts
+interface CountdownProps {
+  /** Target date to count down to */
+  to: Date;
+  /** Show full format even when not expired (default: only show when expired) */
+  showWhenExpired?: boolean;
+  /** Stop counting up when countdown reaches zero (default: false - keeps counting up) */
+  stopOnExpired?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Custom renderer - receives full countdown state */
+  children?: (result: UseCountdownResult) => React.ReactNode;
+}
+declare function Countdown({
+  to,
+  showWhenExpired,
+  stopOnExpired,
+  className,
+  children
+}: CountdownProps): React.ReactElement | null;
+//#endregion
+export { Countdown, CountdownProps };