@luxfi/ui 8.0.0 → 8.2.0

package/dist/tags.js

@@ -0,0 +1,364 @@
+"use client";
+import * as React3 from 'react';
+import React3__default, { Children, createElement } from 'react';
+import { Box, sx, cn, css } from '@hanzo/ui';
+import { X } from 'lucide-react';
+import { TooltipGroup, Tooltip as Tooltip$1, Text, XStack } from '@hanzo/gui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useClickAway } from '@uidotdev/usehooks';
+
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
+var Skeleton = React3.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = true, asChild, className, children, style, ...rest } = props;
+    if (!loading) {
+      if (asChild && React3.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-loading": true,
+        ...sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+React3.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        ...sx("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React3.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        loading,
+        ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
+      },
+      index
+    )) });
+  }
+);
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React3.useState(false);
+  React3.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
+}
+var useIsTouch = () => useBelow(TOUCH_PX);
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
+var Tooltip = React3.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      content,
+      contentProps,
+      defaultOpen = false,
+      triggerProps,
+      closeDelay = 100,
+      openDelay = 100,
+      interactive,
+      positioning
+    } = props;
+    const [open, setOpen] = React3.useState(defaultOpen);
+    const timeoutRef = React3.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React3.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.({ open: nextOpen });
+    }, [onOpenChange]);
+    const handleOpenChangeManual = React3.useCallback((nextOpen) => {
+      timeoutRef.current && window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => {
+        setOpen(nextOpen);
+        onOpenChange?.({ open: nextOpen });
+      }, nextOpen ? openDelay : closeDelay);
+    }, [closeDelay, openDelay, onOpenChange]);
+    const handleClickAway = React3.useCallback(() => {
+      if (open) handleOpenChangeManual(false);
+    }, [open, handleOpenChangeManual]);
+    const triggerRef = useClickAway(handleClickAway);
+    const handleTriggerClick = React3.useCallback(() => {
+      handleOpenChangeManual(!open);
+    }, [handleOpenChangeManual, open]);
+    const handleContentClick = React3.useCallback((event) => {
+      event.stopPropagation();
+      if (interactive) {
+        const closestLink = event.target?.closest("a");
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [interactive, handleOpenChangeManual]);
+    React3.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+    if (disabled || disableOnMobile && isMobile) return children;
+    const defaultShowArrow = variant === "popover" ? false : true;
+    const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
+    const isPopover = variant === "popover";
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsx(TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxs(
+      Tooltip$1,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
+        children: [
+          /* @__PURE__ */ jsx(
+            Tooltip$1.Trigger,
+            {
+              ref: triggerRef,
+              asChild: true,
+              ...isMobile ? { onClick: handleTriggerClick } : {},
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Tooltip$1.Content,
+            {
+              ref,
+              unstyled: true,
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
+              onClick: interactive ? handleContentClick : void 0,
+              ...selected ? { "data-selected": true } : {},
+              ...contentProps,
+              children: [
+                showArrow && /* @__PURE__ */ jsx(
+                  Tooltip$1.Arrow,
+                  {
+                    unstyled: true,
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
+                  }
+                ),
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+function TruncatedTextTooltip({ label, children }) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
+}
+var SIZE = {
+  sm: { padding: 4, height: 18, minHeight: 18 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
+  lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 }
+};
+var SIZE_TEXT = {
+  sm: { fontSize: 12, fontWeight: "500" },
+  md: { fontSize: 14, fontWeight: "500" },
+  lg: { fontSize: 14, fontWeight: "600" }
+};
+var COLOR_PALETTE = {
+  gray: { bg: "var(--color-badge-gray-bg)", fg: "var(--color-badge-gray-fg)" },
+  green: { bg: "var(--color-badge-green-bg)", fg: "var(--color-badge-green-fg)" },
+  red: { bg: "var(--color-badge-red-bg)", fg: "var(--color-badge-red-fg)" },
+  purple: { bg: "var(--color-badge-purple-bg)", fg: "var(--color-badge-purple-fg)" },
+  orange: { bg: "var(--color-badge-orange-bg)", fg: "var(--color-badge-orange-fg)" },
+  blue: { bg: "var(--color-badge-blue-bg)", fg: "var(--color-badge-blue-fg)" },
+  yellow: { bg: "var(--color-badge-yellow-bg)", fg: "var(--color-badge-yellow-fg)" },
+  teal: { bg: "var(--color-badge-teal-bg)", fg: "var(--color-badge-teal-fg)" },
+  cyan: { bg: "var(--color-badge-cyan-bg)", fg: "var(--color-badge-cyan-fg)" },
+  pink: { bg: "var(--color-badge-pink-bg)", fg: "var(--color-badge-pink-fg)" },
+  purple_alt: { bg: "var(--color-badge-purple-alt-bg)", fg: "var(--color-badge-purple-alt-fg)" },
+  blue_alt: { bg: "var(--color-badge-blue-alt-bg)", fg: "var(--color-badge-blue-alt-fg)" },
+  bright_gray: { bg: "var(--color-badge-bright-gray-bg)", fg: "var(--color-badge-bright-gray-fg)" },
+  bright_green: { bg: "var(--color-badge-bright-green-bg)", fg: "var(--color-badge-bright-green-fg)" },
+  bright_red: { bg: "var(--color-badge-bright-red-bg)", fg: "var(--color-badge-bright-red-fg)" },
+  bright_blue: { bg: "var(--color-badge-bright-blue-bg)", fg: "var(--color-badge-bright-blue-fg)" },
+  bright_yellow: { bg: "var(--color-badge-bright-yellow-bg)", fg: "var(--color-badge-bright-yellow-fg)" },
+  bright_teal: { bg: "var(--color-badge-bright-teal-bg)", fg: "var(--color-badge-bright-teal-fg)" },
+  bright_cyan: { bg: "var(--color-badge-bright-cyan-bg)", fg: "var(--color-badge-bright-cyan-fg)" },
+  bright_orange: { bg: "var(--color-badge-bright-orange-bg)", fg: "var(--color-badge-bright-orange-fg)" },
+  bright_purple: { bg: "var(--color-badge-bright-purple-bg)", fg: "var(--color-badge-bright-purple-fg)" },
+  bright_pink: { bg: "var(--color-badge-bright-pink-bg)", fg: "var(--color-badge-bright-pink-fg)" }
+};
+var TONE = {
+  subtle: (p) => ({ backgroundColor: p.bg, color: p.fg, borderWidth: 0 }),
+  solid: (p) => ({ backgroundColor: p.fg, color: p.bg, borderWidth: 0 }),
+  outline: (p) => ({
+    backgroundColor: "transparent",
+    color: p.fg,
+    borderWidth: 1,
+    borderColor: p.fg
+  })
+};
+var Badge = React3__default.forwardRef(
+  function Badge2(props, ref) {
+    const {
+      loading,
+      startElement,
+      children,
+      truncated = false,
+      endElement,
+      variant = "subtle",
+      size = "md",
+      colorPalette = "gray",
+      className,
+      style: badgeStyle,
+      ...rest
+    } = props;
+    const palette = COLOR_PALETTE[colorPalette];
+    const tone = TONE[variant](palette);
+    const child = children ? (
+      // `ellipsis` is gui Text's own built-in variant for single-line
+      // truncation — it expands to the same overflow/text-overflow/
+      // white-space/max-width rule Tailwind's `text-ellipsis` did, but
+      // through the component's own variants (guaranteed to compile),
+      // rather than naming each longhand as a separate style prop.
+      /* @__PURE__ */ jsx(Text, { ellipsis: true, ...SIZE_TEXT[size], color: tone.color, children })
+    ) : null;
+    const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
+    const badgeElement = /* @__PURE__ */ jsxs(
+      XStack,
+      {
+        ref,
+        render: /* @__PURE__ */ jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        borderRadius: 2,
+        gap: 4,
+        maxWidth: "100%",
+        userSelect: "text",
+        ...SIZE[size],
+        ...tone,
+        className,
+        style: badgeStyle,
+        ...rest,
+        children: [
+          startElement,
+          childrenElement,
+          endElement
+        ]
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: badgeElement });
+    }
+    return badgeElement;
+  }
+);
+var TONE2 = {
+  default: "gray",
+  secondary: "gray",
+  outline: "gray",
+  destructive: "red"
+};
+var Tags = React3.forwardRef(
+  ({ className, tags, onRemove, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: cn("flex flex-wrap gap-2", className),
+        ...props,
+        children: tags.map((tag) => /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            colorPalette: TONE2[variant],
+            ...sx(cn("gap-1", onRemove && "pr-1")),
+            children: [
+              tag.label,
+              onRemove && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  tag: "button",
+                  type: "button",
+                  onClick: () => onRemove(tag.id),
+                  className: "ml-1 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__ */ jsxs(Box, { tag: "span", className: "sr-only", children: [
+                      "Remove ",
+                      tag.label
+                    ] })
+                  ]
+                }
+              )
+            ]
+          },
+          tag.id
+        ))
+      }
+    );
+  }
+);
+Tags.displayName = "Tags";
+
+export { Tags };

