cisse-vue-ui 0.7.3 → 0.7.5

package/dist/types/components.d.ts

@@ -0,0 +1,28 @@
+export type StatusBadgeVariant = 'default' | 'success' | 'error' | 'warning' | 'info' | 'blue' | 'orange' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'gray';
+export type TableActionColor = 'info' | 'warning' | 'success' | 'error';
+export type ModalSize = 'sm' | 'default' | 'lg' | 'xl' | 'full';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export interface MenuItemProps {
+    label: string;
+    icon: string;
+    link: string;
+    notification?: boolean;
+}
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    loading?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showPageSize?: boolean;
+}
+export type { ButtonVariant, ButtonSize } from '../components/core/Button.vue';
+export type { AvatarSize } from '../components/core/Avatar.vue';
+export type { Tab } from '../components/core/Tabs.vue';
+export type { DropdownItem } from '../components/core/Dropdown.vue';
+export type { Step } from '../components/core/Stepper.vue';
+export type { AlertVariant } from '../components/feedback/Alert.vue';
+export type { PageBreadcrumb } from '../components/layout/PageLayout.vue';
+export type { SortDirection } from '../components/core/TableComponent.vue';
+export type { MenuPosition, UserMenuItem } from '../components/layout/BaseLayout.vue';
+export type { PageHeroStat, PageHeroColorScheme } from '../components/layout/PageHero.vue';

package/dist/types/form.d.ts

@@ -0,0 +1,37 @@
+export interface InputProps {
+    type?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    name?: string;
+    /** Mark as required field */
+    required?: boolean;
+    /** ID of element that describes this input (for aria-describedby) */
+    describedBy?: string;
+    /** Icon name (iconify format) - displayed on the left */
+    icon?: string;
+    /** Icon on the right side */
+    iconRight?: string;
+}
+export interface SelectOption {
+    value: string | number | boolean | null;
+    label: string;
+    hidden?: boolean;
+}
+export interface SelectProps extends InputProps {
+    options?: SelectOption[];
+}
+export interface FormGroupProps extends InputProps, SelectProps {
+    label?: string;
+    cols?: number;
+    hidden?: boolean;
+    error?: string | boolean;
+    /** Set to true to render a select instead of input */
+    select?: boolean;
+}
+export interface AutocompleteOption {
+    value: string;
+    label: string;
+}

package/dist/types/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.cjs.map

package/dist/types/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './property';
+export * from './notification';
+export * from './form';
+export * from './components';

package/dist/types/index.test.d.ts

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

package/dist/types/notification.d.ts

@@ -0,0 +1,12 @@
+export type NotificationType = 'success' | 'warning' | 'error' | 'info';
+export interface Notification {
+    id: string;
+    type: NotificationType;
+    message: string;
+    title?: string | null;
+    duration?: number;
+}
+export interface NotificationOptions {
+    duration?: number;
+    title?: string;
+}

package/dist/types/property.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Table column property definition
+ *
+ * This interface defines how table columns are configured and rendered.
+ * The `type` field automatically loads the corresponding type component.
+ *
+ * Built-in types:
+ * - 'text': Default text display (TextType.vue)
+ * - 'number': Formatted number display (NumberType.vue)
+ * - 'date': Formatted date display (DateType.vue)
+ * - 'boolean': Yes/No with icons (BooleanType.vue)
+ * - 'badge': Badge display (BadgeType.vue)
+ */
+export interface Property {
+    /** Column key - corresponds to the data field name */
+    name: string;
+    /** Display label for the column header */
+    label?: string;
+    /**
+     * Column type for automatic rendering (default: 'text')
+     * Built-in: 'text' | 'number' | 'date' | 'badge' | 'boolean'
+     */
+    type?: 'text' | 'number' | 'date' | 'badge' | 'boolean' | string;
+    /** Whether the column is sortable (default: false) */
+    sortable?: boolean;
+    /** Whether to hide the column (default: false) */
+    hidden?: boolean;
+    /** Text alignment in the column (default: 'left') */
+    align?: 'left' | 'center' | 'right';
+    /** Optional Tailwind CSS classes to apply to column cells */
+    className?: string;
+    /** Whether the column is the main/primary column (default: false) */
+    main?: boolean;
+}

