@lightsparkdev/ui 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lightsparkdev/ui
 
+## 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
+
+- Updated dependencies [cb28f0e]
+  - @lightsparkdev/core@1.0.16
+
 ## 0.0.6
 
 ### Patch Changes

package/dist/{chunk-JYWYEOM6.js → chunk-2JM7UTAZ.js}

@@ -1,12 +1,12 @@
 import {
   Button
-} from "./chunk-FKETYVPP.js";
+} from "./chunk-76Q4BK35.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-UO6U7AYM.js";
+} from "./chunk-2YB7653N.js";
 import {
   standardContentInsetSmPx
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-HNVQIY5U.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -23,7 +23,9 @@ function ButtonRow({
   smSticky = true,
   headerHeight = 0
 }) {
-  return /* @__PURE__ */ jsx(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ jsx(StyledButtonRow, { className, children: buttons.map((button, idx) => /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)) }) });
+  return /* @__PURE__ */ jsx(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ jsx(StyledButtonRow, { className, children: buttons.map(
+    (button, idx) => button === "divider" ? /* @__PURE__ */ jsx(ButtonRowDivider, {}, idx) : /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)
+  ) }) });
 }
 var ButtonRowContainer = styled.div`
   max-width: 100%;
@@ -53,6 +55,11 @@ var ButtonRowContainer = styled.div`
       `
 )}
 `;
+var ButtonRowDivider = styled.div`
+  border-left: 1px #d9d9d9 solid;
+  margin-left: 16px;
+  padding-left: 16px;
+`;
 var StyledButtonRow = styled.div`
   ${overflowAutoWithoutScrollbars}
   background: ${({ theme }) => theme.bg};
@@ -65,6 +72,11 @@ var StyledButtonRow = styled.div`
     margin-left: 8px;
   }
 
+  & ${ButtonRowDivider} + button,
+  & ${ButtonRowDivider} + a {
+    margin-left: 0;
+  }
+
   ${bp.sm(`
     padding: 12px;
   `)}
