@shipfox/react-ui 0.14.0 → 0.16.0

package/dist/components/code-block/code-block-footer.js

@@ -3,15 +3,17 @@ import { Slot } from '@radix-ui/react-slot';
 import { Icon } from '../../components/icon/icon.js';
 import { ShinyText } from '../../components/shiny-text/index.js';
 import { Text } from '../../components/typography/index.js';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme.js';
 import { ShipfoxLoader } from 'shipfox-loader-react';
 import { cn } from '../../utils/cn.js';
 export function CodeBlockFooter({ className, asChild = false, state = 'running', message, description, icon, children, ...props }) {
     const Comp = asChild ? Slot : 'div';
+    const resolvedTheme = useResolvedTheme();
     const defaultIcon = icon ?? (state === 'running' ? /*#__PURE__*/ _jsx(ShipfoxLoader, {
         size: 20,
         animation: "circular",
-        color: "white",
-        background: "dark"
+        color: resolvedTheme === 'dark' ? 'white' : 'orange',
+        background: resolvedTheme === 'dark' ? 'dark' : 'light'
     }) : /*#__PURE__*/ _jsx(Icon, {
         name: "checkCircleSolid",
         className: "size-20 text-foreground-neutral-base",

package/dist/components/command/command.d.ts

@@ -0,0 +1,28 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Command as CommandPrimitive } from 'cmdk';
+import { type ComponentProps } from 'react';
+import { Kbd } from '../kbd';
+declare const commandTriggerVariants: (props?: ({
+    variant?: "base" | "component" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CommandTriggerProps = ComponentProps<'button'> & VariantProps<typeof commandTriggerVariants> & {
+    placeholder?: string;
+};
+declare const CommandTrigger: import("react").ForwardRefExoticComponent<Omit<CommandTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ children, ...props }: ComponentProps<typeof CommandPrimitive.Dialog>): import("react/jsx-runtime").JSX.Element;
+type CommandInputProps = ComponentProps<typeof CommandPrimitive.Input> & {
+    showClearButton?: boolean;
+    onClear?: () => void;
+};
+declare function CommandInput({ className, value, onValueChange, onClear, showClearButton, ...props }: CommandInputProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, children, ...props }: ComponentProps<typeof Kbd>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandTrigger, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, commandTriggerVariants, };
+export type { CommandTriggerProps, CommandInputProps };
+//# sourceMappingURL=command.d.ts.map

package/dist/components/command/command.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Command as CommandPrimitive } from 'cmdk';
+import { forwardRef, useCallback, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { Kbd } from '../kbd/index.js';
+const commandTriggerVariants = cva([
+    'flex items-center justify-between gap-8',
+    'w-full rounded-6 px-8 text-sm leading-20',
+    'bg-background-field-base text-foreground-neutral-base',
+    'shadow-button-neutral transition-[color,box-shadow] outline-none',
+    'hover:bg-background-field-hover cursor-pointer',
+    'focus-visible:shadow-border-interactive-with-active',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled'
+], {
+    variants: {
+        variant: {
+            base: 'bg-background-field-base',
+            component: 'bg-background-field-component'
+        },
+        size: {
+            small: 'h-28 py-4',
+            base: 'h-32 py-6'
+        }
+    },
+    defaultVariants: {
+        variant: 'base',
+        size: 'base'
+    }
+});
+const CommandTrigger = /*#__PURE__*/ forwardRef(({ className, variant, size, placeholder, children, ...props }, ref)=>{
+    const hasValue = Boolean(children);
+    return /*#__PURE__*/ _jsxs("button", {
+        ref: ref,
+        type: "button",
+        "data-slot": "command-trigger",
+        "data-placeholder": !hasValue || undefined,
+        className: cn(commandTriggerVariants({
+            variant,
+            size
+        }), 'data-placeholder:text-foreground-neutral-muted', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "flex-1 text-left truncate",
+                children: hasValue ? children : placeholder
+            }),
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "arrowDownSLine",
+                className: "size-16 text-foreground-neutral-muted shrink-0"
+            })
+        ]
+    });
+});
+CommandTrigger.displayName = 'CommandTrigger';
+function Command({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive, {
+        "data-slot": "command",
+        className: cn('flex h-full w-full flex-col overflow-hidden rounded-10', 'bg-background-neutral-overlay text-foreground-neutral-base', className),
+        ...props
+    });
+}
+function CommandDialog({ children, ...props }) {
+    return /*#__PURE__*/ _jsxs(CommandPrimitive.Dialog, {
+        "data-slot": "command-dialog",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "fixed inset-0 z-50 bg-background-neutral-overlay/80 backdrop-blur-sm"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "fixed left-1/2 top-1/2 z-50 w-full max-w-600 -translate-x-1/2 -translate-y-1/2 p-16",
+                children: /*#__PURE__*/ _jsx(Command, {
+                    className: "shadow-tooltip",
+                    children: children
+                })
+            })
+        ]
+    });
+}
+function CommandInput({ className, value, onValueChange, onClear, showClearButton = true, ...props }) {
+    const [internalValue, setInternalValue] = useState('');
+    const isControlled = value !== undefined;
+    const inputValue = isControlled ? value : internalValue;
+    const hasValue = Boolean(inputValue);
+    const handleValueChange = useCallback((newValue)=>{
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [
+        isControlled,
+        onValueChange
+    ]);
+    const handleClear = useCallback(()=>{
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        onValueChange?.('');
+        onClear?.();
+    }, [
+        isControlled,
+        onValueChange,
+        onClear
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (e.key === 'Escape' && hasValue) {
+            e.preventDefault();
+            e.stopPropagation();
+            handleClear();
+        }
+    }, [
+        hasValue,
+        handleClear
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex items-center gap-8 border-b border-border-neutral-strong p-8",
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: "size-16 shrink-0 text-foreground-neutral-muted"
+            }),
+            /*#__PURE__*/ _jsx(CommandPrimitive.Input, {
+                "data-slot": "command-input",
+                value: inputValue,
+                onValueChange: handleValueChange,
+                onKeyDown: handleKeyDown,
+                className: cn('flex-1 bg-transparent text-sm leading-20 outline-none', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled', className),
+                ...props
+            }),
+            showClearButton && hasValue && /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: handleClear,
+                className: cn('shrink-0 cursor-pointer rounded-4 p-2', 'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors'),
+                "aria-label": "Clear search",
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "closeLine",
+                    className: "size-16"
+                })
+            })
+        ]
+    });
+}
+function CommandList({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.List, {
+        "data-slot": "command-list",
+        className: cn('max-h-300 overflow-y-auto overflow-x-hidden p-4 scrollbar', className),
+        ...props
+    });
+}
+function CommandEmpty({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
+        "data-slot": "command-empty",
+        className: cn('py-24 text-center text-sm text-foreground-neutral-muted', className),
+        ...props
+    });
+}
+function CommandGroup({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Group, {
+        "data-slot": "command-group",
+        className: cn('overflow-hidden', '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4', '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20', '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle', '[&_[cmdk-group-heading]]:select-none', className),
+        ...props
+    });
+}
+function CommandSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, {
+        "data-slot": "command-separator",
+        className: cn('relative -mx-4 my-4 h-px', 'bg-border-neutral-menu-top', 'after:absolute after:inset-x-0 after:top-px after:h-px', 'after:bg-border-neutral-menu-bottom', className),
+        ...props
+    });
+}
+function CommandItem({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Item, {
+        "data-slot": "command-item",
+        className: cn('relative flex cursor-pointer select-none items-center gap-8 rounded-6 px-8 py-6', 'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors', 'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled', className),
+        ...props
+    });
+}
+function CommandShortcut({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx(Kbd, {
+        "data-slot": "command-shortcut",
+        className: cn('ml-auto', className),
+        ...props,
+        children: children
+    });
+}
+export { Command, CommandTrigger, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, commandTriggerVariants };
+
+//# sourceMappingURL=command.js.map

package/dist/components/command/command.stories.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Icon } from '../icon/index.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover/index.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommandTrigger } from './command.js';
+const meta = {
+    title: 'Components/Command',
+    component: Command,
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsxs(Command, {
+            className: "rounded-10 shadow-tooltip max-w-400",
+            children: [
+                /*#__PURE__*/ _jsx(CommandInput, {
+                    placeholder: "Type a command or search..."
+                }),
+                /*#__PURE__*/ _jsxs(CommandList, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CommandEmpty, {
+                            children: "No results found."
+                        }),
+                        /*#__PURE__*/ _jsxs(CommandGroup, {
+                            heading: "Suggestions",
+                            children: [
+                                /*#__PURE__*/ _jsxs(CommandItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "calendar2Line",
+                                            className: "size-16 mr-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "Calendar"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(CommandItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "emotion2Line",
+                                            className: "size-16 mr-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "Search Emoji"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(CommandItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "calculatorLine",
+                                            className: "size-16 mr-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "Calculator"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(CommandSeparator, {}),
+                        /*#__PURE__*/ _jsxs(CommandGroup, {
+                            heading: "Settings",
+                            children: [
+                                /*#__PURE__*/ _jsxs(CommandItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "user3Line",
+                                            className: "size-16 mr-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "Profile"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CommandShortcut, {
+                                            children: "⌘P"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(CommandItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "mailLine",
+                                            className: "size-16 mr-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "Mail"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CommandShortcut, {
+                                            children: "⌘M"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(CommandItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "settings3Line",
+                                            className: "size-16 mr-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "Settings"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CommandShortcut, {
+                                            children: "⌘S"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const Combobox = {
+    render: ()=>{
+        const frameworks = [
+            {
+                value: 'next.js',
+                label: 'Next.js',
+                icon: 'reactjsLine'
+            },
+            {
+                value: 'sveltekit',
+                label: 'SvelteKit',
+                icon: 'svelteLine'
+            },
+            {
+                value: 'nuxt.js',
+                label: 'Nuxt.js',
+                icon: 'vuejsLine'
+            },
+            {
+                value: 'remix',
+                label: 'Remix',
+                icon: 'reactjsLine'
+            },
+            {
+                value: 'astro',
+                label: 'Astro',
+                icon: 'rocketLine'
+            },
+            {
+                value: 'vue',
+                label: 'Vue',
+                icon: 'vuejsLine'
+            },
+            {
+                value: 'react',
+                label: 'React',
+                icon: 'reactjsLine'
+            }
+        ];
+        function ComboboxDemo() {
+            const [open, setOpen] = useState(false);
+            const [value, setValue] = useState('');
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-16",
+                children: [
+                    /*#__PURE__*/ _jsxs(Popover, {
+                        open: open,
+                        onOpenChange: setOpen,
+                        children: [
+                            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ _jsx(CommandTrigger, {
+                                    className: "w-280",
+                                    placeholder: "Select framework...",
+                                    children: value ? frameworks.find((framework)=>framework.value === value)?.label : null
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(PopoverContent, {
+                                className: "w-280 p-0",
+                                align: "start",
+                                children: /*#__PURE__*/ _jsxs(Command, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CommandInput, {
+                                            placeholder: "Search framework..."
+                                        }),
+                                        /*#__PURE__*/ _jsxs(CommandList, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(CommandEmpty, {
+                                                    children: "No framework found."
+                                                }),
+                                                /*#__PURE__*/ _jsx(CommandGroup, {
+                                                    children: frameworks.map((framework)=>/*#__PURE__*/ _jsxs(CommandItem, {
+                                                            value: framework.value,
+                                                            onSelect: (currentValue)=>{
+                                                                setValue(currentValue === value ? '' : currentValue);
+                                                                setOpen(false);
+                                                            },
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Icon, {
+                                                                    name: "check",
+                                                                    className: `size-16 mr-8 ${value === framework.value ? 'opacity-100' : 'opacity-0'}`
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(Icon, {
+                                                                    name: framework.icon,
+                                                                    className: "size-16 mr-8"
+                                                                }),
+                                                                framework.label
+                                                            ]
+                                                        }, framework.value))
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    value && /*#__PURE__*/ _jsxs("p", {
+                        className: "text-sm text-foreground-neutral-muted",
+                        children: [
+                            "Selected: ",
+                            frameworks.find((f)=>f.value === value)?.label
+                        ]
+                    })
+                ]
+            });
+        }
+        return /*#__PURE__*/ _jsx(ComboboxDemo, {});
+    }
+};
+
+//# sourceMappingURL=command.stories.js.map

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

@@ -0,0 +1,2 @@
+export * from './command';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/command/index.js

@@ -0,0 +1,3 @@
+export * from './command.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/dashboard/components/animated-logo.d.ts

@@ -0,0 +1,4 @@
+export declare function AnimatedLogo({ scrollProgress }: {
+    scrollProgress: number;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=animated-logo.d.ts.map

package/dist/components/dashboard/components/animated-logo.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../../../components/icon/index.js';
+import { motion } from 'framer-motion';
+const LOGO_HEIGHT = 48;
+export function AnimatedLogo({ scrollProgress }) {
+    const isVisible = scrollProgress > 0;
+    if (!isVisible) return null;
+    const easedProgress = 1 - (1 - scrollProgress) ** 3;
+    return /*#__PURE__*/ _jsx(motion.div, {
+        className: "fixed top-0 left-0 z-50 flex items-center justify-center shrink-0 w-48 h-48 bg-background-neutral-base",
+        style: {
+            opacity: easedProgress,
+            transform: `translateY(${-LOGO_HEIGHT + easedProgress * LOGO_HEIGHT}px)`
+        },
+        initial: false,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            name: "shipfox",
+            className: "size-20 text-foreground-neutral-subtle"
+        })
+    });
+}
+
+//# sourceMappingURL=animated-logo.js.map

package/dist/components/dashboard/components/charts/bar-chart.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps } from 'react';
+import { type BarProps, BarChart as RechartsBarChart } from 'recharts';
+import { type ChartColor } from './colors';
+export type RechartsBarChartProps = ComponentProps<typeof RechartsBarChart>;
+export interface BarChartBar extends Omit<BarProps, 'dataKey'> {
+    dataKey: string;
+    name?: string;
+    color?: ChartColor;
+}
+export interface BarChartProps {
+    data: RechartsBarChartProps['data'];
+    bars: BarChartBar[];
+    syncId?: RechartsBarChartProps['syncId'];
+    height?: number;
+    xAxis?: {
+        dataKey?: string;
+        tickFormatter?: (value: string) => string;
+        hide?: boolean;
+        interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+    };
+    yAxis?: {
+        domain?: [number, number];
+        ticks?: number[];
+        hide?: boolean;
+    };
+    grid?: {
+        vertical?: boolean;
+        horizontal?: boolean;
+    };
+    tooltip?: {
+        labelFormatter?: (label: string) => string;
+    };
+    className?: string;
+    title?: string;
+    barRadius?: [number, number, number, number];
+    maxBarSize?: number;
+}
+export declare function BarChart({ data, bars, height, xAxis, yAxis, grid, tooltip, className, title, barRadius, maxBarSize, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bar-chart.d.ts.map

package/dist/components/dashboard/components/charts/bar-chart.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Bar, CartesianGrid, BarChart as RechartsBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { cn } from '../../../../utils/cn.js';
+import { ChartTooltipContent } from './chart-tooltip.js';
+import { chartColors, chartColorsList } from './colors.js';
+export function BarChart({ data, bars, height = 200, xAxis, yAxis, grid, tooltip, className, title, barRadius = [
+    2,
+    2,
+    0,
+    0
+], maxBarSize = 8 }) {
+    const [hoveredDataKey, setHoveredDataKey] = useState(undefined);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base', className),
+        children: [
+            title && /*#__PURE__*/ _jsx("p", {
+                className: "text-sm font-medium text-foreground-neutral-base mb-12",
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    height
+                },
+                children: /*#__PURE__*/ _jsx(ResponsiveContainer, {
+                    width: "100%",
+                    height: "100%",
+                    children: /*#__PURE__*/ _jsxs(RechartsBarChart, {
+                        data: data,
+                        margin: {
+                            top: 8,
+                            right: 8,
+                            left: -20,
+                            bottom: 0
+                        },
+                        children: [
+                            !xAxis?.hide && /*#__PURE__*/ _jsx(XAxis, {
+                                dataKey: xAxis?.dataKey ?? 'label',
+                                axisLine: false,
+                                tickLine: false,
+                                tick: {
+                                    fill: 'var(--foreground-neutral-muted)',
+                                    fontSize: 12
+                                },
+                                tickFormatter: xAxis?.tickFormatter,
+                                interval: xAxis?.interval ?? 'preserveStartEnd'
+                            }),
+                            !yAxis?.hide && /*#__PURE__*/ _jsx(YAxis, {
+                                axisLine: false,
+                                tickLine: false,
+                                tick: {
+                                    fill: 'var(--foreground-neutral-muted)',
+                                    fontSize: 12
+                                },
+                                domain: yAxis?.domain,
+                                ticks: yAxis?.ticks
+                            }),
+                            /*#__PURE__*/ _jsx(CartesianGrid, {
+                                strokeDasharray: "3 3",
+                                stroke: "var(--border-neutral-base)",
+                                vertical: grid?.vertical ?? false,
+                                horizontal: grid?.horizontal ?? true
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                cursor: {
+                                    fill: 'var(--background-neutral-hover)'
+                                },
+                                content: (props)=>{
+                                    if (!props.active) return null;
+                                    return /*#__PURE__*/ _jsx(ChartTooltipContent, {
+                                        active: props.active,
+                                        label: props.label,
+                                        payload: props.payload,
+                                        hoveredDataKey: hoveredDataKey,
+                                        labelFormatter: tooltip?.labelFormatter
+                                    });
+                                }
+                            }),
+                            bars.map((bar, index)=>{
+                                const defaultColor = bar.color ? chartColors[bar.color] : chartColorsList[index % chartColorsList.length];
+                                const fillOpacity = hoveredDataKey ? hoveredDataKey === bar.dataKey ? 1 : 0.25 : 1;
+                                const { dataKey, name, ...restBar } = bar;
+                                return /*#__PURE__*/ _jsx(Bar, {
+                                    dataKey: dataKey,
+                                    name: name ?? dataKey,
+                                    fill: defaultColor,
+                                    fillOpacity: fillOpacity,
+                                    radius: barRadius,
+                                    maxBarSize: maxBarSize,
+                                    onMouseEnter: ()=>setHoveredDataKey(dataKey),
+                                    onMouseLeave: ()=>setHoveredDataKey(undefined),
+                                    isAnimationActive: false,
+                                    ...restBar
+                                }, dataKey);
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=bar-chart.js.map

package/dist/components/dashboard/components/charts/chart-tooltip.d.ts

@@ -0,0 +1,14 @@
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    label?: string | number;
+    payload?: ReadonlyArray<{
+        name?: string;
+        value?: string | number;
+        dataKey?: string | number;
+        color?: string;
+    }>;
+    hoveredDataKey?: string;
+    labelFormatter?: (label: string) => string;
+}
+export declare function ChartTooltipContent({ active, label, payload, hoveredDataKey, labelFormatter, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=chart-tooltip.d.ts.map