@eqtylab/equality 0.0.0

package/dist/tabs.module.module.css.module.css

@@ -0,0 +1,139 @@
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+.tabs {
+  width: 100%;
+}
+.tabs-list {
+  position: relative;
+  width: 100%;
+}
+.tabs-list--transparent {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-border);
+}
+.tabs-list--filled {
+  background-color: var(--color-background-sunken);
+  --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  overflow: hidden;
+  border-radius: var(--radius-md, 0.375rem);
+}
+.tabs-trigger--filled {
+  width: 100%;
+  padding-inline: calc(0.25rem * 3);
+  padding-block: calc(0.25rem * 1.5);
+  color: var(--color-text-secondary);
+}
+.tabs-icon {
+  color: inherit;
+}
+.tabs-list .tabs-trigger--filled {
+  &[data-state="active"] {
+    color: var(--color-button-primary-text);
+  }
+}
+.tabs-list .tabs-trigger--transparent {
+  &[data-state="active"] {
+    color: var(--color-text-primary);
+  }
+}
+.active-tab-indicator {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  background-color: var(--color-button-primary-fill);
+}
+.active-tab-indicator--filled {
+  inset: calc(0.25rem * 0);
+  height: 100%;
+  border-radius: 0.25rem;
+}
+.active-tab-indicator--transparent {
+  height: calc(0.25rem * 0.5);
+  right: calc(0.25rem * 0);
+  bottom: calc(0.25rem * 0);
+  left: calc(0.25rem * 0);
+}
+.content {
+  margin-top: calc(0.25rem * 5);
+  :where(& > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(0.25rem * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(0.25rem * 6) * calc(1 - var(--tw-space-y-reverse)));
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}

package/dist/textarea.module.module.css.module.css

@@ -0,0 +1,115 @@
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+.textarea {
+  display: flex;
+  padding-inline: calc(0.25rem * 3);
+  padding-block: calc(0.25rem * 2);
+  min-height: calc(0.25rem * 20);
+  width: 100%;
+  border-radius: var(--radius-md, 0.375rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-border);
+  background-color: var(--color-background);
+  font-size: 1rem;
+  line-height: var(--tw-leading, calc(1.5 / 1));
+  color: var(--color-text-primary);
+  @media (width >= 48rem) {
+    font-size: 0.875rem;
+    line-height: var(--tw-leading, calc(1.25 / 0.875));
+  }
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+  --tw-ring-offset-color: var(--color-background);
+  &:focus-visible {
+    --tw-ring-color: var(--color-focus-ring);
+  }
+  &:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  &:focus-visible {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  &:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:disabled {
+    opacity: 50%;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}

package/dist/theme/lib/utils.cjs

@@ -0,0 +1,125 @@
+'use strict';
+
+// src/theme/lib/utils.ts
+var STORAGE_KEY = "equality-theme";
+var UPDATE_EVENT = "equality-theme-change";
+var FALLBACK_THEME = "light";
+var getFallbackTheme = (options = {}) => {
+  const { canFallbackToBrowserSettings = false } = options;
+  if (typeof window === "undefined" || !canFallbackToBrowserSettings) {
+    return FALLBACK_THEME;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+var getDefaultTheme = () => {
+  const themeProviderRootElement = document.querySelector("[data-equality-theme]") || document.documentElement;
+  if (themeProviderRootElement) {
+    return themeProviderRootElement.getAttribute("data-equality-theme") || void 0;
+  } else {
+    return void 0;
+  }
+};
+var getThemeFromLocalStorage = () => {
+  const safeReadStorage = (key) => {
+    try {
+      return window.localStorage.getItem(key);
+    } catch {
+      return null;
+    }
+  };
+  const themeLocalStorageValue = safeReadStorage(STORAGE_KEY);
+  return themeLocalStorageValue;
+};
+var getThemeFromWindow = () => {
+  return window.__equalityTheme;
+};
+var applyThemeToDom = (theme) => {
+  const themeProviderRootElement = document.querySelector("[data-equality-theme]") || document.documentElement;
+  if (themeProviderRootElement) {
+    themeProviderRootElement.setAttribute("data-equality-theme", theme);
+  }
+};
+var setThemeInLocalStorage = (theme) => {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme);
+    window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));
+  } catch {
+    console.error("Failed to set theme in localStorage");
+  }
+};
+var setThemeOnWindow = (theme) => {
+  window.__equalityTheme = theme;
+  window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));
+};
+var setTheme = (theme) => {
+  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;
+  if (isUsingLocalStorage) {
+    setThemeInLocalStorage(theme);
+  } else {
+    setThemeOnWindow(theme);
+  }
+  applyThemeToDom(theme);
+};
+var getCurrentThemeState = (options = {}) => {
+  const { canFallbackToBrowserSettings = false } = options;
+  if (typeof window === "undefined") {
+    return void 0;
+  }
+  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;
+  const storedTheme = isUsingLocalStorage ? getThemeFromLocalStorage() : getThemeFromWindow();
+  const theme = storedTheme || getDefaultTheme() || getFallbackTheme({ canFallbackToBrowserSettings });
+  if (!storedTheme) {
+    setTheme(theme);
+  }
+  return theme;
+};
+var initializeTheme = (options = {}) => {
+  const { shouldStoreTheme = false } = options;
+  window.__equalityIsUsingLocalStorage = shouldStoreTheme;
+  const theme = getCurrentThemeState({ canFallbackToBrowserSettings: true });
+  if (theme) applyThemeToDom(theme);
+};
+var subscribeToThemeChange = (listener) => {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;
+  if (isUsingLocalStorage) {
+    const storageListener = (event) => {
+      if (event.key === STORAGE_KEY) listener();
+    };
+    const updateListener = () => listener();
+    window.addEventListener("storage", storageListener);
+    window.addEventListener(UPDATE_EVENT, updateListener);
+    return () => {
+      window.removeEventListener("storage", storageListener);
+      window.removeEventListener(UPDATE_EVENT, updateListener);
+    };
+  } else {
+    const windowListener = () => {
+      listener();
+    };
+    window.addEventListener(UPDATE_EVENT, windowListener);
+    return () => {
+      window.removeEventListener(UPDATE_EVENT, windowListener);
+    };
+  }
+};
+
+exports.FALLBACK_THEME = FALLBACK_THEME;
+exports.STORAGE_KEY = STORAGE_KEY;
+exports.UPDATE_EVENT = UPDATE_EVENT;
+exports.applyThemeToDom = applyThemeToDom;
+exports.getCurrentThemeState = getCurrentThemeState;
+exports.getDefaultTheme = getDefaultTheme;
+exports.getFallbackTheme = getFallbackTheme;
+exports.getThemeFromLocalStorage = getThemeFromLocalStorage;
+exports.getThemeFromWindow = getThemeFromWindow;
+exports.initializeTheme = initializeTheme;
+exports.setTheme = setTheme;
+exports.setThemeInLocalStorage = setThemeInLocalStorage;
+exports.setThemeOnWindow = setThemeOnWindow;
+exports.subscribeToThemeChange = subscribeToThemeChange;
+//# sourceMappingURL=utils.cjs.map
+//# sourceMappingURL=utils.cjs.map

