@shipfox/react-ui 0.17.0 → 0.19.0

package/dist/components/calendar/calendar.js

@@ -5,34 +5,34 @@ import { cn } from '../../utils/cn.js';
 export function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
     return /*#__PURE__*/ _jsx(DayPicker, {
         showOutsideDays: showOutsideDays,
-        className: cn('p-16 transition-colors', className),
+        className: cn('transition-colors', className),
         classNames: {
-            months: 'flex flex-col sm:flex-row gap-24',
-            month: 'space-y-16 relative',
-            month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32',
+            months: 'flex flex-col sm:flex-row gap-0',
+            month: 'space-y-16 relative p-16 border-r border-border-neutral-base-component last:border-r-0',
+            month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32 bg-background-field-base rounded-8 shadow-tooltip',
             caption_label: 'text-sm font-medium text-foreground-neutral-base',
             nav: 'flex items-center gap-4 fixed left-0 top-16 w-full z-10',
-            button_previous: cn('size-32 bg-transparent p-0 absolute left-16 top-0', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-base', 'hover:bg-background-button-transparent-hover', 'active:bg-background-button-transparent-pressed', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
-            button_next: cn('size-32 bg-transparent p-0 absolute right-16 top-0', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-base', 'hover:bg-background-button-transparent-hover', 'active:bg-background-button-transparent-pressed', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
+            button_previous: cn('size-32 bg-transparent p-0 absolute left-16 top-0 cursor-pointer', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-muted', 'hover:bg-transparent hover:text-foreground-neutral-subtle', 'active:bg-transparent', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
+            button_next: cn('size-32 bg-transparent p-0 absolute right-16 top-0 cursor-pointer', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-muted', 'hover:bg-transparent hover:text-foreground-neutral-subtle', 'active:bg-transparent', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
             month_grid: 'w-full border-collapse mt-8',
-            weekdays: 'flex mb-8',
+            weekdays: 'flex gap-8',
             weekday: 'text-foreground-neutral-subtle text-xs font-medium w-36 h-32 flex items-center justify-center',
-            week: 'flex mt-4',
+            week: 'flex mt-8 gap-8',
             day: cn('relative text-center size-36 p-0 text-sm font-normal [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', '[&:last-child[data-selected=true]_button]:rounded-r-6', props.showWeekNumber ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-6' : '[&:first-child[data-selected=true]_button]:rounded-l-6'),
             day_button: cn('size-36 p-0 text-sm font-normal rounded-6', 'inline-flex items-center justify-center', 'hover:bg-background-button-transparent-hover', 'focus-visible:shadow-border-interactive-with-active', 'transition-colors outline-none', 'aria-selected:opacity-100'),
             range_start: 'day-range-start rounded-6',
             range_end: 'day-range-end rounded-6',
-            selected: cn('bg-foreground-highlight-interactive/80 !text-foreground-neutral-base font-medium rounded-6', 'hover:bg-foreground-highlight-interactive-hover/80', 'focus:bg-foreground-highlight-interactive/80'),
-            today: cn('bg-background-field-base text-foreground-neutral-base font-medium rounded-6', 'border border-border-neutral-base'),
+            selected: cn('bg-foreground-highlight-interactive/80 !text-foreground-neutral-on-inverted font-medium rounded-6', 'hover:bg-foreground-highlight-interactive-hover/80', 'focus:bg-foreground-highlight-interactive/80'),
+            today: cn('relative font-medium rounded-6', 'after:absolute after:bottom-[6px] after:left-1/2 after:-translate-x-1/2', 'after:size-[3px] after:rounded-full after:bg-[var(--color-primary-400)]'),
             outside: 'day-outside text-foreground-neutral-muted',
             disabled: 'text-foreground-neutral-disabled opacity-30 cursor-not-allowed',
-            range_middle: cn('aria-selected:bg-foreground-highlight-interactive/10 aria-selected:text-foreground-neutral-base', 'rounded-none', 'first:rounded-l-6 first:rounded-r-none', 'last:rounded-r-6 last:rounded-l-none'),
+            range_middle: cn('aria-selected:bg-background-highlight-base aria-selected:!text-foreground-highlight-interactive'),
             hidden: 'invisible',
             ...classNames
         },
         components: {
             Chevron: ({ orientation })=>{
-                const iconName = orientation === 'left' ? 'arrowLeftSLine' : 'arrowRightSLine';
+                const iconName = orientation === 'left' ? 'arrowLeftSFill' : 'arrowRightSFill';
                 return /*#__PURE__*/ _jsx(Icon, {
                     name: iconName,
                     className: "size-20"

package/dist/components/count-up/count-up.d.ts

@@ -0,0 +1,14 @@
+export interface CountUpProps {
+    to: number;
+    from?: number;
+    direction?: 'up' | 'down';
+    delay?: number;
+    duration?: number;
+    className?: string;
+    startWhen?: boolean;
+    separator?: string;
+    onStart?: () => void;
+    onEnd?: () => void;
+}
+export declare function CountUp({ to, from, direction, delay, duration, className, startWhen, separator, onStart, onEnd, }: CountUpProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=count-up.d.ts.map

package/dist/components/count-up/count-up.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInView, useMotionValue, useSpring } from 'framer-motion';
+import { useCallback, useEffect, useRef } from 'react';
+export function CountUp({ to, from = 0, direction = 'up', delay = 0, duration = 2, className = '', startWhen = true, separator = '', onStart, onEnd }) {
+    const ref = useRef(null);
+    const motionValue = useMotionValue(direction === 'down' ? to : from);
+    const damping = 20 + 40 * (1 / duration);
+    const stiffness = 100 * (1 / duration);
+    const springValue = useSpring(motionValue, {
+        damping,
+        stiffness
+    });
+    const isInView = useInView(ref, {
+        once: true,
+        margin: '0px'
+    });
+    const getDecimalPlaces = (num)=>{
+        const str = num.toString();
+        if (str.includes('.')) {
+            const decimals = str.split('.')[1];
+            if (parseInt(decimals, 10) !== 0) {
+                return decimals.length;
+            }
+        }
+        return 0;
+    };
+    const maxDecimals = Math.max(getDecimalPlaces(from), getDecimalPlaces(to));
+    const formatValue = useCallback((latest)=>{
+        const hasDecimals = maxDecimals > 0;
+        const options = {
+            useGrouping: !!separator,
+            minimumFractionDigits: hasDecimals ? maxDecimals : 0,
+            maximumFractionDigits: hasDecimals ? maxDecimals : 0
+        };
+        const formattedNumber = Intl.NumberFormat('en-US', options).format(latest);
+        return separator ? formattedNumber.replace(/,/g, separator) : formattedNumber;
+    }, [
+        maxDecimals,
+        separator
+    ]);
+    useEffect(()=>{
+        if (ref.current) {
+            ref.current.textContent = formatValue(direction === 'down' ? to : from);
+        }
+    }, [
+        from,
+        to,
+        direction,
+        formatValue
+    ]);
+    useEffect(()=>{
+        if (isInView && startWhen) {
+            if (typeof onStart === 'function') {
+                onStart();
+            }
+            const timeoutId = setTimeout(()=>{
+                motionValue.set(direction === 'down' ? from : to);
+            }, delay * 1000);
+            const durationTimeoutId = setTimeout(()=>{
+                if (typeof onEnd === 'function') {
+                    onEnd();
+                }
+            }, delay * 1000 + duration * 1000);
+            return ()=>{
+                clearTimeout(timeoutId);
+                clearTimeout(durationTimeoutId);
+            };
+        }
+    }, [
+        isInView,
+        startWhen,
+        motionValue,
+        direction,
+        from,
+        to,
+        delay,
+        onStart,
+        onEnd,
+        duration
+    ]);
+    useEffect(()=>{
+        const unsubscribe = springValue.on('change', (latest)=>{
+            if (ref.current) {
+                ref.current.textContent = formatValue(latest);
+            }
+        });
+        return ()=>unsubscribe();
+    }, [
+        springValue,
+        formatValue
+    ]);
+    return /*#__PURE__*/ _jsx("span", {
+        className: className,
+        ref: ref
+    });
+}
+
+//# sourceMappingURL=count-up.js.map