@aziziaziz/react-components 1.0.0 → 1.0.2

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@aziziaziz/react-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Reusable React components library",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/**/**/*.css"
   ],
   "scripts": {
     "build": "tsup"
@@ -26,6 +27,8 @@
     "@types/react": "^19.2.7",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0"
   }
 }
-

package/src/components/button/Button.css

@@ -0,0 +1,98 @@
+.mainBtn {
+  border-radius: 10px;
+  padding: 10px 20px;
+  transition: var(--transTime), filter 0s;
+  border: none;
+  cursor: pointer;
+  box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
+  max-width: 260px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover:enabled {
+    filter: brightness(1.25);
+  }
+
+  &:active,
+  &:disabled {
+    box-shadow: none;
+  }
+
+  &.medium__ {
+    font-size: 14px !important;
+    padding: 8px 16px;
+  }
+
+  &.small__ {
+    font-size: 10px !important;
+    padding: 6px 12px;
+  }
+
+  &.noMinWidth__ {
+    min-width: unset;
+    max-width: unset;
+    width: fit-content;
+  }
+}
+
+.submitBtn {
+  background-color: var(--btn-submit-bg);
+  color: var(--btn-submit-text);
+}
+
+.warningBtn {
+  background-color: var(--btn-warning-bg);
+  color: var(--btn-warning-text);
+}
+
+.dangerBtn {
+  background-color: var(--btn-danger-bg);
+  color: var(--btn-danger-text);
+}
+
+.disabledBtn {
+  background-color: var(--btn-disabled-bg);
+  color: var(--btn-disabled-text);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.loadingCircle {
+  border-radius: 50%;
+  border-color: transparent gray gray gray;
+  border-width: 0.2em;
+  border-style: solid;
+  position: absolute;
+  height: 1.5em;
+  width: 1.5em;
+  animation: rotate 0.5s ease-in-out infinite;
+  opacity: 0;
+
+  &.show__ {
+    opacity: 1;
+  }
+}
+
+.hideContent {
+  opacity: 0;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 799.98px) {
+  .mainBtn {
+    border-radius: 10px;
+    padding: 8px 16px;
+    max-width: 220px;
+  }
+}

package/src/components/datePicker/DatePicker.css

@@ -0,0 +1,44 @@
+.datePickerMainContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.pickerContainer {
+  position: relative;
+  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;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+.valueContainer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+}
+.placeholder {
+  color: rgba(var(--color-text-rgb), 0.4);
+}
+.disabled {
+  background-color: var(--btn-disabled-bg);
+  color: var(--btn-disabled-text);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.dropdownIcon {
+  transition: var(--transTime);
+  transform: scaleY(1);
+}
+.dropdownIconFlip {
+  transform: scaleY(-1);
+}

package/src/components/datePicker/components/webDatePicker/WebDatePicker.css

@@ -0,0 +1,154 @@
+:root {
+  --dateSize: 30px;
+  --monthWidth: 50px;
+}
+
+.webDatePickerMainContainer {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 10px);
+  border: 1px solid var(--border-color);
+  padding: 10px;
+  border-radius: 8px;
+  background-color: var(--color-bg);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: var(--transTime);
+
+  &.show__ {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  &.hide__ {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-10%);
+  }
+}
+.topContainer {
+  width: 100%;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 10px;
+}
+.nextPreviousIcon {
+  cursor: pointer;
+
+  &.previous__ {
+    transform: scaleY(-1);
+  }
+}
+.monthName {
+  cursor: pointer;
+  user-select: none;
+
+  &.noClick__ {
+    cursor: default;
+  }
+}
+.dateMainContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.daysContainer,
+.dateContainer {
+  display: grid;
+  grid-template-columns: repeat(7, auto);
+}
+.monthContainer {
+  display: grid;
+  row-gap: 6px;
+  column-gap: 30px;
+  grid-template-columns: repeat(3, auto);
+}
+.dateItem {
+  height: var(--dateSize);
+  width: var(--dateSize);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  justify-self: center;
+  cursor: pointer;
+
+  &.nextPreviousDate__ {
+    opacity: 0.3;
+  }
+
+  &.isToday__ {
+    background-color: #435585;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      background-color: #9eb8ff;
+    }
+  }
+
+  &.isSelected__ {
+    box-shadow: inset 0 0 0 2px #818fb4;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      box-shadow: inset 0 0 0 2px rgb(206, 219, 255);
+    }
+  }
+}
+.monthItem {
+  height: var(--monthWidth);
+  width: var(--monthWidth);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  justify-self: center;
+  cursor: pointer;
+
+  &.nextPreviousDate__ {
+    opacity: 0.3;
+  }
+
+  &.isToday__ {
+    background-color: #435585;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      background-color: #9eb8ff;
+    }
+  }
+
+  &.isSelected__ {
+    box-shadow: inset 0 0 0 2px #818fb4;
+    border-radius: 100%;
+
+    [data-theme="light"] & {
+      box-shadow: inset 0 0 0 2px rgb(206, 219, 255);
+    }
+  }
+}
+.todayButton {
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  align-self: flex-end;
+  color: var(--color-text);
+
+  > :first-child {
+    font-size: 1.5em;
+  }
+}
+
+@media (max-width: 799.98px) {
+  .webDatePickerMainContainer {
+    position: relative;
+    left: unset;
+    top: unset;
+    border: none;
+    padding: 0;
+  }
+}

