@neoptocom/neopto-ui 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -153,6 +153,7 @@ function Card({
   style,
   showDecorations = false,
   variant = "default",
+  elevated = false,
   ...props
 }) {
   const isAppBackground = variant === "app-background";
@@ -164,7 +165,8 @@ function Card({
     // 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,
     // Apply position: relative by default, but allow user override via style prop
     position: style?.position || "relative"

package/dist/index.d.cts

@@ -49,8 +49,10 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     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, variant, ...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

@@ -49,8 +49,10 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     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, variant, ...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

@@ -132,6 +132,7 @@ function Card({
   style,
   showDecorations = false,
   variant = "default",
+  elevated = false,
   ...props
 }) {
   const isAppBackground = variant === "app-background";
@@ -143,7 +144,8 @@ function Card({
     // 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,
     // Apply position: relative by default, but allow user override via style prop
     position: style?.position || "relative"

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.13.0",
+  "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

@@ -10,6 +10,8 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
   showDecorations?: boolean;
   /** Card variant (default: "default") */
   variant?: "default" | "app-background";
+  /** Apply elevated shadow effect (default: false) */
+  elevated?: boolean;
 };
 
 export function Card({
@@ -18,6 +20,7 @@ export function Card({
   style,
   showDecorations = false,
   variant = "default",
+  elevated = false,
   ...props
 }: CardProps) {
   const isAppBackground = variant === "app-background";
@@ -32,7 +35,8 @@ export function Card({
     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,
     // Apply position: relative by default, but allow user override via style prop
     position: style?.position || "relative",

package/src/stories/Card.stories.tsx

@@ -82,6 +82,64 @@ export const AppBackgroundLarge: Story = {
   ),
 };
 
+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;