@m3000/market 0.0.1 → 0.0.2

package/src/components/primitives/Scale.tsx

@@ -1,287 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-// ─── Types ──────────────────────────────────────────────────────────────────
-
-type ScaleValue = number | bigint;
-type SnapMode = "up" | "down" | "nearest";
-
-interface ScaleContextValue<T extends ScaleValue> {
-  domain: [T, T];
-  getTickSize: (value: T) => T;
-  snapMode: SnapMode | false;
-  getValueAtPosition: (position: number) => T;
-}
-
-interface TickContext<T extends ScaleValue> {
-  /** The position on the scale (0-1) */
-  position: number;
-  /** The calculated value at this position (snapped to tick grid) */
-  value: T;
-}
-
-// ─── Context ────────────────────────────────────────────────────────────────
-
-// We use `unknown` for the context and cast at usage sites to support generics
-// This is a common pattern when React Context needs to work with generic types
-interface ScaleContextValueInternal {
-  domain: [ScaleValue, ScaleValue];
-  getTickSize: (value: ScaleValue) => ScaleValue;
-  snapMode: SnapMode | false;
-  getValueAtPosition: (position: number) => ScaleValue;
-}
-
-const ScaleContext = React.createContext<ScaleContextValueInternal | null>(
-  null,
-);
-
-function useScale<T extends ScaleValue>(): ScaleContextValue<T> {
-  const context = React.useContext(ScaleContext);
-  if (!context) {
-    throw new Error("useScale must be used within Scale.Linear");
-  }
-  // Cast is safe because we know the provider was created with the correct type
-  return context as unknown as ScaleContextValue<T>;
-}
-
-// ─── Utilities ──────────────────────────────────────────────────────────────
-
-/**
- * Type guard to check if a value is bigint
- */
-function isBigInt(value: ScaleValue): value is bigint {
-  return typeof value === "bigint";
-}
-
-/**
- * Linearly interpolate between min and max based on position (0-1).
- * Works with both number and bigint.
- */
-function interpolate<T extends ScaleValue>(
-  min: T,
-  max: T,
-  position: number,
-): T {
-  // Clamp position to [0, 1]
-  const clampedPosition = Math.max(0, Math.min(1, position));
-
-  if (isBigInt(min) && isBigInt(max)) {
-    const range = max - min;
-    // Use high precision for bigint calculation
-    const scaledPosition = BigInt(Math.round(clampedPosition * 1_000_000));
-    return (min + (range * scaledPosition) / 1_000_000n) as T;
-  }
-
-  // Number math
-  const numMin = min as number;
-  const numMax = max as number;
-  return (numMin + (numMax - numMin) * clampedPosition) as T;
-}
-
-/**
- * Snaps a value to the tick grid based on the specified mode.
- * Works with both number and bigint.
- */
-function snapToTick<T extends ScaleValue>(
-  value: T,
-  tickSize: T,
-  mode: SnapMode,
-  min?: T,
-): T {
-  if (isBigInt(value) && isBigInt(tickSize)) {
-    if (tickSize <= 0n) return value;
-
-    const remainder = value % tickSize;
-    if (remainder === 0n) return value;
-
-    let snapped: bigint;
-    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;
-    }
-
-    // Ensure we don't snap below minimum
-    if (min !== undefined && isBigInt(min) && snapped < min) {
-      snapped = min;
-    }
-
-    return snapped as T;
-  }
-
-  // Number math
-  const numValue = value as number;
-  const numTickSize = tickSize as number;
-  const numMin = min as number | undefined;
-
-  if (numTickSize <= 0) return value;
-
-  const remainder = numValue % numTickSize;
-  if (Math.abs(remainder) < Number.EPSILON) return value;
-
-  let snapped: number;
-  switch (mode) {
-    case "up":
-      snapped = numValue - remainder + numTickSize;
-      break;
-    case "down":
-      snapped = numValue - remainder;
-      break;
-    case "nearest":
-      snapped =
-        remainder * 2 >= numTickSize
-          ? numValue - remainder + numTickSize
-          : numValue - remainder;
-      break;
-  }
-
-  // Ensure we don't snap below minimum
-  if (numMin !== undefined && snapped < numMin) {
-    snapped = numMin;
-  }
-
-  return snapped as T;
-}
-
-// ─── Linear Component ───────────────────────────────────────────────────────
-
-interface LinearProps<T extends ScaleValue> {
-  /** Domain tuple: [min, max] */
-  domain: [T, T];
-  /** Function to get tick size at a given value */
-  getTickSize: (value: T) => T;
-  /** How to snap values to the tick grid (default: 'nearest', false to disable) */
-  snapMode?: SnapMode | false;
-  children: React.ReactNode;
-  className?: string;
-}
-
-function Linear<T extends ScaleValue>({
-  domain,
-  getTickSize,
-  snapMode = "nearest",
-  children,
-  className,
-}: LinearProps<T>): React.ReactElement {
-  const [min, max] = domain;
-
-  const getValueAtPosition = React.useCallback(
-    (position: number): T => {
-      const rawValue = interpolate(min, max, position);
-
-      if (snapMode === false) {
-        return rawValue;
-      }
-
-      const tickSize = getTickSize(rawValue);
-      return snapToTick(rawValue, tickSize, snapMode, min);
-    },
-    [min, max, getTickSize, snapMode],
-  );
-
-  const contextValue = React.useMemo(
-    (): ScaleContextValue<T> => ({
-      domain,
-      getTickSize,
-      snapMode,
-      getValueAtPosition,
-    }),
-    [domain, getTickSize, snapMode, getValueAtPosition],
-  );
-
-  return (
-    <ScaleContext.Provider
-      value={contextValue as unknown as ScaleContextValueInternal}
-    >
-      <div className={className}>{children}</div>
-    </ScaleContext.Provider>
-  );
-}
-
-// ─── Tick Component ─────────────────────────────────────────────────────────
-
-interface TickProps<T extends ScaleValue> {
-  /** Position on the scale (0 = min, 1 = max) */
-  position: number;
-  /** Render function receiving the tick context */
-  children: (context: TickContext<T>) => React.ReactNode;
-  className?: string;
-}
-
-function Tick<T extends ScaleValue>({
-  position,
-  children,
-  className,
-}: TickProps<T>): React.ReactElement {
-  const { getValueAtPosition } = useScale<T>();
-
-  const value = React.useMemo(
-    () => getValueAtPosition(position),
-    [getValueAtPosition, position],
-  );
-
-  const context: TickContext<T> = {
-    position,
-    value,
-  };
-
-  return <div className={className}>{children(context)}</div>;
-}
-
-// ─── Ticks Component (helper for evenly-spaced ticks) ───────────────────────
-
-interface TicksProps<T extends ScaleValue> {
-  /** Number of ticks to generate (evenly spaced from 0 to 1) */
-  count: number;
-  /** Render function for each tick */
-  children: (context: TickContext<T>, index: number) => React.ReactNode;
-  className?: string;
-}
-
-function Ticks<T extends ScaleValue>({
-  count,
-  children,
-  className,
-}: TicksProps<T>): React.ReactElement {
-  const positions = React.useMemo(() => {
-    if (count <= 1) return [0];
-    return Array.from({ length: count }, (_, i) => i / (count - 1));
-  }, [count]);
-
-  return (
-    <>
-      {positions.map((position, index) => (
-        <Tick<T> key={position} position={position} className={className}>
-          {(context) => children(context, index)}
-        </Tick>
-      ))}
-    </>
-  );
-}
-
-// ─── Export ─────────────────────────────────────────────────────────────────
-
-interface ScaleComponent {
-  Linear: typeof Linear;
-  Tick: typeof Tick;
-  Ticks: typeof Ticks;
-}
-
-const Scale: ScaleComponent = {
-  Linear,
-  Tick,
-  Ticks,
-};
-
-export { Scale, useScale };
-export type { TickContext as ScaleTickContext, SnapMode, ScaleValue };

