@lightsparkdev/ui 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lightsparkdev/ui
 
+## 0.0.9
+
+### Patch Changes
+
+- 79f9f9f: - Fix ButtonRow inset
+  - Add CardPage
+  - Add GradientCardHeader
+  - Default cancelText value for Modal and simplify inset refs
+- 062bf8a: - Add active prop to textInputStyle for indicating active style in response to external factors
+- 062bf8a: [js] Add engines field to all packages to indicate supported NodeJS versions
+- Updated dependencies [062bf8a]
+  - @lightsparkdev/core@1.0.18
+
+## 0.0.8
+
+### Patch Changes
+
+- df7bd3f: - Updates to LightTooltip
+- 20fb70b: - Add Badge, FileInput, LightTooltip, Pill
+  - Single character Button should be round
+  - Allow "divider" in ButtonRow
+- Updated dependencies [20fb70b]
+  - @lightsparkdev/core@1.0.17
+
 ## 0.0.7
 
 ### Patch Changes

package/dist/chunk-3EVAP5JT.js

@@ -0,0 +1,67 @@
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  overlaySurface
+} from "./chunk-JK4BP73A.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CIGAQ47A.js";
+
+// src/components/LightTooltip.tsx
+import { css } from "@emotion/css";
+import { useTheme } from "@emotion/react";
+import React, { useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import { Tooltip } from "react-tooltip";
+import { jsx } from "@emotion/react/jsx-runtime";
+function LightTooltip(props) {
+  const nodeRef = useRef(null);
+  const [nodeReady, setNodeReady] = React.useState(false);
+  useEffect(() => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const theme = useTheme();
+  console.log("LightTooltip.tsx: tooltipProps:", props);
+  return nodeReady && nodeRef.current ? ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      __spreadProps(__spreadValues({}, props), {
+        id: props.id || "",
+        content: props.content || "",
+        noArrow: true,
+        border: "0.05rem solid rgba(0, 0, 0, 0.1)",
+        className: styles({ theme }),
+        variant: "light",
+        delayShow: 180
+      })
+    ),
+    nodeRef.current
+  ) : null;
+}
+var styles = ({ theme }) => css`
+  font-size: "10px",
+  color: ${theme.c2Neutral};
+  border-radius: 8px !important;
+  padding: 16px !important;
+  z-index: ${z.tooltip};
+  ${overlaySurface({ theme, important: true })};
+
+  max-width: 260px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
+`;
+
+export {
+  LightTooltip
+};

package/dist/{chunk-IQFU7CM5.js → chunk-3GS5EFXV.js}

@@ -1,6 +1,6 @@
 import {
   standardFocusOutline
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 
 // src/components/UnstyledButton.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-CLU2FRJZ.js → chunk-55OQPFLF.js}

@@ -14,13 +14,13 @@ var z = {
   navAction: 101,
   smNavAction: 100,
   // keep under navDropdown
-  tooltip: 160,
   notificationBanner: 170,
   qrReaderVideo: 180,
   qrReaderOverlay: 181,
   modalOverlay: 190,
   modalContainer: 191,
   dropdown: 192,
+  tooltip: 193,
   toast: 200
 };
 

package/dist/{chunk-N2RDQJQ5.js → chunk-5POPBNPS.js}

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

package/dist/{chunk-WWFDI534.js → chunk-7C4MHI6Q.js}

@@ -1,12 +1,12 @@
 import {
   UnstyledButton
-} from "./chunk-IQFU7CM5.js";
+} from "./chunk-3GS5EFXV.js";
 import {
-  Icon
-} from "./chunk-NZJCJJH5.js";
+  LightTooltip
+} from "./chunk-3EVAP5JT.js";
 import {
-  StyledTooltip
-} from "./chunk-RFGKH3R6.js";
+  Icon
+} from "./chunk-RWIZ7Q74.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-3CZOYF3X.js → chunk-7T36JGTC.js}

@@ -1,9 +1,9 @@
 import {
   CopyToClipboardButton
-} from "./chunk-WWFDI534.js";
+} from "./chunk-7C4MHI6Q.js";
 import {
   standardBorderRadius
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 
 // src/components/SecretContainer.tsx
 import styled from "@emotion/styled";

package/dist/chunk-A4FQBEYU.js

@@ -0,0 +1,163 @@
+import {
+  Loading
+} from "./chunk-J4FJQ3FN.js";
+import {
+  UnstyledButton
+} from "./chunk-3GS5EFXV.js";
+import {
+  flexCenter
+} from "./chunk-FCZJILMW.js";
+import {
+  Icon
+} from "./chunk-RWIZ7Q74.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-ATUH6SXK.js

@@ -0,0 +1,233 @@
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  standardBorderRadius,
+  subtext
+} from "./chunk-JK4BP73A.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 textInputActiveStyles = ({
+  theme,
+  paddingLeftPx,
+  paddingRightPx
+}) => css`
+  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;` : ""}
+`;
+var textInputStyle = ({
+  theme,
+  active,
+  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,
+  &:has(:focus) {
+    ${textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+  }
+
+  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+
+  &::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-DQRN4E5G.js

@@ -0,0 +1,25 @@
+import {
+  standardBorderRadius
+} from "./chunk-JK4BP73A.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-RTUZVKPK.js → chunk-E3AOYBY5.js}

@@ -1,6 +1,6 @@
 import {
   standardBorderRadius
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 import {
   themeOr
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-I74XQIVV.js → chunk-EEFNW7NS.js}

@@ -1,12 +1,12 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-UO6U7AYM.js";
+} from "./chunk-FCZJILMW.js";
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   standardBorderRadius
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-UO6U7AYM.js → chunk-FCZJILMW.js}

@@ -1,6 +1,6 @@
 import {
   rootFontSizePx
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 
 // src/styles/utils.tsx
 import { css } from "@emotion/react";

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

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