@aziziaziz/react-components 1.0.0

package/dist/index.css

@@ -0,0 +1,69 @@
+/* src/components/input/Input.css */
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  align-items: flex-start;
+}
+.inputElementContainer {
+  position: relative;
+  width: 100%;
+}
+.input {
+  width: 100%;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  border: 1px solid var(--border-color);
+  outline: none;
+  border-radius: 8px;
+  transition: var(--transTime);
+  padding: 10px 15px;
+  height: 45px;
+  &:focus {
+    box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
+  }
+  &:disabled {
+    background-color: var(--btn-disabled-bg);
+    color: var(--btn-disabled-text);
+    border-color: transparent;
+    cursor: not-allowed;
+  }
+  &::placeholder {
+    color: rgba(var(--color-text-rgb), 0.4);
+  }
+}
+
+/* src/components/skeletonLoading/SkeletonLoading.css */
+.skeletonMainContainer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--skeleton-bg);
+  overflow: hidden;
+}
+.skeletonAnimContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background:
+    linear-gradient(
+      90deg,
+      var(--skeleton-bg) 0%,
+      var(--skeleton-fg) 50%,
+      var(--skeleton-bg) 100%);
+  background-size: 200% 100%;
+  animation: loading 1.6s ease-in-out infinite;
+  transition: var(--transTime);
+}
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input/Input.css","../src/components/skeletonLoading/SkeletonLoading.css"],"sourcesContent":[".inputContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n  width: 100%;\r\n  align-items: flex-start;\r\n}\r\n.inputElementContainer {\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n.input {\r\n  width: 100%;\r\n  color: var(--color-text);\r\n  background-color: var(--color-bg);\r\n  border: 1px solid var(--border-color);\r\n  outline: none;\r\n  border-radius: 8px;\r\n  transition: var(--transTime);\r\n  padding: 10px 15px;\r\n  height: 45px;\r\n\r\n  &:focus {\r\n    box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);\r\n  }\r\n\r\n  &:disabled {\r\n    background-color: var(--btn-disabled-bg);\r\n    color: var(--btn-disabled-text);\r\n    border-color: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &::placeholder {\r\n    color: rgba(var(--color-text-rgb), 0.4);\r\n  }\r\n}\r\n",".skeletonMainContainer {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: var(--skeleton-bg);\r\n  overflow: hidden;\r\n}\r\n.skeletonAnimContainer {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--skeleton-bg) 0%,\r\n    var(--skeleton-fg) 50%,\r\n    var(--skeleton-bg) 100%\r\n  );\r\n  background-size: 200% 100%;\r\n  animation: loading 1.6s ease-in-out infinite;\r\n  transition: var(--transTime);\r\n}\r\n\r\n@keyframes loading {\r\n  0% {\r\n    background-position: 200% 0;\r\n  }\r\n  100% {\r\n    background-position: -200% 0;\r\n  }\r\n}\r\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,SAAO;AACP,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACV,SAAO;AACT;AACA,CAAC;AACC,SAAO;AACP,SAAO,IAAI;AACX,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,WAAS;AACT,iBAAe;AACf,cAAY,IAAI;AAChB,WAAS,KAAK;AACd,UAAQ;AAER,GAAC;AACC,gBAAY,IAAI,IAAI,IAAI,KAAK,KAAK,IAAI,iBAAiB,EAAE;AAC3D;AAEA,GAAC;AACC,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,kBAAc;AACd,YAAQ;AACV;AAEA,GAAC;AACC,WAAO,KAAK,IAAI,iBAAiB,EAAE;AACrC;AACF;;;ACpCA,CAAC;AACC,YAAU;AACV,SAAO;AACP,SAAO;AACP,UAAQ;AACR,oBAAkB,IAAI;AACtB,YAAU;AACZ;AACA,CAAC;AACC,YAAU;AACV,SAAO;AACP,UAAQ;AACR,YAAU;AACV;AAAA,IAAY;AAAA,MACV,KAAK;AAAA,MACL,IAAI,eAAe,EAAE;AAAA,MACrB,IAAI,eAAe,GAAG;AAAA,MACtB,IAAI,eAAe;AAErB,mBAAiB,KAAK;AACtB,aAAW,QAAQ,KAAK,YAAY;AACpC,cAAY,IAAI;AAClB;AAEA,WAJa;AAKX;AACE,yBAAqB,KAAK;AAC5B;AACA;AACE,yBAAqB,MAAM;AAC7B;AACF;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface InputProps {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+}
+
+declare const Input: FC<InputProps>;
+
+interface SkeletonLoadingProps {
+    /** The border radius of the skeleton
+     *
+     * Default: 10
+     */
+    radius?: number;
+}
+
+export { Input, type InputProps, type SkeletonLoadingProps };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface InputProps {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+}
+
+declare const Input: FC<InputProps>;
+
+interface SkeletonLoadingProps {
+    /** The border radius of the skeleton
+     *
+     * Default: 10
+     */
+    radius?: number;
+}
+
+export { Input, type InputProps, type SkeletonLoadingProps };

