@lightsparkdev/ui 1.0.6 → 1.0.8

package/dist/chunk-KLC2OBTG.cjs

@@ -0,0 +1,243 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
+
+var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
+
+
+var _chunkWTHHP7G2cjs = require('./chunk-WTHHP7G2.cjs');
+
+// src/styles/fields.tsx
+var _react = require('@emotion/react');
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react3 = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var maxFieldWidth = "100%";
+var fieldWidth = "100%";
+var inputSpacingPx = 24;
+var formButtonTopMargin = "32px";
+var formButtonTopMarginStyle = _react.css`
+  margin-top: ${formButtonTopMargin};
+`;
+var standardBorderColor = ({ theme }) => _react.css`
+  border-color: ${_chunkWTHHP7G2cjs.themeOr.call(void 0, theme.c1Neutral, theme.mcNeutral)({ theme })};
+`;
+var inputBlockStyle = ({
+  theme,
+  hasValue,
+  hasError
+}) => _react.css`
+  ${_chunkPYL3O7AFcjs.subtext.call(void 0, { theme })}
+  ${standardBorderColor({ theme })}
+  ${_chunkPYL3O7AFcjs.standardBorderRadius.call(void 0, 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: ${theme.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
+`;
+var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
+var textInputFontWeight = 600;
+var textInputBorderRadiusPx = 8;
+var textInputPaddingPx = 12;
+var textInputPadding = `${textInputPaddingPx}px`;
+var textInputBorderColor = ({ theme }) => _chunkWTHHP7G2cjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme });
+var textInputBorderColorFocused = ({ theme }) => _chunkWTHHP7G2cjs.themeOr.call(void 0, theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputActiveStyles = ({
+  theme,
+  paddingLeftPx,
+  paddingRightPx
+}) => _react.css`
+  border-color: ${textInputBorderColorFocused({ theme })};
+  border-width: 2px;
+  padding: ${textInputPaddingPx - 1}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+`;
+var defaultTextInputTypography = {
+  type: "Body",
+  size: "Small",
+  color: "text"
+};
+var textInputStyle = ({
+  theme,
+  active,
+  disabled,
+  hasError,
+  paddingLeftPx,
+  paddingRightPx,
+  typography,
+  borderRadius
+}) => {
+  var _a;
+  return _react.css`
+  border-radius: ${borderRadius === "round" ? "999" : textInputBorderRadiusPx}px;
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
+  cursor: ${disabled ? "not-allowed" : "auto"};
+  box-sizing: border-box;
+  font-weight: ${textInputFontWeight};
+
+  position: relative;
+  z-index: ${_chunkZU72XWNEcjs.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;
+
+  ${_chunkZBBVZQKJcjs.applyTypography.call(void 0, 
+    theme,
+    (typography == null ? void 0 : typography.type) || defaultTextInputTypography.type,
+    (typography == null ? void 0 : typography.size) || defaultTextInputTypography.size,
+    (typography == null ? void 0 : typography.color) || defaultTextInputTypography.color
+  )}
+
+  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 = _styled2.default.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: ${_chunkZU72XWNEcjs.z.fieldError};
+`;
+var aboveFieldError = ({
+  theme,
+  hasError
+}) => _react.css`
+  ${hasError ? "border: none !important" : ""};
+  background-color: ${theme.bg};
+  position: relative;
+  z-index: ${_chunkZU72XWNEcjs.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 = _react3.useRef.call(void 0, null);
+  const [subtext2, setSubtext] = _react3.useState.call(void 0, text);
+  const [visible, setVisible] = _react3.useState.call(void 0, Boolean(text));
+  _react3.useLayoutEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, 
+    StyledInputSubtext,
+    {
+      visible,
+      hasError,
+      cursorPointer: Boolean(tooltipId),
+      children: tooltipId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
+    }
+  );
+}
+var StyledInputSubtext = _styled2.default.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
+}) => _react.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 = _styled2.default.label`
+  ${_chunkPYL3O7AFcjs.subtext}
+  ${labelStyle}
+`;
+var LabelDiv = _styled2.default.div`
+  ${_chunkPYL3O7AFcjs.subtext}
+  ${labelStyle}
+`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.maxFieldWidth = maxFieldWidth; exports.fieldWidth = fieldWidth; exports.inputSpacingPx = inputSpacingPx; exports.formButtonTopMargin = formButtonTopMargin; exports.formButtonTopMarginStyle = formButtonTopMarginStyle; exports.standardBorderColor = standardBorderColor; exports.inputBlockStyle = inputBlockStyle; exports.textInputPlaceholderColor = textInputPlaceholderColor; exports.textInputFontWeight = textInputFontWeight; exports.textInputBorderRadiusPx = textInputBorderRadiusPx; exports.textInputPaddingPx = textInputPaddingPx; exports.textInputPadding = textInputPadding; exports.textInputBorderColor = textInputBorderColor; exports.textInputBorderColorFocused = textInputBorderColorFocused; exports.defaultTextInputTypography = defaultTextInputTypography; exports.textInputStyle = textInputStyle; exports.FieldError = FieldError; exports.aboveFieldError = aboveFieldError; exports.InputSubtext = InputSubtext; exports.StyledInputSubtext = StyledInputSubtext; exports.labelStyle = labelStyle; exports.Label = Label; exports.LabelDiv = LabelDiv;

package/dist/chunk-KMFK2MOB.cjs

@@ -0,0 +1,163 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkBD3WXMLEcjs = require('./chunk-BD3WXMLE.cjs');
+
+
+var _chunkBOBYW7PPcjs = require('./chunk-BOBYW7PP.cjs');
+
+
+var _chunk4P7RPU32cjs = require('./chunk-4P7RPU32.cjs');
+
+
+var _chunkBY47I7ZPcjs = require('./chunk-BY47I7ZP.cjs');
+
+
+var _chunkKSKKC6C2cjs = require('./chunk-KSKKC6C2.cjs');
+
+// src/components/Pill.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Pill({
+  text,
+  onDeleteMouseDown,
+  onDeleteMouseUp,
+  onDeleteFromKeyboard,
+  icon,
+  loading = false,
+  cursor = "text",
+  isEditing = false,
+  onChangeTextInput = () => {
+  },
+  onFocusTextInput = () => {
+  },
+  onClickPillBody = () => {
+  },
+  onBlurTextInput = () => {
+  }
+}) {
+  const textInputRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsxs.call(void 0, 
+    StyledPill,
+    {
+      hasIcon: Boolean(icon || loading || onDeleteMouseDown),
+      cursor,
+      onClick: (event) => {
+        if (onClickPillBody) {
+          event.stopPropagation();
+          onClickPillBody();
+        }
+      },
+      children: [
+        isEditing ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          PillInput,
+          {
+            value: text,
+            onChange: (event) => onChangeTextInput(event.target.value),
+            onFocus: onFocusTextInput,
+            onBlur: onBlurTextInput,
+            ref: textInputRef
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PillText, { children: text }),
+        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          PillIconContainer,
+          {
+            hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
+            children: [
+              loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBD3WXMLEcjs.Loading, { size: 16.1, center: false, ml: 5 }),
+              !loading && onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkBOBYW7PPcjs.UnstyledButton,
+                {
+                  onMouseDown: handleOnDeleteMouseDown,
+                  onKeyDown: handleOnDeleteKeyDown,
+                  type: "button",
+                  css: {
+                    display: "flex",
+                    padding: "10px",
+                    marginRight: "-10px"
+                  },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBY47I7ZPcjs.Icon, { name: "DeleteIcon", width: 16.1 })
+                }
+              ),
+              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBY47I7ZPcjs.Icon, { name: icon, width: 16.1, color: "white" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var PillText = _styled2.default.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 = _styled2.default.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 = _styled2.default.div`
+  ${_chunk4P7RPU32cjs.flexCenter}
+  ${({ hasIconInset }) => hasIconInset ? `
+    background-color: ${_chunkKSKKC6C2cjs.colors.blue43};
+    padding: 8px;
+    right: 4px;
+    top: 3.5px;` : `right: 18px;`}
+  border-radius: 50%;
+  margin-left: 12px;
+  position: absolute;
+`;
+var PillInput = _styled2.default.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};
+`;
+
+
+
+exports.Pill = Pill;

package/dist/chunk-KPGYI4CN.cjs

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/components/CommandKey.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var CommandKey = ({
+  keyboardKey,
+  size,
+  color,
+  backgroundColor
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledCommandKey,
+    {
+      color,
+      size,
+      backgroundColor,
+      children: keyboardKey
+    }
+  );
+};
+var StyledCommandKey = _styled2.default.div`
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  color: ${(props) => props.color || "black"};
+  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor};` : ""}
+  border-radius: 3.6px;
+  min-width: ${(props) => props.size === "sm" ? 20 : 24}px;
+  height: ${(props) => props.size === "sm" ? 20 : 24}px;
+  font-size: ${(props) => props.size === "sm" ? 12 : 14}px;
+  padding: 3px 6px;
+`;
+
+
+
+exports.CommandKey = CommandKey;

package/dist/chunk-KPMZD7KJ.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/CircleCheckOutline.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function CircleCheckOutline() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M6 10L8.5 12.5L13.5 7.5M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.CircleCheckOutline = CircleCheckOutline;

package/dist/chunk-KS6GHRZI.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/constants.tsx
+var invertFillColor = "invert-fill-color";
+var invertStrokeColor = "invert-stroke-color";
+
+
+
+
+exports.invertFillColor = invertFillColor; exports.invertStrokeColor = invertStrokeColor;

package/dist/chunk-KSKKC6C2.cjs

@@ -0,0 +1,126 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/styles/colors.tsx
+var neutral = {
+  black: "#000000",
+  gray5: "#0D0D0D",
+  gray10: "#1A1A1A",
+  gray15: "#262626",
+  gray20: "#333333",
+  gray25: "#404040",
+  gray30: "#4D4D4D",
+  gray40: "#666666",
+  gray50: "#808080",
+  gray60: "#999999",
+  gray70: "#B3B3B3",
+  gray80: "#CCCCCC",
+  gray85: "#D9D9D9",
+  gray90: "#E6E6E6",
+  gray91: "#171717",
+  gray95: "#F2F2F2",
+  gray98: "#F9F9F9",
+  white: "#FFFFFF"
+};
+var darkGradient = "#1d1d1d linear-gradient(180deg, #090909 63.08%, #1d1d1d 100.52%)";
+var primary = "#FFF14E";
+var baseColors = _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, neutral), {
+  // green
+  success: "#17C27C",
+  green33: "#179257",
+  // blue
+  blue43: "#145BC6",
+  blue22: "#0E2E60",
+  blue39: "#0068C9",
+  blue37: "#21529c",
+  blue58: "#28BFFF",
+  // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
+  grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
+  grayBlue32: "#4F5156",
+  grayBlue43: "#686A72",
+  grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
+  grayBlue67: "#9BA7B9",
+  grayBlue69: "#A6A9BA",
+  grayBlue80: "#C0C9D6",
+  grayBlue88: "#DEDFE4",
+  grayBlue94: "#EBEEF2",
+  grayBlue96: "#F2F5F7",
+  // purple
+  purple43: "#820AD1",
+  purple55: "#8B38DE",
+  // red
+  red42a10: "#D800271A",
+  // yellow
+  primary,
+  warning: primary,
+  // orange
+  danger: "#FD2C0F",
+  // neutral
+  secondary: neutral.black
+});
+var colors = baseColors;
+function isColorKey(key) {
+  return key in colors;
+}
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
+  const bgRGB = hexToRGB(bgHex);
+  const hcRGB = hexToRGB(defaultHex);
+  if (!bgRGB || !hcRGB)
+    return defaultHex;
+  const c = contrast(bgRGB, hcRGB);
+  if (c < 4.5) {
+    return altHex;
+  }
+  return defaultHex;
+}
+function luminance(r, g, b) {
+  const a = [r, g, b].map(function(v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+function contrast(rgb1, rgb2) {
+  const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
+  const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+function componentToHex(c) {
+  const hex = c.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+function hexToRGB(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ] : [0, 0, 0];
+}
+function hexToRGBAStr(hex, alpha) {
+  const rgb = hexToRGB(hex);
+  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+exports.darkGradient = darkGradient; exports.colors = colors; exports.isColorKey = isColorKey; exports.hcNeutralFromBg = hcNeutralFromBg; exports.luminance = luminance; exports.contrast = contrast; exports.componentToHex = componentToHex; exports.rgbToHex = rgbToHex; exports.hexToRGB = hexToRGB; exports.hexToRGBAStr = hexToRGBAStr;