@hanamura/react-containers/dist/src/components/Reel.js

Flexible container components for React

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useAdaptiveContainer, normalizeSpacingValue, } from '../core';
/**
 * Reel component - creates a horizontally scrollable container
 *
 * Features:
 * - Horizontal scrolling with customizable behavior
 * - Optional scroll snapping
 * - Configurable gap between items
 * - Optional scrollbar visibility control
 * - Responsive settings based on breakpoints
 * - Customizable HTML element via 'as' prop
 */
export function Reel({ children, options, queries, adaptiveOptions, className, style, as = 'div', ...rest }) {
    // Get the current options based on active breakpoint
    const { options: mergedOptions } = useAdaptiveContainer(options, queries, adaptiveOptions);
    // Create the base style for the reel container
    const containerStyle = {
        display: 'grid',
        gridAutoFlow: 'column',
        gridAutoColumns: typeof mergedOptions.columns === 'number'
            ? `calc((100% - ${normalizeSpacingValue(mergedOptions.gap) ?? '0px'} * ${mergedOptions.columns - 1}) / ${mergedOptions.columns})`
            : mergedOptions.columns,
        gap: normalizeSpacingValue(mergedOptions.gap) ?? 0,
        paddingInline: normalizeSpacingValue(mergedOptions.paddingInline),
        paddingBlock: normalizeSpacingValue(mergedOptions.paddingBlock),
        overflow: 'auto',
        overflowX: 'auto',
        overflowY: 'hidden',
        scrollbarWidth: mergedOptions.hideScrollbar ? 'none' : 'auto',
        msOverflowStyle: mergedOptions.hideScrollbar ? 'none' : 'auto',
        scrollSnapType: mergedOptions.snap !== 'none' && mergedOptions.snap
            ? `x ${mergedOptions.snap}`
            : undefined,
        WebkitOverflowScrolling: 'touch',
        ...style,
    };
    // Webkit scrollbar hiding is handled via CSS classes or external styling
    // as direct style assignment for pseudo-elements doesn't work in React
    const Component = as;
    return (_jsx(Component, { className: className, style: containerStyle, ...rest, children: children }));
}
//# sourceMappingURL=Reel.js.map