{"version":3,"file":"root-DkZVJzK1.mjs","names":[],"sources":["../src/components/provider.tsx","../src/components/handle.tsx","../src/utils.ts","../src/components/image.tsx","../src/components/handle-root.tsx","../src/components/item.tsx","../src/components/root.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type PropsWithChildren, useContext } from 'react';\n\nimport type { UseReactCompareSliderReturn } from '../types';\n\nexport type ContextProps = UseReactCompareSliderReturn;\n\nconst Context = createContext(null);\n\nexport type ProviderProps = PropsWithChildren;\n\n/**\n * The root component of the slider - provides the state and event handlers for the slider components.\n */\nexport const Provider: React.FC = ({ children, ...value }) => {\n return {children};\n};\n\n/**\n * Access the state and event handlers of the slider - must be used within the `Provider` or `ReactCompareSlider` component.\n * @example\n * ```tsx\n * const { position, setPosition } = useReactCompareSliderContext();\n * ```\n */\nexport const useReactCompareSliderContext = (): ContextProps => {\n const context = useContext(Context);\n\n if (!context) {\n throw new Error('useReactCompareSliderContext must be used within the Provider component');\n }\n\n return context;\n};\n","'use client';\n\nimport type { ComponentProps, CSSProperties, FC } from 'react';\n\nimport { useReactCompareSliderContext } from './provider';\nimport { ReactCompareSliderCssVars } from '../consts';\n\ntype ThisArrowProps = {\n /** Whether to flip the arrow direction. */\n flip?: boolean;\n};\n\nconst ThisArrow: FC = ({ flip }) => {\n const style: CSSProperties = {\n width: '0.85rem',\n height: '0.85rem',\n clipPath: 'polygon(100% 0%, 100% 100%, 30% 50%)',\n rotate: flip ? '180deg' : '0deg',\n // We use `outline` instead of `border` to ensure that all line colours match in high contrast mode.\n outline: `0.5rem solid var(${ReactCompareSliderCssVars.handleColor})`,\n outlineOffset: '-0.5rem',\n };\n\n return
;\n};\n\n/** Props for `ReactCompareSliderHandle`. */\nexport type HandleProps = {\n /** Optional styles for the circular element in the middle of the handle. */\n buttonStyle?: CSSProperties;\n /** Optional styles for lines either side of the handle button. */\n linesStyle?: CSSProperties;\n};\n\nexport type HandleDetailedProps = ComponentProps<'div'> & HandleProps;\n\n/**\n * Default `handle` of the `ReactCompareSlider` component. This should be placed within the `HandleRoot`\n * component when building your own slider.\n */\nexport const Handle: FC = ({\n className = '__rcs-handle-root',\n buttonStyle,\n linesStyle,\n style,\n ...props\n}) => {\n const { disabled, portrait } = useReactCompareSliderContext();\n\n const appliedStyle = {\n boxSizing: 'border-box',\n position: 'relative',\n display: 'inline-flex',\n flexDirection: portrait ? 'row' : 'column',\n placeItems: 'center',\n width: portrait ? '100%' : undefined,\n height: portrait ? undefined : '100%',\n cursor: disabled ? 'not-allowed' : portrait ? 'ns-resize' : 'ew-resize',\n pointerEvents: 'none',\n [ReactCompareSliderCssVars.handleColor]: 'rgba(255, 255, 255, 1)',\n ...style,\n } as CSSProperties;\n\n const appliedLinesStyle: CSSProperties = {\n flexGrow: 1,\n height: portrait ? 2 : '100%',\n width: portrait ? '100%' : 2,\n // We use `outline` instead of `border` to ensure that all line colours match in high contrast mode.\n outline: `1px solid var(${ReactCompareSliderCssVars.handleColor})`,\n outlineOffset: -1,\n pointerEvents: 'auto',\n boxShadow: '0 0 4px rgba(0,0,0,.5)',\n ...linesStyle,\n };\n\n const appliedButtonStyle: CSSProperties = {\n // Prevents the arrows from pointing at each other in RTL.\n direction: 'ltr',\n display: 'grid',\n gridAutoFlow: 'column',\n gap: '0.5rem',\n placeContent: 'center',\n flexShrink: 0,\n width: '3.5rem',\n height: '3.5rem',\n borderRadius: '50%',\n border: `2px solid var(${ReactCompareSliderCssVars.handleColor})`,\n color: 'inherit',\n pointerEvents: 'auto',\n backdropFilter: 'blur(0.5rem)',\n WebkitBackdropFilter: 'blur(0.5rem)', // For Safari.\n backgroundColor: 'rgba(0, 0, 0, 0.125)',\n boxShadow: '0 0 4px rgba(0,0,0,.35)',\n transform: portrait ? 'rotate(90deg)' : undefined,\n ...buttonStyle,\n };\n\n return (\n
\n
\n
\n \n \n
\n
\n
\n );\n};\n","import type { CSSProperties } from 'react';\n\n/**\n * Stand-alone CSS utility to make replaced elements (`img`, `video`, etc.) fit their container.\n */\nexport const styleFitContainer = ({\n display = 'block',\n width = '100%',\n height = '100%',\n maxWidth = '100%',\n boxSizing = 'border-box',\n objectFit = 'cover',\n objectPosition = 'center center',\n ...props\n}: CSSProperties = {}): CSSProperties => ({\n display,\n width,\n height,\n maxWidth,\n boxSizing,\n objectFit,\n objectPosition,\n ...props,\n});\n","'use client';\n\nimport type { ComponentProps, FC } from 'react';\n\nimport { styleFitContainer } from '../utils';\n\nexport type ImageProps = ComponentProps<'img'>;\n\n/** `img` element with default styles applied by `styleFitContainer`. */\nexport const Image: FC = ({ alt, style, ...props }) => {\n const appliedStyle = styleFitContainer(style);\n\n return {alt};\n};\n","'use client';\n\nimport type { ComponentProps, CSSProperties, FC } from 'react';\n\nimport { EVENT_CAPTURE_PARAMS, useEventListener } from './internal-hooks';\nimport { useReactCompareSliderContext } from './provider';\nimport { ReactCompareSliderCssVars } from '../consts';\n\nexport type HandleRootProps = ComponentProps<'div'>;\n\n/** Container to control the handle's position. */\nexport const HandleRoot: FC = ({ style, ...props }) => {\n const { disabled, portrait, position, handleRootRef, onHandleRootClick, onHandleRootKeyDown } =\n useReactCompareSliderContext();\n\n const appliedStyle: CSSProperties = {\n WebkitAppearance: 'none',\n MozAppearance: 'none',\n WebkitTapHighlightColor: 'transparent',\n boxSizing: 'border-box',\n position: 'absolute',\n display: 'flex',\n flexDirection: portrait ? 'row' : 'column',\n placeItems: 'center',\n contain: 'layout',\n top: portrait ? '-50%' : undefined,\n left: portrait ? undefined : `-50%`,\n width: '100%',\n height: '100%',\n background: 'none',\n border: 0,\n padding: 0,\n pointerEvents: 'none',\n appearance: 'none',\n outline: 0,\n zIndex: 1,\n translate: portrait\n ? `0 var(${ReactCompareSliderCssVars.currentPosition}) 0`\n : `var(${ReactCompareSliderCssVars.currentPosition}) 0 0`,\n backfaceVisibility: 'hidden',\n willChange: 'translate',\n ...style,\n };\n\n useEventListener('keydown', onHandleRootKeyDown, handleRootRef.current, EVENT_CAPTURE_PARAMS);\n useEventListener('click', onHandleRootClick, handleRootRef.current, EVENT_CAPTURE_PARAMS);\n\n return (\n \n );\n};\n","'use client';\n\nimport type { ComponentProps, CSSProperties, FC } from 'react';\n\nimport { useReactCompareSliderContext } from './provider';\nimport {\n ReactCompareSliderClip,\n type ReactCompareSliderClipValue,\n ReactCompareSliderCssVars,\n} from '../consts';\nimport type { ReactCompareSliderProps } from '../types';\n\ntype GetClipPathProps = Pick & {\n itemClip?: Extract;\n};\n\nconst getClipPath = ({ itemClip, portrait }: GetClipPathProps): CSSProperties['clipPath'] => {\n if (itemClip === ReactCompareSliderClip.itemOne) {\n return portrait\n ? `inset(0px 0px calc(100% - var(${ReactCompareSliderCssVars.currentPosition})) 0px)`\n : `inset(0px calc(100% - var(${ReactCompareSliderCssVars.currentPosition})) 0px 0px)`;\n }\n\n if (itemClip === ReactCompareSliderClip.itemTwo) {\n return portrait\n ? `inset(var(${ReactCompareSliderCssVars.currentPosition}) 0px 0px 0px)`\n : `inset(0px 0px 0px var(${ReactCompareSliderCssVars.currentPosition}))`;\n }\n\n return 'none';\n};\n\nexport type ItemsProps = ComponentProps<'div'> & {\n item?: Extract;\n};\n\n/**\n * Container for `itemOne` and `itemTwo`.\n */\nexport const Item: FC = ({ item, style, ...props }) => {\n const { clip, portrait } = useReactCompareSliderContext();\n\n const shouldClip = clip === ReactCompareSliderClip.all || clip === item;\n const itemClip = shouldClip ? item : undefined;\n\n const appliedStyle: CSSProperties = {\n KhtmlUserSelect: 'none',\n MozUserSelect: 'none',\n WebkitUserSelect: 'none',\n backfaceVisibility: 'hidden',\n WebkitBackfaceVisibility: 'hidden',\n gridArea: '1 / 1',\n maxWidth: '100%',\n overflow: 'hidden',\n clipPath: getClipPath({ itemClip, portrait }),\n boxSizing: 'border-box',\n transform: 'translateZ(0)',\n userSelect: 'none',\n zIndex: item === ReactCompareSliderClip.itemOne ? 1 : undefined,\n willChange: 'clip-path',\n ...style,\n };\n\n return
;\n};\n","'use client';\n\nimport type { ComponentProps, CSSProperties, FC } from 'react';\nimport { useEffect } from 'react';\n\nimport { EVENT_CAPTURE_PARAMS, EVENT_PASSIVE_PARAMS, useEventListener } from './internal-hooks';\nimport { useReactCompareSliderContext } from './provider';\nimport { ReactCompareSliderCssVars } from '../consts';\n\nexport type RootProps = ComponentProps<'div'>;\n\nconst currentPositionCssValue = `clamp(var(${ReactCompareSliderCssVars.boundsPadding}), var(${ReactCompareSliderCssVars.rawPosition}) - var(${ReactCompareSliderCssVars.boundsPadding}) + var(${ReactCompareSliderCssVars.boundsPadding}), calc(100% - var(${ReactCompareSliderCssVars.boundsPadding})))`;\n\n/**\n * The root container of the slider.\n */\nexport const Root: FC = ({ style, ...props }) => {\n const {\n browsingContext,\n boundsPadding,\n changePositionOnHover,\n clip,\n isDragging,\n portrait,\n position,\n onTouchEnd,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n interactiveTarget,\n rootRef,\n transition,\n canTransition,\n } = useReactCompareSliderContext();\n\n const appliedStyle = {\n position: 'relative',\n boxSizing: 'border-box',\n display: 'grid',\n maxWidth: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n cursor: isDragging ? (portrait ? 'ns-resize' : 'ew-resize') : undefined,\n touchAction: 'pan-y',\n userSelect: 'none',\n KhtmlUserSelect: 'none',\n msUserSelect: 'none',\n MozUserSelect: 'none',\n WebkitUserSelect: 'none',\n /**\n * The transition is on the root because this is where `--rcs-raw-position` is set.\n * With the `@property` registration in the hook, the browser interpolates the variable itself, so children\n * that reference it via `var()` see smooth intermediate values without needing their own transitions.\n * This improves performance and prevents Safari from desyncing independent transitions on separate elements.\n */\n transition:\n canTransition && transition ? `${ReactCompareSliderCssVars.rawPosition} ${transition}` : 'none',\n [ReactCompareSliderCssVars.rawPosition]: `${position.current}%`,\n [ReactCompareSliderCssVars.boundsPadding]: boundsPadding,\n [ReactCompareSliderCssVars.currentPosition]: currentPositionCssValue,\n ...style,\n } as CSSProperties;\n\n useEventListener('touchend', onTouchEnd, interactiveTarget, EVENT_CAPTURE_PARAMS);\n useEventListener('pointerdown', onPointerDown, interactiveTarget, EVENT_CAPTURE_PARAMS);\n\n // Handle hover events on the container.\n useEffect(() => {\n const containerRef = rootRef.current as HTMLDivElement;\n\n const handlePointerLeave = (ev: PointerEvent): void => {\n if (isDragging) return;\n onPointerUp(ev);\n };\n\n if (changePositionOnHover) {\n containerRef.addEventListener('pointermove', onPointerMove, EVENT_PASSIVE_PARAMS);\n containerRef.addEventListener('pointerleave', handlePointerLeave, EVENT_PASSIVE_PARAMS);\n }\n\n return () => {\n containerRef.removeEventListener('pointermove', onPointerMove);\n containerRef.removeEventListener('pointerleave', handlePointerLeave);\n };\n }, [changePositionOnHover, onPointerMove, onPointerUp, isDragging, rootRef]);\n\n // Allow drag outside of container while pointer is still down.\n useEffect(() => {\n if (!isDragging) return;\n\n browsingContext.addEventListener('pointermove', onPointerMove, EVENT_PASSIVE_PARAMS);\n browsingContext.addEventListener('pointerup', onPointerUp, EVENT_PASSIVE_PARAMS);\n\n return () => {\n browsingContext?.removeEventListener('pointermove', onPointerMove);\n browsingContext?.removeEventListener('pointerup', onPointerUp);\n };\n }, [onPointerMove, onPointerUp, isDragging, browsingContext]);\n\n return
;\n};\n"],"mappings":"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"}