@lightsparkdev/ui 0.0.6 → 0.0.8

package/dist/chunk-SZVMKB4E.js

@@ -0,0 +1,222 @@
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  standardBorderRadius,
+  subtext
+} from "./chunk-HNVQIY5U.js";
+import {
+  colors,
+  themeOr
+} from "./chunk-2VBDEO6M.js";
+
+// src/styles/fields.tsx
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var maxFieldWidth = "100%";
+var fieldWidth = "100%";
+var inputSpacingPx = 24;
+var formButtonTopMargin = "32px";
+var formButtonTopMarginStyle = css`
+  margin-top: ${formButtonTopMargin};
+`;
+var standardBorderColor = ({ theme }) => css`
+  border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
+`;
+var inputBlockStyle = ({
+  theme,
+  hasValue,
+  hasError
+}) => css`
+  ${subtext({ theme })}
+  ${standardBorderColor({ theme })}
+  ${standardBorderRadius(8)}
+  background-color: ${theme.bg};
+  border-width: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+  cursor: pointer;
+  padding: 52.5px;
+  ${hasError ? `border-style: solid; border-color: ${colors.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
+`;
+var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
+var textInputColor = ({ theme }) => theme.text;
+var textInputFontWeight = 600;
+var textInputBorderRadiusPx = 8;
+var textInputPaddingPx = 12;
+var textInputPadding = `${textInputPaddingPx}px`;
+var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
+var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputStyle = ({
+  theme,
+  disabled,
+  hasError,
+  paddingLeftPx,
+  paddingRightPx
+}) => {
+  var _a;
+  return css`
+  border-radius: ${textInputBorderRadiusPx}px;
+  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  cursor: ${disabled ? "not-allowed" : "auto"};
+  box-sizing: border-box;
+  font-weight: ${textInputFontWeight};
+
+  position: relative;
+  z-index: ${z.textInput};
+  font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
+  padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
+  border-style: solid;
+  border-width: ${hasError ? "2" : "1"}px;
+  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
+  line-height: 22px;
+  outline: none;
+  /* Use low contrast by default. Some fields, eg login, need high contrast simply
+     because of quirks with default autofill styles. Clicking in to an autofilled value
+     does not change the color of the text, it just uses the default field color */
+  color: ${textInputColor({ theme })};
+  font-size: 14px;
+  width: ${fieldWidth};
+  max-width: ${maxFieldWidth};
+  text-overflow: ellipsis;
+  &:focus,
+  &:active {
+    border-color: ${textInputBorderColorFocused({ theme })};
+    border-width: 2px;
+    color: ${textInputColor({ theme })};
+    padding: ${textInputPaddingPx - 1}px;
+    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+  }
+
+  &::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+
+  &:focus::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+`;
+};
+var FieldError = styled.div`
+  background-color: rgba(242, 239, 255, 1);
+  padding: 16px 16px 8px;
+  margin-top: -8px;
+  border-radius: 0 0 8px 8px;
+  position: relative;
+  z-index: ${z.fieldError};
+`;
+var aboveFieldError = ({
+  theme,
+  hasError
+}) => css`
+  ${hasError ? "border: none !important" : ""};
+  background-color: ${theme.bg};
+  position: relative;
+  z-index: ${z.fieldError + 1};
+  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
+`;
+var inputSubtextSeconds = 0.25;
+function InputSubtext({
+  text,
+  hasError = false,
+  tooltipId
+}) {
+  const timeoutRef = useRef(null);
+  const [subtext2, setSubtext] = useState(text);
+  const [visible, setVisible] = useState(Boolean(text));
+  useLayoutEffect(() => {
+    if (text) {
+      setSubtext(text);
+      setVisible(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    } else {
+      setVisible(false);
+      timeoutRef.current = setTimeout(() => {
+        setSubtext(void 0);
+      }, inputSubtextSeconds * 1e3);
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    StyledInputSubtext,
+    {
+      visible,
+      hasError,
+      cursorPointer: Boolean(tooltipId),
+      children: tooltipId ? /* @__PURE__ */ jsx("span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
+    }
+  );
+}
+var StyledInputSubtext = styled.div`
+  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
+  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
+  font-size: 12px;
+  font-size: ${({ visible }) => visible ? "12px" : "0px"};
+  opacity: ${({ visible }) => visible ? "1" : "0"};
+  overflow: hidden;
+  transition:
+    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
+  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
+  cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
+`;
+var labelStyle = ({
+  theme,
+  hasError
+}) => css`
+  color: ${hasError ? theme.danger : theme.text};
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & + * {
+    margin-top: 12px;
+  }
+  * ~ & {
+    margin-top: 40px;
+  }
+`;
+var Label = styled.label`
+  ${subtext}
+  ${labelStyle}
+`;
+var LabelDiv = styled.div`
+  ${subtext}
+  ${labelStyle}
+`;
+
+export {
+  maxFieldWidth,
+  fieldWidth,
+  inputSpacingPx,
+  formButtonTopMargin,
+  formButtonTopMarginStyle,
+  standardBorderColor,
+  inputBlockStyle,
+  textInputPlaceholderColor,
+  textInputColor,
+  textInputFontWeight,
+  textInputBorderRadiusPx,
+  textInputPaddingPx,
+  textInputPadding,
+  textInputBorderColor,
+  textInputBorderColorFocused,
+  textInputStyle,
+  FieldError,
+  aboveFieldError,
+  InputSubtext,
+  StyledInputSubtext,
+  labelStyle,
+  Label,
+  LabelDiv
+};

package/dist/chunk-U6XT5JKC.js

@@ -0,0 +1,25 @@
+import {
+  standardBorderRadius
+} from "./chunk-HNVQIY5U.js";
+import {
+  isLight
+} from "./chunk-2VBDEO6M.js";
+
+// src/components/Badge.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function Badge({ text, ml = 0 }) {
+  return text ? /* @__PURE__ */ jsx(StyledBadge, { ml, children: text }) : null;
+}
+var badgeVPadding = 2;
+var StyledBadge = styled.span`
+  ${standardBorderRadius(4)}
+  ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
+  padding: ${badgeVPadding}px 6px;
+  background-color: ${({ theme }) => isLight(theme) ? theme.c05Neutral : theme.c15Neutral};
+`;
+
+export {
+  Badge,
+  badgeVPadding
+};

package/dist/{chunk-WWFDI534.js → chunk-UWN53KLJ.js}

@@ -1,12 +1,12 @@
 import {
   UnstyledButton
-} from "./chunk-IQFU7CM5.js";
+} from "./chunk-4KWTXZRY.js";
 import {
-  Icon
-} from "./chunk-NZJCJJH5.js";
+  LightTooltip
+} from "./chunk-NRXJA2PM.js";
 import {
-  StyledTooltip
-} from "./chunk-RFGKH3R6.js";
+  Icon
+} from "./chunk-VHW2KROZ.js";
 import {
   __async
 } from "./chunk-CIGAQ47A.js";
@@ -49,7 +49,14 @@ var CopyToClipboardButton = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(StyledTooltip, { id, place: props.place || "right", variant: "dark", children: tooltipContent })
+    /* @__PURE__ */ jsx(
+      LightTooltip,
+      {
+        id,
+        place: props.place || "right",
+        content: tooltipContent
+      }
+    )
   ] });
 };
 var Children = styled.span`

package/dist/{chunk-TAI352I3.js → chunk-VE7J2N47.js}

@@ -1,6 +1,6 @@
 import {
   Link
-} from "./chunk-M56R3RJ7.js";
+} from "./chunk-OGSDZTHM.js";
 
 // src/utils/toReactNodes.tsx
 import { Fragment } from "react";

