@neoptocom/neopto-ui 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -220,7 +220,7 @@ function Card({
220
220
  width: "100%",
221
221
  height: "100%",
222
222
  pointerEvents: "none",
223
- zIndex: -1
223
+ zIndex: 2
224
224
  },
225
225
  viewBox: "0 0 967 745",
226
226
  fill: "none",
@@ -259,7 +259,7 @@ function Card({
259
259
  ]
260
260
  }
261
261
  ),
262
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", zIndex: 2, display: "inherit", flex: "inherit", flexDirection: "inherit", gap: "inherit", width: "100%", height: "100%" }, children })
262
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", zIndex: 3, display: "inherit", flex: "inherit", flexDirection: "inherit", gap: "inherit", width: "100%", height: "100%" }, children })
263
263
  ]
264
264
  }
265
265
  );
package/dist/index.js CHANGED
@@ -199,7 +199,7 @@ function Card({
199
199
  width: "100%",
200
200
  height: "100%",
201
201
  pointerEvents: "none",
202
- zIndex: -1
202
+ zIndex: 2
203
203
  },
204
204
  viewBox: "0 0 967 745",
205
205
  fill: "none",
@@ -238,7 +238,7 @@ function Card({
238
238
  ]
239
239
  }
240
240
  ),
241
- /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 2, display: "inherit", flex: "inherit", flexDirection: "inherit", gap: "inherit", width: "100%", height: "100%" }, children })
241
+ /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 3, display: "inherit", flex: "inherit", flexDirection: "inherit", gap: "inherit", width: "100%", height: "100%" }, children })
242
242
  ]
243
243
  }
244
244
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "private": false,
5
5
  "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+.",
6
6
  "keywords": [
@@ -94,7 +94,7 @@ export function Card({
94
94
  width: "100%",
95
95
  height: "100%",
96
96
  pointerEvents: "none",
97
- zIndex: -1,
97
+ zIndex: 2,
98
98
  }}
99
99
  viewBox="0 0 967 745"
100
100
  fill="none"
@@ -135,7 +135,7 @@ export function Card({
135
135
  </defs>
136
136
  </svg>
137
137
  )}
138
- <div style={{ position: "relative", zIndex: 2, display: "inherit", flex: "inherit", flexDirection: "inherit", gap: "inherit", width: "100%", height: "100%" }}>
138
+ <div style={{ position: "relative", zIndex: 3, display: "inherit", flex: "inherit", flexDirection: "inherit", gap: "inherit", width: "100%", height: "100%" }}>
139
139
  {children}
140
140
  </div>
141
141
  </div>
@@ -55,6 +55,22 @@ export const AppBackgroundVariant: Story = {
55
55
  ),
56
56
  };
57
57
 
58
+ export const AppBackgroundWithDecorations: Story = {
59
+ render: () => (
60
+ <div className="max-w-md">
61
+ <Card variant="app-background" showDecorations={true}>
62
+ <Typo variant="headline-sm" bold="semibold">App Background + Decorations</Typo>
63
+ <Typo variant="body-md" className="mt-2">
64
+ This card combines the app-background variant with decorative SVG gradient borders. The decorations render above the background image.
65
+ </Typo>
66
+ <div className="mt-4">
67
+ <Button variant="primary">Explore</Button>
68
+ </div>
69
+ </Card>
70
+ </div>
71
+ ),
72
+ };
73
+
58
74
  export const AppBackgroundLarge: Story = {
59
75
  render: () => (
60
76
  <div className="max-w-2xl">