@lightsparkdev/ui 0.0.0

package/dist/chunk-LJYASIJC.js

@@ -0,0 +1,117 @@
+import {
+  colors
+} from "./chunk-ACZDUWPH.js";
+
+// src/router.tsx
+import { omit } from "lodash-es";
+import { useCallback } from "react";
+import {
+  Link as RLink,
+  Navigate as RNavigate,
+  matchPath,
+  useLocation,
+  useNavigate as useRNavigate
+} from "react-router-dom";
+import { jsx } from "@emotion/react/jsx-runtime";
+function replaceParams(to, params) {
+  if (params) {
+    let toWithParams = to;
+    Object.entries(omit(params, "query")).forEach(([key, value]) => {
+      if (typeof value !== "string") {
+        throw new Error(
+          `Only 'query' may be an object. Route params must be a string, but '${key}' is not.`
+        );
+      }
+      toWithParams = toWithParams.replace(`:${key}`, value);
+    });
+    if (params.query) {
+      let query = params.query;
+      if (typeof query !== "string") {
+        query = Object.entries(params.query).map(([key, value]) => `${key}${value ? `=${value}` : ""}`).join("&");
+      }
+      toWithParams = `${toWithParams}?${query}`;
+    }
+    to = toWithParams;
+  }
+  return to;
+}
+function Link({
+  to,
+  params,
+  children,
+  css,
+  onClick,
+  className,
+  hash = null,
+  blue = false,
+  newTab = false
+}) {
+  let toStr = replaceParams(to, params);
+  toStr += hash ? `#${hash}` : "";
+  return /* @__PURE__ */ jsx(
+    RLink,
+    {
+      to: toStr,
+      css,
+      onClick,
+      className,
+      style: { color: blue ? colors.blue43 : "inherit" },
+      target: newTab ? "_blank" : void 0,
+      rel: newTab ? "noopener noreferrer" : void 0,
+      children
+    }
+  );
+}
+function Navigate({
+  to,
+  params,
+  state,
+  replace = false
+}) {
+  to = replaceParams(to, params);
+  return /* @__PURE__ */ jsx(RNavigate, { to, state, replace });
+}
+function useNavigate() {
+  const navigate = useRNavigate();
+  return useCallback(
+    (to, params, options) => {
+      if (typeof to === "string") {
+        to = replaceParams(to, params);
+        return navigate(to, options);
+      }
+      return navigate(to);
+    },
+    [navigate]
+  );
+}
+function useMatchRoutes(routes) {
+  const location = useLocation();
+  const doesMatch = routes.some((route) => matchPath(route, location.pathname));
+  return doesMatch;
+}
+function useFindMatchingRoute(routes) {
+  const location = useLocation();
+  const matchingRoute = routes.find(
+    (route) => matchPath(route, location.pathname)
+  );
+  return matchingRoute;
+}
+function useMatchRoute(route) {
+  const location = useLocation();
+  return matchPath(route, location.pathname);
+}
+function useCurrentRoute() {
+  const location = useLocation();
+  return location.pathname;
+}
+
+export {
+  replaceParams,
+  Link,
+  Navigate,
+  useNavigate,
+  useMatchRoutes,
+  useFindMatchingRoute,
+  useMatchRoute,
+  useCurrentRoute
+};

package/dist/chunk-LWTUQB7O.js

@@ -0,0 +1,34 @@
+import {
+  colors
+} from "./chunk-ACZDUWPH.js";
+import {
+  getTypographyString
+} from "./chunk-WVJNZRKF.js";
+
+// src/styles/fonts/typography/Display.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var Display = ({
+  children,
+  color,
+  size = "Medium" /* Medium */,
+  element = "h1"
+}) => {
+  return /* @__PURE__ */ jsx(StyledDisplay, { as: element, size, color, children });
+};
+var StyledDisplay = styled.span`
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app].Display[size]) : "";
+}}
+`;
+function displaySelector(element) {
+  return `${element}${StyledDisplay.toString()}`;
+}
+
+export {
+  ELEMENTS,
+  Display,
+  displaySelector
+};

package/dist/chunk-LZHLWOXG.js

