@masaraxui/react 1.0.0

package/dist/components/range-calendar/index.js

@@ -0,0 +1,29 @@
+"use strict";
+import { CalendarYearPickerCell, CalendarYearPickerGridBody, CalendarYearPickerGrid, CalendarYearPickerTriggerIndicator, CalendarYearPickerTriggerHeading, CalendarYearPickerTrigger } from '../calendar-year-picker/calendar-year-picker.js';
+export { YearPickerContext, YearPickerStateContext, useYearPicker, useYearPickerState } from '../calendar-year-picker/year-picker-context.js';
+export { rangeCalendarVariants } from '@masaraxui/styles';
+import { RangeCalendarRoot, RangeCalendarCellIndicator, RangeCalendarCell, RangeCalendarHeaderCell, RangeCalendarGridBody, RangeCalendarGridHeader, RangeCalendarGrid, RangeCalendarNavButton, RangeCalendarHeading, RangeCalendarHeader } from './range-calendar.js';
+
+/* -------------------------------------------------------------------------------------------------
+| * Compound Component
+| * -----------------------------------------------------------------------------------------------*/
+const RangeCalendar = Object.assign(RangeCalendarRoot, {
+  Root: RangeCalendarRoot,
+  Header: RangeCalendarHeader,
+  Heading: RangeCalendarHeading,
+  NavButton: RangeCalendarNavButton,
+  Grid: RangeCalendarGrid,
+  GridHeader: RangeCalendarGridHeader,
+  GridBody: RangeCalendarGridBody,
+  HeaderCell: RangeCalendarHeaderCell,
+  Cell: RangeCalendarCell,
+  CellIndicator: RangeCalendarCellIndicator,
+  YearPickerTrigger: CalendarYearPickerTrigger,
+  YearPickerTriggerHeading: CalendarYearPickerTriggerHeading,
+  YearPickerTriggerIndicator: CalendarYearPickerTriggerIndicator,
+  YearPickerGrid: CalendarYearPickerGrid,
+  YearPickerGridBody: CalendarYearPickerGridBody,
+  YearPickerCell: CalendarYearPickerCell
+});
+
+export { RangeCalendar, RangeCalendarCell, RangeCalendarCellIndicator, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHeader, RangeCalendarHeader, RangeCalendarHeaderCell, RangeCalendarHeading, RangeCalendarNavButton, RangeCalendarRoot };

package/dist/components/range-calendar/range-calendar.d.ts

