@shipfox/react-ui 0.5.0 → 0.6.0

package/dist/components/modal/modal.stories.js

@@ -0,0 +1,497 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button, ButtonLink } from '../../components/button/index.js';
+import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockFiles, CodeBlockFooter, CodeBlockHeader, CodeBlockItem } from '../../components/code-block/index.js';
+import { DynamicItem } from '../../components/dynamic-item/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Input } from '../../components/input/index.js';
+import { ItemTitle } from '../../components/item/index.js';
+import { Label } from '../../components/label/index.js';
+import { MovingBorder } from '../../components/moving-border/index.js';
+import { Text } from '../../components/typography/index.js';
+import { useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import illustration2 from '../../assets/illustration-2.svg';
+import illustrationBg from '../../assets/illustration-gradient.svg';
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalTitle, ModalTrigger } from './modal.js';
+const OPEN_MODAL_REGEX = /open modal/i;
+const IMPORT_JOBS_REGEX = /import past jobs from github/i;
+const GITHUB_ACTIONS_REGEX = /run github actions on shipfox/i;
+const meta = {
+    title: 'Components/Modal',
+    component: Modal,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {
+    play: async (ctx)=>{
+        const { canvasElement, step } = ctx;
+        const canvas = within(canvasElement);
+        const user = userEvent.setup();
+        await step('Open the modal', async ()=>{
+            const triggerButton = canvas.getByRole('button', {
+                name: OPEN_MODAL_REGEX
+            });
+            await user.click(triggerButton);
+        });
+        await step('Wait for dialog to appear and render', async ()=>{
+            await screen.findByRole('dialog');
+            await new Promise((resolve)=>setTimeout(resolve, 100));
+        });
+        await argosScreenshot(ctx, 'Default Modal Open');
+    },
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Modal, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(ModalTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Open Modal"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(ModalContent, {
+                        "aria-describedby": undefined,
+                        children: [
+                            /*#__PURE__*/ _jsx(ModalTitle, {
+                                className: "sr-only",
+                                children: "Modal Title"
+                            }),
+                            /*#__PURE__*/ _jsx(ModalHeader, {
+                                children: /*#__PURE__*/ _jsx(Text, {
+                                    size: "lg",
+                                    className: "flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap",
+                                    children: "Modal Title"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(ModalBody, {
+                                children: /*#__PURE__*/ _jsx(Text, {
+                                    size: "sm",
+                                    className: "text-foreground-neutral-subtle w-full",
+                                    children: "This modal automatically adapts between dialog (desktop) and drawer (mobile) based on screen size. Try resizing your browser window!"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(ModalFooter, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Confirm"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const ImportForm = {
+    play: async (ctx)=>{
+        const { canvasElement, step } = ctx;
+        const canvas = within(canvasElement);
+        const user = userEvent.setup();
+        await step('Open the modal', async ()=>{
+            const triggerButton = canvas.getByRole('button', {
+                name: IMPORT_JOBS_REGEX
+            });
+            await user.click(triggerButton);
+        });
+        await step('Wait for dialog to appear and render', async ()=>{
+            await screen.findByRole('dialog');
+            await new Promise((resolve)=>setTimeout(resolve, 100));
+        });
+        await argosScreenshot(ctx, 'Import Form Modal Open');
+    },
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Modal, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(ModalTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Import past jobs from Github"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(ModalContent, {
+                        "aria-describedby": undefined,
+                        children: [
+                            /*#__PURE__*/ _jsx(ModalTitle, {
+                                className: "sr-only",
+                                children: "Import past jobs from Github"
+                            }),
+                            /*#__PURE__*/ _jsx(ModalHeader, {
+                                title: "Import past jobs from Github"
+                            }),
+                            /*#__PURE__*/ _jsxs(ModalBody, {
+                                className: "gap-20",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-subtle w-full",
+                                        children: "Backfill your CI history by importing past runs from your Github repo. We'll handle the rest by creating a background task to import the data for you."
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-20 w-full",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex flex-col gap-8 w-full",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Label, {
+                                                        children: "Repository owner"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Input, {
+                                                        placeholder: "apache"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex flex-col gap-8 w-full",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Label, {
+                                                        children: "Repository name"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Input, {
+                                                        placeholder: "kafka"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex flex-col gap-8 w-full",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Label, {
+                                                        children: "Start date"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Input, {
+                                                        placeholder: "September 5th, 2025"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(ModalFooter, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Import"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+const diffCode = `jobs:
+  build:
+-   runs-on: ubuntu-latest
++   runs-on: shipfox-2vcpu-ubuntu-2404`;
+export const GithubActions = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'large'
+        }
+    },
+    play: async (ctx)=>{
+        const { canvasElement, step } = ctx;
+        const canvas = within(canvasElement);
+        const user = userEvent.setup();
+        await step('Open the modal', async ()=>{
+            const triggerButton = canvas.getByRole('button', {
+                name: GITHUB_ACTIONS_REGEX
+            });
+            await user.click(triggerButton);
+        });
+        await step('Wait for dialog to appear and render', async ()=>{
+            await screen.findByRole('dialog');
+            await new Promise((resolve)=>setTimeout(resolve, 100));
+        });
+        await argosScreenshot(ctx, 'Github Actions Modal Open');
+    },
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Modal, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(ModalTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Run GitHub Actions on Shipfox"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(ModalContent, {
+                        "aria-describedby": undefined,
+                        children: [
+                            /*#__PURE__*/ _jsx(ModalTitle, {
+                                className: "sr-only",
+                                children: "Run GitHub Actions on Shipfox"
+                            }),
+                            /*#__PURE__*/ _jsx(ModalHeader, {
+                                title: "Run GitHub Actions on Shipfox"
+                            }),
+                            /*#__PURE__*/ _jsxs(ModalBody, {
+                                className: "gap-32",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-20 w-full",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                size: "sm",
+                                                className: "text-foreground-neutral-subtle w-full",
+                                                children: "This will run your jobs on Shipfox's optimized infrastructure. Giving you faster builds, and dedicated resources."
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "relative",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("img", {
+                                                        src: illustration2,
+                                                        alt: "illustration-2",
+                                                        className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: cn('relative overflow-hidden bg-transparent p-1 rounded-8'),
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: "absolute inset-0",
+                                                                style: {
+                                                                    borderRadius: 'calc(0.5rem * 0.96)'
+                                                                },
+                                                                children: /*#__PURE__*/ _jsx(MovingBorder, {
+                                                                    duration: 6000,
+                                                                    rx: "30%",
+                                                                    ry: "30%",
+                                                                    children: /*#__PURE__*/ _jsx("div", {
+                                                                        className: "h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]"
+                                                                    })
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: "relative",
+                                                                style: {
+                                                                    borderRadius: 'calc(0.5rem * 0.96)'
+                                                                },
+                                                                children: /*#__PURE__*/ _jsx(DynamicItem, {
+                                                                    variant: "default",
+                                                                    title: /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center gap-6",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16",
+                                                                                children: /*#__PURE__*/ _jsx(Icon, {
+                                                                                    name: "money",
+                                                                                    size: "sm",
+                                                                                    color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx(ItemTitle, {
+                                                                                children: "6000 free credits/month to run your jobs"
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    description: "~500 builds/month. No payment required.",
+                                                                    rightElement: /*#__PURE__*/ _jsx("img", {
+                                                                        src: illustrationBg,
+                                                                        alt: "illustration-bg",
+                                                                        className: "hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
+                                                                    })
+                                                                })
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-20 w-full",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex flex-col gap-6",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex items-center justify-center w-full",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                className: "flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap",
+                                                                children: "Update your GitHub Actions workflow"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(ButtonLink, {
+                                                                variant: "base",
+                                                                size: "sm",
+                                                                href: "#",
+                                                                iconRight: "bookOpen",
+                                                                children: "See docs"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        size: "sm",
+                                                        className: "text-foreground-neutral-subtle w-full",
+                                                        children: "Replace the runs-on line in your workflow file to use Shipfox runners."
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(CodeBlock, {
+                                                data: [
+                                                    {
+                                                        language: 'yaml',
+                                                        filename: '.github/workflows/<workflow-name>.yml',
+                                                        code: diffCode
+                                                    }
+                                                ],
+                                                defaultValue: "yaml",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                                                                children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                                                        value: item.language,
+                                                                        children: item.filename
+                                                                    })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(CodeBlockBody, {
+                                                        children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                                                                value: item.language,
+                                                                children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                                                    language: item.language,
+                                                                    children: item.code
+                                                                })
+                                                            })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(CodeBlockFooter, {
+                                                        state: "running",
+                                                        message: "Waiting for Shipfox runner event…",
+                                                        description: "This usually takes 30-60 seconds after you commit the workflow file."
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(ModalFooter, {
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    onClick: ()=>setOpen(false),
+                                    children: "Got it"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const OpenedModal = {
+    play: async (ctx)=>{
+        const { canvasElement, step } = ctx;
+        const canvas = within(canvasElement);
+        const user = userEvent.setup();
+        await step('Open the modal', async ()=>{
+            const triggerButton = canvas.getByRole('button', {
+                name: OPEN_MODAL_REGEX
+            });
+            await user.click(triggerButton);
+        });
+        await step('Wait for dialog to appear and render', async ()=>{
+            await screen.findByRole('dialog');
+            await new Promise((resolve)=>setTimeout(resolve, 100));
+        });
+        await argosScreenshot(ctx, 'Opened Modal State');
+    },
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Modal, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(ModalTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Open Modal"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(ModalContent, {
+                        "aria-describedby": undefined,
+                        children: [
+                            /*#__PURE__*/ _jsx(ModalTitle, {
+                                className: "sr-only",
+                                children: "Modal Title"
+                            }),
+                            /*#__PURE__*/ _jsx(ModalHeader, {
+                                children: /*#__PURE__*/ _jsx(Text, {
+                                    size: "lg",
+                                    className: "flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap",
+                                    children: "Modal Title"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(ModalBody, {
+                                children: /*#__PURE__*/ _jsx(Text, {
+                                    size: "sm",
+                                    className: "text-foreground-neutral-subtle w-full",
+                                    children: "This modal automatically adapts between dialog (desktop) and drawer (mobile) based on screen size. Try resizing your browser window!"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(ModalFooter, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Confirm"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+
+//# sourceMappingURL=modal.stories.js.map

package/dist/components/modal/modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/modal/modal.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {screen, within} from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport {Button, ButtonLink} from 'components/button';\nimport {\n  CodeBlock,\n  CodeBlockBody,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFilename,\n  CodeBlockFiles,\n  CodeBlockFooter,\n  CodeBlockHeader,\n  CodeBlockItem,\n} from 'components/code-block';\nimport {DynamicItem} from 'components/dynamic-item';\nimport {Icon} from 'components/icon';\nimport {Input} from 'components/input';\nimport {ItemTitle} from 'components/item';\nimport {Label} from 'components/label';\nimport {MovingBorder} from 'components/moving-border';\nimport {Text} from 'components/typography';\nimport {useState} from 'react';\nimport {cn} from 'utils/cn';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n  ModalTrigger,\n} from './modal';\n\nconst OPEN_MODAL_REGEX = /open modal/i;\nconst IMPORT_JOBS_REGEX = /import past jobs from github/i;\nconst GITHUB_ACTIONS_REGEX = /run github actions on shipfox/i;\n\nconst meta = {\n  title: 'Components/Modal',\n  component: Modal,\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'centered',\n  },\n} satisfies Meta<typeof Modal>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: OPEN_MODAL_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Default Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Open Modal</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Modal Title</ModalTitle>\n            <ModalHeader>\n              <Text\n                size=\"lg\"\n                className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\"\n              >\n                Modal Title\n              </Text>\n            </ModalHeader>\n            <ModalBody>\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                This modal automatically adapts between dialog (desktop) and drawer (mobile) based\n                on screen size. Try resizing your browser window!\n              </Text>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Confirm\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nexport const ImportForm: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: IMPORT_JOBS_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Import Form Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Import past jobs from Github</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Import past jobs from Github</ModalTitle>\n            <ModalHeader title=\"Import past jobs from Github\" />\n            <ModalBody className=\"gap-20\">\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                Backfill your CI history by importing past runs from your Github repo. We&apos;ll\n                handle the rest by creating a background task to import the data for you.\n              </Text>\n              <div className=\"flex flex-col gap-20 w-full\">\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label>Repository owner</Label>\n                  <Input placeholder=\"apache\" />\n                </div>\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label>Repository name</Label>\n                  <Input placeholder=\"kafka\" />\n                </div>\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label>Start date</Label>\n                  <Input placeholder=\"September 5th, 2025\" />\n                </div>\n              </div>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Import\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nconst diffCode = `jobs:\n  build:\n-   runs-on: ubuntu-latest\n+   runs-on: shipfox-2vcpu-ubuntu-2404`;\n\nexport const GithubActions: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'large',\n    },\n  },\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: GITHUB_ACTIONS_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Github Actions Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Run GitHub Actions on Shipfox</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Run GitHub Actions on Shipfox</ModalTitle>\n            <ModalHeader title=\"Run GitHub Actions on Shipfox\" />\n            <ModalBody className=\"gap-32\">\n              <div className=\"flex flex-col gap-20 w-full\">\n                <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                  This will run your jobs on Shipfox&apos;s optimized infrastructure. Giving you\n                  faster builds, and dedicated resources.\n                </Text>\n                <div className=\"relative\">\n                  <img\n                    src={illustration2}\n                    alt=\"illustration-2\"\n                    className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50\"\n                  />\n                  <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>\n                    <div className=\"absolute inset-0\" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>\n                      <MovingBorder duration={6000} rx=\"30%\" ry=\"30%\">\n                        <div className=\"h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]\" />\n                      </MovingBorder>\n                    </div>\n                    <div\n                      className=\"relative\"\n                      style={{\n                        borderRadius: 'calc(0.5rem * 0.96)',\n                      }}\n                    >\n                      <DynamicItem\n                        variant=\"default\"\n                        title={\n                          <div className=\"flex items-center gap-6\">\n                            <span className=\"flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16\">\n                              <Icon\n                                name=\"money\"\n                                size=\"sm\"\n                                color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n                              />\n                            </span>\n                            <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>\n                          </div>\n                        }\n                        description=\"~500 builds/month. No payment required.\"\n                        rightElement={\n                          <img\n                            src={illustrationBg}\n                            alt=\"illustration-bg\"\n                            className=\"hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105\"\n                          />\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex flex-col gap-20 w-full\">\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"flex items-center justify-center w-full\">\n                    <Text className=\"flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap\">\n                      Update your GitHub Actions workflow\n                    </Text>\n                    <ButtonLink variant=\"base\" size=\"sm\" href=\"#\" iconRight=\"bookOpen\">\n                      See docs\n                    </ButtonLink>\n                  </div>\n                  <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                    Replace the runs-on line in your workflow file to use Shipfox runners.\n                  </Text>\n                </div>\n\n                <CodeBlock\n                  data={[\n                    {\n                      language: 'yaml',\n                      filename: '.github/workflows/<workflow-name>.yml',\n                      code: diffCode,\n                    },\n                  ]}\n                  defaultValue=\"yaml\"\n                >\n                  <CodeBlockHeader>\n                    <CodeBlockFiles>\n                      {(item) => (\n                        <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>\n                      )}\n                    </CodeBlockFiles>\n                    <CodeBlockCopyButton />\n                  </CodeBlockHeader>\n                  <CodeBlockBody>\n                    {(item) => (\n                      <CodeBlockItem value={item.language}>\n                        <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n                      </CodeBlockItem>\n                    )}\n                  </CodeBlockBody>\n                  <CodeBlockFooter\n                    state=\"running\"\n                    message=\"Waiting for Shipfox runner event…\"\n                    description=\"This usually takes 30-60 seconds after you commit the workflow file.\"\n                  />\n                </CodeBlock>\n              </div>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Got it\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nexport const OpenedModal: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: OPEN_MODAL_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Opened Modal State');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Open Modal</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Modal Title</ModalTitle>\n            <ModalHeader>\n              <Text\n                size=\"lg\"\n                className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\"\n              >\n                Modal Title\n              </Text>\n            </ModalHeader>\n            <ModalBody>\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                This modal automatically adapts between dialog (desktop) and drawer (mobile) based\n                on screen size. Try resizing your browser window!\n              </Text>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Confirm\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","screen","within","userEvent","Button","ButtonLink","CodeBlock","CodeBlockBody","CodeBlockContent","CodeBlockCopyButton","CodeBlockFilename","CodeBlockFiles","CodeBlockFooter","CodeBlockHeader","CodeBlockItem","DynamicItem","Icon","Input","ItemTitle","Label","MovingBorder","Text","useState","cn","illustration2","illustrationBg","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","ModalTrigger","OPEN_MODAL_REGEX","IMPORT_JOBS_REGEX","GITHUB_ACTIONS_REGEX","meta","title","component","tags","parameters","layout","Default","play","ctx","canvasElement","step","canvas","user","setup","triggerButton","getByRole","name","click","findByRole","Promise","resolve","setTimeout","render","open","setOpen","div","className","onOpenChange","asChild","aria-describedby","undefined","size","variant","onClick","ImportForm","placeholder","diffCode","GithubActions","viewport","defaultViewport","img","src","alt","style","borderRadius","duration","rx","ry","span","color","description","rightElement","href","iconRight","data","language","filename","code","defaultValue","item","value","state","message","OpenedModal"],"mappings":"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"}

package/dist/components/moving-border/index.d.ts

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

package/dist/components/moving-border/index.d.ts.map

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

package/dist/components/moving-border/index.js

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

package/dist/components/moving-border/index.js.map

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

package/dist/components/typography/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG1E,eAAO,MAAM,YAAY;;8EAavB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC,GAC7E,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEJ,wBAAgB,IAAI,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAevF"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG1E,eAAO,MAAM,YAAY;;8EAavB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC,GAC7E,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEJ,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,EAAE,EACF,OAAc,EACd,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,2CAeX"}

package/dist/components/typography/text.js

@@ -15,7 +15,7 @@ export const textVariants = cva('', {
         size: 'md'
     }
 });
-export function Text({ children, className, size, as, compact, bold, ...props }) {
+export function Text({ children, className, size, as, compact = true, bold = false, ...props }) {
     const Component = as ?? 'p';
     return /*#__PURE__*/ _jsx(Component, {
         className: cn(textVariants({

package/dist/components/typography/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/typography/text.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';\nimport {cn} from 'utils';\n\nexport const textVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-sm',\n      md: 'text-md',\n      lg: 'text-lg',\n      xl: 'text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport type TextProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &\n  VariantProps<typeof textVariants> & {\n    as?: ElementType;\n    compact?: boolean;\n    bold?: boolean;\n  };\n\nexport function Text({children, className, size, as, compact, bold, ...props}: TextProps) {\n  const Component = as ?? 'p';\n  return (\n    <Component\n      className={cn(\n        textVariants({size}),\n        'font-display',\n        {'leading-20': compact, 'font-medium': bold},\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["cva","cn","textVariants","variants","size","xs","sm","md","lg","xl","defaultVariants","Text","children","className","as","compact","bold","props","Component"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,QAAQ;AAEzB,OAAO,MAAMC,eAAeF,IAAI,IAAI;IAClCG,UAAU;QACRC,MAAM;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfN,MAAM;IACR;AACF,GAAG;AASH,OAAO,SAASO,KAAK,EAACC,QAAQ,EAAEC,SAAS,EAAET,IAAI,EAAEU,EAAE,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,OAAiB;IACtF,MAAMC,YAAYJ,MAAM;IACxB,qBACE,KAACI;QACCL,WAAWZ,GACTC,aAAa;YAACE;QAAI,IAClB,gBACA;YAAC,cAAcW;YAAS,eAAeC;QAAI,GAC3CH;QAED,GAAGI,KAAK;kBAERL;;AAGP"}
+{"version":3,"sources":["../../../src/components/typography/text.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';\nimport {cn} from 'utils';\n\nexport const textVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-sm',\n      md: 'text-md',\n      lg: 'text-lg',\n      xl: 'text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport type TextProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &\n  VariantProps<typeof textVariants> & {\n    as?: ElementType;\n    compact?: boolean;\n    bold?: boolean;\n  };\n\nexport function Text({\n  children,\n  className,\n  size,\n  as,\n  compact = true,\n  bold = false,\n  ...props\n}: TextProps) {\n  const Component = as ?? 'p';\n  return (\n    <Component\n      className={cn(\n        textVariants({size}),\n        'font-display',\n        {'leading-20': compact, 'font-medium': bold},\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["cva","cn","textVariants","variants","size","xs","sm","md","lg","xl","defaultVariants","Text","children","className","as","compact","bold","props","Component"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,QAAQ;AAEzB,OAAO,MAAMC,eAAeF,IAAI,IAAI;IAClCG,UAAU;QACRC,MAAM;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfN,MAAM;IACR;AACF,GAAG;AASH,OAAO,SAASO,KAAK,EACnBC,QAAQ,EACRC,SAAS,EACTT,IAAI,EACJU,EAAE,EACFC,UAAU,IAAI,EACdC,OAAO,KAAK,EACZ,GAAGC,OACO;IACV,MAAMC,YAAYJ,MAAM;IACxB,qBACE,KAACI;QACCL,WAAWZ,GACTC,aAAa;YAACE;QAAI,IAClB,gBACA;YAAC,cAAcW;YAAS,eAAeC;QAAI,GAC3CH;QAED,GAAGI,KAAK;kBAERL;;AAGP"}

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useCopyToClipboard';
+export * from './useMediaQuery';
 export * from './useResolvedTheme';
 export * from './useShikiHighlight';
 export * from './useShikiStyleInjection';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC"}

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './useCopyToClipboard.js';
+export * from './useMediaQuery.js';
 export * from './useResolvedTheme.js';
 export * from './useShikiHighlight.js';
 export * from './useShikiStyleInjection.js';

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useCopyToClipboard';\nexport * from './useResolvedTheme';\nexport * from './useShikiHighlight';\nexport * from './useShikiStyleInjection';\nexport * from './useTheme';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,aAAa"}
+{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useCopyToClipboard';\nexport * from './useMediaQuery';\nexport * from './useResolvedTheme';\nexport * from './useShikiHighlight';\nexport * from './useShikiStyleInjection';\nexport * from './useTheme';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,kBAAkB;AAChC,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,aAAa"}

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare function useMediaQuery(query: string): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAsEA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAgBpD"}