@luxfi/ui 6.1.2 → 7.0.0

package/dist/option-chain.js

@@ -0,0 +1,199 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function fmt(n, decimals = 2) {
+  if (n === void 0 || n === null) return "-";
+  return n.toFixed(decimals);
+}
+function fmtInt(n) {
+  if (n === void 0 || n === null) return "-";
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+function fmtPct(n) {
+  if (n === void 0 || n === null) return "-";
+  return `${(n * 100).toFixed(1)}%`;
+}
+function QuoteCell({ value, highlight, align = "right", onClick, className }) {
+  return /* @__PURE__ */ jsx(
+    "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,
+      children: value
+    }
+  );
+}
+var CALL_HEADERS = ["Bid", "Ask", "Last", "Vol", "OI", "IV", "Delta"];
+var PUT_HEADERS = ["Delta", "IV", "OI", "Vol", "Last", "Ask", "Bid"];
+var OptionChain = React.forwardRef(
+  function OptionChain2(props, ref) {
+    const {
+      symbol: _symbol,
+      expiration: _expiration,
+      strikes,
+      spotPrice,
+      onSelectContract,
+      className,
+      ...rest
+    } = props;
+    const handleClick = React.useCallback(
+      (quote, type, strike) => {
+        if (!quote || !onSelectContract) return;
+        onSelectContract({
+          symbol: quote.symbol,
+          type,
+          strike,
+          bid: quote.bid,
+          ask: quote.ask
+        });
+      },
+      [onSelectContract]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("w-full overflow-x-auto", className),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-xs", children: [
+          /* @__PURE__ */ jsxs("thead", { children: [
+            /* @__PURE__ */ jsxs("tr", { className: "border-b border-zinc-800", children: [
+              /* @__PURE__ */ jsx(
+                "th",
+                {
+                  colSpan: CALL_HEADERS.length,
+                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-emerald-400",
+                  children: "Calls"
+                }
+              ),
+              /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-500", children: "Strike" }),
+              /* @__PURE__ */ jsx(
+                "th",
+                {
+                  colSpan: PUT_HEADERS.length,
+                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-red-400",
+                  children: "Puts"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("tr", { className: "border-b border-zinc-800/60", children: [
+              CALL_HEADERS.map((h) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: "px-1.5 py-1 text-right text-[10px] font-medium uppercase tracking-wider text-zinc-500",
+                  children: h
+                },
+                `call-${h}`
+              )),
+              /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-center text-[10px] font-medium uppercase tracking-wider text-zinc-500" }),
+              PUT_HEADERS.map((h) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  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"
+                  ),
+                  children: h
+                },
+                `put-${h}`
+              ))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("tbody", { children: 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 /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                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"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(c?.bid),
+                      highlight: !!c,
+                      onClick: () => handleClick(c, "call", row.strike)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(c?.ask),
+                      highlight: !!c,
+                      onClick: () => handleClick(c, "call", row.strike)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmt(c?.last), highlight: !!c }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmtInt(c?.volume) }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmtInt(c?.openInterest) }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmtPct(c?.iv) }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmt(c?.delta, 3) }),
+                  /* @__PURE__ */ jsx(
+                    "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"
+                      ),
+                      children: fmt(row.strike)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmt(p?.delta, 3), align: "right" }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmtPct(p?.iv), align: "right" }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmtInt(p?.openInterest), align: "right" }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmtInt(p?.volume), align: "right" }),
+                  /* @__PURE__ */ jsx(QuoteCell, { value: fmt(p?.last), align: "left", highlight: !!p }),
+                  /* @__PURE__ */ jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(p?.ask),
+                      align: "left",
+                      highlight: !!p,
+                      onClick: () => handleClick(p, "put", row.strike)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(p?.bid),
+                      align: "left",
+                      highlight: !!p,
+                      onClick: () => handleClick(p, "put", row.strike)
+                    }
+                  )
+                ]
+              },
+              row.strike
+            );
+          }) })
+        ] })
+      }
+    );
+  }
+);
+
+export { OptionChain };

package/dist/option-position.cjs