package/src/components/primitives/Separator.tsx

@@ -1,87 +0,0 @@
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
-import type * as React from "react";
-import { cn } from "@/lib/cn";
-import { Text } from "./Text";
-
-type SeparatorVariantsProps = {
-  color?: "default" | "subtle";
-  orientation?: "horizontal" | "vertical";
-};
-
-const separatorVariants = (props: SeparatorVariantsProps) => {
-  const colorClasses = {
-    default: "bg-border",
-    subtle: "bg-separator",
-  };
-  const orientationClasses = {
-    horizontal: "h-px",
-    vertical: "w-px",
-  };
-  return `${colorClasses[props.color ?? "default"]} ${orientationClasses[props.orientation ?? "horizontal"]}`;
-};
-
-type SeparatorOwnProps = SeparatorVariantsProps & {
-  label?: React.ReactNode;
-};
-
-interface SeparatorProps
-  extends React.ComponentProps<typeof SeparatorPrimitive>,
-    SeparatorOwnProps {}
-
-function Separator({
-  className,
-  color,
-  orientation,
-  label,
-  ref,
-  ...props
-}: SeparatorProps): React.ReactElement {
-  const colorClass = color ?? "default";
-  const orientationValue = orientation ?? "horizontal";
-  const lineColorClass =
-    colorClass === "default" ? "bg-border" : "bg-separator";
-
-  if (label) {
-    if (orientationValue === "vertical") {
-      return (
-        <div
-          className={cn(
-            "flex min-h-0 min-w-px flex-col items-center justify-center gap-2",
-            className,
-          )}
-          aria-hidden
-        >
-          <div className={cn("min-h-0 w-px flex-1", lineColorClass)} />
-          <Text size="1" color="secondary" className="shrink-0">
-            {label}
-          </Text>
-          <div className={cn("min-h-0 w-px flex-1", lineColorClass)} />
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={cn("flex min-w-0 items-center gap-3 py-2", className)}
-        aria-hidden
-      >
-        <div className={cn("h-px min-w-0 flex-1", lineColorClass)} />
-        <Text size="1" color="secondary" className="shrink-0">
-          {label}
-        </Text>
-        <div className={cn("h-px min-w-0 flex-1", lineColorClass)} />
-      </div>
-    );
-  }
-
-  return (
-    <SeparatorPrimitive
-      ref={ref}
-      className={cn(separatorVariants({ color, orientation }), className)}
-      orientation={orientation}
-      {...props}
-    />
-  );
-}
-
-export { Separator };

package/src/components/primitives/Skeleton.tsx

@@ -1,33 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import type * as React from "react";
-import { cn } from "@/lib/cn";
-
-export type SkeletonProps = Omit<useRender.ComponentProps<"span">, "color">;
-
-export type SkeletonElement = React.ComponentRef<"span">;
-
-export function Skeleton({
-  className,
-  render,
-  ref,
-  ...props
-}: SkeletonProps): React.ReactElement {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    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,
-  };
-
-  const element = useRender({
-    defaultTagName: "span",
-    render,
-    props: mergeProps<"span">(defaultProps, props),
-    ref: ref,
-  });
-
-  return element;
-}

