@luxfi/ui 8.0.0 → 8.1.0

package/dist/terminal.js

@@ -0,0 +1,350 @@
+"use client";
+import * as React from 'react';
+import { Box, cn, css } from '@hanzo/ui';
+import { Check, Copy } from 'lucide-react';
+import { toast } from 'sonner';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var themes = {
+  dark: {
+    background: "bg-[var(--color-bg-primary)]",
+    text: "text-[var(--color-text-disabled)]",
+    prompt: "text-[var(--lux-state-success)]",
+    input: "text-white",
+    output: "text-[var(--color-text-disabled)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--color-border-divider)]",
+    selection: "selection:bg-[var(--color-bg-primary)]"
+  },
+  light: {
+    background: "bg-white",
+    text: "text-[var(--color-text-primary)]",
+    prompt: "text-[var(--color-link-primary)]",
+    input: "text-[var(--color-text-primary)]",
+    output: "text-[var(--color-text-primary)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--color-border-divider)]",
+    selection: "selection:bg-[var(--color-link-primary)]"
+  },
+  matrix: {
+    background: "bg-black",
+    text: "text-[var(--lux-state-success)]",
+    prompt: "text-[var(--lux-state-success)]",
+    input: "text-[var(--lux-state-success)]",
+    output: "text-[var(--lux-state-success)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--lux-state-success)]",
+    selection: "selection:bg-[var(--lux-state-success)]"
+  },
+  dracula: {
+    background: "bg-[#282a36]",
+    text: "text-[#f8f8f2]",
+    prompt: "text-[#50fa7b]",
+    input: "text-[#f8f8f2]",
+    output: "text-[#6272a4]",
+    error: "text-[#ff5555]",
+    success: "text-[#50fa7b]",
+    info: "text-[#8be9fd]",
+    border: "border-[#44475a]",
+    selection: "selection:bg-[#44475a]"
+  }
+};
+var highlightSyntax = (text) => {
+  const patterns = [
+    { regex: /(".*?"|'.*?')/g, className: "text-[var(--lux-state-notice)]" },
+    // strings
+    { regex: /\b(true|false|null|undefined)\b/g, className: "text-[var(--lux-state-notice)]" },
+    // keywords
+    { regex: /\b(\d+)\b/g, className: "text-[var(--color-link-primary)]" },
+    // numbers
+    {
+      regex: /\b(function|const|let|var|if|else|for|while|return)\b/g,
+      className: "text-[var(--color-link-primary)]"
+    },
+    // js keywords
+    { regex: /(--?\w+)/g, className: "text-[var(--color-link-primary)]" }
+    // flags
+  ];
+  let highlighted = text;
+  patterns.forEach(({ regex, className }) => {
+    highlighted = highlighted.replace(
+      regex,
+      `<span class="${className}">$1</span>`
+    );
+  });
+  return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: highlighted } });
+};
+function Terminal({
+  prompt = "$",
+  initialCommands = [],
+  onCommand,
+  theme = "dark",
+  enableHistory = true,
+  enableAutoComplete = true,
+  autoCompleteCommands = [
+    "help",
+    "clear",
+    "exit",
+    "ls",
+    "cd",
+    "pwd",
+    "echo",
+    "date",
+    "whoami"
+  ],
+  maxHistorySize = 50,
+  className,
+  ...props
+}) {
+  const [commands, setCommands] = React.useState(initialCommands);
+  const [currentInput, setCurrentInput] = React.useState("");
+  const [historyIndex, setHistoryIndex] = React.useState(-1);
+  const [commandHistory, setCommandHistory] = React.useState([]);
+  const [suggestions, setSuggestions] = React.useState([]);
+  const [suggestionIndex, setSuggestionIndex] = React.useState(0);
+  const [copied, setCopied] = React.useState(null);
+  const terminalRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const currentTheme = themes[theme];
+  React.useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+    }
+  }, [commands]);
+  React.useEffect(() => {
+    if (enableAutoComplete && currentInput) {
+      const matches = autoCompleteCommands.filter(
+        (cmd) => cmd.toLowerCase().startsWith(currentInput.toLowerCase())
+      );
+      setSuggestions(matches);
+      setSuggestionIndex(0);
+    } else {
+      setSuggestions([]);
+    }
+  }, [currentInput, enableAutoComplete, autoCompleteCommands]);
+  const handleCommand = async (input) => {
+    if (!input.trim()) return;
+    const newCommand = {
+      id: Date.now().toString(),
+      input,
+      output: "",
+      timestamp: /* @__PURE__ */ new Date(),
+      type: "command"
+    };
+    if (input.toLowerCase() === "clear") {
+      setCommands([]);
+      setCurrentInput("");
+      return;
+    }
+    if (input.toLowerCase() === "help") {
+      newCommand.output = /* @__PURE__ */ jsxs(Box, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("div", { children: "Available commands:" }),
+        /* @__PURE__ */ jsxs(Box, { className: "ml-4 space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { children: "\u2022 clear - Clear the terminal" }),
+          /* @__PURE__ */ jsx("div", { children: "\u2022 help - Show this help message" }),
+          /* @__PURE__ */ jsx("div", { children: "\u2022 date - Show current date and time" }),
+          /* @__PURE__ */ jsx("div", { children: "\u2022 echo [text] - Print text to terminal" }),
+          autoCompleteCommands.map((cmd) => /* @__PURE__ */ jsxs("div", { children: [
+            "\u2022 ",
+            cmd
+          ] }, cmd))
+        ] })
+      ] });
+      newCommand.type = "info";
+    } else if (input.toLowerCase() === "date") {
+      newCommand.output = (/* @__PURE__ */ new Date()).toString();
+      newCommand.type = "success";
+    } else if (input.toLowerCase().startsWith("echo ")) {
+      newCommand.output = input.substring(5);
+      newCommand.type = "success";
+    } else if (onCommand) {
+      try {
+        const result = await onCommand(input);
+        newCommand.output = result;
+        newCommand.type = "success";
+      } catch (error) {
+        newCommand.output = `Error: ${error instanceof Error ? error.message : String(error)}`;
+        newCommand.type = "error";
+      }
+    } else {
+      newCommand.output = `Command not found: ${input}`;
+      newCommand.type = "error";
+    }
+    setCommands((prev) => [...prev, newCommand]);
+    if (enableHistory) {
+      setCommandHistory((prev) => {
+        const updated = [input, ...prev.filter((cmd) => cmd !== input)];
+        return updated.slice(0, maxHistorySize);
+      });
+    }
+    setCurrentInput("");
+    setHistoryIndex(-1);
+    setSuggestions([]);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleCommand(currentInput);
+    } else if (e.key === "ArrowUp" && enableHistory) {
+      e.preventDefault();
+      if (historyIndex < commandHistory.length - 1) {
+        const newIndex = historyIndex + 1;
+        setHistoryIndex(newIndex);
+        setCurrentInput(commandHistory[newIndex]);
+      }
+    } else if (e.key === "ArrowDown" && enableHistory) {
+      e.preventDefault();
+      if (historyIndex > 0) {
+        const newIndex = historyIndex - 1;
+        setHistoryIndex(newIndex);
+        setCurrentInput(commandHistory[newIndex]);
+      } else if (historyIndex === 0) {
+        setHistoryIndex(-1);
+        setCurrentInput("");
+      }
+    } else if (e.key === "Tab" && suggestions.length > 0) {
+      e.preventDefault();
+      const suggestion = suggestions[suggestionIndex];
+      if (suggestion) {
+        setCurrentInput(suggestion);
+        setSuggestions([]);
+      }
+    } else if (e.key === "Escape") {
+      setSuggestions([]);
+      setSuggestionIndex(0);
+    }
+  };
+  const handleCopy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(text);
+      setTimeout(() => setCopied(null), 2e3);
+      toast.success("Command copied to clipboard");
+    } catch (err) {
+      console.error("Failed to copy:", err);
+      toast.error("Failed to copy command");
+    }
+  };
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      setCurrentInput((prev) => prev + text);
+      inputRef.current?.focus();
+    } catch (err) {
+      console.error("Failed to paste:", err);
+      toast.error("Failed to paste from clipboard");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: terminalRef,
+      className: cn(
+        "relative rounded-lg border p-4 font-mono text-sm overflow-auto",
+        currentTheme.background,
+        currentTheme.text,
+        currentTheme.border,
+        currentTheme.selection,
+        className
+      ),
+      onClick: () => inputRef.current?.focus(),
+      onPaste: handlePaste,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "mb-4 flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "h-3 w-3 rounded-full bg-[var(--lux-state-error)]" }),
+          /* @__PURE__ */ jsx(Box, { className: "h-3 w-3 rounded-full bg-[var(--lux-state-notice)]" }),
+          /* @__PURE__ */ jsx(Box, { className: "h-3 w-3 rounded-full bg-[var(--lux-state-success)]" }),
+          /* @__PURE__ */ jsx(Box, { tag: "span", className: "ml-2 text-xs opacity-50", children: "terminal" })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "space-y-2", children: commands.map((cmd) => /* @__PURE__ */ jsxs(Box, { className: "group relative", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "flex items-start space-x-2", children: [
+            /* @__PURE__ */ jsx(Box, { tag: "span", className: currentTheme.prompt, children: prompt }),
+            /* @__PURE__ */ jsx(Box, { tag: "span", className: currentTheme.input, children: highlightSyntax(cmd.input) }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                tag: "button",
+                onClick: () => handleCopy(cmd.input),
+                className: "invisible group-hover:visible ml-auto opacity-50 hover:opacity-100",
+                "aria-label": "Copy command",
+                children: copied === cmd.input ? /* @__PURE__ */ jsx(Check, { style: css("h-3 w-3") }) : /* @__PURE__ */ jsx(Copy, { style: css("h-3 w-3") })
+              }
+            )
+          ] }),
+          cmd.output && /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "mt-1 pl-4",
+                cmd.type === "error" && currentTheme.error,
+                cmd.type === "success" && currentTheme.success,
+                cmd.type === "info" && currentTheme.info,
+                (!cmd.type || cmd.type === "command") && currentTheme.output
+              ),
+              children: typeof cmd.output === "string" ? highlightSyntax(cmd.output) : cmd.output
+            }
+          )
+        ] }, cmd.id)) }),
+        /* @__PURE__ */ jsxs(Box, { className: "relative mt-2", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(Box, { tag: "span", className: currentTheme.prompt, children: prompt }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                tag: "input",
+                ref: inputRef,
+                type: "text",
+                value: currentInput,
+                onChange: (e) => setCurrentInput(e.target.value),
+                onKeyDown: handleKeyDown,
+                className: cn(
+                  "flex-1 bg-transparent outline-none",
+                  currentTheme.input
+                ),
+                spellCheck: false,
+                autoComplete: "off",
+                "aria-label": "Terminal input"
+              }
+            )
+          ] }),
+          suggestions.length > 0 && /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "absolute left-0 top-full mt-1 rounded-md border p-1 shadow-lg z-10",
+                currentTheme.background,
+                currentTheme.border
+              ),
+              children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: cn(
+                    "rounded px-2 py-1 cursor-pointer",
+                    index === suggestionIndex ? "bg-[var(--color-bg-primary)]" : "hover:bg-[var(--color-bg-primary)]",
+                    currentTheme.text
+                  ),
+                  onClick: () => {
+                    setCurrentInput(suggestion);
+                    setSuggestions([]);
+                    inputRef.current?.focus();
+                  },
+                  children: suggestion
+                },
+                suggestion
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { Terminal };

