@shipfox/react-ui 0.12.0 → 0.14.0

package/dist/components/modal/modal.js

@@ -104,14 +104,15 @@ function ModalOverlay({ className, animated = true, transition = modalDefaultTra
         ...props
     });
 }
-function ModalContent({ className, children, animated = true, transition = modalDefaultTransition, ...props }) {
+function ModalContent({ className, children, animated = true, transition = modalDefaultTransition, overlayClassName, ...props }) {
     const { isDesktop } = useModalContext();
     if (!isDesktop) {
         return /*#__PURE__*/ _jsxs(ModalPortal, {
             children: [
                 /*#__PURE__*/ _jsx(ModalOverlay, {
                     animated: animated,
-                    transition: transition
+                    transition: transition,
+                    className: overlayClassName
                 }),
                 /*#__PURE__*/ _jsx(VaulDrawer.Content, {
                     className: cn('fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip', className),
@@ -140,7 +141,8 @@ function ModalContent({ className, children, animated = true, transition = modal
         children: [
             /*#__PURE__*/ _jsx(ModalOverlay, {
                 animated: animated,
-                transition: transition
+                transition: transition,
+                className: overlayClassName
             }),
             /*#__PURE__*/ _jsx(DialogPrimitive.Content, {
                 className: baseClasses,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {cva} from 'class-variance-authority';\nimport {Button} from 'components/button';\nimport {Icon} from 'components/icon';\nimport {Text} from 'components/typography';\nimport {motion, type Transition} from 'framer-motion';\nimport {useMediaQuery} from 'hooks/useMediaQuery';\nimport {type ComponentProps, createContext, useContext} from 'react';\nimport {cn} from 'utils/cn';\nimport {Drawer as VaulDrawer} from 'vaul';\n\nconst modalDefaultTransition: Transition = {\n  type: 'spring',\n  stiffness: 300,\n  damping: 30,\n};\n\ntype ModalContextValue = {\n  breakpoint: string;\n  isDesktop: boolean;\n};\n\nconst ModalContext = createContext<ModalContextValue | null>(null);\n\nfunction useModalContext() {\n  const context = useContext(ModalContext);\n  if (!context) {\n    throw new Error('Modal components must be used within a Modal component');\n  }\n  return context;\n}\n\nconst modalOverlayVariants = cva(\n  'fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n);\n\nconst modalContentVariants = cva(\n  'fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip',\n);\n\nfunction Modal({\n  breakpoint = '(min-width: 768px)',\n  children,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Root> & {breakpoint?: string}) {\n  const isDesktop = useMediaQuery(breakpoint);\n\n  const contextValue: ModalContextValue = {\n    breakpoint,\n    isDesktop,\n  };\n\n  const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;\n\n  return (\n    <ModalContext.Provider value={contextValue}>\n      <Root {...props}>{children}</Root>\n    </ModalContext.Provider>\n  );\n}\n\nfunction ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {\n  const {isDesktop} = useModalContext();\n\n  if (isDesktop) {\n    return <DialogPrimitive.Trigger {...props} />;\n  }\n\n  return <VaulDrawer.Trigger {...props} />;\n}\n\nfunction ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {\n  const {isDesktop} = useModalContext();\n\n  if (isDesktop) {\n    return <DialogPrimitive.Portal {...props} />;\n  }\n\n  return <VaulDrawer.Portal {...props} />;\n}\n\nfunction ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {\n  const {isDesktop} = useModalContext();\n\n  if (isDesktop) {\n    return <DialogPrimitive.Close {...props} />;\n  }\n\n  return <VaulDrawer.Close {...props} />;\n}\n\ntype ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {\n  animated?: boolean;\n  transition?: Transition;\n};\n\nfunction ModalOverlay({\n  className,\n  animated = true,\n  transition = modalDefaultTransition,\n  ...props\n}: ModalOverlayProps) {\n  const {isDesktop} = useModalContext();\n\n  if (!isDesktop) {\n    return <VaulDrawer.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n  }\n\n  if (animated) {\n    return (\n      <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} asChild {...props}>\n        <motion.div\n          initial={{opacity: 0}}\n          animate={{opacity: 1}}\n          exit={{opacity: 0}}\n          transition={transition}\n        />\n      </DialogPrimitive.Overlay>\n    );\n  }\n\n  return <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n}\n\ntype ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {\n  animated?: boolean;\n  transition?: Transition;\n};\n\nfunction ModalContent({\n  className,\n  children,\n  animated = true,\n  transition = modalDefaultTransition,\n  ...props\n}: ModalContentProps) {\n  const {isDesktop} = useModalContext();\n\n  if (!isDesktop) {\n    return (\n      <ModalPortal>\n        <ModalOverlay animated={animated} transition={transition} />\n        <VaulDrawer.Content\n          className={cn(\n            'fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip',\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"relative w-full h-full flex flex-col min-h-0\">\n            <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16\" />\n            <div className=\"flex items-center justify-center pt-8 pb-8 shrink-0\">\n              <div className=\"bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40\" />\n            </div>\n            {children}\n          </div>\n        </VaulDrawer.Content>\n      </ModalPortal>\n    );\n  }\n\n  const baseClasses = cn(modalContentVariants(), className);\n\n  return (\n    <ModalPortal>\n      <ModalOverlay animated={animated} transition={transition} />\n      <DialogPrimitive.Content className={baseClasses} {...props}>\n        <div className=\"relative size-full\">\n          <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-16\" />\n          {children}\n        </div>\n      </DialogPrimitive.Content>\n    </ModalPortal>\n  );\n}\n\ntype ModalHeaderProps = ComponentProps<'div'> & {\n  title?: string;\n  showEscIndicator?: boolean;\n  showClose?: boolean;\n};\n\nfunction ModalHeader({\n  className,\n  title,\n  showEscIndicator = true,\n  showClose = true,\n  children,\n  ...props\n}: ModalHeaderProps) {\n  const {isDesktop} = useModalContext();\n\n  return (\n    <div className=\"flex flex-col w-full shrink-0\" {...props}>\n      <div className=\"bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full\">\n        {title ? (\n          <Text size=\"lg\" className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\">\n            {title}\n          </Text>\n        ) : (\n          <div className=\"flex-1\">{children}</div>\n        )}\n        <div className=\"flex items-center gap-8\">\n          {isDesktop && showEscIndicator && (\n            <kbd className=\"flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4\">\n              esc\n            </kbd>\n          )}\n          {showClose && (\n            <ModalClose asChild>\n              <Button\n                variant=\"transparent\"\n                size=\"xs\"\n                className=\"rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24\"\n              >\n                <Icon name=\"close\" />\n              </Button>\n            </ModalClose>\n          )}\n        </div>\n      </div>\n      <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n    </div>\n  );\n}\n\nfunction ModalBody({className, children, ...props}: ComponentProps<'div'>) {\n  const {isDesktop} = useModalContext();\n\n  return (\n    <div\n      className={cn(\n        'bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full',\n        isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction ModalFooter({className, children, ...props}: ComponentProps<'div'>) {\n  return (\n    <div className=\"flex flex-col w-full shrink-0\" {...props}>\n      <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n      <div className=\"bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full\">\n        <div className={cn('flex items-center gap-16', className)}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\ntype ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;\n\nfunction ModalTitle({className, ...props}: ModalTitleProps) {\n  const {isDesktop} = useModalContext();\n\n  const titleClassName = cn(\n    'font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base',\n    className,\n  );\n\n  if (!isDesktop) {\n    return <VaulDrawer.Title className={titleClassName} {...props} />;\n  }\n\n  return <DialogPrimitive.Title className={titleClassName} {...props} />;\n}\n\ntype ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;\n\nfunction ModalDescription({className, ...props}: ModalDescriptionProps) {\n  const {isDesktop} = useModalContext();\n\n  const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);\n\n  if (!isDesktop) {\n    return <VaulDrawer.Description className={descClassName} {...props} />;\n  }\n\n  return <DialogPrimitive.Description className={descClassName} {...props} />;\n}\n\nexport {\n  Modal,\n  ModalPortal,\n  ModalOverlay,\n  ModalTrigger,\n  ModalClose,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalTitle,\n  ModalDescription,\n  modalContentVariants,\n  modalOverlayVariants,\n  modalDefaultTransition,\n};\n\nexport type {\n  ModalContentProps,\n  ModalHeaderProps,\n  ModalOverlayProps,\n  ModalTitleProps,\n  ModalDescriptionProps,\n};\n"],"names":["DialogPrimitive","cva","Button","Icon","Text","motion","useMediaQuery","createContext","useContext","cn","Drawer","VaulDrawer","modalDefaultTransition","type","stiffness","damping","ModalContext","useModalContext","context","Error","modalOverlayVariants","modalContentVariants","Modal","breakpoint","children","props","isDesktop","contextValue","Root","Provider","value","ModalTrigger","Trigger","ModalPortal","Portal","ModalClose","Close","ModalOverlay","className","animated","transition","Overlay","asChild","div","initial","opacity","animate","exit","ModalContent","Content","baseClasses","ModalHeader","title","showEscIndicator","showClose","size","kbd","variant","name","ModalBody","ModalFooter","ModalTitle","titleClassName","Title","ModalDescription","descClassName","Description"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {cva} from 'class-variance-authority';\nimport {Button} from 'components/button';\nimport {Icon} from 'components/icon';\nimport {Text} from 'components/typography';\nimport {motion, type Transition} from 'framer-motion';\nimport {useMediaQuery} from 'hooks/useMediaQuery';\nimport {type ComponentProps, createContext, useContext} from 'react';\nimport {cn} from 'utils/cn';\nimport {Drawer as VaulDrawer} from 'vaul';\n\nconst modalDefaultTransition: Transition = {\n  type: 'spring',\n  stiffness: 300,\n  damping: 30,\n};\n\ntype ModalContextValue = {\n  breakpoint: string;\n  isDesktop: boolean;\n};\n\nconst ModalContext = createContext<ModalContextValue | null>(null);\n\nfunction useModalContext() {\n  const context = useContext(ModalContext);\n  if (!context) {\n    throw new Error('Modal components must be used within a Modal component');\n  }\n  return context;\n}\n\nconst modalOverlayVariants = cva(\n  'fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n);\n\nconst modalContentVariants = cva(\n  'fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip',\n);\n\nfunction Modal({\n  breakpoint = '(min-width: 768px)',\n  children,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Root> & {breakpoint?: string}) {\n  const isDesktop = useMediaQuery(breakpoint);\n\n  const contextValue: ModalContextValue = {\n    breakpoint,\n    isDesktop,\n  };\n\n  const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;\n\n  return (\n    <ModalContext.Provider value={contextValue}>\n      <Root {...props}>{children}</Root>\n    </ModalContext.Provider>\n  );\n}\n\nfunction ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {\n  const {isDesktop} = useModalContext();\n\n  if (isDesktop) {\n    return <DialogPrimitive.Trigger {...props} />;\n  }\n\n  return <VaulDrawer.Trigger {...props} />;\n}\n\nfunction ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {\n  const {isDesktop} = useModalContext();\n\n  if (isDesktop) {\n    return <DialogPrimitive.Portal {...props} />;\n  }\n\n  return <VaulDrawer.Portal {...props} />;\n}\n\nfunction ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {\n  const {isDesktop} = useModalContext();\n\n  if (isDesktop) {\n    return <DialogPrimitive.Close {...props} />;\n  }\n\n  return <VaulDrawer.Close {...props} />;\n}\n\ntype ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {\n  animated?: boolean;\n  transition?: Transition;\n};\n\nfunction ModalOverlay({\n  className,\n  animated = true,\n  transition = modalDefaultTransition,\n  ...props\n}: ModalOverlayProps) {\n  const {isDesktop} = useModalContext();\n\n  if (!isDesktop) {\n    return <VaulDrawer.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n  }\n\n  if (animated) {\n    return (\n      <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} asChild {...props}>\n        <motion.div\n          initial={{opacity: 0}}\n          animate={{opacity: 1}}\n          exit={{opacity: 0}}\n          transition={transition}\n        />\n      </DialogPrimitive.Overlay>\n    );\n  }\n\n  return <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n}\n\ntype ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {\n  animated?: boolean;\n  transition?: Transition;\n  overlayClassName?: string;\n};\n\nfunction ModalContent({\n  className,\n  children,\n  animated = true,\n  transition = modalDefaultTransition,\n  overlayClassName,\n  ...props\n}: ModalContentProps) {\n  const {isDesktop} = useModalContext();\n\n  if (!isDesktop) {\n    return (\n      <ModalPortal>\n        <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />\n        <VaulDrawer.Content\n          className={cn(\n            'fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip',\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"relative w-full h-full flex flex-col min-h-0\">\n            <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16\" />\n            <div className=\"flex items-center justify-center pt-8 pb-8 shrink-0\">\n              <div className=\"bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40\" />\n            </div>\n            {children}\n          </div>\n        </VaulDrawer.Content>\n      </ModalPortal>\n    );\n  }\n\n  const baseClasses = cn(modalContentVariants(), className);\n\n  return (\n    <ModalPortal>\n      <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />\n      <DialogPrimitive.Content className={baseClasses} {...props}>\n        <div className=\"relative size-full\">\n          <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-16\" />\n          {children}\n        </div>\n      </DialogPrimitive.Content>\n    </ModalPortal>\n  );\n}\n\ntype ModalHeaderProps = ComponentProps<'div'> & {\n  title?: string;\n  showEscIndicator?: boolean;\n  showClose?: boolean;\n};\n\nfunction ModalHeader({\n  className,\n  title,\n  showEscIndicator = true,\n  showClose = true,\n  children,\n  ...props\n}: ModalHeaderProps) {\n  const {isDesktop} = useModalContext();\n\n  return (\n    <div className=\"flex flex-col w-full shrink-0\" {...props}>\n      <div className=\"bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full\">\n        {title ? (\n          <Text size=\"lg\" className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\">\n            {title}\n          </Text>\n        ) : (\n          <div className=\"flex-1\">{children}</div>\n        )}\n        <div className=\"flex items-center gap-8\">\n          {isDesktop && showEscIndicator && (\n            <kbd className=\"flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4\">\n              esc\n            </kbd>\n          )}\n          {showClose && (\n            <ModalClose asChild>\n              <Button\n                variant=\"transparent\"\n                size=\"xs\"\n                className=\"rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24\"\n              >\n                <Icon name=\"close\" />\n              </Button>\n            </ModalClose>\n          )}\n        </div>\n      </div>\n      <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n    </div>\n  );\n}\n\nfunction ModalBody({className, children, ...props}: ComponentProps<'div'>) {\n  const {isDesktop} = useModalContext();\n\n  return (\n    <div\n      className={cn(\n        'bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full',\n        isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction ModalFooter({className, children, ...props}: ComponentProps<'div'>) {\n  return (\n    <div className=\"flex flex-col w-full shrink-0\" {...props}>\n      <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n      <div className=\"bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full\">\n        <div className={cn('flex items-center gap-16', className)}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\ntype ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;\n\nfunction ModalTitle({className, ...props}: ModalTitleProps) {\n  const {isDesktop} = useModalContext();\n\n  const titleClassName = cn(\n    'font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base',\n    className,\n  );\n\n  if (!isDesktop) {\n    return <VaulDrawer.Title className={titleClassName} {...props} />;\n  }\n\n  return <DialogPrimitive.Title className={titleClassName} {...props} />;\n}\n\ntype ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;\n\nfunction ModalDescription({className, ...props}: ModalDescriptionProps) {\n  const {isDesktop} = useModalContext();\n\n  const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);\n\n  if (!isDesktop) {\n    return <VaulDrawer.Description className={descClassName} {...props} />;\n  }\n\n  return <DialogPrimitive.Description className={descClassName} {...props} />;\n}\n\nexport {\n  Modal,\n  ModalPortal,\n  ModalOverlay,\n  ModalTrigger,\n  ModalClose,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalTitle,\n  ModalDescription,\n  modalContentVariants,\n  modalOverlayVariants,\n  modalDefaultTransition,\n};\n\nexport type {\n  ModalContentProps,\n  ModalHeaderProps,\n  ModalOverlayProps,\n  ModalTitleProps,\n  ModalDescriptionProps,\n};\n"],"names":["DialogPrimitive","cva","Button","Icon","Text","motion","useMediaQuery","createContext","useContext","cn","Drawer","VaulDrawer","modalDefaultTransition","type","stiffness","damping","ModalContext","useModalContext","context","Error","modalOverlayVariants","modalContentVariants","Modal","breakpoint","children","props","isDesktop","contextValue","Root","Provider","value","ModalTrigger","Trigger","ModalPortal","Portal","ModalClose","Close","ModalOverlay","className","animated","transition","Overlay","asChild","div","initial","opacity","animate","exit","ModalContent","overlayClassName","Content","baseClasses","ModalHeader","title","showEscIndicator","showClose","size","kbd","variant","name","ModalBody","ModalFooter","ModalTitle","titleClassName","Title","ModalDescription","descClassName","Description"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ 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 { Confetti } from '../../components/confetti/index.js';
 import { DatePicker } from '../../components/date-picker/index.js';
 import { DynamicItem } from '../../components/dynamic-item/index.js';
 import { Icon } from '../../components/icon/index.js';
@@ -12,7 +13,7 @@ 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 { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import illustration2 from '../../assets/illustration-2.svg';
 import illustrationBg from '../../assets/illustration-gradient.svg';
@@ -139,6 +140,7 @@ export const ImportForm = {
                     }),
                     /*#__PURE__*/ _jsxs(ModalContent, {
                         "aria-describedby": undefined,
+                        overlayClassName: "bg-background-modal-overlay",
                         children: [
                             /*#__PURE__*/ _jsx(ModalTitle, {
                                 className: "sr-only",
@@ -249,182 +251,241 @@ export const GithubActions = {
     },
     render: ()=>{
         const [open, setOpen] = useState(false);
-        return /*#__PURE__*/ _jsx("div", {
+        const [footerState, setFooterState] = useState('running');
+        const confettiRef = useRef(null);
+        useEffect(()=>{
+            if (open && footerState === 'running') {
+                const timer = setTimeout(()=>{
+                    setFooterState('done');
+                }, 3000);
+                return ()=>{
+                    clearTimeout(timer);
+                };
+            }
+        }, [
+            open,
+            footerState
+        ]);
+        useEffect(()=>{
+            if (footerState === 'done' && open) {
+                const timer = setTimeout(()=>{
+                    if (confettiRef.current) {
+                        void confettiRef.current.fire();
+                    }
+                }, 200);
+                return ()=>{
+                    clearTimeout(timer);
+                };
+            }
+        }, [
+            footerState,
+            open
+        ]);
+        useEffect(()=>{
+            if (!open) {
+                setFooterState('running');
+            }
+        }, [
+            open
+        ]);
+        return /*#__PURE__*/ _jsxs("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: [
+                /*#__PURE__*/ _jsx(Confetti, {
+                    ref: confettiRef,
+                    manualstart: true,
+                    options: {
+                        particleCount: 200,
+                        spread: 100,
+                        colors: [
+                            '#ff6b6b',
+                            '#4ecdc4',
+                            '#ffe66d',
+                            '#95e1d3'
+                        ]
+                    },
+                    className: "fixed inset-0 pointer-events-none z-100",
+                    style: {
+                        width: '100%',
+                        height: '100%'
+                    }
+                }),
+                /*#__PURE__*/ _jsxs(Modal, {
+                    open: open,
+                    onOpenChange: setOpen,
+                    children: [
+                        /*#__PURE__*/ _jsx(ModalTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
                                 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__*/ _jsxs(ModalContent, {
+                            "aria-describedby": undefined,
+                            overlayClassName: "bg-background-modal-overlay",
+                            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("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"
                                                                                 })
-                                                                            }),
-                                                                            /*#__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"
+                                                                            ]
+                                                                        }),
+                                                                        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__*/ _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(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(CodeBlockFooter, {
+                                                            state: footerState,
+                                                            message: footerState === 'running' ? 'Waiting for Shipfox runner event…' : 'Runners connected!',
+                                                            description: footerState === 'running' ? '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"
                                     })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(ModalFooter, {
-                                children: /*#__PURE__*/ _jsx(Button, {
-                                    variant: "primary",
-                                    onClick: ()=>setOpen(false),
-                                    children: "Got it"
                                 })
-                            })
-                        ]
-                    })
-                ]
-            })
+                            ]
+                        })
+                    ]
+                })
+            ]
         });
     }
 };