@oxcide-ui/core 0.0.3 → 0.0.4

package/dist/index.d.ts

@@ -0,0 +1,136 @@
+import * as vue from 'vue';
+import { App, Ref } from 'vue';
+
+interface LocaleConfig {
+    /** UI text translations */
+    accept?: string;
+    reject?: string;
+    clear?: string;
+    apply?: string;
+    /** Calendar */
+    dayNames?: string[];
+    dayNamesShort?: string[];
+    dayNamesMin?: string[];
+    monthNames?: string[];
+    monthNamesShort?: string[];
+    /** ARIA accessibility labels */
+    aria?: {
+        close?: string;
+        previous?: string;
+        next?: string;
+        navigation?: string;
+        selectAll?: string;
+        [key: string]: string | undefined;
+    };
+    [key: string]: unknown;
+}
+interface OxcideUIConfig {
+    /** Locale configuration for i18n */
+    locale?: LocaleConfig;
+    /** Theme name */
+    theme?: string;
+    /** Whether to enable ripple effect */
+    ripple?: boolean;
+    /** z-index layering config */
+    zIndex?: {
+        modal?: number;
+        overlay?: number;
+        menu?: number;
+        tooltip?: number;
+    };
+}
+
+declare function createOxcideUI(config?: OxcideUIConfig): {
+    install(app: App): void;
+    config: {
+        locale?: {
+            [x: string]: unknown;
+            accept?: string | undefined;
+            reject?: string | undefined;
+            clear?: string | undefined;
+            apply?: string | undefined;
+            dayNames?: string[] | undefined;
+            dayNamesShort?: string[] | undefined;
+            dayNamesMin?: string[] | undefined;
+            monthNames?: string[] | undefined;
+            monthNamesShort?: string[] | undefined;
+            aria?: {
+                [x: string]: string | undefined;
+                close?: string | undefined;
+                previous?: string | undefined;
+                next?: string | undefined;
+                navigation?: string | undefined;
+                selectAll?: string | undefined;
+            } | undefined;
+        } | undefined;
+        theme?: string | undefined;
+        ripple?: boolean | undefined;
+        zIndex?: {
+            modal?: number | undefined;
+            overlay?: number | undefined;
+            menu?: number | undefined;
+            tooltip?: number | undefined;
+        } | undefined;
+    };
+};
+
+/**
+ * Access the global OxcideUI configuration instance.
+ */
+declare function useOxcideUI(): OxcideUIConfig;
+
+/**
+ * Access locale translations from OxcideUI configuration.
+ * Provides reactive locale values that update when config changes.
+ */
+declare function useLocale(): {
+    locale: vue.ComputedRef<LocaleConfig>;
+    t: (key: string) => string;
+};
+
+/**
+ * Traps focus within the specified element.
+ * Useful for modal dialogs, drawers, etc.
+ *
+ * @param target The element to trap focus in
+ * @param active Whether the trap is currently active
+ */
+declare function useFocusTrap(target: Ref<HTMLElement | null | undefined>, active: Ref<boolean>): void;
+
+type KeyEventHandler = (event: KeyboardEvent) => void;
+/**
+ * Register a keyboard event handler for a specific key.
+ *
+ * @param key The keyboard key to listen for (e.g., 'Escape')
+ * @param handler The handler function
+ * @param active Whether the listener is active
+ */
+declare function useKeydown(key: string, handler: KeyEventHandler, active?: boolean | Ref<boolean>): void;
+
+type ZIndexType = 'modal' | 'overlay' | 'menu' | 'tooltip';
+/**
+ * Get the next z-index for a specific layer type and increment it.
+ */
+declare function getNextZIndex(key: ZIndexType): number;
+/**
+ * Set the base z-index for a specific layer type.
+ */
+declare function setBaseZIndex(key: ZIndexType, value: number): void;
+
+/**
+ * Composable to manage z-index for dynamic overlays.
+ * Automatically increments the z-index on mount if autoZIndex is enabled.
+ */
+declare function useZIndex(key?: ZIndexType, autoZIndex?: boolean, baseZIndex?: number): {
+    zIndex: vue.Ref<number, number>;
+};
+
+declare function isClient(): boolean;
+/**
+ * Ensures that a teleport target exist in the DOM.
+ * Useful for Nuxt SSR environments where the teleport target might missing in the initial HTML.
+ * @param to The selector for the teleport target (e.g., '#teleports')
+ */
+declare function ensureTeleportTarget(to: string): void;
+
+export { type LocaleConfig, type OxcideUIConfig, createOxcideUI, ensureTeleportTarget, getNextZIndex, isClient, setBaseZIndex, useFocusTrap, useKeydown, useLocale, useOxcideUI, useZIndex };