package/dist/team-switcher-navigation-bar.cjs

@@ -0,0 +1,51 @@
+"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 TeamSwitcherNavigationBar = React__namespace.forwardRef(({ className, items = [], ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      tag: "nav",
+      ref,
+      className: ui.cn("border-b bg-background", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "container flex h-16 items-center gap-6", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
+        {
+          tag: "a",
+          href: item.href,
+          className: "text-sm font-medium transition-colors hover:text-primary",
+          children: item.label
+        },
+        item.href
+      )) })
+    }
+  );
+});
+TeamSwitcherNavigationBar.displayName = "TeamSwitcherNavigationBar";
+
+exports.TeamSwitcherNavigationBar = TeamSwitcherNavigationBar;

package/dist/team-switcher-navigation-bar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface TeamSwitcherNavigationBarProps extends React.HTMLAttributes<HTMLElement> {
+    items?: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+declare const TeamSwitcherNavigationBar: React.ForwardRefExoticComponent<TeamSwitcherNavigationBarProps & React.RefAttributes<HTMLElement>>;
+export { TeamSwitcherNavigationBar };
+//# sourceMappingURL=team-switcher-navigation-bar.d.ts.map

package/dist/team-switcher-navigation-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-switcher-navigation-bar.d.ts","sourceRoot":"","sources":["../src/team-switcher-navigation-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,8BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC/C;AAED,QAAA,MAAM,yBAAyB,oGAuB7B,CAAA;AAGF,OAAO,EAAE,yBAAyB,EAAE,CAAA"}

package/dist/team-switcher-navigation-bar.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from 'react';
+import { Box, cn } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+var TeamSwitcherNavigationBar = React.forwardRef(({ className, items = [], ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      tag: "nav",
+      ref,
+      className: cn("border-b bg-background", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Box, { className: "container flex h-16 items-center gap-6", children: items.map((item) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          tag: "a",
+          href: item.href,
+          className: "text-sm font-medium transition-colors hover:text-primary",
+          children: item.label
+        },
+        item.href
+      )) })
+    }
+  );
+});
+TeamSwitcherNavigationBar.displayName = "TeamSwitcherNavigationBar";
+
+export { TeamSwitcherNavigationBar };

