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

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

@@ -0,0 +1,464 @@
+import { tv } from "@heroui/theme";
+import { dataFocusVisibleClasses } from "../../utils/index.js";
+const slider = tv({
+    slots: {
+        base: 'flex flex-col w-full gap-1',
+        labelWrapper: 'w-full flex justify-between items-center',
+        label: '',
+        value: '',
+        step: [
+            'absolute',
+            'rounded-full',
+            'bg-default-300/50',
+            'data-[in-range=true]:bg-background/50'
+        ],
+        mark: [
+            'absolute',
+            'text-small',
+            'cursor-default',
+            'opacity-50',
+            'data-[in-range=true]:opacity-100'
+        ],
+        trackWrapper: 'relative flex gap-2',
+        track: [
+            'flex',
+            'w-full',
+            'relative',
+            'rounded-full',
+            'bg-background-200'
+        ],
+        filler: 'h-full absolute',
+        thumb: [
+            'flex',
+            'justify-center',
+            'items-center',
+            'before:absolute',
+            'before:w-11',
+            'before:h-11',
+            'before:rounded-full',
+            'after:bg-background',
+            'data-[focused=true]:z-10',
+            'shadow-none',
+            dataFocusVisibleClasses
+        ],
+        startContent: [],
+        endContent: []
+    },
+    variants: {
+        size: {
+            sm: {
+                label: 'text-small',
+                value: 'text-small',
+                thumb: 'w-3 h-3 after:w-0 after:h-0',
+                step: 'h-1 w-1 data-[in-range=false]:bg-default-200',
+                mark: 'text-[10px]'
+            },
+            md: {
+                thumb: 'w-6 h-6 after:w-5 after:h-5',
+                label: 'text-small',
+                value: 'text-small',
+                step: 'h-1.5 w-1.5'
+            },
+            lg: {
+                thumb: 'h-7 w-7 after:w-5 after:h-5',
+                step: 'w-2 h-2',
+                label: 'text-medium',
+                value: 'text-medium',
+                mark: 'mt-2'
+            }
+        },
+        radius: {
+            none: {
+                thumb: 'rounded-none after:rounded-none'
+            },
+            sm: {
+                thumb: 'rounded-[calc(var(--heroui-radius-small)/2)] after:rounded-[calc(var(--heroui-radius-small)/3)]'
+            },
+            md: {
+                thumb: 'rounded-[calc(var(--heroui-radius-medium)/2)] after:rounded-[calc(var(--heroui-radius-medium)/3)]'
+            },
+            lg: {
+                thumb: 'rounded-[calc(var(--heroui-radius-large)/1.5)] after:rounded-[calc(var(--heroui-radius-large)/2)]'
+            },
+            full: {
+                thumb: 'rounded-full after:rounded-full'
+            }
+        },
+        color: {
+            foreground: {
+                filler: 'bg-foreground',
+                thumb: 'bg-foreground'
+            },
+            primary: {
+                filler: 'bg-primary',
+                thumb: 'bg-primary'
+            },
+            secondary: {
+                filler: 'bg-secondary',
+                thumb: 'bg-secondary'
+            },
+            success: {
+                filler: 'bg-success',
+                thumb: 'bg-success'
+            },
+            warning: {
+                filler: 'bg-warning',
+                thumb: 'bg-warning'
+            },
+            danger: {
+                filler: 'bg-danger',
+                thumb: 'bg-danger'
+            },
+            alert: {
+                filler: 'bg-alert',
+                thumb: 'bg-alert'
+            },
+            bullish: {
+                filler: 'bg-bullish',
+                thumb: 'bg-bullish'
+            },
+            bearish: {
+                filler: 'bg-bearish',
+                thumb: 'bg-bearish'
+            }
+        },
+        isVertical: {
+            true: {
+                base: 'w-auto h-full flex-col-reverse items-center',
+                trackWrapper: 'flex-col h-full justify-center items-center',
+                filler: 'w-full h-auto',
+                thumb: 'left-1/2',
+                track: 'h-full border-y-transparent',
+                labelWrapper: 'flex-col justify-center items-center',
+                step: [
+                    'left-1/2',
+                    '-translate-x-1/2',
+                    'translate-y-1/2'
+                ],
+                mark: [
+                    'left-1/2',
+                    'ml-1',
+                    'translate-x-1/2',
+                    'translate-y-1/2'
+                ]
+            },
+            false: {
+                thumb: 'top-1/2',
+                trackWrapper: 'items-center',
+                track: 'border-x-transparent',
+                step: [
+                    'top-1/2',
+                    '-translate-x-1/2',
+                    '-translate-y-1/2'
+                ],
+                mark: [
+                    'top-1/2',
+                    'mt-1',
+                    '-translate-x-1/2',
+                    'translate-y-1/2'
+                ]
+            }
+        },
+        isDisabled: {
+            false: {
+                thumb: [
+                    'cursor-grab',
+                    'data-[dragging=true]:cursor-grabbing'
+                ]
+            },
+            true: {
+                base: 'opacity-disabled',
+                thumb: 'cursor-default'
+            }
+        },
+        hasMarks: {
+            true: {
+                base: 'mb-5',
+                mark: 'cursor-pointer'
+            },
+            false: {}
+        },
+        showOutline: {
+            true: {
+                thumb: 'ring-2 ring-background'
+            },
+            false: {
+                thumb: 'ring-transparent border-0'
+            }
+        },
+        hideValue: {
+            true: {
+                value: 'sr-only'
+            }
+        },
+        hideThumb: {
+            true: {
+                thumb: 'sr-only',
+                track: 'cursor-pointer'
+            }
+        },
+        hasSingleThumb: {
+            true: {},
+            false: {}
+        },
+        disableAnimation: {
+            true: {
+                thumb: 'data-[dragging=true]:after:scale-100'
+            },
+            false: {
+                thumb: 'after:transition-all motion-reduce:after:transition-none',
+                mark: 'transition-opacity motion-reduce:transition-none'
+            }
+        },
+        disableThumbScale: {
+            true: {},
+            false: {
+                thumb: 'data-[dragging=true]:after:scale-80'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            size: 'sm',
+            color: 'foreground',
+            class: {
+                step: 'data-[in-range=true]:bg-foreground'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'primary',
+            class: {
+                step: 'data-[in-range=true]:bg-primary'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'secondary',
+            class: {
+                step: 'data-[in-range=true]:bg-secondary'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'alert',
+            class: {
+                step: 'data-[in-range=true]:bg-alert'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'success',
+            class: {
+                step: 'data-[in-range=true]:bg-success'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'warning',
+            class: {
+                step: 'data-[in-range=true]:bg-warning'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'danger',
+            class: {
+                step: 'data-[in-range=true]:bg-danger'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'bullish',
+            class: {
+                step: 'data-[in-range=true]:bg-bullish'
+            }
+        },
+        {
+            size: 'sm',
+            color: 'bearish',
+            class: {
+                step: 'data-[in-range=true]:bg-bearish'
+            }
+        },
+        {
+            size: 'sm',
+            isVertical: false,
+            class: {
+                track: 'h-0.5'
+            }
+        },
+        {
+            size: 'md',
+            isVertical: false,
+            class: {
+                track: 'h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-x-[calc(theme(spacing.6)/2)]'
+            }
+        },
+        {
+            size: 'lg',
+            isVertical: false,
+            class: {
+                track: 'h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-x-[calc(theme(spacing.7)/2)]'
+            }
+        },
+        {
+            size: 'sm',
+            isVertical: true,
+            class: {
+                track: 'w-0.5 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-y-[calc(theme(spacing.5)/2)]'
+            }
+        },
+        {
+            size: 'md',
+            isVertical: true,
+            class: {
+                track: 'w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-y-[calc(theme(spacing.6)/2)]'
+            }
+        },
+        {
+            size: 'lg',
+            isVertical: true,
+            class: {
+                track: 'w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]'
+            }
+        },
+        {
+            color: 'foreground',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-foreground data-[fill-end=true]:border-e-foreground'
+            }
+        },
+        {
+            color: 'primary',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-primary data-[fill-end=true]:border-e-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-secondary data-[fill-end=true]:border-e-secondary'
+            }
+        },
+        {
+            color: 'alert',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-alert data-[fill-end=true]:border-e-alert'
+            }
+        },
+        {
+            color: 'success',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-success data-[fill-end=true]:border-e-success'
+            }
+        },
+        {
+            color: 'warning',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-warning data-[fill-end=true]:border-e-warning'
+            }
+        },
+        {
+            color: 'danger',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-danger data-[fill-end=true]:border-e-danger'
+            }
+        },
+        {
+            color: 'bullish',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-bullish data-[fill-end=true]:border-e-bullish'
+            }
+        },
+        {
+            color: 'bearish',
+            isVertical: false,
+            class: {
+                track: 'data-[fill-start=true]:border-s-bearish data-[fill-end=true]:border-e-bearish'
+            }
+        },
+        {
+            color: 'foreground',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-foreground data-[fill-end=true]:border-t-foreground'
+            }
+        },
+        {
+            color: 'primary',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-primary data-[fill-end=true]:border-t-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-secondary data-[fill-end=true]:border-t-secondary'
+            }
+        },
+        {
+            color: 'alert',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-alert data-[fill-end=true]:border-t-alert'
+            }
+        },
+        {
+            color: 'success',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-success data-[fill-end=true]:border-t-success'
+            }
+        },
+        {
+            color: 'warning',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-warning data-[fill-end=true]:border-t-warning'
+            }
+        },
+        {
+            color: 'danger',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-danger data-[fill-end=true]:border-t-danger'
+            }
+        },
+        {
+            color: 'bullish',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-bullish data-[fill-end=true]:border-t-bullish'
+            }
+        },
+        {
+            color: 'bearish',
+            isVertical: true,
+            class: {
+                track: 'data-[fill-start=true]:border-b-bearish data-[fill-end=true]:border-t-bearish'
+            }
+        }
+    ],
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        radius: 'full',
+        hideValue: false,
+        hideThumb: false,
+        isDisabled: false,
+        disableThumbScale: false,
+        showOutline: false
+    }
+});
+export { slider };

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

@@ -0,0 +1,4 @@
+import type { UseSliderThumbProps } from './use-slider-thumb';
+export type SliderThumbProps = UseSliderThumbProps;
+declare const SliderThumb: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", UseSliderThumbProps, never>;
+export default SliderThumb;

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 {};