@neoptocom/neopto-ui 0.14.0 → 1.0.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 (7) hide show
  1. package/dist/index.cjs +8 -7
  2. package/dist/index.d.cts +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +8 -7
  5. package/package.json +1 -1
  6. package/src/components/Input.tsx +9 -8
  7. package/src/stories/Input.stories.tsx +5 -5
package/dist/index.cjs CHANGED
@@ -264,22 +264,23 @@ function Card({
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
@@ -243,22 +243,23 @@ function Card({
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.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/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
  };