@luxfi/ui 6.1.2 → 7.0.0

package/dist/menu.js

@@ -0,0 +1,269 @@
+"use client";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { LuCheck, LuChevronRight } from 'react-icons/lu';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function parsePlacement(placement) {
+  if (!placement) {
+    return { side: "bottom", align: "start" };
+  }
+  const parts = placement.split("-");
+  const side = parts[0] ?? "bottom";
+  const alignPart = parts[1];
+  let align = "center";
+  if (alignPart === "start") {
+    align = "start";
+  } else if (alignPart === "end") {
+    align = "end";
+  }
+  return { side, align };
+}
+var PositioningContext = React.createContext({
+  side: "bottom",
+  align: "start",
+  sideOffset: 4,
+  alignOffset: 0
+});
+var MenuRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    positioning,
+    modal = true,
+    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
+    // mount/unmount automatically.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lazyMount: _lazyMount,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    unmountOnExit: _unmountOnExit
+  } = props;
+  const mergedPositioning = {
+    placement: "bottom-start",
+    ...positioning,
+    offset: {
+      mainAxis: 4,
+      ...positioning?.offset
+    }
+  };
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+  const positioningValue = React.useMemo(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
+  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
+  const handleOpenChange = React.useCallback((isOpen) => {
+    onOpenChange?.({ open: isOpen });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
+    DropdownMenu.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var MenuTrigger = React.forwardRef(function MenuTrigger2(props, ref) {
+  const { asChild = false, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
+});
+var MenuContent = React.forwardRef(function MenuContent2(props, ref) {
+  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
+  const positioning = React.useContext(PositioningContext);
+  const mergedStyle = {
+    ...style,
+    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
+    ...minW !== void 0 ? { minWidth: minW } : {}
+  };
+  const content = /* @__PURE__ */ jsx(
+    DropdownMenu.Content,
+    {
+      ref,
+      side: positioning.side,
+      align: positioning.align,
+      sideOffset: positioning.sideOffset,
+      alignOffset: positioning.alignOffset,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
+        "border border-[var(--color-popover-border,var(--color-border-divider))]",
+        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
+        "shadow-[0_4px_12px_var(--color-popover-shadow)]",
+        "outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
+      ...rest
+    }
+  );
+  if (!portalled) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
+});
+var MenuItem = React.forwardRef(function MenuItem2(props, ref) {
+  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Item,
+    {
+      ref,
+      asChild,
+      disabled,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "text-[var(--color-text-primary,inherit)]",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var MenuItemText = React.forwardRef(function MenuItemText2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
+});
+var MenuItemCommand = React.forwardRef(function MenuItemCommand2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...rest
+    }
+  );
+});
+var MenuSeparator = React.forwardRef(function MenuSeparator2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
+      ...rest
+    }
+  );
+});
+var MenuItemGroup = React.forwardRef(function MenuItemGroup2(props, ref) {
+  const { title, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
+    title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
+    children
+  ] });
+});
+var MenuArrow = React.forwardRef(function MenuArrow2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Arrow,
+    {
+      ref,
+      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...rest
+    }
+  );
+});
+var MenuCheckboxItem = React.forwardRef(function MenuCheckboxItem2(props, ref) {
+  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.CheckboxItem,
+    {
+      ref,
+      checked,
+      onCheckedChange,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var MenuRadioItemGroup = React.forwardRef(function MenuRadioItemGroup2(props, ref) {
+  const { value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.RadioGroup,
+    {
+      ref,
+      value,
+      onValueChange,
+      ...rest
+    }
+  );
+});
+var MenuRadioItem = React.forwardRef(function MenuRadioItem2(props, ref) {
+  const { className, children, value, onClick, ...rest } = props;
+  const { value: _v, ...radixRest } = rest;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.RadioItem,
+    {
+      ref,
+      value,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+});
+var MenuContextTrigger = React.forwardRef(function MenuContextTrigger2(props, ref) {
+  const { asChild: _asChild, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, ...rest });
+});
+var MenuTriggerItem = React.forwardRef(function MenuTriggerItem2(props, ref) {
+  const { startIcon, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
+    DropdownMenu.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        className
+      ),
+      ...rest,
+      children: [
+        startIcon,
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(LuChevronRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+});
+
+export { MenuArrow, MenuCheckboxItem, MenuContent, MenuContextTrigger, MenuItem, MenuItemCommand, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem };

package/dist/option-chain.cjs

@@ -0,0 +1,221 @@
+"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 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__ */ jsxRuntime.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__namespace.forwardRef(
+  function OptionChain2(props, ref) {
+    const {
+      symbol: _symbol,
+      expiration: _expiration,
+      strikes,
+      spotPrice,
+      onSelectContract,
+      className,
+      ...rest
+    } = props;
+    const handleClick = React__namespace.useCallback(
+      (quote, type, strike) => {
+        if (!quote || !onSelectContract) return;
+        onSelectContract({
+          symbol: quote.symbol,
+          type,
+          strike,
+          bid: quote.bid,
+          ask: quote.ask
+        });
+      },
+      [onSelectContract]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("w-full overflow-x-auto", className),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-zinc-800", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("th", { className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-500", children: "Strike" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("tr", { className: "border-b border-zinc-800/60", children: [
+              CALL_HEADERS.map((h) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-center text-[10px] font-medium uppercase tracking-wider text-zinc-500" }),
+              PUT_HEADERS.map((h) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(c?.bid),
+                      highlight: !!c,
+                      onClick: () => handleClick(c, "call", row.strike)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(c?.ask),
+                      highlight: !!c,
+                      onClick: () => handleClick(c, "call", row.strike)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmt(c?.last), highlight: !!c }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmtInt(c?.volume) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmtInt(c?.openInterest) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmtPct(c?.iv) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmt(c?.delta, 3) }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(QuoteCell, { value: fmt(p?.delta, 3), align: "right" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmtPct(p?.iv), align: "right" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmtInt(p?.openInterest), align: "right" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmtInt(p?.volume), align: "right" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmt(p?.last), align: "left", highlight: !!p }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(p?.ask),
+                      align: "left",
+                      highlight: !!p,
+                      onClick: () => handleClick(p, "put", row.strike)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    QuoteCell,
+                    {
+                      value: fmt(p?.bid),
+                      align: "left",
+                      highlight: !!p,
+                      onClick: () => handleClick(p, "put", row.strike)
+                    }
+                  )
+                ]
+              },
+              row.strike
+            );
+          }) })
+        ] })
+      }
+    );
+  }
+);
+
+exports.OptionChain = OptionChain;

