@thangnqdev/ui 0.1.0

package/dist/chunk-KJRBRTQE.js

@@ -0,0 +1,101 @@
+import { __export, cn } from './chunk-4S6L5V7X.js';
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/core/index.ts
+var core_exports = {};
+__export(core_exports, {
+  ThemeProvider: () => ThemeProvider,
+  cn: () => cn,
+  useTheme: () => useTheme
+});
+var ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "dark",
+  storageKey = "ui-theme",
+  attribute = "data-theme",
+  enableSystem = true
+}) {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
+      try {
+        const stored = window.localStorage.getItem(storageKey);
+        if (stored) return stored;
+      } catch {
+      }
+    }
+    return defaultTheme;
+  });
+  const [resolvedTheme, setResolvedTheme] = useState("dark");
+  useEffect(() => {
+    const root = document.documentElement;
+    const computeResolved = (t) => {
+      if (t === "system" && enableSystem && typeof window !== "undefined" && window.matchMedia) {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      return t === "dark" ? "dark" : "light";
+    };
+    const currentResolved = computeResolved(theme);
+    setResolvedTheme(currentResolved);
+    root.setAttribute(attribute, currentResolved);
+    if (currentResolved === "dark") {
+      root.classList.add("dark");
+      root.classList.remove("light");
+    } else {
+      root.classList.add("light");
+      root.classList.remove("dark");
+    }
+    if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
+      try {
+        window.localStorage.setItem(storageKey, theme);
+      } catch {
+      }
+    }
+  }, [theme, attribute, enableSystem, storageKey]);
+  useEffect(() => {
+    if (theme !== "system" || !enableSystem) return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      const newResolved = mediaQuery.matches ? "dark" : "light";
+      setResolvedTheme(newResolved);
+      document.documentElement.setAttribute(attribute, newResolved);
+      if (newResolved === "dark") {
+        document.documentElement.classList.add("dark");
+        document.documentElement.classList.remove("light");
+      } else {
+        document.documentElement.classList.add("light");
+        document.documentElement.classList.remove("dark");
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme, enableSystem, attribute]);
+  const toggleTheme = () => {
+    setThemeState((prev) => {
+      if (prev === "dark") return "light";
+      return "dark";
+    });
+  };
+  const value = useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme: setThemeState,
+      toggleTheme
+    }),
+    [theme, resolvedTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+export { ThemeProvider, core_exports, useTheme };
+//# sourceMappingURL=chunk-KJRBRTQE.js.map
+//# sourceMappingURL=chunk-KJRBRTQE.js.map

package/dist/chunk-KJRBRTQE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/index.ts","../src/core/ThemeProvider.tsx"],"names":[],"mappings":"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","file":"chunk-KJRBRTQE.js","sourcesContent":["export * from './ThemeProvider';\r\nexport * from '../utils/cn';\r\n","import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';\r\n\r\nexport type Theme = 'dark' | 'light' | 'system';\r\n\r\nexport interface ThemeProviderProps {\r\n  children: React.ReactNode;\r\n  defaultTheme?: Theme;\r\n  storageKey?: string;\r\n  attribute?: string;\r\n  enableSystem?: boolean;\r\n}\r\n\r\ninterface ThemeContextType {\r\n  theme: Theme;\r\n  resolvedTheme: 'dark' | 'light';\r\n  setTheme: (theme: Theme) => void;\r\n  toggleTheme: () => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport function ThemeProvider({\r\n  children,\r\n  defaultTheme = 'dark',\r\n  storageKey = 'ui-theme',\r\n  attribute = 'data-theme',\r\n  enableSystem = true,\r\n}: ThemeProviderProps) {\r\n  const [theme, setThemeState] = useState<Theme>(() => {\r\n    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {\r\n      try {\r\n        const stored = window.localStorage.getItem(storageKey) as Theme | null;\r\n        if (stored) return stored;\r\n      } catch {\r\n        // Ignore storage access errors in test/restricted environments\r\n      }\r\n    }\r\n    return defaultTheme;\r\n  });\r\n\r\n  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>('dark');\r\n\r\n  useEffect(() => {\r\n    const root = document.documentElement;\r\n\r\n    const computeResolved = (t: Theme): 'dark' | 'light' => {\r\n      if (t === 'system' && enableSystem && typeof window !== 'undefined' && window.matchMedia) {\r\n        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\r\n      }\r\n      return t === 'dark' ? 'dark' : 'light';\r\n    };\r\n\r\n    const currentResolved = computeResolved(theme);\r\n    setResolvedTheme(currentResolved);\r\n\r\n    // Apply attributes and classes\r\n    root.setAttribute(attribute, currentResolved);\r\n    if (currentResolved === 'dark') {\r\n      root.classList.add('dark');\r\n      root.classList.remove('light');\r\n    } else {\r\n      root.classList.add('light');\r\n      root.classList.remove('dark');\r\n    }\r\n\r\n    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {\r\n      try {\r\n        window.localStorage.setItem(storageKey, theme);\r\n      } catch {\r\n        // Ignore storage access errors\r\n      }\r\n    }\r\n  }, [theme, attribute, enableSystem, storageKey]);\r\n\r\n  // System theme listener\r\n  useEffect(() => {\r\n    if (theme !== 'system' || !enableSystem) return;\r\n\r\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n    const handleChange = () => {\r\n      const newResolved = mediaQuery.matches ? 'dark' : 'light';\r\n      setResolvedTheme(newResolved);\r\n      document.documentElement.setAttribute(attribute, newResolved);\r\n      if (newResolved === 'dark') {\r\n        document.documentElement.classList.add('dark');\r\n        document.documentElement.classList.remove('light');\r\n      } else {\r\n        document.documentElement.classList.add('light');\r\n        document.documentElement.classList.remove('dark');\r\n      }\r\n    };\r\n\r\n    mediaQuery.addEventListener('change', handleChange);\r\n    return () => mediaQuery.removeEventListener('change', handleChange);\r\n  }, [theme, enableSystem, attribute]);\r\n\r\n  const toggleTheme = () => {\r\n    setThemeState((prev) => {\r\n      if (prev === 'dark') return 'light';\r\n      return 'dark';\r\n    });\r\n  };\r\n\r\n  const value = useMemo(\r\n    () => ({\r\n      theme,\r\n      resolvedTheme,\r\n      setTheme: setThemeState,\r\n      toggleTheme,\r\n    }),\r\n    [theme, resolvedTheme]\r\n  );\r\n\r\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\r\n}\r\n\r\nexport function useTheme(): ThemeContextType {\r\n  const context = useContext(ThemeContext);\r\n  if (!context) {\r\n    throw new Error('useTheme must be used within a ThemeProvider');\r\n  }\r\n  return context;\r\n}\r\n"]}

package/dist/chunk-LBUBXUYQ.js

@@ -0,0 +1,40 @@
+import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/overlays/FocusTrap.tsx
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function FocusTrap({ children, active = true }) {
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!active) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (first) {
+      first.focus();
+    }
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [active]);
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: "contents", children });
+}
+
+export { FocusTrap };
+//# sourceMappingURL=chunk-LBUBXUYQ.js.map
+//# sourceMappingURL=chunk-LBUBXUYQ.js.map

