@particle-network/ui-react 0.4.5-beta.19 → 0.4.5-beta.20

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

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { renderFn } from "@heroui/react-utils";
+import { forwardRef } from "@heroui/system";
+import { Tooltip } from "@heroui/tooltip";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { useSliderThumb } from "./use-slider-thumb.js";
+const SliderThumb = forwardRef((props, ref)=>{
+    const { Component, index, renderThumb, showTooltip, getTooltipProps, getThumbProps, getInputProps } = useSliderThumb({
+        ...props,
+        ref
+    });
+    const thumbProps = {
+        ...getThumbProps(),
+        index,
+        children: /*#__PURE__*/ jsx(VisuallyHidden, {
+            children: /*#__PURE__*/ jsx("input", {
+                ...getInputProps()
+            })
+        })
+    };
+    const content = renderFn({
+        Component,
+        props: thumbProps,
+        renderCustom: renderThumb
+    });
+    return showTooltip ? /*#__PURE__*/ jsx(Tooltip, {
+        ...getTooltipProps(),
+        children: content
+    }) : content;
+});
+SliderThumb.displayName = 'HeroUI.SliderThumb';
+const slider_thumb = SliderThumb;
+export { slider_thumb as default };

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

@@ -0,0 +1,4 @@
+import type { UseSliderProps } from './use-slider';
+export type SliderProps = Omit<UseSliderProps, 'isVertical' | 'hasMarks' | 'hasSingleThumb'>;
+declare const Slider: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", SliderProps, never>;
+export default Slider;

package/dist/components/UXSlider/slider.js

@@ -0,0 +1,77 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { renderFn } from "@heroui/react-utils";
+import { forwardRef } from "@heroui/system";
+import slider_thumb from "./slider-thumb.js";
+import { useSlider } from "./use-slider.js";
+const Slider = forwardRef((props, ref)=>{
+    const { Component, state, label, steps, marks, startContent, endContent, showMarksSteps, minValue, step, getStepProps, getBaseProps, renderValue, renderLabel, getTrackWrapperProps, getLabelWrapperProps, getLabelProps, getValueProps, getTrackProps, getFillerProps, getThumbProps, getMarkProps, getStartContentProps, getEndContentProps } = useSlider({
+        ...props,
+        ref
+    });
+    return /*#__PURE__*/ jsxs(Component, {
+        ...getBaseProps(),
+        children: [
+            label && /*#__PURE__*/ jsxs("div", {
+                ...getLabelWrapperProps(),
+                children: [
+                    renderFn({
+                        Component: 'label',
+                        props: getLabelProps(),
+                        renderCustom: renderLabel
+                    }),
+                    renderFn({
+                        Component: 'output',
+                        props: getValueProps(),
+                        renderCustom: renderValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ...getTrackWrapperProps(),
+                children: [
+                    startContent && /*#__PURE__*/ jsx("div", {
+                        ...getStartContentProps(),
+                        children: startContent
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        ...getTrackProps(),
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                ...getFillerProps()
+                            }),
+                            Number.isFinite(steps) && Array.from({
+                                length: steps
+                            }, (_, index)=>/*#__PURE__*/ jsx("div", {
+                                    ...getStepProps(index)
+                                }, index)),
+                            state.values.map((_, index)=>/*#__PURE__*/ jsx(slider_thumb, {
+                                    ...getThumbProps(index)
+                                }, index)),
+                            marks?.length > 0 && marks.map((mark, index)=>{
+                                const isMarkAtThumbPosition = state.values.some((value)=>value === mark.value);
+                                return /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        showMarksSteps && !isMarkAtThumbPosition && /*#__PURE__*/ jsx("div", {
+                                            ...getStepProps(Math.round((mark.value - minValue) / step))
+                                        }, `step-${index}`),
+                                        /*#__PURE__*/ jsx("div", {
+                                            ...getMarkProps(mark),
+                                            children: mark.label
+                                        }, `mark-${index}`)
+                                    ]
+                                });
+                            })
+                        ]
+                    }),
+                    endContent && /*#__PURE__*/ jsx("div", {
+                        ...getEndContentProps(),
+                        children: endContent
+                    })
+                ]
+            })
+        ]
+    });
+});
+Slider.displayName = 'HeroUI.Slider';
+const slider = Slider;
+export { slider as default };

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

@@ -0,0 +1,61 @@
+import type { RefObject } from 'react';
+import type { ReactRef } from '@heroui/react-utils';
+import type { HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import type { SliderVariantProps } from '@heroui/theme';
+import type { TooltipProps } from '@heroui/tooltip';
+import type { AriaSliderThumbProps } from '@react-aria/slider';
+import type { SliderState } from '@react-stately/slider';
+import type { SliderValue, UseSliderProps } from './use-slider';
+interface Props extends HTMLHeroUIProps {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    /**
+     * slider state, created via `useSliderState`.
+     */
+    state: SliderState;
+    /**
+     * A ref to the track element.
+     */
+    trackRef: RefObject<HTMLDivElement>;
+    /**
+     * @internal
+     */
+    isVertical: boolean;
+    /**
+     * @internal
+     */
+    showTooltip?: boolean;
+    /**
+     * @internal
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * @internal
+     */
+    tooltipProps?: UseSliderProps['tooltipProps'];
+    /**
+     * 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 thumb. It can be used to add a tooltip or custom icon.
+     */
+    renderThumb?: UseSliderProps['renderThumb'];
+}
+export type UseSliderThumbProps = Props & AriaSliderThumbProps & SliderVariantProps;
+export declare function useSliderThumb(props: UseSliderThumbProps): {
+    Component: import("@heroui/system-rsc").As<any>;
+    index: number | undefined;
+    showTooltip: boolean | undefined;
+    renderThumb: ((props: import("./use-slider").SliderRenderThumbProps) => React.ReactNode) | undefined;
+    getThumbProps: PropGetter;
+    getTooltipProps: () => TooltipProps;
+    getInputProps: PropGetter;
+};
+export type UseSliderThumbReturn = ReturnType<typeof useSliderThumb>;
+export {};

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 false
+     */
+    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 {};