package/dist/technical-analysis.cjs

@@ -0,0 +1,69 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function TechnicalAnalysis({
+  symbol = "NASDAQ:AAPL",
+  interval = "15m",
+  width = "100%",
+  height = "500",
+  locale = "en",
+  colorTheme = "dark",
+  isTransparent = false,
+  showIntervalTabs = true,
+  displayMode = "single"
+}) {
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!containerRef.current) return;
+    if (containerRef.current.dataset.initialized === "true") {
+      return;
+    }
+    containerRef.current.dataset.initialized = "true";
+    const script = document.createElement("script");
+    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js";
+    script.async = true;
+    script.innerHTML = JSON.stringify({
+      interval,
+      width,
+      isTransparent,
+      height,
+      symbol,
+      showIntervalTabs,
+      displayMode,
+      locale,
+      colorTheme
+    });
+    containerRef.current.appendChild(script);
+    return () => {
+      if (containerRef.current) {
+        delete containerRef.current.dataset.initialized;
+        const scripts = containerRef.current.querySelectorAll("script");
+        scripts.forEach((s) => s.remove());
+      }
+    };
+  }, [
+    symbol,
+    interval,
+    width,
+    height,
+    locale,
+    colorTheme,
+    isTransparent,
+    showIntervalTabs,
+    displayMode
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      className: "tradingview-widget-container w-full h-[500px]",
+      ref: containerRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "tradingview-widget-container__widget h-full" })
+    }
+  );
+}
+
+module.exports = TechnicalAnalysis;

