@neoptocom/neopto-ui 0.14.0 → 1.0.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 (8) hide show
  1. package/dist/index.cjs +12 -11
  2. package/dist/index.d.cts +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +12 -11
  5. package/package.json +1 -1
  6. package/src/components/Card.tsx +4 -4
  7. package/src/components/Input.tsx +9 -8
  8. package/src/stories/Input.stories.tsx +5 -5
package/dist/index.cjs CHANGED
@@ -172,7 +172,7 @@ function Card({
172
172
  position: style?.position || "relative"
173
173
  };
174
174
  const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
175
- const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
175
+ const cardClasses = ` z-0 ${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
176
176
  return /* @__PURE__ */ jsxRuntime.jsxs(
177
177
  "div",
178
178
  {
@@ -203,7 +203,7 @@ function Card({
203
203
  backgroundSize: "cover",
204
204
  backgroundPosition: "center",
205
205
  backgroundRepeat: "no-repeat",
206
- zIndex: 0
206
+ zIndex: -1
207
207
  }
208
208
  }
209
209
  )
@@ -218,7 +218,7 @@ function Card({
218
218
  width: "100%",
219
219
  height: "100%",
220
220
  pointerEvents: "none",
221
- zIndex: 0
221
+ zIndex: -1
222
222
  },
223
223
  viewBox: "0 0 967 745",
224
224
  fill: "none",
@@ -257,29 +257,30 @@ function Card({
257
257
  ]
258
258
  }
259
259
  ),
260
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", zIndex: 1, height: "100%" }, children })
260
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "contents" }, children })
261
261
  ]
262
262
  }
263
263
  );
264
264
  }
265
265
  var Input = React2__namespace.forwardRef(
266
266
  ({ className, disabled, variant = "default", ...props }, ref) => {
267
- const isBorderless = variant === "borderless";
267
+ const isInline = variant === "inline";
268
268
  return /* @__PURE__ */ jsxRuntime.jsx(
269
269
  "input",
270
270
  {
271
271
  ref,
272
272
  disabled,
273
273
  className: [
274
- "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
274
+ "w-full bg-transparent outline-none transition-colors",
275
+ isInline ? "" : "h-12 px-4 rounded-full",
275
276
  "text-sm placeholder:text-[var(--muted-fg)]",
276
- !isBorderless && "border",
277
- disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
277
+ !isInline && "border",
278
+ disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
278
279
  "text-[var(--muted-fg)]",
279
- isBorderless ? "" : "border-[var(--muted-fg)]",
280
- isBorderless ? "" : "hover:border-[var(--border)]",
280
+ isInline ? "" : "border-[var(--muted-fg)]",
281
+ isInline ? "" : "hover:border-[var(--border)]",
281
282
  "focus:text-[var(--fg)]",
282
- isBorderless ? "" : "focus:border-[var(--color-brand)]"
283
+ isInline ? "" : "focus:border-[var(--color-brand)]"
283
284
  ].join(" "),
284
285
  className
285
286
  ].join(" "),
package/dist/index.d.cts CHANGED
@@ -56,11 +56,11 @@ declare function Card({ children, className, style, showDecorations, variant, el
56
56
 
57
57
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
58
58
  /** Input visual variant */
59
- variant?: "default" | "borderless";
59
+ variant?: "default" | "inline";
60
60
  };
61
61
  declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
62
62
  /** Input visual variant */
63
- variant?: "default" | "borderless";
63
+ variant?: "default" | "inline";
64
64
  } & React.RefAttributes<HTMLInputElement>>;
65
65
 
66
66
  type ModalProps = {
package/dist/index.d.ts CHANGED
@@ -56,11 +56,11 @@ declare function Card({ children, className, style, showDecorations, variant, el
56
56
 
57
57
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
58
58
  /** Input visual variant */
59
- variant?: "default" | "borderless";
59
+ variant?: "default" | "inline";
60
60
  };
61
61
  declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
62
62
  /** Input visual variant */
63
- variant?: "default" | "borderless";
63
+ variant?: "default" | "inline";
64
64
  } & React.RefAttributes<HTMLInputElement>>;
65
65
 
66
66
  type ModalProps = {
package/dist/index.js CHANGED
@@ -151,7 +151,7 @@ function Card({
151
151
  position: style?.position || "relative"
152
152
  };
153
153
  const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
154
- const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
154
+ const cardClasses = ` z-0 ${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
155
155
  return /* @__PURE__ */ jsxs(
156
156
  "div",
157
157
  {
@@ -182,7 +182,7 @@ function Card({
182
182
  backgroundSize: "cover",
183
183
  backgroundPosition: "center",
184
184
  backgroundRepeat: "no-repeat",
185
- zIndex: 0
185
+ zIndex: -1
186
186
  }
187
187
  }
188
188
  )
@@ -197,7 +197,7 @@ function Card({
197
197
  width: "100%",
198
198
  height: "100%",
199
199
  pointerEvents: "none",
200
- zIndex: 0
200
+ zIndex: -1
201
201
  },
202
202
  viewBox: "0 0 967 745",
203
203
  fill: "none",
@@ -236,29 +236,30 @@ function Card({
236
236
  ]
237
237
  }
238
238
  ),
239
- /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1, height: "100%" }, children })
239
+ /* @__PURE__ */ jsx("div", { style: { display: "contents" }, children })
240
240
  ]
