torch-glare 1.0.2

package/lib/components/TreeDropDown.tsx

@@ -0,0 +1,69 @@
+'use client'
+import { cn } from "../utils/cn";
+import { cva, VariantProps } from "class-variance-authority";
+import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
+
+const TreeDropDownVariants = cva(["flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
+    "text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
+    "hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:gap-[14px]",
+    "rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
+], {
+    variants: {
+        variant: {
+            secondary: "",
+            default: ""
+        },
+        active: {
+            true: "hover:gap-[8px]"
+        }
+    },
+    compoundVariants: [
+        {
+            active: true,
+            variant: "default",
+            className: [
+                "bg-background-system-action-primary-hover border-border-system-action-primary-hover [&_button]:bg-purple-alpha-15 hover:bg-background-system-action-primary-hover hover:border-border-system-action-primary-hover",
+            ]
+        },
+        {
+            active: true,
+            variant: "secondary",
+            className: [
+                "bg-wavy-navy-1000 border-border-system-action-field-hover-selected [&_button]:bg-blue-sparkle-alpha-15 hover:bg-wavy-navy-1000 hover:border-border-system-action-field-hover-selected",
+            ]
+        }
+    ],
+    defaultVariants: {},// 
+
+});
+
+interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof TreeDropDownVariants> {
+    theme?: "dark" | "light" | "default";
+    treeLabel: ReactNode;
+    open?: boolean;
+    variant?: "secondary" | "default";
+    childrenContainerClassName?: string
+}
+
+export const TreeDropDown = ({ childrenContainerClassName, className, variant = "secondary", treeLabel, open, theme, ...props }: Props) => {
+    const [isActive, setIsActive] = useState(open);
+    useEffect(() => {
+        setIsActive(open)
+    }, [open])
+    return (
+        <div {...props} className={cn("flex h-fit flex-col transition-all ease-in-out duration-500",)}>
+            <div onClick={() => setIsActive(!isActive)} data-theme={theme} className={cn(TreeDropDownVariants({ variant, active: isActive }), className)}>
+                <button className={cn("outline-none border-none flex-0 leading-0 transition-transform ease-in-out flex justify-center items-center bg-background-system-body-tertiary h-[28px] w-[28px] rounded-full text-[20px] text-content-system-global-primary", { "rotate-180": isActive })}>
+                    <i className={cn("leading-none ri-arrow-down-s-line ")}></i>
+                </button>
+                <div className={cn("text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1")}>{treeLabel}</div>
+            </div>
+            <div className={cn("mt-0 pl-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out", {
+                "max-h-[20000px] mt-1": isActive, "max-h-0": !isActive,
+            })}>
+                <span className="h-full w-[1px] bg-border-system-global-primary absolute left-[21px] top-0 rounded-sm z-10" />
+                <div className={cn("h-full flex flex-col gap-1 w-full", childrenContainerClassName)}>{props.children}</div>
+            </div>
+        </div>
+    );
+};

package/lib/hooks/MobileSlidePicker/components/Picker.tsx