package/dist/useDarkMode-DLZcJEUQ.cjs

@@ -0,0 +1,52 @@
+"use strict";
+const vue = require("vue");
+function useDarkMode(options = {}) {
+  const {
+    selector = "html",
+    attribute = "class",
+    storageKey = "dark-mode",
+    defaultValue = false
+  } = options;
+  const isDark = vue.ref(defaultValue);
+  const getInitialValue = () => {
+    if (typeof window === "undefined") return defaultValue;
+    const stored = localStorage.getItem(storageKey);
+    if (stored !== null) {
+      return stored === "true";
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  };
+  const updateDOM = (dark) => {
+    if (typeof document === "undefined") return;
+    const element = document.querySelector(selector);
+    if (!element) return;
+    if (attribute === "class") {
+      element.classList.toggle("dark", dark);
+    } else {
+      element.setAttribute(attribute, dark ? "dark" : "light");
+    }
+  };
+  const toggle = () => {
+    isDark.value = !isDark.value;
+  };
+  const set = (value) => {
+    isDark.value = value;
+  };
+  vue.watch(isDark, (newValue) => {
+    updateDOM(newValue);
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(storageKey, String(newValue));
+    }
+  });
+  vue.onMounted(() => {
+    isDark.value = getInitialValue();
+    updateDOM(isDark.value);
+  });
+  return {
+    isDark,
+    toggle,
+    set
+  };
+}
+exports.useDarkMode = useDarkMode;
+//# sourceMappingURL=useDarkMode-DLZcJEUQ.cjs.map

package/dist/useDarkMode-DLZcJEUQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDarkMode-DLZcJEUQ.cjs","sources":["../src/composables/useDarkMode.ts"],"sourcesContent":["import { ref, watch, onMounted } from 'vue'\n\nexport interface DarkModeOptions {\n  selector?: string\n  attribute?: string\n  storageKey?: string\n  defaultValue?: boolean\n}\n\n/**\n * Composable for managing dark mode state\n */\nexport function useDarkMode(options: DarkModeOptions = {}) {\n  const {\n    selector = 'html',\n    attribute = 'class',\n    storageKey = 'dark-mode',\n    defaultValue = false,\n  } = options\n\n  const isDark = ref(defaultValue)\n\n  const getInitialValue = (): boolean => {\n    if (typeof window === 'undefined') return defaultValue\n\n    const stored = localStorage.getItem(storageKey)\n    if (stored !== null) {\n      return stored === 'true'\n    }\n\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n  }\n\n  const updateDOM = (dark: boolean) => {\n    if (typeof document === 'undefined') return\n\n    const element = document.querySelector(selector)\n    if (!element) return\n\n    if (attribute === 'class') {\n      element.classList.toggle('dark', dark)\n    } else {\n      element.setAttribute(attribute, dark ? 'dark' : 'light')\n    }\n  }\n\n  const toggle = () => {\n    isDark.value = !isDark.value\n  }\n\n  const set = (value: boolean) => {\n    isDark.value = value\n  }\n\n  watch(isDark, (newValue) => {\n    updateDOM(newValue)\n    if (typeof localStorage !== 'undefined') {\n      localStorage.setItem(storageKey, String(newValue))\n    }\n  })\n\n  onMounted(() => {\n    isDark.value = getInitialValue()\n    updateDOM(isDark.value)\n  })\n\n  return {\n    isDark,\n    toggle,\n    set,\n  }\n}\n"],"names":["ref","watch","onMounted"],"mappings":";;AAYO,SAAS,YAAY,UAA2B,IAAI;AACzD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,eAAe;AAAA,EAAA,IACb;AAEJ,QAAM,SAASA,IAAAA,IAAI,YAAY;AAE/B,QAAM,kBAAkB,MAAe;AACrC,QAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,UAAM,SAAS,aAAa,QAAQ,UAAU;AAC9C,QAAI,WAAW,MAAM;AACnB,aAAO,WAAW;AAAA,IACpB;AAEA,WAAO,OAAO,WAAW,8BAA8B,EAAE;AAAA,EAC3D;AAEA,QAAM,YAAY,CAAC,SAAkB;AACnC,QAAI,OAAO,aAAa,YAAa;AAErC,UAAM,UAAU,SAAS,cAAc,QAAQ;AAC/C,QAAI,CAAC,QAAS;AAEd,QAAI,cAAc,SAAS;AACzB,cAAQ,UAAU,OAAO,QAAQ,IAAI;AAAA,IACvC,OAAO;AACL,cAAQ,aAAa,WAAW,OAAO,SAAS,OAAO;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,SAAS,MAAM;AACnB,WAAO,QAAQ,CAAC,OAAO;AAAA,EACzB;AAEA,QAAM,MAAM,CAAC,UAAmB;AAC9B,WAAO,QAAQ;AAAA,EACjB;AAEAC,YAAM,QAAQ,CAAC,aAAa;AAC1B,cAAU,QAAQ;AAClB,QAAI,OAAO,iBAAiB,aAAa;AACvC,mBAAa,QAAQ,YAAY,OAAO,QAAQ,CAAC;AAAA,IACnD;AAAA,EACF,CAAC;AAEDC,MAAAA,UAAU,MAAM;AACd,WAAO,QAAQ,gBAAA;AACf,cAAU,OAAO,KAAK;AAAA,EACxB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;"}

