gd-ui-library 1.0.0

package/dist/index.cjs

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+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/dist/index.d.ts

@@ -0,0 +1,15 @@
+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/dist/index.js

@@ -0,0 +1,96 @@
+// src/components/Input/Input.tsx
+import { forwardRef } from "react";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return 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",
+      {
+        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__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    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",
+        {
+          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__ */ 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
+    ] })
+  ] });
+});
+Input.displayName = "Input";
+export {
+  Input
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "gd-ui-library",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsup",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,29 @@
+// 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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,117 @@
+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

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

package/src/lib/utils.ts

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

package/src/utils/cn.ts

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

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "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

@@ -0,0 +1,10 @@
+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'],
+});