241
241
  }
242
242
  );
243
243
  }
244
244
  var Input = React2.forwardRef(
245
245
  ({ className, disabled, variant = "default", ...props }, ref) => {
246
- const isBorderless = variant === "borderless";
246
+ const isInline = variant === "inline";
247
247
  return /* @__PURE__ */ jsx(
248
248
  "input",
249
249
  {
250
250
  ref,
251
251
  disabled,
252
252
  className: [
253
- "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
253
+ "w-full bg-transparent outline-none transition-colors",
254
+ isInline ? "" : "h-12 px-4 rounded-full",
254
255
  "text-sm placeholder:text-[var(--muted-fg)]",
255
- !isBorderless && "border",
256
- disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
256
+ !isInline && "border",
257
+ disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
257
258
  "text-[var(--muted-fg)]",
258
- isBorderless ? "" : "border-[var(--muted-fg)]",
259
- isBorderless ? "" : "hover:border-[var(--border)]",
259
+ isInline ? "" : "border-[var(--muted-fg)]",
260
+ isInline ? "" : "hover:border-[var(--border)]",
260
261
  "focus:text-[var(--fg)]",
261
- isBorderless ? "" : "focus:border-[var(--color-brand)]"
262
+ isInline ? "" : "focus:border-[var(--color-brand)]"
262
263
  ].join(" "),
263
264
  className
264
265
  ].join(" "),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "0.14.0",
3
+ "version": "1.0.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
@@ -44,7 +44,7 @@ export function Card({
44
44
 
45
45
  // Smart class merging: only add default padding if not provided
46
46
  const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
47
- const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
47
+ const cardClasses = ` z-0 ${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
48
48
 
49
49
  return (
50
50
  <div
@@ -74,7 +74,7 @@ export function Card({
74
74
  backgroundSize: "cover",
75
75
  backgroundPosition: "center",
76
76
  backgroundRepeat: "no-repeat",
77
- zIndex: 0,
77
+ zIndex: -1,
78
78
  }}
79
79
  />
80
80
  </>
@@ -88,7 +88,7 @@ export function Card({
88
88
  width: "100%",
89
89
  height: "100%",
90
90
  pointerEvents: "none",
91
- zIndex: 0,
91
+ zIndex: -1,
92
92
  }}
93
93
  viewBox="0 0 967 745"
94
94
  fill="none"
@@ -129,7 +129,7 @@ export function Card({
129
129
  </defs>
130
130
  </svg>
131
131
  )}
132
- <div style={{ position: "relative", zIndex: 1, height: "100%" }}>
132
+ <div style={{ display: "contents" }}>
133
133
  {children}
134
134
  </div>
135
135
  </div>
package/src/components/Input.tsx CHANGED
@@ -2,29 +2,30 @@ import * as React from "react";
2
2
 
3
3
  export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
4
4
  /** Input visual variant */
5
- variant?: "default" | "borderless";
5
+ variant?: "default" | "inline";
6
6
  };
7
7
 
8
8
  export const Input = React.forwardRef<HTMLInputElement, InputProps>(
9
9
  ({ className, disabled, variant = "default", ...props }, ref) => {
10
- const isBorderless = variant === "borderless";
10
+ const isInline = variant === "inline";
11
11
 
12
12
  return (
13
13
  <input
14
14
  ref={ref}
15
15
  disabled={disabled}
16
16
  className={[
17
- "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
17
+ "w-full bg-transparent outline-none transition-colors",
18
+ isInline ? "" : "h-12 px-4 rounded-full",
18
19
  "text-sm placeholder:text-[var(--muted-fg)]",
19
- !isBorderless && "border",
20
+ !isInline && "border",
20
21
  disabled
21
- ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]")
22
+ ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]")
22
23
  : [
23
24
  "text-[var(--muted-fg)]",
24
- isBorderless ? "" : "border-[var(--muted-fg)]",
25
- isBorderless ? "" : "hover:border-[var(--border)]",
25
+ isInline ? "" : "border-[var(--muted-fg)]",
26
+ isInline ? "" : "hover:border-[var(--border)]",
26
27
  "focus:text-[var(--fg)]",
27
- isBorderless ? "" : "focus:border-[var(--color-brand)]"
28
+ isInline ? "" : "focus:border-[var(--color-brand)]"
28
29
  ].join(" "),
29
30
  className
30
31
  ].join(" ")}
package/src/stories/Input.stories.tsx CHANGED
@@ -37,13 +37,13 @@ export const Types: Story = {
37
37
  )
38
38
  };
39
39
 
40
- export const Borderless: Story = {
40
+ export const Inline: Story = {
41
41
  render: () => (
42
42
  <div className="flex flex-col gap-4 w-96">
43
- <Input variant="borderless" placeholder="Borderless input" type="text" />
44
- <Input variant="borderless" placeholder="Borderless email" type="email" />
45
- <Input variant="borderless" placeholder="Borderless search..." />
46
- <Input variant="borderless" placeholder="Disabled borderless" disabled />
43
+ <Input variant="inline" placeholder="Inline input" type="text" />
44
+ <Input variant="inline" placeholder="Inline email" type="email" />
45
+ <Input variant="inline" placeholder="Inline search..." />
46
+ <Input variant="inline" placeholder="Disabled inline" disabled />
47
47
  </div>
48
48
  )
49
49
  };