@@ -72,5 +84,6 @@ var StyledButtonRow = styled.div`
 
 export {
   ButtonRow,
-  ButtonRowContainer
+  ButtonRowContainer,
+  StyledButtonRow
 };

package/dist/{chunk-UO6U7AYM.js → chunk-2YB7653N.js}

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

package/dist/{chunk-RTUZVKPK.js → chunk-36C653MV.js}

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

package/dist/{chunk-IQFU7CM5.js → chunk-4KWTXZRY.js}

@@ -1,6 +1,6 @@
 import {
   standardFocusOutline
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-HNVQIY5U.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-3CZOYF3X.js → chunk-6FHLZM6N.js}

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

package/dist/{chunk-K7D7A34K.js → chunk-744FBGRP.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-VHW2KROZ.js";
 
 // src/components/ContentTable.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-FKETYVPP.js → chunk-76Q4BK35.js}

@@ -1,21 +1,24 @@
 import {
   Link
-} from "./chunk-M56R3RJ7.js";
+} from "./chunk-OGSDZTHM.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   Loading
-} from "./chunk-NGS4OSWT.js";
+} from "./chunk-BAO4T4G5.js";
 import {
   UnstyledButton
-} from "./chunk-IQFU7CM5.js";
+} from "./chunk-4KWTXZRY.js";
+import {
+  LightTooltip
+} from "./chunk-NRXJA2PM.js";
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-VHW2KROZ.js";
 import {
   getFocusOutline
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-HNVQIY5U.js";
 import {
   colors,
   themeOr
@@ -28,6 +31,8 @@ import {
 // src/components/Button.tsx
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { uniqueId } from "lodash-es";
+import { Fragment, useRef } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function getTextColor({ color, theme, primary, blue }) {
   if (color) {
@@ -63,12 +68,37 @@ function getBackgroundColor({
   }
   return themeOr(colors.white, theme.c1Neutral)({ theme });
 }
-function getPaddingX({ size, ghost }) {
-  return ghost ? 0 : size === "lg" ? hPaddingPx : size === "md" ? 18 : 16;
+var paddingsY = {
+  lg: 14,
+  md: 9,
+  sm: 6
+};
+var roundPaddingsX = {
+  lg: 19,
+  md: 14,
+  sm: 10
+};
+var paddingsX = {
+  lg: 24,
+  md: 18,
+  sm: 16
+};
+function getPaddingX({
+  size,
+  ghost,
+  isRound
+}) {
+  return ghost ? 0 : isRound ? roundPaddingsX[size] : paddingsX[size];
 }
-function getPadding({ iconWidth, size, ghost, iconSide }) {
-  const paddingY = ghost ? 0 : size === "lg" ? 14 : size === "md" ? 9 : 6;
-  const paddingX = getPaddingX({ size, ghost });
+function getPadding({
+  iconWidth,
+  size,
+  ghost,
+  iconSide,
+  isRound
+}) {
+  const paddingY = ghost ? 0 : paddingsY[size];
+  const paddingX = getPaddingX({ size, ghost, isRound });
   const paddingForIcon = iconWidth && !ghost ? iconWidth : 0;
   return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
@@ -117,8 +147,10 @@ function Button({
   type = "button",
   blue = false,
   newTab = false,
-  zIndex = void 0
+  zIndex = void 0,
+  tooltipText
 }) {
+  const tooltipId = useRef(uniqueId());
   const iconMarginRight = 6;
   const iconSize = size === "lg" ? 16 : 12;
   let currentIcon = null;
@@ -127,30 +159,34 @@ function Button({
   } else if (icon) {
     currentIcon = /* @__PURE__ */ jsx(ButtonIcon, { ghost, iconSide, text, size, children: /* @__PURE__ */ jsx(Icon, { name: icon, width: iconSize }) });
   }
-  const content = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      css: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        iconSide === "left" && currentIcon,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            css: {
-              textOverflow: "ellipsis",
-              overflow: "hidden"
-            },
-            children: text
-          }
-        ),
-        iconSide === "right" && currentIcon
-      ]
-    }
-  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: [
+          iconSide === "left" && currentIcon,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              children: text
+            }
+          ),
+          iconSide === "right" && currentIcon
+        ]
+      })
+    ),
+    tooltipText ? /* @__PURE__ */ jsx(LightTooltip, { id: tooltipId.current, content: tooltipText }) : null
+  ] });
+  const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
     backgroundColor,
     color,
@@ -163,6 +199,7 @@ function Button({
     fullWidth,
     blue,
     iconSide,
+    isRound: isSingleCharRoundButton,
     iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
     isLoading: loading,
     disabled: disabled || loading,
@@ -179,7 +216,6 @@ function Button({
   }
   return href ? /* @__PURE__ */ jsx(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
-var hPaddingPx = 24;
 var buttonStyle = ({
   color,
   backgroundColor,
@@ -195,7 +231,8 @@ var buttonStyle = ({
   blue,
   text,
   zIndex,
-  iconSide
+  iconSide,
+  isRound
 }) => css`
   display: inline-flex;
   opacity: ${disabled && !isLoading ? 0.2 : 1};
@@ -232,8 +269,15 @@ var buttonStyle = ({
   primary,
   blue
 })};
-    border-radius: 32px;
-    padding: ${getPadding({ size, iconWidth, text, ghost, iconSide })};
+    border-radius: ${isRound ? "100%" : "32px"};
+    padding: ${getPadding({
+  size,
+  iconWidth,
+  text,
+  ghost,
+  iconSide,
+  isRound
+})};
     color: ${getTextColor({ color, theme, primary, blue })};
     transition:
       background-color 0.2s ease-out,
@@ -246,7 +290,7 @@ var buttonStyle = ({
 `;
 var ButtonIcon = styled.div`
   ${(props) => props.ghost ? "" : "position: absolute;"}
-  ${({ iconSide, ghost, text, size }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size, ghost })}px;`}
+  ${({ iconSide, ghost, text, size }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size, ghost, isRound: false })}px;`}
 `;
 var StyledButton = styled(UnstyledButton)`
   ${(props) => buttonStyle(props)}
