@sikka/hawa
Version:
Modern UI Kit made with Tailwind
1 lines • 59.7 kB
Source Map (JSON)
{"version":3,"sources":["../../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","../../hooks/useWindowEvent.ts","../../hooks/useViewportSize.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/scrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { useMeasureDirty, useViewportSize } from \"@hooks/index\";\nimport * as Popover from \"@radix-ui/react-popover\";\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 { 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 scrollable?: boolean;\n}>({ orientation: \"horizontal\", variant: \"default\", scrollable: false });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & { variant?: TabsVariants; scrollable?: boolean };\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(\n (\n { className, orientation, scrollable, variant = \"default\", ...props },\n ref,\n ) => (\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, scrollable }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n ),\n);\n\ntype TabsListProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.List\n> & {\n classNames?: {\n scrollArea?: string;\n };\n};\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, classNames, ...props }, ref) => {\n const { orientation, variant, scrollable } = React.useContext(TabsContext);\n const { width } = useViewportSize();\n\n if (scrollable && width < 768 && orientation === \"horizontal\") {\n return (\n <ScrollArea orientation=\"horizontal\" className={classNames?.scrollArea}>\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 withPopover?: boolean;\n onPopoverClick?: () => void;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(\n (\n { className, chipProps, withPopover = false, onPopoverClick, ...props },\n ref,\n ) => {\n const { orientation, variant } = React.useContext(TabsContext);\n\n if (withPopover) {\n return (\n <Popover.Root open={props.showPopover}>\n <Popover.Anchor asChild>\n <TabsPrimitive.Trigger\n className={cn(\n tabsTriggerVariant({ variant, orientation }),\n \"hawa-relative\",\n className,\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n </TabsPrimitive.Trigger>\n </Popover.Anchor>\n <Popover.Content\n onClick={onPopoverClick}\n asChild\n className={cn(\n \"dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[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\",\n \"hawa-arrow-default-top hawa-mt-2\",\n )}\n >\n <div className=\"hawa-p-2\"> {props.popoverContent}</div>\n </Popover.Content>\n </Popover.Root>\n );\n } else {\n return (\n <TabsPrimitive.Trigger\n className={cn(\n tabsTriggerVariant({ variant, orientation }),\n \"hawa-relative\",\n className,\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n </TabsPrimitive.Trigger>\n );\n }\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({ 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 { useEffect } from \"react\";\n\nexport function useWindowEvent<K extends string>(\n type: K,\n listener: K extends keyof WindowEventMap\n ? (this: Window, ev: WindowEventMap[K]) => void\n : (this: Window, ev: CustomEvent) => void,\n options?: boolean | AddEventListenerOptions,\n) {\n useEffect(() => {\n window.addEventListener(type as any, listener, options);\n return () => window.removeEventListener(type as any, listener, options);\n }, [type, listener]);\n}\n","import { useCallback, useEffect, useState } from \"react\";\n\nimport { useWindowEvent } from \"./useWindowEvent\";\n\nconst eventListerOptions = {\n passive: true,\n};\n\nexport function useViewportSize() {\n const [windowSize, setWindowSize] = useState({\n width: 0,\n height: 0,\n });\n\n const setSize = useCallback(() => {\n setWindowSize({\n width: window.innerWidth || 0,\n height: window.innerHeight || 0,\n });\n }, []);\n\n useWindowEvent(\"resize\", setSize, eventListerOptions);\n useWindowEvent(\"orientationchange\", setSize, eventListerOptions);\n useEffect(setSize, []);\n\n return windowSize;\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 rest.className,\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 * 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={onMou