nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/ProfilePage/index.js

@@ -0,0 +1,6 @@
+export { AddressCard } from "./components/AddressCard";
+export { PhoneCard } from "./components/PhoneCard";
+export { ProfileHeader } from "./components/ProfileHeader";
+export { ProfilePage } from "./components/ProfilePage";
+export { useProfileStore } from "./store";
+export { extendProfilePageTheme, profilePageTheme } from "./theme";

package/dist/fe/components/ProfilePage/store/index.js

@@ -0,0 +1,115 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    user: null,
+    profile: null,
+    addresses: [],
+    phones: [],
+    files: [],
+    roles: [],
+    profilePicture: null,
+    isEditingProfile: false
+};
+export const { useStore: useProfileStore } = createStore(initialState, {
+    setUser: (store)=>(user)=>{
+            store.user = user;
+        },
+    setProfile: (store)=>(profile)=>{
+            if (profile === null) {
+                store.profile = null;
+            } else if (store.profile) {
+                store.profile = {
+                    ...store.profile,
+                    ...profile
+                };
+            } else {
+                store.profile = profile;
+            }
+        },
+    setAddresses: (store)=>(addresses)=>{
+            store.addresses = addresses;
+        },
+    setPhones: (store)=>(phones)=>{
+            store.phones = phones;
+        },
+    setFiles: (store)=>(files)=>{
+            store.files = files;
+        },
+    setRoles: (store)=>(roles)=>{
+            store.roles = roles;
+        },
+    setProfilePicture: (store)=>(file)=>{
+            store.profilePicture = file;
+        },
+    setEditingProfile: (store)=>(value)=>{
+            store.isEditingProfile = value;
+        },
+    addAddress: (store)=>(address)=>{
+            store.addresses = [
+                ...store.addresses,
+                address
+            ];
+        },
+    updateAddress: (store)=>(address)=>{
+            store.addresses = store.addresses.map((a)=>a.id === address.id ? {
+                    ...a,
+                    ...address
+                } : a);
+        },
+    removeAddress: (store)=>(addressId)=>{
+            store.addresses = store.addresses.filter((a)=>a.id !== addressId);
+        },
+    addPhone: (store)=>(phone)=>{
+            store.phones = [
+                ...store.phones,
+                phone
+            ];
+        },
+    updatePhone: (store)=>(phone)=>{
+            store.phones = store.phones.map((p)=>p.id === phone.id ? {
+                    ...p,
+                    ...phone
+                } : p);
+        },
+    removePhone: (store)=>(phoneId)=>{
+            store.phones = store.phones.filter((p)=>p.id !== phoneId);
+        },
+    addFile: (store)=>(file)=>{
+            store.files = [
+                ...store.files,
+                file
+            ];
+            if (file.type === "profile_picture") {
+                const profilePics = store.files.filter((f)=>f.type === "profile_picture");
+                const latest = profilePics.sort((a, b)=>new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())[0];
+                store.profilePicture = latest || file;
+            }
+        },
+    updateFile: (store)=>(file)=>{
+            store.files = store.files.map((f)=>f.id === file.id ? file : f);
+            if (file.type === "profile_picture") {
+                store.profilePicture = file;
+            } else if (store.profilePicture?.id === file.id) {
+                store.profilePicture = null;
+            }
+        },
+    removeFile: (store)=>(fileId)=>{
+            const file = store.files.find((f)=>f.id === fileId);
+            store.files = store.files.filter((f)=>f.id !== fileId);
+            if (file?.type === "profile_picture" && store.profilePicture?.id === fileId) {
+                store.profilePicture = null;
+            }
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.user = null;
+                store.profile = null;
+                store.addresses = [];
+                store.phones = [];
+                store.files = [];
+                store.roles = [];
+                store.profilePicture = null;
+                store.isEditingProfile = false;
+            });
+        }
+});

package/dist/fe/components/ProfilePage/theme/index.js

