@neoptocom/neopto-ui 1.1.1 → 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.
Files changed (7) hide show
  1. package/dist/index.cjs +6 -4
  2. package/dist/index.d.cts +5 -1
  3. package/dist/index.d.ts +5 -1
  4. package/dist/index.js +6 -4
  5. package/package.json +1 -1
  6. package/src/components/Card.tsx +10 -4
  7. package/src/stories/Card.stories.tsx +16 -0
package/dist/index.cjs CHANGED
@@ -154,6 +154,8 @@ function Card({
154
154
  showDecorations = false,
155
155
  variant = "default",
156
156
  elevated = false,
157
+ lightImage,
158
+ darkImage,
157
159
  ...props
158
160
  }) {
159
161
  const isAppBackground = variant === "app-background";
@@ -186,7 +188,7 @@ function Card({
186
188
  {
187
189
  className: "absolute inset-0 transition-opacity duration-500 opacity-100 dark:opacity-0",
188
190
  style: {
189
- backgroundImage: `url(${bgLight})`,
191
+ backgroundImage: `url(${lightImage || bgLight})`,
190
192
  backgroundSize: "cover",
191
193
  backgroundPosition: "center",
192
194
  backgroundRepeat: "no-repeat",
@@ -199,7 +201,7 @@ function Card({
199
201
  {
200
202
  className: "absolute inset-0 transition-opacity duration-500 opacity-0 dark:opacity-100",
201
203
  style: {
202
- backgroundImage: `url(${bgDark})`,
204
+ backgroundImage: `url(${darkImage || bgDark})`,
203
205
  backgroundSize: "cover",
204
206
  backgroundPosition: "center",
205
207
  backgroundRepeat: "no-repeat",
@@ -218,7 +220,7 @@ function Card({
218
220
  width: "100%",
219
221
  height: "100%",
220
222
  pointerEvents: "none",
221
- zIndex: -1
223
+ zIndex: 2
222
224
  },
223
225
  viewBox: "0 0 967 745",
224
226
  fill: "none",
@@ -257,7 +259,7 @@ function Card({
257
259
  ]
258
260
  }
259
261
  ),
260
- /* @__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 })
261
263
  ]
262
264
  }
263
265
  );
package/dist/index.d.cts CHANGED
@@ -51,8 +51,12 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
51
51
  variant?: "default" | "app-background";
52
52
  /** Apply elevated shadow effect (default: false) */
53
53
  elevated?: boolean;
54
+ /** Background image URL for light mode (only for app-background variant) */
55
+ lightImage?: string;
56
+ /** Background image URL for dark mode (only for app-background variant) */
57
+ darkImage?: string;
54
58
  };
55
- declare function Card({ children, className, style, showDecorations, variant, elevated, ...props }: CardProps): react_jsx_runtime.JSX.Element;
59
+ declare function Card({ children, className, style, showDecorations, variant, elevated, lightImage, darkImage, ...props }: CardProps): react_jsx_runtime.JSX.Element;
56
60
 
57
61
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
58
62
  /** Input visual variant */
package/dist/index.d.ts CHANGED
@@ -51,8 +51,12 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
51
51
  variant?: "default" | "app-background";
52
52
  /** Apply elevated shadow effect (default: false) */
53
53
  elevated?: boolean;
54
+ /** Background image URL for light mode (only for app-background variant) */
55
+ lightImage?: string;
56
+ /** Background image URL for dark mode (only for app-background variant) */
57
+ darkImage?: string;
54
58
  };
55
- declare function Card({ children, className, style, showDecorations, variant, elevated, ...props }: CardProps): react_jsx_runtime.JSX.Element;
59
+ declare function Card({ children, className, style, showDecorations, variant, elevated, lightImage, darkImage, ...props }: CardProps): react_jsx_runtime.JSX.Element;
56
60
 
57
61
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
58
62
  /** Input visual variant */
package/dist/index.js CHANGED
@@ -133,6 +133,8 @@ function Card({
133
133
  showDecorations = false,
134
134
  variant = "default",
135
135
  elevated = false,
136
+ lightImage,
137
+ darkImage,
136
138
  ...props
137
139
  }) {
138
140
  const isAppBackground = variant === "app-background";
@@ -165,7 +167,7 @@ function Card({
165
167
  {
166
168
  className: "absolute inset-0 transition-opacity duration-500 opacity-100 dark:opacity-0",
167
169
  style: {
168
- backgroundImage: `url(${bgLight})`,
170
+ backgroundImage: `url(${lightImage || bgLight})`,
169
171
  backgroundSize: "cover",
170
172
  backgroundPosition: "center",
171
173
  backgroundRepeat: "no-repeat",
@@ -178,7 +180,7 @@ function Card({
178
180
  {
179
181
  className: "absolute inset-0 transition-opacity duration-500 opacity-0 dark:opacity-100",
180
182
  style: {
181
- backgroundImage: `url(${bgDark})`,
183
+ backgroundImage: `url(${darkImage || bgDark})`,
182
184
  backgroundSize: "cover",
183
185
  backgroundPosition: "center",
184
186
  backgroundRepeat: "no-repeat",
@@ -197,7 +199,7 @@ function Card({
197
199
  width: "100%",
198
200
  height: "100%",
199
201
  pointerEvents: "none",
200
- zIndex: -1
202
+ zIndex: 2
201
203
  },
202
204
  viewBox: "0 0 967 745",
203
205
  fill: "none",
@@ -236,7 +238,7 @@ function Card({
236
238
  ]
237
239
  }
238
240
  ),
239
- /* @__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 })
240
242
  ]
241
243
  }
242
244
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "1.1.1",
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": [
package/src/components/Card.tsx CHANGED
@@ -12,6 +12,10 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
12
12
  variant?: "default" | "app-background";
13
13
  /** Apply elevated shadow effect (default: false) */
14
14
  elevated?: boolean;
15
+ /** Background image URL for light mode (only for app-background variant) */
16
+ lightImage?: string;
17
+ /** Background image URL for dark mode (only for app-background variant) */
18
+ darkImage?: string;
15
19
  };
16
20
 
17
21
  export function Card({
@@ -21,6 +25,8 @@ export function Card({
21
25
  showDecorations = false,
22
26
  variant = "default",
23
27
  elevated = false,
28
+ lightImage,
29
+ darkImage,
24
30
  ...props
25
31
  }: CardProps) {
26
32
  const isAppBackground = variant === "app-background";
@@ -59,7 +65,7 @@ export function Card({
59
65
  <div
60
66
  className="absolute inset-0 transition-opacity duration-500 opacity-100 dark:opacity-0"
61
67
  style={{
62
- backgroundImage: `url(${assets.bgLight})`,
68
+ backgroundImage: `url(${lightImage || assets.bgLight})`,
63
69
  backgroundSize: "cover",
64
70
  backgroundPosition: "center",
65
71
  backgroundRepeat: "no-repeat",
@@ -70,7 +76,7 @@ export function Card({
70
76
  <div
71
77
  className="absolute inset-0 transition-opacity duration-500 opacity-0 dark:opacity-100"
72
78
  style={{
73
- backgroundImage: `url(${assets.bgDark})`,
79
+ backgroundImage: `url(${darkImage || assets.bgDark})`,
74
80
  backgroundSize: "cover",
75
81
  backgroundPosition: "center",
76
82
  backgroundRepeat: "no-repeat",
@@ -88,7 +94,7 @@ export function Card({
88
94
  width: "100%",
89
95
  height: "100%",
90
96
  pointerEvents: "none",
91
- zIndex: -1,
97
+ zIndex: 2,
92
98
  }}
93
99
  viewBox="0 0 967 745"
94
100
  fill="none"
@@ -129,7 +135,7 @@ export function Card({
129
135
  </defs>
130
136
  </svg>
131
137
  )}
132
- <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%" }}>
133
139
  {children}
134
140
  </div>
135
141
  </div>
package/src/stories/Card.stories.tsx CHANGED
@@ -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">