@particle-network/ui-react 0.5.0-beta.1 → 0.5.0

package/dist/components/UXSlider/use-slider-thumb.js

@@ -0,0 +1,79 @@
+import { useRef } from "react";
+import { useDOMRef } from "@heroui/react-utils";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { useFocusRing } from "@react-aria/focus";
+import { useNumberFormatter } from "@react-aria/i18n";
+import { useHover, usePress } from "@react-aria/interactions";
+import { useSliderThumb } from "@react-aria/slider";
+import { bgWithTextColorClasses } from "../../utils/classes.js";
+function use_slider_thumb_useSliderThumb(props) {
+    const { ref, as, state, index, name, trackRef, className, tooltipProps, isVertical, showTooltip, getTooltipValue, formatOptions, renderThumb, ...otherProps } = props;
+    const Component = as || 'div';
+    const domRef = useDOMRef(ref);
+    const inputRef = useRef(null);
+    const numberFormatter = useNumberFormatter(formatOptions);
+    const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb({
+        index,
+        trackRef,
+        inputRef,
+        name,
+        ...otherProps
+    }, state);
+    const { hoverProps, isHovered } = useHover({
+        isDisabled: state.isDisabled
+    });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const { pressProps, isPressed } = usePress({
+        isDisabled: state.isDisabled
+    });
+    const getThumbProps = (props = {})=>({
+            ref: domRef,
+            'data-slot': 'thumb',
+            'data-hover': dataAttr(isHovered),
+            'data-pressed': dataAttr(isPressed),
+            'data-dragging': dataAttr(isDragging),
+            'data-focused': dataAttr(isFocused),
+            'data-focus-visible': dataAttr(isFocusVisible),
+            'aria-label': props['aria-label'] || `Slider thumb ${void 0 !== index ? `${index + 1}` : ''}`,
+            ...mergeProps(thumbProps, pressProps, hoverProps, otherProps),
+            className,
+            ...props
+        });
+    const getTooltipProps = ()=>{
+        const stateValue = tooltipProps?.content ? tooltipProps.content : getTooltipValue ? 1 === state.values.length ? getTooltipValue(state.values[index ?? 0]) : getTooltipValue(state.values, index ?? 0) : state.values[index ?? 0];
+        const value = numberFormatter && 'number' == typeof stateValue ? numberFormatter.format(stateValue) : stateValue;
+        return {
+            ...tooltipProps,
+            placement: tooltipProps?.placement ? tooltipProps?.placement : isVertical ? 'right' : 'top',
+            content: tooltipProps?.content ? tooltipProps?.content : value,
+            updatePositionDeps: [
+                isDragging,
+                isHovered,
+                isFocused,
+                isFocusVisible,
+                value
+            ],
+            isOpen: tooltipProps?.isOpen !== void 0 ? tooltipProps?.isOpen : isHovered || isDragging || isFocused || isFocusVisible,
+            role: 'tooltip',
+            'aria-label': `Current value: ${value}`,
+            classNames: {
+                content: bgWithTextColorClasses[tooltipProps?.color]
+            }
+        };
+    };
+    const getInputProps = (props = {})=>({
+            ref: inputRef,
+            ...mergeProps(inputProps, focusProps),
+            ...props
+        });
+    return {
+        Component,
+        index,
+        showTooltip,
+        renderThumb,
+        getThumbProps,
+        getTooltipProps,
+        getInputProps
+    };
+}
+export { use_slider_thumb_useSliderThumb as useSliderThumb };

package/dist/components/UXSlider/use-slider.d.ts

