@shipfox/react-ui 0.7.0 → 0.9.0

package/.turbo/turbo-build.log

@@ -1,19 +1,19 @@
- WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
+ WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.9.0 build /runner/_work/tooling/tooling/libs/react/ui
 > swc && pnpm run build:css
 
-Successfully compiled: 116 files with swc (406.75ms)
- WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
+Successfully compiled: 119 files with swc (333.36ms)
+ WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 build:css /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.9.0 build:css /runner/_work/tooling/tooling/libs/react/ui
 > vite build --config vite.css.config.ts && rm -f dist/css-entry.js dist/css-entry.js.map
 
-vite v7.2.2 building client environment for production...
+vite v7.2.4 building client environment for production...
 transforming...
 ✓ 2 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/styles.css    84.62 kB │ gzip: 13.44 kB
+dist/styles.css    85.04 kB │ gzip: 13.51 kB
 dist/css-entry.js   0.00 kB │ gzip:  0.02 kB
-✓ built in 745ms
+✓ built in 505ms

package/.turbo/turbo-check.log

@@ -1,6 +1,6 @@
- WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
+ WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.9.0 check /runner/_work/tooling/tooling/libs/react/ui
 > biome-check --fix
 
-Checked 135 files in 240ms. No fixes applied.
+Checked 138 files in 244ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -1,5 +1,5 @@
- WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
+ WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.7.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.9.0 type /runner/_work/tooling/tooling/libs/react/ui
 > tsc-emit
 

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @shipfox/react-ui
 
+## 0.9.0
+
+### Minor Changes
+
+- 00b8126: Enhance Alert, Buttons, Checkbox components
+
+## 0.8.0
+
+### Minor Changes
+
+- f3dd22c: Add Form components
+- 5e4a493: Update Spinner icon and Button loading state
+
 ## 0.7.0
 
 ### Minor Changes

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

@@ -1,18 +1,28 @@
 import { type VariantProps } from 'class-variance-authority';