package/dist/index.js

@@ -0,0 +1,85 @@
+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_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/input/Input.tsx
+var import_react_hook_form = require("react-hook-form");
+
+// src/components/skeletonLoading/SkeletonLoading.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SkeletonLoading = ({ radius = 10 }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "skeletonMainContainer",
+      style: { borderRadius: `${radius}px` },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "skeletonAnimContainer" })
+    }
+  );
+};
+var SkeletonLoading_default = SkeletonLoading;
+
+// src/components/input/Input.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Input = ({
+  id,
+  required = false,
+  hideLabel = false,
+  label = "Label",
+  placeholder = "Placeholder",
+  loading = false,
+  disabled = false
+}) => {
+  const {
+    field: { value, onChange }
+  } = (0, import_react_hook_form.useController)({
+    name: id,
+    rules: {
+      required
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "inputContainer", children: [
+    !hideLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "inputElementContainer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          className: "input",
+          value,
+          placeholder,
+          type: "text",
+          onChange: (e) => onChange(e.target.value),
+          disabled
+        }
+      ),
+      loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkeletonLoading_default, { radius: 8 })
+    ] })
+  ] });
+};
+var Input_default = Input;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx"],"sourcesContent":["export { default as Input } from \"./components/input/Input\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\r\n","import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\nconst Input: FC<InputProps> = ({\r\n  id,\r\n  required = false,\r\n  hideLabel = false,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // #region Controller\r\n  const {\r\n    field: { value, onChange },\r\n  } = useController({\r\n    name: id,\r\n    rules: {\r\n      required: required,\r\n    },\r\n  });\r\n  // #endregion Controller\r\n\r\n  return (\r\n    <div className={\"inputContainer\"}>\r\n      {!hideLabel && <div>{label}</div>}\r\n      <div className={\"inputElementContainer\"}>\r\n        <input\r\n          className={\"input\"}\r\n          value={value}\r\n          placeholder={placeholder}\r\n          type=\"text\"\r\n          onChange={(e) => onChange(e.target.value)}\r\n          disabled={disabled}\r\n        />\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n  return (\r\n    <div\r\n      className={\"skeletonMainContainer\"}\r\n      style={{ borderRadius: `${radius}px` }}\r\n    >\r\n      <div className={\"skeletonAnimContainer\"}></div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,6BAA8B;;;ACSxB;AANN,IAAM,kBAA4C,CAAC,EAAE,SAAS,GAAG,MAAM;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,cAAc,GAAG,MAAM,KAAK;AAAA,MAErC,sDAAC,SAAI,WAAW,yBAAyB;AAAA;AAAA,EAC3C;AAEJ;AAEA,IAAO,0BAAQ;;;ADcM,IAAAA,sBAAA;AAtBrB,IAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AACb,MAAM;AAEJ,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS;AAAA,EAC3B,QAAI,sCAAc;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,MACL;AAAA,IACF;AAAA,EACF,CAAC;AAGD,SACE,8CAAC,SAAI,WAAW,kBACb;AAAA,KAAC,aAAa,6CAAC,SAAK,iBAAM;AAAA,IAC3B,8CAAC,SAAI,WAAW,yBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC;AAAA;AAAA,MACF;AAAA,MACC,WAAW,6CAAC,2BAAgB,QAAQ,GAAG;AAAA,OAC1C;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":["import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,59 @@
+// src/components/input/Input.tsx
+import { useController } from "react-hook-form";
+
+// src/components/skeletonLoading/SkeletonLoading.tsx
+import { jsx } from "react/jsx-runtime";
+var SkeletonLoading = ({ radius = 10 }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "skeletonMainContainer",
+      style: { borderRadius: `${radius}px` },
+      children: /* @__PURE__ */ jsx("div", { className: "skeletonAnimContainer" })
+    }
+  );
+};
+var SkeletonLoading_default = SkeletonLoading;
+
+// src/components/input/Input.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Input = ({
+  id,
+  required = false,
+  hideLabel = false,
+  label = "Label",
+  placeholder = "Placeholder",
+  loading = false,
+  disabled = false
+}) => {
+  const {
+    field: { value, onChange }
+  } = useController({
+    name: id,
+    rules: {
+      required
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "inputContainer", children: [
+    !hideLabel && /* @__PURE__ */ jsx2("div", { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "inputElementContainer", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          className: "input",
+          value,
+          placeholder,
+          type: "text",
+          onChange: (e) => onChange(e.target.value),
+          disabled
+        }
+      ),
+      loading && /* @__PURE__ */ jsx2(SkeletonLoading_default, { radius: 8 })
+    ] })
+  ] });
+};
+var Input_default = Input;
+export {
+  Input_default as Input
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx"],"sourcesContent":["import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\nconst Input: FC<InputProps> = ({\r\n  id,\r\n  required = false,\r\n  hideLabel = false,\r\n  label = \"Label\",\r\n  placeholder = \"Placeholder\",\r\n  loading = false,\r\n  disabled = false,\r\n}) => {\r\n  // #region Controller\r\n  const {\r\n    field: { value, onChange },\r\n  } = useController({\r\n    name: id,\r\n    rules: {\r\n      required: required,\r\n    },\r\n  });\r\n  // #endregion Controller\r\n\r\n  return (\r\n    <div className={\"inputContainer\"}>\r\n      {!hideLabel && <div>{label}</div>}\r\n      <div className={\"inputElementContainer\"}>\r\n        <input\r\n          className={\"input\"}\r\n          value={value}\r\n          placeholder={placeholder}\r\n          type=\"text\"\r\n          onChange={(e) => onChange(e.target.value)}\r\n          disabled={disabled}\r\n        />\r\n        {loading && <SkeletonLoading radius={8} />}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n  return (\r\n    <div\r\n      className={\"skeletonMainContainer\"}\r\n      style={{ borderRadius: `${radius}px` }}\r\n    >\r\n      <div className={\"skeletonAnimContainer\"}></div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n"],"mappings":";AACA,SAAS,qBAAqB;;;ACSxB;AANN,IAAM,kBAA4C,CAAC,EAAE,SAAS,GAAG,MAAM;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,cAAc,GAAG,MAAM,KAAK;AAAA,MAErC,8BAAC,SAAI,WAAW,yBAAyB;AAAA;AAAA,EAC3C;AAEJ;AAEA,IAAO,0BAAQ;;;ADcM,gBAAAA,MACf,YADe;AAtBrB,IAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AACb,MAAM;AAEJ,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS;AAAA,EAC3B,IAAI,cAAc;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,MACL;AAAA,IACF;AAAA,EACF,CAAC;AAGD,SACE,qBAAC,SAAI,WAAW,kBACb;AAAA,KAAC,aAAa,gBAAAA,KAAC,SAAK,iBAAM;AAAA,IAC3B,qBAAC,SAAI,WAAW,yBACd;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC;AAAA;AAAA,MACF;AAAA,MACC,WAAW,gBAAAA,KAAC,2BAAgB,QAAQ,GAAG;AAAA,OAC1C;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":["jsx"]}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@aziziaziz/react-components",
+  "version": "1.0.0",
+  "description": "Reusable React components library",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui"
+  ],
+  "author": "AziziAziz",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17",
+    "react-hook-form": ">=7"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}
+