@@ -0,0 +1,182 @@
+import type React from 'react';
+import { type ReactNode } from 'react';
+import type { ReactRef } from '@heroui/react-utils';
+import type { DOMAttributes, HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import type { SliderSlots, SliderVariantProps, SlotsToClasses } from '@heroui/theme';
+import type { TooltipProps } from '@heroui/tooltip';
+import type { AriaSliderProps } from '@react-aria/slider';
+import type { ValueBase } from '@react-types/shared';
+import type { SliderThumbProps } from './slider-thumb';
+export type SliderValue = number | number[];
+export interface SliderStepMark {
+    value: number;
+    label: string;
+}
+export type SliderRenderThumbProps = DOMAttributes<HTMLDivElement> & {
+    index?: number;
+};
+interface Props extends HTMLHeroUIProps {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    /**
+     * The content to display as the label.
+     */
+    label?: ReactNode;
+    /**
+     * The input name.
+     */
+    name?: string;
+    /**
+     * The offset from which to start the fill.
+     */
+    fillOffset?: number;
+    /**
+     * The display format of the value label.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * The display format of the tooltip value label.
+     * @default formatOptions
+     */
+    tooltipValueFormatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Whether to show the step indicators.
+     * @default false
+     */
+    showSteps?: boolean;
+    /**
+     * Whether to show step indicators at mark positions.
+     * @default true
+     */
+    showMarksSteps?: boolean;
+    /**
+     * Whether the thumbs should have a tooltip with the value on hover the slider.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Custom steps labels.
+     * @example [{value: 0, label: "0"}, {value: 50, label: "50"}, {value: 100, label: "100"}]
+     * @default []
+     */
+    marks?: SliderStepMark[];
+    /**
+     * Element to be rendered in the start side of the slider.
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Element to be rendered in the end side of the slider.
+     */
+    endContent?: React.ReactNode;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Slider classNames={{
+     *    base:"base-classes",
+     *    step: "step-classes",
+     *    labelWrapper: "label-wrapper-classes",
+     *    label: "label-classes",
+     *    value: "value-classes",
+     *    trackWrapper: "track-wrapper-classes",
+     *    track: "track-classes",
+     *    filler: "filler-classes",
+     *    thumb: "thumb-classes",
+     *    mark: "mark-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<SliderSlots>;
+    /**
+     * Tooltip props.
+     * @see [Tooltip](https://heroui.com/components/tooltip) for more details.
+     * @default {
+     *  offset: 15,
+     *  delay: 0,
+     *  size: "sm",
+     *  showArrow: true,
+     *  placement: "top", // "right" for vertical slider
+     *  content: [sliderValue],
+     *  color: sliderProps?.color, // same as the slider color
+     *  isDisabled: sliderProps?.isDisabled,
+     * }
+     */
+    tooltipProps?: Partial<TooltipProps>;
+    /**
+     * A function that returns the content to display as the value label.
+     * Overrides default formatted number.
+     */
+    getValue?: (value: SliderValue) => string;
+    /**
+     * A function that returns the content to display as the tooltip label. (in analogy to getValue)
+     * @param value - The value of the slider, array or single number.
+     * @param index - The index of the thumb, if multiple thumbs are used.
+     * In addition to formatting with tooltipValueFormatOptions if number is returned.
+     */
+    getTooltipValue?: (value: SliderValue, index?: number) => string | number;
+    /**
+     * Function to render the label.
+     */
+    renderLabel?: (props: DOMAttributes<HTMLLabelElement>) => React.ReactNode;
+    /**
+     * Function to render the value label.
+     */
+    renderValue?: (props: DOMAttributes<HTMLOutputElement>) => React.ReactNode;
+    /**
+     * Function to render the thumb. It can be used to add a tooltip or custom icon.
+     */
+    renderThumb?: (props: SliderRenderThumbProps) => React.ReactNode;
+}
+export type UseSliderProps = Omit<Props, keyof ValueBase<SliderValue>> & AriaSliderProps & SliderVariantProps;
+export declare function useSlider(originalProps: UseSliderProps): {
+    Component: import("@heroui/system-rsc").As<any>;
+    state: import("@react-stately/slider").SliderState;
+    value: any;
+    domRef: React.RefObject<HTMLElement>;
+    label: React.ReactNode;
+    steps: number;
+    marks: SliderStepMark[];
+    startContent: React.ReactNode;
+    endContent: React.ReactNode;
+    showMarksSteps: boolean;
+    minValue: number;
+    step: number;
+    getStepProps: (index: number) => {
+        className: string;
+        'data-slot': string;
+        'data-in-range': boolean;
+        style: {
+            [x: string]: string;
+        };
+    };
+    getBaseProps: PropGetter;
+    getValue: ((value: SliderValue) => string) | undefined;
+    renderLabel: ((props: DOMAttributes<HTMLLabelElement>) => React.ReactNode) | undefined;
+    renderValue: ((props: DOMAttributes<HTMLOutputElement>) => React.ReactNode) | undefined;
+    getTrackWrapperProps: PropGetter;
+    getLabelWrapperProps: PropGetter;
+    getLabelProps: PropGetter;
+    getValueProps: PropGetter;
+    getTrackProps: PropGetter;
+    getFillerProps: PropGetter;
+    getThumbProps: (index: number) => SliderThumbProps;
+    getMarkProps: (mark: SliderStepMark) => {
+        className: string;
+        'data-slot': string;
+        'data-in-range': boolean;
+        style: {
+            [x: string]: string;
+        };
+        onMouseDown: (e: React.MouseEvent) => void;
+        onPointerDown: (e: React.PointerEvent) => void;
+        onClick: (e: any) => void;
+    };
+    getStartContentProps: PropGetter;
+    getEndContentProps: PropGetter;
+};
+export type UseSliderReturn = ReturnType<typeof useSlider>;
+export {};

package/dist/components/UXSlider/use-slider.js

@@ -0,0 +1,277 @@
+import { useCallback, useMemo, useRef } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { mergeProps, objectToDeps, warn } from "@heroui/shared-utils";
+import { mapPropsVariants, useProviderContext } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useLocale, useNumberFormatter } from "@react-aria/i18n";
+import { useHover } from "@react-aria/interactions";
+import { useSlider } from "@react-aria/slider";
+import { useSliderState } from "@react-stately/slider";
+import { slider } from "./slider-theme.js";
+function use_slider_useSlider(originalProps) {
+    const globalContext = useProviderContext();
+    const [props, variantProps] = mapPropsVariants(originalProps, slider.variantKeys);
+    const { ref, as, name, label, formatOptions, value: valueProp, maxValue = 100, minValue = 0, step = 1, showSteps = false, showMarksSteps = true, showTooltip = false, orientation = 'horizontal', marks = [], startContent, endContent, fillOffset, className, classNames, renderThumb, renderLabel, renderValue, onChange, onChangeEnd, getValue, getTooltipValue, tooltipValueFormatOptions = formatOptions, tooltipProps: userTooltipProps = {}, ...otherProps } = props;
+    const isFixedValue = minValue === maxValue;
+    if (isFixedValue) warn('Min and max values should not be the same. This may cause unexpected behavior.');
+    const Component = as || 'div';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const disableAnimation = originalProps?.disableAnimation ?? globalContext?.disableAnimation ?? false;
+    const domRef = useDOMRef(ref);
+    const trackRef = useRef(null);
+    const numberFormatter = useNumberFormatter(formatOptions);
+    const { direction } = useLocale();
+    const clampValue = useCallback((valueToClamp)=>Math.min(Math.max(valueToClamp, minValue), maxValue), [
+        minValue,
+        maxValue
+    ]);
+    const validatedValue = useMemo(()=>{
+        if (isFixedValue) return minValue;
+        if (void 0 === valueProp) return;
+        if (Array.isArray(valueProp)) return valueProp.map(clampValue);
+        return clampValue(valueProp);
+    }, [
+        valueProp,
+        clampValue,
+        isFixedValue,
+        minValue
+    ]);
+    const handleValueChange = useCallback((value)=>{
+        onChangeEnd?.(value);
+        setTimeout(()=>{
+            if (document.activeElement) document.activeElement.blur();
+        }, 500);
+    }, [
+        onChangeEnd
+    ]);
+    const state = useSliderState({
+        ...otherProps,
+        value: validatedValue,
+        isDisabled: originalProps?.isDisabled ?? false,
+        orientation,
+        step,
+        minValue,
+        maxValue,
+        numberFormatter,
+        onChange,
+        onChangeEnd: handleValueChange
+    });
+    const tooltipProps = {
+        offset: 5,
+        delay: 0,
+        size: 'sm',
+        showArrow: true,
+        color: originalProps?.color ? originalProps?.color : slider.defaultVariants?.color,
+        isDisabled: originalProps.isDisabled,
+        ...userTooltipProps
+    };
+    const { groupProps, trackProps, labelProps, outputProps } = useSlider(originalProps, state, trackRef);
+    const { isHovered, hoverProps } = useHover({
+        isDisabled: originalProps.isDisabled
+    });
+    const baseStyles = cn(classNames?.base, className);
+    const isVertical = 'vertical' === orientation;
+    const hasMarks = marks?.length > 0;
+    const hasSingleThumb = void 0 === fillOffset ? 1 === state.values.length : false;
+    const slots = useMemo(()=>slider({
+            ...variantProps,
+            hasMarks,
+            disableAnimation,
+            hasSingleThumb,
+            isVertical
+        }), [
+        objectToDeps(variantProps),
+        isVertical,
+        disableAnimation,
+        hasSingleThumb,
+        hasMarks
+    ]);
+    const [startOffset, endOffset] = [
+        state.values.length > 1 ? state.getThumbPercent(0) : void 0 !== fillOffset ? state.getValuePercent(fillOffset) : 0,
+        state.getThumbPercent(state.values.length - 1)
+    ].sort();
+    const value = 1 === state.values.length ? numberFormatter.format(state.values[0]) : numberFormatter.formatRange(state.values[0], state.values[state.values.length - 1]);
+    const steps = showSteps ? Math.floor((maxValue - minValue) / step) + 1 : 0;
+    const getBaseProps = (props = {})=>({
+            ref: domRef,
+            'data-orientation': state.orientation,
+            'data-slot': 'base',
+            'data-hover': isHovered,
+            className: slots.base({
+                class: baseStyles
+            }),
+            ...mergeProps(groupProps, hoverProps, filterDOMProps(otherProps, {
+                enabled: shouldFilterDOMProps
+            }), filterDOMProps(props))
+        });
+    const getLabelWrapperProps = (props = {})=>({
+            className: slots.labelWrapper({
+                class: classNames?.labelWrapper
+            }),
+            'data-slot': 'labelWrapper',
+            ...props
+        });
+    const getLabelProps = (props = {})=>({
+            'data-slot': 'label',
+            className: slots.label({
+                class: classNames?.label
+            }),
+            children: label,
+            ...labelProps,
+            ...props
+        });
+    const getValueProps = (props = {})=>({
+            'data-slot': 'value',
+            className: slots.value({
+                class: classNames?.value
+            }),
+            children: getValue && 'function' == typeof getValue ? getValue(state.values) : value,
+            ...outputProps,
+            ...props
+        });
+    const getTrackProps = (props = {})=>{
+        const fillWidth = (endOffset - startOffset) * 100;
+        return {
+            ref: trackRef,
+            'data-slot': 'track',
+            'data-thumb-hidden': !!originalProps?.hideThumb,
+            'data-vertical': isVertical,
+            ...hasSingleThumb ? {
+                'data-fill-start': fillWidth > 0,
+                'data-fill-end': 100 === fillWidth
+            } : {
+                'data-fill-start': 0 === startOffset,
+                'data-fill-end': 100 * startOffset + fillWidth === 100
+            },
+            className: slots.track({
+                class: classNames?.track
+            }),
+            ...trackProps,
+            ...props
+        };
+    };
+    const getTrackWrapperProps = (props = {})=>({
+            'data-slot': 'track-wrapper',
+            className: slots.trackWrapper({
+                class: classNames?.trackWrapper
+            }),
+            ...props
+        });
+    const getFillerProps = (props = {})=>({
+            'data-slot': 'filler',
+            className: slots.filler({
+                class: classNames?.filler
+            }),
+            ...props,
+            style: {
+                ...props.style,
+                [isVertical ? 'bottom' : 'rtl' === direction ? 'right' : 'left']: `${100 * startOffset}%`,
+                ...isVertical ? {
+                    height: `${(endOffset - startOffset) * 100}%`
+                } : {
+                    width: `${(endOffset - startOffset) * 100}%`
+                }
+            }
+        });
+    const getThumbProps = (index)=>({
+            name,
+            index,
+            state,
+            trackRef,
+            orientation,
+            isVertical,
+            tooltipProps,
+            getTooltipValue,
+            showTooltip,
+            renderThumb,
+            formatOptions: tooltipValueFormatOptions,
+            className: slots.thumb({
+                class: classNames?.thumb
+            })
+        });
+    const getStepProps = (index)=>{
+        const percent = state.getValuePercent(index * step + minValue);
+        return {
+            className: slots.step({
+                class: classNames?.step
+            }),
+            'data-slot': 'step',
+            'data-in-range': percent <= endOffset && percent >= startOffset,
+            style: {
+                [isVertical ? 'bottom' : 'rtl' === direction ? 'right' : 'left']: `${100 * percent}%`
+            }
+        };
+    };
+    const getMarkProps = (mark)=>{
+        const percent = state.getValuePercent(mark.value);
+        return {
+            className: slots.mark({
+                class: classNames?.mark
+            }),
+            'data-slot': 'mark',
+            'data-in-range': percent <= endOffset && percent >= startOffset,
+            style: {
+                [isVertical ? 'bottom' : 'rtl' === direction ? 'right' : 'left']: `${100 * percent}%`
+            },
+            onMouseDown: (e)=>e.stopPropagation(),
+            onPointerDown: (e)=>e.stopPropagation(),
+            onClick: (e)=>{
+                e.stopPropagation();
+                if (isFixedValue) return;
+                if (1 === state.values.length) state.setThumbPercent(0, percent);
+                else {
+                    const leftThumbVal = state.values[0];
+                    const rightThumbVal = state.values[1];
+                    if (mark.value < leftThumbVal) state.setThumbPercent(0, percent);
+                    else if (mark.value > rightThumbVal) state.setThumbPercent(1, percent);
+                    else if (Math.abs(mark.value - leftThumbVal) < Math.abs(mark.value - rightThumbVal)) state.setThumbPercent(0, percent);
+                    else state.setThumbPercent(1, percent);
+                }
+            }
+        };
+    };
+    const getStartContentProps = (props = {})=>({
+            'data-slot': 'startContent',
+            className: slots.startContent({
+                class: classNames?.startContent
+            }),
+            ...props
+        });
+    const getEndContentProps = (props = {})=>({
+            'data-slot': 'endContent',
+            className: slots.endContent({
+                class: classNames?.endContent
+            }),
+            ...props
+        });
+    return {
+        Component,
+        state,
+        value,
+        domRef,
+        label,
+        steps,
+        marks,
+        startContent,
+        endContent,
+        showMarksSteps,
+        minValue,
+        step,
+        getStepProps,
+        getBaseProps,
+        getValue,
+        renderLabel,
+        renderValue,
+        getTrackWrapperProps,
+        getLabelWrapperProps,
+        getLabelProps,
+        getValueProps,
+        getTrackProps,
+        getFillerProps,
+        getThumbProps,
+        getMarkProps,
+        getStartContentProps,
+        getEndContentProps
+    };
+}
+export { use_slider_useSlider as useSlider };