package/src/components/primitives/SteppedInput.tsx

@@ -1,313 +0,0 @@
-"use client";
-
-import { NumberField } from "@base-ui/react/number-field";
-import { IconArrowsHorizontal } from "@tabler/icons-react";
-import * as React from "react";
-import { cn } from "@/lib";
-
-interface SteppedInputContextValue {
-  value: bigint;
-  inputValue: number;
-  step: number;
-  disabled: boolean;
-}
-
-const SteppedInputContext =
-  React.createContext<SteppedInputContextValue | null>(null);
-
-function useSteppedInput(): SteppedInputContextValue {
-  const context = React.useContext(SteppedInputContext);
-  if (!context) {
-    throw new Error("useSteppedInput must be used within SteppedInput.Root");
-  }
-  return context;
-}
-
-type SnapToTickMode = "up" | "down" | "nearest";
-
-function getScale(decimals: number): number {
-  return 10 ** decimals;
-}
-
-function toInputValue(value: bigint, decimals: number): number {
-  return Number(value) / getScale(decimals);
-}
-
-function fromInputValue(value: number, decimals: number): bigint {
-  return BigInt(Math.round(value * getScale(decimals)));
-}
-
-function snapValueToTick(
-  value: bigint,
-  tickSize: bigint,
-  mode: SnapToTickMode,
-  min?: bigint,
-): bigint {
-  if (tickSize <= 0n) return value;
-
-  const remainder = value % tickSize;
-  if (remainder === 0n) return value;
-
-  let snapped: bigint;
-  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 !== undefined && snapped < min) {
-    snapped = min;
-  }
-
-  return snapped;
-}
-
-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;
-}
-
-function Root({
-  value,
-  onChange,
-  min,
-  max,
-  getTickSize,
-  decimals = 0,
-  disabled = false,
-  className,
-  children,
-  snapToTick = false,
-}: RootProps): React.ReactElement {
-  const inputValue = toInputValue(value, decimals);
-  const step = toInputValue(getTickSize(value), decimals);
-
-  const handleValueChange = React.useCallback(
-    (val: number | null) => {
-      if (val === null || val === undefined) return;
-
-      let newValue = fromInputValue(val, decimals);
-
-      if (min !== undefined && newValue < min) {
-        newValue = min;
-      }
-
-      if (max !== undefined && 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: SteppedInputContextValue = React.useMemo(
-    () => ({
-      value,
-      inputValue,
-      step,
-      disabled,
-    }),
-    [value, inputValue, step, disabled],
-  );
-
-  return (
-    <SteppedInputContext.Provider value={contextValue}>
-      <NumberField.Root
-        value={inputValue}
-        onValueChange={handleValueChange}
-        min={min !== undefined ? toInputValue(min, decimals) : -Infinity}
-        max={max !== undefined ? toInputValue(max, decimals) : Infinity}
-        step={step}
-        className={cn("w-full", className)}
-        disabled={disabled}
-      >
-        {children}
-      </NumberField.Root>
-    </SteppedInputContext.Provider>
-  );
-}
-
-interface GroupProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-function Group({ children, className }: GroupProps): React.ReactElement {
-  return (
-    <NumberField.Group className={cn("flex", className)}>
-      {children}
-    </NumberField.Group>
-  );
-}
-
-interface DecrementProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-function Decrement({
-  className,
-  children,
-}: DecrementProps): React.ReactElement {
-  return (
-    <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 ?? "-"}
-    </NumberField.Decrement>
-  );
-}
-
-interface IncrementProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-function Increment({
-  className,
-  children,
-}: IncrementProps): React.ReactElement {
-  return (
-    <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 ?? "+"}
-    </NumberField.Increment>
-  );
-}
-
-interface ScrubAreaProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-function ScrubArea({
-  children,
-  className,
-}: ScrubAreaProps): React.ReactElement {
-  return (
-    <NumberField.ScrubArea
-      className={cn(
-        "relative flex w-full items-center",
-        "disabled:cursor-not-allowed",
-        className,
-      )}
-    >
-      {children}
-    </NumberField.ScrubArea>
-  );
-}
-
-interface InputProps {
-  className?: string;
-}
-
-function Input({ className }: InputProps): React.ReactElement {
-  return (
-    <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,
-      )}
-    />
-  );
-}
-
-interface ValueProps {
-  children: (context: {
-    value: bigint;
-    inputValue: number;
-    step: number;
-    disabled: boolean;
-  }) => React.ReactNode;
-  className?: string;
-}
-
-function Value({ children, className }: ValueProps): React.ReactElement {
-  const { value, inputValue, step, disabled } = useSteppedInput();
-  return (
-    <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,
-      )}
-    >
-      <NumberField.Input readOnly className="sr-only" />
-      <div className="w-full text-center text-sm leading-[21px] text-foreground tabular-nums">
-        {children({ value, inputValue, step, disabled })}
-      </div>
-    </div>
-  );
-}
-
-export function CursorGrowIcon(
-  props: React.ComponentProps<"svg">,
-): React.ReactElement {
-  return <IconArrowsHorizontal aria-label="Drag to adjust" {...props} />;
-}
-
-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;
-}
-
-const SteppedInput = {
-  Root,
-  Group,
-  Decrement,
-  Increment,
-  ScrubArea,
-  ScrubAreaCursor: NumberField.ScrubAreaCursor,
-  Input,
-  Value,
-} as SteppedInputComponent;
-
-export { SteppedInput };