-import type { ComponentProps } from 'react';
+import { type Transition } from 'framer-motion';
+import { type ComponentProps } from 'react';
 declare const alertVariants: (props?: ({
     variant?: "info" | "default" | "success" | "warning" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const closeIconVariants: (props?: ({
     variant?: "info" | "default" | "success" | "warning" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;
-declare function Alert({ className, variant, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+declare const alertDefaultTransition: Transition;
+type AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    animated?: boolean;
+    transition?: Transition;
+    autoClose?: number;
+};
+declare function Alert({ className, variant, children, open: controlledOpen, defaultOpen, onOpenChange, animated, transition, autoClose, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
 declare function AlertContent({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertActions({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertAction({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
-declare function AlertClose({ className, variant, ...props }: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>): import("react/jsx-runtime").JSX.Element;
-export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose };
+declare function AlertClose({ className, variant: variantProp, onClick, ...props }: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose, alertDefaultTransition, };
+export type { AlertProps };
 //# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAEhE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,QAAA,MAAM,aAAa;;8EAgBlB,CAAC;AAiBF,QAAA,MAAM,iBAAiB;;8EAarB,CAAC;AAEH,KAAK,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE7E,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,2CAclE;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAEjE;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAWrE;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQjE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAYnE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,2CAenE;AAED,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAC,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAA0B,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EACL,KAAK,cAAc,EAQpB,MAAM,OAAO,CAAC;AAGf,QAAA,MAAM,aAAa;;8EAgBlB,CAAC;AAiBF,QAAA,MAAM,iBAAiB;;8EAarB,CAAC;AAEH,QAAA,MAAM,sBAAsB,EAAE,UAG7B,CAAC;AAkBF,KAAK,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GACrC,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAkB,EAClB,YAAY,EACZ,QAAe,EACf,UAAmC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,kDA0FZ;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAEjE;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAWrE;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQjE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAYnE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAO,EAAE,WAAW,EACpB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,2CAwBnE;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,sBAAsB,GACvB,CAAC;AAEF,YAAY,EAAC,UAAU,EAAC,CAAC"}

package/dist/components/alert/alert.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { Icon } from '../../components/icon/index.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 const alertVariants = cva('relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border', {
     variants: {
@@ -44,27 +46,118 @@ const closeIconVariants = cva('w-16 h-16', {
         variant: 'default'
     }
 });
-function Alert({ className, variant, children, ...props }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "w-full flex items-start gap-4",
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                "data-slot": "alert-line",
-                className: cn(alertLineVariants({
-                    variant
-                })),
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                "data-slot": "alert",
-                role: "alert",
-                className: cn(alertVariants({
-                    variant
-                }), className),
-                ...props,
-                children: children
+const alertDefaultTransition = {
+    duration: 0.2,
+    ease: 'easeInOut'
+};
+const AlertContext = /*#__PURE__*/ createContext(null);
+function useAlertContext() {
+    const context = useContext(AlertContext);
+    if (!context) {
+        throw new Error('Alert components must be used within an Alert component');
+    }
+    return context;
+}
+function Alert({ className, variant = 'default', children, open: controlledOpen, defaultOpen = true, onOpenChange, animated = true, transition = alertDefaultTransition, autoClose, ...props }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const handleClose = useCallback(()=>{
+        if (controlledOpen === undefined) {
+            setInternalOpen(false);
+        }
+        onOpenChange?.(false);
+    }, [
+        controlledOpen,
+        onOpenChange
+    ]);
+    const handleCloseRef = useRef(handleClose);
+    useEffect(()=>{
+        handleCloseRef.current = handleClose;
+    }, [
+        handleClose
+    ]);
+    useEffect(()=>{
+        if (autoClose && isOpen && autoClose > 0) {
+            const timeoutId = setTimeout(()=>{
+                handleCloseRef.current();
+            }, autoClose);
+            return ()=>{
+                clearTimeout(timeoutId);
+            };
+        }
+    }, [
+        autoClose,
+        isOpen
+    ]);
+    const contextValue = {
+        isOpen,
+        onClose: handleClose,
+        variant
+    };
+    if (!animated) {
+        if (!isOpen) {
+            return null;
+        }
+        return /*#__PURE__*/ _jsx(AlertContext.Provider, {
+            value: contextValue,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "w-full flex items-start gap-4",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        "data-slot": "alert-line",
+                        className: cn(alertLineVariants({
+                            variant
+                        })),
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        "data-slot": "alert",
+                        role: "alert",
+                        className: cn(alertVariants({
+                            variant
+                        }), className),
+                        ...props,
+                        children: children
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(AnimatePresence, {
+        children: isOpen && /*#__PURE__*/ _jsx(motion.div, {
+            className: "w-full flex items-start gap-4",
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: transition,
+            children: /*#__PURE__*/ _jsxs(AlertContext.Provider, {
+                value: contextValue,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        "data-slot": "alert-line",
+                        className: cn(alertLineVariants({
+                            variant
+                        })),
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        "data-slot": "alert",
+                        role: "alert",
+                        className: cn(alertVariants({
+                            variant
+                        }), className),
+                        ...props,
+                        children: children
+                    })
+                ]
             })
-        ]
+        }, "alert")
     });
 }
 function AlertContent({ className, ...props }) {
@@ -103,12 +196,19 @@ function AlertAction({ className, ...props }) {
         ...props
     });
 }
-function AlertClose({ className, variant = 'default', ...props }) {
+function AlertClose({ className, variant: variantProp, onClick, ...props }) {
+    const { onClose, variant: contextVariant } = useAlertContext();
+    const variant = variantProp ?? contextVariant ?? 'default';
+    const handleClick = (e)=>{
+        onClose();
+        onClick?.(e);
+    };
     return /*#__PURE__*/ _jsx("button", {
         "data-slot": "alert-close",
         type: "button",
         className: cn('absolute cursor-pointer top-12 right-12 rounded-4 p-4 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', className),
         "aria-label": "Close",
+        onClick: handleClick,
         ...props,
         children: /*#__PURE__*/ _jsx(Icon, {
             name: "close",
@@ -118,6 +218,6 @@ function AlertClose({ className, variant = 'default', ...props }) {
         })
     });
 }
-export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose };
+export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose, alertDefaultTransition };
 
 //# sourceMappingURL=alert.js.map

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nconst alertVariants = cva(\n  'relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border',\n  {\n    variants: {\n      variant: {\n        default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',\n        info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',\n        success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',\n        warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',\n        error: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst alertLineVariants = cva('w-4 self-stretch rounded-full', {\n  variants: {\n    variant: {\n      default: 'bg-tag-neutral-icon',\n      info: 'bg-tag-blue-icon',\n      success: 'bg-tag-success-icon',\n      warning: 'bg-tag-warning-icon',\n      error: 'bg-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst closeIconVariants = cva('w-16 h-16', {\n  variants: {\n    variant: {\n      default: 'text-tag-neutral-icon',\n      info: 'text-tag-blue-icon',\n      success: 'text-tag-success-icon',\n      warning: 'text-tag-warning-icon',\n      error: 'text-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\ntype AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;\n\nfunction Alert({className, variant, children, ...props}: AlertProps) {\n  return (\n    <div className=\"w-full flex items-start gap-4\">\n      <div data-slot=\"alert-line\" className={cn(alertLineVariants({variant}))} aria-hidden=\"true\" />\n      <div\n        data-slot=\"alert\"\n        role=\"alert\"\n        className={cn(alertVariants({variant}), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction AlertContent({className, ...props}: ComponentProps<'div'>) {\n  return <div data-slot=\"alert-content\" className={cn('flex-1 min-w-0', className)} {...props} />;\n}\n\nfunction AlertTitle({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertActions({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-actions\"\n      className={cn('flex items-center gap-8 mt-8', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({className, ...props}: ComponentProps<'button'>) {\n  return (\n    <button\n      data-slot=\"alert-action\"\n      type=\"button\"\n      className={cn(\n        'bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertClose({\n  className,\n  variant = 'default',\n  ...props\n}: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {\n  return (\n    <button\n      data-slot=\"alert-close\"\n      type=\"button\"\n      className={cn(\n        'absolute cursor-pointer top-12 right-12 rounded-4 p-4 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',\n        className,\n      )}\n      aria-label=\"Close\"\n      {...props}\n    >\n      <Icon name=\"close\" className={cn(closeIconVariants({variant}))} />\n    </button>\n  );\n}\n\nexport {Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose};\n"],"names":["cva","Icon","cn","alertVariants","variants","variant","default","info","success","warning","error","defaultVariants","alertLineVariants","closeIconVariants","Alert","className","children","props","div","data-slot","aria-hidden","role","AlertContent","AlertTitle","AlertDescription","AlertActions","AlertAction","button","type","AlertClose","aria-label","name"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAO,kBAAkB;AAErC,SAAQC,EAAE,QAAO,WAAW;AAE5B,MAAMC,gBAAgBH,IACpB,8FACA;IACEI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAGF,MAAMO,oBAAoBZ,IAAI,iCAAiC;IAC7DI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAEA,MAAMQ,oBAAoBb,IAAI,aAAa;IACzCI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAIA,SAASS,MAAM,EAACC,SAAS,EAAEV,OAAO,EAAEW,QAAQ,EAAE,GAAGC,OAAkB;IACjE,qBACE,MAACC;QAAIH,WAAU;;0BACb,KAACG;gBAAIC,aAAU;gBAAaJ,WAAWb,GAAGU,kBAAkB;oBAACP;gBAAO;gBAAKe,eAAY;;0BACrF,KAACF;gBACCC,aAAU;gBACVE,MAAK;gBACLN,WAAWb,GAAGC,cAAc;oBAACE;gBAAO,IAAIU;gBACvC,GAAGE,KAAK;0BAERD;;;;AAIT;AAEA,SAASM,aAAa,EAACP,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBAAO,KAACC;QAAIC,aAAU;QAAgBJ,WAAWb,GAAG,kBAAkBa;QAAa,GAAGE,KAAK;;AAC7F;AAEA,SAASM,WAAW,EAACR,SAAS,EAAE,GAAGE,OAA6B;IAC9D,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,oEAAoEa;QACjF,GAAGE,KAAK;;AAGf;AAEA,SAASO,iBAAiB,EAACT,SAAS,EAAE,GAAGE,OAA6B;IACpE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GACT,yEACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASQ,aAAa,EAACV,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,gCAAgCa;QAC7C,GAAGE,KAAK;;AAGf;AAEA,SAASS,YAAY,EAACX,SAAS,EAAE,GAAGE,OAAgC;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,8RACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASY,WAAW,EAClBd,SAAS,EACTV,UAAU,SAAS,EACnB,GAAGY,OAC+D;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,sUACAa;QAEFe,cAAW;QACV,GAAGb,KAAK;kBAET,cAAA,KAAChB;YAAK8B,MAAK;YAAQhB,WAAWb,GAAGW,kBAAkB;gBAACR;YAAO;;;AAGjE;AAEA,SAAQS,KAAK,EAAEQ,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,WAAW,EAAEG,UAAU,GAAE"}
+{"version":3,"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon} from 'components/icon';\nimport {AnimatePresence, motion, type Transition} from 'framer-motion';\nimport {\n  type ComponentProps,\n  createContext,\n  type MouseEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {cn} from 'utils/cn';\n\nconst alertVariants = cva(\n  'relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border',\n  {\n    variants: {\n      variant: {\n        default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',\n        info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',\n        success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',\n        warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',\n        error: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst alertLineVariants = cva('w-4 self-stretch rounded-full', {\n  variants: {\n    variant: {\n      default: 'bg-tag-neutral-icon',\n      info: 'bg-tag-blue-icon',\n      success: 'bg-tag-success-icon',\n      warning: 'bg-tag-warning-icon',\n      error: 'bg-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst closeIconVariants = cva('w-16 h-16', {\n  variants: {\n    variant: {\n      default: 'text-tag-neutral-icon',\n      info: 'text-tag-blue-icon',\n      success: 'text-tag-success-icon',\n      warning: 'text-tag-warning-icon',\n      error: 'text-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst alertDefaultTransition: Transition = {\n  duration: 0.2,\n  ease: 'easeInOut',\n};\n\ntype AlertContextValue = {\n  isOpen: boolean;\n  onClose: () => void;\n  variant: VariantProps<typeof alertVariants>['variant'];\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n  const context = useContext(AlertContext);\n  if (!context) {\n    throw new Error('Alert components must be used within an Alert component');\n  }\n  return context;\n}\n\ntype AlertProps = ComponentProps<'div'> &\n  VariantProps<typeof alertVariants> & {\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    animated?: boolean;\n    transition?: Transition;\n    autoClose?: number;\n  };\n\nfunction Alert({\n  className,\n  variant = 'default',\n  children,\n  open: controlledOpen,\n  defaultOpen = true,\n  onOpenChange,\n  animated = true,\n  transition = alertDefaultTransition,\n  autoClose,\n  ...props\n}: AlertProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n  const handleClose = useCallback(() => {\n    if (controlledOpen === undefined) {\n      setInternalOpen(false);\n    }\n    onOpenChange?.(false);\n  }, [controlledOpen, onOpenChange]);\n\n  const handleCloseRef = useRef(handleClose);\n  useEffect(() => {\n    handleCloseRef.current = handleClose;\n  }, [handleClose]);\n\n  useEffect(() => {\n    if (autoClose && isOpen && autoClose > 0) {\n      const timeoutId = setTimeout(() => {\n        handleCloseRef.current();\n      }, autoClose);\n\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    }\n  }, [autoClose, isOpen]);\n\n  const contextValue: AlertContextValue = {\n    isOpen,\n    onClose: handleClose,\n    variant,\n  };\n\n  if (!animated) {\n    if (!isOpen) {\n      return null;\n    }\n\n    return (\n      <AlertContext.Provider value={contextValue}>\n        <div className=\"w-full flex items-start gap-4\">\n          <div\n            data-slot=\"alert-line\"\n            className={cn(alertLineVariants({variant}))}\n            aria-hidden=\"true\"\n          />\n          <div\n            data-slot=\"alert\"\n            role=\"alert\"\n            className={cn(alertVariants({variant}), className)}\n            {...props}\n          >\n            {children}\n          </div>\n        </div>\n      </AlertContext.Provider>\n    );\n  }\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          key=\"alert\"\n          className=\"w-full flex items-start gap-4\"\n          initial={{opacity: 0}}\n          animate={{opacity: 1}}\n          exit={{opacity: 0}}\n          transition={transition}\n        >\n          <AlertContext.Provider value={contextValue}>\n            <div\n              data-slot=\"alert-line\"\n              className={cn(alertLineVariants({variant}))}\n              aria-hidden=\"true\"\n            />\n            <div\n              data-slot=\"alert\"\n              role=\"alert\"\n              className={cn(alertVariants({variant}), className)}\n              {...props}\n            >\n              {children}\n            </div>\n          </AlertContext.Provider>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nfunction AlertContent({className, ...props}: ComponentProps<'div'>) {\n  return <div data-slot=\"alert-content\" className={cn('flex-1 min-w-0', className)} {...props} />;\n}\n\nfunction AlertTitle({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertActions({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-actions\"\n      className={cn('flex items-center gap-8 mt-8', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({className, ...props}: ComponentProps<'button'>) {\n  return (\n    <button\n      data-slot=\"alert-action\"\n      type=\"button\"\n      className={cn(\n        'bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertClose({\n  className,\n  variant: variantProp,\n  onClick,\n  ...props\n}: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {\n  const {onClose, variant: contextVariant} = useAlertContext();\n  const variant = variantProp ?? contextVariant ?? 'default';\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    onClose();\n    onClick?.(e);\n  };\n\n  return (\n    <button\n      data-slot=\"alert-close\"\n      type=\"button\"\n      className={cn(\n        'absolute cursor-pointer top-12 right-12 rounded-4 p-4 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',\n        className,\n      )}\n      aria-label=\"Close\"\n      onClick={handleClick}\n      {...props}\n    >\n      <Icon name=\"close\" className={cn(closeIconVariants({variant}))} />\n    </button>\n  );\n}\n\nexport {\n  Alert,\n  AlertContent,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n  AlertAction,\n  AlertClose,\n  alertDefaultTransition,\n};\n\nexport type {AlertProps};\n"],"names":["cva","Icon","AnimatePresence","motion","createContext","useCallback","useContext","useEffect","useRef","useState","cn","alertVariants","variants","variant","default","info","success","warning","error","defaultVariants","alertLineVariants","closeIconVariants","alertDefaultTransition","duration","ease","AlertContext","useAlertContext","context","Error","Alert","className","children","open","controlledOpen","defaultOpen","onOpenChange","animated","transition","autoClose","props","internalOpen","setInternalOpen","isOpen","undefined","handleClose","handleCloseRef","current","timeoutId","setTimeout","clearTimeout","contextValue","onClose","Provider","value","div","data-slot","aria-hidden","role","initial","opacity","animate","exit","AlertContent","AlertTitle","AlertDescription","AlertActions","AlertAction","button","type","AlertClose","variantProp","onClick","contextVariant","handleClick","e","aria-label","name"],"mappings":"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"}

package/dist/components/alert/alert.stories.js

@@ -1,5 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '../../components/button/index.js';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../components/form/index.js';
+import { Input } from '../../components/input/index.js';
 import { Header } from '../../components/typography/index.js';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 import { Alert, AlertAction, AlertActions, AlertClose, AlertContent, AlertDescription, AlertTitle } from './alert.js';
 const meta = {
     title: 'Components/Alert',
@@ -56,13 +63,123 @@ export const Default = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsx(AlertClose, {
-                    variant: args.variant
-                })
+                /*#__PURE__*/ _jsx(AlertClose, {})
             ]
         });
     }
 };
+const validationFormSchema = z.object({
+    email: z.string().email('Please enter a valid email address'),
+    password: z.string().min(8, 'Password must be at least 8 characters')
+});
+function ErrorValidationToasterExample() {
+    const [showError, setShowError] = useState(false);
+    const form = useForm({
+        resolver: zodResolver(validationFormSchema),
+        defaultValues: {
+            email: '',
+            password: ''
+        }
+    });
+    function onSubmit(data) {
+        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+        console.log('Form submitted:', data);
+        setShowError(false);
+    }
+    function onError() {
+        setShowError(true);
+    }
+    const errors = form.formState.errors;
+    const errorCount = Object.keys(errors).length;
+    const errorMessage = errorCount > 0 ? `Please fix ${errorCount} error${errorCount > 1 ? 's' : ''} before submitting.` : '';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-16 w-full max-w-md",
+        children: [
+            errorCount > 0 && /*#__PURE__*/ _jsxs(Alert, {
+                variant: "error",
+                open: showError,
+                autoClose: 5000,
+                onOpenChange: setShowError,
+                children: [
+                    /*#__PURE__*/ _jsxs(AlertContent, {
+                        children: [
+                            /*#__PURE__*/ _jsx(AlertTitle, {
+                                children: "Validation Error"
+                            }),
+                            /*#__PURE__*/ _jsx(AlertDescription, {
+                                children: errorMessage
+                            }),
+                            /*#__PURE__*/ _jsx(AlertActions, {
+                                children: /*#__PURE__*/ _jsx(AlertAction, {
+                                    onClick: ()=>{
+                                        form.clearErrors();
+                                        setShowError(false);
+                                    },
+                                    children: "Dismiss"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(AlertClose, {})
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Form, {
+                ...form,
+                children: /*#__PURE__*/ _jsxs("form", {
+                    onSubmit: form.handleSubmit(onSubmit, onError),
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(FormField, {
+                            control: form.control,
+                            name: "email",
+                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(FormLabel, {
+                                            children: "Email"
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormControl, {
+                                            children: /*#__PURE__*/ _jsx(Input, {
+                                                type: "email",
+                                                placeholder: "email@example.com",
+                                                ...field
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormMessage, {})
+                                    ]
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(FormField, {
+                            control: form.control,
+                            name: "password",
+                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(FormLabel, {
+                                            children: "Password"
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormControl, {
+                                            children: /*#__PURE__*/ _jsx(Input, {
+                                                type: "password",
+                                                placeholder: "Enter password",
+                                                ...field
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormMessage, {})
+                                    ]
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            type: "submit",
+                            children: "Submit"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export const WithFormValidation = {
+    render: ()=>/*#__PURE__*/ _jsx(ErrorValidationToasterExample, {})
+};
 export const DesignMock = {
     render: ()=>{
         return /*#__PURE__*/ _jsxs("div", {
@@ -98,9 +215,7 @@ export const DesignMock = {
                                         })
                                     ]
                                 }),
-                                /*#__PURE__*/ _jsx(AlertClose, {
-                                    variant: variant
-                                })
+                                /*#__PURE__*/ _jsx(AlertClose, {})
                             ]
                         }, variant))
                 })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/alert/alert.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Header} from 'components/typography';\nimport {\n  Alert,\n  AlertAction,\n  AlertActions,\n  AlertClose,\n  AlertContent,\n  AlertDescription,\n  AlertTitle,\n} from './alert';\n\nconst meta = {\n  title: 'Components/Alert',\n  component: Alert,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'info', 'success', 'warning', 'error'],\n    },\n  },\n  args: {\n    variant: 'default',\n  },\n} satisfies Meta<typeof Alert>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst variants = ['default', 'info', 'success', 'warning', 'error'] as const;\n\nexport const Default: Story = {\n  render: (args) => {\n    return (\n      <Alert {...args}>\n        <AlertContent>\n          <AlertTitle>Title</AlertTitle>\n          <AlertDescription>Description</AlertDescription>\n          <AlertActions>\n            <AlertAction>Download</AlertAction>\n            <AlertAction>View</AlertAction>\n          </AlertActions>\n        </AlertContent>\n        <AlertClose variant={args.variant} />\n      </Alert>\n    );\n  },\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          ALERTS\n        </Header>\n        <div className=\"flex flex-col gap-16\">\n          {variants.map((variant) => (\n            <Alert key={variant} variant={variant}>\n              <AlertContent>\n                <AlertTitle>Title</AlertTitle>\n                <AlertDescription>Description</AlertDescription>\n                <AlertActions>\n                  <AlertAction>Download</AlertAction>\n                  <AlertAction>View</AlertAction>\n                </AlertActions>\n              </AlertContent>\n              <AlertClose variant={variant} />\n            </Alert>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["Header","Alert","AlertAction","AlertActions","AlertClose","AlertContent","AlertDescription","AlertTitle","meta","title","component","tags","argTypes","variant","control","options","args","variants","Default","render","DesignMock","div","className","map"],"mappings":";AACA,SAAQA,MAAM,QAAO,wBAAwB;AAC7C,SACEC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,UAAU,QACL,UAAU;AAEjB,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWT;IACXU,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAS;gBAAC;gBAAW;gBAAQ;gBAAW;gBAAW;aAAQ;QAC7D;IACF;IACAC,MAAM;QACJH,SAAS;IACX;AACF;AAEA,eAAeL,KAAK;AAIpB,MAAMS,WAAW;IAAC;IAAW;IAAQ;IAAW;IAAW;CAAQ;AAEnE,OAAO,MAAMC,UAAiB;IAC5BC,QAAQ,CAACH;QACP,qBACE,MAACf;YAAO,GAAGe,IAAI;;8BACb,MAACX;;sCACC,KAACE;sCAAW;;sCACZ,KAACD;sCAAiB;;sCAClB,MAACH;;8CACC,KAACD;8CAAY;;8CACb,KAACA;8CAAY;;;;;;8BAGjB,KAACE;oBAAWS,SAASG,KAAKH,OAAO;;;;IAGvC;AACF,EAAE;AAEF,OAAO,MAAMO,aAAoB;IAC/BD,QAAQ;QACN,qBACE,MAACE;YAAIC,WAAU;;8BACb,KAACtB;oBAAOa,SAAQ;oBAAKS,WAAU;8BAAiC;;8BAGhE,KAACD;oBAAIC,WAAU;8BACZL,SAASM,GAAG,CAAC,CAACV,wBACb,MAACZ;4BAAoBY,SAASA;;8CAC5B,MAACR;;sDACC,KAACE;sDAAW;;sDACZ,KAACD;sDAAiB;;sDAClB,MAACH;;8DACC,KAACD;8DAAY;;8DACb,KAACA;8DAAY;;;;;;8CAGjB,KAACE;oCAAWS,SAASA;;;2BATXA;;;;IAetB;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/alert/alert.stories.tsx"],"sourcesContent":["import {zodResolver} from '@hookform/resolvers/zod';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button';\nimport {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from 'components/form';\nimport {Input} from 'components/input';\nimport {Header} from 'components/typography';\nimport {useState} from 'react';\nimport {useForm} from 'react-hook-form';\nimport {z} from 'zod';\nimport {\n  Alert,\n  AlertAction,\n  AlertActions,\n  AlertClose,\n  AlertContent,\n  AlertDescription,\n  AlertTitle,\n} from './alert';\n\nconst meta = {\n  title: 'Components/Alert',\n  component: Alert,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'info', 'success', 'warning', 'error'],\n    },\n  },\n  args: {\n    variant: 'default',\n  },\n} satisfies Meta<typeof Alert>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst variants = ['default', 'info', 'success', 'warning', 'error'] as const;\n\nexport const Default: Story = {\n  render: (args) => {\n    return (\n      <Alert {...args}>\n        <AlertContent>\n          <AlertTitle>Title</AlertTitle>\n          <AlertDescription>Description</AlertDescription>\n          <AlertActions>\n            <AlertAction>Download</AlertAction>\n            <AlertAction>View</AlertAction>\n          </AlertActions>\n        </AlertContent>\n        <AlertClose />\n      </Alert>\n    );\n  },\n};\n\nconst validationFormSchema = z.object({\n  email: z.string().email('Please enter a valid email address'),\n  password: z.string().min(8, 'Password must be at least 8 characters'),\n});\n\ntype ValidationFormValues = z.infer<typeof validationFormSchema>;\n\nfunction ErrorValidationToasterExample() {\n  const [showError, setShowError] = useState(false);\n  const form = useForm<ValidationFormValues>({\n    resolver: zodResolver(validationFormSchema),\n    defaultValues: {\n      email: '',\n      password: '',\n    },\n  });\n\n  function onSubmit(data: ValidationFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log('Form submitted:', data);\n    setShowError(false);\n  }\n\n  function onError() {\n    setShowError(true);\n  }\n\n  const errors = form.formState.errors;\n  const errorCount = Object.keys(errors).length;\n  const errorMessage =\n    errorCount > 0\n      ? `Please fix ${errorCount} error${errorCount > 1 ? 's' : ''} before submitting.`\n      : '';\n\n  return (\n    <div className=\"flex flex-col gap-16 w-full max-w-md\">\n      {errorCount > 0 && (\n        <Alert variant=\"error\" open={showError} autoClose={5000} onOpenChange={setShowError}>\n          <AlertContent>\n            <AlertTitle>Validation Error</AlertTitle>\n            <AlertDescription>{errorMessage}</AlertDescription>\n            <AlertActions>\n              <AlertAction\n                onClick={() => {\n                  form.clearErrors();\n                  setShowError(false);\n                }}\n              >\n                Dismiss\n              </AlertAction>\n            </AlertActions>\n          </AlertContent>\n          <AlertClose />\n        </Alert>\n      )}\n      <Form {...form}>\n        <form onSubmit={form.handleSubmit(onSubmit, onError)} className=\"space-y-8\">\n          <FormField\n            control={form.control}\n            name=\"email\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n          <FormField\n            control={form.control}\n            name=\"password\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" placeholder=\"Enter password\" {...field} />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n          <Button type=\"submit\">Submit</Button>\n        </form>\n      </Form>\n    </div>\n  );\n}\n\nexport const WithFormValidation: Story = {\n  render: () => <ErrorValidationToasterExample />,\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          ALERTS\n        </Header>\n        <div className=\"flex flex-col gap-16\">\n          {variants.map((variant) => (\n            <Alert key={variant} variant={variant}>\n              <AlertContent>\n                <AlertTitle>Title</AlertTitle>\n                <AlertDescription>Description</AlertDescription>\n                <AlertActions>\n                  <AlertAction>Download</AlertAction>\n                  <AlertAction>View</AlertAction>\n                </AlertActions>\n              </AlertContent>\n              <AlertClose />\n            </Alert>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["zodResolver","Button","Form","FormControl","FormField","FormItem","FormLabel","FormMessage","Input","Header","useState","useForm","z","Alert","AlertAction","AlertActions","AlertClose","AlertContent","AlertDescription","AlertTitle","meta","title","component","tags","argTypes","variant","control","options","args","variants","Default","render","validationFormSchema","object","email","string","password","min","ErrorValidationToasterExample","showError","setShowError","form","resolver","defaultValues","onSubmit","data","console","log","onError","errors","formState","errorCount","Object","keys","length","errorMessage","div","className","open","autoClose","onOpenChange","onClick","clearErrors","handleSubmit","name","field","type","placeholder","WithFormValidation","DesignMock","map"],"mappings":"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"}

package/dist/components/button/button-link.js

@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Icon } from '../../components/icon/index.js';
 import { cn } from '../../utils/cn.js';
-export const buttonLinkVariants = cva('inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium', {
+export const buttonLinkVariants = cva('inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none outline-none font-medium', {
     variants: {
         variant: {
             base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',

package/dist/components/button/button-link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button-link.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonLinkVariants = cva(\n  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium',\n  {\n    variants: {\n      variant: {\n        base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n        interactive:\n          'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',\n        muted:\n          'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n        subtle:\n          'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        xs: 'text-xs',\n        sm: 'text-sm',\n        md: 'text-md',\n        xl: 'text-xl',\n      },\n      underline: {\n        true: 'underline decoration-solid [text-underline-position:from-font]',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'base',\n      size: 'sm',\n      underline: false,\n    },\n  },\n);\n\nconst iconSizeMap = {\n  xs: 14,\n  sm: 14,\n  md: 16,\n  xl: 20,\n} as const;\n\nexport function ButtonLink({\n  className,\n  variant,\n  size = 'sm',\n  underline,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  ...props\n}: ComponentProps<'a'> &\n  VariantProps<typeof buttonLinkVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'a';\n  const iconSize = iconSizeMap[size as keyof typeof iconSizeMap];\n\n  return (\n    <Comp\n      data-slot=\"button-link\"\n      className={cn(buttonLinkVariants({variant, size, underline, className}))}\n      {...props}\n    >\n      {iconLeft && <Icon name={iconLeft} size={iconSize} />}\n      {children}\n      {iconRight && <Icon name={iconRight} size={iconSize} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonLinkVariants","variants","variant","base","interactive","muted","subtle","size","xs","sm","md","xl","underline","true","false","defaultVariants","iconSizeMap","ButtonLink","className","asChild","children","iconLeft","iconRight","props","Comp","iconSize","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,2IACA;IACEI,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,aACE;YACFC,OACE;YACFC,QACE;QACJ;QACAC,MAAM;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,WAAW;YACTC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTK,MAAM;QACNK,WAAW;IACb;AACF,GACA;AAEF,MAAMI,cAAc;IAClBR,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;AACN;AAEA,OAAO,SAASM,WAAW,EACzBC,SAAS,EACThB,OAAO,EACPK,OAAO,IAAI,EACXK,SAAS,EACTO,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUvB,OAAO;IAC9B,MAAM6B,WAAWT,WAAW,CAACT,KAAiC;IAE9D,qBACE,MAACiB;QACCE,aAAU;QACVR,WAAWnB,GAAGC,mBAAmB;YAACE;YAASK;YAAMK;YAAWM;QAAS;QACpE,GAAGK,KAAK;;YAERF,0BAAY,KAACvB;gBAAK6B,MAAMN;gBAAUd,MAAMkB;;YACxCL;YACAE,2BAAa,KAACxB;gBAAK6B,MAAML;gBAAWf,MAAMkB;;;;AAGjD"}
+{"version":3,"sources":["../../../src/components/button/button-link.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonLinkVariants = cva(\n  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none outline-none font-medium',\n  {\n    variants: {\n      variant: {\n        base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n        interactive:\n          'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',\n        muted:\n          'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n        subtle:\n          'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        xs: 'text-xs',\n        sm: 'text-sm',\n        md: 'text-md',\n        xl: 'text-xl',\n      },\n      underline: {\n        true: 'underline decoration-solid [text-underline-position:from-font]',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'base',\n      size: 'sm',\n      underline: false,\n    },\n  },\n);\n\nconst iconSizeMap = {\n  xs: 14,\n  sm: 14,\n  md: 16,\n  xl: 20,\n} as const;\n\nexport function ButtonLink({\n  className,\n  variant,\n  size = 'sm',\n  underline,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  ...props\n}: ComponentProps<'a'> &\n  VariantProps<typeof buttonLinkVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'a';\n  const iconSize = iconSizeMap[size as keyof typeof iconSizeMap];\n\n  return (\n    <Comp\n      data-slot=\"button-link\"\n      className={cn(buttonLinkVariants({variant, size, underline, className}))}\n      {...props}\n    >\n      {iconLeft && <Icon name={iconLeft} size={iconSize} />}\n      {children}\n      {iconRight && <Icon name={iconRight} size={iconSize} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonLinkVariants","variants","variant","base","interactive","muted","subtle","size","xs","sm","md","xl","underline","true","false","defaultVariants","iconSizeMap","ButtonLink","className","asChild","children","iconLeft","iconRight","props","Comp","iconSize","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,0JACA;IACEI,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,aACE;YACFC,OACE;YACFC,QACE;QACJ;QACAC,MAAM;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,WAAW;YACTC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTK,MAAM;QACNK,WAAW;IACb;AACF,GACA;AAEF,MAAMI,cAAc;IAClBR,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;AACN;AAEA,OAAO,SAASM,WAAW,EACzBC,SAAS,EACThB,OAAO,EACPK,OAAO,IAAI,EACXK,SAAS,EACTO,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUvB,OAAO;IAC9B,MAAM6B,WAAWT,WAAW,CAACT,KAAiC;IAE9D,qBACE,MAACiB;QACCE,aAAU;QACVR,WAAWnB,GAAGC,mBAAmB;YAACE;YAASK;YAAMK;YAAWM;QAAS;QACpE,GAAGK,KAAK;;YAERF,0BAAY,KAACvB;gBAAK6B,MAAMN;gBAAUd,MAAMkB;;YACxCL;YACAE,2BAAa,KAACxB;gBAAK6B,MAAML;gBAAWf,MAAMkB;;;;AAGjD"}

package/dist/components/button/button.d.ts

@@ -5,9 +5,10 @@ export declare const buttonVariants: (props?: ({
     variant?: "transparent" | "success" | "primary" | "secondary" | "danger" | "transparentMuted" | null | undefined;
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare function Button({ className, variant, size, asChild, children, iconLeft, iconRight, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+export declare function Button({ className, variant, size, asChild, children, iconLeft, iconRight, isLoading, disabled, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
     iconLeft?: IconName;
     iconRight?: IconName;
+    isLoading?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,cAAc;;;8EAgC1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB,2CAUF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,cAAc;;;8EAgC1B,CAAC;AAWF,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAwBF"}

package/dist/components/button/button.js

@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Icon } from '../../components/icon/index.js';
 import { cn } from '../../utils/cn.js';
-export const buttonVariants = cva('rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none', {
+export const buttonVariants = cva('rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none', {
     variants: {
         variant: {
             primary: 'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
@@ -27,8 +27,17 @@ export const buttonVariants = cva('rounded-6 inline-flex items-center justify-ce
         size: 'md'
     }
 });
-export function Button({ className, variant, size, asChild = false, children, iconLeft, iconRight, ...props }) {
+const spinnerSizeMap = {
+    '2xs': 'size-10',
+    xs: 'size-10',
+    sm: 'size-12',
+    md: 'size-14',
+    lg: 'size-16',
+    xl: 'size-18'
+};
+export function Button({ className, variant, size, asChild = false, children, iconLeft, iconRight, isLoading = false, disabled, ...props }) {
     const Comp = asChild ? Slot : 'button';
+    const spinnerSize = spinnerSizeMap[size ?? 'md'];
     return /*#__PURE__*/ _jsxs(Comp, {
         "data-slot": "button",
         className: cn(buttonVariants({
@@ -36,9 +45,18 @@ export function Button({ className, variant, size, asChild = false, children, ic
             size,
             className
         })),
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-live": isLoading ? 'polite' : undefined,
+        ...asChild ? {
+            'aria-disabled': disabled || isLoading
+        } : {},
         ...props,
         children: [
-            iconLeft && /*#__PURE__*/ _jsx(Icon, {
+            isLoading ? /*#__PURE__*/ _jsx(Icon, {
+                name: "spinner",
+                className: spinnerSize
+            }) : iconLeft && /*#__PURE__*/ _jsx(Icon, {
                 name: iconLeft
             }),
             children,