cisse-vue-ui 0.8.2 → 0.8.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cisse-vue-ui",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Vue 3 + TypeScript + Tailwind CSS v4 component library",
   "author": "Cisse",
   "license": "MIT",