@aziziaziz/react-components 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/Input-6MS2FZGM.css +33 -0
  2. package/dist/SkeletonLoading-UIP5RBIR.css +32 -0
  3. package/dist/index-MIFCDIS7.css +47 -0
  4. package/dist/index.d.mts +3 -1
  5. package/dist/index.d.ts +3 -1
  6. package/dist/index.js +7 -2
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +7 -1
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +3 -3
  11. package/src/components/input/Input.css +33 -0
  12. package/src/components/skeletonLoading/SkeletonLoading.css +32 -0
  13. package/src/index.css +47 -0
  14. package/dist/index.css +0 -69
  15. package/dist/index.css.map +0 -1
package/dist/Input-6MS2FZGM.css ADDED
@@ -0,0 +1,33 @@
1
+ .inputContainer {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 6px;
5
+ width: 100%;
6
+ align-items: flex-start;
7
+ }
8
+ .inputElementContainer {
9
+ position: relative;
10
+ width: 100%;
11
+ }
12
+ .input {
13
+ width: 100%;
14
+ color: var(--color-text);
15
+ background-color: var(--color-bg);
16
+ border: 1px solid var(--border-color);
17
+ outline: none;
18
+ border-radius: 8px;
19
+ transition: var(--transTime);
20
+ padding: 10px 15px;
21
+ }
22
+ input:focus {
23
+ box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
24
+ }
25
+ input:disabled {
26
+ background-color: var(--btn-disabled-bg);
27
+ color: var(--btn-disabled-text);
28
+ border-color: transparent;
29
+ cursor: not-allowed;
30
+ }
31
+ input::placeholder {
32
+ color: rgba(var(--color-text-rgb), 0.4);
33
+ }
package/dist/SkeletonLoading-UIP5RBIR.css ADDED
@@ -0,0 +1,32 @@
1
+ .skeletonMainContainer {
2
+ position: absolute;
3
+ inset: 0;
4
+ width: 100%;
5
+ height: 100%;
6
+ background-color: var(--skeleton-bg);
7
+ overflow: hidden;
8
+ }
9
+ .skeletonAnimContainer {
10
+ position: relative;
11
+ width: 100%;
12
+ height: 100%;
13
+ overflow: hidden;
14
+ background: linear-gradient(
15
+ 90deg,
16
+ var(--skeleton-bg) 0%,
17
+ var(--skeleton-fg) 50%,
18
+ var(--skeleton-bg) 100%
19
+ );
20
+ background-size: 200% 100%;
21
+ animation: loading 1.6s ease-in-out infinite;
22
+ transition: var(--transTime);
23
+ }
24
+
25
+ @keyframes loading {
26
+ 0% {
27
+ background-position: 200% 0;
28
+ }
29
+ 100% {
30
+ background-position: -200% 0;
31
+ }
32
+ }
package/dist/index-MIFCDIS7.css ADDED
@@ -0,0 +1,47 @@
1
+ * {
2
+ box-sizing: border-box;
3
+ }
4
+ :root {
5
+ --color-text: #213547;
6
+ --color-text-disabled: #d3d7db;
7
+ --color-text-rgb: 33, 53, 71;
8
+ --color-bg: #ffffff;
9
+ --color-bg-rgb: 255, 255, 255;
10
+ --color-text-reverse: #ffffffde;
11
+ --color-text-rgb-reverse: 255, 255, 255;
12
+ --color-bg-reverse: #242424;
13
+ --color-bg-rgb-reverse: 36, 36, 36;
14
+ --button-bg: #f9f9f9;
15
+ --link-hover: #747bff;
16
+ --border-color: rgb(146, 146, 146);
17
+ --transTime: 0.3s;
18
+
19
+ /* Submit (Primary) */
20
+ --btn-submit-bg: #1a73e8;
21
+ --btn-submit-bg-rgb: 26, 115, 232;
22
+ --btn-submit-text: #ffffff;
23
+
24
+ /* Warning */
25
+ --btn-warning-bg: #f4c430;
26
+ --btn-warning-bg-rgb: 244, 196, 48;
27
+ --btn-warning-text: #000000;
28
+
29
+ /* Danger */
30
+ --btn-danger-bg: #e53935;
31
+ --btn-danger-bg-rgb: 229, 57, 53;
32
+ --btn-danger-text: #ffffff;
33
+
34
+ /* Disabled */
35
+ --btn-disabled-bg: #e0e0e0;
36
+ --btn-disabled-bg-rgb: 224, 224, 224;
37
+ --btn-disabled-text: #aaaaaa;
38
+
39
+ /* Success (Light Theme) */
40
+ --btn-success-bg: #34a853;
41
+ --btn-success-bg-rgb: 52, 168, 83;
42
+ --btn-success-text: #ffffff;
43
+
44
+ /* Skeleton loading */
45
+ --skeleton-bg: rgb(180, 180, 180);
46
+ --skeleton-fg: rgb(210, 210, 210);
47
+ }
package/dist/index.d.mts CHANGED
@@ -20,4 +20,6 @@ interface SkeletonLoadingProps {
20
20
  radius?: number;
21
21
  }
