@luxfi/ui 6.1.2 → 7.0.0

package/dist/strategy-builder.js

@@ -0,0 +1,351 @@
+"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 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__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx("option", { value: exp, children: exp }, exp))
+      }
+    ),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+var StrategyBuilder = React.forwardRef(
+  function StrategyBuilder2(props, ref) {
+    const {
+      underlying,
+      expirations,
+      strikes,
+      spotPrice,
+      onSubmit,
+      className,
+      ...rest
+    } = props;
+    const defaultExp = expirations[0] ?? "";
+    const [strategyType, setStrategyType] = React.useState("bull_call_spread");
+    const [legs, setLegs] = React.useState(() => {
+      const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
+      return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
+    });
+    const handleStrategyChange = React.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.useCallback(
+      (index, leg) => {
+        setLegs((prev) => {
+          const next = [...prev];
+          next[index] = leg;
+          return next;
+        });
+      },
+      []
+    );
+    const handleLegRemove = React.useCallback(
+      (index) => {
+        setLegs((prev) => prev.filter((_, i) => i !== index));
+      },
+      []
+    );
+    const handleAddLeg = React.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.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.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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              "Spot: ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ 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__ */ jsx("option", { value: preset.value, children: preset.label }, preset.value))
+            }
+          ) }),
+          currentPreset && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsx(
+            LegRow,
+            {
+              leg,
+              index: i,
+              strikes,
+              expirations,
+              removable: strategyType === "custom" && legs.length > 1,
+              onChange: handleLegChange,
+              onRemove: handleLegRemove
+            },
+            i
+          )) }),
+          strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ 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__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                "Add Leg"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
+              /* @__PURE__ */ 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__ */ 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"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export { StrategyBuilder };

package/dist/switch.cjs

@@ -0,0 +1,163 @@
+"use client";
+'use strict';
+
+var RadixSwitch = require('@radix-ui/react-switch');
+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 RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/switch.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var NOOP = () => {
+};
+var SIZE_CLASSES = {
+  sm: {
+    root: "h-4 w-7",
+    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    label: "text-xs"
+  },
+  md: {
+    root: "h-5 w-9",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    label: "text-sm"
+  },
+  lg: {
+    root: "h-6 w-11",
+    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    label: "text-base"
+  }
+};
+var SwitchBase = React__namespace.forwardRef(
+  function Switch(props, ref) {
+    const {
+      inputProps,
+      children,
+      rootRef,
+      labelProps,
+      trackLabel,
+      thumbLabel,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      disabled = false,
+      size = "md",
+      direction,
+      className,
+      ...rest
+    } = props;
+    const [internalChecked, setInternalChecked] = React__namespace.useState(defaultChecked ?? false);
+    const isControlled = checkedProp !== void 0;
+    const checkedState = isControlled ? checkedProp : internalChecked;
+    const handleCheckedChange = React__namespace.useCallback(
+      (nextChecked) => {
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+        if (onCheckedChange) {
+          onCheckedChange({ checked: nextChecked });
+        }
+      },
+      [isControlled, onCheckedChange]
+    );
+    const sizeClasses = SIZE_CLASSES[size];
+    const isRtl = direction === "rtl";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref: rootRef,
+        className: cn(
+          "inline-flex items-center cursor-pointer select-none gap-2",
+          isRtl && "flex-row-reverse",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        onChange,
+        "data-disabled": disabled || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            RadixSwitch__namespace.Root,
+            {
+              checked: checkedState,
+              onCheckedChange: handleCheckedChange,
+              disabled,
+              className: cn(
+                "relative inline-flex shrink-0 items-center rounded-full",
+                "bg-gray-300 dark:bg-gray-600",
+                "data-[state=checked]:bg-gray-800 dark:bg-white",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
+                "transition-colors duration-200",
+                sizeClasses.root
+              ),
+              children: [
+                trackLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RadixSwitch__namespace.Thumb,
+                  {
+                    className: cn(
+                      "block rounded-full bg-white shadow-sm",
+                      "transition-transform duration-200",
+                      "translate-x-0.5",
+                      sizeClasses.thumb
+                    ),
+                    children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              className: "sr-only",
+              checked: checkedState,
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": true,
+              onChange: NOOP,
+              ...inputProps
+            }
+          ),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ...labelProps,
+              className: cn(sizeClasses.label, labelProps?.className),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var Switch2 = SwitchBase;
+
+exports.Switch = Switch2;

package/dist/switch.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'dir'> {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    labelProps?: React.ComponentPropsWithoutRef<'span'>;
+    rootRef?: React.Ref<HTMLLabelElement>;
+    trackLabel?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+    thumbLabel?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (details: {
+        checked: boolean;
+    }) => void;
+    onChange?: React.FormEventHandler<HTMLLabelElement>;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    direction?: 'ltr' | 'rtl';
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Switch, type SwitchProps };

package/dist/switch.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'dir'> {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    labelProps?: React.ComponentPropsWithoutRef<'span'>;
+    rootRef?: React.Ref<HTMLLabelElement>;
+    trackLabel?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+    thumbLabel?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (details: {
+        checked: boolean;
+    }) => void;
+    onChange?: React.FormEventHandler<HTMLLabelElement>;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    direction?: 'ltr' | 'rtl';
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Switch, type SwitchProps };