package/dist/index.js

@@ -0,0 +1,217 @@
+// src/config.ts
+import { reactive } from "vue";
+var defaultLocale = {
+  accept: "Yes",
+  reject: "No",
+  clear: "Clear",
+  apply: "Apply",
+  aria: {
+    close: "Close",
+    previous: "Previous",
+    next: "Next",
+    navigation: "Navigation",
+    selectAll: "Select All"
+  }
+};
+var defaultConfig = {
+  locale: defaultLocale,
+  theme: "aura",
+  ripple: false,
+  zIndex: {
+    modal: 1100,
+    overlay: 1e3,
+    menu: 1e3,
+    tooltip: 1100
+  }
+};
+var OxcideUISymbol = /* @__PURE__ */ Symbol("OxcideUI");
+function createOxcideUI(config = {}) {
+  const resolvedConfig = reactive({
+    ...defaultConfig,
+    ...config,
+    locale: {
+      ...defaultLocale,
+      ...config.locale,
+      aria: {
+        ...defaultLocale.aria,
+        ...config.locale?.aria
+      }
+    },
+    zIndex: {
+      ...defaultConfig.zIndex,
+      ...config.zIndex
+    }
+  });
+  return {
+    install(app) {
+      app.provide(OxcideUISymbol, resolvedConfig);
+      app.config.globalProperties.$oxcide = resolvedConfig;
+    },
+    config: resolvedConfig
+  };
+}
+
+// src/composables/useOxcideUI.ts
+import { inject } from "vue";
+function useOxcideUI() {
+  const config = inject(OxcideUISymbol);
+  if (!config) {
+    throw new Error("[OxcideUI] Plugin not installed. Call app.use(createOxcideUI()) first.");
+  }
+  return config;
+}
+
+// src/composables/useLocale.ts
+import { computed } from "vue";
+function useLocale() {
+  const config = useOxcideUI();
+  const locale = computed(() => config.locale ?? {});
+  function t(key) {
+    const value = locale.value[key];
+    if (typeof value === "string") return value;
+    if (key.startsWith("aria.")) {
+      const ariaKey = key.slice(5);
+      return locale.value.aria?.[ariaKey] ?? key;
+    }
+    return key;
+  }
+  return { locale, t };
+}
+
+// src/composables/useFocusTrap.ts
+import { onUnmounted, watch } from "vue";
+var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function useFocusTrap(target, active) {
+  let firstFocusableEl = null;
+  let lastFocusableEl = null;
+  const getFocusableElements = () => {
+    if (!target.value) return [];
+    return Array.from(target.value.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+      (el) => !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true"
+    );
+  };
+  const handleKeyDown = (e) => {
+    if (!active.value || e.key !== "Tab") return;
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    firstFocusableEl = focusableElements[0];
+    lastFocusableEl = focusableElements[focusableElements.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus();
+        e.preventDefault();
+      }
+    } else {
+      if (document.activeElement === lastFocusableEl) {
+        firstFocusableEl.focus();
+        e.preventDefault();
+      }
+    }
+  };
+  watch(
+    active,
+    (isActive) => {
+      if (isActive) {
+        document.addEventListener("keydown", handleKeyDown);
+        const focusable = getFocusableElements();
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        }
+      } else {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
+    },
+    { immediate: true }
+  );
+  onUnmounted(() => {
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+}
+
+// src/composables/useKeydown.ts
+import { onUnmounted as onUnmounted2, watch as watch2 } from "vue";
+function useKeydown(key, handler, active = true) {
+  const handleKeyDown = (e) => {
+    if (e.key === key) {
+      handler(e);
+    }
+  };
+  const activate = () => {
+    window.addEventListener("keydown", handleKeyDown);
+  };
+  const deactivate = () => {
+    window.removeEventListener("keydown", handleKeyDown);
+  };
+  if (active === true || typeof active !== "boolean" && active.value) {
+    activate();
+  }
+  if (typeof active !== "boolean") {
+    watch2(active, (isActive) => {
+      if (isActive) activate();
+      else deactivate();
+    });
+  }
+  onUnmounted2(() => {
+    deactivate();
+  });
+}
+
+// src/composables/useZIndex.ts
+import { ref, onMounted } from "vue";
+
+// src/utils/zindex.ts
+var zIndex = {
+  modal: 1100,
+  overlay: 1e3,
+  menu: 1e3,
+  tooltip: 1100
+};
+function getNextZIndex(key) {
+  return ++zIndex[key];
+}
+function setBaseZIndex(key, value) {
+  zIndex[key] = value;
+}
+
+// src/composables/useZIndex.ts
+function useZIndex(key = "overlay", autoZIndex = true, baseZIndex = 0) {
+  const z = ref(baseZIndex || 0);
+  onMounted(() => {
+    if (autoZIndex) {
+      z.value = getNextZIndex(key);
+    }
+  });
+  return { zIndex: z };
+}
+
+// src/utils/dom.ts
+function isClient() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function ensureTeleportTarget(to) {
+  if (!isClient()) return;
+  if (typeof to === "string" && to.startsWith("#")) {
+    const id = to.slice(1);
+    const target = document.getElementById(id);
+    if (!target) {
+      const el = document.createElement("div");
+      el.id = id;
+      document.body.appendChild(el);
+    }
+  }
+}
+export {
+  createOxcideUI,
+  ensureTeleportTarget,
+  getNextZIndex,
+  isClient,
+  setBaseZIndex,
+  useFocusTrap,
+  useKeydown,
+  useLocale,
+  useOxcideUI,
+  useZIndex
+};

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@oxcide-ui/core",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "zod": "3.25.76"
   },
