@sikka/hawa 0.36.2-next → 0.37.0-next

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../hooks/useClickOutside.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\n\nconst tabsListVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined_tabs:\n        \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-border-e-2 hawa-border-e-primary\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-border-b-2 hawa-border-b-primary\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n      underlined_tabs:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined\",\n      orientation: \"horizontal\",\n      class:\n        \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n    },\n    {\n      variant: \"underlined\",\n      orientation: \"vertical\",\n      class:\n        \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-rounded-b-none\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-rounded-e-none\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n  orientation?: OrientationType;\n  variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n  <TabsPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-gap-2\",\n      orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n      className,\n    )}\n    {...props}\n  >\n    <TabsContext.Provider value={{ orientation, variant }}>\n      {props.children}\n    </TabsContext.Provider>\n  </TabsPrimitive.Root>\n));\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        tabsListVariant({ variant, orientation }),\n        orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Trigger\n> & {\n  chipProps?: ChipTypes;\n  className?: string;\n  showPopover?: boolean;\n  popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n  const tabTriggerRef = React.useRef(null);\n  const { width } = useMeasureDirty(tabTriggerRef);\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={tabTriggerRef}\n      className={cn(\n        tabsTriggerVariant({ variant, orientation }),\n        \"hawa-relative\",\n        className,\n      )}\n      {...props}\n    >\n      {props.children}\n      {chipProps && <Chip {...chipProps} />}\n\n      <FloatBox\n        withArrow\n        align={orientation === \"vertical\" ? \"start\" : \"start\"}\n        side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n        sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n        open={props.showPopover}\n      >\n        {props.popoverContent}\n      </FloatBox>\n    </TabsPrimitive.Trigger>\n  );\n});\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n  typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n  isOpen: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n  const [open, setOpen] = useState<boolean>(value);\n  const onOpen = () => setOpen(true);\n  const onClose = () => setOpen(false);\n\n  return {\n    isOpen: open,\n    onOpen: onOpen,\n    onClose: onClose\n  };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n  const [value, setValue] = useState(false);\n  const ref = useRef<any>(null);\n  const handleMouseOver = () => setValue(true);\n  const handleMouseOut = () => setValue(false);\n  useEffect(\n    () => {\n      const node = ref.current;\n      if (node) {\n        node.addEventListener(\"mouseover\", handleMouseOver);\n        node.addEventListener(\"mouseout\", handleMouseOut);\n        return () => {\n          node.removeEventListener(\"mouseover\", handleMouseOver);\n          node.removeEventListener(\"mouseout\", handleMouseOut);\n        };\n      }\n    },\n    [ref.current] // Recall only if ref changes\n  );\n  return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE;\n  return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n  | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n  | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n  | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n  | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n  toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return;\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId);\n    dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n  }, TOAST_REMOVE_DELAY);\n\n  toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n      };\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        )\n      };\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action;\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId);\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id);\n        });\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n        )\n      };\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return { ...state, toasts: [] };\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId)\n      };\n  }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action);\n  listeners.forEach((listener) => {\n    listener(memoryState);\n  });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n  const id = genId();\n\n  const update = (props: ToasterToastProps) =>\n    dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss();\n      }\n    }\n  });\n\n  return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState);\n\n  React.useEffect(() => {\n    listeners.push(setState);\n    return () => {\n      const index = listeners.indexOf(setState);\n      if (index > -1) {\n        listeners.splice(index, 1);\n      }\n    };\n  }, [state]);\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n  };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [startDragX, setStartDragX] = useState(0);\n  const [scrollLeft, setScrollLeft] = useState(0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const findClosestSnapPoint = (scrollLeft: number): number => {\n    return Math.round(scrollLeft / imageWidth) * imageWidth;\n  };\n\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    setIsDragging(true);\n    setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n    setScrollLeft(containerRef.current!.scrollLeft);\n  };\n\n  const handleMouseLeave = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleMouseUp = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleDragEnd = () => {\n    setIsDragging(false);\n    const closestSnapPoint = findClosestSnapPoint(\n      containerRef.current!.scrollLeft\n    );\n    containerRef.current!.scrollTo({\n      left: closestSnapPoint,\n      behavior: \"smooth\"\n    });\n  };\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!isDragging) return;\n    e.preventDefault();\n    const x = e.pageX - containerRef.current!.offsetLeft;\n    const walk = x - startDragX;\n    containerRef.current!.scrollLeft = scrollLeft - walk;\n  };\n\n  return {\n    containerRef,\n    handleMouseDown,\n    handleMouseLeave,\n    handleMouseUp,\n    handleMouseMove\n  };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n  canScrollPrev?: any;\n  emblaRef?: any;\n  emblaApi?: any;\n  nextStep?: any;\n  prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    { loop: false, watchDrag: false, startIndex: 0, ...options },\n    [AutoHeight({ destroyHeight: \"fit\", active: true })]\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const checkCanScrollPrev = () => {\n    if (emblaApi) {\n      setCanScrollPrev(emblaApi.canScrollPrev());\n    }\n  };\n  const nextStep = () => {\n    if (emblaApi) {\n      console.log(\"going to NEXT 👉\");\n      emblaApi.scrollNext();\n    }\n  };\n\n  const prevStep = () => {\n    if (emblaApi) {\n      console.log(\"going to BACK 👈\");\n      emblaApi.scrollPrev();\n    }\n  };\n  useEffect(() => {\n    checkCanScrollPrev(); // Initial check\n    emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n    return () => {\n      emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n    };\n  }, [emblaApi]);\n\n  return {\n    emblaRef,\n    emblaApi,\n    nextStep,\n    prevStep,\n    canScrollPrev\n  };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n  initialStep: any,\n  stepIds: any[],\n  setOpenDialog: any\n) => {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const [dialogHeight, setDialogHeight] = useState(null);\n  const visibleStepRef = useRef<any>(null);\n\n  useEffect(() => {\n    if (visibleStepRef.current) {\n      setDialogHeight(visibleStepRef.current.offsetHeight);\n    }\n  }, [currentStep, setOpenDialog]);\n\n  const handleNext = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex < stepIds.length - 1) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex + 1]);\n      }, 100);\n    }\n  };\n  const handleBack = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex > 0) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex - 1]);\n      }, 100);\n    }\n  };\n\n  return {\n    currentStep,\n    dialogHeight,\n    visibleStepRef,\n    handleNext,\n    handleBack\n  };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n  copy: (value: any) => void;\n  reset: () => void;\n  error: Error | null;\n  copied: boolean;\n} {\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState<boolean>(false);\n  const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n  const handleCopyResult = (value: boolean) => {\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n    setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n    setCopied(value);\n  };\n\n  const copy = (valueToCopy: any) => {\n    if (\"clipboard\" in navigator) {\n      navigator.clipboard\n        .writeText(valueToCopy)\n        .then(() => handleCopyResult(true))\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n  };\n\n  return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n  // Initialize breakpoint with a null value.\n  const [breakpoint, setBreakpoint] = useState<any>(null);\n\n  useEffect(() => {\n    // Check if window is defined (i.e., if running on the client side)\n    if (typeof window !== \"undefined\") {\n      // Define the resize function within the effect.\n      const resize = () => {\n        setBreakpoint(window.innerWidth);\n      };\n\n      // Call resize initially to set the breakpoint based on the initial window size.\n      resize();\n\n      // Set up the resize event listener.\n      window.addEventListener(\"resize\", resize);\n\n      // Clean up the event listener when the component is unmounted.\n      return () => {\n        window.removeEventListener(\"resize\", resize);\n      };\n    }\n  }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n  return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n//   const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n//   const resize = () => {\n//     setBreakpoint(window?.innerWidth);\n//   };\n\n//   useEffect(() => {\n//     // Ensure this code is only run on the client side\n//     if (typeof window !== \"undefined\") {\n//       // Now it's safe to use window\n//       setBreakpoint(window?.innerWidth);\n//       window?.addEventListener(\"resize\", resize);\n\n//       return () => {\n//         window?.removeEventListener(\"resize\", resize);\n//       };\n//     }\n//   }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n//   return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n  width: number | undefined;\n  height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: undefined,\n    height: undefined\n  });\n\n  useEffect(() => {\n    function handleResize() {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight\n      });\n    }\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n  return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n  onFocus?(event: FocusEvent): void;\n  onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n  if (\n    event.currentTarget instanceof HTMLElement &&\n    event.relatedTarget instanceof HTMLElement\n  ) {\n    return event.currentTarget.contains(event.relatedTarget);\n  }\n\n  return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n  onBlur,\n  onFocus\n}: UseFocusWithinOptions = {}): {\n  ref: React.MutableRefObject<T>;\n  focused: boolean;\n} {\n  // Create a ref to hold the target element.\n  const ref = useRef<T>(null!);\n\n  // State to track if the element is focused.\n  const [focused, _setFocused] = useState(false);\n\n  // Create a ref to store the focused state.\n  const focusedRef = useRef(false);\n\n  // Function to set the focused state and update the ref.\n  const setFocused = (value: boolean) => {\n    _setFocused(value);\n    focusedRef.current = value;\n  };\n\n  // Handle focus-in event: when the element gains focus.\n  const handleFocusIn = (event: FocusEvent) => {\n    if (!focusedRef.current) {\n      setFocused(true);\n      onFocus?.(event); // Call the onFocus callback if provided.\n    }\n  };\n\n  // Handle focus-out event: when the element loses focus.\n  const handleFocusOut = (event: FocusEvent) => {\n    if (focusedRef.current && !containsRelatedTarget(event)) {\n      setFocused(false);\n      onBlur?.(event); // Call the onBlur callback if provided.\n    }\n  };\n\n  // Attach event listeners for focusin and focusout events.\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.addEventListener(\"focusin\", handleFocusIn);\n      ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n      // Clean up event listeners when the component unmounts.\n      return () => {\n        ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n        ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n      };\n    }\n\n    return undefined;\n  }, [handleFocusIn, handleFocusOut]);\n\n  // Return the ref and focused state.\n  return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n  getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n  query: MediaQueryList,\n  callback: MediaQueryCallback\n) {\n  try {\n    query.addEventListener(\"change\", callback);\n    return () => query.removeEventListener(\"change\", callback);\n  } catch (e) {\n    query.addListener(callback);\n    return () => query.removeListener(callback);\n  }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n  if (typeof initialValue === \"boolean\") {\n    return initialValue;\n  }\n\n  if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n    return window.matchMedia(query).matches;\n  }\n\n  return false;\n}\n\nexport function useMediaQuery(\n  query: string,\n  initialValue?: boolean,\n  { getInitialValueInEffect }: UseMediaQueryOptions = {\n    getInitialValueInEffect: true\n  }\n) {\n  const [matches, setMatches] = useState(\n    getInitialValueInEffect\n      ? initialValue\n      : getInitialValue(query, initialValue)\n  );\n  const queryRef = useRef<MediaQueryList>();\n\n  useEffect(() => {\n    if (\"matchMedia\" in window) {\n      queryRef.current = window.matchMedia(query);\n      setMatches(queryRef.current.matches);\n      return attachMediaListener(queryRef.current, (event) =>\n        setMatches(event.matches)\n      );\n    }\n\n    return undefined;\n  }, [query]);\n\n  return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  // const savedRef = useRef();\n\n  // useEffect(() => {\n  //   savedRef.current = ref;\n  // }, [ref]);\n\n  useEffect(() => {\n    function handleScroll() {\n      setScrollPosition(ref.current.scrollTop);\n    }\n\n    if (ref.current) {\n      ref.current.addEventListener(\"scroll\", handleScroll);\n    }\n\n    return () => {\n      if (ref.current) {\n        ref.current.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, [ref]);\n\n  return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n  const range = [];\n  const num = Math.ceil(data?.length / rowsPerPage);\n  let i = 1;\n  for (let i = 1; i <= num; i++) {\n    range.push(i);\n  }\n  return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n  if (sortColumn !== null) {\n    return data?.sort((a: any, b: any) => {\n      const aValue = a[sortColumn].value;\n      const bValue = b[sortColumn].value;\n\n      // Handle non-string values by using simple comparison\n      if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n        if (sortDirection === \"asc\") {\n          return aValue.localeCompare(bValue);\n        } else {\n          return bValue.localeCompare(aValue);\n        }\n      } else {\n        if (sortDirection === \"asc\") {\n          return aValue - bValue;\n        } else {\n          return bValue - aValue;\n        }\n      }\n    });\n  }\n  return data;\n};\n\nconst useTable = (\n  data: any,\n  page: any,\n  rowsPerPage: any,\n  sortColumn: any,\n  sortDirection: any\n) => {\n  const [tableRange, setTableRange] = useState<any>([]);\n  const [slice, setSlice] = useState<any>([]);\n\n  useEffect(() => {\n    if (data) {\n      const range = calculateRange(data, rowsPerPage);\n      setTableRange([...range]);\n\n      const sortedData = sortData(data, sortColumn, sortDirection);\n      const slicedData = sliceData(sortedData, page, rowsPerPage);\n      setSlice([...slicedData]);\n    }\n  }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n  return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n  const [activeTab, setActiveTab] = useState(initialTab);\n\n  // Listen to hash changes in the URL\n  useEffect(() => {\n    const handleHashChange = () => {\n      const hash = window.location.hash.substring(1);\n      setActiveTab(hash || initialTab);\n    };\n\n    window.addEventListener(\"hashchange\", handleHashChange);\n\n    // Initialize the tab based on the initial hash\n    handleHashChange();\n\n    return () => {\n      // Remove the event listener when the component unmounts\n      window.removeEventListener(\"hashchange\", handleHashChange);\n    };\n  }, [initialTab]);\n\n  const handleTabChange = (index: any) => {\n    setActiveTab(index);\n\n    // Update the URL hash when the tab changes\n    window.location.hash = index;\n  };\n\n  return {\n    activeTab,\n    handleTabChange\n  };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  left: number;\n  bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n  const frame = useRef(0);\n  const [rect, set] = useState({\n    width: 0,\n    height: 0,\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n  });\n\n  const [observer] = useState(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0];\n\n        if (entry) {\n          cancelAnimationFrame(frame.current);\n\n          frame.current = requestAnimationFrame(() => {\n            if (ref.current) {\n              set(entry.contentRect);\n            }\n          });\n        }\n      }),\n  );\n\n  useEffect(() => {\n    observer.disconnect();\n\n    if (ref.current) {\n      observer.observe(ref.current);\n    }\n  }, [ref]);\n\n  return rect;\n};\n","import { useEffect, useRef } from \"react\";\n\nconst DEFAULT_EVENTS = [\"mousedown\", \"touchstart\"];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  handler: () => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[],\n) {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    const listener = (event: any) => {\n      const { target } = event ?? {};\n      if (Array.isArray(nodes)) {\n        const shouldIgnore =\n          target?.hasAttribute(\"data-ignore-outside-clicks\") ||\n          (!document.body.contains(target) && target.tagName !== \"HTML\");\n        const shouldTrigger = nodes.every(\n          (node) => !!node && !event.composedPath().includes(node),\n        );\n        shouldTrigger && !shouldIgnore && handler();\n      } else if (ref.current && !ref.current.contains(target)) {\n        handler();\n      }\n    };\n\n    (events || DEFAULT_EVENTS).forEach((fn) =>\n      document.addEventListener(fn, listener),\n    );\n\n    return () => {\n      (events || DEFAULT_EVENTS).forEach((fn) =>\n        document.removeEventListener(fn, listener),\n      );\n    };\n  }, [ref, handler, nodes]);\n\n  return ref;\n}\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nexport type ChipColors =\n  | \"green\"\n  | \"blue\"\n  | \"red\"\n  | \"yellow\"\n  | \"orange\"\n  | \"purple\"\n  | \"cyan\"\n  | \"hyper\"\n  | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n  /** The text inside the chip */\n  label: string;\n  /** The small icon before the chip label  */\n  icon?: JSX.Element;\n  /** The color of the chip, must be a tailwind color */\n  color?: ChipColors;\n  /** The size of the chip */\n  size?: \"small\" | \"normal\" | \"large\";\n  /** Enable/Disable the dot before the label of the chip */\n  dot?: boolean;\n  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n  dotStatus?: \"available\" | \"unavailable\" | \"none\";\n  radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n  (\n    {\n      label,\n      size = \"normal\",\n      icon,\n      color,\n      radius = \"inherit\",\n      dot,\n      dotStatus = \"none\",\n      ...rest\n    },\n    ref,\n  ) => {\n    let defaultStyles =\n      \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold \";\n    let radiusStyles = {\n      inherit: \" hawa-rounded\",\n      full: \"hawa-rounded-full\",\n      none: \"hawa-rounded-none\",\n    };\n    let sizeStyles = {\n      small:\n        \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n      normal: \"hawa-h-fit hawa-text-xs\",\n      large: \"hawa-text-base\",\n    };\n    let dotStyles = {\n      small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n      normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n      large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\",\n    };\n    let dotStatusStyles = {\n      none: \"hawa-bg-gray-500 dark:hawa-bg-gray-800\",\n      available: \"hawa-bg-green-500\",\n      unavailable: \"hawa-bg-red-500\",\n    };\n    let colorStyles: any = {\n      green:\n        \"hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200\",\n      blue: \"hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100\",\n      red: \"hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100\",\n      yellow:\n        \"hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black\",\n      orange:\n        \"hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100\",\n      purple:\n        \"hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100\",\n      cyan: \"hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100\",\n      hyper:\n        \"hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n      oceanic:\n        \"hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\",\n    };\n    if (label) {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            defaultStyles,\n            sizeStyles[size],\n            radiusStyles[radius],\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\",\n          )}\n        >\n          {dot && (\n            <span\n              className={cn(dotStyles[size], dotStatusStyles[dotStatus])}\n            ></span>\n          )}\n          {icon && icon}\n          {label}\n        </span>\n      );\n    } else {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\",\n          )}\n        ></span>\n      );\n    }\n  },\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n  className?: string;\n  open?: boolean;\n  children?: React.ReactNode;\n  side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n  className,\n  open,\n  side = \"bottom\",\n  sideOffset = 40,\n  align = \"center\",\n  withArrow = false,\n  ...props\n}) => {\n  let stylesMap = {\n    bottom: {\n      start: { top: sideOffset, insetInlineStart: 0 },\n      center: { top: sideOffset },\n      end: { top: sideOffset, insetInlineEnd: 0 },\n    },\n    top: {\n      start: { bottom: sideOffset, insetInlineStart: 0 },\n      center: { bottom: sideOffset },\n      end: { bottom: sideOffset, insetInlineEnd: 0 },\n    },\n    right: {\n      start: { left: sideOffset, top: -5 },\n      center: { left: sideOffset },\n      end: { left: sideOffset, bottom: 0 },\n    },\n    left: {\n      start: { right: sideOffset, top: 0 },\n      center: { right: sideOffset },\n      end: { right: sideOffset, bottom: 0 },\n    },\n  };\n  const arrowDirection = {\n    top: \"hawa-arrow-default-bottom\",\n    bottom: \"hawa-arrow-default-top\",\n    right: \"hawa-arrow-default-left\",\n    left: \"hawa-arrow-default-right\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border  hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n        className,\n      )}\n      style={{ ...stylesMap[side][align] }}\n      data-side={side}\n      data-floatbox-state={open ? \"open\" : \"closed\"}\n    >\n      {withArrow && <div className={cn(arrowDirection[side])} />}\n      <span>{props.children}</span>\n    </div>\n  );\n};\n\nexport { FloatBox };\n"],"mappings":"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","names":["React","import_react","import_react","React","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","React","React"]}
+{"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../hooks/useClickOutside.ts","../../hooks/useShortcuts.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx","../../elements/scrollArea/ScrollArea.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\nimport { ScrollArea } from \"../scrollArea\";\n\nconst tabsListVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined_tabs:\n        \"hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-border-e-2 hawa-border-e-primary\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-border-b-2 hawa-border-b-primary\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n      underlined_tabs:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined\",\n      orientation: \"horizontal\",\n      class:\n        \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n    },\n    {\n      variant: \"underlined\",\n      orientation: \"vertical\",\n      class:\n        \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-rounded-b-none\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-rounded-e-none\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n  orientation?: OrientationType;\n  variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n  <TabsPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-gap-2\",\n      orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n      className,\n    )}\n    {...props}\n  >\n    <TabsContext.Provider value={{ orientation, variant }}>\n      {props.children}\n    </TabsContext.Provider>\n  </TabsPrimitive.Root>\n));\n\ntype TabsListProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.List\n> & { scrollable?: boolean };\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n  const [size, setSize] = React.useState(\n    (typeof window !== \"undefined\" && window.innerWidth) || 1200,\n  );\n  React.useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const resize = () => {\n        setSize(window.innerWidth);\n      };\n      resize();\n      window.addEventListener(\"resize\", resize);\n      return () => {\n        window.removeEventListener(\"resize\", resize);\n      };\n    }\n  }, []);\n\n  if ((props.scrollable || size < 768) && orientation === \"horizontal\") {\n    return (\n      <ScrollArea orientation=\"horizontal\">\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(\n            tabsListVariant({ variant, orientation }),\n            \"hawa-flex-row hawa-flex-nowrap\",\n            className,\n          )}\n          {...props}\n        />\n      </ScrollArea>\n    );\n  } else {\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(\n          tabsListVariant({ variant, orientation }),\n          orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n          \"hawa-flex-wrap\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  }\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Trigger\n> & {\n  chipProps?: ChipTypes;\n  className?: string;\n  showPopover?: boolean;\n  popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n  const tabTriggerRef = React.useRef(null);\n  const { width } = useMeasureDirty(tabTriggerRef);\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={tabTriggerRef}\n      className={cn(\n        tabsTriggerVariant({ variant, orientation }),\n        \"hawa-relative\",\n        className,\n      )}\n      {...props}\n    >\n      {props.children}\n      {chipProps && <Chip {...chipProps} />}\n\n      <FloatBox\n        withArrow\n        align={orientation === \"vertical\" ? \"start\" : \"start\"}\n        side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n        sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n        open={props.showPopover}\n      >\n        {props.popoverContent}\n      </FloatBox>\n    </TabsPrimitive.Trigger>\n  );\n});\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n  typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n  isOpen: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n  const [open, setOpen] = useState<boolean>(value);\n  const onOpen = () => setOpen(true);\n  const onClose = () => setOpen(false);\n\n  return {\n    isOpen: open,\n    onOpen: onOpen,\n    onClose: onClose\n  };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n  const [value, setValue] = useState(false);\n  const ref = useRef<any>(null);\n  const handleMouseOver = () => setValue(true);\n  const handleMouseOut = () => setValue(false);\n  useEffect(\n    () => {\n      const node = ref.current;\n      if (node) {\n        node.addEventListener(\"mouseover\", handleMouseOver);\n        node.addEventListener(\"mouseout\", handleMouseOut);\n        return () => {\n          node.removeEventListener(\"mouseover\", handleMouseOver);\n          node.removeEventListener(\"mouseout\", handleMouseOut);\n        };\n      }\n    },\n    [ref.current] // Recall only if ref changes\n  );\n  return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE;\n  return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n  | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n  | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n  | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n  | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n  toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return;\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId);\n    dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n  }, TOAST_REMOVE_DELAY);\n\n  toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n      };\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        )\n      };\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action;\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId);\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id);\n        });\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n        )\n      };\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return { ...state, toasts: [] };\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId)\n      };\n  }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action);\n  listeners.forEach((listener) => {\n    listener(memoryState);\n  });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n  const id = genId();\n\n  const update = (props: ToasterToastProps) =>\n    dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss();\n      }\n    }\n  });\n\n  return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState);\n\n  React.useEffect(() => {\n    listeners.push(setState);\n    return () => {\n      const index = listeners.indexOf(setState);\n      if (index > -1) {\n        listeners.splice(index, 1);\n      }\n    };\n  }, [state]);\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n  };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [startDragX, setStartDragX] = useState(0);\n  const [scrollLeft, setScrollLeft] = useState(0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const findClosestSnapPoint = (scrollLeft: number): number => {\n    return Math.round(scrollLeft / imageWidth) * imageWidth;\n  };\n\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    setIsDragging(true);\n    setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n    setScrollLeft(containerRef.current!.scrollLeft);\n  };\n\n  const handleMouseLeave = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleMouseUp = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleDragEnd = () => {\n    setIsDragging(false);\n    const closestSnapPoint = findClosestSnapPoint(\n      containerRef.current!.scrollLeft\n    );\n    containerRef.current!.scrollTo({\n      left: closestSnapPoint,\n      behavior: \"smooth\"\n    });\n  };\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!isDragging) return;\n    e.preventDefault();\n    const x = e.pageX - containerRef.current!.offsetLeft;\n    const walk = x - startDragX;\n    containerRef.current!.scrollLeft = scrollLeft - walk;\n  };\n\n  return {\n    containerRef,\n    handleMouseDown,\n    handleMouseLeave,\n    handleMouseUp,\n    handleMouseMove\n  };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n  canScrollPrev?: any;\n  emblaRef?: any;\n  emblaApi?: any;\n  nextStep?: any;\n  prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    { loop: false, watchDrag: false, startIndex: 0, ...options },\n    [AutoHeight({ destroyHeight: \"fit\", active: true })]\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const checkCanScrollPrev = () => {\n    if (emblaApi) {\n      setCanScrollPrev(emblaApi.canScrollPrev());\n    }\n  };\n  const nextStep = () => {\n    if (emblaApi) {\n      console.log(\"going to NEXT 👉\");\n      emblaApi.scrollNext();\n    }\n  };\n\n  const prevStep = () => {\n    if (emblaApi) {\n      console.log(\"going to BACK 👈\");\n      emblaApi.scrollPrev();\n    }\n  };\n  useEffect(() => {\n    checkCanScrollPrev(); // Initial check\n    emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n    return () => {\n      emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n    };\n  }, [emblaApi]);\n\n  return {\n    emblaRef,\n    emblaApi,\n    nextStep,\n    prevStep,\n    canScrollPrev\n  };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n  initialStep: any,\n  stepIds: any[],\n  setOpenDialog: any\n) => {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const [dialogHeight, setDialogHeight] = useState(null);\n  const visibleStepRef = useRef<any>(null);\n\n  useEffect(() => {\n    if (visibleStepRef.current) {\n      setDialogHeight(visibleStepRef.current.offsetHeight);\n    }\n  }, [currentStep, setOpenDialog]);\n\n  const handleNext = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex < stepIds.length - 1) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex + 1]);\n      }, 100);\n    }\n  };\n  const handleBack = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex > 0) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex - 1]);\n      }, 100);\n    }\n  };\n\n  return {\n    currentStep,\n    dialogHeight,\n    visibleStepRef,\n    handleNext,\n    handleBack\n  };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n  copy: (value: any) => void;\n  reset: () => void;\n  error: Error | null;\n  copied: boolean;\n} {\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState<boolean>(false);\n  const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n  const handleCopyResult = (value: boolean) => {\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n    setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n    setCopied(value);\n  };\n\n  const copy = (valueToCopy: any) => {\n    if (\"clipboard\" in navigator) {\n      navigator.clipboard\n        .writeText(valueToCopy)\n        .then(() => handleCopyResult(true))\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n  };\n\n  return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n  // Initialize breakpoint with a null value.\n  const [breakpoint, setBreakpoint] = useState<any>(null);\n\n  useEffect(() => {\n    // Check if window is defined (i.e., if running on the client side)\n    if (typeof window !== \"undefined\") {\n      // Define the resize function within the effect.\n      const resize = () => {\n        setBreakpoint(window.innerWidth);\n      };\n\n      // Call resize initially to set the breakpoint based on the initial window size.\n      resize();\n\n      // Set up the resize event listener.\n      window.addEventListener(\"resize\", resize);\n\n      // Clean up the event listener when the component is unmounted.\n      return () => {\n        window.removeEventListener(\"resize\", resize);\n      };\n    }\n  }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n  return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n//   const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n//   const resize = () => {\n//     setBreakpoint(window?.innerWidth);\n//   };\n\n//   useEffect(() => {\n//     // Ensure this code is only run on the client side\n//     if (typeof window !== \"undefined\") {\n//       // Now it's safe to use window\n//       setBreakpoint(window?.innerWidth);\n//       window?.addEventListener(\"resize\", resize);\n\n//       return () => {\n//         window?.removeEventListener(\"resize\", resize);\n//       };\n//     }\n//   }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n//   return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n  width: number | undefined;\n  height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: undefined,\n    height: undefined\n  });\n\n  useEffect(() => {\n    function handleResize() {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight\n      });\n    }\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n  return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n  onFocus?(event: FocusEvent): void;\n  onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n  if (\n    event.currentTarget instanceof HTMLElement &&\n    event.relatedTarget instanceof HTMLElement\n  ) {\n    return event.currentTarget.contains(event.relatedTarget);\n  }\n\n  return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n  onBlur,\n  onFocus\n}: UseFocusWithinOptions = {}): {\n  ref: React.MutableRefObject<T>;\n  focused: boolean;\n} {\n  // Create a ref to hold the target element.\n  const ref = useRef<T>(null!);\n\n  // State to track if the element is focused.\n  const [focused, _setFocused] = useState(false);\n\n  // Create a ref to store the focused state.\n  const focusedRef = useRef(false);\n\n  // Function to set the focused state and update the ref.\n  const setFocused = (value: boolean) => {\n    _setFocused(value);\n    focusedRef.current = value;\n  };\n\n  // Handle focus-in event: when the element gains focus.\n  const handleFocusIn = (event: FocusEvent) => {\n    if (!focusedRef.current) {\n      setFocused(true);\n      onFocus?.(event); // Call the onFocus callback if provided.\n    }\n  };\n\n  // Handle focus-out event: when the element loses focus.\n  const handleFocusOut = (event: FocusEvent) => {\n    if (focusedRef.current && !containsRelatedTarget(event)) {\n      setFocused(false);\n      onBlur?.(event); // Call the onBlur callback if provided.\n    }\n  };\n\n  // Attach event listeners for focusin and focusout events.\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.addEventListener(\"focusin\", handleFocusIn);\n      ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n      // Clean up event listeners when the component unmounts.\n      return () => {\n        ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n        ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n      };\n    }\n\n    return undefined;\n  }, [handleFocusIn, handleFocusOut]);\n\n  // Return the ref and focused state.\n  return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n  getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n  query: MediaQueryList,\n  callback: MediaQueryCallback\n) {\n  try {\n    query.addEventListener(\"change\", callback);\n    return () => query.removeEventListener(\"change\", callback);\n  } catch (e) {\n    query.addListener(callback);\n    return () => query.removeListener(callback);\n  }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n  if (typeof initialValue === \"boolean\") {\n    return initialValue;\n  }\n\n  if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n    return window.matchMedia(query).matches;\n  }\n\n  return false;\n}\n\nexport function useMediaQuery(\n  query: string,\n  initialValue?: boolean,\n  { getInitialValueInEffect }: UseMediaQueryOptions = {\n    getInitialValueInEffect: true\n  }\n) {\n  const [matches, setMatches] = useState(\n    getInitialValueInEffect\n      ? initialValue\n      : getInitialValue(query, initialValue)\n  );\n  const queryRef = useRef<MediaQueryList>();\n\n  useEffect(() => {\n    if (\"matchMedia\" in window) {\n      queryRef.current = window.matchMedia(query);\n      setMatches(queryRef.current.matches);\n      return attachMediaListener(queryRef.current, (event) =>\n        setMatches(event.matches)\n      );\n    }\n\n    return undefined;\n  }, [query]);\n\n  return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  // const savedRef = useRef();\n\n  // useEffect(() => {\n  //   savedRef.current = ref;\n  // }, [ref]);\n\n  useEffect(() => {\n    function handleScroll() {\n      setScrollPosition(ref.current.scrollTop);\n    }\n\n    if (ref.current) {\n      ref.current.addEventListener(\"scroll\", handleScroll);\n    }\n\n    return () => {\n      if (ref.current) {\n        ref.current.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, [ref]);\n\n  return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n  const range = [];\n  const num = Math.ceil(data?.length / rowsPerPage);\n  let i = 1;\n  for (let i = 1; i <= num; i++) {\n    range.push(i);\n  }\n  return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n  if (sortColumn !== null) {\n    return data?.sort((a: any, b: any) => {\n      const aValue = a[sortColumn].value;\n      const bValue = b[sortColumn].value;\n\n      // Handle non-string values by using simple comparison\n      if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n        if (sortDirection === \"asc\") {\n          return aValue.localeCompare(bValue);\n        } else {\n          return bValue.localeCompare(aValue);\n        }\n      } else {\n        if (sortDirection === \"asc\") {\n          return aValue - bValue;\n        } else {\n          return bValue - aValue;\n        }\n      }\n    });\n  }\n  return data;\n};\n\nconst useTable = (\n  data: any,\n  page: any,\n  rowsPerPage: any,\n  sortColumn: any,\n  sortDirection: any\n) => {\n  const [tableRange, setTableRange] = useState<any>([]);\n  const [slice, setSlice] = useState<any>([]);\n\n  useEffect(() => {\n    if (data) {\n      const range = calculateRange(data, rowsPerPage);\n      setTableRange([...range]);\n\n      const sortedData = sortData(data, sortColumn, sortDirection);\n      const slicedData = sliceData(sortedData, page, rowsPerPage);\n      setSlice([...slicedData]);\n    }\n  }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n  return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n  const [activeTab, setActiveTab] = useState(initialTab);\n\n  // Listen to hash changes in the URL\n  useEffect(() => {\n    const handleHashChange = () => {\n      const hash = window.location.hash.substring(1);\n      setActiveTab(hash || initialTab);\n    };\n\n    window.addEventListener(\"hashchange\", handleHashChange);\n\n    // Initialize the tab based on the initial hash\n    handleHashChange();\n\n    return () => {\n      // Remove the event listener when the component unmounts\n      window.removeEventListener(\"hashchange\", handleHashChange);\n    };\n  }, [initialTab]);\n\n  const handleTabChange = (index: any) => {\n    setActiveTab(index);\n\n    // Update the URL hash when the tab changes\n    window.location.hash = index;\n  };\n\n  return {\n    activeTab,\n    handleTabChange\n  };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  left: number;\n  bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n  const frame = useRef(0);\n  const [rect, set] = useState({\n    width: 0,\n    height: 0,\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n  });\n\n  const [observer] = useState(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0];\n\n        if (entry) {\n          cancelAnimationFrame(frame.current);\n\n          frame.current = requestAnimationFrame(() => {\n            if (ref.current) {\n              set(entry.contentRect);\n            }\n          });\n        }\n      }),\n  );\n\n  useEffect(() => {\n    observer.disconnect();\n\n    if (ref.current) {\n      observer.observe(ref.current);\n    }\n  }, [ref]);\n\n  return rect;\n};\n","import { useEffect, useRef } from \"react\";\n\nconst DEFAULT_EVENTS = [\"mousedown\", \"touchstart\"];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  handler: () => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[],\n) {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    const listener = (event: any) => {\n      const { target } = event ?? {};\n      if (Array.isArray(nodes)) {\n        const shouldIgnore =\n          target?.hasAttribute(\"data-ignore-outside-clicks\") ||\n          (!document.body.contains(target) && target.tagName !== \"HTML\");\n        const shouldTrigger = nodes.every(\n          (node) => !!node && !event.composedPath().includes(node),\n        );\n        shouldTrigger && !shouldIgnore && handler();\n      } else if (ref.current && !ref.current.contains(target)) {\n        handler();\n      }\n    };\n\n    (events || DEFAULT_EVENTS).forEach((fn) =>\n      document.addEventListener(fn, listener),\n    );\n\n    return () => {\n      (events || DEFAULT_EVENTS).forEach((fn) =>\n        document.removeEventListener(fn, listener),\n      );\n    };\n  }, [ref, handler, nodes]);\n\n  return ref;\n}\n","import { useEffect } from \"react\";\n\nexport type KeyboardModifiers = {\n  alt: boolean;\n  ctrl: boolean;\n  meta: boolean;\n  mod: boolean;\n  shift: boolean;\n};\n\nexport type Hotkey = KeyboardModifiers & {\n  key?: string;\n};\n\ntype CheckHotkeyMatch = (event: KeyboardEvent) => boolean;\n\nexport function parseHotkey(hotkey: string): Hotkey {\n  const keys = hotkey\n    .toLowerCase()\n    .split(\"+\")\n    .map((part) => part.trim());\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes(\"alt\"),\n    ctrl: keys.includes(\"ctrl\"),\n    meta: keys.includes(\"meta\"),\n    mod: keys.includes(\"mod\"),\n    shift: keys.includes(\"shift\"),\n  };\n\n  const reservedKeys = [\"alt\", \"ctrl\", \"meta\", \"shift\", \"mod\"];\n\n  const freeKey = keys.find((key) => !reservedKeys.includes(key));\n\n  return {\n    ...modifiers,\n    key: freeKey,\n  };\n}\n\nfunction isExactHotkey(hotkey: Hotkey, event: KeyboardEvent): boolean {\n  const { alt, ctrl, meta, mod, shift, key } = hotkey;\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = event;\n\n  if (alt !== altKey) {\n    return false;\n  }\n\n  if (mod) {\n    if (!ctrlKey && !metaKey) {\n      return false;\n    }\n  } else {\n    if (ctrl !== ctrlKey) {\n      return false;\n    }\n    if (meta !== metaKey) {\n      return false;\n    }\n  }\n  if (shift !== shiftKey) {\n    return false;\n  }\n\n  if (\n    key &&\n    (pressedKey.toLowerCase() === key.toLowerCase() ||\n      event.code.replace(\"Key\", \"\").toLowerCase() === key.toLowerCase())\n  ) {\n    return true;\n  }\n\n  return false;\n}\n\nexport function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch {\n  return (event) => isExactHotkey(parseHotkey(hotkey), event);\n}\n\nexport interface HotkeyItemOptions {\n  preventDefault?: boolean;\n}\n\n//   type HotkeyItem = [string, (event: any) => void, HotkeyItemOptions?];\n\nexport function getHotkeyHandler(hotkeys: HotkeyItem[]) {\n  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {\n    const _event = \"nativeEvent\" in event ? event.nativeEvent : event;\n    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n      if (getHotkeyMatcher(hotkey)(_event)) {\n        if (options.preventDefault) {\n          event.preventDefault();\n        }\n\n        handler(_event);\n      }\n    });\n  };\n}\n\nexport type HotkeyItem = [\n  string,\n  (event: KeyboardEvent) => void,\n  HotkeyItemOptions?,\n];\n\nfunction shouldFireEvent(\n  event: KeyboardEvent,\n  tagsToIgnore: string[],\n  triggerOnContentEditable = false,\n) {\n  if (event.target instanceof HTMLElement) {\n    if (triggerOnContentEditable) {\n      return !tagsToIgnore.includes(event.target.tagName);\n    }\n\n    return (\n      !event.target.isContentEditable &&\n      !tagsToIgnore.includes(event.target.tagName)\n    );\n  }\n\n  return true;\n}\n\nexport function useShortcuts(\n  hotkeys: HotkeyItem[],\n  tagsToIgnore: string[] = [\"INPUT\", \"TEXTAREA\", \"SELECT\"],\n  triggerOnContentEditable = false,\n) {\n  useEffect(() => {\n    const keydownListener = (event: KeyboardEvent) => {\n      hotkeys.forEach(\n        ([hotkey, handler, options = { preventDefault: true }]) => {\n          if (\n            getHotkeyMatcher(hotkey)(event) &&\n            shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)\n          ) {\n            if (options.preventDefault) {\n              event.preventDefault();\n            }\n\n            handler(event);\n          }\n        },\n      );\n    };\n\n    document.documentElement.addEventListener(\"keydown\", keydownListener);\n    return () =>\n      document.documentElement.removeEventListener(\"keydown\", keydownListener);\n  }, [hotkeys]);\n}\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nexport type ChipColors =\n  | \"green\"\n  | \"blue\"\n  | \"red\"\n  | \"yellow\"\n  | \"orange\"\n  | \"purple\"\n  | \"cyan\"\n  | \"hyper\"\n  | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n  /** The text inside the chip */\n  label: string;\n  /** The small icon before the chip label  */\n  icon?: JSX.Element;\n  /** The color of the chip, must be a tailwind color */\n  color?: ChipColors;\n  /** The size of the chip */\n  size?: \"small\" | \"normal\" | \"large\";\n  /** Enable/Disable the dot before the label of the chip */\n  dot?: boolean;\n  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n  dotStatus?: \"available\" | \"unavailable\" | \"none\";\n  radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n  (\n    {\n      label,\n      size = \"normal\",\n      icon,\n      color,\n      radius = \"inherit\",\n      dot,\n      dotStatus = \"none\",\n      ...rest\n    },\n    ref,\n  ) => {\n    let defaultStyles =\n      \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold \";\n    let radiusStyles = {\n      inherit: \" hawa-rounded\",\n      full: \"hawa-rounded-full\",\n      none: \"hawa-rounded-none\",\n    };\n    let sizeStyles = {\n      small:\n        \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n      normal: \"hawa-h-fit hawa-text-xs\",\n      large: \"hawa-text-base\",\n    };\n    let dotStyles = {\n      small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n      normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n      large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\",\n    };\n    let dotStatusStyles = {\n      none: \"hawa-bg-gray-500 dark:hawa-bg-gray-800\",\n      available: \"hawa-bg-green-500\",\n      unavailable: \"hawa-bg-red-500\",\n    };\n    let colorStyles: any = {\n      green:\n        \"hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200\",\n      blue: \"hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100\",\n      red: \"hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100\",\n      yellow:\n        \"hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black\",\n      orange:\n        \"hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100\",\n      purple:\n        \"hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100\",\n      cyan: \"hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100\",\n      hyper:\n        \"hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n      oceanic:\n        \"hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\",\n    };\n    if (label) {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            defaultStyles,\n            sizeStyles[size],\n            radiusStyles[radius],\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\",\n          )}\n        >\n          {dot && (\n            <span\n              className={cn(dotStyles[size], dotStatusStyles[dotStatus])}\n            ></span>\n          )}\n          {icon && icon}\n          {label}\n        </span>\n      );\n    } else {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\",\n          )}\n        ></span>\n      );\n    }\n  },\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n  className?: string;\n  open?: boolean;\n  children?: React.ReactNode;\n  side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n  className,\n  open,\n  side = \"bottom\",\n  sideOffset = 40,\n  align = \"center\",\n  withArrow = false,\n  ...props\n}) => {\n  let stylesMap = {\n    bottom: {\n      start: { top: sideOffset, insetInlineStart: 0 },\n      center: { top: sideOffset },\n      end: { top: sideOffset, insetInlineEnd: 0 },\n    },\n    top: {\n      start: { bottom: sideOffset, insetInlineStart: 0 },\n      center: { bottom: sideOffset },\n      end: { bottom: sideOffset, insetInlineEnd: 0 },\n    },\n    right: {\n      start: { left: sideOffset, top: -5 },\n      center: { left: sideOffset },\n      end: { left: sideOffset, bottom: 0 },\n    },\n    left: {\n      start: { right: sideOffset, top: 0 },\n      center: { right: sideOffset },\n      end: { right: sideOffset, bottom: 0 },\n    },\n  };\n  const arrowDirection = {\n    top: \"hawa-arrow-default-bottom\",\n    bottom: \"hawa-arrow-default-top\",\n    right: \"hawa-arrow-default-left\",\n    left: \"hawa-arrow-default-right\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border  hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n        className,\n      )}\n      style={{ ...stylesMap[side][align] }}\n      data-side={side}\n      data-floatbox-state={open ? \"open\" : \"closed\"}\n    >\n      {withArrow && <div className={cn(arrowDirection[side])} />}\n      <span>{props.children}</span>\n    </div>\n  );\n};\n\nexport { FloatBox };\n","import * as React from \"react\";\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"@util/index\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\ntype ScrollAreaProps = React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.Root\n> & {\n  orientation?: OrientationType;\n};\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaProps\n>(({ className, children, orientation = \"vertical\", ...props }, ref) => {\n  const scrollAreaRef = React.useRef<HTMLDivElement | null>(null);\n  const isDragging = React.useRef(false);\n  const startPos = React.useRef({ x: 0, y: 0 });\n  const scrollPos = React.useRef({ top: 0, left: 0 });\n\n  const [showLeftFade, setShowLeftFade] = React.useState(false);\n  const [showRightFade, setShowRightFade] = React.useState(false);\n\n  const checkOverflow = () => {\n    if (scrollAreaRef.current) {\n      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;\n      setShowLeftFade(scrollLeft > 0);\n      setShowRightFade(scrollLeft + clientWidth < scrollWidth);\n    }\n  };\n\n  const onMouseDown = (e: React.MouseEvent) => {\n    isDragging.current = true;\n    startPos.current = { x: e.clientX, y: e.clientY };\n    if (scrollAreaRef.current) {\n      scrollPos.current = {\n        top: scrollAreaRef.current.scrollTop,\n        left: scrollAreaRef.current.scrollLeft,\n      };\n    }\n    document.addEventListener(\"mousemove\", onMouseMove);\n    document.addEventListener(\"mouseup\", onMouseUp);\n  };\n\n  const onMouseMove = (e: MouseEvent) => {\n    if (!isDragging.current || !scrollAreaRef.current) return;\n    const dx = e.clientX - startPos.current.x;\n    const dy = e.clientY - startPos.current.y;\n    if (orientation === \"vertical\") {\n      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;\n    } else {\n      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;\n      checkOverflow();\n    }\n  };\n\n  const onMouseUp = () => {\n    isDragging.current = false;\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    document.removeEventListener(\"mouseup\", onMouseUp);\n  };\n\n  React.useEffect(() => {\n    checkOverflow();\n    if (scrollAreaRef.current) {\n      scrollAreaRef.current.addEventListener(\"scroll\", checkOverflow);\n      window.addEventListener(\"resize\", checkOverflow);\n    }\n    return () => {\n      if (scrollAreaRef.current) {\n        scrollAreaRef.current.removeEventListener(\"scroll\", checkOverflow);\n      }\n      window.removeEventListener(\"resize\", checkOverflow);\n    };\n  }, []);\n\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={cn(\"hawa-relative hawa-overflow-hidden\", className)}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"hawa-pointer-events-none hawa-absolute hawa-bg-background/  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right\",\n          showLeftFade ? \"hawa-block\" : \"hawa-hidden\",\n        )}\n      />\n      <div\n        className={cn(\n          \"hawa-pointer-events-none hawa-absolute hawa-bg-background/ hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 \",\n          showRightFade ? \"hawa-block\" : \"hawa-hidden\",\n        )}\n      />\n      <ScrollAreaPrimitive.Viewport\n        ref={scrollAreaRef}\n        className=\"hawa-h-full hawa-w-full hawa-rounded-[inherit]\"\n        onMouseDown={onMouseDown}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation={orientation} />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n});\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors\",\n      orientation === \"vertical\" &&\n        \"hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]\",\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn(\n        \"hawa-relative hawa-rounded-full hawa-bg-border\",\n        orientation === \"vertical\" && \"hawa-flex-1\",\n      )}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\n\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":"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","names":["React","import_react","import_react","React","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","React","React","React"]}

package/dist/tabs/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // elements/tabs/Tabs.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 
 // hooks/useIsomorphicEffect.ts
 import { useEffect, useLayoutEffect } from "react";
@@ -87,6 +87,9 @@ var useMeasureDirty = (ref) => {
 // hooks/useClickOutside.ts
 import { useEffect as useEffect14, useRef as useRef8 } from "react";
 
+// hooks/useShortcuts.ts
+import { useEffect as useEffect15 } from "react";
+
 // elements/tabs/Tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
@@ -238,14 +241,137 @@ var FloatBox = ({
   );
 };
 
+// elements/scrollArea/ScrollArea.tsx
+import * as React11 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+var ScrollArea = React11.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React11.useRef(null);
+  const isDragging = React11.useRef(false);
+  const startPos = React11.useRef({ x: 0, y: 0 });
+  const scrollPos = React11.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React11.useState(false);
+  const [showRightFade, setShowRightFade] = React11.useState(false);
+  const checkOverflow = () => {
+    if (scrollAreaRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft + clientWidth < scrollWidth);
+    }
+  };
+  const onMouseDown = (e) => {
+    isDragging.current = true;
+    startPos.current = { x: e.clientX, y: e.clientY };
+    if (scrollAreaRef.current) {
+      scrollPos.current = {
+        top: scrollAreaRef.current.scrollTop,
+        left: scrollAreaRef.current.scrollLeft
+      };
+    }
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onMouseMove = (e) => {
+    if (!isDragging.current || !scrollAreaRef.current)
+      return;
+    const dx = e.clientX - startPos.current.x;
+    const dy = e.clientY - startPos.current.y;
+    if (orientation === "vertical") {
+      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
+    } else {
+      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
+      checkOverflow();
+    }
+  };
+  const onMouseUp = () => {
+    isDragging.current = false;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  React11.useEffect(() => {
+    checkOverflow();
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.addEventListener("scroll", checkOverflow);
+      window.addEventListener("resize", checkOverflow);
+    }
+    return () => {
+      if (scrollAreaRef.current) {
+        scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
+      }
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+  return /* @__PURE__ */ React11.createElement(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      className: cn("hawa-relative hawa-overflow-hidden", className),
+      ...props
+    },
+    /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
+          showLeftFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/ hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
+          showRightFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React11.createElement(
+      ScrollAreaPrimitive.Viewport,
+      {
+        ref: scrollAreaRef,
+        className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
+        onMouseDown
+      },
+      children
+    ),
+    /* @__PURE__ */ React11.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
+  );
+});
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
+      orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
+      orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React11.createElement(
+    ScrollAreaPrimitive.ScrollAreaThumb,
+    {
+      className: cn(
+        "hawa-relative hawa-rounded-full hawa-bg-border",
+        orientation === "vertical" && "hawa-flex-1"
+      )
+    }
+  )
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
 // elements/tabs/Tabs.tsx
 var tabsListVariant = tv({
   base: "",
   variants: {
     variant: {
-      default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
-      underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
-      underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+      default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
     },
     orientation: { horizontal: "", vertical: "" }
   },
@@ -297,8 +423,8 @@ var tabsTriggerVariant = tv({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React11.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React11.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+var TabsContext = React12.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React12.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React12.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -309,28 +435,59 @@ var Tabs = React11.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React11.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React12.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-var TabsList = React11.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React11.useContext(TabsContext);
-  return /* @__PURE__ */ React11.createElement(
-    TabsPrimitive.List,
-    {
-      ref,
-      className: cn(
-        tabsListVariant({ variant, orientation }),
-        orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
-        className
-      ),
-      ...props
-    }
+var TabsList = React12.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React12.useContext(TabsContext);
+  const [size, setSize] = React12.useState(
+    typeof window !== "undefined" && window.innerWidth || 1200
   );
+  React12.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const resize = () => {
+        setSize(window.innerWidth);
+      };
+      resize();
+      window.addEventListener("resize", resize);
+      return () => {
+        window.removeEventListener("resize", resize);
+      };
+    }
+  }, []);
+  if ((props.scrollable || size < 768) && orientation === "horizontal") {
+    return /* @__PURE__ */ React12.createElement(ScrollArea, { orientation: "horizontal" }, /* @__PURE__ */ React12.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          "hawa-flex-row hawa-flex-nowrap",
+          className
+        ),
+        ...props
+      }
+    ));
+  } else {
+    return /* @__PURE__ */ React12.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
+          "hawa-flex-wrap",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 });
-var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React11.useContext(TabsContext);
-  const tabTriggerRef = React11.useRef(null);
+var TabsTrigger = React12.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React12.useContext(TabsContext);
+  const tabTriggerRef = React12.useRef(null);
   const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     TabsPrimitive.Trigger,
     {
       ref: tabTriggerRef,
@@ -342,8 +499,8 @@ var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) =
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React11.createElement(
+    chipProps && /* @__PURE__ */ React12.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React12.createElement(
       FloatBox,
       {
         withArrow: true,
@@ -356,7 +513,7 @@ var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) =
     )
   );
 });
-var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
   TabsPrimitive.Content,
   {
     ref,