optimized-react-component-library-xyz123 0.1.45 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "A modern React component library using TypeScript with React 19 support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/css/styles.css

@@ -1130,3 +1130,653 @@ textarea:focus-visible,
 }
 
 /* ---------- END FILE UPLOAD ---------- */
+
+/* ---------- ADD FILES  ---------- */
+
+/* ExploreFiles.tsx  */
+
+.invisible {
+  display: none;
+  width: 1px;
+}
+
+.filePickLabel {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: 48px;
+  border: 1px solid #747474;
+  border-radius: var(--bs-border-radius);
+}
+.filePickLabel:focus {
+  border: #000000 2px solid;
+  box-shadow: none;
+}
+.filePickLabel .filePickButton {
+  cursor: pointer;
+  padding: 16px;
+  height: 100%;
+  background: #747474;
+
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+
+  display: flex;
+  /* padding: 0px 16px; */
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  color: #ffff;
+
+  /* Body/B2 (Main) Regular */
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+}
+
+.filePickButton {
+  width: auto !important;
+  border: none;
+  margin-left: 0px !important;
+}
+
+.filePickButton.error {
+  background: #8e0039 !important;
+  color: #fff !important;
+}
+@media (max-width: 990px) {
+  .filePickLabel .filePickButton {
+    font-size: 14px;
+    line-height: 14px;
+    text-align: center;
+  }
+}
+
+.filePickLabel .filePickText {
+  padding-left: 16px;
+  color: #000;
+
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.inputContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 768px) {
+  .inputContainer {
+    margin-bottom: 16px;
+  }
+}
+
+.inputContainer button {
+  margin: 0;
+  /* padding: 0; */
+  padding: 8px 24px;
+  margin-left: 16px;
+  height: 50px;
+  width: 200px;
+}
+
+.inputContainer input[type='text'] {
+  font-size: 16px;
+}
+
+.custom-file-button input[type='file'] {
+  margin-left: -2px !important;
+}
+
+.custom-file-button input[type='file']::-webkit-file-upload-button {
+  display: none;
+}
+
+.custom-file-button input[type='file']::file-selector-button {
+  display: none;
+}
+
+.custom-file-button:hover label {
+  background-color: #dde0e3;
+  cursor: pointer;
+}
+
+/* DropFiles.tsx  */
+
+@media (max-width: 768px) {
+  .DropZoneContainer {
+    display: none;
+  }
+}
+
+.DropZone {
+  color: #000;
+  margin-top: 20px;
+  margin-bottom: 16px;
+
+  /* Body/B1 Regular */
+  font-family: Arial;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 120% */
+
+  display: inline-flex;
+  width: 100%;
+  height: 180px;
+  position: relative;
+  clip-path: inset(0 round 8px 8px 8px 8px);
+
+  background: var(--neutral-350, #f7f7f7);
+
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.DropZone::before {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  right: -7px;
+  bottom: -7px;
+  border: 9px dashed rgba(0, 0, 0, 0.6);
+  border-radius: 15px 15px 15px 15px;
+  box-sizing: border-box;
+}
+
+.DropZone:hover {
+  background: var(--neutral-350, #f7f7f7);
+  opacity: 0.9;
+  cursor: copy;
+}
+.ClipboardLink {
+  display: block;
+  position: relative;
+  z-index: 2000;
+  cursor: pointer;
+  font-size: '12px';
+  text-decoration: 'underline';
+  color: black;
+}
+.ClipboardLink:hover {
+  cursor: pointer;
+}
+
+/* SelectedFiles.tsx  */
+
+.makeTopSpace {
+  margin-top: 12px;
+}
+/* @media (max-width: 768px) {
+    .makeTopSpace {
+        margin-top: 0px;
+    }
+} */
+
+.UploadedFile {
+  margin-top: 24px;
+}
+/* @media (max-width: 768px) {
+    .UploadedFile {
+        margin-top: 24px;
+    }
+} */
+.uploadFileRow {
+  max-width: 555px;
+}
+@media (max-width: 768px) {
+  .uploadFileRow {
+    margin-left: 0px;
+  }
+}
+.uploadedFileName {
+  /* margin-left: 8px; */
+  color: #000000;
+  position: relative;
+  border: 0px solid red;
+  width: 76%;
+  /* max-width: 430px; */
+  top: -21px;
+  left: 24px;
+}
+
+.desktopFileName {
+  display: block;
+}
+.mobileFirstFileName {
+  display: block;
+}
+
+.uploadedDot.mobileVersion {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  svg.uploadFileIcon {
+    display: none;
+  }
+  .uploadedDot.mobileVersion {
+    display: flex;
+  }
+}
+
+.lastCol {
+  display: flex;
+  justify-content: flex-end;
+  max-width: 62px;
+  padding: 0;
+  margin: 0;
+}
+
+.fileInListContainer {
+  max-width: 624px;
+}
+
+.fileListUnorderedList {
+  list-style: none !important;
+  padding: 0;
+  margin: 0;
+}
+
+.fileInList {
+  width: 100%;
+}
+.fileInList .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 100% !important;
+  border: 0px solid black;
+
+  padding: 0px 0px;
+  --bs-gutter-x: 0px !important;
+}
+
+.fileInList .row .col {
+  padding: 0;
+  margin: 0;
+}
+
+.fileInList .row .lastCol {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fileInList .makeSpace {
+  border-bottom: 1px solid #747474;
+  /* margin-top: 24px; */
+}
+
+.fileInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 13px;
+}
+.uploadedPercentage {
+  /* Body/B3 Regular */
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 123.077% */
+  margin-top: 2px;
+}
+@media (max-width: 768px) {
+  .uploadedPercentage {
+    display: none;
+  }
+}
+.trashCan {
+  width: 57px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: start;
+  align-items: center;
+  padding: 0;
+}
+.trashCan a {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.trashCan svg {
+  width: 24px;
+  height: 27px;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+}
+
+.trashCanPositioning {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 0;
+
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: -6px;
+  left: 12px;
+}
+
+.trashCanText {
+  color: #6e3282;
+
+  /* Body/B4 Regular */
+  font-family: Arial;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.removeError {
+  width: 57px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: start;
+  align-items: center;
+  padding: 0;
+}
+.removeError svg {
+  width: 16px;
+  height: 18px;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+}
+.removeError a {
+  cursor: pointer;
+}
+
+.uploadedDot {
+  border-radius: 17px;
+  background: var(--red-green-green, #008e55);
+  display: flex;
+  width: 16px;
+  height: 16px;
+  padding: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.uploadedDot.uploadFailed {
+  background: var(--red-green-red, #8e0039);
+
+  color: var(--neutral-300, #fff);
+  /* Body/B3 Bold */
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px; /* 123.077% */
+}
+
+.uploadedDot svg {
+  stroke-width: 1.5px;
+  stroke: var(--neutral-300, #fff);
+  flex-shrink: 0;
+}
+
+.uploadStatus {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: 0;
+  right: 0;
+}
+@media (max-width: 768px) {
+  .uploadStatus {
+    display: none;
+  }
+}
+/* 
+.uploadStatus {
+    display: flex;
+
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-shrink: 0;
+    padding: 0;
+} */
+.uploadFileIcon {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: 0;
+  left: 0;
+}
+.uploadFileName {
+  display: flex;
+  align-items: normal;
+  justify-content: flex-start;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+  color: #000;
+
+  /* Body/B3 Bold */
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+.uploadFileName.uploadFailed {
+  color: var(--red-green-red, #8e0039);
+}
+.errorMessageAddingFile {
+  color: var(--red-green-red, #8e0039);
+  /* Body/B3 Regular */
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 123.077% */
+  /* padding: 0;
+    margin-top: -8px; */
+}
+
+@media (max-width: 768px) {
+  .errorMessageAddingFile {
+    margin-left: 12px;
+  }
+}
+
+.selectedFilesLinkButton {
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+  padding-left: 0;
+  gap: 8px;
+  flex-shrink: 0;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+  color: var(--purple-900-primary, #6e3282);
+  /* Body/B2 (Main) Regular */
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  text-decoration: none;
+  cursor: pointer;
+
+  background-color: transparent;
+  border: 0px;
+}
+
+.selectedFilesLinkButton:hover {
+  color: var(--purple-900-primary, #6e3282);
+  text-decoration: underline;
+}
+
+.uploadFileRow_x {
+  max-width: 630px;
+}
+
+/* Indicator.tsx  */
+
+.uploadIndicator {
+  height: 6px;
+  flex-shrink: 0;
+  margin-top: 0px;
+
+  border-radius: 8px 8px 8px 8px;
+}
+@media (max-width: 768px) {
+  .uploadIndicator {
+    display: none;
+  }
+}
+.uploadIndicator.uploadDone {
+  width: 100%;
+  background: var(--red-green-green, #008e55);
+}
+.uploadIndicator.uploadFailed {
+  width: 10%;
+  background: var(--red-green-red, #8e0039);
+}
+.uploadIndicator.uploadLoading {
+  width: 50%;
+  background: var(--red-green-red, rgb(211, 165, 0));
+}
+
+.UploadedFile .divider {
+  border: 1px solid #747474;
+  margin-top: 24px;
+}
+@media (max-width: 768px) {
+  .UploadedFile .divider {
+    margin-top: 0px;
+  }
+}
+
+/* Clipboard.tsx  */
+
+.ClipboardFiles {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+
+  margin-top: 32px;
+  background-color: #222;
+  animation-name: color;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.ClipboardFiles.clicked {
+  background-color: #ccc;
+  animation-name: none;
+  cursor: copy;
+}
+
+@keyframes color {
+  0% {
+    background-color: #ddd;
+  }
+  25% {
+    background-color: #ccc;
+  }
+  50% {
+    background-color: #bbb;
+  }
+  75% {
+    background-color: #ccc;
+  }
+  100% {
+    background-color: #ddd;
+  }
+}
+
+/* AddFiles.tsx */
+
+.addFilesMandatory {
+  margin-bottom: 16px;
+}
+
+.addFilesMandatory.error {
+  display: inline;
+  margin-bottom: 0px;
+}
+
+/* preview */
+
+/* .addFilesPreviewContainer {
+    margin: 0;
+    margin-top: 16px;
+    width: 100%;
+    flex-direction: row;
+}
+@media (max-width: 768px) {
+    .addFilesPreviewContainer {
+        flex-direction: column;
+    }
+    .addFilesPreviewContainer .answer {
+        margin: 0;
+        padding: 0;
+        margin-top: 8px;
+        margin-bottom: 8px;
+
+        width: 100%;
+    }
+}
+
+.addFilesFieldset p {
+    font-size: 16px;
+}
+
+.addfileserror {
+    margin-bottom: 16px !important;
+    margin-top: 16px !important;
+} */
+
+/* ---------- END ADD FILES  ---------- */