package/dist/option-chain.d.cts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+interface OptionQuote {
+    symbol: string;
+    bid: number;
+    ask: number;
+    last: number;
+    volume: number;
+    openInterest: number;
+    iv: number;
+    delta: number;
+    gamma: number;
+    theta: number;
+    vega: number;
+}
+interface OptionContract {
+    symbol: string;
+    type: 'call' | 'put';
+    strike: number;
+    bid: number;
+    ask: number;
+}
+interface Strike {
+    strike: number;
+    call: OptionQuote | null;
+    put: OptionQuote | null;
+}
+interface OptionChainProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly symbol: string;
+    readonly expiration: string;
+    readonly strikes: Strike[];
+    readonly spotPrice: number;
+    readonly onSelectContract?: (contract: OptionContract) => void;
+}
+declare const OptionChain: React.ForwardRefExoticComponent<OptionChainProps & React.RefAttributes<HTMLDivElement>>;
+
+export { OptionChain, type OptionChainProps, type OptionContract, type OptionQuote, type Strike };

package/dist/option-chain.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+interface OptionQuote {
+    symbol: string;
+    bid: number;
+    ask: number;
+    last: number;
+    volume: number;
+    openInterest: number;
+    iv: number;
+    delta: number;
+    gamma: number;
+    theta: number;
+    vega: number;
+}
+interface OptionContract {
+    symbol: string;
+    type: 'call' | 'put';
+    strike: number;
+    bid: number;
+    ask: number;
+}
+interface Strike {
+    strike: number;
+    call: OptionQuote | null;
+    put: OptionQuote | null;
+}
+interface OptionChainProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly symbol: string;
+    readonly expiration: string;
+    readonly strikes: Strike[];
+    readonly spotPrice: number;
+    readonly onSelectContract?: (contract: OptionContract) => void;
+}
+declare const OptionChain: React.ForwardRefExoticComponent<OptionChainProps & React.RefAttributes<HTMLDivElement>>;
+
+export { OptionChain, type OptionChainProps, type OptionContract, type OptionQuote, type Strike };