package/dist/ticker-tape.cjs

@@ -0,0 +1,54 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function TickerTape() {
+  const container = react.useRef(null);
+  react.useEffect(() => {
+    if (!container.current) return;
+    if (container.current.dataset.initialized === "true") {
+      return;
+    }
+    container.current.dataset.initialized = "true";
+    const script = document.createElement("script");
+    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js";
+    script.type = "text/javascript";
+    script.async = true;
+    script.innerHTML = JSON.stringify({
+      symbols: [
+        { proName: "FOREXCOM:SPXUSD", title: "S&P 500" },
+        { proName: "FOREXCOM:NSXUSD", title: "US 100" },
+        { proName: "FX_IDC:EURUSD", title: "EUR/USD" },
+        { proName: "BITSTAMP:BTCUSD", title: "Bitcoin" },
+        { proName: "BITSTAMP:ETHUSD", title: "Ethereum" },
+        { description: "Tesla", proName: "NASDAQ:TSLA" },
+        { description: "Apple", proName: "NASDAQ:AAPL" },
+        { description: "Amazon", proName: "NASDAQ:AMZN" },
+        { description: "NVIDIA", proName: "NASDAQ:NVDA" },
+        { description: "Microsoft", proName: "NASDAQ:MSFT" },
+        { description: "Google", proName: "NASDAQ:GOOGL" },
+        { description: "Meta", proName: "NASDAQ:META" }
+      ],
+      showSymbolLogo: true,
+      isTransparent: false,
+      displayMode: "adaptive",
+      colorTheme: "dark",
+      locale: "en"
+    });
+    container.current.appendChild(script);
+    return () => {
+      if (container.current) {
+        delete container.current.dataset.initialized;
+        const scripts = container.current.querySelectorAll("script");
+        scripts.forEach((s) => s.remove());
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "tradingview-widget-container w-full", ref: container, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "tradingview-widget-container__widget" }) });
+}
+var ticker_tape_default = react.memo(TickerTape);
+
+module.exports = ticker_tape_default;

