@luxfi/ui 6.1.2 → 7.0.0

package/src/option-chain.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface OptionQuote {
+  symbol: string;
+  bid: number;
+  ask: number;
+  last: number;
+  volume: number;
+  openInterest: number;
+  iv: number;
+  delta: number;
+  gamma: number;
+  theta: number;
+  vega: number;
+}
+
+export interface OptionContract {
+  symbol: string;
+  type: 'call' | 'put';
+  strike: number;
+  bid: number;
+  ask: number;
+}
+
+export interface Strike {
+  strike: number;
+  call: OptionQuote | null;
+  put: OptionQuote | null;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function fmt(n: number | undefined | null, decimals = 2): string {
+  if (n === undefined || n === null) return '-';
+  return n.toFixed(decimals);
+}
+
+function fmtInt(n: number | undefined | null): string {
+  if (n === undefined || n === null) return '-';
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+function fmtPct(n: number | undefined | null): string {
+  if (n === undefined || n === null) return '-';
+  return `${(n * 100).toFixed(1)}%`;
+}
+
+// ---------------------------------------------------------------------------
+// QuoteCell — clickable cell in the option chain
+// ---------------------------------------------------------------------------
+
+interface QuoteCellProps {
+  readonly value: string;
+  readonly highlight?: boolean;
+  readonly align?: 'left' | 'right';
+  readonly onClick?: () => void;
+  readonly className?: string;
+}
+
+function QuoteCell({ value, highlight, align = 'right', onClick, className }: QuoteCellProps) {
+  return (
+    <td
+      className={cn(
+        'px-1.5 py-1 font-mono tabular-nums text-xs whitespace-nowrap',
+        align === 'right' ? 'text-right' : 'text-left',
+        highlight && 'text-zinc-100',
+        !highlight && 'text-zinc-400',
+        onClick && 'cursor-pointer hover:bg-zinc-700/50 transition-colors',
+        className,
+      )}
+      onClick={onClick}
+    >
+      {value}
+    </td>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Column headers
+// ---------------------------------------------------------------------------
+
+const CALL_HEADERS = ['Bid', 'Ask', 'Last', 'Vol', 'OI', 'IV', 'Delta'] as const;
+const PUT_HEADERS = ['Delta', 'IV', 'OI', 'Vol', 'Last', 'Ask', 'Bid'] as const;
+
+// ---------------------------------------------------------------------------
+// OptionChain
+// ---------------------------------------------------------------------------
+
+export interface OptionChainProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly symbol: string;
+  readonly expiration: string;
+  readonly strikes: Strike[];
+  readonly spotPrice: number;
+  readonly onSelectContract?: (contract: OptionContract) => void;
+}
+
+export const OptionChain = React.forwardRef<HTMLDivElement, OptionChainProps>(
+  function OptionChain(props, ref) {
+    const {
+      symbol: _symbol,
+      expiration: _expiration,
+      strikes,
+      spotPrice,
+      onSelectContract,
+      className,
+      ...rest
+    } = props;
+
+    const handleClick = React.useCallback(
+      (quote: OptionQuote | null, type: 'call' | 'put', strike: number) => {
+        if (!quote || !onSelectContract) return;
+        onSelectContract({
+          symbol: quote.symbol,
+          type,
+          strike,
+          bid: quote.bid,
+          ask: quote.ask,
+        });
+      },
+      [onSelectContract],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn('w-full overflow-x-auto', className)}
+        {...rest}
+      >
+        <table className="w-full border-collapse text-xs">
+          <thead>
+            <tr className="border-b border-zinc-800">
+              {/* Call headers */}
+              <th
+                colSpan={CALL_HEADERS.length}
+                className="px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-emerald-400"
+              >
+                Calls
+              </th>
+              {/* Strike header */}
+              <th className="px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                Strike
+              </th>
+              {/* Put headers */}
+              <th
+                colSpan={PUT_HEADERS.length}
+                className="px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-red-400"
+              >
+                Puts
+              </th>
+            </tr>
+            <tr className="border-b border-zinc-800/60">
+              {CALL_HEADERS.map((h) => (
+                <th
+                  key={`call-${h}`}
+                  className="px-1.5 py-1 text-right text-[10px] font-medium uppercase tracking-wider text-zinc-500"
+                >
+                  {h}
+                </th>
+              ))}
+              <th className="px-2 py-1 text-center text-[10px] font-medium uppercase tracking-wider text-zinc-500" />
+              {PUT_HEADERS.map((h) => (
+                <th
+                  key={`put-${h}`}
+                  className={cn(
+                    'px-1.5 py-1 text-[10px] font-medium uppercase tracking-wider text-zinc-500',
+                    h === 'Bid' || h === 'Ask' || h === 'Last' ? 'text-left' : 'text-right',
+                  )}
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {strikes.map((row) => {
+              const isATM = Math.abs(row.strike - spotPrice) <=
+                (strikes.length > 1
+                  ? Math.abs((strikes[1]?.strike ?? 0) - (strikes[0]?.strike ?? 0)) / 2
+                  : 0.5);
+              const callITM = row.strike < spotPrice;
+              const putITM = row.strike > spotPrice;
+              const c = row.call;
+              const p = row.put;
+
+              return (
+                <tr
+                  key={row.strike}
+                  className={cn(
+                    'border-b border-zinc-800/30 transition-colors',
+                    isATM && 'bg-zinc-800/60',
+                    !isATM && callITM && 'bg-emerald-950/20',
+                    !isATM && putITM && 'bg-red-950/20',
+                    !isATM && !callITM && !putITM && 'hover:bg-zinc-800/30',
+                  )}
+                >
+                  {/* Call side */}
+                  <QuoteCell
+                    value={fmt(c?.bid)}
+                    highlight={!!c}
+                    onClick={() => handleClick(c, 'call', row.strike)}
+                  />
+                  <QuoteCell
+                    value={fmt(c?.ask)}
+                    highlight={!!c}
+                    onClick={() => handleClick(c, 'call', row.strike)}
+                  />
+                  <QuoteCell value={fmt(c?.last)} highlight={!!c} />
+                  <QuoteCell value={fmtInt(c?.volume)} />
+                  <QuoteCell value={fmtInt(c?.openInterest)} />
+                  <QuoteCell value={fmtPct(c?.iv)} />
+                  <QuoteCell value={fmt(c?.delta, 3)} />
+
+                  {/* Strike */}
+                  <td
+                    className={cn(
+                      'px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold',
+                      isATM ? 'text-amber-400 bg-zinc-800/80' : 'text-zinc-300',
+                    )}
+                  >
+                    {fmt(row.strike)}
+                  </td>
+
+                  {/* Put side (mirrored order) */}
+                  <QuoteCell value={fmt(p?.delta, 3)} align="right" />
+                  <QuoteCell value={fmtPct(p?.iv)} align="right" />
+                  <QuoteCell value={fmtInt(p?.openInterest)} align="right" />
+                  <QuoteCell value={fmtInt(p?.volume)} align="right" />
+                  <QuoteCell value={fmt(p?.last)} align="left" highlight={!!p} />
+                  <QuoteCell
+                    value={fmt(p?.ask)}
+                    align="left"
+                    highlight={!!p}
+                    onClick={() => handleClick(p, 'put', row.strike)}
+                  />
+                  <QuoteCell
+                    value={fmt(p?.bid)}
+                    align="left"
+                    highlight={!!p}
+                    onClick={() => handleClick(p, 'put', row.strike)}
+                  />
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  },
+);

package/src/option-position.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface OptionPosition {
+  symbol: string;
+  underlying: string;
+  type: 'call' | 'put';
+  strike: number;
+  expiration: string;
+  quantity: number;
+  avgCost: number;
+  currentValue: number;
+  pnl: number;
+  pnlPercent: number;
+  greeks: {
+    delta: number;
+    gamma: number;
+    theta: number;
+    vega: number;
+  };
+}
+
+export interface OptionPositionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly position: OptionPosition;
+  readonly onClose?: (position: OptionPosition) => void;
+  readonly onExercise?: (position: OptionPosition) => void;
+  readonly onRoll?: (position: OptionPosition) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatDate(date: string): string {
+  const d = new Date(date);
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+// ---------------------------------------------------------------------------
+// OptionPositionCard
+// ---------------------------------------------------------------------------
+
+export const OptionPositionCard = React.forwardRef<HTMLDivElement, OptionPositionCardProps>(
+  function OptionPositionCard(props, ref) {
+    const {
+      position,
+      onClose,
+      onExercise,
+      onRoll,
+      className,
+      ...rest
+    } = props;
+
+    const isLong = position.quantity > 0;
+    const isCall = position.type === 'call';
+    const isProfitable = position.pnl >= 0;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3',
+          className,
+        )}
+        {...rest}
+      >
+        {/* Header row: symbol badge + quantity */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {/* Symbol badge */}
+            <span className={cn(
+              'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold',
+              isCall ? 'bg-blue-900/40 text-blue-400' : 'bg-orange-900/40 text-orange-400',
+            )}>
+              {position.underlying}
+              <span className="font-mono tabular-nums">{position.strike}</span>
+              <span className="uppercase">{position.type === 'call' ? 'C' : 'P'}</span>
+              <span className="text-zinc-500 font-normal">{formatDate(position.expiration)}</span>
+            </span>
+          </div>
+
+          {/* Quantity */}
+          <span className={cn(
+            'text-xs font-semibold font-mono tabular-nums',
+            isLong ? 'text-emerald-400' : 'text-red-400',
+          )}>
+            {isLong ? '+' : ''}{position.quantity}
+          </span>
+        </div>
+
+        {/* Values row */}
+        <div className="grid grid-cols-3 gap-3">
+          <div className="flex flex-col">
+            <span className="text-[10px] uppercase tracking-wider text-zinc-500">Avg Cost</span>
+            <span className="font-mono tabular-nums text-xs text-zinc-300">
+              ${position.avgCost.toFixed(2)}
+            </span>
+          </div>
+          <div className="flex flex-col">
+            <span className="text-[10px] uppercase tracking-wider text-zinc-500">Value</span>
+            <span className="font-mono tabular-nums text-xs text-zinc-300">
+              ${position.currentValue.toFixed(2)}
+            </span>
+          </div>
+          <div className="flex flex-col items-end">
+            <span className="text-[10px] uppercase tracking-wider text-zinc-500">P/L</span>
+            <div className="flex items-center gap-1">
+              <span className={cn(
+                'font-mono tabular-nums text-xs font-semibold',
+                isProfitable ? 'text-emerald-400' : 'text-red-400',
+              )}>
+                {isProfitable ? '+' : ''}{position.pnl.toFixed(2)}
+              </span>
+              <span className={cn(
+                'font-mono tabular-nums text-[10px]',
+                isProfitable ? 'text-emerald-500/70' : 'text-red-500/70',
+              )}>
+                ({isProfitable ? '+' : ''}{position.pnlPercent.toFixed(1)}%)
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Greeks row */}
+        <div className="flex items-center gap-3 border-t border-zinc-800/60 pt-2">
+          <GreekPill label={'\u0394'} value={position.greeks.delta} color="text-blue-400" />
+          <GreekPill label={'\u0393'} value={position.greeks.gamma} color="text-purple-400" />
+          <GreekPill label={'\u0398'} value={position.greeks.theta} color="text-red-400" />
+          <GreekPill label={'\u03BD'} value={position.greeks.vega} color="text-emerald-400" />
+        </div>
+
+        {/* Action buttons */}
+        {(onClose || onExercise || onRoll) && (
+          <div className="flex items-center gap-2 border-t border-zinc-800/60 pt-2">
+            {onClose && (
+              <button
+                type="button"
+                onClick={() => onClose(position)}
+                className="flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
+              >
+                Close
+              </button>
+            )}
+            {onExercise && (
+              <button
+                type="button"
+                onClick={() => onExercise(position)}
+                className="flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
+              >
+                Exercise
+              </button>
+            )}
+            {onRoll && (
+              <button
+                type="button"
+                onClick={() => onRoll(position)}
+                className="flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
+              >
+                Roll
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// GreekPill (internal)
+// ---------------------------------------------------------------------------
+
+interface GreekPillProps {
+  readonly label: string;
+  readonly value: number;
+  readonly color: string;
+}
+
+function GreekPill({ label, value, color }: GreekPillProps) {
+  return (
+    <div className="flex items-center gap-1">
+      <span className={cn('text-[10px] font-semibold', color)}>
+        {label}
+      </span>
+      <span className={cn(
+        'font-mono tabular-nums text-[11px]',
+        value < 0 ? 'text-red-400' : 'text-zinc-400',
+      )}>
+        {value.toFixed(4)}
+      </span>
+    </div>
+  );
+}

package/src/pin-input.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+export interface PinInputProps {
+  readonly rootRef?: React.Ref<HTMLDivElement>;
+  readonly count?: number;
+  readonly inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  readonly attached?: boolean;
+  readonly placeholder?: string;
+  readonly value?: Array<string>;
+  readonly onValueChange?: (details: { value: Array<string> }) => void;
+  readonly onValueComplete?: (details: { value: Array<string> }) => void;
+  readonly disabled?: boolean;
+  readonly invalid?: boolean;
+  readonly otp?: boolean;
+  readonly name?: string;
+  readonly bgColor?: string;
+  readonly className?: string;
+}
+
+const INPUT_BASE = [
+  'w-10 h-10',
+  'text-center text-sm font-medium',
+  'border-2 rounded-md',
+  'outline-none appearance-none',
+  'bg-[var(--color-input-bg)] text-[var(--color-input-fg)]',
+  'border-[var(--color-input-border)]',
+  'placeholder:text-[var(--color-input-placeholder)]',
+  'hover:border-[var(--color-input-border-hover)]',
+  'focus:border-[var(--color-input-border-focus)] focus:shadow-md',
+  'disabled:opacity-40',
+].join(' ');
+
+const INPUT_FILLED = 'border-[var(--color-input-border)]';
+const INPUT_INVALID = 'border-[var(--color-border-error)] hover:border-[var(--color-border-error)]';
+
+export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
+  function PinInput(props, ref) {
+    const {
+      count = 6,
+      inputProps,
+      rootRef,
+      attached,
+      placeholder = ' ',
+      value: controlledValue,
+      onValueChange,
+      onValueComplete,
+      disabled,
+      invalid,
+      otp,
+      name,
+      bgColor,
+      className,
+    } = props;
+
+    const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);
+
+    const values = React.useMemo(
+      () => controlledValue ?? Array.from<string>({ length: count }).fill(''),
+      [ controlledValue, count ],
+    );
+
+    const updateValue = React.useCallback((index: number, char: string): void => {
+      const next = [ ...values ];
+      next[index] = char;
+      onValueChange?.({ value: next });
+
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+    }, [ values, onValueChange, onValueComplete ]);
+
+    const focusInput = React.useCallback((index: number): void => {
+      const clamped = Math.max(0, Math.min(index, count - 1));
+      inputRefs.current[clamped]?.focus();
+    }, [ count ]);
+
+    const handleInput = React.useCallback((index: number, e: React.FormEvent<HTMLInputElement>): void => {
+      const target = e.currentTarget;
+      const char = target.value.slice(-1);
+      updateValue(index, char);
+
+      if (char && index < count - 1) {
+        focusInput(index + 1);
+      }
+    }, [ count, updateValue, focusInput ]);
+
+    const handleKeyDown = React.useCallback((index: number, e: React.KeyboardEvent<HTMLInputElement>): void => {
+      if (e.key === 'Backspace') {
+        if (values[index]) {
+          updateValue(index, '');
+        } else if (index > 0) {
+          updateValue(index - 1, '');
+          focusInput(index - 1);
+        }
+        e.preventDefault();
+      } else if (e.key === 'ArrowLeft' && index > 0) {
+        focusInput(index - 1);
+        e.preventDefault();
+      } else if (e.key === 'ArrowRight' && index < count - 1) {
+        focusInput(index + 1);
+        e.preventDefault();
+      }
+    }, [ count, values, updateValue, focusInput ]);
+
+    const handlePaste = React.useCallback((e: React.ClipboardEvent<HTMLInputElement>): void => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData('text/plain').trim();
+      if (!pasted) {
+        return;
+      }
+      const chars = pasted.slice(0, count).split('');
+      const next = [ ...values ];
+      chars.forEach((char, i) => {
+        next[i] = char;
+      });
+      onValueChange?.({ value: next });
+
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+
+      focusInput(Math.min(chars.length, count - 1));
+    }, [ count, values, onValueChange, onValueComplete, focusInput ]);
+
+    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>): void => {
+      e.currentTarget.select();
+    }, []);
+
+    const handleNoop = React.useCallback((): void => { /* noop */ }, []);
+
+    const setInputRef = React.useCallback((index: number) => (el: HTMLInputElement | null): void => {
+      inputRefs.current[index] = el;
+    }, []);
+
+    const onInputAtIndex = React.useCallback((index: number) => (e: React.FormEvent<HTMLInputElement>): void => {
+      handleInput(index, e);
+    }, [ handleInput ]);
+
+    const onKeyDownAtIndex = React.useCallback((index: number) => (e: React.KeyboardEvent<HTMLInputElement>): void => {
+      handleKeyDown(index, e);
+    }, [ handleKeyDown ]);
+
+    const bgStyle = bgColor ? { backgroundColor: `var(--color-${ bgColor.replace(/\./g, '-') })` } : undefined;
+
+    return (
+      <div ref={ rootRef } className={ cn('inline-flex items-center', attached ? 'gap-0' : 'gap-2', className) }>
+        { /* Hidden input for form submission */ }
+        <input
+          ref={ ref }
+          type="hidden"
+          name={ name }
+          value={ values.join('') }
+          { ...inputProps }
+        />
+        { Array.from({ length: count }).map((_, index) => (
+          <input
+            key={ index }
+            ref={ setInputRef(index) }
+            type="text"
+            inputMode="numeric"
+            autoComplete={ otp ? 'one-time-code' : 'off' }
+            pattern="[0-9]*"
+            maxLength={ 1 }
+            placeholder={ placeholder }
+            disabled={ disabled }
+            aria-invalid={ invalid || undefined }
+            value={ values[index] || '' }
+            className={ cn(
+              INPUT_BASE,
+              values[index] && INPUT_FILLED,
+              invalid && INPUT_INVALID,
+              attached && index > 0 && '-ml-0.5',
+            ) }
+            style={ bgStyle }
+            onInput={ onInputAtIndex(index) }
+            onKeyDown={ onKeyDownAtIndex(index) }
+            onPaste={ handlePaste }
+            onFocus={ handleFocus }
+            onChange={ handleNoop }
+          />
+        )) }
+      </div>
+    );
+  },
+);