gd-ui-library 1.0.2 → 1.0.3
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.
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +66 -74
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +66 -74
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -12,15 +12,15 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
12
12
|
}
|
|
13
13
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
14
|
|
|
15
|
-
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
15
|
+
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
16
16
|
label?: string;
|
|
17
17
|
error?: string;
|
|
18
18
|
description?: string;
|
|
19
19
|
required?: boolean;
|
|
20
|
+
placeholder?: string;
|
|
20
21
|
leftIcon?: React.ReactNode;
|
|
21
22
|
rightIcon?: React.ReactNode;
|
|
22
|
-
size?:
|
|
23
|
-
variant?: 'default' | 'filled' | 'unstyled';
|
|
23
|
+
size?: "sm" | "md" | "lg";
|
|
24
24
|
}
|
|
25
25
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
26
26
|
|
package/dist/index.d.ts
CHANGED
|
@@ -12,15 +12,15 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
12
12
|
}
|
|
13
13
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
14
|
|
|
15
|
-
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
15
|
+
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
16
16
|
label?: string;
|
|
17
17
|
error?: string;
|
|
18
18
|
description?: string;
|
|
19
19
|
required?: boolean;
|
|
20
|
+
placeholder?: string;
|
|
20
21
|
leftIcon?: React.ReactNode;
|
|
21
22
|
rightIcon?: React.ReactNode;
|
|
22
|
-
size?:
|
|
23
|
-
variant?: 'default' | 'filled' | 'unstyled';
|
|
23
|
+
size?: "sm" | "md" | "lg";
|
|
24
24
|
}
|
|
25
25
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
26
26
|
|
package/dist/index.js
CHANGED
|
@@ -91,85 +91,77 @@ Button.displayName = "Button";
|
|
|
91
91
|
var import_react2 = require("react");
|
|
92
92
|
var import_lucide_react = require("lucide-react");
|
|
93
93
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
94
|
-
var Input = (0, import_react2.forwardRef)(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}[variant];
|
|
119
|
-
const errorClasses = error ? "border-red-500 focus:border-red-500 focus:ring-red-200" : "";
|
|
120
|
-
const disabledClasses = disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : "";
|
|
121
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full", children: [
|
|
122
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
123
|
-
"label",
|
|
124
|
-
{
|
|
125
|
-
htmlFor: inputId,
|
|
126
|
-
className: cn(
|
|
127
|
-
"block text-sm font-medium mb-1.5",
|
|
128
|
-
disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-700"
|
|
129
|
-
),
|
|
130
|
-
children: [
|
|
131
|
-
label,
|
|
132
|
-
required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
|
|
133
|
-
]
|
|
134
|
-
}
|
|
135
|
-
),
|
|
136
|
-
description && !error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 mb-2", children: description }),
|
|
137
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
|
|
138
|
-
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn(
|
|
139
|
-
"absolute left-3 top-1/2 -translate-y-1/2",
|
|
140
|
-
error ? "text-red-500" : "text-gray-400"
|
|
141
|
-
), children: leftIcon }),
|
|
142
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
143
|
-
"input",
|
|
94
|
+
var Input = (0, import_react2.forwardRef)(
|
|
95
|
+
({
|
|
96
|
+
label,
|
|
97
|
+
error,
|
|
98
|
+
description,
|
|
99
|
+
required,
|
|
100
|
+
placeholder,
|
|
101
|
+
leftIcon,
|
|
102
|
+
rightIcon,
|
|
103
|
+
size = "md",
|
|
104
|
+
className,
|
|
105
|
+
disabled,
|
|
106
|
+
id,
|
|
107
|
+
...props
|
|
108
|
+
}, ref) => {
|
|
109
|
+
const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
|
|
110
|
+
const sizeClasses = {
|
|
111
|
+
sm: "h-9 text-sm px-3",
|
|
112
|
+
md: "h-10 text-sm px-3.5",
|
|
113
|
+
lg: "h-12 text-base px-4"
|
|
114
|
+
}[size];
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full space-y-1.5", children: [
|
|
116
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
117
|
+
"label",
|
|
144
118
|
{
|
|
145
|
-
|
|
146
|
-
id: inputId,
|
|
147
|
-
disabled,
|
|
148
|
-
"aria-invalid": !!error,
|
|
119
|
+
htmlFor: inputId,
|
|
149
120
|
className: cn(
|
|
150
|
-
"
|
|
151
|
-
|
|
152
|
-
variantClasses,
|
|
153
|
-
errorClasses,
|
|
154
|
-
disabledClasses,
|
|
155
|
-
leftIcon && "pl-10",
|
|
156
|
-
rightIcon && "pr-10",
|
|
157
|
-
className
|
|
121
|
+
"text-sm font-medium",
|
|
122
|
+
disabled ? "text-gray-400" : "text-gray-700"
|
|
158
123
|
),
|
|
159
|
-
|
|
124
|
+
children: [
|
|
125
|
+
label,
|
|
126
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
|
|
127
|
+
]
|
|
160
128
|
}
|
|
161
129
|
),
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
130
|
+
description && !error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500", children: description }),
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
|
|
132
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: leftIcon }),
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
134
|
+
"input",
|
|
135
|
+
{
|
|
136
|
+
ref,
|
|
137
|
+
id: inputId,
|
|
138
|
+
placeholder,
|
|
139
|
+
disabled,
|
|
140
|
+
"aria-invalid": !!error,
|
|
141
|
+
className: cn(
|
|
142
|
+
"w-full rounded-lg border border-gray-300 bg-white",
|
|
143
|
+
"transition-all duration-150 outline-none",
|
|
144
|
+
"placeholder:text-gray-400 placeholder:text-sm",
|
|
145
|
+
"focus:border-blue-500 focus:ring-2 focus:ring-blue-100",
|
|
146
|
+
"disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed",
|
|
147
|
+
error && "border-red-500 focus:border-red-500 focus:ring-red-100",
|
|
148
|
+
leftIcon && "pl-10",
|
|
149
|
+
rightIcon && "pr-10",
|
|
150
|
+
sizeClasses,
|
|
151
|
+
className
|
|
152
|
+
),
|
|
153
|
+
...props
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
rightIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: rightIcon })
|
|
157
|
+
] }),
|
|
158
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "flex items-center gap-1 text-xs text-red-500", children: [
|
|
159
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.AlertCircle, { className: "w-3.5 h-3.5" }),
|
|
160
|
+
error
|
|
161
|
+
] })
|
|
162
|
+
] });
|
|
163
|
+
}
|
|
164
|
+
);
|
|
173
165
|
Input.displayName = "Input";
|
|
174
166
|
// Annotate the CommonJS export names for ESM import in node:
|
|
175
167
|
0 && (module.exports = {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/utils/cn.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export { Button } from \"./components/Button/Button\";\r\nexport { Input } from \"./components/Input/Input\";","import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {\r\n label?: string;\r\n error?: string;\r\n description?: string;\r\n required?: boolean;\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n size?: 'sm' | 'md' | 'lg';\r\n variant?: 'default' | 'filled' | 'unstyled';\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ \r\n className,\r\n label,\r\n error,\r\n description,\r\n required,\r\n leftIcon,\r\n rightIcon,\r\n size = 'md',\r\n variant = 'default',\r\n children,\r\n ...props \r\n }, ref) => {\r\n // Base styles\r\n const baseStyles = \"inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\r\n \r\n // Size variants\r\n const sizeStyles = {\r\n sm: \"px-3 py-1.5 text-sm rounded-md\",\r\n md: \"px-4 py-2 text-sm rounded-md\",\r\n lg: \"px-6 py-3 text-base rounded-lg\"\r\n };\r\n \r\n // Style variants\r\n const variantStyles = {\r\n default: \"bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500\",\r\n filled: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500\",\r\n unstyled: \"\"\r\n };\r\n \r\n return (\r\n <button\r\n ref={ref}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n variantStyles[variant],\r\n error && \"border-red-500 focus:ring-red-500\",\r\n className\r\n )}\r\n aria-invalid={!!error}\r\n aria-describedby={description ? `${props.id}-description` : undefined}\r\n {...props}\r\n >\r\n {leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\r\n {label || children}\r\n {rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\r\n {required && <span className=\"ml-1 text-red-500\">*</span>}\r\n {error && <span className=\"sr-only\">{error}</span>}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";","import { clsx, type ClassValue } from \"clsx\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return clsx(inputs)\r\n}\r\n","import React, { forwardRef } from
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/utils/cn.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export { Button } from \"./components/Button/Button\";\r\nexport { Input } from \"./components/Input/Input\";","import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {\r\n label?: string;\r\n error?: string;\r\n description?: string;\r\n required?: boolean;\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n size?: 'sm' | 'md' | 'lg';\r\n variant?: 'default' | 'filled' | 'unstyled';\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ \r\n className,\r\n label,\r\n error,\r\n description,\r\n required,\r\n leftIcon,\r\n rightIcon,\r\n size = 'md',\r\n variant = 'default',\r\n children,\r\n ...props \r\n }, ref) => {\r\n // Base styles\r\n const baseStyles = \"inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\r\n \r\n // Size variants\r\n const sizeStyles = {\r\n sm: \"px-3 py-1.5 text-sm rounded-md\",\r\n md: \"px-4 py-2 text-sm rounded-md\",\r\n lg: \"px-6 py-3 text-base rounded-lg\"\r\n };\r\n \r\n // Style variants\r\n const variantStyles = {\r\n default: \"bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500\",\r\n filled: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500\",\r\n unstyled: \"\"\r\n };\r\n \r\n return (\r\n <button\r\n ref={ref}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n variantStyles[variant],\r\n error && \"border-red-500 focus:ring-red-500\",\r\n className\r\n )}\r\n aria-invalid={!!error}\r\n aria-describedby={description ? `${props.id}-description` : undefined}\r\n {...props}\r\n >\r\n {leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\r\n {label || children}\r\n {rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\r\n {required && <span className=\"ml-1 text-red-500\">*</span>}\r\n {error && <span className=\"sr-only\">{error}</span>}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";","import { clsx, type ClassValue } from \"clsx\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return clsx(inputs)\r\n}\r\n","import React, { forwardRef } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { AlertCircle } from \"lucide-react\";\r\n\r\nexport interface InputProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\r\n label?: string;\r\n error?: string;\r\n description?: string;\r\n required?: boolean;\r\n placeholder?: string;\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\r\n (\r\n {\r\n label,\r\n error,\r\n description,\r\n required,\r\n placeholder,\r\n leftIcon,\r\n rightIcon,\r\n size = \"md\",\r\n className,\r\n disabled,\r\n id,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;\r\n\r\n const sizeClasses = {\r\n sm: \"h-9 text-sm px-3\",\r\n md: \"h-10 text-sm px-3.5\",\r\n lg: \"h-12 text-base px-4\",\r\n }[size];\r\n\r\n return (\r\n <div className=\"w-full space-y-1.5\">\r\n {/* Label */}\r\n {label && (\r\n <label\r\n htmlFor={inputId}\r\n className={cn(\r\n \"text-sm font-medium\",\r\n disabled ? \"text-gray-400\" : \"text-gray-700\"\r\n )}\r\n >\r\n {label}\r\n {required && <span className=\"text-red-500 ml-1\">*</span>}\r\n </label>\r\n )}\r\n\r\n {/* Description */}\r\n {description && !error && (\r\n <p className=\"text-xs text-gray-500\">{description}</p>\r\n )}\r\n\r\n {/* Input wrapper */}\r\n <div className=\"relative\">\r\n {/* Left Icon */}\r\n {leftIcon && (\r\n <span className=\"absolute left-3 top-1/2 -translate-y-1/2 text-gray-400\">\r\n {leftIcon}\r\n </span>\r\n )}\r\n\r\n {/* Input */}\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n placeholder={placeholder}\r\n disabled={disabled}\r\n aria-invalid={!!error}\r\n className={cn(\r\n \"w-full rounded-lg border border-gray-300 bg-white\",\r\n \"transition-all duration-150 outline-none\",\r\n \"placeholder:text-gray-400 placeholder:text-sm\",\r\n \"focus:border-blue-500 focus:ring-2 focus:ring-blue-100\",\r\n \"disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed\",\r\n error && \"border-red-500 focus:border-red-500 focus:ring-red-100\",\r\n leftIcon && \"pl-10\",\r\n rightIcon && \"pr-10\",\r\n sizeClasses,\r\n className\r\n )}\r\n {...props}\r\n />\r\n\r\n {/* Right Icon */}\r\n {rightIcon && (\r\n <span className=\"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400\">\r\n {rightIcon}\r\n </span>\r\n )}\r\n </div>\r\n \r\n {error && (\r\n <p className=\"flex items-center gap-1 text-xs text-red-500\">\r\n <AlertCircle className=\"w-3.5 h-3.5\" />\r\n {error}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nInput.displayName = \"Input\";"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAwD;;;ACAxD,kBAAsC;AAE/B,SAAS,MAAM,QAAsB;AAC1C,aAAO,kBAAK,MAAM;AACpB;;;AD0CM;AAhCC,IAAM,aAAS;AAAA,EACpB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,UAAM,aAAa;AAGnB,UAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAGA,UAAM,gBAAgB;AAAA,MACpB,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,WAAW,IAAI;AAAA,UACf,cAAc,OAAO;AAAA,UACrB,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA,gBAAc,CAAC,CAAC;AAAA,QAChB,oBAAkB,cAAc,GAAG,MAAM,EAAE,iBAAiB;AAAA,QAC3D,GAAG;AAAA,QAEH;AAAA,sBAAY,4CAAC,UAAK,WAAU,QAAQ,oBAAS;AAAA,UAC7C,SAAS;AAAA,UACT,aAAa,4CAAC,UAAK,WAAU,QAAQ,qBAAU;AAAA,UAC/C,YAAY,4CAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA,UACjD,SAAS,4CAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AErErB,IAAAA,gBAAkC;AAElC,0BAA4B;AA4ClB,IAAAC,sBAAA;AA9BH,IAAM,YAAQ;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,MAAM,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAErE,UAAM,cAAc;AAAA,MAClB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN,EAAE,IAAI;AAEN,WACE,8CAAC,SAAI,WAAU,sBAEZ;AAAA,eACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,WAAW,kBAAkB;AAAA,UAC/B;AAAA,UAEC;AAAA;AAAA,YACA,YAAY,6CAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,MACpD;AAAA,MAID,eAAe,CAAC,SACf,6CAAC,OAAE,WAAU,yBAAyB,uBAAY;AAAA,MAIpD,8CAAC,SAAI,WAAU,YAEZ;AAAA,oBACC,6CAAC,UAAK,WAAU,0DACb,oBACH;AAAA,QAIF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA,gBAAc,CAAC,CAAC;AAAA,YAChB,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,aAAa;AAAA,cACb;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA;AAAA,QACN;AAAA,QAGC,aACC,6CAAC,UAAK,WAAU,2DACb,qBACH;AAAA,SAEJ;AAAA,MAEC,SACC,8CAAC,OAAE,WAAU,gDACX;AAAA,qDAAC,mCAAY,WAAU,eAAc;AAAA,QACpC;AAAA,SACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;","names":["import_react","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -65,85 +65,77 @@ Button.displayName = "Button";
|
|
|
65
65
|
import { forwardRef as forwardRef2 } from "react";
|
|
66
66
|
import { AlertCircle } from "lucide-react";
|
|
67
67
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
68
|
-
var Input = forwardRef2(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}[variant];
|
|
93
|
-
const errorClasses = error ? "border-red-500 focus:border-red-500 focus:ring-red-200" : "";
|
|
94
|
-
const disabledClasses = disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : "";
|
|
95
|
-
return /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
|
|
96
|
-
label && /* @__PURE__ */ jsxs2(
|
|
97
|
-
"label",
|
|
98
|
-
{
|
|
99
|
-
htmlFor: inputId,
|
|
100
|
-
className: cn(
|
|
101
|
-
"block text-sm font-medium mb-1.5",
|
|
102
|
-
disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-700"
|
|
103
|
-
),
|
|
104
|
-
children: [
|
|
105
|
-
label,
|
|
106
|
-
required && /* @__PURE__ */ jsx2("span", { className: "text-red-500 ml-1", children: "*" })
|
|
107
|
-
]
|
|
108
|
-
}
|
|
109
|
-
),
|
|
110
|
-
description && !error && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 mb-2", children: description }),
|
|
111
|
-
/* @__PURE__ */ jsxs2("div", { className: "relative", children: [
|
|
112
|
-
leftIcon && /* @__PURE__ */ jsx2("span", { className: cn(
|
|
113
|
-
"absolute left-3 top-1/2 -translate-y-1/2",
|
|
114
|
-
error ? "text-red-500" : "text-gray-400"
|
|
115
|
-
), children: leftIcon }),
|
|
116
|
-
/* @__PURE__ */ jsx2(
|
|
117
|
-
"input",
|
|
68
|
+
var Input = forwardRef2(
|
|
69
|
+
({
|
|
70
|
+
label,
|
|
71
|
+
error,
|
|
72
|
+
description,
|
|
73
|
+
required,
|
|
74
|
+
placeholder,
|
|
75
|
+
leftIcon,
|
|
76
|
+
rightIcon,
|
|
77
|
+
size = "md",
|
|
78
|
+
className,
|
|
79
|
+
disabled,
|
|
80
|
+
id,
|
|
81
|
+
...props
|
|
82
|
+
}, ref) => {
|
|
83
|
+
const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
|
|
84
|
+
const sizeClasses = {
|
|
85
|
+
sm: "h-9 text-sm px-3",
|
|
86
|
+
md: "h-10 text-sm px-3.5",
|
|
87
|
+
lg: "h-12 text-base px-4"
|
|
88
|
+
}[size];
|
|
89
|
+
return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-1.5", children: [
|
|
90
|
+
label && /* @__PURE__ */ jsxs2(
|
|
91
|
+
"label",
|
|
118
92
|
{
|
|
119
|
-
|
|
120
|
-
id: inputId,
|
|
121
|
-
disabled,
|
|
122
|
-
"aria-invalid": !!error,
|
|
93
|
+
htmlFor: inputId,
|
|
123
94
|
className: cn(
|
|
124
|
-
"
|
|
125
|
-
|
|
126
|
-
variantClasses,
|
|
127
|
-
errorClasses,
|
|
128
|
-
disabledClasses,
|
|
129
|
-
leftIcon && "pl-10",
|
|
130
|
-
rightIcon && "pr-10",
|
|
131
|
-
className
|
|
95
|
+
"text-sm font-medium",
|
|
96
|
+
disabled ? "text-gray-400" : "text-gray-700"
|
|
132
97
|
),
|
|
133
|
-
|
|
98
|
+
children: [
|
|
99
|
+
label,
|
|
100
|
+
required && /* @__PURE__ */ jsx2("span", { className: "text-red-500 ml-1", children: "*" })
|
|
101
|
+
]
|
|
134
102
|
}
|
|
135
103
|
),
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
104
|
+
description && !error && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500", children: description }),
|
|
105
|
+
/* @__PURE__ */ jsxs2("div", { className: "relative", children: [
|
|
106
|
+
leftIcon && /* @__PURE__ */ jsx2("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: leftIcon }),
|
|
107
|
+
/* @__PURE__ */ jsx2(
|
|
108
|
+
"input",
|
|
109
|
+
{
|
|
110
|
+
ref,
|
|
111
|
+
id: inputId,
|
|
112
|
+
placeholder,
|
|
113
|
+
disabled,
|
|
114
|
+
"aria-invalid": !!error,
|
|
115
|
+
className: cn(
|
|
116
|
+
"w-full rounded-lg border border-gray-300 bg-white",
|
|
117
|
+
"transition-all duration-150 outline-none",
|
|
118
|
+
"placeholder:text-gray-400 placeholder:text-sm",
|
|
119
|
+
"focus:border-blue-500 focus:ring-2 focus:ring-blue-100",
|
|
120
|
+
"disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed",
|
|
121
|
+
error && "border-red-500 focus:border-red-500 focus:ring-red-100",
|
|
122
|
+
leftIcon && "pl-10",
|
|
123
|
+
rightIcon && "pr-10",
|
|
124
|
+
sizeClasses,
|
|
125
|
+
className
|
|
126
|
+
),
|
|
127
|
+
...props
|
|
128
|
+
}
|
|
129
|
+
),
|
|
130
|
+
rightIcon && /* @__PURE__ */ jsx2("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: rightIcon })
|
|
131
|
+
] }),
|
|
132
|
+
error && /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1 text-xs text-red-500", children: [
|
|
133
|
+
/* @__PURE__ */ jsx2(AlertCircle, { className: "w-3.5 h-3.5" }),
|
|
134
|
+
error
|
|
135
|
+
] })
|
|
136
|
+
] });
|
|
137
|
+
}
|
|
138
|
+
);
|
|
147
139
|
Input.displayName = "Input";
|
|
148
140
|
export {
|
|
149
141
|
Button,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/utils/cn.ts","../src/components/Input/Input.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {\r\n label?: string;\r\n error?: string;\r\n description?: string;\r\n required?: boolean;\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n size?: 'sm' | 'md' | 'lg';\r\n variant?: 'default' | 'filled' | 'unstyled';\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ \r\n className,\r\n label,\r\n error,\r\n description,\r\n required,\r\n leftIcon,\r\n rightIcon,\r\n size = 'md',\r\n variant = 'default',\r\n children,\r\n ...props \r\n }, ref) => {\r\n // Base styles\r\n const baseStyles = \"inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\r\n \r\n // Size variants\r\n const sizeStyles = {\r\n sm: \"px-3 py-1.5 text-sm rounded-md\",\r\n md: \"px-4 py-2 text-sm rounded-md\",\r\n lg: \"px-6 py-3 text-base rounded-lg\"\r\n };\r\n \r\n // Style variants\r\n const variantStyles = {\r\n default: \"bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500\",\r\n filled: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500\",\r\n unstyled: \"\"\r\n };\r\n \r\n return (\r\n <button\r\n ref={ref}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n variantStyles[variant],\r\n error && \"border-red-500 focus:ring-red-500\",\r\n className\r\n )}\r\n aria-invalid={!!error}\r\n aria-describedby={description ? `${props.id}-description` : undefined}\r\n {...props}\r\n >\r\n {leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\r\n {label || children}\r\n {rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\r\n {required && <span className=\"ml-1 text-red-500\">*</span>}\r\n {error && <span className=\"sr-only\">{error}</span>}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";","import { clsx, type ClassValue } from \"clsx\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return clsx(inputs)\r\n}\r\n","import React, { forwardRef } from
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/utils/cn.ts","../src/components/Input/Input.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {\r\n label?: string;\r\n error?: string;\r\n description?: string;\r\n required?: boolean;\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n size?: 'sm' | 'md' | 'lg';\r\n variant?: 'default' | 'filled' | 'unstyled';\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ \r\n className,\r\n label,\r\n error,\r\n description,\r\n required,\r\n leftIcon,\r\n rightIcon,\r\n size = 'md',\r\n variant = 'default',\r\n children,\r\n ...props \r\n }, ref) => {\r\n // Base styles\r\n const baseStyles = \"inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\r\n \r\n // Size variants\r\n const sizeStyles = {\r\n sm: \"px-3 py-1.5 text-sm rounded-md\",\r\n md: \"px-4 py-2 text-sm rounded-md\",\r\n lg: \"px-6 py-3 text-base rounded-lg\"\r\n };\r\n \r\n // Style variants\r\n const variantStyles = {\r\n default: \"bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500\",\r\n filled: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500\",\r\n unstyled: \"\"\r\n };\r\n \r\n return (\r\n <button\r\n ref={ref}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n variantStyles[variant],\r\n error && \"border-red-500 focus:ring-red-500\",\r\n className\r\n )}\r\n aria-invalid={!!error}\r\n aria-describedby={description ? `${props.id}-description` : undefined}\r\n {...props}\r\n >\r\n {leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\r\n {label || children}\r\n {rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\r\n {required && <span className=\"ml-1 text-red-500\">*</span>}\r\n {error && <span className=\"sr-only\">{error}</span>}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";","import { clsx, type ClassValue } from \"clsx\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return clsx(inputs)\r\n}\r\n","import React, { forwardRef } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { AlertCircle } from \"lucide-react\";\r\n\r\nexport interface InputProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\r\n label?: string;\r\n error?: string;\r\n description?: string;\r\n required?: boolean;\r\n placeholder?: string;\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\r\n (\r\n {\r\n label,\r\n error,\r\n description,\r\n required,\r\n placeholder,\r\n leftIcon,\r\n rightIcon,\r\n size = \"md\",\r\n className,\r\n disabled,\r\n id,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;\r\n\r\n const sizeClasses = {\r\n sm: \"h-9 text-sm px-3\",\r\n md: \"h-10 text-sm px-3.5\",\r\n lg: \"h-12 text-base px-4\",\r\n }[size];\r\n\r\n return (\r\n <div className=\"w-full space-y-1.5\">\r\n {/* Label */}\r\n {label && (\r\n <label\r\n htmlFor={inputId}\r\n className={cn(\r\n \"text-sm font-medium\",\r\n disabled ? \"text-gray-400\" : \"text-gray-700\"\r\n )}\r\n >\r\n {label}\r\n {required && <span className=\"text-red-500 ml-1\">*</span>}\r\n </label>\r\n )}\r\n\r\n {/* Description */}\r\n {description && !error && (\r\n <p className=\"text-xs text-gray-500\">{description}</p>\r\n )}\r\n\r\n {/* Input wrapper */}\r\n <div className=\"relative\">\r\n {/* Left Icon */}\r\n {leftIcon && (\r\n <span className=\"absolute left-3 top-1/2 -translate-y-1/2 text-gray-400\">\r\n {leftIcon}\r\n </span>\r\n )}\r\n\r\n {/* Input */}\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n placeholder={placeholder}\r\n disabled={disabled}\r\n aria-invalid={!!error}\r\n className={cn(\r\n \"w-full rounded-lg border border-gray-300 bg-white\",\r\n \"transition-all duration-150 outline-none\",\r\n \"placeholder:text-gray-400 placeholder:text-sm\",\r\n \"focus:border-blue-500 focus:ring-2 focus:ring-blue-100\",\r\n \"disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed\",\r\n error && \"border-red-500 focus:border-red-500 focus:ring-red-100\",\r\n leftIcon && \"pl-10\",\r\n rightIcon && \"pr-10\",\r\n sizeClasses,\r\n className\r\n )}\r\n {...props}\r\n />\r\n\r\n {/* Right Icon */}\r\n {rightIcon && (\r\n <span className=\"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400\">\r\n {rightIcon}\r\n </span>\r\n )}\r\n </div>\r\n \r\n {error && (\r\n <p className=\"flex items-center gap-1 text-xs text-red-500\">\r\n <AlertCircle className=\"w-3.5 h-3.5\" />\r\n {error}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nInput.displayName = \"Input\";"],"mappings":";AAAA,SAAsC,kBAAkB;;;ACAxD,SAAS,YAA6B;AAE/B,SAAS,MAAM,QAAsB;AAC1C,SAAO,KAAK,MAAM;AACpB;;;AD0CM,SAae,KAbf;AAhCC,IAAM,SAAS;AAAA,EACpB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,UAAM,aAAa;AAGnB,UAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAGA,UAAM,gBAAgB;AAAA,MACpB,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,WAAW,IAAI;AAAA,UACf,cAAc,OAAO;AAAA,UACrB,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA,gBAAc,CAAC,CAAC;AAAA,QAChB,oBAAkB,cAAc,GAAG,MAAM,EAAE,iBAAiB;AAAA,QAC3D,GAAG;AAAA,QAEH;AAAA,sBAAY,oBAAC,UAAK,WAAU,QAAQ,oBAAS;AAAA,UAC7C,SAAS;AAAA,UACT,aAAa,oBAAC,UAAK,WAAU,QAAQ,qBAAU;AAAA,UAC/C,YAAY,oBAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA,UACjD,SAAS,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AErErB,SAAgB,cAAAA,mBAAkB;AAElC,SAAS,mBAAmB;AA4ClB,SAQe,OAAAC,MARf,QAAAC,aAAA;AA9BH,IAAM,QAAQC;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,MAAM,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAErE,UAAM,cAAc;AAAA,MAClB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN,EAAE,IAAI;AAEN,WACE,gBAAAD,MAAC,SAAI,WAAU,sBAEZ;AAAA,eACC,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,WAAW,kBAAkB;AAAA,UAC/B;AAAA,UAEC;AAAA;AAAA,YACA,YAAY,gBAAAD,KAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,MACpD;AAAA,MAID,eAAe,CAAC,SACf,gBAAAA,KAAC,OAAE,WAAU,yBAAyB,uBAAY;AAAA,MAIpD,gBAAAC,MAAC,SAAI,WAAU,YAEZ;AAAA,oBACC,gBAAAD,KAAC,UAAK,WAAU,0DACb,oBACH;AAAA,QAIF,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA,gBAAc,CAAC,CAAC;AAAA,YAChB,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,aAAa;AAAA,cACb;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA;AAAA,QACN;AAAA,QAGC,aACC,gBAAAA,KAAC,UAAK,WAAU,2DACb,qBACH;AAAA,SAEJ;AAAA,MAEC,SACC,gBAAAC,MAAC,OAAE,WAAU,gDACX;AAAA,wBAAAD,KAAC,eAAY,WAAU,eAAc;AAAA,QACpC;AAAA,SACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;","names":["forwardRef","jsx","jsxs","forwardRef"]}
|