package/dist/theme/lib/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/lib/utils.ts"],"names":[],"mappings":"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","file":"utils.cjs","sourcesContent":["const STORAGE_KEY = 'equality-theme';\nconst UPDATE_EVENT = 'equality-theme-change';\nconst FALLBACK_THEME = 'light';\ntype Theme = 'light' | 'dark';\n\ninterface InitializeThemeOptions {\n  shouldStoreTheme?: boolean;\n}\n\ninterface GetCurrentThemeStateOptions {\n  canFallbackToBrowserSettings?: boolean;\n}\n\ninterface GetFallbackThemeOptions {\n  canFallbackToBrowserSettings?: boolean;\n}\n\nconst getFallbackTheme = (options: GetFallbackThemeOptions = {}): Theme => {\n  const { canFallbackToBrowserSettings = false } = options;\n\n  if (typeof window === 'undefined' || !canFallbackToBrowserSettings) {\n    return FALLBACK_THEME;\n  }\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n};\n\nconst getDefaultTheme = (): Theme | undefined => {\n  const themeProviderRootElement =\n    document.querySelector('[data-equality-theme]') || document.documentElement;\n  if (themeProviderRootElement) {\n    return (themeProviderRootElement.getAttribute('data-equality-theme') || undefined) as\n      | Theme\n      | undefined;\n  } else {\n    return undefined;\n  }\n};\n\nconst getThemeFromLocalStorage = (): Theme | null => {\n  const safeReadStorage = (key: string) => {\n    try {\n      return window.localStorage.getItem(key) as Theme | null;\n    } catch {\n      return null;\n    }\n  };\n\n  const themeLocalStorageValue = safeReadStorage(STORAGE_KEY);\n  return themeLocalStorageValue;\n};\n\nconst getThemeFromWindow = (): Theme | undefined => {\n  return window.__equalityTheme as Theme | undefined;\n};\n\nconst applyThemeToDom = (theme: Theme) => {\n  const themeProviderRootElement =\n    document.querySelector('[data-equality-theme]') || document.documentElement;\n  if (themeProviderRootElement) {\n    themeProviderRootElement.setAttribute('data-equality-theme', theme); // This sets the theme that controls the styling color variables used\n  }\n};\n\nconst setThemeInLocalStorage = (theme: Theme) => {\n  try {\n    window.localStorage.setItem(STORAGE_KEY, theme);\n    window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));\n  } catch {\n    console.error('Failed to set theme in localStorage');\n  }\n};\n\nconst setThemeOnWindow = (theme: Theme) => {\n  window.__equalityTheme = theme;\n  window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));\n};\n\nconst setTheme = (theme: Theme) => {\n  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;\n  if (isUsingLocalStorage) {\n    setThemeInLocalStorage(theme);\n  } else {\n    setThemeOnWindow(theme);\n  }\n  applyThemeToDom(theme);\n};\n\nconst getCurrentThemeState = (options: GetCurrentThemeStateOptions = {}) => {\n  const { canFallbackToBrowserSettings = false } = options;\n\n  // First, use stored theme if available\n  // Then, use default theme set on data-equality-theme attribute if available\n  // Then, use fallback theme from browser settings if available\n\n  if (typeof window === 'undefined') {\n    return undefined;\n  }\n\n  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;\n  const storedTheme = isUsingLocalStorage ? getThemeFromLocalStorage() : getThemeFromWindow();\n  const theme =\n    storedTheme || getDefaultTheme() || getFallbackTheme({ canFallbackToBrowserSettings });\n  if (!storedTheme) {\n    setTheme(theme);\n  }\n  return theme;\n};\n\nconst initializeTheme = (options: InitializeThemeOptions = {}) => {\n  // This is only needed if the initial state needs to be dynamic\n  const { shouldStoreTheme = false } = options;\n\n  window.__equalityIsUsingLocalStorage = shouldStoreTheme;\n  const theme = getCurrentThemeState({ canFallbackToBrowserSettings: true });\n  if (theme) applyThemeToDom(theme);\n};\n\nconst subscribeToThemeChange = (listener: () => void) => {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;\n  if (isUsingLocalStorage) {\n    // use localStorage\n    const storageListener = (event: StorageEvent) => {\n      if (event.key === STORAGE_KEY) listener();\n    };\n    const updateListener = () => listener();\n\n    window.addEventListener('storage', storageListener);\n    window.addEventListener(UPDATE_EVENT, updateListener);\n    return () => {\n      window.removeEventListener('storage', storageListener);\n      window.removeEventListener(UPDATE_EVENT, updateListener);\n    };\n  } else {\n    // use window object\n    const windowListener = () => {\n      listener();\n    };\n    window.addEventListener(UPDATE_EVENT, windowListener);\n    return () => {\n      window.removeEventListener(UPDATE_EVENT, windowListener);\n    };\n  }\n};\n\nexport {\n  Theme,\n  InitializeThemeOptions,\n  STORAGE_KEY,\n  UPDATE_EVENT,\n  FALLBACK_THEME,\n  getCurrentThemeState,\n  applyThemeToDom,\n  initializeTheme,\n  setTheme,\n  subscribeToThemeChange,\n  getFallbackTheme,\n  getDefaultTheme,\n  getThemeFromLocalStorage,\n  getThemeFromWindow,\n  setThemeInLocalStorage,\n  setThemeOnWindow,\n};\n"]}

package/dist/theme/lib/utils.d.cts

@@ -0,0 +1,26 @@
+declare const STORAGE_KEY = "equality-theme";
+declare const UPDATE_EVENT = "equality-theme-change";
+declare const FALLBACK_THEME = "light";
+type Theme = 'light' | 'dark';
+interface InitializeThemeOptions {
+    shouldStoreTheme?: boolean;
+}
+interface GetCurrentThemeStateOptions {
+    canFallbackToBrowserSettings?: boolean;
+}
+interface GetFallbackThemeOptions {
+    canFallbackToBrowserSettings?: boolean;
+}
+declare const getFallbackTheme: (options?: GetFallbackThemeOptions) => Theme;
+declare const getDefaultTheme: () => Theme | undefined;
+declare const getThemeFromLocalStorage: () => Theme | null;
+declare const getThemeFromWindow: () => Theme | undefined;
+declare const applyThemeToDom: (theme: Theme) => void;
+declare const setThemeInLocalStorage: (theme: Theme) => void;
+declare const setThemeOnWindow: (theme: Theme) => void;
+declare const setTheme: (theme: Theme) => void;
+declare const getCurrentThemeState: (options?: GetCurrentThemeStateOptions) => Theme | undefined;
+declare const initializeTheme: (options?: InitializeThemeOptions) => void;
+declare const subscribeToThemeChange: (listener: () => void) => () => void;
+
+export { FALLBACK_THEME, type InitializeThemeOptions, STORAGE_KEY, type Theme, UPDATE_EVENT, applyThemeToDom, getCurrentThemeState, getDefaultTheme, getFallbackTheme, getThemeFromLocalStorage, getThemeFromWindow, initializeTheme, setTheme, setThemeInLocalStorage, setThemeOnWindow, subscribeToThemeChange };

package/dist/theme/lib/utils.d.ts

@@ -0,0 +1,26 @@
+declare const STORAGE_KEY = "equality-theme";
+declare const UPDATE_EVENT = "equality-theme-change";
+declare const FALLBACK_THEME = "light";
+type Theme = 'light' | 'dark';
+interface InitializeThemeOptions {
+    shouldStoreTheme?: boolean;
+}
+interface GetCurrentThemeStateOptions {
+    canFallbackToBrowserSettings?: boolean;
+}
+interface GetFallbackThemeOptions {
+    canFallbackToBrowserSettings?: boolean;
+}
+declare const getFallbackTheme: (options?: GetFallbackThemeOptions) => Theme;
+declare const getDefaultTheme: () => Theme | undefined;
+declare const getThemeFromLocalStorage: () => Theme | null;
+declare const getThemeFromWindow: () => Theme | undefined;
+declare const applyThemeToDom: (theme: Theme) => void;
+declare const setThemeInLocalStorage: (theme: Theme) => void;
+declare const setThemeOnWindow: (theme: Theme) => void;
+declare const setTheme: (theme: Theme) => void;
+declare const getCurrentThemeState: (options?: GetCurrentThemeStateOptions) => Theme | undefined;
+declare const initializeTheme: (options?: InitializeThemeOptions) => void;
+declare const subscribeToThemeChange: (listener: () => void) => () => void;
+
+export { FALLBACK_THEME, type InitializeThemeOptions, STORAGE_KEY, type Theme, UPDATE_EVENT, applyThemeToDom, getCurrentThemeState, getDefaultTheme, getFallbackTheme, getThemeFromLocalStorage, getThemeFromWindow, initializeTheme, setTheme, setThemeInLocalStorage, setThemeOnWindow, subscribeToThemeChange };

package/dist/theme/lib/utils.js

@@ -0,0 +1,110 @@
+// src/theme/lib/utils.ts
+var STORAGE_KEY = "equality-theme";
+var UPDATE_EVENT = "equality-theme-change";
+var FALLBACK_THEME = "light";
+var getFallbackTheme = (options = {}) => {
+  const { canFallbackToBrowserSettings = false } = options;
+  if (typeof window === "undefined" || !canFallbackToBrowserSettings) {
+    return FALLBACK_THEME;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+var getDefaultTheme = () => {
+  const themeProviderRootElement = document.querySelector("[data-equality-theme]") || document.documentElement;
+  if (themeProviderRootElement) {
+    return themeProviderRootElement.getAttribute("data-equality-theme") || void 0;
+  } else {
+    return void 0;
+  }
+};
+var getThemeFromLocalStorage = () => {
+  const safeReadStorage = (key) => {
+    try {
+      return window.localStorage.getItem(key);
+    } catch {
+      return null;
+    }
+  };
+  const themeLocalStorageValue = safeReadStorage(STORAGE_KEY);
+  return themeLocalStorageValue;
+};
+var getThemeFromWindow = () => {
+  return window.__equalityTheme;
+};
+var applyThemeToDom = (theme) => {
+  const themeProviderRootElement = document.querySelector("[data-equality-theme]") || document.documentElement;
+  if (themeProviderRootElement) {
+    themeProviderRootElement.setAttribute("data-equality-theme", theme);
+  }
+};
+var setThemeInLocalStorage = (theme) => {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme);
+    window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));
+  } catch {
+    console.error("Failed to set theme in localStorage");
+  }
+};
+var setThemeOnWindow = (theme) => {
+  window.__equalityTheme = theme;
+  window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));
+};
+var setTheme = (theme) => {
+  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;
+  if (isUsingLocalStorage) {
+    setThemeInLocalStorage(theme);
+  } else {
+    setThemeOnWindow(theme);
+  }
+  applyThemeToDom(theme);
+};
+var getCurrentThemeState = (options = {}) => {
+  const { canFallbackToBrowserSettings = false } = options;
+  if (typeof window === "undefined") {
+    return void 0;
+  }
+  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;
+  const storedTheme = isUsingLocalStorage ? getThemeFromLocalStorage() : getThemeFromWindow();
+  const theme = storedTheme || getDefaultTheme() || getFallbackTheme({ canFallbackToBrowserSettings });
+  if (!storedTheme) {
+    setTheme(theme);
+  }
+  return theme;
+};
+var initializeTheme = (options = {}) => {
+  const { shouldStoreTheme = false } = options;
+  window.__equalityIsUsingLocalStorage = shouldStoreTheme;
+  const theme = getCurrentThemeState({ canFallbackToBrowserSettings: true });
+  if (theme) applyThemeToDom(theme);
+};
+var subscribeToThemeChange = (listener) => {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;
+  if (isUsingLocalStorage) {
+    const storageListener = (event) => {
+      if (event.key === STORAGE_KEY) listener();
+    };
+    const updateListener = () => listener();
+    window.addEventListener("storage", storageListener);
+    window.addEventListener(UPDATE_EVENT, updateListener);
+    return () => {
+      window.removeEventListener("storage", storageListener);
+      window.removeEventListener(UPDATE_EVENT, updateListener);
+    };
+  } else {
+    const windowListener = () => {
+      listener();
+    };
+    window.addEventListener(UPDATE_EVENT, windowListener);
+    return () => {
+      window.removeEventListener(UPDATE_EVENT, windowListener);
+    };
+  }
+};
+
+export { FALLBACK_THEME, STORAGE_KEY, UPDATE_EVENT, applyThemeToDom, getCurrentThemeState, getDefaultTheme, getFallbackTheme, getThemeFromLocalStorage, getThemeFromWindow, initializeTheme, setTheme, setThemeInLocalStorage, setThemeOnWindow, subscribeToThemeChange };
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/theme/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/lib/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["const STORAGE_KEY = 'equality-theme';\nconst UPDATE_EVENT = 'equality-theme-change';\nconst FALLBACK_THEME = 'light';\ntype Theme = 'light' | 'dark';\n\ninterface InitializeThemeOptions {\n  shouldStoreTheme?: boolean;\n}\n\ninterface GetCurrentThemeStateOptions {\n  canFallbackToBrowserSettings?: boolean;\n}\n\ninterface GetFallbackThemeOptions {\n  canFallbackToBrowserSettings?: boolean;\n}\n\nconst getFallbackTheme = (options: GetFallbackThemeOptions = {}): Theme => {\n  const { canFallbackToBrowserSettings = false } = options;\n\n  if (typeof window === 'undefined' || !canFallbackToBrowserSettings) {\n    return FALLBACK_THEME;\n  }\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n};\n\nconst getDefaultTheme = (): Theme | undefined => {\n  const themeProviderRootElement =\n    document.querySelector('[data-equality-theme]') || document.documentElement;\n  if (themeProviderRootElement) {\n    return (themeProviderRootElement.getAttribute('data-equality-theme') || undefined) as\n      | Theme\n      | undefined;\n  } else {\n    return undefined;\n  }\n};\n\nconst getThemeFromLocalStorage = (): Theme | null => {\n  const safeReadStorage = (key: string) => {\n    try {\n      return window.localStorage.getItem(key) as Theme | null;\n    } catch {\n      return null;\n    }\n  };\n\n  const themeLocalStorageValue = safeReadStorage(STORAGE_KEY);\n  return themeLocalStorageValue;\n};\n\nconst getThemeFromWindow = (): Theme | undefined => {\n  return window.__equalityTheme as Theme | undefined;\n};\n\nconst applyThemeToDom = (theme: Theme) => {\n  const themeProviderRootElement =\n    document.querySelector('[data-equality-theme]') || document.documentElement;\n  if (themeProviderRootElement) {\n    themeProviderRootElement.setAttribute('data-equality-theme', theme); // This sets the theme that controls the styling color variables used\n  }\n};\n\nconst setThemeInLocalStorage = (theme: Theme) => {\n  try {\n    window.localStorage.setItem(STORAGE_KEY, theme);\n    window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));\n  } catch {\n    console.error('Failed to set theme in localStorage');\n  }\n};\n\nconst setThemeOnWindow = (theme: Theme) => {\n  window.__equalityTheme = theme;\n  window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: theme }));\n};\n\nconst setTheme = (theme: Theme) => {\n  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;\n  if (isUsingLocalStorage) {\n    setThemeInLocalStorage(theme);\n  } else {\n    setThemeOnWindow(theme);\n  }\n  applyThemeToDom(theme);\n};\n\nconst getCurrentThemeState = (options: GetCurrentThemeStateOptions = {}) => {\n  const { canFallbackToBrowserSettings = false } = options;\n\n  // First, use stored theme if available\n  // Then, use default theme set on data-equality-theme attribute if available\n  // Then, use fallback theme from browser settings if available\n\n  if (typeof window === 'undefined') {\n    return undefined;\n  }\n\n  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;\n  const storedTheme = isUsingLocalStorage ? getThemeFromLocalStorage() : getThemeFromWindow();\n  const theme =\n    storedTheme || getDefaultTheme() || getFallbackTheme({ canFallbackToBrowserSettings });\n  if (!storedTheme) {\n    setTheme(theme);\n  }\n  return theme;\n};\n\nconst initializeTheme = (options: InitializeThemeOptions = {}) => {\n  // This is only needed if the initial state needs to be dynamic\n  const { shouldStoreTheme = false } = options;\n\n  window.__equalityIsUsingLocalStorage = shouldStoreTheme;\n  const theme = getCurrentThemeState({ canFallbackToBrowserSettings: true });\n  if (theme) applyThemeToDom(theme);\n};\n\nconst subscribeToThemeChange = (listener: () => void) => {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  const isUsingLocalStorage = window.__equalityIsUsingLocalStorage;\n  if (isUsingLocalStorage) {\n    // use localStorage\n    const storageListener = (event: StorageEvent) => {\n      if (event.key === STORAGE_KEY) listener();\n    };\n    const updateListener = () => listener();\n\n    window.addEventListener('storage', storageListener);\n    window.addEventListener(UPDATE_EVENT, updateListener);\n    return () => {\n      window.removeEventListener('storage', storageListener);\n      window.removeEventListener(UPDATE_EVENT, updateListener);\n    };\n  } else {\n    // use window object\n    const windowListener = () => {\n      listener();\n    };\n    window.addEventListener(UPDATE_EVENT, windowListener);\n    return () => {\n      window.removeEventListener(UPDATE_EVENT, windowListener);\n    };\n  }\n};\n\nexport {\n  Theme,\n  InitializeThemeOptions,\n  STORAGE_KEY,\n  UPDATE_EVENT,\n  FALLBACK_THEME,\n  getCurrentThemeState,\n  applyThemeToDom,\n  initializeTheme,\n  setTheme,\n  subscribeToThemeChange,\n  getFallbackTheme,\n  getDefaultTheme,\n  getThemeFromLocalStorage,\n  getThemeFromWindow,\n  setThemeInLocalStorage,\n  setThemeOnWindow,\n};\n"]}

