@lightsparkdev/ui 0.0.13 → 1.0.0

package/dist/chunk-ZFDYANKZ.js

@@ -0,0 +1,372 @@
+import {
+  getTypography
+} from "./chunk-ENBUKLVT.js";
+import {
+  useBreakpoints
+} from "./chunk-JSGRNWSB.js";
+import {
+  buttonsThemeBase,
+  defaultButtonsTheme
+} from "./chunk-GKBQAEH5.js";
+import {
+  colors,
+  darkGradient,
+  hcNeutralFromBg,
+  isColorKey
+} from "./chunk-KYTOF4WO.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-LOPKRCGI.js";
+
+// src/styles/themes.tsx
+import { css, useTheme } from "@emotion/react";
+import merge from "deepmerge";
+var Themes = /* @__PURE__ */ ((Themes2) => {
+  Themes2["Light"] = "light";
+  Themes2["Dark"] = "dark";
+  Themes2["LightsparkDocsLight"] = "lightsparkDocsLight";
+  Themes2["LightsparkDocsDark"] = "lightsparkDocsDark";
+  Themes2["UmameDocsLight"] = "umameDocsLight";
+  Themes2["UmameDocsDark"] = "umameDocsDark";
+  Themes2["BridgeLight"] = "bridgeLight";
+  Themes2["BridgeDark"] = "bridgeDark";
+  return Themes2;
+})(Themes || {});
+var baseThemeColors = {
+  bg: colors.white,
+  smBg: colors.white,
+  c05Neutral: colors.gray95,
+  c1Neutral: colors.gray90,
+  c15Neutral: colors.gray85,
+  c2Neutral: colors.gray80,
+  c3Neutral: colors.gray70,
+  c4Neutral: colors.gray60,
+  c5Neutral: colors.gray50,
+  c6Neutral: colors.gray40,
+  c7Neutral: colors.gray30,
+  c8Neutral: colors.gray20,
+  c9Neutral: colors.gray10,
+  danger: colors.danger,
+  hcNeutral: colors.black,
+  info: colors.blue43,
+  lcNeutral: colors.gray80,
+  link: colors.blue43,
+  mcNeutral: colors.gray40,
+  onInfoText: colors.white,
+  onPrimaryText: colors.black,
+  onSuccessText: colors.white,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  success: colors.success,
+  text: colors.black,
+  vlcNeutral: colors.gray95,
+  warning: colors.warning
+};
+var themeOrColorKeyValues = [
+  ...Object.keys(baseThemeColors),
+  ...Object.keys(colors)
+];
+var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
+  // base type should be Themes but default to Light
+  type: "light" /* Light */,
+  typography: getTypography("Lightspark" /* Lightspark */),
+  hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
+  buttons: defaultButtonsTheme,
+  loading: "LoadingSpinner"
+});
+var lightBaseTheme = baseTheme;
+var darkBaseTheme = {
+  type: "dark" /* Dark */,
+  bg: colors.black,
+  smBg: colors.black,
+  c05Neutral: colors.gray5,
+  c1Neutral: colors.gray10,
+  c15Neutral: colors.gray15,
+  c2Neutral: colors.gray20,
+  c3Neutral: colors.gray30,
+  c4Neutral: colors.gray40,
+  c5Neutral: colors.gray50,
+  c6Neutral: colors.gray60,
+  c7Neutral: colors.gray70,
+  c8Neutral: colors.gray80,
+  c9Neutral: colors.gray90,
+  danger: colors.danger,
+  hcNeutral: colors.white,
+  hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.white, colors.black),
+  info: colors.white,
+  lcNeutral: colors.gray40,
+  link: colors.blue43,
+  mcNeutral: colors.gray60,
+  onInfoText: colors.white,
+  onPrimaryText: colors.black,
+  onSuccessText: colors.white,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  success: colors.success,
+  text: colors.white,
+  typography: getTypography("Lightspark" /* Lightspark */),
+  vlcNeutral: colors.gray20,
+  warning: colors.warning,
+  buttons: defaultButtonsTheme,
+  loading: "LoadingSpinner"
+};
+var lightTheme = extend(lightBaseTheme, {
+  header: extendBase(lightBaseTheme, {
+    text: colors.gray60
+  }),
+  nav: extendBase(lightBaseTheme, {
+    text: colors.gray10,
+    secondary: colors.gray40
+  }),
+  content: extendBase(lightBaseTheme, {
+    bg: colors.white,
+    smBg: colors.white
+  }),
+  controls: extendBase(lightBaseTheme, {
+    bg: colors.gray95,
+    smBg: colors.gray95,
+    text: colors.gray60,
+    secondary: colors.secondary
+  })
+});
+var darkTheme = extend(darkBaseTheme, {
+  header: extendBase(darkBaseTheme, {}),
+  nav: extendBase(darkBaseTheme, {}),
+  content: extendBase(darkBaseTheme, {}),
+  controls: extendBase(darkBaseTheme, {
+    bg: colors.gray40,
+    smBg: colors.gray40,
+    text: colors.white,
+    secondary: colors.secondary
+  })
+});
+var umameDocsLightTheme = extend(lightTheme, {
+  type: "umameDocsLight" /* UmameDocsLight */,
+  bg: colors.gray98,
+  smBg: colors.gray98,
+  secondary: colors.grayBlue43,
+  text: colors.grayBlue9,
+  link: colors.blue39,
+  typography: getTypography("UmameDocs" /* UmameDocs */, {
+    main: "Manrope",
+    code: "Monaco"
+  }),
+  content: extendBase(lightBaseTheme, {
+    bg: colors.gray98,
+    smBg: colors.gray98,
+    text: colors.grayBlue9,
+    secondary: colors.grayBlue43
+  }),
+  controls: extendBase(lightBaseTheme, {
+    text: colors.grayBlue9,
+    secondary: colors.grayBlue43,
+    bg: colors.grayBlue94
+  })
+});
+var umameDocsDarkTheme = extend(darkTheme, {
+  type: "umameDocsDark" /* UmameDocsDark */,
+  bg: colors.gray98,
+  smBg: colors.gray98,
+  secondary: colors.grayBlue43,
+  text: colors.grayBlue9,
+  link: colors.blue39,
+  typography: getTypography("UmameDocs" /* UmameDocs */, {
+    main: "Manrope",
+    code: "Monaco"
+  })
+});
+var lightsparkDocsLightTheme = extend(lightTheme, {
+  type: "lightsparkDocsLight" /* LightsparkDocsLight */,
+  typography: getTypography("LightsparkDocs" /* LightsparkDocs */)
+});
+var lightsparkDocsDarkTheme = extend(darkTheme, {
+  type: "lightsparkDocsDark" /* LightsparkDocsDark */,
+  typography: getTypography("LightsparkDocs" /* LightsparkDocs */)
+});
+var bridgeBaseSettings = {
+  secondary: colors.grayBlue43,
+  mcNeutral: colors.grayBlue43,
+  typography: getTypography("Bridge" /* Bridge */, {
+    main: "Manrope",
+    code: "Monaco"
+  }),
+  buttons: merge(buttonsThemeBase, {
+    defaultTypography: "Title",
+    defaultSize: "Medium",
+    defaultBorderRadius: 8,
+    defaultBorderWidth: 0,
+    kinds: {
+      primary: {
+        defaultBackgroundColor: "blue39",
+        defaultHoverBackgroundColor: "blue37"
+      },
+      ghost: {
+        defaultBackgroundColor: "transparent",
+        defaultBorderWidth: 0,
+        defaultHoverBackgroundColor: "transparent",
+        defaultHoverBorderColor: "transparent",
+        defaultPaddingsY: {
+          ExtraSmall: 0,
+          Small: 0,
+          Schmedium: 0,
+          Medium: 0,
+          Mlarge: 0,
+          Large: 0
+        }
+      },
+      secondary: {
+        defaultBackgroundColor: "transparent",
+        defaultHoverBackgroundColor: "grayBlue94",
+        defaultBorderColor: "grayBlue80",
+        defaultBorderWidth: 1
+      }
+    }
+  })
+};
+var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
+  type: "bridgeLight" /* BridgeLight */,
+  loading: "UmaBridgeLoading",
+  bg: colors.gray98,
+  smBg: colors.gray98,
+  text: colors.grayBlue9,
+  secondary: colors.grayBlue43
+}));
+var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
+  type: "bridgeDark" /* BridgeDark */
+}));
+var themes = {
+  ["light" /* Light */]: lightTheme,
+  ["dark" /* Dark */]: darkTheme,
+  ["lightsparkDocsLight" /* LightsparkDocsLight */]: lightsparkDocsLightTheme,
+  ["lightsparkDocsDark" /* LightsparkDocsDark */]: lightsparkDocsDarkTheme,
+  ["umameDocsLight" /* UmameDocsLight */]: umameDocsLightTheme,
+  ["umameDocsDark" /* UmameDocsDark */]: umameDocsDarkTheme,
+  ["bridgeLight" /* BridgeLight */]: bridgeLightTheme,
+  ["bridgeDark" /* BridgeDark */]: bridgeDarkTheme
+};
+function extend(obj, rest) {
+  return __spreadValues(__spreadValues({}, obj), rest);
+}
+function extendBase(obj, rest) {
+  return __spreadValues(__spreadValues({}, obj), rest);
+}
+function setFonts(theme, fontFamilies) {
+  return __spreadProps(__spreadValues({}, theme), {
+    typography: getTypography(theme.typography.group, fontFamilies)
+  });
+}
+function isThemeColorKey(key) {
+  return Boolean(key && typeof key === "string" && key in baseThemeColors);
+}
+function isThemeOrColorKey(key) {
+  return Boolean(
+    typeof key === "string" && (isThemeColorKey(key) || isColorKey(key) || Array.isArray(key) && key.length === 2 && isThemeColorKey(key[1]))
+  );
+}
+function getColor(theme, key) {
+  if (key && isThemeColorKey(key)) {
+    return theme[key];
+  } else if (key && Array.isArray(key)) {
+    const [surface, colorKey] = key;
+    const surfaceTheme = theme[surface];
+    const color = surfaceTheme[colorKey];
+    return color;
+  } else if (key && isColorKey(key)) {
+    return colors[key];
+  }
+  return theme.text;
+}
+function getFontColor(theme, key, defaultColor = "inherit") {
+  if (key === "inherit" || !key && defaultColor === "inherit") {
+    return "inherit";
+  }
+  return getColor(theme, key);
+}
+function isBackgroundColorKey(key) {
+  return key === "transparent" || isThemeOrColorKey(key);
+}
+function isBackgroundColorKeyTuple(key) {
+  return Array.isArray(key) && key.length === 2 && isBackgroundColorKey(key[0]) && isBackgroundColorKey(key[1]);
+}
+function getBackgroundColor(theme, key, defaultColor = "transparent") {
+  if (isBackgroundColorKeyTuple(key)) {
+    key = isLight(theme) ? key[0] : key[1];
+  }
+  if (isBackgroundColorKeyTuple(defaultColor)) {
+    defaultColor = isLight(theme) ? defaultColor[0] : defaultColor[1];
+  }
+  if (key === "transparent") {
+    return "transparent";
+  } else if (!key) {
+    if (defaultColor === "transparent") {
+      return "transparent";
+    }
+    return getColor(theme, defaultColor);
+  }
+  return getColor(theme, key);
+}
+var isDark = (theme) => [
+  "dark" /* Dark */,
+  "bridgeDark" /* BridgeDark */,
+  "lightsparkDocsDark" /* LightsparkDocsDark */,
+  "umameDocsDark" /* UmameDocsDark */
+].includes(theme.type);
+var isLight = (theme) => [
+  "light" /* Light */,
+  "bridgeLight" /* BridgeLight */,
+  "lightsparkDocsLight" /* LightsparkDocsLight */,
+  "umameDocsLight" /* UmameDocsLight */
+].includes(theme.type);
+var themeOr = (lightValue, darkValue) => ({ theme }) => {
+  return isLight(theme) ? lightValue : darkValue;
+};
+function ifLight(style) {
+  return function({ theme }) {
+    if (theme.type === "light" /* Light */) {
+      return css`
+        ${style}
+      `;
+    }
+    return "";
+  };
+}
+function ifDark(style) {
+  return function({ theme }) {
+    if (theme.type === "dark" /* Dark */) {
+      return css`
+        ${style}
+      `;
+    }
+    return "";
+  };
+}
+function useThemeBg() {
+  const theme = useTheme();
+  const bp = useBreakpoints();
+  const isSm = bp.current("sm" /* sm */);
+  if (isDark(theme)) {
+    return darkGradient;
+  }
+  return isSm ? theme.smBg : theme.bg;
+}
+
+export {
+  Themes,
+  themeOrColorKeyValues,
+  themes,
+  setFonts,
+  isThemeColorKey,
+  isThemeOrColorKey,
+  getColor,
+  getFontColor,
+  isBackgroundColorKey,
+  isBackgroundColorKeyTuple,
+  getBackgroundColor,
+  isDark,
+  isLight,
+  themeOr,
+  ifLight,
+  ifDark,
+  useThemeBg
+};

