panelui-native 0.7.0 → 0.12.0

package/lib/module/components/tabs/index.js

@@ -1,8 +1,27 @@
 "use strict";
 
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Pressable, View } from 'react-native';
+/**
+ * Tabs — segmented navigation between panels.
+ *
+ * The active tab is marked by one indicator that slides between measured
+ * trigger positions rather than by a style on each trigger. That is what makes
+ * the movement continuous: there is a single thing travelling, so a switch two
+ * tabs away reads as one gesture instead of two states swapping.
+ *
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+ *     <Tabs.Trigger value="team" badge={<Badge>3</Badge>}>Team</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="account">…</Tabs.Content>
+ * </Tabs>
+ * ```
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
 import Animated, { FadeIn, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
 import { Text } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -11,6 +30,71 @@ const SPRING = {
   stiffness: 300,
   mass: 0.7
 };
+const tabsVariants = tv({
+  slots: {
+    list: 'flex-row',
+    indicator: 'absolute left-0',
+    trigger: 'items-center justify-center',
+    label: ''
+  },
+  variants: {
+    variant: {
+      // A raised chip travelling inside a recessed track.
+      segmented: {
+        list: 'rounded-lg bg-muted p-1',
+        indicator: 'bottom-1 top-1 rounded-md bg-popover shadow-sm',
+        trigger: 'rounded-md py-1.5'
+      },
+      // No track at all — the indicator is a rule under the active tab, and
+      // the row sits on a hairline so inactive tabs still have a baseline.
+      underline: {
+        list: 'gap-1 border-b border-border',
+        indicator: '-bottom-px h-0.5 rounded-full bg-foreground',
+        trigger: 'py-2.5'
+      },
+      // Filled chip on the page rather than in a track; the active label
+      // inverts against it.
+      pill: {
+        list: 'gap-1',
+        indicator: 'bottom-0 top-0 rounded-full bg-primary',
+        trigger: 'rounded-full py-2'
+      }
+    },
+    active: {
+      true: {
+        label: 'text-foreground'
+      },
+      false: {
+        label: 'text-muted-foreground'
+      }
+    },
+    disabled: {
+      true: {
+        trigger: 'opacity-[0.44]'
+      }
+    },
+    /** Intrinsic width in a scroller, equal shares when the row is fixed. */
+    scrollable: {
+      true: {
+        trigger: 'px-4'
+      },
+      false: {
+        trigger: 'flex-1'
+      }
+    }
+  },
+  compoundVariants: [{
+    variant: 'pill',
+    active: true,
+    class: {
+      label: 'text-primary-foreground'
+    }
+  }],
+  defaultVariants: {
+    variant: 'segmented',
+    scrollable: false
+  }
+});
 const TabsContext = /*#__PURE__*/createContext(null);
 function useTabs(component) {
   const context = useContext(TabsContext);
@@ -24,11 +108,16 @@ function TabsRoot({
   value,
   onValueChange,
   defaultValue,
+  variant = 'segmented',
+  keepMounted = false,
   children,
   ...props
 }) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [layouts, setLayouts] = useState({});
+  // Published by the List rather than the root, because it is the List that
+  // decides whether it scrolls — but the Triggers below it need to know.
+  const [scrollable, setScrollable] = useState(false);
   const isControlled = value !== undefined;
   const resolvedValue = isControlled ? value : internalValue;
   const setValue = useCallback(next => {
@@ -51,8 +140,12 @@ function TabsRoot({
     value: resolvedValue,
     setValue,
     registerLayout,
-    layouts
-  }), [resolvedValue, setValue, registerLayout, layouts]);
+    layouts,
+    variant,
+    scrollable,
+    setScrollable,
+    keepMounted
+  }), [resolvedValue, setValue, registerLayout, layouts, variant, scrollable, keepMounted]);
   return /*#__PURE__*/_jsx(TabsContext.Provider, {
     value: context,
     children: /*#__PURE__*/_jsx(View, {
@@ -65,12 +158,18 @@ function TabsRoot({
 function TabsIndicator() {
   const {
     value,
-    layouts
+    layouts,
+    variant
   } = useTabs('Tabs.List');
   const x = useSharedValue(0);
   const width = useSharedValue(0);
   const initialized = useSharedValue(0);
   const layout = layouts[value];
+  const {
+    indicator
+  } = tabsVariants({
+    variant
+  });
 
   // In an effect, not the render body: touching a shared value during render
   // is a Reanimated strict-mode violation, and the write can be lost or
@@ -96,28 +195,79 @@ function TabsIndicator() {
   }));
   return /*#__PURE__*/_jsx(Animated.View, {
     style: style,
-    className: "absolute bottom-1 top-1 left-0 rounded-md bg-popover shadow-sm"
+    className: indicator()
   });
 }
 function TabsList({
   className,
+  scrollable = false,
   children,
   ...props
 }) {
-  return /*#__PURE__*/_jsxs(View, {
+  const {
+    variant,
+    setScrollable,
+    value,
+    layouts
+  } = useTabs('Tabs.List');
+  const {
+    list
+  } = tabsVariants({
+    variant
+  });
+  const scroller = useRef(null);
+  useEffect(() => {
+    setScrollable(scrollable);
+  }, [scrollable, setScrollable]);
+
+  // Bring the active tab into view when it changes from elsewhere — a
+  // controlled switch, or a swipe on the panel below.
+  const activeLayout = layouts[value];
+  useEffect(() => {
+    if (!scrollable || !activeLayout) return;
+    scroller.current?.scrollTo({
+      // Land the tab a little in from the edge rather than flush against it,
+      // so it does not read as the last one in the row.
+      x: Math.max(activeLayout.x - 24, 0),
+      animated: true
+    });
+  }, [scrollable, activeLayout?.x, activeLayout]);
+  const row = /*#__PURE__*/_jsxs(View, {
     accessibilityRole: "tablist",
-    className: cn('flex-row rounded-lg bg-muted p-1', className),
+    className: cn(list(), className),
     ...props,
     children: [/*#__PURE__*/_jsx(TabsIndicator, {}), children]
   });
+  if (!scrollable) return row;
+  return /*#__PURE__*/_jsx(ScrollView, {
+    ref: scroller,
+    horizontal: true,
+    showsHorizontalScrollIndicator: false
+    // The row measures itself, and the indicator is positioned against it,
+    // so the scroller must not stretch it to the viewport width.
+    ,
+    contentContainerStyle: {
+      flexGrow: 0
+    },
+    children: row
+  });
 }
 function TabsTrigger({
   className,
   value,
+  icon,
+  badge,
+  disabled = false,
   children
 }) {
   const context = useTabs('Tabs.Trigger');
   const active = context.value === value;
+  const slots = tabsVariants({
+    variant: context.variant,
+    active,
+    disabled,
+    scrollable: context.scrollable
+  });
   const handleLayout = useCallback(event => {
     const {
       x,
@@ -128,32 +278,52 @@ function TabsTrigger({
       width
     });
   }, [context, value]);
-  return /*#__PURE__*/_jsx(Pressable, {
+  return /*#__PURE__*/_jsxs(Pressable, {
     accessibilityRole: "tab",
     accessibilityState: {
-      selected: active
+      selected: active,
+      disabled
     },
+    disabled: disabled,
     onPress: () => context.setValue(value),
     onLayout: handleLayout,
-    className: cn('flex-1 items-center justify-center rounded-md py-1.5', className),
-    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+    className: cn(slots.trigger(), (icon || badge) && 'flex-row gap-1.5', className),
+    children: [icon, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
       size: "sm",
       weight: "medium",
-      className: active ? 'text-foreground' : 'text-muted-foreground',
+      className: slots.label(),
       children: children
-    }) : children
+    }) : children, badge]
   });
 }
 function TabsContent({
   className,
   value,
   children,
+  style,
   ...props
 }) {
   const context = useTabs('Tabs.Content');
-  if (context.value !== value) return null;
+  const active = context.value === value;
+  if (!active && !context.keepMounted) return null;
+
+  /*
+   * Hidden rather than unmounted under `keepMounted`, and hidden thoroughly:
+   * `display: none` takes it out of layout, and the accessibility props take
+   * it out of the reading order too. A screen reader walking through three
+   * panels of a tab set it cannot see is worse than no tabs at all.
+   */
   return /*#__PURE__*/_jsx(Animated.View, {
-    entering: FadeIn.duration(150),
+    // Only worth animating when the panel is genuinely arriving. A kept
+    // panel is already there; fading it in every time it is revealed would
+    // undo the point of keeping it.
+    entering: context.keepMounted ? undefined : FadeIn.duration(150),
+    style: [!active && {
+      display: 'none'
+    }, style],
+    pointerEvents: active ? 'auto' : 'none',
+    accessibilityElementsHidden: !active,
+    importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
     className: className,
     ...props,
     children: children

package/lib/module/components/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useCallback","useContext","useEffect","useMemo","useState","Pressable","View","Animated","FadeIn","useAnimatedStyle","useSharedValue","withSpring","Text","cn","jsx","_jsx","jsxs","_jsxs","SPRING","damping","stiffness","mass","TabsContext","useTabs","component","context","Error","TabsRoot","className","value","onValueChange","defaultValue","children","props","internalValue","setInternalValue","layouts","setLayouts","isControlled","undefined","resolvedValue","setValue","next","registerLayout","tab","layout","current","existing","x","width","Provider","TabsIndicator","initialized","style","opacity","transform","translateX","TabsList","accessibilityRole","TabsTrigger","active","handleLayout","event","nativeEvent","accessibilityState","selected","onPress","onLayout","size","weight","TabsContent","entering","duration","Tabs","Object","assign","List","Trigger","Content"],"sourceRoot":"../../../../src","sources":["components/tabs/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","Pressable","ScrollView","View","Animated","FadeIn","useAnimatedStyle","useSharedValue","withSpring","tv","Text","cn","jsx","_jsx","jsxs","_jsxs","SPRING","damping","stiffness","mass","tabsVariants","slots","list","indicator","trigger","label","variants","variant","segmented","underline","pill","active","true","false","disabled","scrollable","compoundVariants","class","defaultVariants","TabsContext","useTabs","component","context","Error","TabsRoot","className","value","onValueChange","defaultValue","keepMounted","children","props","internalValue","setInternalValue","layouts","setLayouts","setScrollable","isControlled","undefined","resolvedValue","setValue","next","registerLayout","tab","layout","current","existing","x","width","Provider","TabsIndicator","initialized","style","opacity","transform","translateX","TabsList","scroller","activeLayout","scrollTo","Math","max","animated","row","accessibilityRole","ref","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","flexGrow","TabsTrigger","icon","badge","handleLayout","event","nativeEvent","accessibilityState","selected","onPress","onLayout","size","weight","TabsContent","entering","duration","display","pointerEvents","accessibilityElementsHidden","importantForAccessibility","Tabs","Object","assign","List","Trigger","Content"],"sourceRoot":"../../../../src","sources":["components/tabs/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/toggle-button/index.js

@@ -0,0 +1,297 @@
+"use strict";
+
+/**
+ * ToggleButton — a button that stays down.
+ *
+ * The difference from Button is the whole point: a button does something and
+ * springs back, a toggle button *is* something afterwards. So the selected
+ * state is the loud one — a filled accent surface — and the resting state is
+ * quiet, either a soft fill or nothing at all.
+ *
+ * ```tsx
+ * <ToggleButton defaultSelected>Like</ToggleButton>
+ *
+ * <ToggleButton iconOnly accessibilityLabel="Bold">
+ *   <BoldIcon size={16} />
+ * </ToggleButton>
+ * ```
+ *
+ * `ToggleButtonGroup` takes over the state for a set of them — a segmented
+ * toolbar in `multiple` mode, an either-or choice in `single`. Inside a group
+ * each button needs an `id`, which is the value the group reports.
+ *
+ * ```tsx
+ * <ToggleButtonGroup selectionMode="multiple" value={marks} onValueChange={setMarks}>
+ *   <ToggleButton id="bold" iconOnly accessibilityLabel="Bold">…</ToggleButton>
+ *   <ToggleButton id="italic" iconOnly accessibilityLabel="Italic">…</ToggleButton>
+ * </ToggleButtonGroup>
+ * ```
+ */
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { IconColorProvider } from "../../icons/index.js";
+import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Text } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const toggleVariants = tv({
+  slots: {
+    root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
+    label: 'font-medium'
+  },
+  variants: {
+    variant: {
+      /** A soft fill at rest, so the control is visible before you touch it. */
+      default: {
+        root: 'bg-secondary'
+      },
+      /** Nothing at rest — for a dense toolbar where six fills would be noise. */
+      ghost: {
+        root: 'bg-transparent'
+      }
+    },
+    size: {
+      sm: {
+        root: 'h-9 gap-1.5 px-2.5',
+        label: 'text-sm'
+      },
+      md: {
+        root: 'h-11 px-4',
+        label: 'text-base'
+      },
+      lg: {
+        root: 'h-12 px-6',
+        label: 'text-lg'
+      }
+    },
+    selected: {
+      true: {
+        root: 'border-primary/24 bg-accent',
+        label: 'text-accent-foreground'
+      },
+      false: {
+        label: 'text-muted-foreground'
+      }
+    },
+    iconOnly: {
+      true: {
+        root: 'px-0'
+      }
+    },
+    disabled: {
+      true: {
+        root: 'opacity-[0.64]'
+      }
+    }
+  },
+  compoundVariants: [
+  // Square, and sized from the height so the icon sits in the middle.
+  {
+    iconOnly: true,
+    size: 'sm',
+    class: {
+      root: 'w-9'
+    }
+  }, {
+    iconOnly: true,
+    size: 'md',
+    class: {
+      root: 'w-11'
+    }
+  }, {
+    iconOnly: true,
+    size: 'lg',
+    class: {
+      root: 'w-12'
+    }
+  }],
+  defaultVariants: {
+    variant: 'default',
+    size: 'md'
+  }
+});
+
+/* -------------------------------------------------------------------------- */
+/* Group                                                                      */
+/* -------------------------------------------------------------------------- */
+
+const ToggleGroupContext = /*#__PURE__*/createContext(null);
+const ToggleButtonGroup = /*#__PURE__*/forwardRef(({
+  className,
+  selectionMode = 'multiple',
+  value,
+  defaultValue = [],
+  onValueChange,
+  disabled = false,
+  variant,
+  size,
+  children,
+  ...props
+}, ref) => {
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState(defaultValue);
+  const selection = isControlled ? value : internal;
+  const toggle = useCallback(id => {
+    const has = selection.includes(id);
+    const next = selectionMode === 'single' ?
+    // Pressing the selected one again clears it. A toolbar filter you
+    // cannot turn off is a trap.
+    has ? [] : [id] : has ? selection.filter(item => item !== id) : [...selection, id];
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  }, [selection, selectionMode, isControlled, onValueChange]);
+  const context = useMemo(() => ({
+    isSelected: id => selection.includes(id),
+    toggle,
+    disabled,
+    variant,
+    size
+  }), [selection, toggle, disabled, variant, size]);
+  return /*#__PURE__*/_jsx(ToggleGroupContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref
+      // `radiogroup` for an either-or choice, `toolbar` for a set of
+      // independent marks — the two are read out differently, and which
+      // one applies is exactly what selectionMode says.
+      ,
+      accessibilityRole: selectionMode === 'single' ? 'radiogroup' : 'toolbar',
+      className: cn('flex-row items-center gap-1.5', className),
+      ...props,
+      children: children
+    })
+  });
+});
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+
+/* -------------------------------------------------------------------------- */
+/* Button                                                                     */
+/* -------------------------------------------------------------------------- */
+
+const ToggleStateContext = /*#__PURE__*/createContext(null);
+
+/**
+ * The toggle's own state, for anything rendered inside it — an icon that
+ * changes shape when selected, a count that only shows when it is on.
+ */
+export function useToggleButton() {
+  const state = useContext(ToggleStateContext);
+  if (!state) {
+    throw new Error('useToggleButton must be used within a <ToggleButton>');
+  }
+  return state;
+}
+const ToggleButtonRoot = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  labelClassName,
+  id,
+  selected: selectedProp,
+  defaultSelected = false,
+  onSelectedChange,
+  disabled,
+  variant,
+  size,
+  iconOnly = false,
+  selectedClassName,
+  unselectedClassName,
+  onPress,
+  ...props
+}, ref) => {
+  const group = useContext(ToggleGroupContext);
+  const [internal, setInternal] = useState(defaultSelected);
+
+  /*
+   * Three sources of truth, in order: the group owns it if there is one,
+   * then a `selected` prop, then local state. The group comes first because
+   * a button inside one that also took a `selected` prop would fight it, and
+   * the group is the thing that knows about the other buttons.
+   */
+  const selected = group && id ? group.isSelected(id) : selectedProp ?? internal;
+  const isDisabled = disabled || (group?.disabled ?? false);
+  const slots = toggleVariants({
+    variant: variant ?? group?.variant,
+    size: size ?? group?.size,
+    selected,
+    iconOnly,
+    disabled: isDisabled
+  });
+
+  // Icons inside inherit this, so they follow the surface they sit on
+  // instead of every caller hardcoding a hex that is wrong in one theme.
+  const onColor = useCSSVariable('--color-accent-foreground');
+  const offColor = useCSSVariable('--color-muted-foreground');
+  const tint = selected ? onColor : offColor;
+  const handlePress = useCallback(event => {
+    onPress?.(event);
+    if (group && id) {
+      group.toggle(id);
+      return;
+    }
+    const next = !selected;
+    if (selectedProp === undefined) setInternal(next);
+    onSelectedChange?.(next);
+  }, [onPress, group, id, selected, selectedProp, onSelectedChange]);
+  const state = useMemo(() => ({
+    selected,
+    disabled: isDisabled
+  }), [selected, isDisabled]);
+  return /*#__PURE__*/_jsx(ToggleStateContext.Provider, {
+    value: state,
+    children: /*#__PURE__*/_jsx(IconColorProvider, {
+      color: typeof tint === 'string' ? tint : undefined,
+      children: /*#__PURE__*/_jsx(AnimatedPressable, {
+        ref: ref,
+        accessibilityRole: "button"
+        // `checked` is what a screen reader reads out as "on"/"off"; the
+        // selected state is the entire point of this control, so it is
+        // not left to be inferred from the colour.
+        ,
+        accessibilityState: {
+          checked: selected,
+          disabled: isDisabled,
+          selected
+        },
+        "aria-pressed": selected,
+        disabled: isDisabled,
+        onPress: handlePress,
+        className: cn(slots.root({
+          className
+        }), selected ? selectedClassName : unselectedClassName),
+        ...props,
+        children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+          className: slots.label({
+            className: labelClassName
+          }),
+          children: children
+        }) : children
+      })
+    })
+  });
+});
+ToggleButtonRoot.displayName = 'ToggleButton';
+/**
+ * The label, when the button holds more than a string — an icon beside text.
+ * It reads the selected state itself, so composing the two does not mean
+ * threading the colour through by hand.
+ */
+function ToggleButtonLabel({
+  className,
+  children
+}) {
+  const {
+    selected
+  } = useToggleButton();
+  return /*#__PURE__*/_jsx(Text, {
+    className: cn('font-medium', selected ? 'text-accent-foreground' : 'text-muted-foreground', className),
+    children: children
+  });
+}
+ToggleButtonLabel.displayName = 'ToggleButton.Label';
+export const ToggleButton = Object.assign(ToggleButtonRoot, {
+  Label: ToggleButtonLabel
+});
+export { ToggleButtonGroup };
+//# sourceMappingURL=index.js.map

