@luxfi/ui 6.1.2 → 7.0.0

package/dist/strategy-builder.cjs

@@ -0,0 +1,373 @@
+"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 findATM(strikes, spot) {
+  if (strikes.length === 0) return spot;
+  return strikes.reduce(
+    (prev, curr) => Math.abs(curr - spot) < Math.abs(prev - spot) ? curr : prev
+  );
+}
+function findOTM(strikes, spot, type, offset) {
+  const sorted = [...strikes].sort((a, b) => a - b);
+  const atm = findATM(strikes, spot);
+  const atIdx = sorted.indexOf(atm);
+  if (type === "call") {
+    return sorted[Math.min(atIdx + offset, sorted.length - 1)] ?? atm;
+  }
+  return sorted[Math.max(atIdx - offset, 0)] ?? atm;
+}
+var STRATEGY_PRESETS = [
+  {
+    label: "Bull Call Spread",
+    value: "bull_call_spread",
+    description: "Buy lower strike call, sell higher strike call",
+    buildLegs: (strikes, spot, exp) => {
+      const lower = findATM(strikes, spot);
+      const upper = findOTM(strikes, spot, "call", 2);
+      return [
+        { action: "buy", type: "call", strike: lower, expiration: exp, quantity: 1 },
+        { action: "sell", type: "call", strike: upper, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Bear Put Spread",
+    value: "bear_put_spread",
+    description: "Buy higher strike put, sell lower strike put",
+    buildLegs: (strikes, spot, exp) => {
+      const upper = findATM(strikes, spot);
+      const lower = findOTM(strikes, spot, "put", 2);
+      return [
+        { action: "buy", type: "put", strike: upper, expiration: exp, quantity: 1 },
+        { action: "sell", type: "put", strike: lower, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Iron Condor",
+    value: "iron_condor",
+    description: "Sell OTM put + call, buy further OTM put + call",
+    buildLegs: (strikes, spot, exp) => {
+      const sellPut = findOTM(strikes, spot, "put", 1);
+      const buyPut = findOTM(strikes, spot, "put", 3);
+      const sellCall = findOTM(strikes, spot, "call", 1);
+      const buyCall = findOTM(strikes, spot, "call", 3);
+      return [
+        { action: "buy", type: "put", strike: buyPut, expiration: exp, quantity: 1 },
+        { action: "sell", type: "put", strike: sellPut, expiration: exp, quantity: 1 },
+        { action: "sell", type: "call", strike: sellCall, expiration: exp, quantity: 1 },
+        { action: "buy", type: "call", strike: buyCall, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Butterfly",
+    value: "butterfly",
+    description: "Buy 1 low, sell 2 middle, buy 1 high",
+    buildLegs: (strikes, spot, exp) => {
+      const mid = findATM(strikes, spot);
+      const low = findOTM(strikes, spot, "put", 2);
+      const high = findOTM(strikes, spot, "call", 2);
+      return [
+        { action: "buy", type: "call", strike: low, expiration: exp, quantity: 1 },
+        { action: "sell", type: "call", strike: mid, expiration: exp, quantity: 2 },
+        { action: "buy", type: "call", strike: high, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Straddle",
+    value: "straddle",
+    description: "Buy call + put at same strike",
+    buildLegs: (strikes, spot, exp) => {
+      const atm = findATM(strikes, spot);
+      return [
+        { action: "buy", type: "call", strike: atm, expiration: exp, quantity: 1 },
+        { action: "buy", type: "put", strike: atm, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Strangle",
+    value: "strangle",
+    description: "Buy OTM call + OTM put",
+    buildLegs: (strikes, spot, exp) => {
+      const otmCall = findOTM(strikes, spot, "call", 2);
+      const otmPut = findOTM(strikes, spot, "put", 2);
+      return [
+        { action: "buy", type: "put", strike: otmPut, expiration: exp, quantity: 1 },
+        { action: "buy", type: "call", strike: otmCall, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Custom",
+    value: "custom",
+    description: "Build your own multi-leg strategy",
+    buildLegs: (_strikes, spot, exp) => [
+      { action: "buy", type: "call", strike: spot, expiration: exp, quantity: 1 }
+    ]
+  }
+];
+function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemove }) {
+  const update = (patch) => {
+    onChange(index, { ...leg, ...patch });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "px-2 py-0.5 rounded text-xs font-semibold transition-colors",
+          leg.action === "buy" ? "bg-emerald-900/60 text-emerald-400" : "bg-red-900/60 text-red-400"
+        ),
+        onClick: () => update({ action: leg.action === "buy" ? "sell" : "buy" }),
+        children: leg.action === "buy" ? "BUY" : "SELL"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "px-2 py-0.5 rounded text-xs font-medium transition-colors",
+          leg.type === "call" ? "bg-blue-900/40 text-blue-400" : "bg-orange-900/40 text-orange-400"
+        ),
+        onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
+        children: leg.type === "call" ? "CALL" : "PUT"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        value: leg.strike,
+        onChange: (e) => update({ strike: Number(e.target.value) }),
+        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]",
+        children: strikes.map((s) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: s, children: s.toFixed(2) }, s))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        value: leg.expiration,
+        onChange: (e) => update({ expiration: e.target.value }),
+        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]",
+        children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: exp, children: exp }, exp))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        min: 1,
+        max: 999,
+        value: leg.quantity,
+        onChange: (e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }),
+        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
+      }
+    ),
+    leg.premium !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+      "font-mono tabular-nums text-xs ml-auto",
+      leg.premium >= 0 ? "text-emerald-400" : "text-red-400"
+    ), children: [
+      leg.premium >= 0 ? "+" : "",
+      leg.premium.toFixed(2)
+    ] }),
+    removable && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onRemove(index),
+        className: "ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors",
+        "aria-label": "Remove leg",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+var StrategyBuilder = React__namespace.forwardRef(
+  function StrategyBuilder2(props, ref) {
+    const {
+      underlying,
+      expirations,
+      strikes,
+      spotPrice,
+      onSubmit,
+      className,
+      ...rest
+    } = props;
+    const defaultExp = expirations[0] ?? "";
+    const [strategyType, setStrategyType] = React__namespace.useState("bull_call_spread");
+    const [legs, setLegs] = React__namespace.useState(() => {
+      const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
+      return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
+    });
+    const handleStrategyChange = React__namespace.useCallback(
+      (e) => {
+        const type = e.target.value;
+        setStrategyType(type);
+        const preset = STRATEGY_PRESETS.find((p) => p.value === type);
+        if (preset) {
+          setLegs(preset.buildLegs(strikes, spotPrice, defaultExp));
+        }
+      },
+      [strikes, spotPrice, defaultExp]
+    );
+    const handleLegChange = React__namespace.useCallback(
+      (index, leg) => {
+        setLegs((prev) => {
+          const next = [...prev];
+          next[index] = leg;
+          return next;
+        });
+      },
+      []
+    );
+    const handleLegRemove = React__namespace.useCallback(
+      (index) => {
+        setLegs((prev) => prev.filter((_, i) => i !== index));
+      },
+      []
+    );
+    const handleAddLeg = React__namespace.useCallback(() => {
+      if (legs.length >= 4) return;
+      const atm = findATM(strikes, spotPrice);
+      setLegs((prev) => [
+        ...prev,
+        { action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
+      ]);
+    }, [legs.length, strikes, spotPrice, defaultExp]);
+    const netPremium = React__namespace.useMemo(() => {
+      return legs.reduce((sum, leg) => {
+        if (leg.premium === void 0) return sum;
+        const sign = leg.action === "buy" ? -1 : 1;
+        return sum + sign * leg.premium * leg.quantity;
+      }, 0);
+    }, [legs]);
+    const handleSubmit = React__namespace.useCallback(() => {
+      if (!onSubmit || legs.length === 0) return;
+      onSubmit({
+        type: strategyType,
+        legs,
+        netPremium
+      });
+    }, [onSubmit, strategyType, legs, netPremium]);
+    const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-3 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 gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              "Spot: ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: strategyType,
+              onChange: handleStrategyChange,
+              className: "flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500",
+              children: STRATEGY_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: preset.value, children: preset.label }, preset.value))
+            }
+          ) }),
+          currentPreset && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            LegRow,
+            {
+              leg,
+              index: i,
+              strikes,
+              expirations,
+              removable: strategyType === "custom" && legs.length > 1,
+              onChange: handleLegChange,
+              onRemove: handleLegRemove
+            },
+            i
+          )) }),
+          strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleAddLeg,
+              className: "flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                "Add Leg"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                "font-mono tabular-nums text-sm font-semibold",
+                netPremium > 0 ? "text-emerald-400" : netPremium < 0 ? "text-red-400" : "text-zinc-400"
+              ), children: [
+                netPremium > 0 ? "Credit " : netPremium < 0 ? "Debit " : "",
+                netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : "-"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: legs.length === 0,
+                className: cn(
+                  "px-4 py-1.5 rounded-md text-xs font-semibold transition-colors",
+                  "bg-blue-600 text-white hover:bg-blue-500",
+                  "disabled:opacity-40 disabled:cursor-not-allowed"
+                ),
+                children: "Review Order"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+exports.StrategyBuilder = StrategyBuilder;

package/dist/strategy-builder.d.cts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface StrategyLeg {
+    action: 'buy' | 'sell';
+    type: 'call' | 'put';
+    strike: number;
+    expiration: string;
+    quantity: number;
+    premium?: number;
+}
+type StrategyType = 'bull_call_spread' | 'bear_put_spread' | 'iron_condor' | 'butterfly' | 'straddle' | 'strangle' | 'collar' | 'custom';
+interface StrategySubmission {
+    type: string;
+    legs: StrategyLeg[];
+    netPremium: number;
+}
+interface StrategyBuilderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'> {
+    readonly underlying: string;
+    readonly expirations: string[];
+    readonly strikes: number[];
+    readonly spotPrice: number;
+    readonly onSubmit?: (strategy: StrategySubmission) => void;
+}
+declare const StrategyBuilder: React.ForwardRefExoticComponent<StrategyBuilderProps & React.RefAttributes<HTMLDivElement>>;
+
+export { StrategyBuilder, type StrategyBuilderProps, type StrategyLeg, type StrategySubmission, type StrategyType };

package/dist/strategy-builder.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface StrategyLeg {
+    action: 'buy' | 'sell';
+    type: 'call' | 'put';
+    strike: number;
+    expiration: string;
+    quantity: number;
+    premium?: number;
+}
+type StrategyType = 'bull_call_spread' | 'bear_put_spread' | 'iron_condor' | 'butterfly' | 'straddle' | 'strangle' | 'collar' | 'custom';
+interface StrategySubmission {
+    type: string;
+    legs: StrategyLeg[];
+    netPremium: number;
+}
+interface StrategyBuilderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'> {
+    readonly underlying: string;
+    readonly expirations: string[];
+    readonly strikes: number[];
+    readonly spotPrice: number;
+    readonly onSubmit?: (strategy: StrategySubmission) => void;
+}
+declare const StrategyBuilder: React.ForwardRefExoticComponent<StrategyBuilderProps & React.RefAttributes<HTMLDivElement>>;
+
+export { StrategyBuilder, type StrategyBuilderProps, type StrategyLeg, type StrategySubmission, type StrategyType };