package/dist/{chunk-XP2MX2AA.js → chunk-ZKJS5M5E.js}

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

package/dist/chunk-ZLYJ3AKU.js

@@ -0,0 +1,27 @@
+// src/icons/CaretRight.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function CaretRight() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.5 3.33301L13.5774 9.41042C13.9028 9.73584 13.9028 10.2635 13.5774 10.5889L7.5 16.6663",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  CaretRight
+};

package/dist/chunk-ZMCAQFC6.js

@@ -0,0 +1,35 @@
+// src/icons/Eye.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Eye() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.0714 8.17857C10.0714 9.32259 9.14402 10.25 8 10.25C6.85598 10.25 5.92857 9.32259 5.92857 8.17857C5.92857 7.03455 6.85598 6.10714 8 6.10714C9.14402 6.10714 10.0714 7.03455 10.0714 8.17857Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8 3C4.375 3 0.75 5.82468 0.75 8.17857C0.75 10.5325 4.375 13.3571 8 13.3571C11.625 13.3571 15.25 10.5325 15.25 8.17857C15.25 5.82468 11.625 3 8 3Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Eye
+};

package/dist/chunk-ZQXRHPB6.js

@@ -0,0 +1,27 @@
+// src/icons/ArrowDown.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function ArrowDown() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 17 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1 9.52123L3.88111 12.4023M3.88111 12.4023L6.76222 9.52123M3.88111 12.4023L3.88111 0.8779M9.73778 9.52123",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  ArrowDown
+};

