gd-ui-library 1.0.0 → 1.0.3

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+    label?: string;
+    error?: string;
+    description?: string;
+    required?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'filled' | 'unstyled';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: string;
+    error?: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Button, Input };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
     label?: string;
     error?: string;
     description?: string;
@@ -10,6 +10,18 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
     size?: 'sm' | 'md' | 'lg';
     variant?: 'default' | 'filled' | 'unstyled';
 }
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: string;
+    error?: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+}
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-export { Input, type InputProps };
+export { Button, Input };

package/dist/index.js

@@ -1,96 +1,171 @@
-// src/components/Input/Input.tsx
-import { forwardRef } from "react";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Input: () => Input
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.tsx
+var import_react = require("react");
 
 // src/utils/cn.ts
-import { clsx } from "clsx";
+var import_clsx = require("clsx");
 function cn(...inputs) {
-  return clsx(inputs);
+  return (0, import_clsx.clsx)(inputs);
 }
 
-// src/components/Input/Input.tsx
-import { AlertCircle } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Input = forwardRef(({
-  label,
-  error,
-  description,
-  required,
-  leftIcon,
-  rightIcon,
-  size = "md",
-  variant = "default",
-  className,
-  disabled,
-  id,
-  ...props
-}, ref) => {
-  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-  const sizeClasses = {
-    sm: "h-8 text-xs px-3 py-1",
-    md: "h-10 text-sm px-4 py-2",
-    lg: "h-12 text-base px-5 py-3"
-  }[size];
-  const variantClasses = {
-    default: "border border-gray-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200",
-    filled: "bg-gray-100 border border-transparent focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200",
-    unstyled: "border-none bg-transparent p-0 focus:ring-0"
-  }[variant];
-  const errorClasses = error ? "border-red-500 focus:border-red-500 focus:ring-red-200" : "";
-  const disabledClasses = disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : "";
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsxs(
-      "label",
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(
+  ({
+    className,
+    label,
+    error,
+    description,
+    required,
+    leftIcon,
+    rightIcon,
+    size = "md",
+    variant = "default",
+    children,
+    ...props
+  }, ref) => {
+    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";
+    const sizeStyles = {
+      sm: "px-3 py-1.5 text-sm rounded-md",
+      md: "px-4 py-2 text-sm rounded-md",
+      lg: "px-6 py-3 text-base rounded-lg"
+    };
+    const variantStyles = {
+      default: "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500",
+      filled: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+      unstyled: ""
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
       {
-        htmlFor: inputId,
+        ref,
         className: cn(
-          "block text-sm font-medium mb-1.5",
-          disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-700"
+          baseStyles,
+          sizeStyles[size],
+          variantStyles[variant],
+          error && "border-red-500 focus:ring-red-500",
+          className
         ),
+        "aria-invalid": !!error,
+        "aria-describedby": description ? `${props.id}-description` : void 0,
+        ...props,
         children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2", children: leftIcon }),
+          label || children,
+          rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2", children: rightIcon }),
+          required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1 text-red-500", children: "*" }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: error })
         ]
       }
-    ),
-    description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-2", children: description }),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      leftIcon && /* @__PURE__ */ jsx("span", { className: cn(
-        "absolute left-3 top-1/2 -translate-y-1/2",
-        error ? "text-red-500" : "text-gray-400"
-      ), children: leftIcon }),
-      /* @__PURE__ */ jsx(
-        "input",
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Input/Input.tsx
+var import_react2 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Input = (0, import_react2.forwardRef)(
+  ({
+    label,
+    error,
+    description,
+    required,
+    placeholder,
+    leftIcon,
+    rightIcon,
+    size = "md",
+    className,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
+    const sizeClasses = {
+      sm: "h-9 text-sm px-3",
+      md: "h-10 text-sm px-3.5",
+      lg: "h-12 text-base px-4"
+    }[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full space-y-1.5", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "label",
         {
-          ref,
-          id: inputId,
-          disabled,
-          "aria-invalid": !!error,
+          htmlFor: inputId,
           className: cn(
-            "w-full rounded-md transition-all duration-150 outline-none",
-            sizeClasses,
-            variantClasses,
-            errorClasses,
-            disabledClasses,
-            leftIcon && "pl-10",
-            rightIcon && "pr-10",
-            className
+            "text-sm font-medium",
+            disabled ? "text-gray-400" : "text-gray-700"
           ),
-          ...props
+          children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
         }
       ),
-      rightIcon && /* @__PURE__ */ jsx("span", { className: cn(
-        "absolute right-3 top-1/2 -translate-y-1/2",
-        error ? "text-red-500" : "text-gray-400"
-      ), children: rightIcon })
-    ] }),
-    error && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 mt-1.5 text-xs text-red-500", children: [
-      /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5" }),
-      error
-    ] })
-  ] });
-});
+      description && !error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500", children: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: leftIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            ref,
+            id: inputId,
+            placeholder,
+            disabled,
+            "aria-invalid": !!error,
+            className: cn(
+              "w-full rounded-lg border border-gray-300 bg-white",
+              "transition-all duration-150 outline-none",
+              "placeholder:text-gray-400 placeholder:text-sm",
+              "focus:border-blue-500 focus:ring-2 focus:ring-blue-100",
+              "disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed",
+              error && "border-red-500 focus:border-red-500 focus:ring-red-100",
+              leftIcon && "pl-10",
+              rightIcon && "pr-10",
+              sizeClasses,
+              className
+            ),
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "flex items-center gap-1 text-xs text-red-500", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.AlertCircle, { className: "w-3.5 h-3.5" }),
+        error
+      ] })
+    ] });
+  }
+);
 Input.displayName = "Input";
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
   Input
