@luxfi/ui 8.0.0 → 8.1.0

package/dist/pill.cjs

@@ -0,0 +1,80 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+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);
+
+// src/pill.tsx
+var pillVariants = ui.variants(
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary hover:bg-primary/20",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        success: "bg-[var(--lux-state-success)] text-[var(--lux-state-success)] dark:bg-[var(--lux-state-success)]/30 dark:text-[var(--lux-state-success)]",
+        warning: "bg-[var(--lux-state-notice)] text-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)]/30 dark:text-[var(--lux-state-notice)]",
+        error: "bg-[var(--lux-state-error)] text-[var(--lux-state-error)] dark:bg-[var(--lux-state-error)]/30 dark:text-[var(--lux-state-error)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Pill = React__namespace.forwardRef(
+  ({ className, variant, onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        tag: "span",
+        ref,
+        className: ui.cn(pillVariants({ variant }), className),
+        ...props,
+        children: [
+          children,
+          onRemove && /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Box,
+            {
+              tag: "button",
+              type: "button",
+              onClick: onRemove,
+              className: "ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { style: ui.css("h-3 w-3") }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "sr-only", children: "Remove" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pill.displayName = "Pill";
+
+exports.Pill = Pill;
+exports.pillVariants = pillVariants;

package/dist/pill.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { VariantProps } from '@hanzo/ui';
+declare const pillVariants: (choice?: (import("@hanzo/ui").Choice<{
+    variant: {
+        default: string;
+        secondary: string;
+        outline: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+}> & {
+    class?: import("@hanzo/ui").ClassValue;
+    className?: import("@hanzo/ui").ClassValue;
+}) | undefined) => string;
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {
+    onRemove?: () => void;
+}
+declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;
+export { Pill, pillVariants };
+//# sourceMappingURL=pill.d.ts.map

package/dist/pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.d.ts","sourceRoot":"","sources":["../src/pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,YAAY,EAAiB,MAAM,WAAW,CAAA;AAK5D,QAAA,MAAM,YAAY;;;;;;;;;;;;yBAqBjB,CAAA;AAED,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,QAAA,MAAM,IAAI,mFAsBT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}

package/dist/pill.js

@@ -0,0 +1,57 @@
+"use client";
+import * as React from 'react';
+import { variants, Box, cn, css } from '@hanzo/ui';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/pill.tsx
+var pillVariants = variants(
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary hover:bg-primary/20",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        success: "bg-[var(--lux-state-success)] text-[var(--lux-state-success)] dark:bg-[var(--lux-state-success)]/30 dark:text-[var(--lux-state-success)]",
+        warning: "bg-[var(--lux-state-notice)] text-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)]/30 dark:text-[var(--lux-state-notice)]",
+        error: "bg-[var(--lux-state-error)] text-[var(--lux-state-error)] dark:bg-[var(--lux-state-error)]/30 dark:text-[var(--lux-state-error)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Pill = React.forwardRef(
+  ({ className, variant, onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        tag: "span",
+        ref,
+        className: cn(pillVariants({ variant }), className),
+        ...props,
+        children: [
+          children,
+          onRemove && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              tag: "button",
+              type: "button",
+              onClick: onRemove,
+              className: "ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
+              children: [
+                /* @__PURE__ */ jsx(X, { style: css("h-3 w-3") }),
+                /* @__PURE__ */ jsx(Box, { tag: "span", className: "sr-only", children: "Remove" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pill.displayName = "Pill";
+
+export { Pill, pillVariants };

package/dist/pixel-image.cjs

@@ -0,0 +1,71 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+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);
+
+var PixelImage = React__namespace.forwardRef(
+  ({ className, src, pixelSize = 10, ...props }, ref) => {
+    const canvasRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.src = src;
+      img.onload = () => {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(img, 0, 0);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (let y = 0; y < canvas.height; y += pixelSize) {
+          for (let x = 0; x < canvas.width; x += pixelSize) {
+            const pixelIndex = (y * canvas.width + x) * 4;
+            const r = imageData.data[pixelIndex];
+            const g = imageData.data[pixelIndex + 1];
+            const b = imageData.data[pixelIndex + 2];
+            const a = imageData.data[pixelIndex + 3] / 255;
+            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+            ctx.fillRect(x, y, pixelSize, pixelSize);
+          }
+        }
+      };
+    }, [src, pixelSize]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: ui.cn("max-w-full", className),
+        ...props
+      }
+    );
+  }
+);
+PixelImage.displayName = "PixelImage";
+
+exports.PixelImage = PixelImage;

package/dist/pixel-image.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface PixelImageProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+    src: string;
+    pixelSize?: number;
+}
+declare const PixelImage: React.ForwardRefExoticComponent<PixelImageProps & React.RefAttributes<HTMLCanvasElement>>;
+export { PixelImage };
+//# sourceMappingURL=pixel-image.d.ts.map

package/dist/pixel-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-image.d.ts","sourceRoot":"","sources":["../src/pixel-image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,2FAgDf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/pixel-image.js

@@ -0,0 +1,49 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+var PixelImage = React.forwardRef(
+  ({ className, src, pixelSize = 10, ...props }, ref) => {
+    const canvasRef = React.useRef(null);
+    React.useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.src = src;
+      img.onload = () => {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(img, 0, 0);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (let y = 0; y < canvas.height; y += pixelSize) {
+          for (let x = 0; x < canvas.width; x += pixelSize) {
+            const pixelIndex = (y * canvas.width + x) * 4;
+            const r = imageData.data[pixelIndex];
+            const g = imageData.data[pixelIndex + 1];
+            const b = imageData.data[pixelIndex + 2];
+            const a = imageData.data[pixelIndex + 3] / 255;
+            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+            ctx.fillRect(x, y, pixelSize, pixelSize);
+          }
+        }
+      };
+    }, [src, pixelSize]);
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: cn("max-w-full", className),
+        ...props
+      }
+    );
+  }
+);
+PixelImage.displayName = "PixelImage";
+
+export { PixelImage };

package/dist/popover.cjs

@@ -2,8 +2,8 @@
 'use strict';
 
 var gui = require('@hanzo/gui');
-var React2 = require('react');
 var ui = require('@hanzo/ui');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -188,7 +188,7 @@ var PopoverContent = React2__namespace.forwardRef(function PopoverContent2(props
     {
       ref,
       unstyled: true,
-      className: ui.cn(
+      ...ui.sx(
         "z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]",
         "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
         "shadow-[var(--shadow-popover)]",
@@ -211,7 +211,7 @@ var PopoverArrow = React2__namespace.forwardRef(function PopoverArrow2(props, re
     {
       ref,
       unstyled: true,
-      className: ui.cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...ui.sx("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
       ...rest
     }
   );
@@ -222,7 +222,7 @@ var PopoverCloseTrigger = React2__namespace.forwardRef(function PopoverCloseTrig
     gui.Popover.Close,
     {
       unstyled: true,
-      className: ui.cn("absolute top-1 right-1", className),
+      ...ui.sx("absolute top-1 right-1", className),
       ...rest,
       asChild: true,
       ref,
@@ -266,7 +266,7 @@ var PopoverBody = React2__namespace.forwardRef(function PopoverBody2(props, ref)
     ..._alignItems ? { alignItems: _alignItems } : {}
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    ui.Box,
     {
       ref,
       className: ui.cn("p-4", className),
@@ -278,7 +278,7 @@ var PopoverBody = React2__namespace.forwardRef(function PopoverBody2(props, ref)
 var PopoverHeader = React2__namespace.forwardRef(function PopoverHeader2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    ui.Box,
     {
       ref,
       className: ui.cn("px-4 pt-4 pb-0 font-semibold", className),
@@ -289,7 +289,7 @@ var PopoverHeader = React2__namespace.forwardRef(function PopoverHeader2(props,
 var PopoverFooter = React2__namespace.forwardRef(function PopoverFooter2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    ui.Box,
     {
       ref,
       className: ui.cn("px-4 pb-4 pt-0", className),
@@ -300,8 +300,9 @@ var PopoverFooter = React2__namespace.forwardRef(function PopoverFooter2(props,
 var PopoverTitle = React2__namespace.forwardRef(function PopoverTitle2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "h3",
+    ui.Box,
     {
+      tag: "h3",
       ref,
       className: ui.cn("text-base font-semibold", className),
       ...rest
@@ -311,8 +312,9 @@ var PopoverTitle = React2__namespace.forwardRef(function PopoverTitle2(props, re
 var PopoverDescription = React2__namespace.forwardRef(function PopoverDescription2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
+    ui.Box,
     {
+      tag: "p",
       ref,
       className: ui.cn("text-sm", className),
       ...rest

package/dist/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../src/popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../src/popover.tsx"],"names":[],"mappings":"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"}

package/dist/popover.js

@@ -1,7 +1,7 @@
 "use client";
 import { styled, View, Popover } from '@hanzo/gui';
+import { sx, Box, cn } from '@hanzo/ui';
 import * as React2 from 'react';
-import { cn } from '@hanzo/ui';
 import { jsx } from 'react/jsx-runtime';
 
 // src/popover.tsx
@@ -166,7 +166,7 @@ var PopoverContent = React2.forwardRef(function PopoverContent2(props, ref) {
     {
       ref,
       unstyled: true,
-      className: cn(
+      ...sx(
         "z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]",
         "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
         "shadow-[var(--shadow-popover)]",
@@ -189,7 +189,7 @@ var PopoverArrow = React2.forwardRef(function PopoverArrow2(props, ref) {
     {
       ref,
       unstyled: true,
-      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...sx("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
       ...rest
     }
   );
@@ -200,7 +200,7 @@ var PopoverCloseTrigger = React2.forwardRef(function PopoverCloseTrigger2(props,
     Popover.Close,
     {
       unstyled: true,
-      className: cn("absolute top-1 right-1", className),
+      ...sx("absolute top-1 right-1", className),
       ...rest,
       asChild: true,
       ref,
@@ -244,7 +244,7 @@ var PopoverBody = React2.forwardRef(function PopoverBody2(props, ref) {
     ..._alignItems ? { alignItems: _alignItems } : {}
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
       ref,
       className: cn("p-4", className),
@@ -256,7 +256,7 @@ var PopoverBody = React2.forwardRef(function PopoverBody2(props, ref) {
 var PopoverHeader = React2.forwardRef(function PopoverHeader2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
       ref,
       className: cn("px-4 pt-4 pb-0 font-semibold", className),
@@ -267,7 +267,7 @@ var PopoverHeader = React2.forwardRef(function PopoverHeader2(props, ref) {
 var PopoverFooter = React2.forwardRef(function PopoverFooter2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
       ref,
       className: cn("px-4 pb-4 pt-0", className),
@@ -278,8 +278,9 @@ var PopoverFooter = React2.forwardRef(function PopoverFooter2(props, ref) {
 var PopoverTitle = React2.forwardRef(function PopoverTitle2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "h3",
+    Box,
     {
+      tag: "h3",
       ref,
       className: cn("text-base font-semibold", className),
       ...rest
@@ -289,8 +290,9 @@ var PopoverTitle = React2.forwardRef(function PopoverTitle2(props, ref) {
 var PopoverDescription = React2.forwardRef(function PopoverDescription2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "p",
+    Box,
     {
+      tag: "p",
       ref,
       className: cn("text-sm", className),
       ...rest

package/dist/positions-list.cjs

@@ -0,0 +1,98 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lucideReact = require('lucide-react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function PositionsList({
+  positions = [],
+  onPositionClick
+}) {
+  const getTickerFromSymbol = (symbol) => {
+    return symbol.split(":")[1] || symbol;
+  };
+  if (positions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "p-4 text-center py-8 text-white/40", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "text-sm", children: "No open positions" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "p-4 space-y-2", children: positions.map((position) => {
+    const pl = (position.currentPrice - position.avgPrice) * position.shares;
+    const plPercent = (position.currentPrice - position.avgPrice) / position.avgPrice * 100;
+    const totalValue = position.currentPrice * position.shares;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        className: `bg-white/5 rounded-lg p-3 ${onPositionClick ? "cursor-pointer hover:bg-white/10 transition-colors" : ""}`,
+        onClick: () => onPositionClick?.(position),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "font-semibold text-white", children: getTickerFromSymbol(position.symbol) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Box,
+              {
+                className: `flex items-center gap-1 text-sm ${pl >= 0 ? "text-success" : "text-danger"}`,
+                children: [
+                  pl >= 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { size: 14 }),
+                  pl >= 0 ? "+" : "",
+                  plPercent.toFixed(2),
+                  "%"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "grid grid-cols-2 gap-2 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "text-white/60", children: "Shares" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "text-white font-medium", children: position.shares })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "text-white/60", children: "Avg Price" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "text-white font-medium", children: [
+                "$",
+                position.avgPrice.toFixed(2)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "grid grid-cols-2 gap-2 text-xs mt-2 pt-2 border-t border-white/10", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "text-white/60", children: "Current Price" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "text-white font-medium", children: [
+                "$",
+                position.currentPrice.toFixed(2)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "text-white/60", children: "Total Value" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "text-white font-medium", children: [
+                "$",
+                totalValue.toFixed(2)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "mt-2 pt-2 border-t border-white/10", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex justify-between items-center text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "text-white/60", children: "P&L" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Box,
+              {
+                tag: "span",
+                className: `font-semibold ${pl >= 0 ? "text-success" : "text-danger"}`,
+                children: [
+                  pl >= 0 ? "+" : "",
+                  "$",
+                  pl.toFixed(2)
+                ]
+              }
+            )
+          ] }) })
+        ]
+      },
+      position.symbol
+    );
+  }) });
+}
+var positions_list_default = PositionsList;
+
+exports.PositionsList = PositionsList;
+exports.default = positions_list_default;

package/dist/positions-list.d.ts

@@ -0,0 +1,13 @@
+export interface Position {
+    symbol: string;
+    shares: number;
+    avgPrice: number;
+    currentPrice: number;
+}
+export interface PositionsListProps {
+    positions: Position[];
+    onPositionClick?: (position: Position) => void;
+}
+export declare function PositionsList({ positions, onPositionClick, }: Partial<PositionsListProps>): import("react/jsx-runtime").JSX.Element;
+export default PositionsList;
+//# sourceMappingURL=positions-list.d.ts.map

package/dist/positions-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positions-list.d.ts","sourceRoot":"","sources":["../src/positions-list.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;CAC/C;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAc,EACd,eAAe,GAChB,EAAE,OAAO,CAAC,kBAAkB,CAAC,2CAqF7B;AAED,eAAe,aAAa,CAAA"}