@opengovsg/oui 0.0.13 → 0.0.14

package/dist/cjs/pagination/pagination.cjs

@@ -0,0 +1,263 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var i18n = require('@react-aria/i18n');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var usePagination$1 = require('./hooks/use-pagination.cjs');
+var paginationCursor = require('./pagination-cursor.cjs');
+var paginationItem = require('./pagination-item.cjs');
+var usePagination = require('./use-pagination.cjs');
+var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
+var ellipsis = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/ellipsis.cjs');
+var chevronsRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs');
+
+const Pagination = utils.forwardRef((props, ref) => {
+  const {
+    Component,
+    dotsJump,
+    slots,
+    classNames,
+    total,
+    range,
+    loop,
+    activePage,
+    disableCursorAnimation,
+    disableAnimation,
+    renderItem: renderItemProp,
+    onNext,
+    onPrevious,
+    setPage,
+    getItemAriaLabel,
+    getItemRef,
+    getBaseProps,
+    getWrapperProps,
+    getItemProps,
+    getCursorProps
+  } = usePagination.usePagination({ ...props, ref });
+  const { direction } = i18n.useLocale();
+  const isRTL = direction === "rtl";
+  const renderChevronIcon = $670gB$react.useCallback(
+    (key) => {
+      if (key === usePagination$1.PaginationItemType.PREV && !isRTL || key === usePagination$1.PaginationItemType.NEXT && isRTL) {
+        return /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, {});
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        chevronLeft.default,
+        {
+          className: slots.chevronNext({
+            class: classNames?.chevronNext
+          })
+        }
+      );
+    },
+    [isRTL, slots, classNames?.chevronNext]
+  );
+  const renderPrevItem = $670gB$react.useCallback(() => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      paginationItem.PaginationItem,
+      {
+        className: slots.prev({
+          class: classNames?.prev
+        }),
+        "data-slot": "prev",
+        getAriaLabel: getItemAriaLabel,
+        isDisabled: props.isDisabled || !loop && activePage === 1,
+        value: usePagination$1.PaginationItemType.PREV,
+        onPress: onPrevious,
+        children: renderChevronIcon(usePagination$1.PaginationItemType.PREV)
+      },
+      usePagination$1.PaginationItemType.PREV
+    );
+  }, [
+    slots,
+    classNames?.prev,
+    getItemAriaLabel,
+    props.isDisabled,
+    loop,
+    activePage,
+    onPrevious,
+    renderChevronIcon
+  ]);
+  const renderNextItem = $670gB$react.useCallback(() => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      paginationItem.PaginationItem,
+      {
+        className: slots.next({
+          class: ouiTheme.cn(classNames?.next)
+        }),
+        "data-slot": "next",
+        getAriaLabel: getItemAriaLabel,
+        isDisabled: props.isDisabled || !loop && activePage === total,
+        value: usePagination$1.PaginationItemType.NEXT,
+        onPress: onNext,
+        children: renderChevronIcon(usePagination$1.PaginationItemType.NEXT)
+      },
+      usePagination$1.PaginationItemType.NEXT
+    );
+  }, [
+    slots,
+    classNames?.next,
+    getItemAriaLabel,
+    props.isDisabled,
+    loop,
+    activePage,
+    total,
+    onNext,
+    renderChevronIcon
+  ]);
+  const renderItem = $670gB$react.useCallback(
+    (value, index) => {
+      const isBefore = index < range.indexOf(activePage);
+      if (renderItemProp && typeof renderItemProp === "function") {
+        let page = typeof value == "number" ? value : index;
+        if (value === usePagination$1.PaginationItemType.NEXT) {
+          page = activePage + 1;
+        }
+        if (value === usePagination$1.PaginationItemType.PREV) {
+          page = activePage - 1;
+        }
+        if (value === usePagination$1.PaginationItemType.DOTS) {
+          page = isBefore ? activePage - dotsJump >= 1 ? activePage - dotsJump : 1 : activePage + dotsJump <= total ? activePage + dotsJump : total;
+        }
+        const itemChildren = {
+          [usePagination$1.PaginationItemType.PREV]: renderChevronIcon(usePagination$1.PaginationItemType.PREV),
+          [usePagination$1.PaginationItemType.NEXT]: renderChevronIcon(usePagination$1.PaginationItemType.NEXT),
+          [usePagination$1.PaginationItemType.DOTS]: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ellipsis.default,
+              {
+                className: slots?.ellipsis({ class: classNames?.ellipsis })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chevronsRight.default,
+              {
+                className: slots?.forwardIcon({
+                  class: classNames?.forwardIcon
+                }),
+                "data-before": ouiTheme.dataAttr(isBefore)
+              }
+            )
+          ] })
+        };
+        return renderItemProp({
+          value,
+          index,
+          key: `${value}-${index}`,
+          page,
+          total,
+          children: typeof value === "number" ? value : itemChildren[value],
+          activePage,
+          dotsJump,
+          isBefore,
+          isActive: value === activePage,
+          isPrevious: value === activePage - 1,
+          isNext: value === activePage + 1,
+          isFirst: value === 1,
+          isLast: value === total,
+          onNext,
+          onPrevious,
+          setPage,
+          onPress: () => setPage(page),
+          ref: typeof value === "number" ? (node) => getItemRef(node, value) : void 0,
+          className: slots.item({ class: classNames?.item }),
+          getAriaLabel: getItemAriaLabel
+        });
+      }
+      if (value === usePagination$1.PaginationItemType.PREV) {
+        return renderPrevItem();
+      }
+      if (value === usePagination$1.PaginationItemType.NEXT) {
+        return renderNextItem();
+      }
+      if (value === usePagination$1.PaginationItemType.DOTS) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          paginationItem.PaginationItem,
+          {
+            className: slots.item({
+              class: ouiTheme.cn(classNames?.item, "group")
+            }),
+            isDisabled: props.isDisabled,
+            "data-slot": "item",
+            getAriaLabel: getItemAriaLabel,
+            value,
+            onPress: () => isBefore ? setPage(
+              activePage - dotsJump >= 1 ? activePage - dotsJump : 1
+            ) : setPage(
+              activePage + dotsJump <= total ? activePage + dotsJump : total
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ellipsis.default,
+                {
+                  className: slots?.ellipsis({ class: classNames?.ellipsis })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chevronsRight.default,
+                {
+                  className: slots?.forwardIcon({ class: classNames?.forwardIcon }),
+                  "data-before": ouiTheme.dataAttr(isRTL ? !isBefore : isBefore)
+                }
+              )
+            ]
+          },
+          usePagination$1.PaginationItemType.DOTS + isBefore
+        );
+      }
+      return /* @__PURE__ */ $670gB$react.createElement(
+        paginationItem.PaginationItem,
+        {
+          ...getItemProps({ value }),
+          key: value,
+          getAriaLabel: getItemAriaLabel
+        },
+        value
+      );
+    },
+    [
+      range,
+      activePage,
+      renderItemProp,
+      getItemProps,
+      getItemAriaLabel,
+      renderChevronIcon,
+      slots,
+      classNames?.ellipsis,
+      classNames?.forwardIcon,
+      classNames?.item,
+      total,
+      dotsJump,
+      onNext,
+      onPrevious,
+      setPage,
+      getItemRef,
+      renderPrevItem,
+      renderNextItem,
+      props.isDisabled,
+      isRTL
+    ]
+  );
+  if (props.isCompact) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...getBaseProps(), children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { ...getWrapperProps(), children: [
+      renderPrevItem(),
+      /* @__PURE__ */ jsxRuntime.jsxs("li", { className: slots.item({ class: classNames?.item }), children: [
+        "Page ",
+        activePage,
+        " of ",
+        total
+      ] }),
+      renderNextItem()
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...getBaseProps(), children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { ...getWrapperProps(), children: [
+    !disableCursorAnimation && !disableAnimation && /* @__PURE__ */ jsxRuntime.jsx(paginationCursor.PaginationCursor, { ...getCursorProps() }),
+    range.map(renderItem)
+  ] }) });
+});
+
+exports.Pagination = Pagination;