@@ -0,0 +1,71 @@
+import type { RangeCalendarVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { DateValue } from "react-aria-components";
+import { Button as ButtonPrimitive, CalendarCell as CalendarCellPrimitive, CalendarGridBody as CalendarGridBodyPrimitive, CalendarGridHeader as CalendarGridHeaderPrimitive, CalendarGrid as CalendarGridPrimitive, CalendarHeaderCell as CalendarHeaderCellPrimitive, Heading as HeadingPrimitive, RangeCalendar as RangeCalendarPrimitive } from "react-aria-components";
+interface RangeCalendarRootProps<T extends DateValue = DateValue> extends ComponentPropsWithRef<typeof RangeCalendarPrimitive<T>>, RangeCalendarVariants {
+    isYearPickerOpen?: boolean;
+    onYearPickerOpenChange?: (isYearPickerOpen: boolean) => void;
+    defaultYearPickerOpen?: boolean;
+}
+declare function RangeCalendarRoot<T extends DateValue = DateValue>({ children, className, defaultYearPickerOpen: defaultYearPickerOpenProp, isYearPickerOpen: isYearPickerOpenProp, maxValue: maxValueProp, minValue: minValueProp, onYearPickerOpenChange: onYearPickerOpenChangeProp, ...rest }: RangeCalendarRootProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace RangeCalendarRoot {
+    var displayName: string;
+}
+interface RangeCalendarHeaderProps extends ComponentPropsWithRef<"header"> {
+    className?: string;
+}
+declare const RangeCalendarHeader: {
+    ({ children, className, ...props }: RangeCalendarHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarHeadingProps extends ComponentPropsWithRef<typeof HeadingPrimitive> {
+}
+declare const RangeCalendarHeading: {
+    ({ className, ...props }: RangeCalendarHeadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarNavButtonProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+    slot?: "previous" | "next";
+}
+declare const RangeCalendarNavButton: {
+    ({ children, className, slot, ...props }: RangeCalendarNavButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarGridProps extends ComponentPropsWithRef<typeof CalendarGridPrimitive> {
+}
+declare const RangeCalendarGrid: {
+    ({ children, className, weekdayStyle, ...props }: RangeCalendarGridProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarGridHeaderProps extends ComponentPropsWithRef<typeof CalendarGridHeaderPrimitive> {
+}
+declare const RangeCalendarGridHeader: {
+    ({ className, ...props }: RangeCalendarGridHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarGridBodyProps extends ComponentPropsWithRef<typeof CalendarGridBodyPrimitive> {
+}
+declare const RangeCalendarGridBody: {
+    ({ className, ...props }: RangeCalendarGridBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarHeaderCellProps extends ComponentPropsWithRef<typeof CalendarHeaderCellPrimitive> {
+}
+declare const RangeCalendarHeaderCell: {
+    ({ className, ...props }: RangeCalendarHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarCellProps extends ComponentPropsWithRef<typeof CalendarCellPrimitive> {
+}
+declare const RangeCalendarCell: {
+    ({ children, className, ...props }: RangeCalendarCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RangeCalendarCellIndicatorProps extends ComponentPropsWithRef<"span"> {
+}
+declare const RangeCalendarCellIndicator: {
+    ({ className, ...props }: RangeCalendarCellIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { RangeCalendarRoot, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNavButton, RangeCalendarGrid, RangeCalendarGridHeader, RangeCalendarGridBody, RangeCalendarHeaderCell, RangeCalendarCell, RangeCalendarCellIndicator, };
+export type { RangeCalendarRootProps, RangeCalendarHeaderProps, RangeCalendarHeadingProps, RangeCalendarNavButtonProps, RangeCalendarGridProps, RangeCalendarGridHeaderProps, RangeCalendarGridBodyProps, RangeCalendarHeaderCellProps, RangeCalendarCellProps, RangeCalendarCellIndicatorProps, };

package/dist/components/range-calendar/range-calendar.js

@@ -0,0 +1,298 @@
+"use client";
+import { rangeCalendarVariants } from '@masaraxui/styles';
+import { DateFormatter, createCalendar, CalendarDate } from '@internationalized/date';
+import { useControlledState } from '@react-stately/utils';
+import React__default, { createContext, useContext } from 'react';
+import { useLocale, RangeCalendar, CalendarCell, CalendarHeaderCell, CalendarGridBody, CalendarGridHeader, CalendarGrid, Button, Heading, RangeCalendarStateContext } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { getGregorianYearOffset } from '../../utils/calendar.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { YearPickerContext, YearPickerStateContext } from '../calendar-year-picker/year-picker-context.js';
+import { IconChevronLeft, IconChevronRight } from '../icons.js';
+import { jsx } from 'react/jsx-runtime';
+
+const RangeCalendarContext = /*#__PURE__*/createContext({});
+const RangeCalendarYearPickerStateBridge = ({
+  children
+}) => {
+  const state = React__default.useContext(RangeCalendarStateContext);
+  if (!state) {
+    throw new Error("RangeCalendar year picker state must be used within <RangeCalendar>.");
+  }
+  const yearPickerStateValue = {
+    focusedDate: state.focusedDate,
+    maxValue: state.maxValue,
+    minValue: state.minValue,
+    setFocusedDate: value => state.setFocusedDate(value),
+    timeZone: state.timeZone
+  };
+  return /*#__PURE__*/jsx(YearPickerStateContext, {
+    value: yearPickerStateValue,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Root
+| * -----------------------------------------------------------------------------------------------*/
+
+function RangeCalendarRoot({
+  children,
+  className,
+  defaultYearPickerOpen: defaultYearPickerOpenProp = false,
+  isYearPickerOpen: isYearPickerOpenProp,
+  maxValue: maxValueProp,
+  minValue: minValueProp,
+  onYearPickerOpenChange: onYearPickerOpenChangeProp,
+  ...rest
+}) {
+  const {
+    locale
+  } = useLocale();
+  const slots = React__default.useMemo(() => rangeCalendarVariants(), []);
+  const calendarRef = React__default.useRef(null);
+  const [isYearPickerOpen, setIsYearPickerOpen] = useControlledState(isYearPickerOpenProp, defaultYearPickerOpenProp, onYearPickerOpenChangeProp);
+  const calendarProp = React__default.useMemo(() => {
+    const calendarIdentifier = new DateFormatter(locale).resolvedOptions().calendar;
+    return createCalendar(calendarIdentifier);
+  }, [locale]);
+  const gregorianYearOffset = React__default.useMemo(() => getGregorianYearOffset(calendarProp.identifier), [calendarProp.identifier]);
+  const minValue = minValueProp ?? new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1);
+  const maxValue = maxValueProp ?? new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31);
+  return /*#__PURE__*/jsx(YearPickerContext, {
+    value: {
+      calendarGridSlot: "range-calendar-grid",
+      isYearPickerOpen,
+      setIsYearPickerOpen,
+      calendarRef
+    },
+    children: /*#__PURE__*/jsx(RangeCalendarContext, {
+      value: {
+        slots
+      },
+      children: /*#__PURE__*/jsx(RangeCalendar, {
+        ref: calendarRef,
+        "data-slot": "range-calendar",
+        maxValue: maxValue,
+        minValue: minValue,
+        ...rest,
+        className: composeTwRenderProps(className, slots.base()),
+        children: values => /*#__PURE__*/jsx(RangeCalendarYearPickerStateBridge, {
+          children: typeof children === "function" ? children(values) : children
+        })
+      })
+    })
+  });
+}
+RangeCalendarRoot.displayName = "MasaraxUI.RangeCalendar";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Header
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx("header", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "range-calendar-header",
+    ...props,
+    children: children
+  });
+};
+RangeCalendarHeader.displayName = "MasaraxUI.RangeCalendar.Header";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Heading
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarHeading = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(Heading, {
+    "data-slot": "range-calendar-heading",
+    ...props,
+    className: composeSlotClassName(slots?.heading, className)
+  });
+};
+RangeCalendarHeading.displayName = "MasaraxUI.RangeCalendar.Heading";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Nav Button
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarNavButton = ({
+  children,
+  className,
+  slot,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(Button, {
+    "data-slot": "range-calendar-nav-button",
+    slot: slot,
+    ...props,
+    className: composeTwRenderProps(className, slots?.navButton()),
+    children: children || (slot === "previous" ? /*#__PURE__*/jsx(IconChevronLeft, {
+      className: slots?.navButtonIcon(),
+      "data-slot": "range-calendar-nav-button-icon"
+    }) : /*#__PURE__*/jsx(IconChevronRight, {
+      className: slots?.navButtonIcon(),
+      "data-slot": "range-calendar-nav-button-icon"
+    }))
+  });
+};
+RangeCalendarNavButton.displayName = "MasaraxUI.RangeCalendar.NavButton";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Grid
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarGrid = ({
+  children,
+  className,
+  weekdayStyle = "short",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarGrid, {
+    "data-slot": "range-calendar-grid",
+    weekdayStyle: weekdayStyle,
+    ...props,
+    className: composeSlotClassName(slots?.grid, className),
+    children: children
+  });
+};
+RangeCalendarGrid.displayName = "MasaraxUI.RangeCalendar.Grid";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Grid Header
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarGridHeader = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarGridHeader, {
+    "data-slot": "range-calendar-grid-header",
+    ...props,
+    className: composeSlotClassName(slots?.gridHeader, className)
+  });
+};
+RangeCalendarGridHeader.displayName = "MasaraxUI.RangeCalendar.GridHeader";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Grid Body
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarGridBody = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarGridBody, {
+    "data-slot": "range-calendar-grid-body",
+    ...props,
+    className: composeSlotClassName(slots?.gridBody, className)
+  });
+};
+RangeCalendarGridBody.displayName = "MasaraxUI.RangeCalendar.GridBody";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Header Cell
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarHeaderCell = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarHeaderCell, {
+    "data-slot": "range-calendar-header-cell",
+    ...props,
+    className: composeSlotClassName(slots?.headerCell, className)
+  });
+};
+RangeCalendarHeaderCell.displayName = "MasaraxUI.RangeCalendar.HeaderCell";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Cell
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarCell = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarCell, {
+    "data-slot": "range-calendar-cell",
+    ...props,
+    className: composeTwRenderProps(className, slots?.cell()),
+    children: values => {
+      const {
+        formattedDate,
+        isDisabled,
+        isHovered,
+        isPressed,
+        isSelectionEnd,
+        isSelectionStart
+      } = values;
+      const content = typeof children === "function" ? children(values) : children || formattedDate;
+      return /*#__PURE__*/jsx("span", {
+        className: "range-calendar__cell-button",
+        "data-disabled": dataAttr(isDisabled),
+        "data-hovered": dataAttr(isHovered),
+        "data-pressed": dataAttr(isPressed),
+        "data-selected": dataAttr(isSelectionStart || isSelectionEnd),
+        "data-slot": "range-calendar-cell-button",
+        children: content
+      });
+    }
+  });
+};
+RangeCalendarCell.displayName = "MasaraxUI.RangeCalendar.Cell";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Cell Indicator
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarCellIndicator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.cellIndicator, className),
+    "data-slot": "range-calendar-cell-indicator",
+    ...props
+  });
+};
+RangeCalendarCellIndicator.displayName = "MasaraxUI.RangeCalendar.CellIndicator";
+
+export { RangeCalendarCell, RangeCalendarCellIndicator, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHeader, RangeCalendarHeader, RangeCalendarHeaderCell, RangeCalendarHeading, RangeCalendarNavButton, RangeCalendarRoot };

package/dist/components/scroll-shadow/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { ScrollShadowRoot } from "./scroll-shadow";
+export declare const ScrollShadow: {
+    ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: import("./scroll-shadow").ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: import("./scroll-shadow").ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type ScrollShadow = {
+    Props: ComponentProps<typeof ScrollShadowRoot>;
+    RootProps: ComponentProps<typeof ScrollShadowRoot>;
+};
+export { ScrollShadowRoot };
+export type { ScrollShadowRootProps, ScrollShadowRootProps as ScrollShadowProps, ScrollShadowVisibility, } from "./scroll-shadow";
+export { scrollShadowVariants } from "@masaraxui/styles";
+export type { ScrollShadowVariants } from "@masaraxui/styles";
+export { useScrollShadow } from "./use-scroll-shadow";
+export type { UseScrollShadowProps } from "./use-scroll-shadow";

package/dist/components/scroll-shadow/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ScrollShadowRoot } from './scroll-shadow.js';
+export { scrollShadowVariants } from '@masaraxui/styles';
+export { useScrollShadow } from './use-scroll-shadow.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Component
+ * -----------------------------------------------------------------------------------------------*/
+const ScrollShadow = Object.assign(ScrollShadowRoot, {
+  Root: ScrollShadowRoot
+});
+
+export { ScrollShadow, ScrollShadowRoot };

package/dist/components/scroll-shadow/scroll-shadow.d.ts

@@ -0,0 +1,32 @@
+import type { ScrollShadowVariants } from "@masaraxui/styles";
+export type ScrollShadowVisibility = "auto" | "both" | "top" | "bottom" | "left" | "right" | "none";
+export interface ScrollShadowRootProps extends Omit<React.ComponentProps<"div">, "size">, ScrollShadowVariants {
+    /**
+     * The shadow size in pixels
+     * @default 40
+     */
+    size?: number;
+    /**
+     * The scroll offset before showing shadows (in pixels)
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Controlled shadow visibility state
+     * @default "auto"
+     */
+    visibility?: ScrollShadowVisibility;
+    /**
+     * Whether scroll shadow detection is enabled
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Callback invoked when shadow visibility changes
+     */
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+}
+export declare const ScrollShadowRoot: {
+    ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/scroll-shadow/scroll-shadow.js

@@ -0,0 +1,76 @@
+"use client";
+import { scrollShadowVariants } from '@masaraxui/styles';
+import { mergeRefs } from '@react-aria/utils';
+import { useRef, useMemo } from 'react';
+import { useSafeLayoutEffect } from '../../hooks/use-safe-layout-effect.js';
+import { useScrollShadow } from './use-scroll-shadow.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ScrollShadowRoot = ({
+  children,
+  className,
+  hideScrollBar = false,
+  isEnabled = true,
+  offset = 0,
+  onVisibilityChange,
+  orientation = "vertical",
+  ref,
+  size = 40,
+  variant = "fade",
+  visibility = "auto",
+  ...props
+}) => {
+  const internalRef = useRef(null);
+  useScrollShadow({
+    containerRef: internalRef,
+    isEnabled,
+    offset,
+    onVisibilityChange,
+    orientation,
+    visibility
+  });
+
+  // Handle controlled visibility mode
+  useSafeLayoutEffect(() => {
+    const el = internalRef.current;
+    if (!el || visibility === "auto") return;
+
+    // Clear all data attributes
+    delete el.dataset["topScroll"];
+    delete el.dataset["bottomScroll"];
+    delete el.dataset["topBottomScroll"];
+    delete el.dataset["leftScroll"];
+    delete el.dataset["rightScroll"];
+    delete el.dataset["leftRightScroll"];
+
+    // Set controlled visibility
+    if (visibility === "both") {
+      el.dataset[orientation === "vertical" ? "topBottomScroll" : "leftRightScroll"] = "true";
+    } else if (visibility !== "none") {
+      el.dataset[`${visibility}Scroll`] = "true";
+    }
+  }, [visibility, orientation]);
+  const slots = useMemo(() => scrollShadowVariants({
+    hideScrollBar,
+    orientation,
+    variant
+  }), [orientation, hideScrollBar, variant]);
+  return /*#__PURE__*/jsx("div", {
+    ref: mergeRefs(internalRef, ref),
+    className: slots.base({
+      className
+    }),
+    "data-orientation": orientation,
+    "data-scroll-shadow-size": size,
+    style: {
+      // @ts-expect-error - CSS variables are not typed
+      "--scroll-shadow-size": `${size}px`,
+      ...props.style
+    },
+    ...props,
+    children: children
+  });
+};
+ScrollShadowRoot.displayName = "MasaraxUI.ScrollShadow";
+
+export { ScrollShadowRoot };

package/dist/components/scroll-shadow/use-scroll-shadow.d.ts

@@ -0,0 +1,11 @@
+import type { ScrollShadowVisibility } from "./scroll-shadow";
+import type { RefObject } from "react";
+export interface UseScrollShadowProps {
+    containerRef: RefObject<HTMLElement>;
+    orientation: "vertical" | "horizontal";
+    offset: number;
+    visibility: ScrollShadowVisibility;
+    isEnabled: boolean;
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+}
+export declare const useScrollShadow: (props: UseScrollShadowProps) => void;

package/dist/components/scroll-shadow/use-scroll-shadow.js

@@ -0,0 +1,121 @@
+"use strict";
+import { useRef, useCallback, useEffect } from 'react';
+
+const useScrollShadow = props => {
+  const {
+    containerRef,
+    isEnabled,
+    offset,
+    onVisibilityChange,
+    orientation,
+    visibility
+  } = props;
+
+  // Cache previous state to avoid unnecessary DOM updates
+  const prevStateRef = useRef(null);
+
+  // Track pending RAF to avoid multiple scheduled updates
+  const rafIdRef = useRef(null);
+  const checkOverflow = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const isVertical = orientation === "vertical";
+    const scrollStart = isVertical ? el.scrollTop : el.scrollLeft;
+    const scrollSize = isVertical ? el.scrollHeight : el.scrollWidth;
+    const clientSize = isVertical ? el.clientHeight : el.clientWidth;
+    const hasScrollBefore = scrollStart > offset;
+    const hasScrollAfter = scrollStart + clientSize + offset < scrollSize;
+
+    // Skip DOM updates if state hasn't changed
+    const prevState = prevStateRef.current;
+    if (prevState && prevState.hasScrollBefore === hasScrollBefore && prevState.hasScrollAfter === hasScrollAfter) {
+      return;
+    }
+
+    // Update state cache
+    prevStateRef.current = {
+      hasScrollBefore,
+      hasScrollAfter
+    };
+
+    // Cancel previous pending update
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    // Batch DOM updates with RAF for better performance
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      if (isVertical) {
+        if (hasScrollBefore && hasScrollAfter) {
+          el.dataset["topBottomScroll"] = "true";
+          delete el.dataset["topScroll"];
+          delete el.dataset["bottomScroll"];
+          onVisibilityChange?.("both");
+        } else {
+          el.dataset["topScroll"] = String(hasScrollBefore);
+          el.dataset["bottomScroll"] = String(hasScrollAfter);
+          delete el.dataset["topBottomScroll"];
+          if (onVisibilityChange) {
+            if (hasScrollBefore) {
+              onVisibilityChange("top");
+            } else if (hasScrollAfter) {
+              onVisibilityChange("bottom");
+            } else {
+              onVisibilityChange("none");
+            }
+          }
+        }
+      } else {
+        if (hasScrollBefore && hasScrollAfter) {
+          el.dataset["leftRightScroll"] = "true";
+          delete el.dataset["leftScroll"];
+          delete el.dataset["rightScroll"];
+          onVisibilityChange?.("both");
+        } else {
+          el.dataset["leftScroll"] = String(hasScrollBefore);
+          el.dataset["rightScroll"] = String(hasScrollAfter);
+          delete el.dataset["leftRightScroll"];
+          if (onVisibilityChange) {
+            if (hasScrollBefore) {
+              onVisibilityChange("left");
+            } else if (hasScrollAfter) {
+              onVisibilityChange("right");
+            } else {
+              onVisibilityChange("none");
+            }
+          }
+        }
+      }
+    });
+  }, [containerRef, orientation, offset, onVisibilityChange]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !isEnabled || visibility !== "auto") return;
+
+    // Initial check
+    checkOverflow();
+
+    // Use passive listener for better scroll performance
+    el.addEventListener("scroll", checkOverflow, {
+      passive: true
+    });
+
+    // Monitor size changes
+    const resizeObserver = new ResizeObserver(checkOverflow);
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", checkOverflow);
+      resizeObserver.disconnect();
+
+      // Cancel pending RAF and cleanup cache
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      prevStateRef.current = null;
+    };
+  }, [containerRef, visibility, isEnabled, checkOverflow]);
+};
+
+export { useScrollShadow };