@hellboy/ds 0.1.3 → 0.2.7

package/{src/style/components/theme-control → dist/components}/theme-control.css

@@ -1,35 +1,31 @@
+/* src/style/components/theme-control/theme-control.css */
 .theme-control {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2, 0.5rem);
 }
-
 .theme-control__option {
   display: flex;
   align-items: center;
   gap: var(--spacing-3, 0.75rem);
   padding: var(--spacing-2, 0.5rem);
-  border-radius: var(--border-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   cursor: pointer;
   transition: all var(--transition-base, 0.2s ease);
   color: var(--color-foreground-1);
 }
-
 .theme-control__option:hover:not(:disabled) {
   background: var(--color-bg-2);
 }
-
 .theme-control__option:focus-visible:not(:disabled) {
   outline: 2px solid var(--color-action-primary);
   outline-offset: 2px;
 }
-
 .theme-control__option--active {
   background: var(--color-action-primary);
   color: var(--color-on-action-primary);
 }
-
 .theme-control__icon {
   width: 20px;
   height: 20px;
-}
+}

package/dist/components/theme-control.d.mts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+type Theme = 'light' | 'dark';
+interface ThemeControlProps {
+    onThemeChange?: (theme: Theme) => void;
+}
+declare const ThemeControl: React.FC<ThemeControlProps>;
+
+export { ThemeControl, type ThemeControlProps };

package/dist/components/theme-control.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+type Theme = 'light' | 'dark';
+interface ThemeControlProps {
+    onThemeChange?: (theme: Theme) => void;
+}
+declare const ThemeControl: React.FC<ThemeControlProps>;
+
+export { ThemeControl, type ThemeControlProps };

package/dist/components/theme-control.js

@@ -0,0 +1,235 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/components/theme-control/index.ts
+var theme_control_exports = {};
+__export(theme_control_exports, {
+  ThemeControl: () => ThemeControl
+});
+module.exports = __toCommonJS(theme_control_exports);
+
+// src/components/theme-control/theme-control.tsx
+var React = __toESM(require("react"));
+
+// src/utils/user-preferences.ts
+var DEFAULT_CONFIG = {
+  backend: "localStorage",
+  prefix: "hellboy-ds",
+  dbName: "hellboy-ds-prefs",
+  storeName: "preferences"
+};
+var config = { ...DEFAULT_CONFIG };
+var getStorageKey = (key) => {
+  return `${config.prefix}:${key}`;
+};
+var isLocalStorageAvailable = () => {
+  try {
+    const test = "__storage_test__";
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var IndexedDBStore = class {
+  constructor() {
+    __publicField(this, "db", null);
+  }
+  async init() {
+    if (typeof window === "undefined" || !window.indexedDB) {
+      throw new Error("IndexedDB not available");
+    }
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(config.dbName, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(config.storeName)) {
+          db.createObjectStore(config.storeName, { keyPath: "key" });
+        }
+      };
+    });
+  }
+  async get(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readonly");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result?.value);
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async set(key, value) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.put({ key, value });
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async remove(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.delete(key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async clear() {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.clear();
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+};
+var indexedDBStore = new IndexedDBStore();
+var getPreference = (key, defaultValue) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      const stored = localStorage.getItem(getStorageKey(key));
+      if (stored !== null) {
+        return JSON.parse(stored);
+      }
+    }
+    return defaultValue;
+  } catch (error) {
+    console.warn(`Failed to get preference "${key}":`, error);
+    return defaultValue;
+  }
+};
+var setPreference = (key, value) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      localStorage.setItem(getStorageKey(key), JSON.stringify(value));
+    }
+  } catch (error) {
+    console.warn(`Failed to set preference "${key}":`, error);
+  }
+};
+
+// src/utils/theme.ts
+var THEME_KEY = "theme";
+var ATTR_NAME = "data-theme";
+var applyTheme = (theme) => {
+  document.documentElement.setAttribute(ATTR_NAME, theme);
+};
+var getTheme = () => {
+  const dataTheme = document.documentElement.getAttribute(ATTR_NAME);
+  if (dataTheme === "light" || dataTheme === "dark") return dataTheme;
+  try {
+    const stored = getPreference(THEME_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch (e) {
+  }
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+};
+var getSavedTheme = () => getTheme();
+var setTheme = (theme) => {
+  if (!["light", "dark"].includes(theme)) {
+    console.warn(`Invalid theme: ${theme}. Using 'light' as fallback.`);
+    theme = "light";
+  }
+  try {
+    setPreference(THEME_KEY, theme);
+  } catch (e) {
+  }
+  applyTheme(theme);
+};
+
+// src/components/theme-control/theme-control.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var themeOptions = [
+  {
+    value: "light",
+    label: "Light",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "theme-control__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+    ] })
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "theme-control__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })
+  }
+];
+var ThemeControl = ({ onThemeChange }) => {
+  const [currentTheme, setCurrentTheme] = React.useState(() => {
+    return getSavedTheme();
+  });
+  React.useEffect(() => {
+    setTheme(currentTheme);
+    onThemeChange?.(currentTheme);
+  }, [currentTheme, onThemeChange]);
+  const handleThemeSelect = (theme) => {
+    setCurrentTheme(theme);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "theme-control", children: themeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `theme-control__option ${currentTheme === option.value ? "theme-control__option--active" : ""}`,
+      onClick: () => handleThemeSelect(option.value),
+      children: [
+        option.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: option.label })
+      ]
+    },
+    option.value
+  )) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeControl
+});

