@oxcide-ui/core 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @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/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@oxcide-ui/core",
+  "version": "0.0.3",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "dependencies": {
+    "zod": "3.25.76"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.13",
+    "typescript": "^5.8.2",
+    "vue": "^3.5.13"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "type-check": "vue-tsc --noEmit",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write ."
+  }
+}

package/src/composables/index.ts

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

package/src/composables/useFocusTrap.ts

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,29 @@
+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

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