@@ -0,0 +1,94 @@
+import {
+  rootFontSizePx
+} from "./chunk-QR7BKTM6.js";
+
+// src/styles/utils.tsx
+import { css } from "@emotion/react";
+function pxToRems(rems, asNum = false) {
+  const value = (rems / rootFontSizePx).toFixed(6);
+  return asNum ? Number(value) : `${value}rem`;
+}
+function remsToPx(rems, asNum = false) {
+  const value = (rootFontSizePx * rems).toFixed(6);
+  return asNum ? Number(value) : `${value}px`;
+}
+var extend = (...args) => css(...args);
+var size = {
+  px8: pxToRems(8),
+  px10: pxToRems(10),
+  px12: pxToRems(12),
+  px14: pxToRems(14),
+  px16: pxToRems(16),
+  px18: pxToRems(18),
+  px20: pxToRems(20),
+  px21: pxToRems(21),
+  px24: pxToRems(24)
+};
+var flexCenterAxis = css`
+  display: flex;
+  align-items: center;
+`;
+var flexCenter = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var inlineFlexCenter = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var flexBetween = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+var absoluteCenter = css`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+`;
+var textCenter = css`
+  text-align: center;
+`;
+var overflowAutoWithoutScrollbars = css`
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::-moz-scrollbar {
+    display: none;
+  }
+`;
+var lineClamp = (lines) => css`
+  display: -webkit-box;
+  -webkit-line-clamp: ${lines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+var ignoreSSRWarning = "/* @emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
+var firstChild = (style) => `&:first-child:not(style), style:first-child + & ${ignoreSSRWarning} { ${style} }`;
+
+export {
+  pxToRems,
+  remsToPx,
+  extend,
+  size,
+  flexCenterAxis,
+  flexCenter,
+  inlineFlexCenter,
+  flexBetween,
+  absoluteCenter,
+  textCenter,
+  overflowAutoWithoutScrollbars,
+  lineClamp,
+  ignoreSSRWarning,
+  firstChild
+};

package/dist/chunk-NBCCPGA4.js

@@ -0,0 +1,17 @@
+// src/hooks/useLiveRef.tsx
+import { useCallback, useRef, useState } from "react";
+function useLiveRef() {
+  const [ready, setReady] = useState(false);
+  const ref = useRef(null);
+  const refCb = useCallback((node) => {
+    if (node !== null) {
+      ref.current = node;
+      setReady(true);
+    }
+  }, []);
+  return [ready ? ref : { current: null }, refCb];
+}
+
+export {
+  useLiveRef
+};

package/dist/chunk-O27TAUAS.js

@@ -0,0 +1,76 @@
+import {
+  Button
+} from "./chunk-4X3K3VRC.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-LZHLWOXG.js";
+import {
+  standardContentInsetSmPx
+} from "./chunk-QR7BKTM6.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  __spreadValues
+} from "./chunk-CIGAQ47A.js";
+
+// src/components/ButtonRow.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function ButtonRow({
+  buttons,
+  className,
+  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)) }) });
+}
+var ButtonRowContainer = styled.div`
+  max-width: 100%;
+  ${({ theme }) => bp.sm(`background: ${theme.bg}`)}
+  ${({ headerHeight, smSticky }) => bp.sm(
+  `
+        ${smSticky ? `
+            display: block;
+            position: sticky;
+            top: ${headerHeight}px;
+            margin-top: 24px;
+            margin-left: -${standardContentInsetSmPx}px;
+            width: calc(100% + ${standardContentInsetSmPx * 2}px);
+            max-width: calc(100% + ${standardContentInsetSmPx * 2}px);
+            z-index: 2;` : `position: relative;`}
+        z-index: 2;
+        &:before {
+          content: "";
+          box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.09);
+          height: 1px;
+          position: absolute;
+          background: black;
+          bottom: 1px;
+          width: 100%;
+          z-index: 0;
+        }
+      `
+)}
+`;
+var StyledButtonRow = styled.div`
+  ${overflowAutoWithoutScrollbars}
+  background: ${({ theme }) => theme.bg};
+  display: flex;
+  position: relative;
+  z-index: 1;
+
+  & button:not(:first-of-type),
+  & a:not(:first-of-type) {
+    margin-left: 8px;
+  }
+
+  ${bp.sm(`
+    padding: 12px;
+  `)}
+`;
+
+export {
+  ButtonRow,
+  ButtonRowContainer
+};

package/dist/chunk-QR7BKTM6.js

@@ -0,0 +1,131 @@
+import {
+  colors,
+  darkGradient,
+  themeOr
+} from "./chunk-ACZDUWPH.js";
+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;
+var headingContentMarginPx = 30;
+var standardContentInsetPx = 32;
+var standardContentInsetMdPx = 24;
+var standardContentInsetSmPx = 16;
+var cardBorderRadiusPx = 16;
+var smContentInset = css`
+  ${bp.sm(`
+    margin-left: auto;
+    margin-right: auto;
+    width: calc(100% - ${standardContentInsetSmPx * 2}px);
+  `)}
+`;
+var minSmMaxLgContentInset = css`
+  ${bp.minSmMaxLg(`
+    width: calc(100% - ${standardContentInsetMdPx * 2}px);
+  `)}
+`;
+var standardContentInset = css`
+  margin-left: auto;
+  margin-right: auto;
+  width: calc(100% - ${standardContentInsetPx * 2}px);
+  max-width: 1280px;
+
+  ${smContentInset}
+  ${minSmMaxLgContentInset}
+`;
+var standardCardShadow = css`
+  box-shadow:
+    0px 4px 10px 0px rgba(0, 0, 0, 0.08),
+    0px 8px 24px 0px rgba(0, 0, 0, 0.04);
+`;
+var pageBorderRadiusPx = 16;
+var pageBorderRadius = `
+  border-radius: ${pageBorderRadiusPx}px;
+`;
+var getFocusOutline = ({
+  theme,
+  onBgHex
+}) => `${onBgHex ? theme.hcNeutralFromBg(onBgHex) : theme.hcNeutral} dashed 1px`;
+var outlineOffset = "-2px";
+var standardFocusOutline = ({ theme }) => css`
+  &,
+  & a,
+  & button {
+    &:focus-visible {
+      outline: ${getFocusOutline({ theme })};
+      outline-offset: ${outlineOffset};
+    }
+  }
+`;
+var delta = ({
+  theme,
+  delta: delta2 = 0,
+  invertSuccessColor = false
+}) => css`
+  color: ${delta2 >= 0 ? invertSuccessColor ? theme.danger : theme.success : invertSuccessColor ? theme.success : theme.danger};
+  border-color: ${delta2 >= 0 ? invertSuccessColor ? theme.danger : theme.success : invertSuccessColor ? theme.success : theme.danger};
+`;
+var subtext = ({ theme }) => css`
+  color: ${theme.c6Neutral};
+  font-weight: 600;
+`;
+var Subtext = styled.div`
+  ${subtext}
+`;
+var darkGradientBg = css`
+  background: ${darkGradient};
+`;
+var StyledTooltip = styled(Tooltip)`
+  z-index: ${z.modalOverlay};
+`;
+var overlaySurface = ({ theme }) => css`
+  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })};
+  border: 0.5px solid ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })};
+  ${themeOr(
+  "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);",
+  ""
+)({ theme })}
+`;
+var mcBold = (theme) => css`
+  font-weight: 600;
+  color: ${theme.mcNeutral};
+`;
+var mcBoldStyled = ({ theme }) => mcBold(theme);
+
+export {
+  rootFontSizePx,
+  rootFontSizeRems,
+  standardLineHeightEms,
+  headingContentMarginPx,
+  standardContentInsetPx,
+  standardContentInsetMdPx,
+  standardContentInsetSmPx,
+  cardBorderRadiusPx,
+  smContentInset,
+  minSmMaxLgContentInset,
+  standardContentInset,
+  standardCardShadow,
+  pageBorderRadiusPx,
+  pageBorderRadius,
+  getFocusOutline,
+  outlineOffset,
+  standardFocusOutline,
+  delta,
+  subtext,
+  Subtext,
+  darkGradientBg,
+  StyledTooltip,
+  overlaySurface,
+  mcBold,
+  mcBoldStyled
+};

package/dist/chunk-RUVXOYBL.js

@@ -0,0 +1,19 @@
+import {
+  getTypographyString
+} from "./chunk-WVJNZRKF.js";
+
+// src/styles/fonts/typography/Code.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var Code = ({ children, size = "Medium" /* Medium */ }) => {
+  return /* @__PURE__ */ jsx(CodeStyles, { size, children });
+};
+var CodeStyles = styled.div`
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app].Code[size]) : "";
+}}
+`;
+
+export {
+  Code
+};

package/dist/chunk-SVQELXFK.js

@@ -0,0 +1,131 @@
+import {
+  z
+} from "./chunk-CLU2FRJZ.js";
+
+// src/components/LightboxImage.tsx
+import styled from "@emotion/styled";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+var LightboxImage = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [boundingRect, setBoundingRect] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const imageRef = useRef(null);
+  const handleMouseUp = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleSetBoundingRect = (ref) => {
+    var _a;
+    const rect = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (rect) {
+      setBoundingRect({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      });
+    }
+  };
+  useEffect(() => {
+    handleSetBoundingRect(imageRef);
+  }, [imageRef]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DummyImage, { isOpen, boundingRect }),
+    /* @__PURE__ */ jsx(
+      StyledImage,
+      {
+        isOpen,
+        ref: imageRef,
+        boundingRect,
+        onMouseDown: () => handleSetBoundingRect(imageRef),
+        onMouseUp: handleMouseUp,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(Lightbox, { isOpen, onClick: handleMouseUp })
+  ] });
+};
+var DummyImage = styled.div`
+  ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
+`;
+var StyledImage = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  z-index: ${z.modalContainer};
+
+  animation-duration: 0.4s;
+  animation-fill-mode: forwards;
+  transition: all 0.2s ease-out;
+
+  ${(props) => props.isOpen ? `
+    animation-direction: normal;
+    position: fixed;
+    animation-name: zoomIn;
+    pointer-events: none;
+  ` : `
+    &:hover {
+      cursor: zoom-in;
+    }
+  `}
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  @keyframes zoomIn {
+    from {
+      ${(props) => {
+  const { x, y, width, height } = props.boundingRect;
+  return `
+          top: ${y}px;
+          left: ${x}px;
+          width: ${width}px;
+          height: ${height}px;
+        `;
+}}
+    }
+    to {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 24px;
+    }
+  }
+`;
+var Lightbox = styled.div`
+  transition: opacity 0.2s ease-out;
+  position: fixed;
+  opacity: 0;
+  z-index: ${z.modalOverlay};
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${({ theme, isOpen }) => isOpen ? `
+    opacity: 1;
+    background: ${theme.bg};
+
+    &:hover {
+      cursor: zoom-out;
+    }
+  ` : `
+    pointer-events: none;
+  `}
+`;
+
+export {
+  LightboxImage
+};