@@ -0,0 +1,168 @@
+export const profilePageTheme = {
+    container: {
+        base: "relative min-h-screen w-full",
+        wrapper: "relative z-10 w-full max-w-4xl mx-auto px-4 py-6 sm:px-6 sm:py-8 lg:px-8"
+    },
+    card: {
+        base: "w-full",
+        padding: "p-4 sm:p-6 lg:p-8",
+        background: "bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl",
+        border: "border border-white/20 dark:border-zinc-800/50",
+        shadow: "shadow-xl shadow-black/5 dark:shadow-black/20",
+        rounded: "rounded-xl sm:rounded-2xl"
+    },
+    header: {
+        container: "flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 pb-6 border-b border-zinc-200 dark:border-zinc-700/50",
+        avatar: {
+            wrapper: "relative flex-shrink-0",
+            image: "w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover ring-4 ring-white dark:ring-zinc-800 shadow-lg",
+            placeholder: "w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-2xl sm:text-3xl font-bold ring-4 ring-white dark:ring-zinc-800 shadow-lg",
+            uploadButton: "absolute -bottom-1 -right-1 p-1.5 sm:p-2 bg-white dark:bg-zinc-800 rounded-full shadow-md border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors cursor-pointer"
+        },
+        info: {
+            container: "flex-1 text-center sm:text-left",
+            name: "text-xl sm:text-2xl font-bold text-zinc-900 dark:text-white",
+            email: "text-sm sm:text-base text-zinc-600 dark:text-zinc-400 mt-1",
+            meta: "flex flex-wrap justify-center sm:justify-start gap-3 sm:gap-4 mt-3 text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
+        }
+    },
+    section: {
+        container: "mt-6 sm:mt-8",
+        title: "text-base sm:text-lg font-semibold text-zinc-900 dark:text-white",
+        titleWrapper: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 mb-4",
+        addButton: "text-xs sm:text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors",
+        content: "space-y-3 sm:space-y-4",
+        empty: {
+            container: "flex flex-col items-center justify-center py-8 sm:py-12 text-center bg-zinc-50 dark:bg-zinc-800/30 rounded-xl",
+            icon: "w-10 h-10 sm:w-12 sm:h-12 text-zinc-300 dark:text-zinc-600 mb-3",
+            text: "text-sm text-zinc-500 dark:text-zinc-400"
+        }
+    },
+    profileForm: {
+        container: "mt-4 sm:mt-6",
+        grid: "grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4",
+        field: {
+            container: "space-y-1 sm:space-y-1.5",
+            label: "block text-xs sm:text-sm font-medium text-zinc-700 dark:text-zinc-300",
+            input: "w-full px-3 py-2 text-sm rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all",
+            error: "text-xs text-red-500 mt-1"
+        },
+        actions: "flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 mt-4 sm:mt-6"
+    },
+    itemCard: {
+        base: "group relative transition-all duration-200",
+        padding: "p-3 sm:p-4",
+        background: "bg-white dark:bg-zinc-800/60",
+        border: "border border-zinc-200 dark:border-zinc-700/50",
+        rounded: "rounded-lg sm:rounded-xl",
+        hover: "hover:shadow-md hover:border-zinc-300 dark:hover:border-zinc-600",
+        header: {
+            container: "flex items-start gap-3",
+            icon: "flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center text-zinc-500 dark:text-zinc-400",
+            title: "font-medium text-sm sm:text-base text-zinc-900 dark:text-white",
+            subtitle: "text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 mt-0.5",
+            actions: "flex items-center gap-1 sm:gap-2 ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
+        },
+        details: {
+            container: "mt-2 sm:mt-3 space-y-1 sm:space-y-1.5 text-xs sm:text-sm",
+            row: "flex items-center justify-between",
+            label: "text-zinc-500 dark:text-zinc-400",
+            value: "text-zinc-700 dark:text-zinc-300 truncate ml-2 text-right"
+        }
+    },
+    modal: {
+        overlay: "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4",
+        container: "bg-white dark:bg-zinc-800 rounded-xl sm:rounded-2xl shadow-2xl max-w-md w-full p-4 sm:p-6 max-h-[90vh] overflow-y-auto",
+        title: "text-base sm:text-lg font-semibold text-zinc-900 dark:text-white mb-4",
+        form: "space-y-3 sm:space-y-4",
+        actions: "flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 justify-end mt-4 sm:mt-6"
+    },
+    loading: {
+        container: "flex flex-col items-center justify-center py-12 sm:py-16",
+        spinner: "w-8 h-8 border-2 border-zinc-200 border-t-blue-600 rounded-full animate-spin",
+        text: "mt-3 sm:mt-4 text-sm text-zinc-500 dark:text-zinc-400"
+    },
+    error: {
+        container: "p-3 sm:p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800",
+        text: "text-xs sm:text-sm text-red-600 dark:text-red-400"
+    },
+    accountSettings: {
+        container: "space-y-2",
+        item: "w-full flex items-center justify-between p-3 rounded-lg border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors text-left",
+        iconWrapper: "w-10 h-10 rounded-full flex items-center justify-center",
+        content: "flex items-center gap-3",
+        title: "text-sm font-medium text-zinc-900 dark:text-white",
+        description: "text-xs text-zinc-500 dark:text-zinc-400",
+        arrow: "w-5 h-5 text-zinc-400"
+    }
+};
+export function extendProfilePageTheme(overrides) {
+    return {
+        ...profilePageTheme,
+        ...overrides,
+        container: {
+            ...profilePageTheme.container,
+            ...overrides.container
+        },
+        card: {
+            ...profilePageTheme.card,
+            ...overrides.card
+        },
+        header: {
+            ...profilePageTheme.header,
+            ...overrides.header,
+            avatar: {
+                ...profilePageTheme.header.avatar,
+                ...overrides.header?.avatar
+            },
+            info: {
+                ...profilePageTheme.header.info,
+                ...overrides.header?.info
+            }
+        },
+        section: {
+            ...profilePageTheme.section,
+            ...overrides.section,
+            empty: {
+                ...profilePageTheme.section.empty,
+                ...overrides.section?.empty
+            }
+        },
+        profileForm: {
+            ...profilePageTheme.profileForm,
+            ...overrides.profileForm,
+            field: {
+                ...profilePageTheme.profileForm.field,
+                ...overrides.profileForm?.field
+            }
+        },
+        itemCard: {
+            ...profilePageTheme.itemCard,
+            ...overrides.itemCard,
+            header: {
+                ...profilePageTheme.itemCard.header,
+                ...overrides.itemCard?.header
+            },
+            details: {
+                ...profilePageTheme.itemCard.details,
+                ...overrides.itemCard?.details
+            }
+        },
+        modal: {
+            ...profilePageTheme.modal,
+            ...overrides.modal
+        },
+        loading: {
+            ...profilePageTheme.loading,
+            ...overrides.loading
+        },
+        error: {
+            ...profilePageTheme.error,
+            ...overrides.error
+        },
+        accountSettings: {
+            ...profilePageTheme.accountSettings,
+            ...overrides.accountSettings
+        }
+    };
+}