package/dist/theme-base.css

@@ -0,0 +1,51 @@
+@custom-variant dark (&:where(html[data-equality-theme=dark], html[data-equality-theme=dark] *, [data-equality-theme=dark] .root, [data-equality-theme=dark] .root *));
+
+@theme {
+  /* RADIUS */
+  --radius-md: 0.375rem;
+}
+
+@theme inline {
+  /* FONT FAMILY */
+  --font-sans: 'TWK Lausanne', 'Inter', sans-serif;
+
+  /* FONT SIZE */
+  --text-xxs: 0.625rem;
+
+  /* Z-INDEX */
+  --z-index-behind: -1;
+  --z-index-base: 0;
+  --z-index-above: 10;
+  --z-index-overlay: 50;
+  --z-index-modal: 50;
+  --z-index-dropdown: 50;
+  --z-index-highest: 9999;
+
+  --color-shadow-sunken: rgba(0, 0, 0, 0.05);
+  --color-shadow-base: transparent;
+  --color-shadow-raised: rgba(0, 0, 0, 0.05);
+  --color-shadow-overlay: rgba(0, 0, 0, 0.1);
+  --color-shadow-floating: rgba(0, 0, 0, 0.15);
+
+  /* Animation */
+  --animate-grow-in: grow-in 800ms ease-in-out backwards;
+  --animate-fade-in: fade-in 800ms ease-in-out backwards;
+
+  @keyframes grow-in {
+    from {
+      transform: scaleY(0.75);
+    }
+    to {
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/dist/theme-components.css

@@ -0,0 +1,27 @@
+@layer components {
+  .styled-horizontal-scrollbar {
+    &::-webkit-scrollbar {
+      width: 100%;
+      height: 0.375rem;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 999px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #7f738f;
+      border-radius: 999px;
+    }
+  }
+
+  .styled-vertical-scrollbar {
+    &::-webkit-scrollbar {
+      height: 100%;
+      width: 0.375rem;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 999px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #7f738f;
+      border-radius: 999px;
+    }
+  }
+}