@neoptocom/neopto-ui 0.12.3 → 0.14.0

package/dist/index.cjs

@@ -152,20 +152,24 @@ function Card({
   className = "",
   style,
   showDecorations = false,
+  variant = "default",
+  elevated = false,
   ...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",
+    transition: "background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease",
+    boxShadow: elevated ? "var(--shadow-elevated)" : void 0,
     ...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 +180,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,12 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
     /** Show decorative elements (default: false) */
     showDecorations?: boolean;
+    /** Card variant (default: "default") */
+    variant?: "default" | "app-background";
+    /** Apply elevated shadow effect (default: false) */
+    elevated?: boolean;
 };
-declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, variant, elevated, ...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,12 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
     /** Show decorative elements (default: false) */
     showDecorations?: boolean;
+    /** Card variant (default: "default") */
+    variant?: "default" | "app-background";
+    /** Apply elevated shadow effect (default: false) */
+    elevated?: boolean;
 };
-declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, variant, elevated, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
     /** Input visual variant */

package/dist/index.js

@@ -131,20 +131,24 @@ function Card({
   className = "",
   style,
   showDecorations = false,
+  variant = "default",
+  elevated = false,
   ...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",
+    transition: "background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease",
+    boxShadow: elevated ? "var(--shadow-elevated)" : void 0,
     ...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 +159,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/dist/styles.css

@@ -60,6 +60,7 @@
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --shadow-elevated: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 2px 2px 24px 0 rgba(0, 0, 0, 0.10);
   
   /* Motion */
   --motion-fast: 150ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.12.3",
+  "version": "0.14.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,10 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
   className?: string;
   /** Show decorative elements (default: false) */
   showDecorations?: boolean;
+  /** Card variant (default: "default") */
+  variant?: "default" | "app-background";
+  /** Apply elevated shadow effect (default: false) */
+  elevated?: boolean;
 };
 
 export function Card({
@@ -14,20 +19,27 @@ export function Card({
   className = "",
   style,
   showDecorations = false,
+  variant = "default",
+  elevated = false,
   ...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",
+    transition: "background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease",
+    boxShadow: elevated ? "var(--shadow-elevated)" : undefined,
     ...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 +52,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,107 @@ 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 Elevated: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card elevated>
+        <Typo variant="headline-sm" bold="semibold">Elevated Card</Typo>
+        <Typo variant="body-md" className="mt-2">
+          This card uses the elevated shadow effect for a floating appearance.
+        </Typo>
+        <div className="mt-4">
+          <Button variant="primary">Take Action</Button>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const ElevatedComparison: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6 max-w-4xl">
+      <div>
+        <Typo variant="label-lg" bold="semibold" className="mb-3">Default</Typo>
+        <Card>
+          <Typo variant="title-md" bold="semibold">Regular Card</Typo>
+          <Typo variant="body-sm" className="mt-2">
+            Standard card with glassmorphic effect, no shadow.
+          </Typo>
+        </Card>
+      </div>
+      <div>
+        <Typo variant="label-lg" bold="semibold" className="mb-3">Elevated</Typo>
+        <Card elevated>
+          <Typo variant="title-md" bold="semibold">Elevated Card</Typo>
+          <Typo variant="body-sm" className="mt-2">
+            Enhanced with elevated shadow for emphasis.
+          </Typo>
+        </Card>
+      </div>
+    </div>
+  ),
+};
+
+export const ElevatedAppBackground: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card variant="app-background" elevated className="p-8">
+        <Typo variant="headline-sm" bold="semibold">Elevated + App Background</Typo>
+        <Typo variant="body-md" className="mt-3">
+          Combining the app-background variant with elevated shadow creates a stunning effect.
+        </Typo>
+        <div className="mt-6 flex gap-3">
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
 export const CustomPadding: Story = {
   render: () => (
     <div className="max-w-md space-y-4">

package/src/styles/tokens.css

@@ -44,6 +44,7 @@
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --shadow-elevated: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 2px 2px 24px 0 rgba(0, 0, 0, 0.10);
   
   /* Motion */
   --motion-fast: 150ms;