@umbra.ui/core 0.1.10 → 0.1.12

package/dist/components/navigation/slideover/{useSlideoverController.js → useSlideoverController.mjs}

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSlideoverController = void 0;
-const vue_1 = require("vue");
-const gsap_1 = require("gsap");
-const Flip_1 = require("gsap/Flip");
-gsap_1.gsap.registerPlugin(Flip_1.Flip);
-const useSlideoverController = (panes, componentId) => {
+import { ref, computed } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+gsap.registerPlugin(Flip);
+export const useSlideoverController = (panes, componentId) => {
     // State to track visibility of panes
-    const visiblePanes = (0, vue_1.ref)(panes.map(() => false));
+    const visiblePanes = ref(panes.map(() => false));
     // Track the current active pane index
-    const currentPaneIndex = (0, vue_1.computed)(() => {
+    const currentPaneIndex = computed(() => {
         // Find the highest index that's visible
         for (let i = visiblePanes.value.length - 1; i >= 0; i--) {
             if (visiblePanes.value[i]) {
@@ -31,11 +28,11 @@ const useSlideoverController = (panes, componentId) => {
             return;
         if (show) {
             darken.style.pointerEvents = "all";
-            gsap_1.gsap.to(darken, { duration: 0.5, opacity: 1, ease: "circ.outOut" });
+            gsap.to(darken, { duration: 0.5, opacity: 1, ease: "circ.outOut" });
         }
         else {
             darken.style.pointerEvents = "none";
-            gsap_1.gsap.to(darken, { duration: 0.5, opacity: 0, ease: "circ.outOut" });
+            gsap.to(darken, { duration: 0.5, opacity: 0, ease: "circ.outOut" });
         }
     };
     // Show a specific pane and all panes after it
@@ -54,7 +51,7 @@ const useSlideoverController = (panes, componentId) => {
             .slice(0, -1) // Exclude main pane
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Show all panes from the selected index onward
         for (let i = 0; i < panes.length - 1; i++) {
             const pane = document.getElementById(getPaneId(i));
@@ -72,7 +69,7 @@ const useSlideoverController = (panes, componentId) => {
             }
         }
         // Animate
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -93,7 +90,7 @@ const useSlideoverController = (panes, componentId) => {
             .slice(0, -1)
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Hide all panes up to and including the specified index
         for (let i = 0; i <= index && i < panes.length - 1; i++) {
             const pane = document.getElementById(getPaneId(i));
@@ -104,7 +101,7 @@ const useSlideoverController = (panes, componentId) => {
             }
         }
         // Animate
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -128,7 +125,7 @@ const useSlideoverController = (panes, componentId) => {
             .slice(0, -1)
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // If the previous pane is visible, hide all before this one
         if (visiblePanes.value[index - 1]) {
             for (let i = 0; i < index; i++) {
@@ -150,7 +147,7 @@ const useSlideoverController = (panes, componentId) => {
             }
         }
         // Animate
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -169,7 +166,7 @@ const useSlideoverController = (panes, componentId) => {
             .slice(0, -1)
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Move all secondary panes to overlay
         for (let i = 0; i < panes.length - 1; i++) {
             const pane = document.getElementById(getPaneId(i));
@@ -179,7 +176,7 @@ const useSlideoverController = (panes, componentId) => {
                 overlay.appendChild(pane);
             }
         }
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -198,7 +195,7 @@ const useSlideoverController = (panes, componentId) => {
             .slice(0, -1)
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Move all panes from overlay to offscreen
         for (let i = 0; i < panes.length - 1; i++) {
             const pane = document.getElementById(getPaneId(i));
@@ -208,7 +205,7 @@ const useSlideoverController = (panes, componentId) => {
                 offscreen.appendChild(pane);
             }
         }
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -268,4 +265,3 @@ const useSlideoverController = (panes, componentId) => {
         navigate,
     };
 };
-exports.useSlideoverController = useSlideoverController;

package/dist/components/navigation/splitview/{useSplitViewController.js → useSplitViewController.mjs}

@@ -1,24 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSplitViewController = void 0;
 //useSplitViewController.ts
-const vue_1 = require("vue");
-const gsap_1 = require("gsap");
-const Flip_1 = require("gsap/Flip");
-gsap_1.gsap.registerPlugin(Flip_1.Flip);
-const useSplitViewController = (panes, componentId) => {
+import { ref, computed, unref, watch } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+gsap.registerPlugin(Flip);
+export const useSplitViewController = (panes, componentId) => {
     // Get the actual panes array
-    const panesArray = (0, vue_1.computed)(() => (0, vue_1.unref)(panes));
+    const panesArray = computed(() => unref(panes));
     // State to track visibility of panes
-    const visiblePanes = (0, vue_1.ref)(panesArray.value.map(() => true));
+    const visiblePanes = ref(panesArray.value.map(() => true));
     // Vue-native event stream for visibility changes
-    const lastVisibilityEvent = (0, vue_1.ref)(null);
+    const lastVisibilityEvent = ref(null);
     // Watch for changes in panes and update visiblePanes accordingly
-    (0, vue_1.watch)(panesArray, (newPanes) => {
+    watch(panesArray, (newPanes) => {
         visiblePanes.value = newPanes.map((_, index) => index === newPanes.length - 1 ? true : visiblePanes.value[index] || false);
     });
     // Track the current visible pane indices
-    const currentPaneIndex = (0, vue_1.computed)(() => {
+    const currentPaneIndex = computed(() => {
         // Find the highest index that's visible (excluding the last pane which is always visible)
         for (let i = visiblePanes.value.length - 2; i >= 0; i--) {
             if (visiblePanes.value[i]) {
@@ -45,7 +42,7 @@ const useSplitViewController = (panes, componentId) => {
         const paneElements = panesArray.value
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Show the specified pane
         const pane = document.getElementById(getPaneId(index));
         if (pane && !visiblePanes.value[index]) {
@@ -69,7 +66,7 @@ const useSplitViewController = (panes, componentId) => {
             lastVisibilityEvent.value = { type: "show", index };
         }
         // Animate
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -89,7 +86,7 @@ const useSplitViewController = (panes, componentId) => {
         const paneElements = panesArray.value
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Hide the specified pane
         const pane = document.getElementById(getPaneId(index));
         if (pane && visiblePanes.value[index]) {
@@ -99,7 +96,7 @@ const useSplitViewController = (panes, componentId) => {
             lastVisibilityEvent.value = { type: "hide", index };
         }
         // Animate
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -119,7 +116,7 @@ const useSplitViewController = (panes, componentId) => {
         const paneElements = panesArray.value
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Hide all panes before the clicked pane
         if (visiblePanes.value[index - 1]) {
             for (let i = 0; i < index; i++) {
@@ -143,7 +140,7 @@ const useSplitViewController = (panes, componentId) => {
             }
         }
         // Animate
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -160,7 +157,7 @@ const useSplitViewController = (panes, componentId) => {
         const paneElements = panesArray.value
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Show all panes except the last one (which is always visible)
         for (let i = 0; i < panesArray.value.length - 1; i++) {
             const pane = document.getElementById(getPaneId(i));
@@ -185,7 +182,7 @@ const useSplitViewController = (panes, componentId) => {
                 lastVisibilityEvent.value = { type: "show", index: i };
             }
         }
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -202,7 +199,7 @@ const useSplitViewController = (panes, componentId) => {
         const paneElements = panesArray.value
             .map((_, i) => document.getElementById(getPaneId(i)))
             .filter((el) => el !== null);
-        const state = Flip_1.Flip.getState(paneElements);
+        const state = Flip.getState(paneElements);
         // Hide all panes except the last one
         for (let i = 0; i < panesArray.value.length - 1; i++) {
             const pane = document.getElementById(getPaneId(i));
@@ -213,7 +210,7 @@ const useSplitViewController = (panes, componentId) => {
                 lastVisibilityEvent.value = { type: "hide", index: i };
             }
         }
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -272,7 +269,7 @@ const useSplitViewController = (panes, componentId) => {
             const paneElements = panesArray.value
                 .map((_, i) => document.getElementById(getPaneId(i)))
                 .filter((el) => el !== null);
-            const state = Flip_1.Flip.getState(paneElements);
+            const state = Flip.getState(paneElements);
             // First hide all panes
             for (let i = 0; i < panesArray.value.length - 1; i++) {
                 if (i !== index && visiblePanes.value[i]) {
@@ -307,7 +304,7 @@ const useSplitViewController = (panes, componentId) => {
                 }
                 lastVisibilityEvent.value = { type: "show", index };
             }
-            Flip_1.Flip.from(state, {
+            Flip.from(state, {
                 duration: 0.3,
                 ease: "power1.inOut",
                 absolute: true,
@@ -326,4 +323,3 @@ const useSplitViewController = (panes, componentId) => {
         navigate,
     };
 };
-exports.useSplitViewController = useSplitViewController;

package/dist/components/navigation/tabcontroller/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation/tabcontroller/useTabController.mjs

@@ -0,0 +1,10 @@
+// ============= useTabController.ts =============
+import { inject } from "vue";
+export const TabControllerKey = Symbol("TabController");
+export const useTabController = () => {
+    const context = inject(TabControllerKey);
+    if (!context) {
+        throw new Error("useTabController must be used within a TabController component");
+    }
+    return context;
+};

package/dist/components/navigation/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/pickers/CollectionPicker/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/pickers/ColorPicker/{colors.js → colors.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorGroups = exports.colorPickerColors = exports.colors = void 0;
-exports.colors = [
+export const colors = [
     { name: "Gray", hex: "#E5E7EB", weight: 200 },
     { name: "Gray", hex: "#D1D5DB", weight: 300 },
     { name: "Gray", hex: "#9CA3AF", weight: 400 },
@@ -172,98 +169,98 @@ exports.colors = [
     { name: "Rose", hex: "#881337", weight: 900 },
 ];
 // Create a colorPicker object for easy access to colors by name and weight
-exports.colorPickerColors = {};
+export const colorPickerColors = {};
 // Populate the colorPicker object
-exports.colors.forEach((color) => {
+colors.forEach((color) => {
     if (color.name && color.weight) {
         const key = `${color.name.toLowerCase()}${color.weight}`;
-        exports.colorPickerColors[key] = color;
+        colorPickerColors[key] = color;
     }
 });
 // Also export individual color groups for convenience
-exports.colorGroups = [
+export const colorGroups = [
     {
         name: "Gray",
-        colors: exports.colors.filter((c) => c.name === "Gray"),
+        colors: colors.filter((c) => c.name === "Gray"),
     },
     {
         name: "Zinc",
-        colors: exports.colors.filter((c) => c.name === "Zinc"),
+        colors: colors.filter((c) => c.name === "Zinc"),
     },
     {
         name: "Neutral",
-        colors: exports.colors.filter((c) => c.name === "Neutral"),
+        colors: colors.filter((c) => c.name === "Neutral"),
     },
     {
         name: "Stone",
-        colors: exports.colors.filter((c) => c.name === "Stone"),
+        colors: colors.filter((c) => c.name === "Stone"),
     },
     {
         name: "Red",
-        colors: exports.colors.filter((c) => c.name === "Red"),
+        colors: colors.filter((c) => c.name === "Red"),
     },
     {
         name: "Orange",
-        colors: exports.colors.filter((c) => c.name === "Orange"),
+        colors: colors.filter((c) => c.name === "Orange"),
     },
     {
         name: "Amber",
-        colors: exports.colors.filter((c) => c.name === "Amber"),
+        colors: colors.filter((c) => c.name === "Amber"),
     },
     {
         name: "Yellow",
-        colors: exports.colors.filter((c) => c.name === "Yellow"),
+        colors: colors.filter((c) => c.name === "Yellow"),
     },
     {
         name: "Lime",
-        colors: exports.colors.filter((c) => c.name === "Lime"),
+        colors: colors.filter((c) => c.name === "Lime"),
     },
     {
         name: "Green",
-        colors: exports.colors.filter((c) => c.name === "Green"),
+        colors: colors.filter((c) => c.name === "Green"),
     },
     {
         name: "Emerald",
-        colors: exports.colors.filter((c) => c.name === "Emerald"),
+        colors: colors.filter((c) => c.name === "Emerald"),
     },
     {
         name: "Teal",
-        colors: exports.colors.filter((c) => c.name === "Teal"),
+        colors: colors.filter((c) => c.name === "Teal"),
     },
     {
         name: "Cyan",
-        colors: exports.colors.filter((c) => c.name === "Cyan"),
+        colors: colors.filter((c) => c.name === "Cyan"),
     },
     {
         name: "Sky",
-        colors: exports.colors.filter((c) => c.name === "Sky"),
+        colors: colors.filter((c) => c.name === "Sky"),
     },
     {
         name: "Blue",
-        colors: exports.colors.filter((c) => c.name === "Blue"),
+        colors: colors.filter((c) => c.name === "Blue"),
     },
     {
         name: "Indigo",
-        colors: exports.colors.filter((c) => c.name === "Indigo"),
+        colors: colors.filter((c) => c.name === "Indigo"),
     },
     {
         name: "Violet",
-        colors: exports.colors.filter((c) => c.name === "Violet"),
+        colors: colors.filter((c) => c.name === "Violet"),
     },
     {
         name: "Purple",
-        colors: exports.colors.filter((c) => c.name === "Purple"),
+        colors: colors.filter((c) => c.name === "Purple"),
     },
     {
         name: "Fuchsia",
-        colors: exports.colors.filter((c) => c.name === "Fuchsia"),
+        colors: colors.filter((c) => c.name === "Fuchsia"),
     },
     {
         name: "Pink",
-        colors: exports.colors.filter((c) => c.name === "Pink"),
+        colors: colors.filter((c) => c.name === "Pink"),
     },
     {
         name: "Rose",
-        colors: exports.colors.filter((c) => c.name === "Rose"),
+        colors: colors.filter((c) => c.name === "Rose"),
     },
 ];

package/dist/components/pickers/FilePicker/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/{readme.js → readme.mjs}

@@ -1,8 +1,5 @@
-"use strict";
 // README accessors - Optional module for accessing component documentation
 // This module is only needed for playground/documentation purposes
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerReadmes = exports.getReadmeIndex = exports.getAvailableComponents = exports.getComponentReadme = void 0;
 // This will be populated by Vite's import.meta.glob in Vite environments
 // or remain empty in other bundlers
 // Disabled for CommonJS compatibility
@@ -28,39 +25,35 @@ for (const [path, content] of Object.entries(__readmeModules)) {
  * @param componentName - The component name (kebab-case or PascalCase)
  * @returns The README content as a string, or undefined if not found
  */
-const getComponentReadme = (componentName) => {
+export const getComponentReadme = (componentName) => {
     const kebab = componentName
         .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
         .replace(/[\s_]+/g, "-")
         .toLowerCase();
     return README_INDEX[kebab] || README_INDEX[componentName.toLowerCase()];
 };
-exports.getComponentReadme = getComponentReadme;
 /**
  * Get all available component names that have README files
  * @returns Array of component names
  */
-const getAvailableComponents = () => {
+export const getAvailableComponents = () => {
     return Object.keys(README_INDEX);
 };
-exports.getAvailableComponents = getAvailableComponents;
 /**
  * Get the complete README index
  * @returns The README index object
  */
-const getReadmeIndex = () => {
+export const getReadmeIndex = () => {
     return { ...README_INDEX };
 };
-exports.getReadmeIndex = getReadmeIndex;
 /**
  * Register additional README content (useful for non-Vite environments)
  * @param modules - Object mapping file paths to README content
  */
-const registerReadmes = (modules) => {
+export const registerReadmes = (modules) => {
     for (const [path, content] of Object.entries(modules)) {
         if (typeof content === "string") {
             __indexReadme(path, content);
         }
     }
 };
-exports.registerReadmes = registerReadmes;

package/dist/{theme.js → theme.mjs}

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.getRegisteredThemes = exports.isThemeRegistered = exports.unregisterCustomTheme = exports.registerCustomTheme = exports.destroyThemeManager = exports.isAutoDetectEnabled = exports.setAutoDetect = exports.toggleTheme = exports.getThemeConfig = exports.getTheme = exports.setCustomTheme = exports.setTheme = exports.themeConfig = exports.autoDetect = exports.customThemeColorMode = exports.customThemeId = exports.currentTheme = exports.themeManager = void 0;
-const vue_1 = require("vue");
+import { ref, computed, readonly } from "vue";
 // Track registered themes to avoid duplicates
 const registeredThemes = new Set();
 class ThemeManager {
     constructor() {
-        this.currentTheme = (0, vue_1.ref)("light");
-        this.autoDetect = (0, vue_1.ref)(true);
+        this.currentTheme = ref("light");
+        this.autoDetect = ref(true);
         this.mediaQuery = null;
         this.systemThemeListener = null;
-        this.customThemeId = (0, vue_1.ref)(undefined);
-        this.customThemeColorMode = (0, vue_1.ref)(undefined);
+        this.customThemeId = ref(undefined);
+        this.customThemeColorMode = ref(undefined);
         this.initialize();
     }
     initialize() {
@@ -179,20 +176,20 @@ class ThemeManager {
     }
     // Expose reactive references as readonly for components
     get theme() {
-        return (0, vue_1.readonly)(this.currentTheme);
+        return readonly(this.currentTheme);
     }
     get customThemeIdRef() {
-        return (0, vue_1.readonly)(this.customThemeId);
+        return readonly(this.customThemeId);
     }
     get customThemeColorModeRef() {
-        return (0, vue_1.readonly)(this.customThemeColorMode);
+        return readonly(this.customThemeColorMode);
     }
     get autoDetectRef() {
-        return (0, vue_1.readonly)(this.autoDetect);
+        return readonly(this.autoDetect);
     }
     // Computed property for the full config
     get configRef() {
-        return (0, vue_1.computed)(() => ({
+        return computed(() => ({
             theme: this.currentTheme.value,
             autoDetect: this.autoDetect.value,
             customThemeId: this.customThemeId.value,
@@ -201,33 +198,25 @@ class ThemeManager {
     }
 }
 // Create singleton instance
-exports.themeManager = new ThemeManager();
+export const themeManager = new ThemeManager();
 // Export reactive references for direct use in components
-exports.currentTheme = exports.themeManager.theme;
-exports.customThemeId = exports.themeManager.customThemeIdRef;
-exports.customThemeColorMode = exports.themeManager.customThemeColorModeRef;
-exports.autoDetect = exports.themeManager.autoDetectRef;
-exports.themeConfig = exports.themeManager.configRef;
+export const currentTheme = themeManager.theme;
+export const customThemeId = themeManager.customThemeIdRef;
+export const customThemeColorMode = themeManager.customThemeColorModeRef;
+export const autoDetect = themeManager.autoDetectRef;
+export const themeConfig = themeManager.configRef;
 // Export convenience functions (keep existing API)
-const setTheme = (theme, save) => exports.themeManager.setTheme(theme, save);
-exports.setTheme = setTheme;
-const setCustomTheme = (customThemeId, customThemeColorMode, save) => exports.themeManager.setCustomTheme(customThemeId, customThemeColorMode, save);
-exports.setCustomTheme = setCustomTheme;
-const getTheme = () => exports.themeManager.getTheme();
-exports.getTheme = getTheme;
-const getThemeConfig = () => exports.themeManager.getConfig();
-exports.getThemeConfig = getThemeConfig;
-const toggleTheme = () => exports.themeManager.toggleTheme();
-exports.toggleTheme = toggleTheme;
-const setAutoDetect = (enabled) => exports.themeManager.setAutoDetect(enabled);
-exports.setAutoDetect = setAutoDetect;
-const isAutoDetectEnabled = () => exports.themeManager.isAutoDetectEnabled();
-exports.isAutoDetectEnabled = isAutoDetectEnabled;
+export const setTheme = (theme, save) => themeManager.setTheme(theme, save);
+export const setCustomTheme = (customThemeId, customThemeColorMode, save) => themeManager.setCustomTheme(customThemeId, customThemeColorMode, save);
+export const getTheme = () => themeManager.getTheme();
+export const getThemeConfig = () => themeManager.getConfig();
+export const toggleTheme = () => themeManager.toggleTheme();
+export const setAutoDetect = (enabled) => themeManager.setAutoDetect(enabled);
+export const isAutoDetectEnabled = () => themeManager.isAutoDetectEnabled();
 // Cleanup function for SPA navigation
-const destroyThemeManager = () => exports.themeManager.destroy();
-exports.destroyThemeManager = destroyThemeManager;
+export const destroyThemeManager = () => themeManager.destroy();
 // Custom theme registration utilities
-const registerCustomTheme = (themeId, cssVariables) => {
+export const registerCustomTheme = (themeId, cssVariables) => {
     // Check if already registered
     if (registeredThemes.has(themeId)) {
         console.warn(`Theme "${themeId}" is already registered`);
@@ -250,46 +239,41 @@ ${cssVars}
     document.head.appendChild(style);
     registeredThemes.add(themeId);
 };
-exports.registerCustomTheme = registerCustomTheme;
-const unregisterCustomTheme = (themeId) => {
+export const unregisterCustomTheme = (themeId) => {
     const styleElement = document.querySelector(`style[data-umbra-custom-theme="${themeId}"]`);
     if (styleElement) {
         styleElement.remove();
         registeredThemes.delete(themeId);
     }
 };
-exports.unregisterCustomTheme = unregisterCustomTheme;
-const isThemeRegistered = (themeId) => {
+export const isThemeRegistered = (themeId) => {
     return registeredThemes.has(themeId);
 };
-exports.isThemeRegistered = isThemeRegistered;
-const getRegisteredThemes = () => {
+export const getRegisteredThemes = () => {
     return Array.from(registeredThemes);
 };
-exports.getRegisteredThemes = getRegisteredThemes;
 // Composable for use in Vue components
-const useTheme = () => {
+export const useTheme = () => {
     return {
         // Reactive refs
-        theme: exports.currentTheme,
-        customThemeId: exports.customThemeId,
-        customThemeColorMode: exports.customThemeColorMode,
-        autoDetect: exports.autoDetect,
-        config: exports.themeConfig,
+        theme: currentTheme,
+        customThemeId,
+        customThemeColorMode,
+        autoDetect,
+        config: themeConfig,
         // Methods
-        setTheme: exports.setTheme,
-        setCustomTheme: exports.setCustomTheme,
-        toggleTheme: exports.toggleTheme,
-        setAutoDetect: exports.setAutoDetect,
+        setTheme,
+        setCustomTheme,
+        toggleTheme,
+        setAutoDetect,
         // Custom theme registration (for advanced usage)
-        registerCustomTheme: exports.registerCustomTheme,
-        unregisterCustomTheme: exports.unregisterCustomTheme,
-        isThemeRegistered: exports.isThemeRegistered,
-        getRegisteredThemes: exports.getRegisteredThemes,
+        registerCustomTheme,
+        unregisterCustomTheme,
+        isThemeRegistered,
+        getRegisteredThemes,
         // Non-reactive getters (for backward compatibility)
-        getTheme: exports.getTheme,
-        getThemeConfig: exports.getThemeConfig,
-        isAutoDetectEnabled: exports.isAutoDetectEnabled,
+        getTheme,
+        getThemeConfig,
+        isAutoDetectEnabled,
     };
 };
-exports.useTheme = useTheme;