@@ -25,6 +28,7 @@
     "access": "public"
   },
   "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
     "type-check": "vue-tsc --noEmit",
     "lint": "biome check .",
     "lint:fix": "biome check --write ."

package/CHANGELOG.md

@@ -1,13 +0,0 @@
-# @oxcide-ui/core
-
-## 0.0.3
-
-### Patch Changes
-
-- 1961991: chore: verify automated release with updated npm token
-
-## 0.0.2
-
-### Patch Changes
-
-- 04c4ff6: feat: initial public release setup with automated CI/CD pipeline.

package/src/composables/index.ts

@@ -1,2 +0,0 @@
-export { useOxcideUI } from './useOxcideUI'
-export { useLocale } from './useLocale'

package/src/composables/useFocusTrap.ts

@@ -1,70 +0,0 @@
-import { type Ref, onUnmounted, watch } from 'vue'
-
-const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-
-/**
- * Traps focus within the specified element.
- * Useful for modal dialogs, drawers, etc.
- *
- * @param target The element to trap focus in
- * @param active Whether the trap is currently active
- */
-export function useFocusTrap(target: Ref<HTMLElement | null | undefined>, active: Ref<boolean>) {
-  let firstFocusableEl: HTMLElement | null = null
-  let lastFocusableEl: HTMLElement | null = null
-
-  const getFocusableElements = () => {
-    if (!target.value) return []
-    return Array.from(target.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
-      (el) => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'
-    )
-  }
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (!active.value || e.key !== 'Tab') return
-
-    const focusableElements = getFocusableElements()
-    if (focusableElements.length === 0) {
-      e.preventDefault()
-      return
-    }
-
-    firstFocusableEl = focusableElements[0]
-    lastFocusableEl = focusableElements[focusableElements.length - 1]
-
-    if (e.shiftKey) {
-      // Shift + Tab (backwards)
-      if (document.activeElement === firstFocusableEl) {
-        lastFocusableEl.focus()
-        e.preventDefault()
-      }
-    } else {
-      // Tab (forwards)
-      if (document.activeElement === lastFocusableEl) {
-        firstFocusableEl.focus()
-        e.preventDefault()
-      }
-    }
-  }
-
-  watch(
-    active,
-    (isActive) => {
-      if (isActive) {
-        document.addEventListener('keydown', handleKeyDown)
-        // Optional: Auto focus the first element
-        const focusable = getFocusableElements()
-        if (focusable.length > 0) {
-          focusable[0].focus()
-        }
-      } else {
-        document.removeEventListener('keydown', handleKeyDown)
-      }
-    },
-    { immediate: true }
-  )
-
-  onUnmounted(() => {
-    document.removeEventListener('keydown', handleKeyDown)
-  })
-}

