@lightsparkdev/ui 0.0.6 → 0.0.8

package/dist/components/FileInput.d.cts

@@ -0,0 +1,21 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as react from 'react';
+import * as _emotion_react from '@emotion/react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+
+type FileInputProps = {
+    name: string;
+    onChange: (fileContent: string) => void;
+    filePurpose?: string;
+    onRemoveFile: () => void;
+};
+declare function FileInput({ name, onChange, filePurpose, onRemoveFile, }: FileInputProps): _emotion_react_jsx_runtime.JSX.Element;
+type StyledFileInputProps = {
+    hasValidFileSet: boolean;
+};
+declare const StyledFileInput: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: react.ElementType<any>;
+} & StyledFileInputProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export { FileInput, StyledFileInput };

package/dist/components/FileInput.d.ts

@@ -0,0 +1,21 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as react from 'react';
+import * as _emotion_react from '@emotion/react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+
+type FileInputProps = {
+    name: string;
+    onChange: (fileContent: string) => void;
+    filePurpose?: string;
+    onRemoveFile: () => void;
+};
+declare function FileInput({ name, onChange, filePurpose, onRemoveFile, }: FileInputProps): _emotion_react_jsx_runtime.JSX.Element;
+type StyledFileInputProps = {
+    hasValidFileSet: boolean;
+};
+declare const StyledFileInput: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: react.ElementType<any>;
+} & StyledFileInputProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export { FileInput, StyledFileInput };

package/dist/components/FileInput.js

@@ -0,0 +1,113 @@
+import {
+  InputSubtext,
+  inputBlockStyle
+} from "../chunk-SZVMKB4E.js";
+import {
+  Pill
+} from "../chunk-YPB5SA65.js";
+import "../chunk-BAO4T4G5.js";
+import "../chunk-2YB7653N.js";
+import "../chunk-4KWTXZRY.js";
+import "../chunk-55OQPFLF.js";
+import {
+  Icon
+} from "../chunk-VHW2KROZ.js";
+import "../chunk-LAMQKQU3.js";
+import "../chunk-HNVQIY5U.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
+import "../chunk-JSGRNWSB.js";
+import "../chunk-CIGAQ47A.js";
+
+// src/components/FileInput.tsx
+import styled from "@emotion/styled";
+import { Fragment, useRef, useState } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function FileInput({
+  name,
+  onChange,
+  filePurpose = "",
+  onRemoveFile
+}) {
+  const [fileName, setFileName] = useState();
+  const [fileContent, setFileContent] = useState();
+  const [fileErrorMsg, setFileErrorMsg] = useState();
+  const fileInputRef = useRef(null);
+  const handleChange = (changeEvent) => {
+    var _a;
+    const file = (_a = changeEvent.target.files) == null ? void 0 : _a[0];
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (readEvent) => {
+      var _a2;
+      let fileContent2 = (_a2 = readEvent == null ? void 0 : readEvent.target) == null ? void 0 : _a2.result;
+      setFileName(file.name);
+      if (!fileContent2) {
+        setFileErrorMsg("Unable to read file");
+        return;
+      }
+      if (typeof fileContent2 !== "string") {
+        fileContent2 = new TextDecoder().decode(fileContent2);
+      }
+      setFileErrorMsg(void 0);
+      setFileContent(fileContent2);
+      onChange(fileContent2);
+    };
+    reader.readAsText(file);
+  };
+  function handleRemoveFile() {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setFileName(void 0);
+    setFileContent(void 0);
+    setFileErrorMsg(void 0);
+    onRemoveFile();
+  }
+  return /* @__PURE__ */ jsxs(StyledFileInputContainer, { children: [
+    /* @__PURE__ */ jsxs(StyledFileInput, { hasValidFileSet: Boolean(fileName && fileContent), children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: name, children: fileName && fileContent ? /* @__PURE__ */ jsx(
+        Pill,
+        {
+          text: fileName,
+          cursor: "pointer",
+          onDeleteMouseDown: handleRemoveFile,
+          onDeleteFromKeyboard: handleRemoveFile
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { name: "Upload", width: 26, tutorialStep: 6 }),
+        "Upload ",
+        filePurpose || "",
+        " file"
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "file",
+          id: name,
+          onChange: handleChange,
+          ref: fileInputRef
+        }
+      )
+    ] }),
+    fileErrorMsg ? /* @__PURE__ */ jsx(InputSubtext, { text: fileErrorMsg, hasError: true }) : null
+  ] });
+}
+var StyledFileInputContainer = styled.div``;
+var StyledFileInput = styled.div`
+  input[type="file"] {
+    display: none;
+  }
+
+  label {
+    display: block;
+    cursor: pointer;
+    ${({ theme, hasValidFileSet }) => inputBlockStyle({ theme, hasValue: hasValidFileSet, hasError: false })}
+  }
+`;
+export {
+  FileInput,
+  StyledFileInput
+};

package/dist/components/Icon.cjs

@@ -77,7 +77,6 @@ var import_react5 = require("react");
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -1283,32 +1282,6 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
@@ -1355,9 +1328,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/utils/strings.tsx
 function isString(str) {

package/dist/components/Icon.js

@@ -1,13 +1,12 @@
 import {
   Icon,
   IconContainer
-} from "../chunk-NZJCJJH5.js";
+} from "../chunk-VHW2KROZ.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-RFGKH3R6.js";
+import "../chunk-HNVQIY5U.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   Icon,