package/dist/useDropdown-DHFnd259.cjs

@@ -0,0 +1,130 @@
+"use strict";
+const vue = require("vue");
+function useDropdown(triggerRef, dropdownRef, options = {}) {
+  const { teleport = true, align = "left", gap = 8, onOpen, onClose } = options;
+  const isOpen = vue.ref(false);
+  const highlightedIndex = vue.ref(-1);
+  const dropdownPosition = vue.ref({ top: 0, left: 0, right: 0, width: 0 });
+  const updatePosition = () => {
+    if (!triggerRef.value || !teleport) return;
+    const rect = triggerRef.value.getBoundingClientRect();
+    dropdownPosition.value = {
+      top: rect.bottom + window.scrollY + gap,
+      left: rect.left + window.scrollX,
+      right: window.innerWidth - rect.right - window.scrollX,
+      width: rect.width
+    };
+  };
+  const open = () => {
+    isOpen.value = true;
+    vue.nextTick(updatePosition);
+    onOpen == null ? void 0 : onOpen();
+  };
+  const close = () => {
+    isOpen.value = false;
+    highlightedIndex.value = -1;
+    onClose == null ? void 0 : onClose();
+  };
+  const toggle = () => {
+    if (isOpen.value) {
+      close();
+    } else {
+      open();
+    }
+  };
+  const handleClickOutside = (event) => {
+    var _a, _b;
+    const target = event.target;
+    const isInsideTrigger = (_a = triggerRef.value) == null ? void 0 : _a.contains(target);
+    const isInsideDropdown = (_b = dropdownRef.value) == null ? void 0 : _b.contains(target);
+    if (!isInsideTrigger && !isInsideDropdown) {
+      close();
+    }
+  };
+  const scrollToHighlighted = (dropdownEl) => {
+    vue.nextTick(() => {
+      if (dropdownEl) {
+        const highlighted = dropdownEl.querySelector(
+          `[data-index="${highlightedIndex.value}"]`
+        );
+        if (highlighted) {
+          highlighted.scrollIntoView({ block: "nearest" });
+        }
+      }
+    });
+  };
+  const handleKeydown = (event, navOptions) => {
+    const { itemCount, onSelect, onOpen: onOpenNav, handleOpenKeys = false } = navOptions;
+    if (!isOpen.value) {
+      if (handleOpenKeys && (event.key === "Enter" || event.key === " " || event.key === "ArrowDown")) {
+        event.preventDefault();
+        onOpenNav == null ? void 0 : onOpenNav();
+        open();
+      }
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        highlightedIndex.value = Math.min(highlightedIndex.value + 1, itemCount - 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (highlightedIndex.value >= 0) {
+          onSelect == null ? void 0 : onSelect(highlightedIndex.value);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  };
+  const dropdownStyle = vue.computed(() => {
+    if (!teleport) return {};
+    return {
+      position: "absolute",
+      top: `${dropdownPosition.value.top}px`,
+      left: align === "right" ? "auto" : `${dropdownPosition.value.left}px`,
+      right: align === "right" ? `${dropdownPosition.value.right}px` : "auto",
+      width: `${dropdownPosition.value.width}px`
+    };
+  });
+  vue.watch(isOpen, (newValue) => {
+    if (newValue) {
+      document.addEventListener("click", handleClickOutside);
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      document.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  vue.onUnmounted(() => {
+    document.removeEventListener("click", handleClickOutside);
+    window.removeEventListener("scroll", updatePosition, true);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return {
+    isOpen,
+    highlightedIndex,
+    dropdownPosition,
+    dropdownStyle,
+    open,
+    close,
+    toggle,
+    updatePosition,
+    handleKeydown,
+    scrollToHighlighted
+  };
+}
+exports.useDropdown = useDropdown;
+//# sourceMappingURL=useDropdown-DHFnd259.cjs.map

package/dist/useDropdown-DHFnd259.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown-DHFnd259.cjs","sources":["../src/composables/useDropdown.ts"],"sourcesContent":["import { ref, computed, watch, onUnmounted, nextTick, type Ref, type ComputedRef } from 'vue'\n\nexport interface UseDropdownOptions {\n  /** Whether teleport is enabled (affects position calculation) */\n  teleport?: boolean\n  /** Alignment for position calculation */\n  align?: 'left' | 'right'\n  /** Gap between trigger and dropdown in pixels */\n  gap?: number\n  /** Callback when dropdown opens */\n  onOpen?: () => void\n  /** Callback when dropdown closes */\n  onClose?: () => void\n}\n\nexport interface UseDropdownReturn {\n  /** Whether the dropdown is currently open */\n  isOpen: Ref<boolean>\n  /** Current highlighted index for keyboard navigation */\n  highlightedIndex: Ref<number>\n  /** Calculated position for teleported dropdown */\n  dropdownPosition: Ref<{ top: number; left: number; right: number; width: number }>\n  /** Computed style object for teleported dropdown */\n  dropdownStyle: ComputedRef<Record<string, string>>\n  /** Open the dropdown */\n  open: () => void\n  /** Close the dropdown */\n  close: () => void\n  /** Toggle the dropdown */\n  toggle: () => void\n  /** Update position (call after DOM changes) */\n  updatePosition: () => void\n  /** Handle keyboard navigation */\n  handleKeydown: (event: KeyboardEvent, options: KeyboardNavigationOptions) => void\n  /** Scroll to highlighted item */\n  scrollToHighlighted: (dropdownEl: HTMLElement | null) => void\n}\n\nexport interface KeyboardNavigationOptions {\n  /** Total number of items to navigate */\n  itemCount: number\n  /** Called when Enter is pressed on a highlighted item */\n  onSelect?: (index: number) => void\n  /** Called when the dropdown should open (Space/Enter/ArrowDown when closed) */\n  onOpen?: () => void\n  /** Whether to handle open keys (Space/Enter/ArrowDown) when closed */\n  handleOpenKeys?: boolean\n}\n\nexport function useDropdown(\n  triggerRef: Ref<HTMLElement | null | undefined>,\n  dropdownRef: Ref<HTMLElement | null | undefined>,\n  options: UseDropdownOptions = {}\n): UseDropdownReturn {\n  const { teleport = true, align = 'left', gap = 8, onOpen, onClose } = options\n\n  const isOpen = ref(false)\n  const highlightedIndex = ref(-1)\n  const dropdownPosition = ref({ top: 0, left: 0, right: 0, width: 0 })\n\n  const updatePosition = () => {\n    if (!triggerRef.value || !teleport) return\n    const rect = triggerRef.value.getBoundingClientRect()\n    dropdownPosition.value = {\n      top: rect.bottom + window.scrollY + gap,\n      left: rect.left + window.scrollX,\n      right: window.innerWidth - rect.right - window.scrollX,\n      width: rect.width,\n    }\n  }\n\n  const open = () => {\n    isOpen.value = true\n    nextTick(updatePosition)\n    onOpen?.()\n  }\n\n  const close = () => {\n    isOpen.value = false\n    highlightedIndex.value = -1\n    onClose?.()\n  }\n\n  const toggle = () => {\n    if (isOpen.value) {\n      close()\n    } else {\n      open()\n    }\n  }\n\n  const handleClickOutside = (event: MouseEvent) => {\n    const target = event.target as Node\n    const isInsideTrigger = triggerRef.value?.contains(target)\n    const isInsideDropdown = dropdownRef.value?.contains(target)\n    if (!isInsideTrigger && !isInsideDropdown) {\n      close()\n    }\n  }\n\n  const scrollToHighlighted = (dropdownEl: HTMLElement | null) => {\n    nextTick(() => {\n      if (dropdownEl) {\n        const highlighted = dropdownEl.querySelector(\n          `[data-index=\"${highlightedIndex.value}\"]`\n        ) as HTMLElement\n        if (highlighted) {\n          highlighted.scrollIntoView({ block: 'nearest' })\n        }\n      }\n    })\n  }\n\n  const handleKeydown = (event: KeyboardEvent, navOptions: KeyboardNavigationOptions) => {\n    const { itemCount, onSelect, onOpen: onOpenNav, handleOpenKeys = false } = navOptions\n\n    if (!isOpen.value) {\n      if (handleOpenKeys && (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown')) {\n        event.preventDefault()\n        onOpenNav?.()\n        open()\n      }\n      return\n    }\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        highlightedIndex.value = Math.min(highlightedIndex.value + 1, itemCount - 1)\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)\n        break\n      case 'Enter':\n        event.preventDefault()\n        if (highlightedIndex.value >= 0) {\n          onSelect?.(highlightedIndex.value)\n        }\n        break\n      case 'Escape':\n        event.preventDefault()\n        close()\n        break\n      case 'Tab':\n        close()\n        break\n    }\n  }\n\n  const dropdownStyle = computed(() => {\n    if (!teleport) return {} as Record<string, string>\n    return {\n      position: 'absolute',\n      top: `${dropdownPosition.value.top}px`,\n      left: align === 'right' ? 'auto' : `${dropdownPosition.value.left}px`,\n      right: align === 'right' ? `${dropdownPosition.value.right}px` : 'auto',\n      width: `${dropdownPosition.value.width}px`,\n    } as Record<string, string>\n  })\n\n  // Event listener management\n  watch(isOpen, (newValue) => {\n    if (newValue) {\n      document.addEventListener('click', handleClickOutside)\n      window.addEventListener('scroll', updatePosition, true)\n      window.addEventListener('resize', updatePosition)\n    } else {\n      document.removeEventListener('click', handleClickOutside)\n      window.removeEventListener('scroll', updatePosition, true)\n      window.removeEventListener('resize', updatePosition)\n    }\n  })\n\n  onUnmounted(() => {\n    document.removeEventListener('click', handleClickOutside)\n    window.removeEventListener('scroll', updatePosition, true)\n    window.removeEventListener('resize', updatePosition)\n  })\n\n  return {\n    isOpen,\n    highlightedIndex,\n    dropdownPosition,\n    dropdownStyle,\n    open,\n    close,\n    toggle,\n    updatePosition,\n    handleKeydown,\n    scrollToHighlighted,\n  }\n}\n"],"names":["ref","nextTick","computed","watch","onUnmounted"],"mappings":"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"}

package/dist/useFocusTrap-kcxO8AeU.cjs

@@ -0,0 +1,119 @@
+"use strict";
+const vue = require("vue");
+const FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]'
+].join(", ");
+function useFocusTrap(options = {}) {
+  const { focusFirst = true, restoreFocus = true, initialFocus = null } = options;
+  const containerRef = vue.ref(null);
+  const isActive = vue.ref(false);
+  const previouslyFocusedElement = vue.ref(null);
+  function getFocusableElements() {
+    if (!containerRef.value) return [];
+    return Array.from(containerRef.value.querySelectorAll(FOCUSABLE_SELECTORS)).filter(
+      (el) => el.offsetParent !== null
+      // Element is visible
+    );
+  }
+  function getInitialFocusElement() {
+    if (!containerRef.value) return null;
+    if (initialFocus) {
+      if (typeof initialFocus === "string") {
+        return containerRef.value.querySelector(initialFocus);
+      }
+      return initialFocus;
+    }
+    const focusable = getFocusableElements();
+    return focusable[0] || null;
+  }
+  function handleKeyDown(event) {
+    if (event.key !== "Tab" || !containerRef.value) return;
+    const focusable = getFocusableElements();
+    if (focusable.length === 0) return;
+    const firstFocusable = focusable[0];
+    const lastFocusable = focusable[focusable.length - 1];
+    const activeElement = document.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === firstFocusable || !containerRef.value.contains(activeElement)) {
+        event.preventDefault();
+        lastFocusable.focus();
+      }
+    } else {
+      if (activeElement === lastFocusable || !containerRef.value.contains(activeElement)) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+  function activate() {
+    if (isActive.value) return;
+    previouslyFocusedElement.value = document.activeElement;
+    isActive.value = true;
+    document.addEventListener("keydown", handleKeyDown);
+    if (focusFirst) {
+      requestAnimationFrame(() => {
+        const initialElement = getInitialFocusElement();
+        if (initialElement) {
+          initialElement.focus();
+        }
+      });
+    }
+  }
+  function deactivate() {
+    if (!isActive.value) return;
+    isActive.value = false;
+    document.removeEventListener("keydown", handleKeyDown);
+    if (restoreFocus && previouslyFocusedElement.value) {
+      previouslyFocusedElement.value.focus();
+      previouslyFocusedElement.value = null;
+    }
+  }
+  const activeOption = options.active;
+  if (activeOption !== void 0) {
+    if (typeof activeOption === "boolean") {
+      if (activeOption) {
+        const unwatch = vue.watch(
+          containerRef,
+          (container) => {
+            if (container) {
+              activate();
+              unwatch();
+            }
+          },
+          { immediate: true }
+        );
+      }
+    } else {
+      vue.watch(
+        [activeOption, containerRef],
+        ([active, container]) => {
+          if (active && container) {
+            activate();
+          } else if (!active) {
+            deactivate();
+          }
+        },
+        { immediate: true }
+      );
+    }
+  }
+  if (vue.getCurrentInstance()) {
+    vue.onUnmounted(() => {
+      deactivate();
+    });
+  }
+  return {
+    containerRef,
+    activate,
+    deactivate,
+    isActive
+  };
+}
+exports.useFocusTrap = useFocusTrap;
+//# sourceMappingURL=useFocusTrap-kcxO8AeU.cjs.map

package/dist/useFocusTrap-kcxO8AeU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap-kcxO8AeU.cjs","sources":["../src/composables/useFocusTrap.ts"],"sourcesContent":["import { ref, watch, onUnmounted, getCurrentInstance, type Ref } from 'vue'\n\nconst FOCUSABLE_SELECTORS = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n].join(', ')\n\nexport interface UseFocusTrapOptions {\n  /** Whether the focus trap is active */\n  active?: Ref<boolean> | boolean\n  /** Focus the first focusable element when trap activates */\n  focusFirst?: boolean\n  /** Restore focus to the previously focused element when trap deactivates */\n  restoreFocus?: boolean\n  /** Initial element to focus (selector or element) */\n  initialFocus?: string | HTMLElement | null\n}\n\nexport interface UseFocusTrapReturn {\n  /** Ref to attach to the container element */\n  containerRef: Ref<HTMLElement | null>\n  /** Activate the focus trap manually */\n  activate: () => void\n  /** Deactivate the focus trap manually */\n  deactivate: () => void\n  /** Whether the focus trap is currently active */\n  isActive: Ref<boolean>\n}\n\n/**\n * Composable for trapping focus within a container element (for modals, dialogs, etc.)\n *\n * @example\n * ```vue\n * <script setup>\n * const isOpen = ref(false)\n * const { containerRef } = useFocusTrap({ active: isOpen })\n * </script>\n *\n * <template>\n *   <div v-if=\"isOpen\" ref=\"containerRef\" role=\"dialog\">\n *     <button>First focusable</button>\n *     <input type=\"text\" />\n *     <button @click=\"isOpen = false\">Close</button>\n *   </div>\n * </template>\n * ```\n */\nexport function useFocusTrap(options: UseFocusTrapOptions = {}): UseFocusTrapReturn {\n  const { focusFirst = true, restoreFocus = true, initialFocus = null } = options\n\n  const containerRef = ref<HTMLElement | null>(null)\n  const isActive = ref(false)\n  const previouslyFocusedElement = ref<HTMLElement | null>(null)\n\n  function getFocusableElements(): HTMLElement[] {\n    if (!containerRef.value) return []\n    return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS)).filter(\n      (el) => el.offsetParent !== null, // Element is visible\n    )\n  }\n\n  function getInitialFocusElement(): HTMLElement | null {\n    if (!containerRef.value) return null\n\n    if (initialFocus) {\n      if (typeof initialFocus === 'string') {\n        return containerRef.value.querySelector<HTMLElement>(initialFocus)\n      }\n      return initialFocus\n    }\n\n    const focusable = getFocusableElements()\n    return focusable[0] || null\n  }\n\n  function handleKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Tab' || !containerRef.value) return\n\n    const focusable = getFocusableElements()\n    if (focusable.length === 0) return\n\n    const firstFocusable = focusable[0]\n    const lastFocusable = focusable[focusable.length - 1]\n    const activeElement = document.activeElement as HTMLElement\n\n    if (event.shiftKey) {\n      // Shift + Tab: move backwards\n      if (activeElement === firstFocusable || !containerRef.value.contains(activeElement)) {\n        event.preventDefault()\n        lastFocusable.focus()\n      }\n    } else {\n      // Tab: move forwards\n      if (activeElement === lastFocusable || !containerRef.value.contains(activeElement)) {\n        event.preventDefault()\n        firstFocusable.focus()\n      }\n    }\n  }\n\n  function activate(): void {\n    if (isActive.value) return\n\n    // Store the currently focused element\n    previouslyFocusedElement.value = document.activeElement as HTMLElement\n\n    isActive.value = true\n\n    // Add event listener\n    document.addEventListener('keydown', handleKeyDown)\n\n    // Focus initial element after a tick to ensure DOM is ready\n    if (focusFirst) {\n      requestAnimationFrame(() => {\n        const initialElement = getInitialFocusElement()\n        if (initialElement) {\n          initialElement.focus()\n        }\n      })\n    }\n  }\n\n  function deactivate(): void {\n    if (!isActive.value) return\n\n    isActive.value = false\n\n    // Remove event listener\n    document.removeEventListener('keydown', handleKeyDown)\n\n    // Restore focus\n    if (restoreFocus && previouslyFocusedElement.value) {\n      previouslyFocusedElement.value.focus()\n      previouslyFocusedElement.value = null\n    }\n  }\n\n  // Handle reactive active option\n  const activeOption = options.active\n  if (activeOption !== undefined) {\n    if (typeof activeOption === 'boolean') {\n      if (activeOption) {\n        // Wait for containerRef to be set\n        const unwatch = watch(\n          containerRef,\n          (container) => {\n            if (container) {\n              activate()\n              unwatch()\n            }\n          },\n          { immediate: true },\n        )\n      }\n    } else {\n      // It's a Ref<boolean>\n      watch(\n        [activeOption, containerRef],\n        ([active, container]) => {\n          if (active && container) {\n            activate()\n          } else if (!active) {\n            deactivate()\n          }\n        },\n        { immediate: true },\n      )\n    }\n  }\n\n  // Cleanup on unmount (only when used inside a component)\n  if (getCurrentInstance()) {\n    onUnmounted(() => {\n      deactivate()\n    })\n  }\n\n  return {\n    containerRef,\n    activate,\n    deactivate,\n    isActive,\n  }\n}\n"],"names":["ref","watch","getCurrentInstance","onUnmounted"],"mappings":"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"}

package/dist/useId-nxrBaIC9.cjs

@@ -0,0 +1,25 @@
+"use strict";
+const vue = require("vue");
+let idCounter = 0;
+function generateId(prefix = "id") {
+  idCounter++;
+  return `cisse-${prefix}-${idCounter}`;
+}
+function resetIdCounter() {
+  idCounter = 0;
+}
+function useId(options = {}) {
+  const { prefix = "id", id: customId } = options;
+  const id = vue.ref(customId || generateId(prefix));
+  const related = (suffix) => {
+    return `${id.value}-${suffix}`;
+  };
+  return {
+    id,
+    related
+  };
+}
+exports.generateId = generateId;
+exports.resetIdCounter = resetIdCounter;
+exports.useId = useId;
+//# sourceMappingURL=useId-nxrBaIC9.cjs.map

package/dist/useId-nxrBaIC9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId-nxrBaIC9.cjs","sources":["../src/composables/useId.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nlet idCounter = 0\n\n/**\n * Generates a unique ID for accessibility relationships (aria-labelledby, aria-describedby, etc.)\n * Pattern: cisse-{prefix}-{counter}\n */\nexport function generateId(prefix = 'id'): string {\n  idCounter++\n  return `cisse-${prefix}-${idCounter}`\n}\n\n/**\n * Resets the ID counter (useful for testing)\n */\nexport function resetIdCounter(): void {\n  idCounter = 0\n}\n\nexport interface UseIdOptions {\n  /** Prefix for the generated ID */\n  prefix?: string\n  /** Custom ID to use instead of generating one */\n  id?: string\n}\n\nexport interface UseIdReturn {\n  /** The unique ID (reactive) */\n  id: Ref<string>\n  /** Generate a related ID with a suffix (e.g., id-label, id-description) */\n  related: (suffix: string) => string\n}\n\n/**\n * Composable for generating unique IDs for accessibility relationships\n *\n * @example\n * ```vue\n * <script setup>\n * const { id, related } = useId({ prefix: 'modal' })\n * // id.value = 'cisse-modal-1'\n * // related('title') = 'cisse-modal-1-title'\n * // related('description') = 'cisse-modal-1-description'\n * </script>\n *\n * <template>\n *   <div :id=\"id\" role=\"dialog\" :aria-labelledby=\"related('title')\">\n *     <h2 :id=\"related('title')\">Modal Title</h2>\n *   </div>\n * </template>\n * ```\n */\nexport function useId(options: UseIdOptions = {}): UseIdReturn {\n  const { prefix = 'id', id: customId } = options\n\n  const id = ref(customId || generateId(prefix))\n\n  const related = (suffix: string): string => {\n    return `${id.value}-${suffix}`\n  }\n\n  return {\n    id,\n    related,\n  }\n}\n"],"names":["ref"],"mappings":";;AAEA,IAAI,YAAY;AAMT,SAAS,WAAW,SAAS,MAAc;AAChD;AACA,SAAO,SAAS,MAAM,IAAI,SAAS;AACrC;AAKO,SAAS,iBAAuB;AACrC,cAAY;AACd;AAmCO,SAAS,MAAM,UAAwB,IAAiB;AAC7D,QAAM,EAAE,SAAS,MAAM,IAAI,aAAa;AAExC,QAAM,KAAKA,IAAAA,IAAI,YAAY,WAAW,MAAM,CAAC;AAE7C,QAAM,UAAU,CAAC,WAA2B;AAC1C,WAAO,GAAG,GAAG,KAAK,IAAI,MAAM;AAAA,EAC9B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;;;;"}