-};
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/Input.tsx","../src/utils/cn.ts"],"sourcesContent":["import React, { forwardRef } from 'react';\r\nimport { cn } from '../../utils/cn';\r\nimport { AlertCircle } from 'lucide-react';\r\n\r\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '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 Input = forwardRef<HTMLInputElement, InputProps>(({\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  className,\r\n  disabled,\r\n  id,\r\n  ...props\r\n}, ref) => {\r\n  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`; \r\n  const sizeClasses = {\r\n    sm: 'h-8 text-xs px-3 py-1',\r\n    md: 'h-10 text-sm px-4 py-2',\r\n    lg: 'h-12 text-base px-5 py-3',\r\n  }[size];\r\n  const variantClasses = {\r\n    default: 'border border-gray-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200',\r\n    filled: 'bg-gray-100 border border-transparent focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200',\r\n    unstyled: 'border-none bg-transparent p-0 focus:ring-0',\r\n  }[variant];\r\n  const errorClasses = error\r\n    ? 'border-red-500 focus:border-red-500 focus:ring-red-200'\r\n    : '';\r\n  const disabledClasses = disabled\r\n    ? 'bg-gray-100 cursor-not-allowed opacity-60'\r\n    : '';\r\n  return (\r\n    <div className=\"w-full\">\r\n      {/* Label */}\r\n      {label && (\r\n        <label\r\n          htmlFor={inputId}\r\n          className={cn(\r\n            \"block text-sm font-medium mb-1.5\",\r\n            disabled ? \"text-gray-400 cursor-not-allowed\" : \"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      {/* Description */}\r\n      {description && !error && (\r\n        <p className=\"text-xs text-gray-500 mb-2\">{description}</p>\r\n      )}\r\n      {/* Input Container */}\r\n      <div className=\"relative\">\r\n        {/* Left Icon */}\r\n        {leftIcon && (\r\n          <span className={cn(\r\n            \"absolute left-3 top-1/2 -translate-y-1/2\",\r\n            error ? \"text-red-500\" : \"text-gray-400\"\r\n          )}>\r\n            {leftIcon}\r\n          </span>\r\n        )}\r\n        {/* Input */}\r\n        <input\r\n          ref={ref}\r\n          id={inputId}\r\n          disabled={disabled}\r\n          aria-invalid={!!error}\r\n          className={cn(\r\n            \"w-full rounded-md transition-all duration-150 outline-none\",\r\n            sizeClasses,\r\n            variantClasses,\r\n            errorClasses,\r\n            disabledClasses,\r\n            leftIcon && \"pl-10\",\r\n            rightIcon && \"pr-10\",\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n        {/* Right Icon */}\r\n        {rightIcon && (\r\n          <span className={cn(\r\n            \"absolute right-3 top-1/2 -translate-y-1/2\",\r\n            error ? \"text-red-500\" : \"text-gray-400\"\r\n          )}>\r\n            {rightIcon}\r\n          </span>\r\n        )}\r\n      </div>\r\n\r\n      {/* Error Message */}\r\n      {error && (\r\n        <p className=\"flex items-center gap-1 mt-1.5 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\nInput.displayName = 'Input';","import { clsx, type ClassValue } from \"clsx\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return clsx(inputs)\r\n}\r\n"],"mappings":";AAAA,SAAgB,kBAAkB;;;ACAlC,SAAS,YAA6B;AAE/B,SAAS,MAAM,QAAsB;AAC1C,SAAO,KAAK,MAAM;AACpB;;;ADFA,SAAS,mBAAmB;AAgDpB,SAQe,KARf;AAnCD,IAAM,QAAQ,WAAyC,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,UAAU,MAAM,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC;AACtE,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN,EAAE,IAAI;AACN,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ,EAAE,OAAO;AACT,QAAM,eAAe,QACjB,2DACA;AACJ,QAAM,kBAAkB,WACpB,8CACA;AACJ,SACE,qBAAC,SAAI,WAAU,UAEZ;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WAAW,qCAAqC;AAAA,QAClD;AAAA,QAEC;AAAA;AAAA,UACA,YAAY,oBAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,IACpD;AAAA,IAGD,eAAe,CAAC,SACf,oBAAC,OAAE,WAAU,8BAA8B,uBAAY;AAAA,IAGzD,qBAAC,SAAI,WAAU,YAEZ;AAAA,kBACC,oBAAC,UAAK,WAAW;AAAA,QACf;AAAA,QACA,QAAQ,iBAAiB;AAAA,MAC3B,GACG,oBACH;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA,gBAAc,CAAC,CAAC;AAAA,UAChB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,aAAa;AAAA,YACb;AAAA,UACF;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAEC,aACC,oBAAC,UAAK,WAAW;AAAA,QACf;AAAA,QACA,QAAQ,iBAAiB;AAAA,MAC3B,GACG,qBACH;AAAA,OAEJ;AAAA,IAGC,SACC,qBAAC,OAAE,WAAU,uDACX;AAAA,0BAAC,eAAY,WAAU,eAAc;AAAA,MACpC;AAAA,OACH;AAAA,KAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;","names":[]}
+{"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":"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","names":["import_react","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,144 @@
+// src/components/Button/Button.tsx
+import { forwardRef } from "react";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+// src/components/Button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(
+  ({
+    className,
+    label,
+    error,
+    description,
+    required,
+    leftIcon,
+    rightIcon,
+    size = "md",
+    variant = "default",
+    children,
+    ...props
+  }, ref) => {
+    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";
+    const sizeStyles = {
+      sm: "px-3 py-1.5 text-sm rounded-md",
+      md: "px-4 py-2 text-sm rounded-md",
+      lg: "px-6 py-3 text-base rounded-lg"
+    };
+    const variantStyles = {
+      default: "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500",
+      filled: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+      unstyled: ""
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(
+          baseStyles,
+          sizeStyles[size],
+          variantStyles[variant],
+          error && "border-red-500 focus:ring-red-500",
+          className
+        ),
+        "aria-invalid": !!error,
+        "aria-describedby": description ? `${props.id}-description` : void 0,
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: leftIcon }),
+          label || children,
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "ml-2", children: rightIcon }),
+          required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", children: "*" }),
+          error && /* @__PURE__ */ jsx("span", { className: "sr-only", children: error })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Input/Input.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { AlertCircle } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = forwardRef2(
+  ({
+    label,
+    error,
+    description,
+    required,
+    placeholder,
+    leftIcon,
+    rightIcon,
+    size = "md",
+    className,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
+    const sizeClasses = {
+      sm: "h-9 text-sm px-3",
+      md: "h-10 text-sm px-3.5",
+      lg: "h-12 text-base px-4"
+    }[size];
+    return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-1.5", children: [
+      label && /* @__PURE__ */ jsxs2(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "text-sm font-medium",
+            disabled ? "text-gray-400" : "text-gray-700"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx2("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      description && !error && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500", children: description }),
+      /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ jsx2("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: leftIcon }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref,
+            id: inputId,
+            placeholder,
+            disabled,
+            "aria-invalid": !!error,
+            className: cn(
+              "w-full rounded-lg border border-gray-300 bg-white",
+              "transition-all duration-150 outline-none",
+              "placeholder:text-gray-400 placeholder:text-sm",
+              "focus:border-blue-500 focus:ring-2 focus:ring-blue-100",
+              "disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed",
+              error && "border-red-500 focus:border-red-500 focus:ring-red-100",
+              leftIcon && "pl-10",
+              rightIcon && "pr-10",
+              sizeClasses,
+              className
+            ),
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx2("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1 text-xs text-red-500", children: [
+        /* @__PURE__ */ jsx2(AlertCircle, { className: "w-3.5 h-3.5" }),
+        error
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+export {
+  Button,
+  Input
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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":"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","names":["forwardRef","jsx","jsxs","forwardRef"]}

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "gd-ui-library",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "1.0.3",
+  "description": "Reusable UI components",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
+  "keywords": [
+    "react",
+    "ui",
+    "components"
+  ],
   "author": "",
   "license": "ISC",
   "type": "commonjs",

package/dist/index.cjs

@@ -1,122 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Input: () => Input
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/components/Input/Input.tsx
-var import_react = require("react");
-
-// src/utils/cn.ts
-var import_clsx = require("clsx");
-function cn(...inputs) {
-  return (0, import_clsx.clsx)(inputs);
-}
-
-// src/components/Input/Input.tsx
-var import_lucide_react = require("lucide-react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Input = (0, import_react.forwardRef)(({
-  label,
-  error,
-  description,
-  required,
-  leftIcon,
-  rightIcon,
-  size = "md",
-  variant = "default",
-  className,
-  disabled,
-  id,
-  ...props
-}, ref) => {
-  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-  const sizeClasses = {
-    sm: "h-8 text-xs px-3 py-1",
-    md: "h-10 text-sm px-4 py-2",
-    lg: "h-12 text-base px-5 py-3"
-  }[size];
-  const variantClasses = {
-    default: "border border-gray-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200",
-    filled: "bg-gray-100 border border-transparent focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200",
-    unstyled: "border-none bg-transparent p-0 focus:ring-0"
-  }[variant];
-  const errorClasses = error ? "border-red-500 focus:border-red-500 focus:ring-red-200" : "";
-  const disabledClasses = disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "label",
-      {
-        htmlFor: inputId,
-        className: cn(
-          "block text-sm font-medium mb-1.5",
-          disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-700"
-        ),
-        children: [
-          label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
-        ]
-      }
-    ),
-    description && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-gray-500 mb-2", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(
-        "absolute left-3 top-1/2 -translate-y-1/2",
-        error ? "text-red-500" : "text-gray-400"
-      ), children: leftIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
-        {
-          ref,
-          id: inputId,
-          disabled,
-          "aria-invalid": !!error,
-          className: cn(
-            "w-full rounded-md transition-all duration-150 outline-none",
-            sizeClasses,
-            variantClasses,
-            errorClasses,
-            disabledClasses,
-            leftIcon && "pl-10",
-            rightIcon && "pr-10",
-            className
-          ),
-          ...props
-        }
-      ),
-      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(
-        "absolute right-3 top-1/2 -translate-y-1/2",
-        error ? "text-red-500" : "text-gray-400"
-      ), children: rightIcon })
-    ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex items-center gap-1 mt-1.5 text-xs text-red-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AlertCircle, { className: "w-3.5 h-3.5" }),
-      error
-    ] })
-  ] });
-});
-Input.displayName = "Input";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Input
-});
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Input/Input.tsx","../src/utils/cn.ts"],"sourcesContent":["export * from \"./components/Input/Input\"; ","import React, { forwardRef } from 'react';\r\nimport { cn } from '../../utils/cn';\r\nimport { AlertCircle } from 'lucide-react';\r\n\r\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '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 Input = forwardRef<HTMLInputElement, InputProps>(({\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  className,\r\n  disabled,\r\n  id,\r\n  ...props\r\n}, ref) => {\r\n  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`; \r\n  const sizeClasses = {\r\n    sm: 'h-8 text-xs px-3 py-1',\r\n    md: 'h-10 text-sm px-4 py-2',\r\n    lg: 'h-12 text-base px-5 py-3',\r\n  }[size];\r\n  const variantClasses = {\r\n    default: 'border border-gray-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200',\r\n    filled: 'bg-gray-100 border border-transparent focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200',\r\n    unstyled: 'border-none bg-transparent p-0 focus:ring-0',\r\n  }[variant];\r\n  const errorClasses = error\r\n    ? 'border-red-500 focus:border-red-500 focus:ring-red-200'\r\n    : '';\r\n  const disabledClasses = disabled\r\n    ? 'bg-gray-100 cursor-not-allowed opacity-60'\r\n    : '';\r\n  return (\r\n    <div className=\"w-full\">\r\n      {/* Label */}\r\n      {label && (\r\n        <label\r\n          htmlFor={inputId}\r\n          className={cn(\r\n            \"block text-sm font-medium mb-1.5\",\r\n            disabled ? \"text-gray-400 cursor-not-allowed\" : \"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      {/* Description */}\r\n      {description && !error && (\r\n        <p className=\"text-xs text-gray-500 mb-2\">{description}</p>\r\n      )}\r\n      {/* Input Container */}\r\n      <div className=\"relative\">\r\n        {/* Left Icon */}\r\n        {leftIcon && (\r\n          <span className={cn(\r\n            \"absolute left-3 top-1/2 -translate-y-1/2\",\r\n            error ? \"text-red-500\" : \"text-gray-400\"\r\n          )}>\r\n            {leftIcon}\r\n          </span>\r\n        )}\r\n        {/* Input */}\r\n        <input\r\n          ref={ref}\r\n          id={inputId}\r\n          disabled={disabled}\r\n          aria-invalid={!!error}\r\n          className={cn(\r\n            \"w-full rounded-md transition-all duration-150 outline-none\",\r\n            sizeClasses,\r\n            variantClasses,\r\n            errorClasses,\r\n            disabledClasses,\r\n            leftIcon && \"pl-10\",\r\n            rightIcon && \"pr-10\",\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n        {/* Right Icon */}\r\n        {rightIcon && (\r\n          <span className={cn(\r\n            \"absolute right-3 top-1/2 -translate-y-1/2\",\r\n            error ? \"text-red-500\" : \"text-gray-400\"\r\n          )}>\r\n            {rightIcon}\r\n          </span>\r\n        )}\r\n      </div>\r\n\r\n      {/* Error Message */}\r\n      {error && (\r\n        <p className=\"flex items-center gap-1 mt-1.5 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\nInput.displayName = 'Input';","import { clsx, type ClassValue } from \"clsx\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return clsx(inputs)\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;;;ACAlC,kBAAsC;AAE/B,SAAS,MAAM,QAAsB;AAC1C,aAAO,kBAAK,MAAM;AACpB;;;ADFA,0BAA4B;AAgDpB;AAnCD,IAAM,YAAQ,yBAAyC,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,UAAU,MAAM,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC;AACtE,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN,EAAE,IAAI;AACN,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ,EAAE,OAAO;AACT,QAAM,eAAe,QACjB,2DACA;AACJ,QAAM,kBAAkB,WACpB,8CACA;AACJ,SACE,6CAAC,SAAI,WAAU,UAEZ;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WAAW,qCAAqC;AAAA,QAClD;AAAA,QAEC;AAAA;AAAA,UACA,YAAY,4CAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,IACpD;AAAA,IAGD,eAAe,CAAC,SACf,4CAAC,OAAE,WAAU,8BAA8B,uBAAY;AAAA,IAGzD,6CAAC,SAAI,WAAU,YAEZ;AAAA,kBACC,4CAAC,UAAK,WAAW;AAAA,QACf;AAAA,QACA,QAAQ,iBAAiB;AAAA,MAC3B,GACG,oBACH;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA,gBAAc,CAAC,CAAC;AAAA,UAChB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,aAAa;AAAA,YACb;AAAA,UACF;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAEC,aACC,4CAAC,UAAK,WAAW;AAAA,QACf;AAAA,QACA,QAAQ,iBAAiB;AAAA,MAC3B,GACG,qBACH;AAAA,OAEJ;AAAA,IAGC,SACC,6CAAC,OAAE,WAAU,uDACX;AAAA,kDAAC,mCAAY,WAAU,eAAc;AAAA,MACpC;AAAA,OACH;AAAA,KAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;","names":[]}

