@neoptocom/neopto-ui 0.12.3 → 0.13.0

package/dist/index.cjs

@@ -152,20 +152,22 @@ function Card({
   className = "",
   style,
   showDecorations = false,
+  variant = "default",
   ...props
 }) {
+  const isAppBackground = variant === "app-background";
   const mergedStyle = {
     borderRadius: "30px",
-    backgroundColor: "color-mix(in srgb, var(--surface) 85%, transparent)",
-    backdropFilter: "blur(75px)",
-    WebkitBackdropFilter: "blur(75px)",
+    backgroundColor: isAppBackground ? "transparent" : "color-mix(in srgb, var(--surface) 85%, transparent)",
+    backdropFilter: isAppBackground ? void 0 : "blur(75px)",
+    WebkitBackdropFilter: isAppBackground ? void 0 : "blur(75px)",
     // Safari support
     color: "var(--fg)",
     overflow: "hidden",
     transition: "background-color 0.3s ease, color 0.3s ease",
     ...style,
-    // Only set position: relative if decorations are shown (for SVG positioning) and user hasn't provided their own
-    ...showDecorations && !style?.position && { position: "relative" }
+    // Apply position: relative by default, but allow user override via style prop
+    position: style?.position || "relative"
   };
   const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
   const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
@@ -176,6 +178,34 @@ function Card({
       style: mergedStyle,
       ...props,
       children: [
+        isAppBackground && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 transition-opacity duration-500 opacity-100 dark:opacity-0",
+              style: {
+                backgroundImage: `url(${bgLight})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                zIndex: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 transition-opacity duration-500 opacity-0 dark:opacity-100",
+              style: {
+                backgroundImage: `url(${bgDark})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                zIndex: 0
+              }
+            }
+          )
+        ] }),
         showDecorations && /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {

package/dist/index.d.cts

@@ -47,8 +47,10 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
     /** Show decorative elements (default: false) */
     showDecorations?: boolean;
+    /** Card variant (default: "default") */
+    variant?: "default" | "app-background";
 };
-declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, variant, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
     /** Input visual variant */

package/dist/index.d.ts

@@ -47,8 +47,10 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
     /** Show decorative elements (default: false) */
     showDecorations?: boolean;
+    /** Card variant (default: "default") */
+    variant?: "default" | "app-background";
 };
-declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, variant, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
     /** Input visual variant */

package/dist/index.js

@@ -131,20 +131,22 @@ function Card({
   className = "",
   style,
   showDecorations = false,
+  variant = "default",
   ...props
 }) {
+  const isAppBackground = variant === "app-background";
   const mergedStyle = {
     borderRadius: "30px",
-    backgroundColor: "color-mix(in srgb, var(--surface) 85%, transparent)",
-    backdropFilter: "blur(75px)",
-    WebkitBackdropFilter: "blur(75px)",
+    backgroundColor: isAppBackground ? "transparent" : "color-mix(in srgb, var(--surface) 85%, transparent)",
+    backdropFilter: isAppBackground ? void 0 : "blur(75px)",
+    WebkitBackdropFilter: isAppBackground ? void 0 : "blur(75px)",
     // Safari support
     color: "var(--fg)",
     overflow: "hidden",
     transition: "background-color 0.3s ease, color 0.3s ease",
     ...style,
-    // Only set position: relative if decorations are shown (for SVG positioning) and user hasn't provided their own
-    ...showDecorations && !style?.position && { position: "relative" }
+    // Apply position: relative by default, but allow user override via style prop
+    position: style?.position || "relative"
   };
   const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
   const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
@@ -155,6 +157,34 @@ function Card({
       style: mergedStyle,
       ...props,
       children: [
+        isAppBackground && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 transition-opacity duration-500 opacity-100 dark:opacity-0",
+              style: {
+                backgroundImage: `url(${bgLight})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                zIndex: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 transition-opacity duration-500 opacity-0 dark:opacity-100",
+              style: {
+                backgroundImage: `url(${bgDark})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                zIndex: 0
+              }
+            }
+          )
+        ] }),
         showDecorations && /* @__PURE__ */ jsxs(
           "svg",
           {

package/package.json

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as assets from "../assets";
 
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Content to render inside the card */
@@ -7,6 +8,8 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
   className?: string;
   /** Show decorative elements (default: false) */
   showDecorations?: boolean;
+  /** Card variant (default: "default") */
+  variant?: "default" | "app-background";
 };
 
 export function Card({
@@ -14,20 +17,25 @@ export function Card({
   className = "",
   style,
   showDecorations = false,
+  variant = "default",
   ...props
 }: CardProps) {
+  const isAppBackground = variant === "app-background";
+
   // 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
+    backgroundColor: isAppBackground 
+      ? "transparent" 
+      : "color-mix(in srgb, var(--surface) 85%, transparent)",
+    backdropFilter: isAppBackground ? undefined : "blur(75px)",
+    WebkitBackdropFilter: isAppBackground ? undefined : "blur(75px)", // Safari support
     color: "var(--fg)",
     overflow: "hidden",
     transition: "background-color 0.3s ease, color 0.3s ease",
     ...style,
-    // Only set position: relative if decorations are shown (for SVG positioning) and user hasn't provided their own
-    ...(showDecorations && !style?.position && { position: "relative" }),
+    // Apply position: relative by default, but allow user override via style prop
+    position: style?.position || "relative",
   };
 
   // Smart class merging: only add default padding if not provided
@@ -40,6 +48,33 @@ export function Card({
       style={mergedStyle}
       {...props}
     >
+      {/* App background variant images */}
+      {isAppBackground && (
+        <>
+          {/* Light mode background */}
+          <div
+            className="absolute inset-0 transition-opacity duration-500 opacity-100 dark:opacity-0"
+            style={{
+              backgroundImage: `url(${assets.bgLight})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              zIndex: 0,
+            }}
+          />
+          {/* Dark mode background */}
+          <div
+            className="absolute inset-0 transition-opacity duration-500 opacity-0 dark:opacity-100"
+            style={{
+              backgroundImage: `url(${assets.bgDark})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              zIndex: 0,
+            }}
+          />
+        </>
+      )}
       {showDecorations && (
         <svg
           style={{

package/src/stories/Card.stories.tsx

@@ -39,6 +39,49 @@ export const WithDecorations: Story = {
   ),
 };
 
+export const AppBackgroundVariant: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card variant="app-background">
+        <Typo variant="headline-sm" bold="semibold">App Background Card</Typo>
+        <Typo variant="body-md" className="mt-2">
+          This card uses the same background images as AppBackground component. It automatically switches between light and dark mode backgrounds.
+        </Typo>
+        <div className="mt-4">
+          <Button variant="primary">Learn More</Button>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const AppBackgroundLarge: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <Card variant="app-background" className="p-8" style={{ minHeight: "400px" }}>
+        <Typo variant="headline-lg" bold="bold">Large App Background Card</Typo>
+        <Typo variant="body-lg" className="mt-4">
+          The app-background variant looks great with larger cards. The background image scales to fill the entire card.
+        </Typo>
+        <div className="mt-8 grid grid-cols-2 gap-6">
+          <div>
+            <Typo variant="title-md" bold="semibold">Feature One</Typo>
+            <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+              Description of the first feature goes here.
+            </Typo>
+          </div>
+          <div>
+            <Typo variant="title-md" bold="semibold">Feature Two</Typo>
+            <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+              Description of the second feature goes here.
+            </Typo>
+          </div>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
 export const CustomPadding: Story = {
   render: () => (
     <div className="max-w-md space-y-4">