@neoptocom/neopto-ui 0.9.1 → 0.9.2

package/dist/index.cjs

@@ -151,23 +151,79 @@ function Card({
   children,
   className = "",
   style,
+  showDecorations = true,
   ...props
 }) {
   const mergedStyle = {
     borderRadius: "30px",
-    background: "rgba(112, 133, 233, 0.05)",
+    backgroundColor: "color-mix(in srgb, var(--surface) 85%, transparent)",
     backdropFilter: "blur(75px)",
     WebkitBackdropFilter: "blur(75px)",
     // Safari support
+    color: "var(--fg)",
+    position: "relative",
+    overflow: "hidden",
+    transition: "background-color 0.3s ease, color 0.3s ease",
     ...style
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `p-6 ${className}`,
       style: mergedStyle,
       ...props,
-      children
+      children: [
+        showDecorations && /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none",
+              zIndex: 0
+            },
+            viewBox: "0 0 967 745",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            preserveAspectRatio: "none",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_card", x1: "109", y1: "744.5", x2: "855", y2: "744.5", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint1_linear_card", x1: "967.5", y1: "10", x2: "967.5", y2: "652", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint2_linear_card", x1: "877", y1: "0.5", x2: "90", y2: "0.5", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint3_linear_card", x1: "0.5", y1: "34.5136", x2: "0.5", y2: "731.595", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_card)", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { opacity: "0.8", x1: "855", y1: "744.5", x2: "109", y2: "744.5", stroke: "url(#paint0_linear_card)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "965.5", y1: "652", x2: "965.5", y2: "10", stroke: "url(#paint1_linear_card)" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { opacity: "0.6", x1: "90", y1: "0.5", x2: "877", y2: "0.5", stroke: "url(#paint2_linear_card)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0.5", y1: "731.595", x2: "0.500027", y2: "34.5136", stroke: "url(#paint3_linear_card)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_card", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "966", height: "744", rx: "10", transform: "matrix(-1 0 0 1 967 1)", fill: "white" }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", zIndex: 1 }, children })
+      ]
     }
   );
 }
@@ -203,10 +259,28 @@ function Modal({
   open,
   onClose,
   title,
-  closeOnOverlay = true,
-  children
+  closeOnBackdrop = true,
+  children,
+  className = "",
+  zIndex = 50,
+  showDecorations = true
 }) {
   const [mounted, setMounted] = React2__namespace.useState(false);
+  const [isDark, setIsDark] = React2__namespace.useState(false);
+  React2__namespace.useEffect(() => {
+    const checkDarkMode = () => {
+      const hasDarkClass = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.querySelector(".dark") !== null;
+      setIsDark(hasDarkClass);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
   useIsomorphicLayoutEffect(() => {
     setMounted(true);
     if (!open) return;
@@ -225,40 +299,30 @@ function Modal({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   if (!mounted) return null;
-  if (!open) return null;
-  const overlay = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  const modal = /* @__PURE__ */ jsxRuntime.jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsxRuntime.jsx(
+    BackgroundBlur,
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center",
-      "aria-labelledby": "modal-title",
-      role: "dialog",
-      "aria-modal": "true",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute inset-0 bg-black/50",
-            onClick: () => closeOnOverlay && onClose?.()
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 w-full max-w-lg rounded-[var(--radius-lg)] bg-[var(--surface)] text-[var(--fg)] p-6 shadow-xl", children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "modal-title", className: "mb-2 text-lg font-semibold", children: title }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-end gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: onClose,
-              className: "btn btn-outline",
-              type: "button",
-              children: "Close"
-            }
-          ) })
-        ] })
-      ]
+      open,
+      onClose: closeOnBackdrop ? onClose : void 0,
+      zIndex,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Card,
+        {
+          className: `w-full max-w-lg ${className}`,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? "modal-title" : void 0,
+          showDecorations,
+          children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "modal-title", className: "mb-4 text-xl font-semibold", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+          ]
+        }
+      )
     }
-  );
+  ) });
   const container = document.body;
-  return reactDom.createPortal(overlay, container);
+  return reactDom.createPortal(modal, container);
 }
 var typoStyles = {
   "display-lg": { fontSize: "57px", lineHeight: "64px", letterSpacing: "-0.25px" },

package/dist/index.d.cts

@@ -45,21 +45,33 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /** Show decorative elements (default: true) */
+    showDecorations?: boolean;
 };