package/dist/cjs/pagination/use-pagination-item.cjs

@@ -0,0 +1,87 @@
+"use strict";
+"use client";
+'use strict';
+
+var $670gB$react = require('react');
+var useFocusRing = require('../node_modules/.pnpm/@react-aria_focus@3.20.5_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/focus/dist/useFocusRing.cjs');
+var utils = require('@react-aria/utils');
+var useHover = require('../node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useHover.cjs');
+var usePress = require('../node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/usePress.cjs');
+var ouiTheme = require('@opengovsg/oui-theme');
+var filterDomProps = require('../system/react-utils/filter-dom-props.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+
+function usePaginationItem(props) {
+  const {
+    as,
+    ref,
+    value,
+    children,
+    isActive,
+    isDisabled,
+    onPress,
+    onClick,
+    getAriaLabel,
+    className,
+    ...otherProps
+  } = props;
+  const isLink = !!props?.href;
+  const Component = as || isLink ? "a" : "li";
+  const shouldFilterDOMProps = typeof Component === "string";
+  const domRef = refs.useDomRef(ref);
+  const router = utils.useRouter();
+  const ariaLabel = $670gB$react.useMemo(
+    () => isActive ? `${getAriaLabel?.(value)} active` : getAriaLabel?.(value),
+    [isActive, getAriaLabel, value]
+  );
+  const { isPressed, pressProps } = usePress.usePress({
+    isDisabled,
+    onPress
+  });
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing.useFocusRing({});
+  const { isHovered, hoverProps } = useHover.useHover({ isDisabled });
+  const getItemProps = (props2 = {}) => {
+    return {
+      ref: domRef,
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-current": ouiTheme.dataAttr(isActive),
+      "aria-disabled": ouiTheme.dataAttr(isDisabled),
+      "data-disabled": ouiTheme.dataAttr(isDisabled),
+      "data-active": ouiTheme.dataAttr(isActive),
+      "data-focus": ouiTheme.dataAttr(isFocused),
+      "data-hover": ouiTheme.dataAttr(isHovered),
+      "data-pressed": ouiTheme.dataAttr(isPressed),
+      "data-focus-visible": ouiTheme.dataAttr(isFocusVisible),
+      ...utils.mergeProps(
+        props2,
+        pressProps,
+        focusProps,
+        hoverProps,
+        filterDomProps.filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps
+        })
+      ),
+      className: ouiTheme.cn(className, props2.className),
+      onClick: (e) => {
+        utils.chain(pressProps?.onClick, onClick)(e);
+        if (!router.isNative && e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.href && // If props are applied to a router Link component, it may have already prevented default.
+        !e.isDefaultPrevented() && utils.shouldClientNavigate(e.currentTarget, e) && props2.href) {
+          e.preventDefault();
+          router.open(e.currentTarget, e, props2.href, props2.routerOptions);
+        }
+      }
+    };
+  };
+  return {
+    Component,
+    children,
+    ariaLabel,
+    isFocused,
+    isFocusVisible,
+    getItemProps
+  };
+}
+
+exports.usePaginationItem = usePaginationItem;