package/lib/module/components/toggle-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","forwardRef","useCallback","useContext","useMemo","useState","View","tv","useCSSVariable","IconColorProvider","AnimatedPressable","Text","cn","jsx","_jsx","toggleVariants","slots","root","label","variants","variant","default","ghost","size","sm","md","lg","selected","true","false","iconOnly","disabled","compoundVariants","class","defaultVariants","ToggleGroupContext","ToggleButtonGroup","className","selectionMode","value","defaultValue","onValueChange","children","props","ref","isControlled","undefined","internal","setInternal","selection","toggle","id","has","includes","next","filter","item","context","isSelected","Provider","accessibilityRole","displayName","ToggleStateContext","useToggleButton","state","Error","ToggleButtonRoot","labelClassName","selectedProp","defaultSelected","onSelectedChange","selectedClassName","unselectedClassName","onPress","group","isDisabled","onColor","offColor","tint","handlePress","event","color","accessibilityState","checked","ToggleButtonLabel","ToggleButton","Object","assign","Label"],"sourceRoot":"../../../../src","sources":["components/toggle-button/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/hooks/index.js

@@ -5,6 +5,7 @@ export { useDisclosure } from "./use-disclosure.js";
 export { useBreakpoint, BREAKPOINTS } from "./use-breakpoint.js";
 export { useKeyboard } from "./use-keyboard.js";
 export { useKeyboardAvoidance } from "./use-keyboard-avoidance.js";