package/dist/chunk-W4GDCWKZ.js

@@ -0,0 +1,86 @@
+import {
+  colors
+} from "./chunk-ACZDUWPH.js";
+import {
+  getTypographyString
+} from "./chunk-WVJNZRKF.js";
+
+// src/styles/fonts/typography/Headline.tsx
+import styled from "@emotion/styled";
+import React from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var HEADINGS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function isReactNodeWithChildren(node) {
+  return Boolean(
+    node && React.isValidElement(node) && typeof node.props === "object" && node.props !== null && "children" in node.props && node.props.children !== void 0
+  );
+}
+var getHeadlineText = (element) => {
+  if (typeof element === "string") {
+    return element;
+  }
+  if (Array.isArray(element)) {
+    return getHeadlineText(element[0]);
+  }
+  if (isReactNodeWithChildren(element)) {
+    getHeadlineText(element.props.children);
+  }
+  throw new Error(
+    "Could not find text in Headline element: " + (element == null ? void 0 : element.toString())
+  );
+};
+var getHeaderId = (element) => {
+  if (React.isValidElement(element) && (element == null ? void 0 : element.type) === "a" && "href" in element.props) {
+    const props = element.props;
+    return getHeaderId(props.href);
+  }
+  if (typeof element === "string") {
+    return element.replace("#", "");
+  }
+  if (Array.isArray(element)) {
+    return getHeaderId(element[0]);
+  }
+  if (isReactNodeWithChildren(element)) {
+    return getHeaderId(element.props.children);
+  }
+  throw new Error(
+    "Could not find text in Headline element: " + (element == null ? void 0 : element.toString())
+  );
+};
+var toKebabCase = (str) => {
+  return str.replaceAll(" ", "-").toLowerCase();
+};
+var Headline = ({
+  children,
+  color,
+  size = "Medium" /* Medium */,
+  heading = "h1"
+}) => {
+  const id = toKebabCase(getHeaderId(children));
+  return /* @__PURE__ */ jsx(StyledHeadline, { as: heading, id, size, color, children });
+};
+var StyledHeadline = styled.span`
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app].Headline[size]) : "";
+}}
+
+  * {
+    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+    ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app].Headline[size]) : "";
+}}
+  }
+`;
+function headlineSelector(heading) {
+  return `${heading}${StyledHeadline.toString()}`;
+}
+var ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
+
+export {
+  HEADINGS,
+  getHeadlineText,
+  Headline,
+  headlineSelector,
+  ALL_HEADLINE_SELECTORS
+};