package/dist/fe/components/ProfilePage/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/RangePicker/components/RangePicker.js

@@ -0,0 +1,338 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useRef, useState } from "react";
+import { rangePickerTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { RangeTrack } from "./RangeTrack";
+gsap.registerPlugin(useGSAP);
+const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
+const snapToStep = (value, step, min)=>{
+    const steps = Math.round((value - min) / step);
+    return min + steps * step;
+};
+export function RangePicker({ value: controlledValue, defaultValue, min = 0, max = 100, step = 1, minRange = 0, disabled = false, readOnly = false, size = "md", variant = "default", orientation = "horizontal", showTooltip = false, showLabels = false, showTicks = false, tickCount = 5, debounceMs = 0, formatValue, onChange, onChangeCommit, label, minLabel, maxLabel, ariaLabel, ariaLabelMin, ariaLabelMax, className, ...props }) {
+    const theme = rangePickerTheme;
+    const containerRef = useRef(null);
+    const trackRef = useRef(null);
+    const minThumbRef = useRef(null);
+    const maxThumbRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue || {
+        min: min + (max - min) * 0.25,
+        max: min + (max - min) * 0.75
+    });
+    const [activeThumb, setActiveThumb] = useState(null);
+    const [isHovering, setIsHovering] = useState(null);
+    useGSAP(()=>{
+        if (minThumbRef.current) {
+            gsap.to(minThumbRef.current, {
+                scale: activeThumb === "min" ? 1.3 : isHovering === "min" ? 1.15 : 1,
+                duration: 0.2,
+                ease: activeThumb === "min" ? "power2.out" : "elastic.out(1, 0.4)"
+            });
+        }
+    }, [
+        activeThumb,
+        isHovering
+    ]);
+    useGSAP(()=>{
+        if (maxThumbRef.current) {
+            gsap.to(maxThumbRef.current, {
+                scale: activeThumb === "max" ? 1.3 : isHovering === "max" ? 1.15 : 1,
+                duration: 0.2,
+                ease: activeThumb === "max" ? "power2.out" : "elastic.out(1, 0.4)"
+            });
+        }
+    }, [
+        activeThumb,
+        isHovering
+    ]);
+    const value = controlledValue ?? internalValue;
+    const isControlled = controlledValue !== undefined;
+    const updateValue = (newValue)=>{
+        if (readOnly) return;
+        const clampedMin = clamp(snapToStep(newValue.min, step, min), min, newValue.max - minRange);
+        const clampedMax = clamp(snapToStep(newValue.max, step, min), newValue.min + minRange, max);
+        const finalValue = {
+            min: clampedMin,
+            max: clampedMax
+        };
+        if (!isControlled) {
+            setInternalValue(finalValue);
+        }
+        onChange?.(finalValue);
+    };
+    const getValueFromPosition = (clientX, clientY)=>{
+        if (!trackRef.current) return min;
+        const rect = trackRef.current.getBoundingClientRect();
+        const isHorizontal = orientation === "horizontal";
+        let percent;
+        if (isHorizontal) {
+            percent = (clientX - rect.left) / rect.width;
+        } else {
+            percent = 1 - (clientY - rect.top) / rect.height;
+        }
+        percent = clamp(percent, 0, 1);
+        return min + percent * (max - min);
+    };
+    const handleTrackClick = (e)=>{
+        if (disabled || readOnly) return;
+        const clickValue = getValueFromPosition(e.clientX, e.clientY);
+        const distToMin = Math.abs(clickValue - value.min);
+        const distToMax = Math.abs(clickValue - value.max);
+        if (distToMin <= distToMax) {
+            updateValue({
+                ...value,
+                min: clickValue
+            });
+        } else {
+            updateValue({
+                ...value,
+                max: clickValue
+            });
+        }
+    };
+    const debounceRef = useRef(null);
+    const handleDragStart = (thumb)=>{
+        if (disabled || readOnly) return;
+        setActiveThumb(thumb);
+    };
+    const handleDragEnd = ()=>{
+        if (activeThumb) {
+            setActiveThumb(null);
+            if (debounceMs > 0) {
+                if (debounceRef.current) clearTimeout(debounceRef.current);
+                debounceRef.current = setTimeout(()=>{
+                    onChangeCommit?.(value);
+                }, debounceMs);
+            } else {
+                onChangeCommit?.(value);
+            }
+        }
+    };
+    useEffect(()=>{
+        if (!activeThumb) return;
+        const handleMove = (e)=>{
+            e.preventDefault();
+            const clientX = "touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
+            const clientY = "touches" in e ? e.touches[0]?.clientY ?? 0 : e.clientY;
+            const newValue = getValueFromPosition(clientX, clientY);
+            if (activeThumb === "min") {
+                updateValue({
+                    ...value,
+                    min: Math.min(newValue, value.max - minRange)
+                });
+            } else {
+                updateValue({
+                    ...value,
+                    max: Math.max(newValue, value.min + minRange)
+                });
+            }
+        };
+        const handleUp = ()=>{
+            handleDragEnd();
+        };
+        document.addEventListener("mousemove", handleMove);
+        document.addEventListener("mouseup", handleUp);
+        document.addEventListener("touchmove", handleMove, {
+            passive: false
+        });
+        document.addEventListener("touchend", handleUp);
+        return ()=>{
+            document.removeEventListener("mousemove", handleMove);
+            document.removeEventListener("mouseup", handleUp);
+            document.removeEventListener("touchmove", handleMove);
+            document.removeEventListener("touchend", handleUp);
+        };
+    }, [
+        activeThumb,
+        value,
+        min,
+        max,
+        minRange
+    ]);
+    const handleKeyDown = (e, thumb)=>{
+        if (disabled || readOnly) return;
+        const currentValue = thumb === "min" ? value.min : value.max;
+        let newValue = currentValue;
+        switch(e.key){
+            case "ArrowRight":
+            case "ArrowUp":
+                newValue = currentValue + step;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                newValue = currentValue - step;
+                break;
+            case "PageUp":
+                newValue = currentValue + step * 10;
+                break;
+            case "PageDown":
+                newValue = currentValue - step * 10;
+                break;
+            case "Home":
+                newValue = min;
+                break;
+            case "End":
+                newValue = max;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (thumb === "min") {
+            updateValue({
+                ...value,
+                min: newValue
+            });
+        } else {
+            updateValue({
+                ...value,
+                max: newValue
+            });
+        }
+    };
+    const minPercent = (value.min - min) / (max - min) * 100;
+    const maxPercent = (value.max - min) / (max - min) * 100;
+    const showMinTooltip = showTooltip && (activeThumb === "min" || isHovering === "min");
+    const showMaxTooltip = showTooltip && (activeThumb === "max" || isHovering === "max");
+    const ticks = showTicks ? Array.from({
+        length: tickCount
+    }, (_, i)=>min + i / (tickCount - 1) * (max - min)) : [];
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, theme.container.orientation[orientation], disabled && theme.container.disabled, className),
+        ...props,
+        children: [
+            label && /*#__PURE__*/ _jsx("span", {
+                className: cn(theme.label.base, theme.label.size[size]),
+                id: `${props.id || "range"}-label`,
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: trackRef,
+                className: "relative",
+                onClick: handleTrackClick,
+                "aria-hidden": "true",
+                children: [
+                    /*#__PURE__*/ _jsx(RangeTrack, {
+                        min: min,
+                        max: max,
+                        value: value,
+                        size: size,
+                        variant: variant,
+                        orientation: orientation,
+                        disabled: disabled
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        ref: minThumbRef,
+                        role: "slider",
+                        tabIndex: disabled ? -1 : 0,
+                        "aria-label": ariaLabelMin || ariaLabel || "Minimum value",
+                        "aria-valuemin": min,
+                        "aria-valuemax": value.max - minRange,
+                        "aria-valuenow": value.min,
+                        "aria-valuetext": formatValue ? formatValue(value.min) : String(value.min),
+                        "aria-disabled": disabled,
+                        "aria-orientation": orientation,
+                        className: cn(theme.thumb.base, theme.thumb.size[size], theme.thumb.variant[variant], theme.thumb.shadow, !disabled && theme.thumb.states.hover, activeThumb === "min" && theme.thumb.states.active, disabled && theme.thumb.states.disabled),
+                        style: {
+                            left: `${minPercent}%`,
+                            top: "50%",
+                            transform: "translate(-50%, -50%)"
+                        },
+                        onMouseDown: (e)=>{
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleDragStart("min");
+                        },
+                        onTouchStart: (e)=>{
+                            e.stopPropagation();
+                            handleDragStart("min");
+                        },
+                        onMouseEnter: ()=>setIsHovering("min"),
+                        onMouseLeave: ()=>setIsHovering(null),
+                        onKeyDown: (e)=>handleKeyDown(e, "min"),
+                        onFocus: ()=>setIsHovering("min"),
+                        onBlur: ()=>setIsHovering(null),
+                        children: showMinTooltip && /*#__PURE__*/ _jsx("span", {
+                            className: cn(theme.tooltip.base, theme.tooltip.size[size], theme.tooltip.arrow),
+                            "aria-hidden": "true",
+                            children: formatValue ? formatValue(value.min) : value.min
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        ref: maxThumbRef,
+                        role: "slider",
+                        tabIndex: disabled ? -1 : 0,
+                        "aria-label": ariaLabelMax || ariaLabel || "Maximum value",
+                        "aria-valuemin": value.min + minRange,
+                        "aria-valuemax": max,
+                        "aria-valuenow": value.max,
+                        "aria-valuetext": formatValue ? formatValue(value.max) : String(value.max),
+                        "aria-disabled": disabled,
+                        "aria-orientation": orientation,
+                        className: cn(theme.thumb.base, theme.thumb.size[size], theme.thumb.variant[variant], theme.thumb.shadow, !disabled && theme.thumb.states.hover, activeThumb === "max" && theme.thumb.states.active, disabled && theme.thumb.states.disabled),
+                        style: {
+                            left: `${maxPercent}%`,
+                            top: "50%",
+                            transform: "translate(-50%, -50%)"
+                        },
+                        onMouseDown: (e)=>{
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleDragStart("max");
+                        },
+                        onTouchStart: (e)=>{
+                            e.stopPropagation();
+                            handleDragStart("max");
+                        },
+                        onMouseEnter: ()=>setIsHovering("max"),
+                        onMouseLeave: ()=>setIsHovering(null),
+                        onKeyDown: (e)=>handleKeyDown(e, "max"),
+                        onFocus: ()=>setIsHovering("max"),
+                        onBlur: ()=>setIsHovering(null),
+                        children: showMaxTooltip && /*#__PURE__*/ _jsx("span", {
+                            className: cn(theme.tooltip.base, theme.tooltip.size[size], theme.tooltip.arrow),
+                            "aria-hidden": "true",
+                            children: formatValue ? formatValue(value.max) : value.max
+                        })
+                    })
+                ]
+            }),
+            showTicks && /*#__PURE__*/ _jsx("div", {
+                className: theme.ticks.container,
+                style: {
+                    top: "100%",
+                    marginTop: "8px"
+                },
+                children: ticks.map((tick, i)=>/*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col items-center",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: theme.ticks.tick
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: theme.ticks.label,
+                                children: formatValue ? formatValue(tick) : tick
+                            })
+                        ]
+                    }, i))
+            }),
+            showLabels && /*#__PURE__*/ _jsxs("div", {
+                className: theme.labels.container,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.labels.label,
+                        children: minLabel || (formatValue ? formatValue(min) : min)
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.labels.label,
+                        children: maxLabel || (formatValue ? formatValue(max) : max)
+                    })
+                ]
+            })
+        ]
+    });
+}