package/src/components/drawer/Drawer.css

@@ -0,0 +1,53 @@
+.drawerMainContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100dvh;
+  width: 100dvw;
+  pointer-events: none;
+  z-index: 18;
+}
+.drawerBackgroundContainer {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: rgba(var(--color-bg-rgb), 0.75);
+  z-index: 1;
+  transition: var(--transTime);
+
+  &.show__ {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.hide__ {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+.drawerContentContainer {
+  width: 100%;
+  position: absolute;
+  background-color: var(--color-bg);
+  padding: 10px;
+  bottom: 0;
+  max-height: 80%;
+  z-index: 2;
+  transition: var(--transTime);
+  box-shadow: 0 0 5px 0px var(--color-bg-reverse);
+  overflow: auto;
+
+  &.show__ {
+    transform: translate(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.hide__ {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/src/components/icon/Icon.css

@@ -0,0 +1,17 @@
+.icon {
+  display: block;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  background-color: var(--color-text);
+  min-width: 1em;
+  min-height: 1em;
+  width: 1em;
+  height: 1em;
+
+  &.flat__ {
+    background: none;
+    mask: none;
+  }
+}
+

package/src/components/input/Input.css

@@ -0,0 +1,33 @@
+.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;
+}
+input:focus {
+  box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
+}
+input:disabled {
+  background-color: var(--btn-disabled-bg);
+  color: var(--btn-disabled-text);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+input::placeholder {
+  color: rgba(var(--color-text-rgb), 0.4);
+}

package/src/components/skeletonLoading/SkeletonLoading.css

@@ -0,0 +1,32 @@
+.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;
+  }
+}

package/src/index.css

@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+}
+:root {
+  --color-text: #213547;
+  --color-text-disabled: #d3d7db;
+  --color-text-rgb: 33, 53, 71;
+  --color-bg: #ffffff;
+  --color-bg-rgb: 255, 255, 255;
+  --color-text-reverse: #ffffffde;
+  --color-text-rgb-reverse: 255, 255, 255;
+  --color-bg-reverse: #242424;
+  --color-bg-rgb-reverse: 36, 36, 36;
+  --button-bg: #f9f9f9;
+  --link-hover: #747bff;
+  --border-color: rgb(146, 146, 146);
+  --transTime: 0.3s;
+
+  /* Submit (Primary) */
+  --btn-submit-bg: #1a73e8;
+  --btn-submit-bg-rgb: 26, 115, 232;
+  --btn-submit-text: #ffffff;
+
+  /* Warning */
+  --btn-warning-bg: #f4c430;
+  --btn-warning-bg-rgb: 244, 196, 48;
+  --btn-warning-text: #000000;
+
+  /* Danger */
+  --btn-danger-bg: #e53935;
+  --btn-danger-bg-rgb: 229, 57, 53;
+  --btn-danger-text: #ffffff;
+
+  /* Disabled */
+  --btn-disabled-bg: #e0e0e0;
+  --btn-disabled-bg-rgb: 224, 224, 224;
+  --btn-disabled-text: #aaaaaa;
+
+  /* Success (Light Theme) */
+  --btn-success-bg: #34a853;
+  --btn-success-bg-rgb: 52, 168, 83;
+  --btn-success-text: #ffffff;
+
+  /* Skeleton loading */
+  --skeleton-bg: rgb(180, 180, 180);
+  --skeleton-fg: rgb(210, 210, 210);
+}
+
+#snackbarRoot {
+  z-index: 17;
+}
+.snackbarContentContainer {
+  position: fixed;
+  margin: 0 auto;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 80dvw;
+  pointer-events: none;
+
+  > div {
+    width: 100%;
+    padding: 10px 30px;
+    border-radius: 10px;
+    text-align: center;
+    transition: var(--transTime);
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+
+    &.hide__ {
+      transform: translateY(250%);
+    }
+
+    &.show__ {
+      transform: translateY(0%);
+    }
+
+    &.danger__ {
+      background-color: var(--btn-danger-bg);
+      color: var(--btn-danger-text);
+    }
+
+    &.warning__ {
+      background-color: var(--btn-warning-bg);
+      color: var(--btn-warning-text);
+    }
+
+    &.info__ {
+      background-color: var(--color-bg-reverse);
+      color: var(--color-text-reverse);
+    }
+
+    &.success__ {
+      background-color: var(--btn-success-bg);
+      color: var(--btn-success-text);
+    }
+  }
+}

package/dist/index.css

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

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