-declare function Card({ children, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {
+    /** Whether the modal is open */
     open: boolean;
+    /** Callback when modal should close */
     onClose?: () => void;
+    /** Modal content */
     children?: React.ReactNode;
+    /** Optional title (rendered as heading) */
     title?: string;
-    /** When true, closes when the overlay is clicked */
-    closeOnOverlay?: boolean;
+    /** When true, closes when the backdrop is clicked (default: true) */
+    closeOnBackdrop?: boolean;
+    /** Custom className for the Card */
+    className?: string;
+    /** z-index for the modal (default: 50) */
+    zIndex?: number;
+    /** Show decorative elements on the Card (default: true) */
+    showDecorations?: boolean;
 };
-declare function Modal({ open, onClose, title, closeOnOverlay, children }: ModalProps): React.ReactPortal | null;
+declare function Modal({ open, onClose, title, closeOnBackdrop, children, className, zIndex, showDecorations, }: ModalProps): React.ReactPortal | null;
 
 type TypoVariant = "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "button";
 type TypoWeight = "normal" | "medium" | "semibold" | "bold";

package/dist/index.d.ts

@@ -45,21 +45,33 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /** Show decorative elements (default: true) */
+    showDecorations?: boolean;
 };
-declare function Card({ children, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {
+    /** Whether the modal is open */
     open: boolean;
+    /** Callback when modal should close */
     onClose?: () => void;
+    /** Modal content */
     children?: React.ReactNode;
+    /** Optional title (rendered as heading) */
     title?: string;
-    /** When true, closes when the overlay is clicked */
-    closeOnOverlay?: boolean;
+    /** When true, closes when the backdrop is clicked (default: true) */
+    closeOnBackdrop?: boolean;
+    /** Custom className for the Card */
+    className?: string;
+    /** z-index for the modal (default: 50) */
+    zIndex?: number;
+    /** Show decorative elements on the Card (default: true) */
+    showDecorations?: boolean;
 };
-declare function Modal({ open, onClose, title, closeOnOverlay, children }: ModalProps): React.ReactPortal | null;
+declare function Modal({ open, onClose, title, closeOnBackdrop, children, className, zIndex, showDecorations, }: ModalProps): React.ReactPortal | null;
 
 type TypoVariant = "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "button";
 type TypoWeight = "normal" | "medium" | "semibold" | "bold";

package/dist/index.js

@@ -130,23 +130,79 @@ function Card({
   children,
   className = "",
   style,
+  showDecorations = true,
   ...props
 }) {
   const mergedStyle = {
     borderRadius: "30px",
-    background: "rgba(112, 133, 233, 0.05)",
+    backgroundColor: "color-mix(in srgb, var(--surface) 85%, transparent)",
     backdropFilter: "blur(75px)",
     WebkitBackdropFilter: "blur(75px)",
     // Safari support
+    color: "var(--fg)",
+    position: "relative",
+    overflow: "hidden",
+    transition: "background-color 0.3s ease, color 0.3s ease",
     ...style
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `p-6 ${className}`,
       style: mergedStyle,
       ...props,
-      children
+      children: [
+        showDecorations && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none",
+              zIndex: 0
+            },
+            viewBox: "0 0 967 745",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            preserveAspectRatio: "none",
+            children: [
+              /* @__PURE__ */ jsxs("defs", { children: [
+                /* @__PURE__ */ jsxs("linearGradient", { id: "paint0_linear_card", x1: "109", y1: "744.5", x2: "855", y2: "744.5", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxs("linearGradient", { id: "paint1_linear_card", x1: "967.5", y1: "10", x2: "967.5", y2: "652", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxs("linearGradient", { id: "paint2_linear_card", x1: "877", y1: "0.5", x2: "90", y2: "0.5", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxs("linearGradient", { id: "paint3_linear_card", x1: "0.5", y1: "34.5136", x2: "0.5", y2: "731.595", gradientUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsx("stop", { stopColor: "#4BDD74", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#4BDD74" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#4BDD74", stopOpacity: "0" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_card)", children: [
+                /* @__PURE__ */ jsx("line", { opacity: "0.8", x1: "855", y1: "744.5", x2: "109", y2: "744.5", stroke: "url(#paint0_linear_card)" }),
+                /* @__PURE__ */ jsx("line", { x1: "965.5", y1: "652", x2: "965.5", y2: "10", stroke: "url(#paint1_linear_card)" })
+              ] }),
+              /* @__PURE__ */ jsx("line", { opacity: "0.6", x1: "90", y1: "0.5", x2: "877", y2: "0.5", stroke: "url(#paint2_linear_card)" }),
+              /* @__PURE__ */ jsx("line", { x1: "0.5", y1: "731.595", x2: "0.500027", y2: "34.5136", stroke: "url(#paint3_linear_card)" }),
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_card", children: /* @__PURE__ */ jsx("rect", { width: "966", height: "744", rx: "10", transform: "matrix(-1 0 0 1 967 1)", fill: "white" }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children })
+      ]
     }
   );
 }
@@ -182,10 +238,28 @@ function Modal({
   open,
   onClose,
   title,
-  closeOnOverlay = true,
-  children
+  closeOnBackdrop = true,
+  children,
+  className = "",
+  zIndex = 50,
+  showDecorations = true
 }) {
   const [mounted, setMounted] = React2.useState(false);
+  const [isDark, setIsDark] = React2.useState(false);
+  React2.useEffect(() => {
+    const checkDarkMode = () => {
+      const hasDarkClass = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.querySelector(".dark") !== null;
+      setIsDark(hasDarkClass);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
   useIsomorphicLayoutEffect(() => {
     setMounted(true);
     if (!open) return;
@@ -204,40 +278,30 @@ function Modal({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   if (!mounted) return null;
-  if (!open) return null;
-  const overlay = /* @__PURE__ */ jsxs(
-    "div",
+  const modal = /* @__PURE__ */ jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsx(
+    BackgroundBlur,
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center",
-      "aria-labelledby": "modal-title",
-      role: "dialog",
-      "aria-modal": "true",
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0 bg-black/50",
-            onClick: () => closeOnOverlay && onClose?.()
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-lg rounded-[var(--radius-lg)] bg-[var(--surface)] text-[var(--fg)] p-6 shadow-xl", children: [
-          title ? /* @__PURE__ */ jsx("h2", { id: "modal-title", className: "mb-2 text-lg font-semibold", children: title }) : null,
-          /* @__PURE__ */ jsx("div", { children }),
-          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end gap-2", children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onClose,
-              className: "btn btn-outline",
-              type: "button",
-              children: "Close"
-            }
-          ) })
-        ] })
-      ]
+      open,
+      onClose: closeOnBackdrop ? onClose : void 0,
+      zIndex,
+      children: /* @__PURE__ */ jsxs(
+        Card,
+        {
+          className: `w-full max-w-lg ${className}`,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? "modal-title" : void 0,
+          showDecorations,
+          children: [
+            title && /* @__PURE__ */ jsx("h2", { id: "modal-title", className: "mb-4 text-xl font-semibold", children: title }),
+            /* @__PURE__ */ jsx("div", { children })
+          ]
+        }
+      )
     }
-  );
+  ) });
   const container = document.body;
-  return createPortal(overlay, container);
+  return createPortal(modal, container);
 }
 var typoStyles = {
   "display-lg": { fontSize: "57px", lineHeight: "64px", letterSpacing: "-0.25px" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Card.tsx

@@ -5,20 +5,27 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
   /** Additional CSS classes */
   className?: string;
+  /** Show decorative elements (default: true) */
+  showDecorations?: boolean;
 };
 
 export function Card({
   children,
   className = "",
   style,
+  showDecorations = true,
   ...props
 }: CardProps) {
   // Merge user styles with card styles
   const mergedStyle: React.CSSProperties = {
     borderRadius: "30px",
-    background: "rgba(112, 133, 233, 0.05)",
+    backgroundColor: "color-mix(in srgb, var(--surface) 85%, transparent)",
     backdropFilter: "blur(75px)",
     WebkitBackdropFilter: "blur(75px)", // Safari support
+    color: "var(--fg)",
+    position: "relative",
+    overflow: "hidden",
+    transition: "background-color 0.3s ease, color 0.3s ease",
     ...style,
   };
 
@@ -28,8 +35,59 @@ export function Card({
       style={mergedStyle}
       {...props}
     >
-      {children}
+      {showDecorations && (
+        <svg
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            zIndex: 0,
+          }}
+          viewBox="0 0 967 745"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="none"
+        >
+          <defs>
+            <linearGradient id="paint0_linear_card" x1="109" y1="744.5" x2="855" y2="744.5" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#4BDD74" stopOpacity="0"/>
+              <stop offset="0.5" stopColor="#4BDD74"/>
+              <stop offset="1" stopColor="#4BDD74" stopOpacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint1_linear_card" x1="967.5" y1="10" x2="967.5" y2="652" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#4BDD74" stopOpacity="0"/>
+              <stop offset="0.5" stopColor="#4BDD74"/>
+              <stop offset="1" stopColor="#4BDD74" stopOpacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint2_linear_card" x1="877" y1="0.5" x2="90" y2="0.5" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#4BDD74" stopOpacity="0"/>
+              <stop offset="0.5" stopColor="#4BDD74"/>
+              <stop offset="1" stopColor="#4BDD74" stopOpacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint3_linear_card" x1="0.5" y1="34.5136" x2="0.5" y2="731.595" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#4BDD74" stopOpacity="0"/>
+              <stop offset="0.5" stopColor="#4BDD74"/>
+              <stop offset="1" stopColor="#4BDD74" stopOpacity="0"/>
+            </linearGradient>
+          </defs>
+          <g clipPath="url(#clip0_card)"><line opacity="0.8" x1="855" y1="744.5" x2="109" y2="744.5" stroke="url(#paint0_linear_card)"/>
+            <line x1="965.5" y1="652" x2="965.5" y2="10" stroke="url(#paint1_linear_card)"/>
+          </g>
+          <line opacity="0.6" x1="90" y1="0.5" x2="877" y2="0.5" stroke="url(#paint2_linear_card)"/>
+          <line x1="0.5" y1="731.595" x2="0.500027" y2="34.5136" stroke="url(#paint3_linear_card)"/>
+          <defs>
+            <clipPath id="clip0_card">
+              <rect width="966" height="744" rx="10" transform="matrix(-1 0 0 1 967 1)" fill="white"/>
+            </clipPath>
+          </defs>
+        </svg>
+      )}
+      <div style={{ position: "relative", zIndex: 1 }}>
+        {children}
+      </div>
     </div>
   );
 }
-

package/src/components/Modal.tsx

@@ -1,13 +1,25 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
+import { BackgroundBlur } from "./BackgroundBlur";
+import { Card } from "./Card";
 
 export type ModalProps = {
+  /** Whether the modal is open */
   open: boolean;
+  /** Callback when modal should close */
   onClose?: () => void;
+  /** Modal content */
   children?: React.ReactNode;
+  /** Optional title (rendered as heading) */
   title?: string;
-  /** When true, closes when the overlay is clicked */
-  closeOnOverlay?: boolean;
+  /** When true, closes when the backdrop is clicked (default: true) */
+  closeOnBackdrop?: boolean;
+  /** Custom className for the Card */
+  className?: string;
+  /** z-index for the modal (default: 50) */
+  zIndex?: number;
+  /** Show decorative elements on the Card (default: true) */
+  showDecorations?: boolean;
 };
 
 function useIsomorphicLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList) {
@@ -19,10 +31,36 @@ export function Modal({
   open,
   onClose,
   title,
-  closeOnOverlay = true,
-  children
+  closeOnBackdrop = true,
+  children,
+  className = "",
+  zIndex = 50,
+  showDecorations = true,
 }: ModalProps) {
   const [mounted, setMounted] = React.useState(false);
+  const [isDark, setIsDark] = React.useState(false);
+
+  // Detect dark mode
+  React.useEffect(() => {
+    const checkDarkMode = () => {
+      const hasDarkClass = document.documentElement.classList.contains("dark") || 
+                           document.body.classList.contains("dark") ||
+                           document.querySelector(".dark") !== null;
+      setIsDark(hasDarkClass);
+    };
+
+    checkDarkMode();
+
+    // Listen for changes to dark mode
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   // Prevent body scroll when open
   useIsomorphicLayoutEffect(() => {
@@ -35,6 +73,7 @@ export function Modal({
     };
   }, [open]);
 
+  // ESC key to close
   React.useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent) => {
@@ -45,39 +84,32 @@ export function Modal({
   }, [open, onClose]);
 
   if (!mounted) return null;
-  if (!open) return null;
 
-  const overlay = (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      aria-labelledby="modal-title"
-      role="dialog"
-      aria-modal="true"
-    >
-      <div
-        className="absolute inset-0 bg-black/50"
-        onClick={() => closeOnOverlay && onClose?.()}
-      />
-      <div className="relative z-10 w-full max-w-lg rounded-[var(--radius-lg)] bg-[var(--surface)] text-[var(--fg)] p-6 shadow-xl">
-        {title ? (
-          <h2 id="modal-title" className="mb-2 text-lg font-semibold">
+  const modal = (
+    <div className={isDark ? "dark" : ""}>
+      <BackgroundBlur
+        open={open}
+        onClose={closeOnBackdrop ? onClose : undefined}
+        zIndex={zIndex}
+      >
+        <Card
+          className={`w-full max-w-lg ${className}`}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? "modal-title" : undefined}
+          showDecorations={showDecorations}
+        >
+        {title && (
+          <h2 id="modal-title" className="mb-4 text-xl font-semibold">
             {title}
           </h2>
-        ) : null}
+        )}
         <div>{children}</div>
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            onClick={onClose}
-            className="btn btn-outline"
-            type="button"
-          >
-            Close
-          </button>
-        </div>
-      </div>
+      </Card>
+    </BackgroundBlur>
     </div>
   );
 
   const container = document.body;
-  return createPortal(overlay, container);
+  return createPortal(modal, container);
 }

package/src/stories/Modal.stories.tsx

@@ -0,0 +1,275 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Modal } from "../components/Modal";
+import { Button } from "../components/Button";
+import Typo from "../components/Typo";
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper component to manage modal state
+function ModalDemo(props: Partial<React.ComponentProps<typeof Modal>>) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="p-8">
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Modal open={open} onClose={() => setOpen(false)} {...props}>
+        {props.children}
+      </Modal>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  args: { open: false },
+  render: () => (
+    <ModalDemo>
+      <Typo variant="headline-md">Welcome!</Typo>
+      <Typo variant="body-md" className="mt-4">
+        This is a simple modal with custom content. Click outside or press ESC to close.
+      </Typo>
+    </ModalDemo>
+  ),
+};
+
+export const WithTitle: Story = {
+  args: { open: false },
+  render: () => (
+    <ModalDemo title="Modal Title">
+      <Typo variant="body-md">
+        This modal includes a title heading. You can still add any content you want below it.
+      </Typo>
+      <Typo variant="body-sm" className="mt-4 text-[var(--muted-fg)]">
+        Try clicking the backdrop to close, or press ESC.
+      </Typo>
+    </ModalDemo>
+  ),
+};
+
+export const NoBackdropClose: Story = {
+  args: { open: false },
+  render: () => (
+    <ModalDemo 
+      title="Important Notice" 
+      closeOnBackdrop={false}
+    >
+      <Typo variant="body-md">
+        This modal cannot be closed by clicking the backdrop.
+      </Typo>
+      <Typo variant="body-md" className="mt-4">
+        You must use the button below or press ESC to close.
+      </Typo>
+      <div className="mt-6">
+        <Button onClick={() => {}}>Acknowledge</Button>
+      </div>
+    </ModalDemo>
+  ),
+};
+
+export const CustomStyling: Story = {
+  args: { open: false },
+  render: () => (
+    <ModalDemo 
+      title="Large Modal"
+      className="max-w-2xl p-12"
+    >
+      <Typo variant="body-md">
+        This modal has custom styling with a larger max-width and more padding.
+      </Typo>
+      <div className="mt-6 grid grid-cols-2 gap-4">
+        <div className="p-4 bg-[var(--muted)] rounded-2xl">
+          <Typo variant="label-lg" bold="semibold">Feature 1</Typo>
+          <Typo variant="body-sm" className="mt-2">Description here</Typo>
+        </div>
+        <div className="p-4 bg-[var(--muted)] rounded-2xl">
+          <Typo variant="label-lg" bold="semibold">Feature 2</Typo>
+          <Typo variant="body-sm" className="mt-2">Description here</Typo>
+        </div>
+      </div>
+    </ModalDemo>
+  ),
+};
+
+export const FormModal: Story = {
+  args: { open: false },
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      alert(`Submitted: ${name}, ${email}`);
+      setOpen(false);
+    };
+
+    return (
+      <div className="p-8">
+        <Button onClick={() => setOpen(true)}>Open Form Modal</Button>
+        <Modal 
+          open={open} 
+          onClose={() => setOpen(false)}
+          title="Contact Form"
+        >
+          <form onSubmit={handleSubmit}>
+            <div className="space-y-4">
+              <div>
+                <label className="block mb-2 text-sm font-medium">Name</label>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-4 py-2 rounded-full border border-[var(--border)] bg-transparent"
+                  placeholder="Enter your name"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block mb-2 text-sm font-medium">Email</label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-4 py-2 rounded-full border border-[var(--border)] bg-transparent"
+                  placeholder="Enter your email"
+                  required
+                />
+              </div>
+              <div className="flex gap-3 justify-end pt-4">
+                <button
+                  type="button"
+                  onClick={() => setOpen(false)}
+                  className="px-6 py-2 rounded-full border border-[var(--border)] hover:bg-[var(--muted)] transition-colors"
+                >
+                  Cancel
+                </button>
+                <Button type="submit">Submit</Button>
+              </div>
+            </div>
+          </form>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const ConfirmationDialog: Story = {
+  args: { open: false },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    const handleConfirm = () => {
+      alert("Action confirmed!");
+      setOpen(false);
+    };
+
+    return (
+      <div className="p-8">
+        <Button variant="primary" onClick={() => setOpen(true)}>
+          Delete Item
+        </Button>
+        <Modal 
+          open={open} 
+          onClose={() => setOpen(false)}
+          title="Confirm Deletion"
+          closeOnBackdrop={false}
+        >
+          <Typo variant="body-md">
+            Are you sure you want to delete this item? This action cannot be undone.
+          </Typo>
+          <div className="flex gap-3 justify-end mt-6">
+            <button
+              onClick={() => setOpen(false)}
+              className="px-6 py-2 rounded-full border border-[var(--border)] hover:bg-[var(--muted)] transition-colors"
+            >
+              Cancel
+            </button>
+            <Button variant="primary" onClick={handleConfirm}>
+              Delete
+            </Button>
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+/**
+ * This story demonstrates the Card component's decorative elements.
+ * The Card inside the Modal includes subtle ellipse gradients and border accents
+ * that can be toggled on/off via the `showDecorations` prop.
+ */
+export const WithCardDecorations: Story = {
+  args: { open: false },
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [showDecorations, setShowDecorations] = useState(true);
+
+    const ModalDemo = ({ children, ...props }: any) => (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="px-6 py-3 rounded-full bg-[var(--primary)] text-white hover:opacity-90 transition-opacity"
+          type="button"
+        >
+          Open Modal with Card Decorations
+        </button>
+        <label className="flex items-center gap-2 mt-4">
+          <input
+            type="checkbox"
+            checked={showDecorations}
+            onChange={(e) => setShowDecorations(e.target.checked)}
+          />
+          <span>Show Card Decorations</span>
+        </label>
+        <Modal 
+          open={open} 
+          onClose={() => setOpen(false)} 
+          showDecorations={showDecorations}
+          {...props} 
+        />
+      </>
+    );
+
+    return (
+      <ModalDemo title="Card with Decorative Elements">
+        <div className="space-y-4">
+          <Typo variant="body-md">
+            The Card component now includes decorative SVG elements from your Figma design:
+          </Typo>
+          <ul className="list-disc pl-6 space-y-2">
+            <li>
+              <Typo variant="body-sm">
+                <strong>Ellipse gradients</strong> - Subtle blue and white ellipses that add depth
+              </Typo>
+            </li>
+            <li>
+              <Typo variant="body-sm">
+                <strong>Gradient borders</strong> - Green gradient lines on all four sides
+              </Typo>
+            </li>
+            <li>
+              <Typo variant="body-sm">
+                <strong>Toggle option</strong> - Use the checkbox above to toggle decorations on/off
+              </Typo>
+            </li>
+          </ul>
+          <Typo variant="body-sm" className="text-gray-500">
+            Note: The current Modal is using showDecorations={showDecorations.toString()}
+          </Typo>
+        </div>
+      </ModalDemo>
+    );
+  },
+};
+