@neoptocom/neopto-ui 1.0.2 → 1.2.0

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 (6) hide show
  1. package/dist/index.cjs +4 -2
  2. package/dist/index.d.cts +5 -1
  3. package/dist/index.d.ts +5 -1
  4. package/dist/index.js +4 -2
  5. package/package.json +1 -1
  6. package/src/components/Card.tsx +8 -2
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",
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",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "1.0.2",
3
+ "version": "1.2.0",
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",