@@ -0,0 +1,218 @@
+import { CSSProperties, HTMLProps, MutableRefObject, createContext, useCallback, useContext, useMemo, useReducer } from 'react'
+
+const DEFAULT_HEIGHT = 216
+const DEFAULT_ITEM_HEIGHT = 36
+const DEFAULT_WHEEL_MODE = 'off'
+
+interface Option {
+  value: string | number
+  element: MutableRefObject<HTMLElement | null>
+}
+
+export interface PickerValue {
+  [key: string]: string | number
+}
+
+export interface PickerRootProps<TType extends PickerValue> extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
+  value: TType
+  onChange: (value: TType, key: string) => void
+  height?: number
+  itemHeight?: number
+  wheelMode?: 'off' | 'natural' | 'normal'
+}
+
+const PickerDataContext = createContext<{
+  height: number
+  itemHeight: number
+  wheelMode: 'off' | 'natural' | 'normal'
+  value: PickerValue
+  optionGroups: { [key: string]: Option[] }
+} | null>(null)
+PickerDataContext.displayName = 'PickerDataContext'
+
+export function usePickerData(componentName: string) {
+  const context = useContext(PickerDataContext)
+  if (context === null) {
+    const error = new Error(`<${componentName} /> is missing a parent <Picker /> component.`)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(error, usePickerData)
+    }
+    throw error
+  }
+  return context
+}
+
+const PickerActionsContext = createContext<{
+  registerOption(key: string, option: Option): () => void
+  change(key: string, value: string | number): boolean
+} | null>(null)
+PickerActionsContext.displayName = 'PickerActionsContext'
+
+export function usePickerActions(componentName: string) {
+  const context = useContext(PickerActionsContext)
+  if (context === null) {
+    const error = new Error(`<${componentName} /> is missing a parent <Picker /> component.`)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(error, usePickerActions)
+    }
+    throw error
+  }
+  return context
+}
+
+function sortByDomNode<T>(
+  nodes: T[],
+  resolveKey: (item: T) => HTMLElement | null = (i) => i as unknown as HTMLElement | null
+): T[] {
+  return nodes.slice().sort((aItem, zItem) => {
+    const a = resolveKey(aItem)
+    const z = resolveKey(zItem)
+
+    if (a === null || z === null) return 0
+
+    const position = a.compareDocumentPosition(z)
+
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
+    return 0
+  })
+}
+
+function pickerReducer(
+  optionGroups: { [key: string]: Option[] },
+  action: {
+    type: 'REGISTER_OPTION' | 'UNREGISTER_OPTION'
+    key: string
+    option: Option
+  }
+) {
+  switch (action.type) {
+    case 'REGISTER_OPTION': {
+      const { key, option } = action
+      let nextOptionsForKey = [...(optionGroups[key] || []), option]
+      nextOptionsForKey = sortByDomNode(nextOptionsForKey, (o) => o.element.current)
+      return {
+        ...optionGroups,
+        [key]: nextOptionsForKey,
+      }
+    }
+    case 'UNREGISTER_OPTION': {
+      const { key, option } = action
+      return {
+        ...optionGroups,
+        [key]: (optionGroups[key] || []).filter((o) => o !== option),
+      }
+    }
+    default: {
+      throw Error(`Unknown action: ${action.type as string}`);
+    }
+  }
+}
+
+function PickerRoot<TType extends PickerValue>(props: PickerRootProps<TType> | any) {
+  const {
+    style,
+    children,
+    value,
+    onChange,
+    height = DEFAULT_HEIGHT,
+    itemHeight = DEFAULT_ITEM_HEIGHT,
+    wheelMode = DEFAULT_WHEEL_MODE,
+    selectContainerClassName,
+    ...restProps
+  } = props
+
+  const highlightStyle = useMemo<CSSProperties>(
+    () => ({
+      height: itemHeight,
+      marginTop: -(itemHeight / 2),
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      width: '100%',
+      pointerEvents: 'none',
+    }),
+    [itemHeight]
+  )
+  const containerStyle = useMemo<CSSProperties>(
+    () => ({
+      height: `${height}px`,
+      position: 'relative',
+      display: 'flex',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      maskImage: 'linear-gradient(to top, transparent, transparent 10%, white 50%, white 60%, transparent 90%, transparent)',
+      WebkitMaskImage: 'linear-gradient(to top, transparent, transparent 10%, white 50%, white 60%, transparent 90%, transparent)',
+    }),
+    [height]
+  )
+
+  const [optionGroups, dispatch] = useReducer(pickerReducer, {})
+
+  const pickerData = useMemo(
+    () => ({ height, itemHeight, wheelMode, value, optionGroups }),
+    [height, itemHeight, value, optionGroups, wheelMode]
+  )
+
+  const triggerChange = useCallback((key: string, nextValue: string) => {
+    if (value[key] === nextValue) return false
+    const nextPickerValue = { ...value, [key]: nextValue }
+    onChange(nextPickerValue, key)
+    return true
+  }, [onChange, value])
+  const registerOption = useCallback((key: string, option: Option) => {
+    dispatch({ type: 'REGISTER_OPTION', key, option })
+    return () => dispatch({ type: 'UNREGISTER_OPTION', key, option })
+  }, [])
+  const pickerActions = useMemo(
+    () => ({ registerOption, change: triggerChange }),
+    [registerOption, triggerChange]
+  )
+
+  return (
+    <div
+      style={{
+        ...containerStyle,
+        ...style,
+      }}
+      {...restProps}
+    >
+      <PickerActionsContext.Provider value={pickerActions}>
+        <PickerDataContext.Provider value={pickerData}>
+          {children}
+        </PickerDataContext.Provider>
+      </PickerActionsContext.Provider>
+      <div
+        className={selectContainerClassName}
+        style={highlightStyle}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 'auto',
+            left: 0,
+            right: 'auto',
+            width: '100%',
+            height: '1px',
+            transform: 'scaleY(0.5)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            top: 'auto',
+            bottom: 0,
+            left: 0,
+            right: 'auto',
+            width: '100%',
+            height: '1px',
+            transform: 'scaleY(0.5)',
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PickerRoot

package/lib/hooks/MobileSlidePicker/components/PickerColumn.tsx

@@ -0,0 +1,238 @@
+import { CSSProperties, HTMLProps, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
+import { usePickerActions, usePickerData } from "./Picker"
+
+interface PickerColumnProps extends HTMLProps<HTMLDivElement> {
+  name: string
+}
+
+const PickerColumnDataContext = createContext<{
+  key: string
+} | null>(null)
+PickerColumnDataContext.displayName = 'PickerColumnDataContext'
+
+export function useColumnData(componentName: string) {
+  const context = useContext(PickerColumnDataContext)
+  if (context === null) {
+    const error = new Error(`<${componentName} /> is missing a parent <Picker.Column /> component.`)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(error, useColumnData)
+    }
+    throw error
+  }
+  return context
+}
+
+function PickerColumn({
+  style,
+  children,
+  name: key,
+  ...restProps
+}: PickerColumnProps) {
+  const { height, itemHeight, wheelMode, value: groupValue, optionGroups } = usePickerData('Picker.Column')
+
+  // Caculate the selected index
+  const value = useMemo(
+    () => groupValue[key],
+    [groupValue, key],
+  )
+  const options = useMemo(
+    () => optionGroups[key] || [],
+    [key, optionGroups],
+  )
+  const selectedIndex = useMemo(
+    () => {
+      let index = options.findIndex((o) => o.value === value)
+      if (index < 0) {
+        index = 0
+      }
+      return index
+    },
+    [options, value],
+  )
+
+  // Caculate the translate of scroller
+  const minTranslate = useMemo(
+    () => height / 2 - itemHeight * options.length + itemHeight / 2,
+    [height, itemHeight, options],
+  )
+  const maxTranslate = useMemo(
+    () => height / 2 - itemHeight / 2,
+    [height, itemHeight],
+  )
+  const [scrollerTranslate, setScrollerTranslate] = useState<number>(0)
+  useEffect(() => {
+    setScrollerTranslate(height / 2 - itemHeight / 2 - selectedIndex * itemHeight)
+  }, [height, itemHeight, selectedIndex])
+
+  // A handler to trigger the value change
+  const pickerActions = usePickerActions('Picker.Column')
+  const translateRef = useRef<number>(scrollerTranslate)
+  translateRef.current = scrollerTranslate
+  const handleScrollerTranslateSettled = useCallback(() => {
+    let nextActiveIndex = 0
+    const currentTrans = translateRef.current
+    if (currentTrans >= maxTranslate) {
+      nextActiveIndex = 0
+    } else if (currentTrans <= minTranslate) {
+      nextActiveIndex = options.length - 1
+    } else {
+      nextActiveIndex = -Math.round((currentTrans - maxTranslate) / itemHeight)
+    }
+
+    const changed = pickerActions.change(key, options[nextActiveIndex].value)
+    if (!changed) {
+      setScrollerTranslate(height / 2 - itemHeight / 2 - nextActiveIndex * itemHeight)
+    }
+  }, [pickerActions, height, itemHeight, key, maxTranslate, minTranslate, options])
+
+  // Handle touch events
+  const [startScrollerTranslate, setStartScrollerTranslate] = useState<number>(0)
+  const [isMoving, setIsMoving] = useState<boolean>(false)
+  const [startTouchY, setStartTouchY] = useState<number>(0)
+
+  const updateScrollerWhileMoving = useCallback((nextScrollerTranslate: number) => {
+    if (nextScrollerTranslate < minTranslate) {
+      nextScrollerTranslate = minTranslate - Math.pow(minTranslate - nextScrollerTranslate, 0.8)
+    } else if (nextScrollerTranslate > maxTranslate) {
+      nextScrollerTranslate = maxTranslate + Math.pow(nextScrollerTranslate - maxTranslate, 0.8)
+    }
+    setScrollerTranslate(nextScrollerTranslate)
+  }, [maxTranslate, minTranslate])
+
+  const handleTouchStart = useCallback((event: React.TouchEvent) => {
+    setStartTouchY(event.targetTouches[0].pageY)
+    setStartScrollerTranslate(scrollerTranslate)
+  }, [scrollerTranslate])
+
+  const handleTouchMove = useCallback((event: TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault()
+    }
+
+    if (!isMoving) {
+      setIsMoving(true)
+    }
+
+    const nextScrollerTranslate = startScrollerTranslate + event.targetTouches[0].pageY - startTouchY
+    updateScrollerWhileMoving(nextScrollerTranslate)
+  }, [isMoving, startScrollerTranslate, startTouchY, updateScrollerWhileMoving])
+
+  const handleTouchEnd = useCallback(() => {
+    if (!isMoving) {
+      return
+    }
+    setIsMoving(false)
+    setStartTouchY(0)
+    setStartScrollerTranslate(0)
+
+    handleScrollerTranslateSettled()
+  }, [handleScrollerTranslateSettled, isMoving])
+
+  const handleTouchCancel = useCallback(() => {
+    if (!isMoving) {
+      return
+    }
+    setIsMoving(false)
+    setStartTouchY(0)
+    setScrollerTranslate(startScrollerTranslate)
+    setStartScrollerTranslate(0)
+  }, [isMoving, startScrollerTranslate])
+
+  // Handle wheel events
+  const wheelingTimer = useRef<number | null>(null)
+
+  const handleWheeling = useCallback((event: WheelEvent) => {
+    if (event.deltaY === 0) {
+      return
+    }
+    let delta = event.deltaY * 0.1
+    if (Math.abs(delta) < itemHeight) {
+      delta = itemHeight * Math.sign(delta)
+    }
+    if (wheelMode === 'normal') {
+      delta = -delta
+    }
+
+
+    const nextScrollerTranslate = scrollerTranslate + delta
+    updateScrollerWhileMoving(nextScrollerTranslate)
+  }, [itemHeight, scrollerTranslate, updateScrollerWhileMoving, wheelMode])
+
+  const handleWheelEnd = useCallback(() => {
+    handleScrollerTranslateSettled()
+  }, [handleScrollerTranslateSettled])
+
+  const handleWheel = useCallback((event: WheelEvent) => {
+    if (wheelMode === 'off') {
+      return
+    }
+
+    if (event.cancelable) {
+      event.preventDefault()
+    }
+
+    handleWheeling(event)
+
+    if (wheelingTimer.current) {
+      clearTimeout(wheelingTimer.current)
+    }
+
+    wheelingTimer.current = setTimeout(() => {
+      handleWheelEnd()
+    }, 200) as unknown as number
+  }, [handleWheelEnd, handleWheeling, wheelingTimer, wheelMode])
+
+  // 'touchmove' and 'wheel' should not be passive
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener('touchmove', handleTouchMove, { passive: false })
+      container.addEventListener('wheel', handleWheel, { passive: false })
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener('touchmove', handleTouchMove)
+        container.removeEventListener('wheel', handleWheel)
+      }
+    }
+  }, [handleTouchMove, handleWheel])
+
+  const columnStyle = useMemo<CSSProperties>(
+    () => ({
+      flex: '1 1 0%',
+      maxHeight: '100%',
+      transitionProperty: 'transform',
+      transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+      transitionDuration: isMoving ? '0ms' : '300ms',
+      transform: `translate3d(0, ${scrollerTranslate}px, 0)`,
+    }),
+    [scrollerTranslate, isMoving],
+  )
+
+  const columnData = useMemo(
+    () => ({ key }),
+    [key],
+  )
+
+  return (
+    <div
+      style={{
+        ...columnStyle,
+        ...style,
+      }}
+      ref={containerRef}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onTouchCancel={handleTouchCancel}
+      {...restProps}
+    >
+      <PickerColumnDataContext.Provider value={columnData}>
+        {children}
+      </PickerColumnDataContext.Provider>
+    </div>
+  )
+}
+
+
+export default PickerColumn

