cisse-vue-ui 0.8.3 → 0.9.0

package/dist/{useDropdown-De0cKI83.js → useDropdown-XITCE_SM.js}

@@ -133,8 +133,9 @@ function useDropdown(triggerRef, dropdownRef, options = {}) {
   };
   const dropdownStyle = computed(() => {
     if (!teleport) return {};
-    const [side] = placement.split("-");
+    const [side, alignment] = placement.split("-");
     const isHorizontal = side === "left" || side === "right";
+    const isRightAligned = align === "right" || alignment === "end";
     const style = {
       position: "absolute",
       top: `${dropdownPosition.value.top}px`
@@ -146,8 +147,8 @@ function useDropdown(triggerRef, dropdownRef, options = {}) {
         style.left = `${dropdownPosition.value.left}px`;
       }
     } else {
-      style.left = dropdownPosition.value.right ? "auto" : `${dropdownPosition.value.left}px`;
-      style.right = dropdownPosition.value.right ? `${dropdownPosition.value.right}px` : "auto";
+      style.left = isRightAligned ? "auto" : `${dropdownPosition.value.left}px`;
+      style.right = isRightAligned ? `${dropdownPosition.value.right}px` : "auto";
       style.width = `${dropdownPosition.value.width}px`;
     }
     return style;
@@ -184,4 +185,4 @@ function useDropdown(triggerRef, dropdownRef, options = {}) {
 export {
   useDropdown as u
 };
-//# sourceMappingURL=useDropdown-De0cKI83.js.map
+//# sourceMappingURL=useDropdown-XITCE_SM.js.map

package/dist/{useDropdown-De0cKI83.js.map → useDropdown-XITCE_SM.js.map}

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

package/dist/useInputStyles-BFTJdXHL.js

@@ -0,0 +1,127 @@
+import { computed } from "vue";
+const unwrap = (value) => {
+  return typeof value === "object" && value !== null && "value" in value ? value.value : value;
+};
+function useInputStyles(options = {}) {
+  const {
+    disabled = false,
+    invalid = false,
+    focused = false,
+    size = "md",
+    hasLeftIcon = false,
+    hasRightIcon = false,
+    hasValue = true
+  } = options;
+  const baseClasses = [
+    "w-full rounded-md border text-sm transition-all",
+    "focus:outline-none"
+  ];
+  const stateClasses = computed(() => {
+    const isDisabled = unwrap(disabled);
+    const isInvalid = unwrap(invalid);
+    const isFocused = unwrap(focused);
+    if (isDisabled) {
+      return [
+        "cursor-not-allowed",
+        "border-gray-200 bg-gray-50 text-gray-500",
+        "dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500"
+      ];
+    }
+    if (isInvalid) {
+      return [
+        "border-red-500 bg-white text-gray-800",
+        "focus:border-red-500 focus:ring-2 focus:ring-red-500/20",
+        "dark:border-red-500 dark:bg-gray-900 dark:text-gray-200"
+      ];
+    }
+    if (isFocused) {
+      return [
+        "border-primary ring-2 ring-primary/20 bg-white text-gray-800",
+        "dark:bg-gray-900 dark:text-gray-200"
+      ];
+    }
+    return [
+      "border-gray-300 bg-white text-gray-800",
+      "hover:border-gray-400",
+      "focus:border-primary focus:ring-2 focus:ring-primary/20",
+      "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-600"
+    ];
+  });
+  const sizeClasses = computed(() => {
+    const currentSize = unwrap(size);
+    switch (currentSize) {
+      case "sm":
+        return ["py-1.5", "text-xs"];
+      case "lg":
+        return ["py-3", "text-base"];
+      default:
+        return ["py-2", "text-sm"];
+    }
+  });
+  const paddingClasses = computed(() => {
+    const hasLeft = unwrap(hasLeftIcon);
+    const hasRight = unwrap(hasRightIcon);
+    return [
+      hasLeft ? "pl-10" : "px-3",
+      hasRight ? "pr-10" : "px-3"
+    ];
+  });
+  const textColorClass = computed(() => {
+    const hasVal = unwrap(hasValue);
+    if (!hasVal) {
+      return ["text-gray-400", "dark:text-gray-500"];
+    }
+    return ["text-gray-800", "dark:text-gray-200"];
+  });
+  const inputClass = computed(() => [
+    ...baseClasses,
+    ...stateClasses.value,
+    ...sizeClasses.value,
+    ...paddingClasses.value,
+    "placeholder-gray-400 dark:placeholder-gray-500"
+  ]);
+  const triggerClass = computed(() => [
+    "flex items-center justify-between gap-2 text-left",
+    ...baseClasses,
+    ...stateClasses.value,
+    ...sizeClasses.value,
+    "px-3",
+    // triggers always have px-3
+    ...textColorClass.value
+  ]);
+  const wrapperClass = computed(() => {
+    const isDisabled = unwrap(disabled);
+    const currentSize = unwrap(size);
+    const sizeWrapperClasses = {
+      sm: "min-h-9 py-1.5 px-2 gap-1",
+      md: "min-h-11 py-2 px-3 gap-1.5",
+      lg: "min-h-13 py-2.5 px-4 gap-2"
+    }[currentSize];
+    if (isDisabled) {
+      return [
+        "flex flex-wrap items-center rounded-md border transition-all cursor-not-allowed",
+        "border-gray-200 bg-gray-50",
+        "dark:border-gray-800 dark:bg-gray-950",
+        sizeWrapperClasses
+      ];
+    }
+    return [
+      "flex flex-wrap items-center rounded-md border transition-all cursor-text",
+      "border-gray-300 bg-white hover:border-gray-400",
+      "focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
+      "dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600",
+      sizeWrapperClasses
+    ];
+  });
+  const iconClass = computed(() => ["size-4", "text-gray-400"]);
+  return {
+    inputClass,
+    triggerClass,
+    wrapperClass,
+    iconClass
+  };
+}
+export {
+  useInputStyles as u
+};
+//# sourceMappingURL=useInputStyles-BFTJdXHL.js.map

package/dist/useInputStyles-BFTJdXHL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputStyles-BFTJdXHL.js","sources":["../src/composables/useInputStyles.ts"],"sourcesContent":["import { computed, type Ref, type ComputedRef } from 'vue'\r\n\r\nexport type InputSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface UseInputStylesOptions {\r\n  /** Disabled state */\r\n  disabled?: Ref<boolean> | boolean\r\n  /** Invalid/error state */\r\n  invalid?: Ref<boolean> | boolean\r\n  /** Focused state (for trigger buttons like select) */\r\n  focused?: Ref<boolean> | boolean\r\n  /** Input size */\r\n  size?: Ref<InputSize> | InputSize\r\n  /** Has left icon/content */\r\n  hasLeftIcon?: Ref<boolean> | boolean\r\n  /** Has right icon/content */\r\n  hasRightIcon?: Ref<boolean> | boolean\r\n  /** Has value selected (for placeholder color) */\r\n  hasValue?: Ref<boolean> | boolean\r\n}\r\n\r\nexport interface UseInputStylesReturn {\r\n  /** Base input classes (for <input>, <textarea>) */\r\n  inputClass: ComputedRef<string[]>\r\n  /** Trigger button classes (for select, datepicker, combobox triggers) */\r\n  triggerClass: ComputedRef<string[]>\r\n  /** Container/wrapper classes */\r\n  wrapperClass: ComputedRef<string[]>\r\n  /** Icon classes */\r\n  iconClass: ComputedRef<string[]>\r\n}\r\n\r\n// Helper to unwrap ref or return value directly\r\nconst unwrap = <T>(value: Ref<T> | T): T => {\r\n  return typeof value === 'object' && value !== null && 'value' in value\r\n    ? (value as Ref<T>).value\r\n    : value as T\r\n}\r\n\r\n/**\r\n * Composable for consistent input styling across all form components\r\n */\r\nexport function useInputStyles(options: UseInputStylesOptions = {}): UseInputStylesReturn {\r\n  const {\r\n    disabled = false,\r\n    invalid = false,\r\n    focused = false,\r\n    size = 'md',\r\n    hasLeftIcon = false,\r\n    hasRightIcon = false,\r\n    hasValue = true,\r\n  } = options\r\n\r\n  // Base classes shared by inputs and triggers\r\n  const baseClasses = [\r\n    'w-full rounded-md border text-sm transition-all',\r\n    'focus:outline-none',\r\n  ]\r\n\r\n  // State classes\r\n  const stateClasses = computed(() => {\r\n    const isDisabled = unwrap(disabled)\r\n    const isInvalid = unwrap(invalid)\r\n    const isFocused = unwrap(focused)\r\n\r\n    if (isDisabled) {\r\n      return [\r\n        'cursor-not-allowed',\r\n        'border-gray-200 bg-gray-50 text-gray-500',\r\n        'dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500',\r\n      ]\r\n    }\r\n\r\n    if (isInvalid) {\r\n      return [\r\n        'border-red-500 bg-white text-gray-800',\r\n        'focus:border-red-500 focus:ring-2 focus:ring-red-500/20',\r\n        'dark:border-red-500 dark:bg-gray-900 dark:text-gray-200',\r\n      ]\r\n    }\r\n\r\n    if (isFocused) {\r\n      return [\r\n        'border-primary ring-2 ring-primary/20 bg-white text-gray-800',\r\n        'dark:bg-gray-900 dark:text-gray-200',\r\n      ]\r\n    }\r\n\r\n    return [\r\n      'border-gray-300 bg-white text-gray-800',\r\n      'hover:border-gray-400',\r\n      'focus:border-primary focus:ring-2 focus:ring-primary/20',\r\n      'dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-600',\r\n    ]\r\n  })\r\n\r\n  // Size classes\r\n  const sizeClasses = computed(() => {\r\n    const currentSize = unwrap(size)\r\n    switch (currentSize) {\r\n      case 'sm':\r\n        return ['py-1.5', 'text-xs']\r\n      case 'lg':\r\n        return ['py-3', 'text-base']\r\n      default:\r\n        return ['py-2', 'text-sm']\r\n    }\r\n  })\r\n\r\n  // Padding classes based on icons\r\n  const paddingClasses = computed(() => {\r\n    const hasLeft = unwrap(hasLeftIcon)\r\n    const hasRight = unwrap(hasRightIcon)\r\n\r\n    return [\r\n      hasLeft ? 'pl-10' : 'px-3',\r\n      hasRight ? 'pr-10' : 'px-3',\r\n    ]\r\n  })\r\n\r\n  // Text color for placeholder state (select, datepicker)\r\n  const textColorClass = computed(() => {\r\n    const hasVal = unwrap(hasValue)\r\n    if (!hasVal) {\r\n      return ['text-gray-400', 'dark:text-gray-500']\r\n    }\r\n    return ['text-gray-800', 'dark:text-gray-200']\r\n  })\r\n\r\n  // Full input classes (for <input>, <textarea>)\r\n  const inputClass = computed(() => [\r\n    ...baseClasses,\r\n    ...stateClasses.value,\r\n    ...sizeClasses.value,\r\n    ...paddingClasses.value,\r\n    'placeholder-gray-400 dark:placeholder-gray-500',\r\n  ])\r\n\r\n  // Trigger button classes (for select, datepicker, combobox)\r\n  const triggerClass = computed(() => [\r\n    'flex items-center justify-between gap-2 text-left',\r\n    ...baseClasses,\r\n    ...stateClasses.value,\r\n    ...sizeClasses.value,\r\n    'px-3', // triggers always have px-3\r\n    ...textColorClass.value,\r\n  ])\r\n\r\n  // Wrapper/container classes (for TagsInput, etc.)\r\n  const wrapperClass = computed(() => {\r\n    const isDisabled = unwrap(disabled)\r\n    const currentSize = unwrap(size)\r\n\r\n    const sizeWrapperClasses = {\r\n      sm: 'min-h-9 py-1.5 px-2 gap-1',\r\n      md: 'min-h-11 py-2 px-3 gap-1.5',\r\n      lg: 'min-h-13 py-2.5 px-4 gap-2',\r\n    }[currentSize]\r\n\r\n    if (isDisabled) {\r\n      return [\r\n        'flex flex-wrap items-center rounded-md border transition-all cursor-not-allowed',\r\n        'border-gray-200 bg-gray-50',\r\n        'dark:border-gray-800 dark:bg-gray-950',\r\n        sizeWrapperClasses,\r\n      ]\r\n    }\r\n\r\n    return [\r\n      'flex flex-wrap items-center rounded-md border transition-all cursor-text',\r\n      'border-gray-300 bg-white hover:border-gray-400',\r\n      'focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',\r\n      'dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600',\r\n      sizeWrapperClasses,\r\n    ]\r\n  })\r\n\r\n  // Icon classes\r\n  const iconClass = computed(() => ['size-4', 'text-gray-400'])\r\n\r\n  return {\r\n    inputClass,\r\n    triggerClass,\r\n    wrapperClass,\r\n    iconClass,\r\n  }\r\n}\r\n"],"names":[],"mappings":";AAiCA,MAAM,SAAS,CAAI,UAAyB;AAC1C,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,WAAW,QAC5D,MAAiB,QAClB;AACN;AAKO,SAAS,eAAe,UAAiC,IAA0B;AACxF,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,WAAW;AAAA,EAAA,IACT;AAGJ,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,EAAA;AAIF,QAAM,eAAe,SAAS,MAAM;AAClC,UAAM,aAAa,OAAO,QAAQ;AAClC,UAAM,YAAY,OAAO,OAAO;AAChC,UAAM,YAAY,OAAO,OAAO;AAEhC,QAAI,YAAY;AACd,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,QAAI,WAAW;AACb,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,QAAI,WAAW;AACb,aAAO;AAAA,QACL;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,CAAC;AAGD,QAAM,cAAc,SAAS,MAAM;AACjC,UAAM,cAAc,OAAO,IAAI;AAC/B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO,CAAC,UAAU,SAAS;AAAA,MAC7B,KAAK;AACH,eAAO,CAAC,QAAQ,WAAW;AAAA,MAC7B;AACE,eAAO,CAAC,QAAQ,SAAS;AAAA,IAAA;AAAA,EAE/B,CAAC;AAGD,QAAM,iBAAiB,SAAS,MAAM;AACpC,UAAM,UAAU,OAAO,WAAW;AAClC,UAAM,WAAW,OAAO,YAAY;AAEpC,WAAO;AAAA,MACL,UAAU,UAAU;AAAA,MACpB,WAAW,UAAU;AAAA,IAAA;AAAA,EAEzB,CAAC;AAGD,QAAM,iBAAiB,SAAS,MAAM;AACpC,UAAM,SAAS,OAAO,QAAQ;AAC9B,QAAI,CAAC,QAAQ;AACX,aAAO,CAAC,iBAAiB,oBAAoB;AAAA,IAC/C;AACA,WAAO,CAAC,iBAAiB,oBAAoB;AAAA,EAC/C,CAAC;AAGD,QAAM,aAAa,SAAS,MAAM;AAAA,IAChC,GAAG;AAAA,IACH,GAAG,aAAa;AAAA,IAChB,GAAG,YAAY;AAAA,IACf,GAAG,eAAe;AAAA,IAClB;AAAA,EAAA,CACD;AAGD,QAAM,eAAe,SAAS,MAAM;AAAA,IAClC;AAAA,IACA,GAAG;AAAA,IACH,GAAG,aAAa;AAAA,IAChB,GAAG,YAAY;AAAA,IACf;AAAA;AAAA,IACA,GAAG,eAAe;AAAA,EAAA,CACnB;AAGD,QAAM,eAAe,SAAS,MAAM;AAClC,UAAM,aAAa,OAAO,QAAQ;AAClC,UAAM,cAAc,OAAO,IAAI;AAE/B,UAAM,qBAAqB;AAAA,MACzB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,EACJ,WAAW;AAEb,QAAI,YAAY;AACd,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,CAAC;AAGD,QAAM,YAAY,SAAS,MAAM,CAAC,UAAU,eAAe,CAAC;AAE5D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/useInputStyles-DMfvW6N5.cjs

@@ -0,0 +1,126 @@
+"use strict";
+const vue = require("vue");
+const unwrap = (value) => {
+  return typeof value === "object" && value !== null && "value" in value ? value.value : value;
+};
+function useInputStyles(options = {}) {
+  const {
+    disabled = false,
+    invalid = false,
+    focused = false,
+    size = "md",
+    hasLeftIcon = false,
+    hasRightIcon = false,
+    hasValue = true
+  } = options;
+  const baseClasses = [
+    "w-full rounded-md border text-sm transition-all",
+    "focus:outline-none"
+  ];
+  const stateClasses = vue.computed(() => {
+    const isDisabled = unwrap(disabled);
+    const isInvalid = unwrap(invalid);
+    const isFocused = unwrap(focused);
+    if (isDisabled) {
+      return [
+        "cursor-not-allowed",
+        "border-gray-200 bg-gray-50 text-gray-500",
+        "dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500"
+      ];
+    }
+    if (isInvalid) {
+      return [
+        "border-red-500 bg-white text-gray-800",
+        "focus:border-red-500 focus:ring-2 focus:ring-red-500/20",
+        "dark:border-red-500 dark:bg-gray-900 dark:text-gray-200"
+      ];
+    }
+    if (isFocused) {
+      return [
+        "border-primary ring-2 ring-primary/20 bg-white text-gray-800",
+        "dark:bg-gray-900 dark:text-gray-200"
+      ];
+    }
+    return [
+      "border-gray-300 bg-white text-gray-800",
+      "hover:border-gray-400",
+      "focus:border-primary focus:ring-2 focus:ring-primary/20",
+      "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-600"
+    ];
+  });
+  const sizeClasses = vue.computed(() => {
+    const currentSize = unwrap(size);
+    switch (currentSize) {
+      case "sm":
+        return ["py-1.5", "text-xs"];
+      case "lg":
+        return ["py-3", "text-base"];
+      default:
+        return ["py-2", "text-sm"];
+    }
+  });
+  const paddingClasses = vue.computed(() => {
+    const hasLeft = unwrap(hasLeftIcon);
+    const hasRight = unwrap(hasRightIcon);
+    return [
+      hasLeft ? "pl-10" : "px-3",
+      hasRight ? "pr-10" : "px-3"
+    ];
+  });
+  const textColorClass = vue.computed(() => {
+    const hasVal = unwrap(hasValue);
+    if (!hasVal) {
+      return ["text-gray-400", "dark:text-gray-500"];
+    }
+    return ["text-gray-800", "dark:text-gray-200"];
+  });
+  const inputClass = vue.computed(() => [
+    ...baseClasses,
+    ...stateClasses.value,
+    ...sizeClasses.value,
+    ...paddingClasses.value,
+    "placeholder-gray-400 dark:placeholder-gray-500"
+  ]);
+  const triggerClass = vue.computed(() => [
+    "flex items-center justify-between gap-2 text-left",
+    ...baseClasses,
+    ...stateClasses.value,
+    ...sizeClasses.value,
+    "px-3",
+    // triggers always have px-3
+    ...textColorClass.value
+  ]);
+  const wrapperClass = vue.computed(() => {
+    const isDisabled = unwrap(disabled);
+    const currentSize = unwrap(size);
+    const sizeWrapperClasses = {
+      sm: "min-h-9 py-1.5 px-2 gap-1",
+      md: "min-h-11 py-2 px-3 gap-1.5",
+      lg: "min-h-13 py-2.5 px-4 gap-2"
+    }[currentSize];
+    if (isDisabled) {
+      return [
+        "flex flex-wrap items-center rounded-md border transition-all cursor-not-allowed",
+        "border-gray-200 bg-gray-50",
+        "dark:border-gray-800 dark:bg-gray-950",
+        sizeWrapperClasses
+      ];
+    }
+    return [
+      "flex flex-wrap items-center rounded-md border transition-all cursor-text",
+      "border-gray-300 bg-white hover:border-gray-400",
+      "focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
+      "dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600",
+      sizeWrapperClasses
+    ];
+  });
+  const iconClass = vue.computed(() => ["size-4", "text-gray-400"]);
+  return {
+    inputClass,
+    triggerClass,
+    wrapperClass,
+    iconClass
+  };
+}
+exports.useInputStyles = useInputStyles;
+//# sourceMappingURL=useInputStyles-DMfvW6N5.cjs.map

package/dist/useInputStyles-DMfvW6N5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputStyles-DMfvW6N5.cjs","sources":["../src/composables/useInputStyles.ts"],"sourcesContent":["import { computed, type Ref, type ComputedRef } from 'vue'\r\n\r\nexport type InputSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface UseInputStylesOptions {\r\n  /** Disabled state */\r\n  disabled?: Ref<boolean> | boolean\r\n  /** Invalid/error state */\r\n  invalid?: Ref<boolean> | boolean\r\n  /** Focused state (for trigger buttons like select) */\r\n  focused?: Ref<boolean> | boolean\r\n  /** Input size */\r\n  size?: Ref<InputSize> | InputSize\r\n  /** Has left icon/content */\r\n  hasLeftIcon?: Ref<boolean> | boolean\r\n  /** Has right icon/content */\r\n  hasRightIcon?: Ref<boolean> | boolean\r\n  /** Has value selected (for placeholder color) */\r\n  hasValue?: Ref<boolean> | boolean\r\n}\r\n\r\nexport interface UseInputStylesReturn {\r\n  /** Base input classes (for <input>, <textarea>) */\r\n  inputClass: ComputedRef<string[]>\r\n  /** Trigger button classes (for select, datepicker, combobox triggers) */\r\n  triggerClass: ComputedRef<string[]>\r\n  /** Container/wrapper classes */\r\n  wrapperClass: ComputedRef<string[]>\r\n  /** Icon classes */\r\n  iconClass: ComputedRef<string[]>\r\n}\r\n\r\n// Helper to unwrap ref or return value directly\r\nconst unwrap = <T>(value: Ref<T> | T): T => {\r\n  return typeof value === 'object' && value !== null && 'value' in value\r\n    ? (value as Ref<T>).value\r\n    : value as T\r\n}\r\n\r\n/**\r\n * Composable for consistent input styling across all form components\r\n */\r\nexport function useInputStyles(options: UseInputStylesOptions = {}): UseInputStylesReturn {\r\n  const {\r\n    disabled = false,\r\n    invalid = false,\r\n    focused = false,\r\n    size = 'md',\r\n    hasLeftIcon = false,\r\n    hasRightIcon = false,\r\n    hasValue = true,\r\n  } = options\r\n\r\n  // Base classes shared by inputs and triggers\r\n  const baseClasses = [\r\n    'w-full rounded-md border text-sm transition-all',\r\n    'focus:outline-none',\r\n  ]\r\n\r\n  // State classes\r\n  const stateClasses = computed(() => {\r\n    const isDisabled = unwrap(disabled)\r\n    const isInvalid = unwrap(invalid)\r\n    const isFocused = unwrap(focused)\r\n\r\n    if (isDisabled) {\r\n      return [\r\n        'cursor-not-allowed',\r\n        'border-gray-200 bg-gray-50 text-gray-500',\r\n        'dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500',\r\n      ]\r\n    }\r\n\r\n    if (isInvalid) {\r\n      return [\r\n        'border-red-500 bg-white text-gray-800',\r\n        'focus:border-red-500 focus:ring-2 focus:ring-red-500/20',\r\n        'dark:border-red-500 dark:bg-gray-900 dark:text-gray-200',\r\n      ]\r\n    }\r\n\r\n    if (isFocused) {\r\n      return [\r\n        'border-primary ring-2 ring-primary/20 bg-white text-gray-800',\r\n        'dark:bg-gray-900 dark:text-gray-200',\r\n      ]\r\n    }\r\n\r\n    return [\r\n      'border-gray-300 bg-white text-gray-800',\r\n      'hover:border-gray-400',\r\n      'focus:border-primary focus:ring-2 focus:ring-primary/20',\r\n      'dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-600',\r\n    ]\r\n  })\r\n\r\n  // Size classes\r\n  const sizeClasses = computed(() => {\r\n    const currentSize = unwrap(size)\r\n    switch (currentSize) {\r\n      case 'sm':\r\n        return ['py-1.5', 'text-xs']\r\n      case 'lg':\r\n        return ['py-3', 'text-base']\r\n      default:\r\n        return ['py-2', 'text-sm']\r\n    }\r\n  })\r\n\r\n  // Padding classes based on icons\r\n  const paddingClasses = computed(() => {\r\n    const hasLeft = unwrap(hasLeftIcon)\r\n    const hasRight = unwrap(hasRightIcon)\r\n\r\n    return [\r\n      hasLeft ? 'pl-10' : 'px-3',\r\n      hasRight ? 'pr-10' : 'px-3',\r\n    ]\r\n  })\r\n\r\n  // Text color for placeholder state (select, datepicker)\r\n  const textColorClass = computed(() => {\r\n    const hasVal = unwrap(hasValue)\r\n    if (!hasVal) {\r\n      return ['text-gray-400', 'dark:text-gray-500']\r\n    }\r\n    return ['text-gray-800', 'dark:text-gray-200']\r\n  })\r\n\r\n  // Full input classes (for <input>, <textarea>)\r\n  const inputClass = computed(() => [\r\n    ...baseClasses,\r\n    ...stateClasses.value,\r\n    ...sizeClasses.value,\r\n    ...paddingClasses.value,\r\n    'placeholder-gray-400 dark:placeholder-gray-500',\r\n  ])\r\n\r\n  // Trigger button classes (for select, datepicker, combobox)\r\n  const triggerClass = computed(() => [\r\n    'flex items-center justify-between gap-2 text-left',\r\n    ...baseClasses,\r\n    ...stateClasses.value,\r\n    ...sizeClasses.value,\r\n    'px-3', // triggers always have px-3\r\n    ...textColorClass.value,\r\n  ])\r\n\r\n  // Wrapper/container classes (for TagsInput, etc.)\r\n  const wrapperClass = computed(() => {\r\n    const isDisabled = unwrap(disabled)\r\n    const currentSize = unwrap(size)\r\n\r\n    const sizeWrapperClasses = {\r\n      sm: 'min-h-9 py-1.5 px-2 gap-1',\r\n      md: 'min-h-11 py-2 px-3 gap-1.5',\r\n      lg: 'min-h-13 py-2.5 px-4 gap-2',\r\n    }[currentSize]\r\n\r\n    if (isDisabled) {\r\n      return [\r\n        'flex flex-wrap items-center rounded-md border transition-all cursor-not-allowed',\r\n        'border-gray-200 bg-gray-50',\r\n        'dark:border-gray-800 dark:bg-gray-950',\r\n        sizeWrapperClasses,\r\n      ]\r\n    }\r\n\r\n    return [\r\n      'flex flex-wrap items-center rounded-md border transition-all cursor-text',\r\n      'border-gray-300 bg-white hover:border-gray-400',\r\n      'focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',\r\n      'dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600',\r\n      sizeWrapperClasses,\r\n    ]\r\n  })\r\n\r\n  // Icon classes\r\n  const iconClass = computed(() => ['size-4', 'text-gray-400'])\r\n\r\n  return {\r\n    inputClass,\r\n    triggerClass,\r\n    wrapperClass,\r\n    iconClass,\r\n  }\r\n}\r\n"],"names":["computed"],"mappings":";;AAiCA,MAAM,SAAS,CAAI,UAAyB;AAC1C,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,WAAW,QAC5D,MAAiB,QAClB;AACN;AAKO,SAAS,eAAe,UAAiC,IAA0B;AACxF,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,WAAW;AAAA,EAAA,IACT;AAGJ,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,EAAA;AAIF,QAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,UAAM,aAAa,OAAO,QAAQ;AAClC,UAAM,YAAY,OAAO,OAAO;AAChC,UAAM,YAAY,OAAO,OAAO;AAEhC,QAAI,YAAY;AACd,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,QAAI,WAAW;AACb,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,QAAI,WAAW;AACb,aAAO;AAAA,QACL;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,CAAC;AAGD,QAAM,cAAcA,IAAAA,SAAS,MAAM;AACjC,UAAM,cAAc,OAAO,IAAI;AAC/B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO,CAAC,UAAU,SAAS;AAAA,MAC7B,KAAK;AACH,eAAO,CAAC,QAAQ,WAAW;AAAA,MAC7B;AACE,eAAO,CAAC,QAAQ,SAAS;AAAA,IAAA;AAAA,EAE/B,CAAC;AAGD,QAAM,iBAAiBA,IAAAA,SAAS,MAAM;AACpC,UAAM,UAAU,OAAO,WAAW;AAClC,UAAM,WAAW,OAAO,YAAY;AAEpC,WAAO;AAAA,MACL,UAAU,UAAU;AAAA,MACpB,WAAW,UAAU;AAAA,IAAA;AAAA,EAEzB,CAAC;AAGD,QAAM,iBAAiBA,IAAAA,SAAS,MAAM;AACpC,UAAM,SAAS,OAAO,QAAQ;AAC9B,QAAI,CAAC,QAAQ;AACX,aAAO,CAAC,iBAAiB,oBAAoB;AAAA,IAC/C;AACA,WAAO,CAAC,iBAAiB,oBAAoB;AAAA,EAC/C,CAAC;AAGD,QAAM,aAAaA,IAAAA,SAAS,MAAM;AAAA,IAChC,GAAG;AAAA,IACH,GAAG,aAAa;AAAA,IAChB,GAAG,YAAY;AAAA,IACf,GAAG,eAAe;AAAA,IAClB;AAAA,EAAA,CACD;AAGD,QAAM,eAAeA,IAAAA,SAAS,MAAM;AAAA,IAClC;AAAA,IACA,GAAG;AAAA,IACH,GAAG,aAAa;AAAA,IAChB,GAAG,YAAY;AAAA,IACf;AAAA;AAAA,IACA,GAAG,eAAe;AAAA,EAAA,CACnB;AAGD,QAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,UAAM,aAAa,OAAO,QAAQ;AAClC,UAAM,cAAc,OAAO,IAAI;AAE/B,UAAM,qBAAqB;AAAA,MACzB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,EACJ,WAAW;AAEb,QAAI,YAAY;AACd,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,CAAC;AAGD,QAAM,YAAYA,IAAAA,SAAS,MAAM,CAAC,UAAU,eAAe,CAAC;AAE5D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;"}

package/dist/usePagination-BGwbICFC.js

@@ -0,0 +1,135 @@
+import { ref, watch, onMounted, computed } from "vue";
+function useDarkMode(options = {}) {
+  const {
+    selector = "html",
+    attribute = "class",
+    storageKey = "dark-mode",
+    defaultValue = false
+  } = options;
+  const isDark = 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;
+  };
+  watch(isDark, (newValue) => {
+    updateDOM(newValue);
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(storageKey, String(newValue));
+    }
+  });
+  onMounted(() => {
+    isDark.value = getInitialValue();
+    updateDOM(isDark.value);
+  });
+  return {
+    isDark,
+    toggle,
+    set
+  };
+}
+function usePagination(options) {
+  const {
+    items: itemsOption,
+    pageSize: initialPageSize = 10,
+    initialPage = 1
+  } = options;
+  const currentPage = ref(initialPage);
+  const pageSize = ref(initialPageSize);
+  const allItems = computed(() => {
+    return "value" in itemsOption ? itemsOption.value : itemsOption;
+  });
+  const totalItems = computed(() => allItems.value.length);
+  const totalPages = computed(() => {
+    if (totalItems.value === 0) return 1;
+    return Math.ceil(totalItems.value / pageSize.value);
+  });
+  const startIndex = computed(() => {
+    return (currentPage.value - 1) * pageSize.value;
+  });
+  const endIndex = computed(() => {
+    return Math.min(startIndex.value + pageSize.value - 1, totalItems.value - 1);
+  });
+  const paginatedItems = computed(() => {
+    const start = startIndex.value;
+    const end = start + pageSize.value;
+    return allItems.value.slice(start, end);
+  });
+  const hasPrevious = computed(() => currentPage.value > 1);
+  const hasNext = computed(() => currentPage.value < totalPages.value);
+  watch(totalPages, (newTotalPages) => {
+    if (currentPage.value > newTotalPages) {
+      currentPage.value = Math.max(1, newTotalPages);
+    }
+  });
+  const goToPage = (page) => {
+    const validPage = Math.max(1, Math.min(page, totalPages.value));
+    currentPage.value = validPage;
+  };
+  const nextPage = () => {
+    if (hasNext.value) {
+      currentPage.value++;
+    }
+  };
+  const previousPage = () => {
+    if (hasPrevious.value) {
+      currentPage.value--;
+    }
+  };
+  const firstPage = () => {
+    currentPage.value = 1;
+  };
+  const lastPage = () => {
+    currentPage.value = totalPages.value;
+  };
+  const setPageSize = (size) => {
+    pageSize.value = size;
+    currentPage.value = 1;
+  };
+  const reset = () => {
+    currentPage.value = initialPage;
+    pageSize.value = initialPageSize;
+  };
+  return {
+    currentPage,
+    pageSize,
+    totalPages,
+    totalItems,
+    paginatedItems,
+    startIndex,
+    endIndex,
+    hasPrevious,
+    hasNext,
+    goToPage,
+    nextPage,
+    previousPage,
+    firstPage,
+    lastPage,
+    setPageSize,
+    reset
+  };
+}
+export {
+  usePagination as a,
+  useDarkMode as u
+};
+//# sourceMappingURL=usePagination-BGwbICFC.js.map

package/dist/usePagination-BGwbICFC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination-BGwbICFC.js","sources":["../src/composables/useDarkMode.ts","../src/composables/usePagination.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","import { ref, computed, watch, type Ref, type ComputedRef } from 'vue'\r\n\r\nexport interface UsePaginationOptions<T> {\r\n  /** The full array of items to paginate */\r\n  items: T[] | Ref<T[]>\r\n  /** Initial page size */\r\n  pageSize?: number\r\n  /** Initial page (1-indexed) */\r\n  initialPage?: number\r\n}\r\n\r\nexport interface UsePaginationReturn<T> {\r\n  /** Current page number (1-indexed) */\r\n  currentPage: Ref<number>\r\n  /** Current page size */\r\n  pageSize: Ref<number>\r\n  /** Total number of pages */\r\n  totalPages: ComputedRef<number>\r\n  /** Total number of items */\r\n  totalItems: ComputedRef<number>\r\n  /** Items for the current page */\r\n  paginatedItems: ComputedRef<T[]>\r\n  /** Index of the first item on current page (0-indexed) */\r\n  startIndex: ComputedRef<number>\r\n  /** Index of the last item on current page (0-indexed) */\r\n  endIndex: ComputedRef<number>\r\n  /** Whether there is a previous page */\r\n  hasPrevious: ComputedRef<boolean>\r\n  /** Whether there is a next page */\r\n  hasNext: ComputedRef<boolean>\r\n  /** Go to a specific page */\r\n  goToPage: (page: number) => void\r\n  /** Go to the next page */\r\n  nextPage: () => void\r\n  /** Go to the previous page */\r\n  previousPage: () => void\r\n  /** Go to the first page */\r\n  firstPage: () => void\r\n  /** Go to the last page */\r\n  lastPage: () => void\r\n  /** Set page size (resets to page 1) */\r\n  setPageSize: (size: number) => void\r\n  /** Reset to initial state */\r\n  reset: () => void\r\n}\r\n\r\nexport function usePagination<T>(\r\n  options: UsePaginationOptions<T>\r\n): UsePaginationReturn<T> {\r\n  const {\r\n    items: itemsOption,\r\n    pageSize: initialPageSize = 10,\r\n    initialPage = 1,\r\n  } = options\r\n\r\n  const currentPage = ref(initialPage)\r\n  const pageSize = ref(initialPageSize)\r\n\r\n  const allItems = computed(() => {\r\n    return 'value' in itemsOption ? itemsOption.value : itemsOption\r\n  })\r\n\r\n  const totalItems = computed(() => allItems.value.length)\r\n\r\n  const totalPages = computed(() => {\r\n    if (totalItems.value === 0) return 1\r\n    return Math.ceil(totalItems.value / pageSize.value)\r\n  })\r\n\r\n  const startIndex = computed(() => {\r\n    return (currentPage.value - 1) * pageSize.value\r\n  })\r\n\r\n  const endIndex = computed(() => {\r\n    return Math.min(startIndex.value + pageSize.value - 1, totalItems.value - 1)\r\n  })\r\n\r\n  const paginatedItems = computed(() => {\r\n    const start = startIndex.value\r\n    const end = start + pageSize.value\r\n    return allItems.value.slice(start, end)\r\n  })\r\n\r\n  const hasPrevious = computed(() => currentPage.value > 1)\r\n  const hasNext = computed(() => currentPage.value < totalPages.value)\r\n\r\n  // Ensure current page is valid when items change\r\n  watch(totalPages, (newTotalPages) => {\r\n    if (currentPage.value > newTotalPages) {\r\n      currentPage.value = Math.max(1, newTotalPages)\r\n    }\r\n  })\r\n\r\n  const goToPage = (page: number) => {\r\n    const validPage = Math.max(1, Math.min(page, totalPages.value))\r\n    currentPage.value = validPage\r\n  }\r\n\r\n  const nextPage = () => {\r\n    if (hasNext.value) {\r\n      currentPage.value++\r\n    }\r\n  }\r\n\r\n  const previousPage = () => {\r\n    if (hasPrevious.value) {\r\n      currentPage.value--\r\n    }\r\n  }\r\n\r\n  const firstPage = () => {\r\n    currentPage.value = 1\r\n  }\r\n\r\n  const lastPage = () => {\r\n    currentPage.value = totalPages.value\r\n  }\r\n\r\n  const setPageSize = (size: number) => {\r\n    pageSize.value = size\r\n    currentPage.value = 1 // Reset to first page when changing page size\r\n  }\r\n\r\n  const reset = () => {\r\n    currentPage.value = initialPage\r\n    pageSize.value = initialPageSize\r\n  }\r\n\r\n  return {\r\n    currentPage,\r\n    pageSize,\r\n    totalPages,\r\n    totalItems,\r\n    paginatedItems,\r\n    startIndex,\r\n    endIndex,\r\n    hasPrevious,\r\n    hasNext,\r\n    goToPage,\r\n    nextPage,\r\n    previousPage,\r\n    firstPage,\r\n    lastPage,\r\n    setPageSize,\r\n    reset,\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}