package/dist/ticker-tape.d.ts

@@ -0,0 +1,4 @@
+declare function TickerTape(): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TickerTape>;
+export default _default;
+//# sourceMappingURL=ticker-tape.d.ts.map

package/dist/ticker-tape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticker-tape.d.ts","sourceRoot":"","sources":["../src/ticker-tape.tsx"],"names":[],"mappings":"AAKA,iBAAS,UAAU,4CA4DlB;;AAED,wBAA+B"}

package/dist/ticker-tape.js

@@ -0,0 +1,52 @@
+"use client";
+import { memo, useRef, useEffect } from 'react';
+import { Box } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+function TickerTape() {
+  const container = useRef(null);
+  useEffect(() => {
+    if (!container.current) return;
+    if (container.current.dataset.initialized === "true") {
+      return;
+    }
+    container.current.dataset.initialized = "true";
+    const script = document.createElement("script");
+    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js";
+    script.type = "text/javascript";
+    script.async = true;
+    script.innerHTML = JSON.stringify({
+      symbols: [
+        { proName: "FOREXCOM:SPXUSD", title: "S&P 500" },
+        { proName: "FOREXCOM:NSXUSD", title: "US 100" },
+        { proName: "FX_IDC:EURUSD", title: "EUR/USD" },
+        { proName: "BITSTAMP:BTCUSD", title: "Bitcoin" },
+        { proName: "BITSTAMP:ETHUSD", title: "Ethereum" },
+        { description: "Tesla", proName: "NASDAQ:TSLA" },
+        { description: "Apple", proName: "NASDAQ:AAPL" },
+        { description: "Amazon", proName: "NASDAQ:AMZN" },
+        { description: "NVIDIA", proName: "NASDAQ:NVDA" },
+        { description: "Microsoft", proName: "NASDAQ:MSFT" },
+        { description: "Google", proName: "NASDAQ:GOOGL" },
+        { description: "Meta", proName: "NASDAQ:META" }
+      ],
+      showSymbolLogo: true,
+      isTransparent: false,
+      displayMode: "adaptive",
+      colorTheme: "dark",
+      locale: "en"
+    });
+    container.current.appendChild(script);
+    return () => {
+      if (container.current) {
+        delete container.current.dataset.initialized;
+        const scripts = container.current.querySelectorAll("script");
+        scripts.forEach((s) => s.remove());
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Box, { className: "tradingview-widget-container w-full", ref: container, children: /* @__PURE__ */ jsx(Box, { className: "tradingview-widget-container__widget" }) });
+}
+var ticker_tape_default = memo(TickerTape);
+
+export { ticker_tape_default as default };

package/dist/ticker.cjs

@@ -0,0 +1,66 @@
+"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 Ticker = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    speed = 50,
+    direction = "left",
+    pauseOnHover = true,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        ref,
+        className: ui.cn("group relative overflow-hidden", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Box,
+          {
+            className: ui.cn(
+              "flex w-fit animate-scroll",
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            ),
+            style: {
+              animationDuration: `${speed}s`,
+              animationDirection: direction === "right" ? "reverse" : "normal"
+            },
+            children: [
+              children,
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Ticker.displayName = "Ticker";
+
+exports.Ticker = Ticker;

package/dist/ticker.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface TickerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    speed?: number;
+    direction?: "left" | "right";
+    pauseOnHover?: boolean;
+}
+declare const Ticker: React.ForwardRefExoticComponent<TickerProps & React.RefAttributes<HTMLDivElement>>;
+export { Ticker };
+//# sourceMappingURL=ticker.d.ts.map

package/dist/ticker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.d.ts","sourceRoot":"","sources":["../src/ticker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFAkCX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/ticker.js

@@ -0,0 +1,44 @@
+"use client";
+import * as React from 'react';
+import { Box, cn } from '@hanzo/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Ticker = React.forwardRef(
+  ({
+    className,
+    children,
+    speed = 50,
+    direction = "left",
+    pauseOnHover = true,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: cn("group relative overflow-hidden", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: cn(
+              "flex w-fit animate-scroll",
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            ),
+            style: {
+              animationDuration: `${speed}s`,
+              animationDirection: direction === "right" ? "reverse" : "normal"
+            },
+            children: [
+              children,
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Ticker.displayName = "Ticker";
+
+export { Ticker };