package/dist/{chunk-NZJCJJH5.js → chunk-VHW2KROZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-LAMQKQU3.js";
 import {
   rootFontSizePx
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-HNVQIY5U.js";
 import {
   __async
 } from "./chunk-CIGAQ47A.js";

package/dist/{chunk-N2RDQJQ5.js → chunk-WTO7C7WA.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-VHW2KROZ.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";

package/dist/{chunk-23SR7TFO.js → chunk-XAZ6NZ6I.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-VHW2KROZ.js";
 
 // src/components/CurrencyAmount.tsx
 import { gql } from "@apollo/client";

package/dist/chunk-YPB5SA65.js

@@ -0,0 +1,163 @@
+import {
+  Loading
+} from "./chunk-BAO4T4G5.js";
+import {
+  flexCenter
+} from "./chunk-2YB7653N.js";
+import {
+  UnstyledButton
+} from "./chunk-4KWTXZRY.js";
+import {
+  Icon
+} from "./chunk-VHW2KROZ.js";
+import {
+  colors
+} from "./chunk-2VBDEO6M.js";
+
+// src/components/Pill.tsx
+import styled from "@emotion/styled";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Pill({
+  text,
+  onDeleteMouseDown,
+  onDeleteMouseUp,
+  onDeleteFromKeyboard,
+  icon,
+  loading = false,
+  cursor = "text",
+  isEditing = false,
+  onChangeTextInput = () => {
+  },
+  onFocusTextInput = () => {
+  },
+  onClickPillBody = () => {
+  },
+  onBlurTextInput = () => {
+  }
+}) {
+  const textInputRef = useRef(null);
+  useEffect(() => {
+    if (isEditing && textInputRef.current) {
+      textInputRef.current.focus();
+    }
+  }, [isEditing]);
+  function handleOnDeleteMouseDown(event) {
+    if (onDeleteMouseDown) {
+      event.stopPropagation();
+      onDeleteMouseDown(event);
+    }
+  }
+  function handleOnDeleteKeyDown(event) {
+    if (onDeleteFromKeyboard) {
+      event.stopPropagation();
+      if (event.key === "Enter") {
+        onDeleteFromKeyboard();
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    StyledPill,
+    {
+      hasIcon: Boolean(icon || loading || onDeleteMouseDown),
+      cursor,
+      onClick: (event) => {
+        if (onClickPillBody) {
+          event.stopPropagation();
+          onClickPillBody();
+        }
+      },
+      children: [
+        isEditing ? /* @__PURE__ */ jsx(
+          PillInput,
+          {
+            value: text,
+            onChange: (event) => onChangeTextInput(event.target.value),
+            onFocus: onFocusTextInput,
+            onBlur: onBlurTextInput,
+            ref: textInputRef
+          }
+        ) : /* @__PURE__ */ jsx(PillText, { children: text }),
+        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ jsxs(
+          PillIconContainer,
+          {
+            hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
+            children: [
+              loading && /* @__PURE__ */ jsx(Loading, { size: 16.1, center: false, ml: 5 }),
+              !loading && onDeleteMouseDown && /* @__PURE__ */ jsx(
+                UnstyledButton,
+                {
+                  onMouseDown: handleOnDeleteMouseDown,
+                  onKeyDown: handleOnDeleteKeyDown,
+                  type: "button",
+                  css: {
+                    display: "flex",
+                    padding: "10px",
+                    marginRight: "-10px"
+                  },
+                  children: /* @__PURE__ */ jsx(Icon, { name: "DeleteIcon", width: 16.1 })
+                }
+              ),
+              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ jsx(Icon, { name: icon, width: 16.1, color: colors.white })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var PillText = styled.div`
+  /* For mobile ensure empty values don't prevent div from having height: */
+  height: 1.2rem;
+  min-width: 100px;
+  max-width: 210px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 600;
+`;
+var StyledPill = styled.div`
+  * + & {
+    margin-top: 16px;
+  }
+  background-color: ${({ theme }) => theme.c05Neutral};
+  color: ${({ theme }) => theme.text};
+  padding: 12px 18px;
+  ${({ hasIcon }) => hasIcon && `padding-right: 48px;`}
+  border-radius: 2em;
+  display: flex;
+  align-items: center;
+  cursor: ${({ cursor }) => cursor};
+  position: relative;
+`;
+var PillIconContainer = styled.div`
+  ${flexCenter}
+  ${({ hasIconInset }) => hasIconInset ? `
+    background-color: ${colors.blue43};
+    padding: 8px;
+    right: 4px;
+    top: 3.5px;` : `right: 18px;`}
+  border-radius: 50%;
+  margin-left: 12px;
+  position: absolute;
+`;
+var PillInput = styled.input`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: ${({ theme }) => theme.text};
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 210px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
+`;
+
+export {
+  Pill
+};

package/dist/{chunk-SVQELXFK.js → chunk-Z5TPS2BO.js}

@@ -1,6 +1,6 @@
 import {
   z
-} from "./chunk-CLU2FRJZ.js";
+} from "./chunk-55OQPFLF.js";
 
 // src/components/LightboxImage.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-T33SBHYI.js → chunk-ZSUX6RLD.js}

@@ -4,7 +4,7 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-HNVQIY5U.js";
 import {
   useThemeBg
 } from "./chunk-2VBDEO6M.js";
@@ -110,6 +110,8 @@ function GlobalStyles() {
     :root {
       ${cssVars.docHeight}: 100vh;
       --rt-opacity: 1 !important;
+      --rt-transition-show-delay: 0.15s !important;
+      --rt-transition-closing-delay: 0.2s !important;
     }
 
     html {

package/dist/{chunk-2WYVO6B2.js → chunk-ZYHA6MJC.js}

@@ -1,6 +1,6 @@
 import {
   GlobalStyles
-} from "./chunk-T33SBHYI.js";
+} from "./chunk-ZSUX6RLD.js";
 import {
   themes
 } from "./chunk-2VBDEO6M.js";