package/dist/cjs/pagination/use-pagination.cjs

@@ -0,0 +1,251 @@
+"use strict";
+"use client";
+'use strict';
+
+var $670gB$react = require('react');
+var scrollIntoView = require('scroll-into-view-if-needed');
+var useDeepCompare = require('use-deep-compare');
+var usehooksTs = require('usehooks-ts');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var usePagination$1 = require('./hooks/use-pagination.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+
+const CURSOR_TRANSITION_TIMEOUT = 300;
+function usePagination(originalProps) {
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.paginationStyles.variantKeys
+  );
+  const {
+    as,
+    ref,
+    classNames,
+    dotsJump = 5,
+    loop = false,
+    showControls = false,
+    total = 1,
+    initialPage = 1,
+    page,
+    siblings,
+    boundaries,
+    onChange,
+    className,
+    renderItem,
+    getItemAriaLabel: getItemAriaLabelProp,
+    ...otherProps
+  } = props;
+  const Component = as || "nav";
+  const domRef = refs.useDomRef(ref);
+  const cursorRef = $670gB$react.useRef(null);
+  const itemsRef = $670gB$react.useRef(null);
+  const cursorTimer = $670gB$react.useRef(null);
+  const disableAnimation = originalProps?.disableAnimation ?? false;
+  const disableCursorAnimation = originalProps?.disableCursorAnimation ?? disableAnimation ?? false;
+  function getItemsRefMap() {
+    if (!itemsRef.current) {
+      itemsRef.current = /* @__PURE__ */ new Map();
+    }
+    return itemsRef.current;
+  }
+  function getItemRef(node, value) {
+    const map = getItemsRefMap();
+    if (node) {
+      map.set(value, node);
+    } else {
+      map.delete(value);
+    }
+  }
+  const scrollTo = $670gB$react.useCallback(
+    (value, skipAnimation) => {
+      const map = getItemsRefMap();
+      const node = map.get(value);
+      if (!node || !cursorRef.current) return;
+      if (cursorTimer.current) {
+        clearTimeout(cursorTimer.current);
+      }
+      scrollIntoView(node, {
+        scrollMode: "always",
+        behavior: "smooth",
+        block: "start",
+        inline: "start",
+        boundary: domRef.current
+      });
+      const { offsetLeft } = node;
+      if (skipAnimation) {
+        cursorRef.current.setAttribute("data-moving", "false");
+        cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
+        return;
+      }
+      cursorRef.current.setAttribute("data-moving", "true");
+      cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1.1)`;
+      cursorTimer.current = setTimeout(() => {
+        if (cursorRef.current) {
+          cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
+        }
+        cursorTimer.current = setTimeout(() => {
+          cursorRef.current?.setAttribute("data-moving", "false");
+          if (cursorTimer.current) {
+            clearTimeout(cursorTimer.current);
+          }
+        }, CURSOR_TRANSITION_TIMEOUT);
+      }, CURSOR_TRANSITION_TIMEOUT);
+    },
+    [domRef]
+  );
+  const { range, activePage, setPage, previous, next, first, last } = usePagination$1.usePagination({
+    page,
+    total,
+    initialPage,
+    siblings,
+    boundaries,
+    showControls,
+    onChange
+  });
+  const [setRef, isVisible] = usehooksTs.useIntersectionObserver();
+  $670gB$react.useEffect(() => {
+    if (domRef.current) {
+      setRef(domRef.current);
+    }
+  }, [domRef, setRef]);
+  const activePageRef = $670gB$react.useRef(activePage);
+  $670gB$react.useEffect(() => {
+    if (activePage && !disableAnimation && isVisible) {
+      scrollTo(activePage, activePage === activePageRef.current);
+    }
+    activePageRef.current = activePage;
+  }, [
+    page,
+    activePage,
+    disableAnimation,
+    disableCursorAnimation,
+    isVisible,
+    originalProps.dotsJump,
+    originalProps.isCompact,
+    originalProps.showControls,
+    scrollTo
+  ]);
+  const slots = useDeepCompare.useDeepCompareMemo(
+    () => ouiTheme.paginationStyles({
+      ...variantProps,
+      disableAnimation,
+      disableCursorAnimation
+    }),
+    [variantProps, disableCursorAnimation, disableAnimation]
+  );
+  const baseStyles = ouiTheme.cn(classNames?.base, className);
+  const onNext = () => {
+    if (loop && activePage === total) {
+      return first();
+    }
+    return next();
+  };
+  const onPrevious = () => {
+    if (loop && activePage === 1) {
+      return last();
+    }
+    return previous();
+  };
+  const getBaseProps = (props2 = {}) => {
+    return {
+      ref: domRef,
+      role: "navigation",
+      "aria-label": props2["aria-label"] || "pagination navigation",
+      "data-slot": "base",
+      "data-controls": ouiTheme.dataAttr(showControls),
+      "data-loop": ouiTheme.dataAttr(loop),
+      "data-dots-jump": dotsJump,
+      "data-total": total,
+      "data-active-page": activePage,
+      className: slots.base({ class: ouiTheme.cn(baseStyles, props2?.className) }),
+      ...otherProps,
+      ...props2
+    };
+  };
+  const getWrapperProps = (props2 = {}) => {
+    return {
+      "data-slot": "wrapper",
+      "data-disabled": ouiTheme.dataAttr(variantProps.isDisabled),
+      role: "none",
+      className: slots.wrapper({
+        class: ouiTheme.cn(classNames?.wrapper, props2?.className)
+      }),
+      ...props2
+    };
+  };
+  const getItemAriaLabel = (page2) => {
+    if (!page2) return;
+    if (getItemAriaLabelProp) {
+      return getItemAriaLabelProp(page2);
+    }
+    switch (page2) {
+      case usePagination$1.PaginationItemType.DOTS:
+        return "dots element";
+      case usePagination$1.PaginationItemType.PREV:
+        return "previous page button";
+      case usePagination$1.PaginationItemType.NEXT:
+        return "next page button";
+      case "first":
+        return "first page button";
+      case "last":
+        return "last page button";
+      default:
+        return `pagination item ${page2}`;
+    }
+  };
+  const getItemProps = (props2 = {}) => {
+    return {
+      ref: (node) => getItemRef(node, props2.value),
+      "aria-disabled": ouiTheme.dataAttr(variantProps.isDisabled),
+      "data-disabled": ouiTheme.dataAttr(variantProps.isDisabled),
+      "data-slot": "item",
+      isActive: props2.value === activePage,
+      className: slots.item({
+        class: ouiTheme.cn(classNames?.item, props2?.className)
+      }),
+      onPress: () => {
+        if (props2.value !== activePage) {
+          setPage(props2.value);
+        }
+      },
+      ...props2
+    };
+  };
+  const getCursorProps = (props2 = {}) => {
+    return {
+      ref: cursorRef,
+      activePage,
+      "data-slot": "cursor",
+      className: slots.cursor({
+        class: ouiTheme.cn(classNames?.cursor, props2?.className)
+      }),
+      ...props2
+    };
+  };
+  return {
+    Component,
+    showControls,
+    dotsJump,
+    slots,
+    classNames,
+    loop,
+    total,
+    range,
+    activePage,
+    getItemRef,
+    disableAnimation,
+    disableCursorAnimation,
+    setPage,
+    onPrevious,
+    onNext,
+    renderItem,
+    getBaseProps,
+    getWrapperProps,
+    getItemProps,
+    getCursorProps,
+    getItemAriaLabel
+  };
+}
+
+exports.CURSOR_TRANSITION_TIMEOUT = CURSOR_TRANSITION_TIMEOUT;
+exports.usePagination = usePagination;

package/dist/cjs/range-calendar/range-calendar.cjs

@@ -3,17 +3,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
+var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
 var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
 var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
 var calendarHeader = require('../calendar/calendar-header.cjs');
 var utils = require('../system/utils.cjs');
-var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 
 const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
   const [props, variantProps] = utils.mapPropsVariants(
@@ -35,7 +35,7 @@ const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalPr
     () => ouiTheme.calendarStyles({ ...variantProps, isRange: true }),
     [variantProps]
   );
-  const context = react.useMemo(
+  const context = $670gB$react.useMemo(
     () => ({
       slots,
       classNames,
@@ -45,7 +45,7 @@ const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalPr
     [className, classNames, slots, variantProps.size]
   );
   const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
-  const dateToHighlight = react.useMemo(() => {
+  const dateToHighlight = $670gB$react.useMemo(() => {
     if (props.defaultFocusedValue !== void 0) {
       return props.defaultFocusedValue;
     }
@@ -138,7 +138,7 @@ const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalPr
 const RangeCalendarStateWrapper = ({
   children
 }) => {
-  const state = react.useContext(reactAriaComponents.RangeCalendarStateContext);
+  const state = $670gB$react.useContext(reactAriaComponents.RangeCalendarStateContext);
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[agnosticCalendarStateContext.AgnosticCalendarStateContext, state]], children });
 };
 const RangeCalendarCell = ({
@@ -148,9 +148,9 @@ const RangeCalendarCell = ({
   firstDayOfWeek
 }) => {
   const { classNames, slots } = calendarStyleContext.useCalendarStyleContext();
-  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const state = $670gB$react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
   const { locale } = reactAriaComponents.useLocale();
-  const dataAttributes = react.useMemo(() => {
+  const dataAttributes = $670gB$react.useMemo(() => {
     const isDateHighlighted = dateToHighlight ? date$1.compare(dateToHighlight) === 0 : false;
     const isSelected = state.isSelected(date$1);
     const isDisabled = state.isCellDisabled(date$1);

package/dist/cjs/ripple/use-ripple.cjs

@@ -2,12 +2,12 @@
 "use client";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var nanoid = require('nanoid');
 
 const useRipple = () => {
-  const [ripples, setRipples] = react.useState([]);
-  const onPress = react.useCallback((event) => {
+  const [ripples, setRipples] = $670gB$react.useState([]);
+  const onPress = $670gB$react.useCallback((event) => {
     const trigger = event.target;
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     setRipples((prevRipples) => [
@@ -20,7 +20,7 @@ const useRipple = () => {
       }
     ]);
   }, []);
-  const onClear = react.useCallback((key) => {
+  const onClear = $670gB$react.useCallback((key) => {
     setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
   }, []);
   return { ripples, onPress, onClear };