@neoptocom/neopto-ui 0.9.0 → 0.9.2

package/dist/index.cjs

@@ -147,6 +147,86 @@ function BackgroundBlur({
     }
   );
 }
+function Card({
+  children,
+  className = "",
+  style,
+  showDecorations = true,
+  ...props
+}) {
+  const mergedStyle = {
+    borderRadius: "30px",
+    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.jsxs(
+    "div",
+    {
+      className: `p-6 ${className}`,
+      style: mergedStyle,
+      ...props,
+      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 })
+      ]
+    }
+  );
+}
 var Input = React2__namespace.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -179,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;
@@ -201,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" },
@@ -1211,6 +1299,7 @@ exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.BackgroundBlur = BackgroundBlur;
 exports.Button = Button;
+exports.Card = Card;
 exports.ChatButton = ChatButton_default;
 exports.Chip = Chip;
 exports.Counter = Counter;

package/dist/index.d.cts

@@ -40,18 +40,38 @@ type BackgroundBlurProps = {
 };
 declare function BackgroundBlur({ open, children, onClose, zIndex, className, }: BackgroundBlurProps): react_jsx_runtime.JSX.Element | null;
 
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Content to render inside the card */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show decorative elements (default: true) */
+    showDecorations?: boolean;
+};
+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";
@@ -273,4 +293,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.d.ts

@@ -40,18 +40,38 @@ type BackgroundBlurProps = {
 };
 declare function BackgroundBlur({ open, children, onClose, zIndex, className, }: BackgroundBlurProps): react_jsx_runtime.JSX.Element | null;
 
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Content to render inside the card */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show decorative elements (default: true) */
+    showDecorations?: boolean;
+};
+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";
@@ -273,4 +293,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.js

@@ -126,6 +126,86 @@ function BackgroundBlur({
     }
   );
 }
+function Card({
+  children,
+  className = "",
+  style,
+  showDecorations = true,
+  ...props
+}) {
+  const mergedStyle = {
+    borderRadius: "30px",
+    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__ */ jsxs(
+    "div",
+    {
+      className: `p-6 ${className}`,
+      style: mergedStyle,
+      ...props,
+      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 })
+      ]
+    }
+  );
+}
 var Input = React2.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -158,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;
@@ -180,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" },
@@ -1182,4 +1270,4 @@ var ChatButton = ({
 };
 var ChatButton_default = ChatButton;
 
-export { AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, ChatButton_default as ChatButton, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo, assets_exports as assets };
+export { AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, ChatButton_default as ChatButton, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo, assets_exports as assets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.9.0",
+  "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

@@ -0,0 +1,93 @@
+import * as React from "react";
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Content to render inside the card */
+  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",
+    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 (
+    <div
+      className={`p-6 ${className}`}
+      style={mergedStyle}
+      {...props}
+    >
+      {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/index.ts

@@ -4,6 +4,7 @@ export * as assets from "./assets";
 // Components
 export { AppBackground } from "./components/AppBackground";
 export { BackgroundBlur } from "./components/BackgroundBlur";
+export { Card } from "./components/Card";
 export * from "./components/Input";
 export * from "./components/Modal";
 export { default as Typo } from "./components/Typo";
@@ -22,6 +23,7 @@ export * from "./components/Chat";
 // Types
 export type { AppBackgroundProps } from "./components/AppBackground";
 export type { BackgroundBlurProps } from "./components/BackgroundBlur";
+export type { CardProps } from "./components/Card";
 export type { InputProps } from "./components/Input";
 export type { ModalProps } from "./components/Modal";
 export type { TypoProps, TypoVariant, TypoWeight } from "./components/Typo";

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>
+    );
+  },
+};
+