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

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 = false, 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 };

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -163,7 +163,7 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
         })
     });
 };
-const UXThemeSwitch = ({ as = 'modal', backdrop, children })=>{
+const UXThemeSwitch = ({ children, ...restProps })=>{
     const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
     const renderChildren = ()=>{
         if (children) return children(onOpen);
@@ -178,8 +178,7 @@ const UXThemeSwitch = ({ as = 'modal', backdrop, children })=>{
         children: [
             renderChildren(),
             /*#__PURE__*/ jsx(UXThemeSwitchModal, {
-                as: as,
-                backdrop: backdrop,
+                ...restProps,
                 isOpen: isOpen,
                 onClose: onClose,
                 onOpenChange: onOpenChange

package/dist/utils/classes.d.ts

@@ -33,3 +33,14 @@ export declare const collapseAdjacentVariantBorders: {
     bearish: string[];
 };
 export declare const hiddenInputClasses: string[];
+export declare const bgWithTextColorClasses: {
+    readonly foreground: "bg-foreground text-background";
+    readonly primary: "bg-primary text-primary-foreground";
+    readonly secondary: "bg-secondary text-secondary-foreground";
+    readonly success: "bg-success text-success-foreground";
+    readonly warning: "bg-warning text-warning-foreground";
+    readonly alert: "bg-alert text-alert-foreground";
+    readonly danger: "bg-danger text-danger-foreground";
+    readonly bullish: "bg-bullish text-bullish-foreground";
+    readonly bearish: "bg-bearish text-bearish-foreground";
+};

package/dist/utils/classes.js

@@ -84,4 +84,15 @@ const hiddenInputClasses = [
     'cursor-pointer',
     'disabled:cursor-default'
 ];
-export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };
+const bgWithTextColorClasses = {
+    foreground: 'bg-foreground text-background',
+    primary: 'bg-primary text-primary-foreground',
+    secondary: 'bg-secondary text-secondary-foreground',
+    success: 'bg-success text-success-foreground',
+    warning: 'bg-warning text-warning-foreground',
+    alert: 'bg-alert text-alert-foreground',
+    danger: 'bg-danger text-danger-foreground',
+    bullish: 'bg-bullish text-bullish-foreground',
+    bearish: 'bg-bearish text-bearish-foreground'
+};
+export { absoluteFullClasses, baseStyles, bgWithTextColorClasses, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.4.5-beta.19",
+  "version": "0.4.5-beta.20",
   "type": "module",
   "exports": {
     ".": {
@@ -49,8 +49,8 @@
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.4.2-beta.8",
-    "@particle-network/ui-shared": "0.3.2-beta.4"
+    "@particle-network/icons": "0.4.2-beta.9",
+    "@particle-network/ui-shared": "0.3.2-beta.5"
   },
   "scripts": {
     "build": "rslib build",

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

@@ -1,208 +0,0 @@
-export declare const sliderClasses: {
-    variants: {
-        size: {
-            sm: {
-                label: string;
-                value: string;
-                thumb: string;
-                step: string;
-                mark: string;
-                track: string;
-            };
-            md: {
-                thumb: string;
-                label: string;
-                value: string;
-                mark: string;
-                track: string;
-            };
-            lg: {
-                thumb: string;
-                step: string;
-                label: string;
-                value: string;
-                mark: string;
-                track: string;
-            };
-        };
-        radius: {
-            none: {
-                thumb: string;
-            };
-            sm: {
-                thumb: string;
-            };
-            md: {
-                thumb: string;
-            };
-            lg: {
-                thumb: string;
-            };
-            full: {
-                thumb: string;
-            };
-        };
-        color: {
-            foreground: {
-                filler: string;
-                thumb: string;
-            };
-            primary: {
-                filler: string;
-                thumb: string;
-            };
-            secondary: {
-                filler: string;
-                thumb: string;
-            };
-            success: {
-                filler: string;
-                thumb: string;
-            };
-            warning: {
-                filler: string;
-                thumb: string;
-            };
-            danger: {
-                filler: string;
-                thumb: string;
-            };
-            alert: {
-                filler: string;
-                thumb: string;
-            };
-            bullish: {
-                filler: string;
-                thumb: string;
-            };
-            bearish: {
-                filler: string;
-                thumb: string;
-            };
-        };
-        isVertical: {
-            true: {
-                base: string;
-                trackWrapper: string;
-                filler: string;
-                thumb: string;
-                track: string;
-                labelWrapper: string;
-                step: string[];
-                mark: string[];
-            };
-            false: {
-                thumb: string;
-                trackWrapper: string;
-                track: string;
-                step: string[];
-                mark: string[];
-            };
-        };
-        isDisabled: {
-            false: {
-                thumb: string[];
-            };
-            true: {
-                base: string;
-                thumb: string;
-            };
-        };
-        hasMarks: {
-            true: {
-                base: string;
-                mark: string;
-            };
-            false: {};
-        };
-        showOutline: {
-            true: {
-                thumb: string;
-            };
-            false: {
-                thumb: string;
-            };
-        };
-        hideValue: {
-            true: {
-                value: string;
-            };
-        };
-        hideThumb: {
-            true: {
-                thumb: string;
-                track: string;
-            };
-        };
-        hasSingleThumb: {
-            true: {};
-            false: {};
-        };
-        disableAnimation: {
-            true: {
-                thumb: string;
-            };
-            false: {
-                thumb: string;
-                mark: string;
-            };
-        };
-        disableThumbScale: {
-            true: {};
-            false: {
-                thumb: string;
-            };
-        };
-    };
-    compoundVariants: ({
-        size: string[];
-        showOutline: boolean;
-        class: {
-            thumb: string;
-            step?: undefined;
-            track?: undefined;
-        };
-        color?: undefined;
-        isVertical?: undefined;
-    } | {
-        size: string;
-        color: string;
-        class: {
-            step: string;
-            thumb?: undefined;
-            track?: undefined;
-        };
-        showOutline?: undefined;
-        isVertical?: undefined;
-    } | {
-        size: string;
-        isVertical: boolean;
-        class: {
-            track: string;
-            thumb?: undefined;
-            step?: undefined;
-        };
-        showOutline?: undefined;
-        color?: undefined;
-    } | {
-        color: string;
-        isVertical: boolean;
-        class: {
-            track: string;
-            thumb?: undefined;
-            step?: undefined;
-        };
-        size?: undefined;
-        showOutline?: undefined;
-    })[];
-    defaultVariants: {
-        size: string;
-        color: string;
-        radius: string;
-        hideValue: boolean;
-        hideThumb: boolean;
-        isDisabled: boolean;
-        disableThumbScale: boolean;
-        showOutline: boolean;
-    };
-};

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

@@ -1,5 +0,0 @@
-import type React from 'react';
-import { type SliderProps } from '@heroui/slider';
-type ExtendedSliderProps = SliderProps;
-declare const ExtendedSlider: React.ForwardRefExoticComponent<ExtendedSliderProps>;
-export default ExtendedSlider;

package/dist/components/UXSlider/slider.extend.js

@@ -1,6 +0,0 @@
-import { Slider } from "@heroui/slider";
-import { extendVariants } from "@heroui/system-rsc";
-import { sliderClasses } from "./slider.classes.js";
-const ExtendedSlider = extendVariants(Slider, sliderClasses);
-const slider_extend = ExtendedSlider;
-export { slider_extend as default };