package/lib/hooks/MobileSlidePicker/components/PickerItem.tsx

@@ -0,0 +1,64 @@
+import { HTMLProps, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'
+import { usePickerActions, usePickerData } from './Picker.tsx'
+import { useColumnData } from './PickerColumn.tsx'
+
+interface PickerItemRenderProps {
+  selected: boolean
+}
+
+export interface PickerItemProps extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'children'> {
+  children: ReactNode | ((renderProps: PickerItemRenderProps) => ReactNode)
+  value: string | number
+}
+
+// eslint-disable-next-line
+function isFunction(functionToCheck: any): functionToCheck is Function {
+  return typeof functionToCheck === 'function'
+}
+
+function PickerItem({
+  style,
+  children,
+  value,
+  ...restProps
+}: PickerItemProps) {
+  const optionRef = useRef<HTMLDivElement | null>(null)
+  const { itemHeight, value: pickerValue } = usePickerData('Picker.Item')
+  const pickerActions = usePickerActions('Picker.Item')
+  const { key } = useColumnData('Picker.Item')
+
+  useEffect(
+    () => pickerActions.registerOption(key, { value, element: optionRef }),
+    [key, pickerActions, value],
+  )
+
+  const itemStyle = useMemo(
+    () => ({
+      height: `${itemHeight}px`,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }),
+    [itemHeight],
+  )
+
+  const handleClick = useCallback(() => {
+    pickerActions.change(key, value)
+  }, [pickerActions, key, value])
+
+  return (
+    <div
+      style={{
+        ...itemStyle,
+        ...style,
+      }}
+      ref={optionRef}
+      onClick={handleClick}
+      {...restProps}
+    >
+      {isFunction(children) ? children({ selected: pickerValue[key] === value }) : children}
+    </div>
+  )
+}
+
+export default PickerItem

package/lib/hooks/MobileSlidePicker/index.ts

@@ -0,0 +1,10 @@
+import Picker, { PickerValue, PickerRootProps as PickerProps } from './components/Picker.tsx'
+import Column from './components/PickerColumn.tsx'
+import Item from './components/PickerItem.tsx'
+
+export type { PickerProps, PickerValue }
+
+export default Object.assign(Picker, {
+  Column,
+  Item,
+})

package/lib/hooks/useActiveTreeItem.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { useState, useEffect } from "react";
+
+export function useActiveTreeItem(itemIds: string[]) {
+    const [activeId, setActiveId] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!itemIds || itemIds.length === 0) {
+            console.warn("No itemIds provided to useActiveTreeItem.");
+            return;
+        }
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                let mostVisibleEntry: any = null;
+
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        // Track the most visible entry (highest intersection ratio)
+                        if (
+                            !mostVisibleEntry ||
+                            entry.intersectionRatio > mostVisibleEntry.intersectionRatio
+                        ) {
+                            mostVisibleEntry = entry;
+                        }
+                    }
+                });
+
+                if (mostVisibleEntry) {
+                    setActiveId(mostVisibleEntry.target.id);
+                }
+            },
+            {
+                rootMargin: '-10% 0% -5% 0%', // Adjust based on your layout
+                threshold: [0, 0.25, 0.5, 0.75, 1], // Multiple thresholds for better accuracy
+            }
+        );
+
+        // Observe all elements
+        itemIds.forEach((id) => {
+            const element = document.getElementById(id);
+            if (element) {
+                observer.observe(element);
+            } else {
+                console.warn(`Element with id "${id}" not found.`);
+            }
+        });
+
+        // Cleanup observer
+        return () => {
+            itemIds.forEach((id) => {
+                const element = document.getElementById(id);
+                if (element) {
+                    observer.unobserve(element);
+                }
+            });
+        };
+    }, [itemIds]);
+
+    return { activeId };
+}

package/lib/hooks/useClickOutside.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+
+export function useClickOutside<T extends HTMLElement>(callback: () => void) {
+    const ref = useRef<T>(null);
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (ref.current && !ref.current.contains(event.target as Node)) {
+                callback();
+            }
+        }
+
+        document.addEventListener("click", handleClickOutside);
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [callback]);
+
+    return ref;
+}
+
+