package/dist/chunk-LBUBXUYQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/overlays/FocusTrap.tsx"],"names":[],"mappings":";;;;AAOA,IAAM,kBAAA,GACJ,2IAAA;AAEK,SAAS,SAAA,CAAU,EAAE,QAAA,EAAU,MAAA,GAAS,MAAK,EAAmB;AACrE,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,MAAM,SAAA,GAAY,IAAA,CAAK,gBAAA,CAA8B,kBAAkB,CAAA;AACvE,IAAA,MAAM,KAAA,GAAQ,UAAU,CAAC,CAAA;AACzB,IAAA,MAAM,IAAA,GAAO,SAAA,CAAU,SAAA,CAAU,MAAA,GAAS,CAAC,CAAA;AAE3C,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,KAAA,CAAM,KAAA,EAAM;AAAA,IACd;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAAqB;AAC1C,MAAA,IAAI,CAAA,CAAE,QAAQ,KAAA,EAAO;AAErB,MAAA,IAAI,EAAE,QAAA,EAAU;AACd,QAAA,IAAI,QAAA,CAAS,kBAAkB,KAAA,EAAO;AACpC,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,IAAA,EAAM,KAAA,EAAM;AAAA,QACd;AAAA,MACF,CAAA,MAAO;AACL,QAAA,IAAI,QAAA,CAAS,kBAAkB,IAAA,EAAM;AACnC,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,KAAA,EAAO,KAAA,EAAM;AAAA,QACf;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAChD,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,SAAA,EAAW,aAAa,CAAA;AAAA,EAClE,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,2BAAQ,KAAA,EAAA,EAAI,GAAA,EAAK,OAAA,EAAS,SAAA,EAAU,YAAY,QAAA,EAAS,CAAA;AAC3D","file":"chunk-LBUBXUYQ.js","sourcesContent":["import React, { useEffect, useRef } from 'react';\r\n\r\nexport interface FocusTrapProps {\r\n  children: React.ReactNode;\r\n  active?: boolean;\r\n}\r\n\r\nconst FOCUSABLE_SELECTOR =\r\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n\r\nexport function FocusTrap({ children, active = true }: FocusTrapProps) {\r\n  const rootRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    if (!active) return;\r\n\r\n    const root = rootRef.current;\r\n    if (!root) return;\r\n\r\n    const focusable = root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);\r\n    const first = focusable[0];\r\n    const last = focusable[focusable.length - 1];\r\n\r\n    if (first) {\r\n      first.focus();\r\n    }\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key !== 'Tab') return;\r\n\r\n      if (e.shiftKey) {\r\n        if (document.activeElement === first) {\r\n          e.preventDefault();\r\n          last?.focus();\r\n        }\r\n      } else {\r\n        if (document.activeElement === last) {\r\n          e.preventDefault();\r\n          first?.focus();\r\n        }\r\n      }\r\n    };\r\n\r\n    window.addEventListener('keydown', handleKeyDown);\r\n    return () => window.removeEventListener('keydown', handleKeyDown);\r\n  }, [active]);\r\n\r\n  return <div ref={rootRef} className=\"contents\">{children}</div>;\r\n}\r\n"]}