22
22
 
23
- export { Input, type InputProps, type SkeletonLoadingProps };
23
+ declare const SkeletonLoading: FC<SkeletonLoadingProps>;
24
+
25
+ export { Input, type InputProps, SkeletonLoading, type SkeletonLoadingProps };
package/dist/index.d.ts CHANGED
@@ -20,4 +20,6 @@ interface SkeletonLoadingProps {
20
20
  radius?: number;
21
21
  }
22
22
 
23
- export { Input, type InputProps, type SkeletonLoadingProps };
23
+ declare const SkeletonLoading: FC<SkeletonLoadingProps>;
24
+
25
+ export { Input, type InputProps, SkeletonLoading, type SkeletonLoadingProps };
package/dist/index.js CHANGED
@@ -19,14 +19,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
19
19
  // src/index.ts
20
20
  var index_exports = {};
21
21
  __export(index_exports, {
22
- Input: () => Input_default
22
+ Input: () => Input_default,
23
+ SkeletonLoading: () => SkeletonLoading_default
23
24
  });
24
25
  module.exports = __toCommonJS(index_exports);
26
+ var import_index = require("./index-MIFCDIS7.css");
25
27
 
26
28
  // src/components/input/Input.tsx
27
29
  var import_react_hook_form = require("react-hook-form");
30
+ var import_Input = require("./Input-6MS2FZGM.css");
28
31
 
29
32
  // src/components/skeletonLoading/SkeletonLoading.tsx
33
+ var import_SkeletonLoading = require("./SkeletonLoading-UIP5RBIR.css");
30
34
  var import_jsx_runtime = require("react/jsx-runtime");