package/dist/components/theme-control.mjs

@@ -0,0 +1,200 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/components/theme-control/theme-control.tsx
+import * as React from "react";
+
+// src/utils/user-preferences.ts
+var DEFAULT_CONFIG = {
+  backend: "localStorage",
+  prefix: "hellboy-ds",
+  dbName: "hellboy-ds-prefs",
+  storeName: "preferences"
+};
+var config = { ...DEFAULT_CONFIG };
+var getStorageKey = (key) => {
+  return `${config.prefix}:${key}`;
+};
+var isLocalStorageAvailable = () => {
+  try {
+    const test = "__storage_test__";
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var IndexedDBStore = class {
+  constructor() {
+    __publicField(this, "db", null);
+  }
+  async init() {
+    if (typeof window === "undefined" || !window.indexedDB) {
+      throw new Error("IndexedDB not available");
+    }
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(config.dbName, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(config.storeName)) {
+          db.createObjectStore(config.storeName, { keyPath: "key" });
+        }
+      };
+    });
+  }
+  async get(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readonly");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result?.value);
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async set(key, value) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.put({ key, value });
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async remove(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.delete(key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async clear() {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.clear();
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+};
+var indexedDBStore = new IndexedDBStore();
+var getPreference = (key, defaultValue) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      const stored = localStorage.getItem(getStorageKey(key));
+      if (stored !== null) {
+        return JSON.parse(stored);
+      }
+    }
+    return defaultValue;
+  } catch (error) {
+    console.warn(`Failed to get preference "${key}":`, error);
+    return defaultValue;
+  }
+};
+var setPreference = (key, value) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      localStorage.setItem(getStorageKey(key), JSON.stringify(value));
+    }
+  } catch (error) {
+    console.warn(`Failed to set preference "${key}":`, error);
+  }
+};
+
+// src/utils/theme.ts
+var THEME_KEY = "theme";
+var ATTR_NAME = "data-theme";
+var applyTheme = (theme) => {
+  document.documentElement.setAttribute(ATTR_NAME, theme);
+};
+var getTheme = () => {
+  const dataTheme = document.documentElement.getAttribute(ATTR_NAME);
+  if (dataTheme === "light" || dataTheme === "dark") return dataTheme;
+  try {
+    const stored = getPreference(THEME_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch (e) {
+  }
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+};
+var getSavedTheme = () => getTheme();
+var setTheme = (theme) => {
+  if (!["light", "dark"].includes(theme)) {
+    console.warn(`Invalid theme: ${theme}. Using 'light' as fallback.`);
+    theme = "light";
+  }
+  try {
+    setPreference(THEME_KEY, theme);
+  } catch (e) {
+  }
+  applyTheme(theme);
+};
+
+// src/components/theme-control/theme-control.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var themeOptions = [
+  {
+    value: "light",
+    label: "Light",
+    icon: /* @__PURE__ */ jsxs("svg", { className: "theme-control__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+      /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+      /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+      /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+      /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+    ] })
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: /* @__PURE__ */ jsx("svg", { className: "theme-control__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })
+  }
+];
+var ThemeControl = ({ onThemeChange }) => {
+  const [currentTheme, setCurrentTheme] = React.useState(() => {
+    return getSavedTheme();
+  });
+  React.useEffect(() => {
+    setTheme(currentTheme);
+    onThemeChange?.(currentTheme);
+  }, [currentTheme, onThemeChange]);
+  const handleThemeSelect = (theme) => {
+    setCurrentTheme(theme);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "theme-control", children: themeOptions.map((option) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `theme-control__option ${currentTheme === option.value ? "theme-control__option--active" : ""}`,
+      onClick: () => handleThemeSelect(option.value),
+      children: [
+        option.icon,
+        /* @__PURE__ */ jsx("span", { children: option.label })
+      ]
+    },
+    option.value
+  )) });
+};
+export {
+  ThemeControl
+};

package/{src/style/components/tooltip → dist/components}/tooltip.css

@@ -1,12 +1,12 @@
-/* Tooltip Component Styles */
-
+/* src/style/components/tooltip/tooltip.css */
 .tooltip {
-  position: fixed; /* Ensure fixed positioning for portal */
+  position: fixed;
+  z-index: var(--z-tooltip);
   background: var(--color-bg-1);
   border: 1px solid var(--color-bg-3);
   border-color: rgba(0, 0, 0, 0.15);
   border-radius: var(--radius-base);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--shadow-md);
   max-width: 200px;
   padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
   font-size: var(--font-size-xs, 0.75rem);
@@ -14,28 +14,22 @@
   color: var(--color-foreground-1);
   white-space: nowrap;
   animation: tooltip-fade-in var(--transition-fast, 0.15s ease);
-  /* Prevent initial flash by starting hidden */
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }
-
 .tooltip--top {
   margin-bottom: var(--spacing-1);
 }
-
 .tooltip--bottom {
   margin-top: var(--spacing-1);
 }
-
 .tooltip--left {
   margin-right: var(--spacing-1);
 }
-
 .tooltip--right {
   margin-left: var(--spacing-1);
 }
-
 @keyframes tooltip-fade-in {
   from {
     opacity: 0;
@@ -46,7 +40,5 @@
     transform: translateY(0);
   }
 }
-
 .tooltip__content {
-  /* Additional styling if needed */
-}
+}

package/dist/components/tooltip.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    disabled?: boolean;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+
+export { Tooltip, type TooltipProps };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    disabled?: boolean;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+
+export { Tooltip, type TooltipProps };