@@ -0,0 +1,164 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function formatDate(date) {
+  const d = new Date(date);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+var OptionPositionCard = React__namespace.forwardRef(
+  function OptionPositionCard2(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 /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("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"
+            ), children: [
+              position.underlying,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums", children: position.strike }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase", children: position.type === "call" ? "C" : "P" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-500 font-normal", children: formatDate(position.expiration) })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+              "text-xs font-semibold font-mono tabular-nums",
+              isLong ? "text-emerald-400" : "text-red-400"
+            ), children: [
+              isLong ? "+" : "",
+              position.quantity
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Avg Cost" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+                "$",
+                position.avgCost.toFixed(2)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Value" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+                "$",
+                position.currentValue.toFixed(2)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "P/L" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                  "font-mono tabular-nums text-xs font-semibold",
+                  isProfitable ? "text-emerald-400" : "text-red-400"
+                ), children: [
+                  isProfitable ? "+" : "",
+                  position.pnl.toFixed(2)
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                  "font-mono tabular-nums text-[10px]",
+                  isProfitable ? "text-emerald-500/70" : "text-red-500/70"
+                ), children: [
+                  "(",
+                  isProfitable ? "+" : "",
+                  position.pnlPercent.toFixed(1),
+                  "%)"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-t border-zinc-800/60 pt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "text-blue-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "text-purple-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "text-red-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "text-emerald-400" })
+          ] }),
+          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-800/60 pt-2", children: [
+            onClose && /* @__PURE__ */ jsxRuntime.jsx(
+              "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",
+                children: "Close"
+              }
+            ),
+            onExercise && /* @__PURE__ */ jsxRuntime.jsx(
+              "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",
+                children: "Exercise"
+              }
+            ),
+            onRoll && /* @__PURE__ */ jsxRuntime.jsx(
+              "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",
+                children: "Roll"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+function GreekPill({ label, value, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold", color), children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+      "font-mono tabular-nums text-[11px]",
+      value < 0 ? "text-red-400" : "text-zinc-400"
+    ), children: value.toFixed(4) })
+  ] });
+}
+
+exports.OptionPositionCard = OptionPositionCard;

package/dist/option-position.d.cts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+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;
+    };
+}
+interface OptionPositionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly position: OptionPosition;
+    readonly onClose?: (position: OptionPosition) => void;
+    readonly onExercise?: (position: OptionPosition) => void;
+    readonly onRoll?: (position: OptionPosition) => void;
+}
+declare const OptionPositionCard: React.ForwardRefExoticComponent<OptionPositionCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type OptionPosition, OptionPositionCard, type OptionPositionCardProps };

package/dist/option-position.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+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;
+    };
+}
+interface OptionPositionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly position: OptionPosition;
+    readonly onClose?: (position: OptionPosition) => void;
+    readonly onExercise?: (position: OptionPosition) => void;
+    readonly onRoll?: (position: OptionPosition) => void;
+}
+declare const OptionPositionCard: React.ForwardRefExoticComponent<OptionPositionCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type OptionPosition, OptionPositionCard, type OptionPositionCardProps };

package/dist/option-position.js

@@ -0,0 +1,142 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatDate(date) {
+  const d = new Date(date);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+var OptionPositionCard = React.forwardRef(
+  function OptionPositionCard2(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 /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("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"
+            ), children: [
+              position.underlying,
+              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: position.strike }),
+              /* @__PURE__ */ jsx("span", { className: "uppercase", children: position.type === "call" ? "C" : "P" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-500 font-normal", children: formatDate(position.expiration) })
+            ] }) }),
+            /* @__PURE__ */ jsxs("span", { className: cn(
+              "text-xs font-semibold font-mono tabular-nums",
+              isLong ? "text-emerald-400" : "text-red-400"
+            ), children: [
+              isLong ? "+" : "",
+              position.quantity
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Avg Cost" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+                "$",
+                position.avgCost.toFixed(2)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Value" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+                "$",
+                position.currentValue.toFixed(2)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "P/L" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxs("span", { className: cn(
+                  "font-mono tabular-nums text-xs font-semibold",
+                  isProfitable ? "text-emerald-400" : "text-red-400"
+                ), children: [
+                  isProfitable ? "+" : "",
+                  position.pnl.toFixed(2)
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: cn(
+                  "font-mono tabular-nums text-[10px]",
+                  isProfitable ? "text-emerald-500/70" : "text-red-500/70"
+                ), children: [
+                  "(",
+                  isProfitable ? "+" : "",
+                  position.pnlPercent.toFixed(1),
+                  "%)"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-t border-zinc-800/60 pt-2", children: [
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "text-blue-400" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "text-purple-400" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "text-red-400" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "text-emerald-400" })
+          ] }),
+          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-800/60 pt-2", children: [
+            onClose && /* @__PURE__ */ jsx(
+              "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",
+                children: "Close"
+              }
+            ),
+            onExercise && /* @__PURE__ */ jsx(
+              "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",
+                children: "Exercise"
+              }
+            ),
+            onRoll && /* @__PURE__ */ jsx(
+              "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",
+                children: "Roll"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+function GreekPill({ label, value, color }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: cn("text-[10px] font-semibold", color), children: label }),
+    /* @__PURE__ */ jsx("span", { className: cn(
+      "font-mono tabular-nums text-[11px]",
+      value < 0 ? "text-red-400" : "text-zinc-400"
+    ), children: value.toFixed(4) })
+  ] });
+}
+
+export { OptionPositionCard };