package/dist/chunk-ZSWFGISK.js

@@ -0,0 +1,53 @@
+// src/hooks/useResizeObserver.tsx
+import { pick } from "lodash-es";
+import { useCallback, useEffect, useRef, useState } from "react";
+function useResizeObserver(resizeProperties) {
+  const resizeObserver = useRef(null);
+  const [rect, setRect] = useState(null);
+  const [selectedProperties, setSelectedProperties] = useState(null);
+  const mounted = useRef(false);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const onResize = useCallback(
+    (entries) => {
+      setTimeout(() => {
+        if (mounted.current) {
+          const changedRect = entries[0].contentRect;
+          setRect(changedRect);
+        } else if (resizeObserver.current) {
+          resizeObserver.current.disconnect();
+        }
+      }, 0);
+    },
+    [setRect]
+  );
+  const ref = useCallback(
+    (node) => {
+      if (node && node instanceof Element && resizeProperties && resizeProperties.length > 0) {
+        resizeObserver.current = new ResizeObserver(onResize);
+        resizeObserver.current.observe(node);
+      }
+    },
+    [onResize, resizeProperties]
+  );
+  useEffect(() => {
+    if (resizeProperties) {
+      const selectedProps = pick(rect, resizeProperties);
+      if (JSON.stringify(selectedProperties) !== JSON.stringify(selectedProps)) {
+        setSelectedProperties(selectedProps);
+      }
+    }
+  }, [rect, resizeProperties, setSelectedProperties, selectedProperties]);
+  return {
+    ref,
+    rect: selectedProperties
+  };
+}
+
+export {
+  useResizeObserver
+};