package/dist/index.d.cts

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    label?: string;
-    error?: string;
-    description?: string;
-    required?: boolean;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'filled' | 'unstyled';
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-
-export { Input, type InputProps };

package/rollup.config.js

@@ -1,29 +0,0 @@
-// rollup.config.js
-import typescript from '@rollup/plugin-typescript';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import pkg from './package.json';
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: pkg.module,
-      format: 'esm',
-      sourcemap: true
-    }
-  ],
-  plugins: [
-    peerDepsExternal(),
-    resolve(),
-    commonjs(),
-    typescript({ tsconfig: './tsconfig.json' })
-  ],
-  external: ['react', 'react-dom']
-};

package/src/components/Button/Button.tsx

@@ -1,70 +0,0 @@
-import React, { ButtonHTMLAttributes, forwardRef } from "react";
-import { cn } from "../../utils/cn";
-
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
-  label?: string;
-  error?: string;
-  description?: string;
-  required?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'filled' | 'unstyled';
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ 
-    className,
-    label,
-    error,
-    description,
-    required,
-    leftIcon,
-    rightIcon,
-    size = 'md',
-    variant = 'default',
-    children,
-    ...props 
-  }, ref) => {
-    // Base styles
-    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";
-    
-    // Size variants
-    const sizeStyles = {
-      sm: "px-3 py-1.5 text-sm rounded-md",
-      md: "px-4 py-2 text-sm rounded-md",
-      lg: "px-6 py-3 text-base rounded-lg"
-    };
-    
-    // Style variants
-    const variantStyles = {
-      default: "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500",
-      filled: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
-      unstyled: ""
-    };
-    
-    return (
-      <button
-        ref={ref}
-        className={cn(
-          baseStyles,
-          sizeStyles[size],
-          variantStyles[variant],
-          error && "border-red-500 focus:ring-red-500",
-          className
-        )}
-        aria-invalid={!!error}
-        aria-describedby={description ? `${props.id}-description` : undefined}
-        {...props}
-      >
-        {leftIcon && <span className="mr-2">{leftIcon}</span>}
-        {label || children}
-        {rightIcon && <span className="ml-2">{rightIcon}</span>}
-        {required && <span className="ml-1 text-red-500">*</span>}
-        {error && <span className="sr-only">{error}</span>}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";

package/src/components/Input/Input.tsx

@@ -1,117 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
-import { AlertCircle } from 'lucide-react';
-
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  label?: string;
-  error?: string;
-  description?: string;
-  required?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'filled' | 'unstyled';
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(({
-  label,
-  error,
-  description,
-  required,
-  leftIcon,
-  rightIcon,
-  size = 'md',
-  variant = 'default',
-  className,
-  disabled,
-  id,
-  ...props
-}, ref) => {
-  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`; 
-  const sizeClasses = {
-    sm: 'h-8 text-xs px-3 py-1',
-    md: 'h-10 text-sm px-4 py-2',
-    lg: 'h-12 text-base px-5 py-3',
-  }[size];
-  const variantClasses = {
-    default: 'border border-gray-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200',
-    filled: 'bg-gray-100 border border-transparent focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200',
-    unstyled: 'border-none bg-transparent p-0 focus:ring-0',
-  }[variant];
-  const errorClasses = error
-    ? 'border-red-500 focus:border-red-500 focus:ring-red-200'
-    : '';
-  const disabledClasses = disabled
-    ? 'bg-gray-100 cursor-not-allowed opacity-60'
-    : '';
-  return (
-    <div className="w-full">
-      {/* Label */}
-      {label && (
-        <label
-          htmlFor={inputId}
-          className={cn(
-            "block text-sm font-medium mb-1.5",
-            disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-700"
-          )}
-        >
-          {label}
-          {required && <span className="text-red-500 ml-1">*</span>}
-        </label>
-      )}
-      {/* Description */}
-      {description && !error && (
-        <p className="text-xs text-gray-500 mb-2">{description}</p>
-      )}
-      {/* Input Container */}
-      <div className="relative">
-        {/* Left Icon */}
-        {leftIcon && (
-          <span className={cn(
-            "absolute left-3 top-1/2 -translate-y-1/2",
-            error ? "text-red-500" : "text-gray-400"
-          )}>
-            {leftIcon}
-          </span>
-        )}
-        {/* Input */}
-        <input
-          ref={ref}
-          id={inputId}
-          disabled={disabled}
-          aria-invalid={!!error}
-          className={cn(
-            "w-full rounded-md transition-all duration-150 outline-none",
-            sizeClasses,
-            variantClasses,
-            errorClasses,
-            disabledClasses,
-            leftIcon && "pl-10",
-            rightIcon && "pr-10",
-            className
-          )}
-          {...props}
-        />
-        {/* Right Icon */}
-        {rightIcon && (
-          <span className={cn(
-            "absolute right-3 top-1/2 -translate-y-1/2",
-            error ? "text-red-500" : "text-gray-400"
-          )}>
-            {rightIcon}
-          </span>
-        )}
-      </div>
-
-      {/* Error Message */}
-      {error && (
-        <p className="flex items-center gap-1 mt-1.5 text-xs text-red-500">
-          <AlertCircle className="w-3.5 h-3.5" />
-          {error}
-        </p>
-      )}
-    </div>
-  );
-});
-
-Input.displayName = 'Input';

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./components/Input/Input"; 

package/src/lib/utils.ts

@@ -1,5 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-
-export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs)
-}

package/src/utils/cn.ts

@@ -1,5 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-
-export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs)
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "target": "ESNext",
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "dist",
-    "esModuleInterop": true,
-    "allowJs": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src"]
-}

package/tsup.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'tsup';
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['cjs', 'esm'],
-  dts: true,
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-  external: ['react', 'react-dom'],
-});