package/src/composables/useKeydown.ts

@@ -1,41 +0,0 @@
-import { onUnmounted, watch, type Ref } from 'vue'
-
-type KeyEventHandler = (event: KeyboardEvent) => void
-
-/**
- * Register a keyboard event handler for a specific key.
- *
- * @param key The keyboard key to listen for (e.g., 'Escape')
- * @param handler The handler function
- * @param active Whether the listener is active
- */
-export function useKeydown(key: string, handler: KeyEventHandler, active: boolean | Ref<boolean> = true) {
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === key) {
-      handler(e)
-    }
-  }
-
-  const activate = () => {
-    window.addEventListener('keydown', handleKeyDown)
-  }
-
-  const deactivate = () => {
-    window.removeEventListener('keydown', handleKeyDown)
-  }
-
-  if (active === true || (typeof active !== 'boolean' && active.value)) {
-    activate()
-  }
-
-  if (typeof active !== 'boolean') {
-    watch(active, (isActive) => {
-      if (isActive) activate()
-      else deactivate()
-    })
-  }
-
-  onUnmounted(() => {
-    deactivate()
-  })
-}

package/src/composables/useLocale.ts

@@ -1,28 +0,0 @@
-import { computed } from 'vue'
-import { useOxcideUI } from './useOxcideUI'
-import type { LocaleConfig } from '../types'
-
-/**
- * Access locale translations from OxcideUI configuration.
- * Provides reactive locale values that update when config changes.
- */
-export function useLocale() {
-  const config = useOxcideUI()
-
-  const locale = computed<LocaleConfig>(() => config.locale ?? {})
-
-  function t(key: string): string {
-    const value = locale.value[key]
-    if (typeof value === 'string') return value
-
-    // Check nested aria keys
-    if (key.startsWith('aria.')) {
-      const ariaKey = key.slice(5)
-      return locale.value.aria?.[ariaKey] ?? key
-    }
-
-    return key
-  }
-
-  return { locale, t }
-}

package/src/composables/useOxcideUI.ts

@@ -1,14 +0,0 @@
-import { inject } from 'vue'
-import { OxcideUISymbol } from '../config'
-import type { OxcideUIConfig } from '../types'
-
-/**
- * Access the global OxcideUI configuration instance.
- */
-export function useOxcideUI(): OxcideUIConfig {
-  const config = inject(OxcideUISymbol)
-  if (!config) {
-    throw new Error('[OxcideUI] Plugin not installed. Call app.use(createOxcideUI()) first.')
-  }
-  return config
-}

package/src/composables/useZIndex.ts

@@ -1,18 +0,0 @@
-import { ref, onMounted } from 'vue'
-import { getNextZIndex, type ZIndexType } from '../utils/zindex'
-
-/**
- * Composable to manage z-index for dynamic overlays.
- * Automatically increments the z-index on mount if autoZIndex is enabled.
- */
-export function useZIndex(key: ZIndexType = 'overlay', autoZIndex = true, baseZIndex = 0) {
-  const z = ref(baseZIndex || 0)
-
-  onMounted(() => {
-    if (autoZIndex) {
-      z.value = getNextZIndex(key)
-    }
-  })
-
-  return { zIndex: z }
-}

package/src/config.ts