+export { useScrollSections } from "./use-scroll-sections.js";
 export { useDebouncedValue } from "./use-debounced-value.js";
 export { usePrevious } from "./use-previous.js";
 //# sourceMappingURL=index.js.map

package/lib/module/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCopyToClipboard","useDisclosure","useBreakpoint","BREAKPOINTS","useKeyboard","useKeyboardAvoidance","useDebouncedValue","usePrevious"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;AAAA,SACEA,kBAAkB,QAGb,4BAAyB;AAChC,SACEC,aAAa,QAGR,qBAAkB;AACzB,SACEC,aAAa,EACbC,WAAW,QAGN,qBAAkB;AACzB,SAASC,WAAW,QAAgC,mBAAgB;AACpE,SACEC,oBAAoB,QAGf,6BAA0B;AACjC,SAASC,iBAAiB,QAAQ,0BAAuB;AACzD,SAASC,WAAW,QAAQ,mBAAgB","ignoreList":[]}
+{"version":3,"names":["useCopyToClipboard","useDisclosure","useBreakpoint","BREAKPOINTS","useKeyboard","useKeyboardAvoidance","useScrollSections","useDebouncedValue","usePrevious"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;AAAA,SACEA,kBAAkB,QAGb,4BAAyB;AAChC,SACEC,aAAa,QAGR,qBAAkB;AACzB,SACEC,aAAa,EACbC,WAAW,QAGN,qBAAkB;AACzB,SAASC,WAAW,QAAgC,mBAAgB;AACpE,SACEC,oBAAoB,QAGf,6BAA0B;AACjC,SACEC,iBAAiB,QAGZ,0BAAuB;AAC9B,SAASC,iBAAiB,QAAQ,0BAAuB;AACzD,SAASC,WAAW,QAAQ,mBAAgB","ignoreList":[]}