@@ -257,9 +301,9 @@ var ButtonLink = styled(Link)`
 var ButtonHrefLink = styled.a`
   ${(props) => buttonStyle(props)}
 `;
-var ButtonSelector = (prepend = "", append = "") => `${prepend}${select(StyledButton)}${append}, ${prepend}${select(
-  ButtonLink
-)}${append}, ${prepend}${select(ButtonHrefLink)}${append}`;
+var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(StyledButton)}, ${select(ButtonLink)}, ${select(
+  ButtonHrefLink
+)})${append}`;
 
 export {
   Button,

package/dist/{chunk-NGS4OSWT.js → chunk-BAO4T4G5.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-VHW2KROZ.js";
 
 // src/components/Loading.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-NH25O7PC.js → chunk-CW3W2VTZ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-VHW2KROZ.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-G2PZZFJL.js → chunk-DAVVD7YE.js}

@@ -1,42 +1,42 @@
 import {
   toReactNodes
-} from "./chunk-TAI352I3.js";
+} from "./chunk-VE7J2N47.js";
 import {
   useLiveRef
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-RTUZVKPK.js";
+} from "./chunk-36C653MV.js";
 import {
   Button
-} from "./chunk-FKETYVPP.js";
+} from "./chunk-76Q4BK35.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   overflowAutoWithoutScrollbars,
   pxToRems
-} from "./chunk-UO6U7AYM.js";
+} from "./chunk-2YB7653N.js";
 import {
   UnstyledButton
-} from "./chunk-IQFU7CM5.js";
+} from "./chunk-4KWTXZRY.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-VHW2KROZ.js";
 import {
   overlaySurface,
   smContentInset,
   standardBorderRadius,
   standardContentInsetSmPx,
   standardFocusOutline
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-HNVQIY5U.js";
 import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
-import {
-  z
-} from "./chunk-CLU2FRJZ.js";
 
 // src/components/Modal.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-VBWTKANQ.js → chunk-FN5PM3HQ.js}

@@ -1,15 +1,15 @@
 import {
   StyledTitle
 } from "./chunk-FHNYQLMF.js";
-import {
-  StyledBody
-} from "./chunk-LD5LZXUP.js";
 import {
   StyledCode
 } from "./chunk-BCFRW7CV.js";
 import {
   displaySelector
 } from "./chunk-QGGOMPHZ.js";
+import {
+  StyledBody
+} from "./chunk-LD5LZXUP.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
@@ -19,13 +19,13 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-UO6U7AYM.js";
+} from "./chunk-2YB7653N.js";
 import {
   StyledContentTable
-} from "./chunk-K7D7A34K.js";
+} from "./chunk-744FBGRP.js";
 import {
   standardBorderRadius
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-HNVQIY5U.js";
 import {
   colors
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-RFGKH3R6.js → chunk-HNVQIY5U.js}

@@ -6,14 +6,10 @@ import {
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
-import {
-  z
-} from "./chunk-CLU2FRJZ.js";
 
 // src/styles/common.tsx
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Tooltip } from "react-tooltip";
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
@@ -91,9 +87,6 @@ var Subtext = styled.div`
 var darkGradientBg = css`
   background: ${darkGradient};
 `;
-var StyledTooltip = styled(Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
@@ -143,7 +136,6 @@ export {
   subtext,
   Subtext,
   darkGradientBg,
-  StyledTooltip,
   overlaySurfaceBorderColor,
   overlaySurface,
   mcBold,

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

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

package/dist/chunk-NRXJA2PM.js

@@ -0,0 +1,67 @@
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  overlaySurface
+} from "./chunk-HNVQIY5U.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-M56R3RJ7.js → chunk-OGSDZTHM.js}

@@ -50,19 +50,23 @@ function Link({
   blue = false,
   newTab = false
 }) {
-  if (!isString(to) && !externalLink) {
-    throw new Error("Link must have either `to` or `externalLink` defined");
+  if (!isString(to) && !externalLink && !onClick) {
+    throw new Error(
+      "Link must have either `to` or `externalLink` or `onClick` defined"
+    );
   }
   let toStr;
   if (isString(to)) {
     toStr = replaceParams(to, params);
     toStr += hash ? `#${hash}` : "";
-  } else {
+  } else if (externalLink) {
     const definedExternalLink = externalLink;
     if (!definedExternalLink.startsWith("http")) {
       throw new Error("Link's externalLink must start with http");
     }
     toStr = definedExternalLink;
+  } else {
+    toStr = "#";
   }
   return /* @__PURE__ */ jsx(
     RLink,