@@ -1,58 +0,0 @@
-import type { App, InjectionKey } from 'vue'
-import { reactive } from 'vue'
-import type { OxcideUIConfig } from './types'
-
-const defaultLocale = {
-  accept: 'Yes',
-  reject: 'No',
-  clear: 'Clear',
-  apply: 'Apply',
-  aria: {
-    close: 'Close',
-    previous: 'Previous',
-    next: 'Next',
-    navigation: 'Navigation',
-    selectAll: 'Select All'
-  }
-}
-
-const defaultConfig: OxcideUIConfig = {
-  locale: defaultLocale,
-  theme: 'aura',
-  ripple: false,
-  zIndex: {
-    modal: 1100,
-    overlay: 1000,
-    menu: 1000,
-    tooltip: 1100
-  }
-}
-
-export const OxcideUISymbol: InjectionKey<OxcideUIConfig> = Symbol('OxcideUI')
-
-export function createOxcideUI(config: OxcideUIConfig = {}) {
-  const resolvedConfig = reactive<OxcideUIConfig>({
-    ...defaultConfig,
-    ...config,
-    locale: {
-      ...defaultLocale,
-      ...config.locale,
-      aria: {
-        ...defaultLocale.aria,
-        ...config.locale?.aria
-      }
-    },
-    zIndex: {
-      ...defaultConfig.zIndex,
-      ...config.zIndex
-    }
-  })
-
-  return {
-    install(app: App) {
-      app.provide(OxcideUISymbol, resolvedConfig)
-      app.config.globalProperties.$oxcide = resolvedConfig
-    },
-    config: resolvedConfig
-  }
-}

package/src/index.ts

@@ -1,9 +0,0 @@
-export { createOxcideUI } from './config'
-export { useOxcideUI } from './composables/useOxcideUI'
-export { useLocale } from './composables/useLocale'
-export { useFocusTrap } from './composables/useFocusTrap'
-export { useKeydown } from './composables/useKeydown'
-export { useZIndex } from './composables/useZIndex'
-export { getNextZIndex, setBaseZIndex } from './utils/zindex'
-export { ensureTeleportTarget, isClient } from './utils/dom'
-export type { OxcideUIConfig, LocaleConfig } from './types'

package/src/types.ts

@@ -1,45 +0,0 @@
-export interface LocaleConfig {
-  /** UI text translations */
-  accept?: string
-  reject?: string
-  clear?: string
-  apply?: string
-
-  /** Calendar */
-  dayNames?: string[]
-  dayNamesShort?: string[]
-  dayNamesMin?: string[]
-  monthNames?: string[]
-  monthNamesShort?: string[]
-
-  /** ARIA accessibility labels */
-  aria?: {
-    close?: string
-    previous?: string
-    next?: string
-    navigation?: string
-    selectAll?: string
-    [key: string]: string | undefined
-  }
-
-  [key: string]: unknown
-}
-
-export interface OxcideUIConfig {
-  /** Locale configuration for i18n */
-  locale?: LocaleConfig
-
-  /** Theme name */
-  theme?: string
-
-  /** Whether to enable ripple effect */
-  ripple?: boolean
-
-  /** z-index layering config */
-  zIndex?: {
-    modal?: number
-    overlay?: number
-    menu?: number
-    tooltip?: number
-  }
-}

package/src/utils/dom.ts

@@ -1,22 +0,0 @@
-export function isClient() {
-  return typeof window !== 'undefined' && typeof document !== 'undefined'
-}
-
-/**
- * Ensures that a teleport target exist in the DOM.
- * Useful for Nuxt SSR environments where the teleport target might missing in the initial HTML.
- * @param to The selector for the teleport target (e.g., '#teleports')
- */
-export function ensureTeleportTarget(to: string) {
-  if (!isClient()) return
-
-  if (typeof to === 'string' && to.startsWith('#')) {
-    const id = to.slice(1)
-    const target = document.getElementById(id)
-    if (!target) {
-      const el = document.createElement('div')
-      el.id = id
-      document.body.appendChild(el)
-    }
-  }
-}

package/src/utils/zindex.ts

@@ -1,29 +0,0 @@
-export type ZIndexType = 'modal' | 'overlay' | 'menu' | 'tooltip'
-
-const zIndex: Record<ZIndexType, number> = {
-  modal: 1100,
-  overlay: 1000,
-  menu: 1000,
-  tooltip: 1100
-}
-
-/**
- * Get the next z-index for a specific layer type and increment it.
- */
-export function getNextZIndex(key: ZIndexType) {
-  return ++zIndex[key]
-}
-
-/**
- * Get the current z-index for a specific layer type.
- */
-export function getCurrentZIndex(key: ZIndexType) {
-  return zIndex[key]
-}
-
-/**
- * Set the base z-index for a specific layer type.
- */
-export function setBaseZIndex(key: ZIndexType, value: number) {
-  zIndex[key] = value
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@oxcide-ui/themes": ["../themes/src"],
-      "@oxcide-ui/schema": ["../schema/src"]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.vue"]
-}