package/dist/chunk-ZXACVTYJ.js

@@ -0,0 +1,57 @@
+// src/icons/ReactTwoTone.tsx
+import { useTheme } from "@emotion/react";
+import { useId } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ReactTwoTone() {
+  const id = useId();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 24 22",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxs("g", { clipPath: `url(#clip0_286_456-${id})`, children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M12.0005 12.8165C13.1819 12.8165 14.1396 11.8587 14.1396 10.6773C14.1396 9.49593 13.1819 8.53821 12.0005 8.53821C10.819 8.53821 9.86133 9.49593 9.86133 10.6773C9.86133 11.8587 10.819 12.8165 12.0005 12.8165Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11.9997 15.0604C18.339 15.0604 23.478 13.0982 23.478 10.6778C23.478 8.25733 18.339 6.29517 11.9997 6.29517C5.66048 6.29517 0.521484 8.25733 0.521484 10.6778C0.521484 13.0982 5.66048 15.0604 11.9997 15.0604Z",
+              stroke: "currentColor",
+              strokeWidth: "1.04348"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M8.20389 12.8681C11.3735 18.3581 15.6423 21.8275 17.7385 20.6173C19.8346 19.4071 18.9644 13.9755 15.7948 8.48551C12.6252 2.99554 8.35638 -0.473876 6.26021 0.736348C4.16404 1.94657 5.03426 7.37815 8.20389 12.8681Z",
+              stroke: "currentColor",
+              strokeWidth: "1.04348"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M8.20415 8.48669C5.03451 13.9767 4.1643 19.4082 6.26047 20.6185C8.35664 21.8287 12.6254 18.3593 15.795 12.8693C18.9647 7.37933 19.8349 1.94775 17.7387 0.737529C15.6426 -0.472695 11.3738 2.99672 8.20415 8.48669Z",
+              stroke: "currentColor",
+              strokeWidth: "1.04348"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `clip0_286_456-${id}`, children: /* @__PURE__ */ jsx("rect", { width: "24", height: "21.3532", fill: theme.bg }) }) })
+      ]
+    }
+  );
+}
+
+export {
+  ReactTwoTone
+};