@shipfox/react-ui 0.15.0 → 0.16.0

package/dist/components/button-group/button-group.stories.js

@@ -186,12 +186,12 @@ export const Default = {
                             children: "Basic Button Group"
                         }),
                         /*#__PURE__*/ _jsxs(ButtonGroup, {
-                            "aria-label": "Text alignment",
+                            "aria-label": "Playback controls",
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "secondary",
                                     size: "sm",
-                                    "aria-label": "Align left",
+                                    "aria-label": "Rewind",
                                     children: /*#__PURE__*/ _jsx(Icon, {
                                         name: "rewindFill",
                                         className: "size-14 text-foreground-neutral-subtle"
@@ -201,7 +201,7 @@ export const Default = {
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "secondary",
                                     size: "sm",
-                                    "aria-label": "Align center",
+                                    "aria-label": "Play",
                                     children: /*#__PURE__*/ _jsx(Icon, {
                                         name: "playFill",
                                         className: "size-14 text-foreground-neutral-subtle"
@@ -211,7 +211,7 @@ export const Default = {
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "secondary",
                                     size: "sm",
-                                    "aria-label": "Align right",
+                                    "aria-label": "Speed",
                                     children: /*#__PURE__*/ _jsx(Icon, {
                                         name: "speedFill",
                                         className: "size-14 text-foreground-neutral-subtle"

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

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../../utils/cn.js';
+export function ChartTooltipContent({ active, label, payload, hoveredDataKey, labelFormatter }) {
+    const isVisible = active && payload && payload.length;
+    if (!isVisible) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex flex-col gap-4 rounded-8 border border-border-neutral-base', 'bg-background-neutral-overlay p-12 shadow-tooltip'),
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-xs text-foreground-neutral-muted",
+                children: labelFormatter ? labelFormatter(String(label)) : label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "h-px w-full bg-border-neutral-base"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-col gap-4",
+                children: payload.map((item, index)=>/*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-8",
+                        style: {
+                            opacity: hoveredDataKey ? item.dataKey === hoveredDataKey ? 1 : 0.5 : 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "size-8 rounded-full shrink-0",
+                                style: {
+                                    backgroundColor: item.color
+                                }
+                            }),
+                            item.name && /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs text-foreground-neutral-subtle",
+                                children: item.name
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs text-foreground-neutral-base font-medium ml-auto tabular-nums",
+                                children: item.value
+                            })
+                        ]
+                    }, item.name ?? index.toString()))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=chart-tooltip.js.map

package/dist/components/dashboard/components/charts/colors.d.ts

@@ -0,0 +1,11 @@
+export declare const chartColors: {
+    readonly blue: "var(--color-blue-500)";
+    readonly green: "var(--color-green-500)";
+    readonly orange: "var(--color-orange-500)";
+    readonly purple: "var(--color-purple-500)";
+    readonly red: "var(--color-red-500)";
+    readonly neutral: "var(--foreground-neutral-muted)";
+};
+export type ChartColor = keyof typeof chartColors;
+export declare const chartColorsList: ("var(--color-blue-500)" | "var(--color-green-500)" | "var(--color-orange-500)" | "var(--color-purple-500)" | "var(--color-red-500)")[];
+//# sourceMappingURL=colors.d.ts.map

package/dist/components/dashboard/components/charts/colors.js

@@ -0,0 +1,17 @@
+export const chartColors = {
+    blue: 'var(--color-blue-500)',
+    green: 'var(--color-green-500)',
+    orange: 'var(--color-orange-500)',
+    purple: 'var(--color-purple-500)',
+    red: 'var(--color-red-500)',
+    neutral: 'var(--foreground-neutral-muted)'
+};
+export const chartColorsList = [
+    chartColors.blue,
+    chartColors.green,
+    chartColors.orange,
+    chartColors.purple,
+    chartColors.red
+];
+
+//# sourceMappingURL=colors.js.map

package/dist/components/dashboard/components/charts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './bar-chart';
+export * from './chart-tooltip';
+export * from './colors';
+export * from './line-chart';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dashboard/components/charts/index.js

@@ -0,0 +1,6 @@
+export * from './bar-chart.js';
+export * from './chart-tooltip.js';
+export * from './colors.js';
+export * from './line-chart.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,37 @@
+import type { ComponentProps } from 'react';
+import { type LineProps, LineChart as RechartsLineChart } from 'recharts';
+import { type ChartColor } from './colors';
+export type RechartsLineChartProps = ComponentProps<typeof RechartsLineChart>;
+export interface LineChartLine extends Omit<LineProps, 'dataKey' | 'strokeWidth'> {
+    dataKey: string;
+    name?: string;
+    strokeWidth?: number;
+    color?: ChartColor;
+}
+export interface LineChartProps {
+    data: RechartsLineChartProps['data'];
+    lines: LineChartLine[];
+    syncId?: RechartsLineChartProps['syncId'];
+    height?: number;
+    xAxis?: {
+        dataKey?: string;
+        tickFormatter?: (value: string) => string;
+        hide?: boolean;
+    };
+    yAxis?: {
+        domain?: [number, number];
+        ticks?: number[];
+        hide?: boolean;
+    };
+    grid?: {
+        vertical?: boolean;
+        horizontal?: boolean;
+    };
+    tooltip?: {
+        labelFormatter?: (label: string) => string;
+    };
+    className?: string;
+    title?: string;
+}
+export declare function LineChart({ data, lines, height, xAxis, yAxis, grid, tooltip, className, title, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=line-chart.d.ts.map

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

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CartesianGrid, Line, LineChart as RechartsLineChart, 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 LineChart({ data, lines, height = 200, xAxis, yAxis, grid, tooltip, className, title }) {
+    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(RechartsLineChart, {
+                        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
+                            }),
+                            !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, {
+                                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
+                                    });
+                                }
+                            }),
+                            lines.map((line, index)=>{
+                                const defaultColor = line.color ? chartColors[line.color] : chartColorsList[index % chartColorsList.length];
+                                const strokeWidth = line.strokeWidth ?? 2;
+                                const strokeOpacity = hoveredDataKey ? hoveredDataKey === line.dataKey ? 1 : 0.25 : 1;
+                                const { dataKey, name, ...restLine } = line;
+                                return /*#__PURE__*/ _jsx(Line, {
+                                    type: "monotone",
+                                    dataKey: dataKey,
+                                    name: name ?? dataKey,
+                                    stroke: defaultColor,
+                                    strokeWidth: strokeWidth,
+                                    strokeOpacity: strokeOpacity,
+                                    dot: false,
+                                    activeDot: {
+                                        r: strokeWidth * 2,
+                                        fill: defaultColor,
+                                        fillOpacity: strokeOpacity,
+                                        stroke: 'var(--background-neutral-base)',
+                                        strokeWidth,
+                                        strokeOpacity,
+                                        onMouseEnter: ()=>setHoveredDataKey(dataKey),
+                                        onMouseLeave: ()=>setHoveredDataKey(undefined)
+                                    },
+                                    onMouseEnter: ()=>setHoveredDataKey(dataKey),
+                                    onMouseLeave: ()=>setHoveredDataKey(undefined),
+                                    isAnimationActive: false,
+                                    ...restLine
+                                }, dataKey);
+                            })
+                        ]
+                    })
+                })
+            }),
+            lines.length > 0 && /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center justify-center gap-16 mt-12",
+                children: lines.map((line, index)=>{
+                    const color = line.color ? chartColors[line.color] : chartColorsList[index % chartColorsList.length];
+                    return /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-6",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "size-8 rounded-full",
+                                style: {
+                                    backgroundColor: color
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs text-foreground-neutral-subtle",
+                                children: line.name ?? line.dataKey
+                            })
+                        ]
+                    }, line.dataKey);
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=line-chart.js.map

package/dist/components/dashboard/components/dashboard-alert.d.ts

@@ -0,0 +1,8 @@
+export interface DashboardAlertProps {
+    title?: string;
+    description?: string;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare function DashboardAlert({ title, description, onDismiss, className, }: DashboardAlertProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard-alert.d.ts.map

package/dist/components/dashboard/components/dashboard-alert.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertClose, AlertContent, AlertDescription, AlertTitle } from '../../../components/alert/index.js';
+export function DashboardAlert({ title = 'Ship faster. At half the cost.', description = 'Track every workflow in one place, with full visibility into performance and reliability.', onDismiss, className }) {
+    return /*#__PURE__*/ _jsxs(Alert, {
+        variant: "info",
+        onOpenChange: (open)=>!open && onDismiss?.(),
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsxs(AlertContent, {
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx(AlertDescription, {
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(AlertClose, {})
+        ]
+    });
+}
+
+//# sourceMappingURL=dashboard-alert.js.map

package/dist/components/dashboard/components/kpi-card.d.ts

@@ -0,0 +1,15 @@
+export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info';
+export interface KpiCardProps {
+    label: string;
+    value: string | number;
+    variant?: KpiVariant;
+    className?: string;
+}
+export declare function KpiCard({ label, value, variant, className }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+export interface KpiCardsGroupProps {
+    cards: KpiCardProps[];
+    className?: string;
+}
+export declare function KpiCardsGroup({ cards, className }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultKpiCards: KpiCardProps[];
+//# sourceMappingURL=kpi-card.d.ts.map

package/dist/components/dashboard/components/kpi-card.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../components/typography/index.js';
+import { cn } from '../../../utils/cn.js';
+const variantDotStyles = {
+    neutral: 'bg-foreground-neutral-muted',
+    success: 'bg-green-500',
+    warning: 'bg-orange-500',
+    error: 'bg-red-500',
+    info: 'bg-blue-500'
+};
+export function KpiCard({ label, value, variant = 'neutral', className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex flex-col gap-4 p-12 rounded-8', 'bg-background-neutral-base border border-border-neutral-base', 'min-w-120 flex-1', className),
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-xs text-foreground-neutral-subtle",
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-6",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn('size-8 rounded-2 shrink-0', variantDotStyles[variant])
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        size: "sm",
+                        className: "font-medium text-foreground-neutral-base",
+                        children: value
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function KpiCardsGroup({ cards, className }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn(// Base layout
+        'flex gap-12 md:gap-16', // Mobile: Swipeable with scroll-snap
+        'overflow-x-auto scrollbar-none pb-4 md:pb-0', // Scroll snap for smooth swiping
+        'snap-x snap-mandatory', // Hide scrollbar but allow scrolling
+        '[&::-webkit-scrollbar]:hidden', // Smooth scrolling
+        'scroll-smooth', className),
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex gap-16 pl-12 md:pl-0 md:w-full",
+            children: cards.map((card, index)=>/*#__PURE__*/ _jsx(KpiCard, {
+                    ...card,
+                    className: cn(// Mobile: Show ~2 cards per view with peek of next
+                    'shrink-0 w-[calc((100vw-56px)/2)] md:w-auto', 'snap-start', // Desktop: Flex grow
+                    'md:flex-1')
+                }, `${card.label}-${index}`))
+        })
+    });
+}
+export const defaultKpiCards = [
+    {
+        label: 'Total',
+        value: '1211',
+        variant: 'neutral'
+    },
+    {
+        label: 'Success',
+        value: '1200',
+        variant: 'success'
+    },
+    {
+        label: 'Neutral',
+        value: '11',
+        variant: 'neutral'
+    },
+    {
+        label: 'Failure rate',
+        value: '0%',
+        variant: 'success'
+    }
+];
+
+//# sourceMappingURL=kpi-card.js.map

package/dist/components/dashboard/components/mobile-sidebar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Mobile Sidebar Component
+ *
+ * Drawer-based sidebar for mobile devices using DropdownMenu
+ */
+import type { SidebarNavItem } from './sidebar';
+export interface MobileSidebarProps {
+    items: SidebarNavItem[];
+    activeItemId?: string;
+    onItemClick?: (item: SidebarNavItem) => void;
+    className?: string;
+}
+/**
+ * Mobile Sidebar
+ *
+ * Hamburger menu that opens a dropdown with sidebar navigation
+ */
+export declare function MobileSidebar({ items, activeItemId, onItemClick, className }: MobileSidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=mobile-sidebar.d.ts.map

package/dist/components/dashboard/components/mobile-sidebar.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Mobile Sidebar Component
+ *
+ * Drawer-based sidebar for mobile devices using DropdownMenu
+ */ import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * Mobile Sidebar
+ *
+ * Hamburger menu that opens a dropdown with sidebar navigation
+ */ export function MobileSidebar({ items, activeItemId, onItemClick, className }) {
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "transparent",
+                    size: "sm",
+                    className: cn('lg:hidden', className),
+                    "aria-label": "Open navigation menu",
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        name: "menu2Line",
+                        className: "size-20"
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                side: "bottom",
+                align: "start",
+                size: "sm",
+                className: "space-y-4",
+                children: items.map((item)=>{
+                    const isActive = item.id === activeItemId;
+                    return /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: item.icon,
+                        onSelect: ()=>onItemClick?.(item),
+                        className: cn(isActive && 'bg-background-components-hover text-foreground-neutral-base font-medium'),
+                        iconStyle: "text-foreground-highlight-interactive",
+                        children: item.label
+                    }, item.id);
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=mobile-sidebar.js.map