@shipfox/react-ui 0.14.0 → 0.15.0

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/command.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/command/command.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {useState} from 'react';\nimport {Icon} from '../icon';\nimport {Popover, PopoverContent, PopoverTrigger} from '../popover';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n  CommandTrigger,\n} from './command';\n\nconst meta = {\n  title: 'Components/Command',\n  component: Command,\n  tags: ['autodocs'],\n} satisfies Meta<typeof Command>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: () => (\n    <Command className=\"rounded-10 shadow-tooltip max-w-400\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Icon name=\"calendar2Line\" className=\"size-16 mr-8\" />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Icon name=\"emotion2Line\" className=\"size-16 mr-8\" />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem>\n            <Icon name=\"calculatorLine\" className=\"size-16 mr-8\" />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <Icon name=\"user3Line\" className=\"size-16 mr-8\" />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Icon name=\"mailLine\" className=\"size-16 mr-8\" />\n            <span>Mail</span>\n            <CommandShortcut>⌘M</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Icon name=\"settings3Line\" className=\"size-16 mr-8\" />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  ),\n};\n\nexport const Combobox: Story = {\n  render: () => {\n    const frameworks = [\n      {value: 'next.js', label: 'Next.js', icon: 'reactjsLine' as const},\n      {value: 'sveltekit', label: 'SvelteKit', icon: 'svelteLine' as const},\n      {value: 'nuxt.js', label: 'Nuxt.js', icon: 'vuejsLine' as const},\n      {value: 'remix', label: 'Remix', icon: 'reactjsLine' as const},\n      {value: 'astro', label: 'Astro', icon: 'rocketLine' as const},\n      {value: 'vue', label: 'Vue', icon: 'vuejsLine' as const},\n      {value: 'react', label: 'React', icon: 'reactjsLine' as const},\n    ];\n\n    function ComboboxDemo() {\n      const [open, setOpen] = useState(false);\n      const [value, setValue] = useState('');\n\n      return (\n        <div className=\"flex flex-col gap-16\">\n          <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n              <CommandTrigger className=\"w-280\" placeholder=\"Select framework...\">\n                {value ? frameworks.find((framework) => framework.value === value)?.label : null}\n              </CommandTrigger>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-280 p-0\" align=\"start\">\n              <Command>\n                <CommandInput placeholder=\"Search framework...\" />\n                <CommandList>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                    {frameworks.map((framework) => (\n                      <CommandItem\n                        key={framework.value}\n                        value={framework.value}\n                        onSelect={(currentValue) => {\n                          setValue(currentValue === value ? '' : currentValue);\n                          setOpen(false);\n                        }}\n                      >\n                        <Icon\n                          name=\"check\"\n                          className={`size-16 mr-8 ${value === framework.value ? 'opacity-100' : 'opacity-0'}`}\n                        />\n                        <Icon name={framework.icon} className=\"size-16 mr-8\" />\n                        {framework.label}\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </PopoverContent>\n          </Popover>\n          {value && (\n            <p className=\"text-sm text-foreground-neutral-muted\">\n              Selected: {frameworks.find((f) => f.value === value)?.label}\n            </p>\n          )}\n        </div>\n      );\n    }\n\n    return <ComboboxDemo />;\n  },\n};\n"],"names":["useState","Icon","Popover","PopoverContent","PopoverTrigger","Command","CommandEmpty","CommandGroup","CommandInput","CommandItem","CommandList","CommandSeparator","CommandShortcut","CommandTrigger","meta","title","component","tags","Default","render","className","placeholder","heading","name","span","Combobox","frameworks","value","label","icon","ComboboxDemo","open","setOpen","setValue","div","onOpenChange","asChild","find","framework","align","map","onSelect","currentValue","p","f"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/command/index.js

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

package/dist/components/command/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/command/index.ts"],"sourcesContent":["export * from './command';\n"],"names":[],"mappings":"AAAA,cAAc,YAAY"}

package/dist/components/dashboard/components/analytics-content.d.ts

@@ -0,0 +1,2 @@
+export declare function AnalyticsContent(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=analytics-content.d.ts.map

package/dist/components/dashboard/components/analytics-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-content.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/components/analytics-content.tsx"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,4CAiG/B"}

package/dist/components/dashboard/components/analytics-content.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../../components/icon/index.js';
+import { Skeleton } from '../../../components/skeleton/index.js';
+import { Text } from '../../../components/typography/index.js';
+export function AnalyticsContent() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "min-h-[calc(100vh-48px)] p-12 md:p-24 space-y-16 md:space-y-20 bg-background-neutral-base",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col md:flex-row items-start md:items-center justify-between gap-12 md:gap-0",
+                children: [
+                    /*#__PURE__*/ _jsx(Skeleton, {
+                        className: "h-28 md:h-32 w-120 md:w-160"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-8 md:gap-16",
+                        children: [
+                            /*#__PURE__*/ _jsx(Skeleton, {
+                                className: "h-28 md:h-32 w-80 md:w-100"
+                            }),
+                            /*#__PURE__*/ _jsx(Skeleton, {
+                                className: "h-28 md:h-32 w-100 md:w-160"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex gap-12 md:gap-16 overflow-x-auto scrollbar pb-4 md:pb-0 -mx-12 px-12 md:mx-0 md:px-0",
+                children: [
+                    'Total',
+                    'Success',
+                    'Failed',
+                    'Neutral',
+                    'Failure rate'
+                ].map((label)=>/*#__PURE__*/ _jsxs("div", {
+                        className: "shrink-0 w-100 md:w-auto md:flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "text-xs text-foreground-neutral-subtle mb-4",
+                                children: label
+                            }),
+                            /*#__PURE__*/ _jsx(Skeleton, {
+                                className: "h-20 w-40"
+                            })
+                        ]
+                    }, label))
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col md:flex-row gap-16 md:gap-20",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "text-sm font-medium text-foreground-neutral-base mb-12",
+                                children: "Performance over time"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "h-120 md:h-160 flex items-center justify-center",
+                                children: /*#__PURE__*/ _jsxs("div", {
+                                    className: "text-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "fileChartLine",
+                                            className: "size-24 text-foreground-neutral-muted mx-auto mb-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: "text-sm text-foreground-neutral-subtle",
+                                            children: "Nothing here yet."
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "text-sm font-medium text-foreground-neutral-base mb-12",
+                                children: "Duration distribution"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "h-120 md:h-160 flex items-center justify-center",
+                                children: /*#__PURE__*/ _jsxs("div", {
+                                    className: "text-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            name: "barChartBoxLine",
+                                            className: "size-24 text-foreground-neutral-muted mx-auto mb-8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: "text-sm text-foreground-neutral-subtle",
+                                            children: "Nothing here yet."
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "rounded-8 bg-background-neutral-base border border-border-neutral-base overflow-hidden",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col md:flex-row items-start md:items-center justify-between p-12 gap-12 md:gap-0 border-b border-border-neutral-strong",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "text-sm font-medium text-foreground-neutral-base",
+                                children: "Jobs breakdown"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-8 md:gap-16 w-full md:w-auto",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Skeleton, {
+                                        className: "h-28 flex-1 md:flex-none md:w-200"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Skeleton, {
+                                        className: "h-28 w-28 shrink-0"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "py-48 md:py-64 flex flex-col items-center justify-center gap-12",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center",
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "shipfox",
+                                    className: "size-16 text-foreground-neutral-subtle",
+                                    color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "text-center space-y-4 px-16",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-base",
+                                        children: "No jobs yet"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "xs",
+                                        className: "text-foreground-neutral-muted",
+                                        children: "Import past runs or start a runner."
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "space-y-16",
+                children: Array.from({
+                    length: 3
+                }).map((_, i)=>{
+                    const blockId = `analytics-extra-block-${i}`;
+                    return /*#__PURE__*/ _jsxs("div", {
+                        className: "p-12 md:p-16 rounded-8 bg-background-subtle-base border border-border-neutral-strong",
+                        children: [
+                            /*#__PURE__*/ _jsx(Skeleton, {
+                                className: "h-16 w-full max-w-400 mb-8"
+                            }),
+                            /*#__PURE__*/ _jsx(Skeleton, {
+                                className: "h-12 w-full max-w-600"
+                            })
+                        ]
+                    }, blockId);
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=analytics-content.js.map

package/dist/components/dashboard/components/analytics-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/dashboard/components/analytics-content.tsx"],"sourcesContent":["import {Icon} from 'components/icon';\nimport {Skeleton} from 'components/skeleton';\nimport {Text} from 'components/typography';\n\nexport function AnalyticsContent() {\n  return (\n    <div className=\"min-h-[calc(100vh-48px)] p-12 md:p-24 space-y-16 md:space-y-20 bg-background-neutral-base\">\n      <div className=\"flex flex-col md:flex-row items-start md:items-center justify-between gap-12 md:gap-0\">\n        <Skeleton className=\"h-28 md:h-32 w-120 md:w-160\" />\n        <div className=\"flex items-center gap-8 md:gap-16\">\n          <Skeleton className=\"h-28 md:h-32 w-80 md:w-100\" />\n          <Skeleton className=\"h-28 md:h-32 w-100 md:w-160\" />\n        </div>\n      </div>\n\n      <div className=\"flex gap-12 md:gap-16 overflow-x-auto scrollbar pb-4 md:pb-0 -mx-12 px-12 md:mx-0 md:px-0\">\n        {['Total', 'Success', 'Failed', 'Neutral', 'Failure rate'].map((label) => (\n          <div\n            key={label}\n            className=\"shrink-0 w-100 md:w-auto md:flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base\"\n          >\n            <p className=\"text-xs text-foreground-neutral-subtle mb-4\">{label}</p>\n            <Skeleton className=\"h-20 w-40\" />\n          </div>\n        ))}\n      </div>\n\n      <div className=\"flex flex-col md:flex-row gap-16 md:gap-20\">\n        <div className=\"flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base\">\n          <p className=\"text-sm font-medium text-foreground-neutral-base mb-12\">\n            Performance over time\n          </p>\n          <div className=\"h-120 md:h-160 flex items-center justify-center\">\n            <div className=\"text-center\">\n              <Icon\n                name=\"fileChartLine\"\n                className=\"size-24 text-foreground-neutral-muted mx-auto mb-8\"\n              />\n              <p className=\"text-sm text-foreground-neutral-subtle\">Nothing here yet.</p>\n            </div>\n          </div>\n        </div>\n        <div className=\"flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base\">\n          <p className=\"text-sm font-medium text-foreground-neutral-base mb-12\">\n            Duration distribution\n          </p>\n          <div className=\"h-120 md:h-160 flex items-center justify-center\">\n            <div className=\"text-center\">\n              <Icon\n                name=\"barChartBoxLine\"\n                className=\"size-24 text-foreground-neutral-muted mx-auto mb-8\"\n              />\n              <p className=\"text-sm text-foreground-neutral-subtle\">Nothing here yet.</p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"rounded-8 bg-background-neutral-base border border-border-neutral-base overflow-hidden\">\n        <div className=\"flex flex-col md:flex-row items-start md:items-center justify-between p-12 gap-12 md:gap-0 border-b border-border-neutral-strong\">\n          <p className=\"text-sm font-medium text-foreground-neutral-base\">Jobs breakdown</p>\n          <div className=\"flex items-center gap-8 md:gap-16 w-full md:w-auto\">\n            <Skeleton className=\"h-28 flex-1 md:flex-none md:w-200\" />\n            <Skeleton className=\"h-28 w-28 shrink-0\" />\n          </div>\n        </div>\n        <div className=\"py-48 md:py-64 flex flex-col items-center justify-center gap-12\">\n          <div className=\"size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center\">\n            <Icon\n              name=\"shipfox\"\n              className=\"size-16 text-foreground-neutral-subtle\"\n              color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n            />\n          </div>\n          <div className=\"text-center space-y-4 px-16\">\n            <Text size=\"sm\" className=\"text-foreground-neutral-base\">\n              No jobs yet\n            </Text>\n            <Text size=\"xs\" className=\"text-foreground-neutral-muted\">\n              Import past runs or start a runner.\n            </Text>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-16\">\n        {Array.from({length: 3}).map((_, i) => {\n          const blockId = `analytics-extra-block-${i}`;\n          return (\n            <div\n              key={blockId}\n              className=\"p-12 md:p-16 rounded-8 bg-background-subtle-base border border-border-neutral-strong\"\n            >\n              <Skeleton className=\"h-16 w-full max-w-400 mb-8\" />\n              <Skeleton className=\"h-12 w-full max-w-600\" />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":["Icon","Skeleton","Text","AnalyticsContent","div","className","map","label","p","name","color","size","Array","from","length","_","i","blockId"],"mappings":";AAAA,SAAQA,IAAI,QAAO,kBAAkB;AACrC,SAAQC,QAAQ,QAAO,sBAAsB;AAC7C,SAAQC,IAAI,QAAO,wBAAwB;AAE3C,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,KAACJ;wBAASI,WAAU;;kCACpB,MAACD;wBAAIC,WAAU;;0CACb,KAACJ;gCAASI,WAAU;;0CACpB,KAACJ;gCAASI,WAAU;;;;;;0BAIxB,KAACD;gBAAIC,WAAU;0BACZ;oBAAC;oBAAS;oBAAW;oBAAU;oBAAW;iBAAe,CAACC,GAAG,CAAC,CAACC,sBAC9D,MAACH;wBAECC,WAAU;;0CAEV,KAACG;gCAAEH,WAAU;0CAA+CE;;0CAC5D,KAACN;gCAASI,WAAU;;;uBAJfE;;0BASX,MAACH;gBAAIC,WAAU;;kCACb,MAACD;wBAAIC,WAAU;;0CACb,KAACG;gCAAEH,WAAU;0CAAyD;;0CAGtE,KAACD;gCAAIC,WAAU;0CACb,cAAA,MAACD;oCAAIC,WAAU;;sDACb,KAACL;4CACCS,MAAK;4CACLJ,WAAU;;sDAEZ,KAACG;4CAAEH,WAAU;sDAAyC;;;;;;;kCAI5D,MAACD;wBAAIC,WAAU;;0CACb,KAACG;gCAAEH,WAAU;0CAAyD;;0CAGtE,KAACD;gCAAIC,WAAU;0CACb,cAAA,MAACD;oCAAIC,WAAU;;sDACb,KAACL;4CACCS,MAAK;4CACLJ,WAAU;;sDAEZ,KAACG;4CAAEH,WAAU;sDAAyC;;;;;;;;;0BAM9D,MAACD;gBAAIC,WAAU;;kCACb,MAACD;wBAAIC,WAAU;;0CACb,KAACG;gCAAEH,WAAU;0CAAmD;;0CAChE,MAACD;gCAAIC,WAAU;;kDACb,KAACJ;wCAASI,WAAU;;kDACpB,KAACJ;wCAASI,WAAU;;;;;;kCAGxB,MAACD;wBAAIC,WAAU;;0CACb,KAACD;gCAAIC,WAAU;0CACb,cAAA,KAACL;oCACCS,MAAK;oCACLJ,WAAU;oCACVK,OAAM;;;0CAGV,MAACN;gCAAIC,WAAU;;kDACb,KAACH;wCAAKS,MAAK;wCAAKN,WAAU;kDAA+B;;kDAGzD,KAACH;wCAAKS,MAAK;wCAAKN,WAAU;kDAAgC;;;;;;;;0BAOhE,KAACD;gBAAIC,WAAU;0BACZO,MAAMC,IAAI,CAAC;oBAACC,QAAQ;gBAAC,GAAGR,GAAG,CAAC,CAACS,GAAGC;oBAC/B,MAAMC,UAAU,CAAC,sBAAsB,EAAED,GAAG;oBAC5C,qBACE,MAACZ;wBAECC,WAAU;;0CAEV,KAACJ;gCAASI,WAAU;;0CACpB,KAACJ;gCAASI,WAAU;;;uBAJfY;gBAOX;;;;AAIR"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-logo.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/components/animated-logo.tsx"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAAC,EAAC,cAAc,EAAC,EAAE;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,kDAmBtE"}

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/animated-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/dashboard/components/animated-logo.tsx"],"sourcesContent":["import {Icon} from 'components/icon';\nimport {motion} from 'framer-motion';\n\nconst LOGO_HEIGHT = 48;\n\nexport function AnimatedLogo({scrollProgress}: {scrollProgress: number}) {\n  const isVisible = scrollProgress > 0;\n\n  if (!isVisible) return null;\n\n  const easedProgress = 1 - (1 - scrollProgress) ** 3;\n\n  return (\n    <motion.div\n      className=\"fixed top-0 left-0 z-50 flex items-center justify-center shrink-0 w-48 h-48 bg-background-neutral-base\"\n      style={{\n        opacity: easedProgress,\n        transform: `translateY(${-LOGO_HEIGHT + easedProgress * LOGO_HEIGHT}px)`,\n      }}\n      initial={false}\n    >\n      <Icon name=\"shipfox\" className=\"size-20 text-foreground-neutral-subtle\" />\n    </motion.div>\n  );\n}\n"],"names":["Icon","motion","LOGO_HEIGHT","AnimatedLogo","scrollProgress","isVisible","easedProgress","div","className","style","opacity","transform","initial","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,kBAAkB;AACrC,SAAQC,MAAM,QAAO,gBAAgB;AAErC,MAAMC,cAAc;AAEpB,OAAO,SAASC,aAAa,EAACC,cAAc,EAA2B;IACrE,MAAMC,YAAYD,iBAAiB;IAEnC,IAAI,CAACC,WAAW,OAAO;IAEvB,MAAMC,gBAAgB,IAAI,AAAC,CAAA,IAAIF,cAAa,KAAM;IAElD,qBACE,KAACH,OAAOM,GAAG;QACTC,WAAU;QACVC,OAAO;YACLC,SAASJ;YACTK,WAAW,CAAC,WAAW,EAAE,CAACT,cAAcI,gBAAgBJ,YAAY,GAAG,CAAC;QAC1E;QACAU,SAAS;kBAET,cAAA,KAACZ;YAAKa,MAAK;YAAUL,WAAU;;;AAGrC"}

package/dist/components/dashboard/components/complete-setup-button.d.ts

@@ -0,0 +1,4 @@
+export declare function CompleteSetupButton({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=complete-setup-button.d.ts.map

package/dist/components/dashboard/components/complete-setup-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"complete-setup-button.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/components/complete-setup-button.tsx"],"names":[],"mappings":"AAMA,wBAAgB,mBAAmB,CAAC,EAAC,SAAS,EAAC,EAAE;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,2CAuBpE"}

package/dist/components/dashboard/components/complete-setup-button.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { ShinyText } from '../../../components/shiny-text/index.js';
+import { useResolvedTheme } from '../../../hooks/useResolvedTheme.js';
+import { ShipfoxLoader } from 'shipfox-loader-react';
+import { cn } from '../../../utils/cn.js';
+export function CompleteSetupButton({ className }) {
+    const resolvedTheme = useResolvedTheme();
+    return /*#__PURE__*/ _jsxs(Button, {
+        type: "button",
+        variant: "transparent",
+        className: cn('flex items-center gap-8 min-w-124 max-w-280 overflow-hidden px-12 py-10 transition-colors rounded-none h-40 border-l border-border-neutral-strong', className),
+        children: [
+            /*#__PURE__*/ _jsx(ShipfoxLoader, {
+                size: 13,
+                animation: "circular",
+                color: resolvedTheme === 'dark' ? 'white' : 'orange',
+                background: resolvedTheme === 'dark' ? 'dark' : 'light'
+            }),
+            /*#__PURE__*/ _jsx(ShinyText, {
+                text: "Complete setup",
+                className: "flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-left"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=complete-setup-button.js.map

package/dist/components/dashboard/components/complete-setup-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/dashboard/components/complete-setup-button.tsx"],"sourcesContent":["import {Button} from 'components/button';\nimport {ShinyText} from 'components/shiny-text';\nimport {useResolvedTheme} from 'hooks/useResolvedTheme';\nimport {ShipfoxLoader} from 'shipfox-loader-react';\nimport {cn} from 'utils/cn';\n\nexport function CompleteSetupButton({className}: {className?: string}) {\n  const resolvedTheme = useResolvedTheme();\n  return (\n    <Button\n      type=\"button\"\n      variant=\"transparent\"\n      className={cn(\n        'flex items-center gap-8 min-w-124 max-w-280 overflow-hidden px-12 py-10 transition-colors rounded-none h-40 border-l border-border-neutral-strong',\n        className,\n      )}\n    >\n      <ShipfoxLoader\n        size={13}\n        animation=\"circular\"\n        color={resolvedTheme === 'dark' ? 'white' : 'orange'}\n        background={resolvedTheme === 'dark' ? 'dark' : 'light'}\n      />\n      <ShinyText\n        text=\"Complete setup\"\n        className=\"flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-left\"\n      />\n    </Button>\n  );\n}\n"],"names":["Button","ShinyText","useResolvedTheme","ShipfoxLoader","cn","CompleteSetupButton","className","resolvedTheme","type","variant","size","animation","color","background","text"],"mappings":";AAAA,SAAQA,MAAM,QAAO,oBAAoB;AACzC,SAAQC,SAAS,QAAO,wBAAwB;AAChD,SAAQC,gBAAgB,QAAO,yBAAyB;AACxD,SAAQC,aAAa,QAAO,uBAAuB;AACnD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,SAASC,oBAAoB,EAACC,SAAS,EAAuB;IACnE,MAAMC,gBAAgBL;IACtB,qBACE,MAACF;QACCQ,MAAK;QACLC,SAAQ;QACRH,WAAWF,GACT,qJACAE;;0BAGF,KAACH;gBACCO,MAAM;gBACNC,WAAU;gBACVC,OAAOL,kBAAkB,SAAS,UAAU;gBAC5CM,YAAYN,kBAAkB,SAAS,SAAS;;0BAElD,KAACN;gBACCa,MAAK;gBACLR,WAAU;;;;AAIlB"}

package/dist/components/dashboard/components/jobs-content.d.ts

@@ -0,0 +1,2 @@
+export declare function JobsContent(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=jobs-content.d.ts.map

package/dist/components/dashboard/components/jobs-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jobs-content.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/components/jobs-content.tsx"],"names":[],"mappings":"AASA,wBAAgB,WAAW,4CAyC1B"}

package/dist/components/dashboard/components/jobs-content.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { SearchInline } from '../../../components/search/search-inline.js';
+import { DataTable } from '../../../components/table/data-table.js';
+import { jobColumns } from '../../../components/table/table.stories.columns.js';
+import { jobsData } from '../../../components/table/table.stories.data.js';
+import { Header as TypographyHeader } from '../../../components/typography/index.js';
+import { useMemo, useState } from 'react';
+export function JobsContent() {
+    const [searchQuery, setSearchQuery] = useState('');
+    const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
+        searchQuery
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "min-h-[calc(100vh-48px)] p-12 md:p-24 bg-background-neutral-base",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "rounded-t-8 overflow-hidden",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col md:flex-row md:items-center md:justify-between gap-12 md:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 bg-background-neutral-base",
+                    children: [
+                        /*#__PURE__*/ _jsx(TypographyHeader, {
+                            variant: "h3",
+                            className: "text-foreground-neutral-base",
+                            children: "Jobs breakdown"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-8 md:gap-16 w-full md:w-auto",
+                            children: [
+                                /*#__PURE__*/ _jsx(SearchInline, {
+                                    placeholder: "Search...",
+                                    value: searchQuery,
+                                    onChange: (e)=>setSearchQuery(e.target.value),
+                                    onClear: ()=>setSearchQuery(''),
+                                    className: "flex-1 md:w-240"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    "aria-label": "Insert column left",
+                                    className: "shrink-0",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "insertColumnLeft",
+                                        className: "size-16 text-foreground-neutral-subtle"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(DataTable, {
+                    columns: jobColumns,
+                    data: filteredData,
+                    pagination: true,
+                    pageSize: 10,
+                    pageSizeOptions: [
+                        10,
+                        20,
+                        50,
+                        100
+                    ],
+                    className: "rounded-t-none"
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=jobs-content.js.map