package/dist/technical-analysis.d.ts

@@ -0,0 +1,13 @@
+export interface TechnicalAnalysisProps {
+    symbol?: string;
+    interval?: "1m" | "5m" | "15m" | "30m" | "1h" | "2h" | "4h" | "1D" | "1W" | "1M";
+    width?: string | number;
+    height?: string | number;
+    locale?: string;
+    colorTheme?: "light" | "dark";
+    isTransparent?: boolean;
+    showIntervalTabs?: boolean;
+    displayMode?: "single" | "multiple";
+}
+export default function TechnicalAnalysis({ symbol, interval, width, height, locale, colorTheme, isTransparent, showIntervalTabs, displayMode, }: TechnicalAnalysisProps): import("react").JSX.Element;
+//# sourceMappingURL=technical-analysis.d.ts.map

package/dist/technical-analysis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"technical-analysis.d.ts","sourceRoot":"","sources":["../src/technical-analysis.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EACL,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAA;IACR,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAsB,EACtB,QAAgB,EAChB,KAAc,EACd,MAAc,EACd,MAAa,EACb,UAAmB,EACnB,aAAqB,EACrB,gBAAuB,EACvB,WAAsB,GACvB,EAAE,sBAAsB,+BA6DxB"}

package/dist/technical-analysis.js

@@ -0,0 +1,67 @@
+"use client";
+import { useRef, useEffect } from 'react';
+import { Box } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+function TechnicalAnalysis({
+  symbol = "NASDAQ:AAPL",
+  interval = "15m",
+  width = "100%",
+  height = "500",
+  locale = "en",
+  colorTheme = "dark",
+  isTransparent = false,
+  showIntervalTabs = true,
+  displayMode = "single"
+}) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (containerRef.current.dataset.initialized === "true") {
+      return;
+    }
+    containerRef.current.dataset.initialized = "true";
+    const script = document.createElement("script");
+    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js";
+    script.async = true;
+    script.innerHTML = JSON.stringify({
+      interval,
+      width,
+      isTransparent,
+      height,
+      symbol,
+      showIntervalTabs,
+      displayMode,
+      locale,
+      colorTheme
+    });
+    containerRef.current.appendChild(script);
+    return () => {
+      if (containerRef.current) {
+        delete containerRef.current.dataset.initialized;
+        const scripts = containerRef.current.querySelectorAll("script");
+        scripts.forEach((s) => s.remove());
+      }
+    };
+  }, [
+    symbol,
+    interval,
+    width,
+    height,
+    locale,
+    colorTheme,
+    isTransparent,
+    showIntervalTabs,
+    displayMode
+  ]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "tradingview-widget-container w-full h-[500px]",
+      ref: containerRef,
+      children: /* @__PURE__ */ jsx(Box, { className: "tradingview-widget-container__widget h-full" })
+    }
+  );
+}
+
+export { TechnicalAnalysis as default };