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

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

@@ -1,4 +1,5 @@
-import React from 'react';
-import ExtendedSlider from './slider.extend';
-export type UXSliderProps = React.ComponentPropsWithRef<typeof ExtendedSlider>;
-export declare const UXSlider: React.ForwardRefExoticComponent<UXSliderProps>;
+import UXSlider from './slider';
+export type { SliderProps as UXSliderProps } from './slider';
+export type { SliderRenderThumbProps, SliderStepMark, SliderValue } from './use-slider';
+export { useSlider } from './use-slider';
+export { UXSlider };

package/dist/components/UXSlider/index.js

@@ -1,29 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { forwardRef } from "@heroui/system";
-import slider_extend from "./slider.extend.js";
-const UXSlider = forwardRef((props, ref)=>{
-    const { onChangeEnd, color, ...restProps } = props;
-    return /*#__PURE__*/ jsx(slider_extend, {
-        ref: ref,
-        tooltipProps: {
-            closeDelay: 100,
-            classNames: {
-                content: [
-                    `bg-${color}`,
-                    'foreground' === color ? 'text-background' : `text-${color}-foreground`
-                ]
-            }
-        },
-        color: color,
-        onChangeEnd: (value)=>{
-            onChangeEnd?.(value);
-            setTimeout(()=>{
-                if (document.activeElement) document.activeElement.blur();
-            }, 200);
-        },
-        ...restProps
-    });
-});
-UXSlider.displayName = 'UX.Slider';
-export { UXSlider };
+import slider from "./slider.js";
+import { useSlider } from "./use-slider.js";
+export { slider as UXSlider, useSlider };

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

@@ -0,0 +1,518 @@
+import type { VariantProps } from 'tailwind-variants';
+/**
+ * Slider wrapper **Tailwind Variants** component
+ *
+ * @example
+ *
+ * const slots = slider()
+ *
+ * <div className={slots.base()}>
+ *  <div className={slots.labelWrapper()}>
+ *    <label className={slots.label()}>Label</label>
+ *    <output className={slots.value()} />
+ *  </div>
+ *  <div className={slots.trackWrapper()}>
+ *      <div className={slots.startContent()}>Start Content</div>
+ *      <div className={slots.track()}>
+ *         <div className={slots.filler()} />
+ *         <div className={slots.step()} />
+ *         <div className={slots.thumb()} />
+ *         <div className={slots.mark()}>Mark</div>
+ *      </div>
+ *     <div className={slots.endContent()}>End Content</div>
+ *   </div>
+ * </div>
+ */
+declare const slider: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            label: string;
+            value: string;
+            thumb: string;
+            step: string;
+            mark: string;
+        };
+        md: {
+            thumb: string;
+            label: string;
+            value: string;
+        };
+        lg: {
+            thumb: string;
+            step: string;
+            label: string;
+            value: string;
+            mark: 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;
+        };
+    };
+}, {
+    base: string;
+    labelWrapper: string;
+    label: string;
+    value: string;
+    step: string[];
+    mark: string[];
+    trackWrapper: string;
+    track: string[];
+    filler: string;
+    thumb: (string | string[])[];
+    startContent: never[];
+    endContent: never[];
+}, undefined, {
+    size: {
+        sm: {
+            label: string;
+            value: string;
+            thumb: string;
+            step: string;
+            mark: string;
+        };
+        md: {
+            thumb: string;
+            label: string;
+            value: string;
+        };
+        lg: {
+            thumb: string;
+            step: string;
+            label: string;
+            value: string;
+            mark: 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;
+        };
+    };
+}, {
+    base: string;
+    labelWrapper: string;
+    label: string;
+    value: string;
+    step: string[];
+    mark: string[];
+    trackWrapper: string;
+    track: string[];
+    filler: string;
+    thumb: (string | string[])[];
+    startContent: never[];
+    endContent: never[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            label: string;
+            value: string;
+            thumb: string;
+            step: string;
+            mark: string;
+        };
+        md: {
+            thumb: string;
+            label: string;
+            value: string;
+        };
+        lg: {
+            thumb: string;
+            step: string;
+            label: string;
+            value: string;
+            mark: 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;
+        };
+    };
+}, {
+    base: string;
+    labelWrapper: string;
+    label: string;
+    value: string;
+    step: string[];
+    mark: string[];
+    trackWrapper: string;
+    track: string[];
+    filler: string;
+    thumb: (string | string[])[];
+    startContent: never[];
+    endContent: never[];
+}, undefined, unknown, unknown, undefined>>;
+export type SliderVariantProps = VariantProps<typeof slider>;
+export type SliderSlots = keyof ReturnType<typeof slider>;
+export { slider };

package/dist/components/UXSlider/{slider.classes.js → slider-theme.js}

@@ -1,28 +1,71 @@
-const sliderClasses = {
+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: [
+            'h-1.5',
+            'w-1.5',
+            '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-xxs',
-                value: '!text-xxs',
+                label: 'text-small',
+                value: 'text-small',
                 thumb: 'w-4 h-4 after:w-3 after:h-3',
                 step: 'data-[in-range=false]:bg-default-200',
-                mark: '!text-xxs mt-1',
-                track: 'bg-background-200'
+                mark: 'text-[10px]'
             },
             md: {
-                thumb: 'w-4 h-4 after:w-3 after:h-3',
-                label: 'text-xs',
-                value: 'text-xs',
-                mark: 'text-xs mt-1',
-                track: 'bg-background-200'
+                thumb: 'w-6 h-6 after:w-5 after:h-5',
+                label: 'text-small',
+                value: 'text-small'
             },
             lg: {
                 thumb: 'h-7 w-7 after:w-5 after:h-5',
                 step: 'w-2 h-2',
-                label: 'text-sm',
-                value: 'text-sm',
-                mark: 'text-sm mt-2',
-                track: 'bg-background-200'
+                label: 'text-medium',
+                value: 'text-medium',
+                mark: 'mt-2'
             }
         },
         radius: {
@@ -30,13 +73,13 @@ const sliderClasses = {
                 thumb: 'rounded-none after:rounded-none'
             },
             sm: {
-                thumb: 'rounded-[calc(theme(borderRadius.small)/2)] after:rounded-[calc(theme(borderRadius.small)/3)]'
+                thumb: 'rounded-[calc(var(--heroui-radius-small)/2)] after:rounded-[calc(var(--heroui-radius-small)/3)]'
             },
             md: {
-                thumb: 'rounded-[calc(theme(borderRadius.medium)/2)] after:rounded-[calc(theme(borderRadius.medium)/3)]'
+                thumb: 'rounded-[calc(var(--heroui-radius-medium)/2)] after:rounded-[calc(var(--heroui-radius-medium)/3)]'
             },
             lg: {
-                thumb: 'rounded-[calc(theme(borderRadius.large)/1.5)] after:rounded-[calc(theme(borderRadius.large)/2)]'
+                thumb: 'rounded-[calc(var(--heroui-radius-large)/1.5)] after:rounded-[calc(var(--heroui-radius-large)/2)]'
             },
             full: {
                 thumb: 'rounded-full after:rounded-full'
@@ -176,17 +219,6 @@ const sliderClasses = {
         }
     },
     compoundVariants: [
-        {
-            size: [
-                'sm',
-                'md',
-                'lg'
-            ],
-            showOutline: false,
-            class: {
-                thumb: 'shadow-none'
-            }
-        },
         {
             size: 'sm',
             color: 'foreground',
@@ -429,5 +461,5 @@ const sliderClasses = {
         disableThumbScale: false,
         showOutline: false
     }
-};
-export { sliderClasses };
+});
+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;