31
35
  var SkeletonLoading = ({ radius = 10 }) => {
32
36
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -80,6 +84,7 @@ var Input = ({
80
84
  var Input_default = Input;
81
85
  // Annotate the CommonJS export names for ESM import in node:
82
86
  0 && (module.exports = {
83
- Input
87
+ Input,
88
+ SkeletonLoading
84
89
  });
85
90
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx"],"sourcesContent":["import \"./index.css\";\r\n\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\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;AAAA;AAAA,mBAAO;;;ACCP,6BAA8B;AAE9B,mBAAO;;;ACFP,6BAAO;AASD;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,WAAU,kBACZ;AAAA,KAAC,aAAa,6CAAC,SAAK,iBAAM;AAAA,IAC3B,8CAAC,SAAI,WAAU,yBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;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 CHANGED
@@ -1,7 +1,12 @@
1
+ // src/index.ts
2
+ import "./index-MIFCDIS7.css";
3
+
1
4
  // src/components/input/Input.tsx
2
5
  import { useController } from "react-hook-form";
6
+ import "./Input-6MS2FZGM.css";
3
7
 
4
8
  // src/components/skeletonLoading/SkeletonLoading.tsx
9
+ import "./SkeletonLoading-UIP5RBIR.css";
5
10
  import { jsx } from "react/jsx-runtime";
6
11
  var SkeletonLoading = ({ radius = 10 }) => {
7
12
  return /* @__PURE__ */ jsx(
@@ -54,6 +59,7 @@ var Input = ({
54
59
  };
55
60
  var Input_default = Input;
56
61
  export {
57
- Input_default as Input
62
+ Input_default as Input,
63
+ SkeletonLoading_default as SkeletonLoading
58
64
  };
59
65
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx"],"sourcesContent":["import \"./index.css\";\r\n\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\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,OAAO;;;ACCP,SAAS,qBAAqB;AAE9B,OAAO;;;ACFP,OAAO;AASD;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,WAAU,kBACZ;AAAA,KAAC,aAAa,gBAAAA,KAAC,SAAK,iBAAM;AAAA,IAC3B,qBAAC,SAAI,WAAU,yBACb;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;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 CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@aziziaziz/react-components",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Reusable React components library",
5
5
  "main": "dist/index.mjs",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",
8
8
  "files": [
9
- "dist"
9
+ "dist",
10
+ "src/**/**/*.css"
10
11
  ],
11
12
  "scripts": {
12
13
  "build": "tsup"
@@ -28,4 +29,3 @@
28
29
  "typescript": "^5.9.3"
29
30
  }
30
31
  }
31
-
package/src/components/input/Input.css ADDED
@@ -0,0 +1,33 @@
1
+ .inputContainer {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 6px;
5
+ width: 100%;
6
+ align-items: flex-start;
7
+ }
8
+ .inputElementContainer {
9
+ position: relative;
10
+ width: 100%;
11
+ }
12
+ .input {
13
+ width: 100%;
14
+ color: var(--color-text);
15
+ background-color: var(--color-bg);
16
+ border: 1px solid var(--border-color);
17
+ outline: none;
18
+ border-radius: 8px;
19
+ transition: var(--transTime);
20
+ padding: 10px 15px;
21
+ }
22
+ input:focus {
23
+ box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
24
+ }
25
+ input:disabled {
26
+ background-color: var(--btn-disabled-bg);
27
+ color: var(--btn-disabled-text);
28
+ border-color: transparent;
29
+ cursor: not-allowed;
30
+ }
31
+ input::placeholder {
32
+ color: rgba(var(--color-text-rgb), 0.4);
33
+ }
package/src/components/skeletonLoading/SkeletonLoading.css ADDED
@@ -0,0 +1,32 @@
1
+ .skeletonMainContainer {
2
+ position: absolute;
3
+ inset: 0;
4
+ width: 100%;
5
+ height: 100%;
6
+ background-color: var(--skeleton-bg);
7
+ overflow: hidden;
8
+ }
9
+ .skeletonAnimContainer {
10
+ position: relative;
11
+ width: 100%;
12
+ height: 100%;
13
+ overflow: hidden;
14
+ background: linear-gradient(
15
+ 90deg,
16
+ var(--skeleton-bg) 0%,
17
+ var(--skeleton-fg) 50%,
18
+ var(--skeleton-bg) 100%
19
+ );
20
+ background-size: 200% 100%;
21
+ animation: loading 1.6s ease-in-out infinite;
22
+ transition: var(--transTime);
23
+ }
24
+
25
+ @keyframes loading {
26
+ 0% {
27
+ background-position: 200% 0;
28
+ }
29
+ 100% {
30
+ background-position: -200% 0;
31
+ }
32
+ }
package/src/index.css ADDED
@@ -0,0 +1,47 @@
1
+ * {
2
+ box-sizing: border-box;
3
+ }
4
+ :root {
5
+ --color-text: #213547;
6
+ --color-text-disabled: #d3d7db;
7
+ --color-text-rgb: 33, 53, 71;
8
+ --color-bg: #ffffff;
9
+ --color-bg-rgb: 255, 255, 255;
10
+ --color-text-reverse: #ffffffde;
11
+ --color-text-rgb-reverse: 255, 255, 255;
12
+ --color-bg-reverse: #242424;
13
+ --color-bg-rgb-reverse: 36, 36, 36;
14
+ --button-bg: #f9f9f9;
15
+ --link-hover: #747bff;
16
+ --border-color: rgb(146, 146, 146);
17
+ --transTime: 0.3s;
18
+
19
+ /* Submit (Primary) */
20
+ --btn-submit-bg: #1a73e8;
21
+ --btn-submit-bg-rgb: 26, 115, 232;
22
+ --btn-submit-text: #ffffff;
23
+
24
+ /* Warning */
25
+ --btn-warning-bg: #f4c430;
26
+ --btn-warning-bg-rgb: 244, 196, 48;
27
+ --btn-warning-text: #000000;
28
+
29
+ /* Danger */
30
+ --btn-danger-bg: #e53935;
31
+ --btn-danger-bg-rgb: 229, 57, 53;
32
+ --btn-danger-text: #ffffff;
33
+
34
+ /* Disabled */
35
+ --btn-disabled-bg: #e0e0e0;
36
+ --btn-disabled-bg-rgb: 224, 224, 224;
37
+ --btn-disabled-text: #aaaaaa;
38
+
39
+ /* Success (Light Theme) */
40
+ --btn-success-bg: #34a853;
41
+ --btn-success-bg-rgb: 52, 168, 83;
42
+ --btn-success-text: #ffffff;
43
+
44
+ /* Skeleton loading */
45
+ --skeleton-bg: rgb(180, 180, 180);
46
+ --skeleton-fg: rgb(210, 210, 210);
47
+ }
package/dist/index.css DELETED
@@ -1,69 +0,0 @@
1
- /* src/components/input/Input.css */
2
- .inputContainer {
3
- display: flex;
4
- flex-direction: column;
5
- gap: 6px;
6
- width: 100%;
7
- align-items: flex-start;
8
- }
9
- .inputElementContainer {
10
- position: relative;
11
- width: 100%;
12
- }
13
- .input {
14
- width: 100%;
15
- color: var(--color-text);
16
- background-color: var(--color-bg);
17
- border: 1px solid var(--border-color);
18
- outline: none;
19
- border-radius: 8px;
20
- transition: var(--transTime);
21
- padding: 10px 15px;
22
- height: 45px;
23
- &:focus {
24
- box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
25
- }
26
- &:disabled {
27
- background-color: var(--btn-disabled-bg);
28
- color: var(--btn-disabled-text);
29
- border-color: transparent;
30
- cursor: not-allowed;
31
- }
32
- &::placeholder {
33
- color: rgba(var(--color-text-rgb), 0.4);
34
- }
35
- }
36
-
37
- /* src/components/skeletonLoading/SkeletonLoading.css */
38
- .skeletonMainContainer {
39
- position: absolute;
40
- inset: 0;
41
- width: 100%;
42
- height: 100%;
43
- background-color: var(--skeleton-bg);
44
- overflow: hidden;
45
- }
46
- .skeletonAnimContainer {
47
- position: relative;
48
- width: 100%;
49
- height: 100%;
50
- overflow: hidden;
51
- background:
52
- linear-gradient(
53
- 90deg,
54
- var(--skeleton-bg) 0%,
55
- var(--skeleton-fg) 50%,
56
- var(--skeleton-bg) 100%);
57
- background-size: 200% 100%;
58
- animation: loading 1.6s ease-in-out infinite;
59
- transition: var(--transTime);
60
- }
61
- @keyframes loading {
62
- 0% {
63
- background-position: 200% 0;
64
- }
65
- 100% {
66
- background-position: -200% 0;
67
- }
68
- }
69
- /*# sourceMappingURL=index.css.map */
package/dist/index.css.map DELETED
@@ -1 +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":[]}