@neoptocom/neopto-ui 0.11.0 → 0.11.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 +9 -6
  2. package/dist/index.d.cts +8 -2
  3. package/dist/index.d.ts +8 -2
  4. package/dist/index.js +9 -6
  5. package/package.json +1 -1
  6. package/src/components/Input.tsx +14 -7
  7. package/src/stories/Input.stories.tsx +11 -0
package/dist/index.cjs CHANGED
@@ -230,20 +230,23 @@ function Card({
230
230
  );
231
231
  }
232
232
  var Input = React2__namespace.forwardRef(
233
- ({ className, disabled, ...props }, ref) => {
233
+ ({ className, disabled, variant = "default", ...props }, ref) => {
234
+ const isBorderless = variant === "borderless";
234
235
  return /* @__PURE__ */ jsxRuntime.jsx(
235
236
  "input",
236
237
  {
237
238
  ref,
238
239
  disabled,
239
240
  className: [
240
- "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
241
+ "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
241
242
  "text-sm placeholder:text-[var(--muted-fg)]",
242
- disabled ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed" : [
243
+ !isBorderless && "border",
244
+ disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
243
245
  "text-[var(--muted-fg)]",
244
- "border-[var(--muted-fg)]",
245
- "hover:border-[var(--border)]",
246
- "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
246
+ isBorderless ? "" : "border-[var(--muted-fg)]",
247
+ isBorderless ? "" : "hover:border-[var(--border)]",
248
+ "focus:text-[var(--fg)]",
249
+ isBorderless ? "" : "focus:border-[var(--color-brand)]"
247
250
  ].join(" "),
248
251
  className
249
252
  ].join(" "),
package/dist/index.d.cts CHANGED
@@ -50,8 +50,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
50
50
  };
51
51
  declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
52
52
 
53
- type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
54
- declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
53
+ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
54
+ /** Input visual variant */
55
+ variant?: "default" | "borderless";
56
+ };
57
+ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
58
+ /** Input visual variant */
59
+ variant?: "default" | "borderless";
60
+ } & React.RefAttributes<HTMLInputElement>>;
55
61
 
56
62
  type ModalProps = {
57
63
  /** Whether the modal is open */
package/dist/index.d.ts CHANGED
@@ -50,8 +50,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
50
50
  };
51
51
  declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
52
52
 
53
- type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
54
- declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
53
+ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
54
+ /** Input visual variant */
55
+ variant?: "default" | "borderless";
56
+ };
57
+ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
58
+ /** Input visual variant */
59
+ variant?: "default" | "borderless";
60
+ } & React.RefAttributes<HTMLInputElement>>;
55
61
 
56
62
  type ModalProps = {
57
63
  /** Whether the modal is open */
package/dist/index.js CHANGED
@@ -209,20 +209,23 @@ function Card({
209
209
  );
210
210
  }
211
211
  var Input = React2.forwardRef(
212
- ({ className, disabled, ...props }, ref) => {
212
+ ({ className, disabled, variant = "default", ...props }, ref) => {
213
+ const isBorderless = variant === "borderless";
213
214
  return /* @__PURE__ */ jsx(
214
215
  "input",
215
216
  {
216
217
  ref,
217
218
  disabled,
218
219
  className: [
219
- "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
220
+ "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
220
221
  "text-sm placeholder:text-[var(--muted-fg)]",
221
- disabled ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed" : [
222
+ !isBorderless && "border",
223
+ disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
222
224
  "text-[var(--muted-fg)]",
223
- "border-[var(--muted-fg)]",
224
- "hover:border-[var(--border)]",
225
- "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
225
+ isBorderless ? "" : "border-[var(--muted-fg)]",
226
+ isBorderless ? "" : "hover:border-[var(--border)]",
227
+ "focus:text-[var(--fg)]",
228
+ isBorderless ? "" : "focus:border-[var(--color-brand)]"
226
229
  ].join(" "),
227
230
  className
228
231
  ].join(" "),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "0.11.0",
3
+ "version": "0.11.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/Input.tsx CHANGED
@@ -1,23 +1,30 @@
1
1
  import * as React from "react";
2
2
 
3
- export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
3
+ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
4
+ /** Input visual variant */
5
+ variant?: "default" | "borderless";
6
+ };
4
7
 
5
8
  export const Input = React.forwardRef<HTMLInputElement, InputProps>(
6
- ({ className, disabled, ...props }, ref) => {
9
+ ({ className, disabled, variant = "default", ...props }, ref) => {
10
+ const isBorderless = variant === "borderless";
11
+
7
12
  return (
8
13
  <input
9
14
  ref={ref}
10
15
  disabled={disabled}
11
16
  className={[
12
- "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
17
+ "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
13
18
  "text-sm placeholder:text-[var(--muted-fg)]",
19
+ !isBorderless && "border",
14
20
  disabled
15
- ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed"
21
+ ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]")
16
22
  : [
17
23
  "text-[var(--muted-fg)]",
18
- "border-[var(--muted-fg)]",
19
- "hover:border-[var(--border)]",
20
- "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
24
+ isBorderless ? "" : "border-[var(--muted-fg)]",
25
+ isBorderless ? "" : "hover:border-[var(--border)]",
26
+ "focus:text-[var(--fg)]",
27
+ isBorderless ? "" : "focus:border-[var(--color-brand)]"
21
28
  ].join(" "),
22
29
  className
23
30
  ].join(" ")}
package/src/stories/Input.stories.tsx CHANGED
@@ -36,3 +36,14 @@ export const Types: Story = {
36
36
  </div>
37
37
  )
38
38
  };
39
+
40
+ export const Borderless: Story = {
41
+ render: () => (
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 />
47
+ </div>
48
+ )
49
+ };