@instincthub/react-ui 0.0.3 → 0.0.5

package/dist/src/assets/css/forms/radio-button.css

@@ -0,0 +1,198 @@
+/* Radio Button Component Styles */
+
+/* Radio Button Container */
+.ihub-radio-wrapper {
+  position: relative;
+  margin: 10px 0;
+  font-family: var(--Nunito);
+}
+
+.ihub-radio-container {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+}
+
+/* Hide default radio input while keeping it accessible */
+.ihub-radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+/* Custom radio button styles */
+.ihub-radio-label {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  padding: 4px 0;
+  margin: 0;
+  cursor: pointer;
+  font-family: var(--Nunito);
+  font-size: 1rem;
+  color: var(--Gunmetal);
+  transition: all 0.2s ease;
+}
+
+.ihub-radio-custom {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  border: 2px solid var(--ChineseSilver, #cccccc);
+  border-radius: 50%;
+  background-color: var(--White);
+  transition: all 0.2s ease;
+}
+
+.ihub-radio-text {
+  padding-top: 1px;
+}
+
+/* Required mark */
+.ihub-required-mark {
+  color: var(--Danger, #ea5f5e);
+  margin-left: 4px;
+}
+
+/* Radio states */
+.ihub-radio-input:checked + .ihub-radio-label .ihub-radio-custom {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+.ihub-radio-input:checked + .ihub-radio-label .ihub-radio-custom::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  background-color: var(--DarkCyan, #00838f);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  animation: ihub-radio-pop 0.2s ease-in-out forwards;
+}
+
+/* Focus state for accessibility */
+.ihub-radio-input:focus + .ihub-radio-label .ihub-radio-custom {
+  box-shadow: 0 0 0 3px rgba(0, 131, 143, 0.2);
+}
+
+/* Hover state */
+.ihub-radio-label:hover .ihub-radio-custom {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+/* Disabled state */
+.ihub-radio-disabled .ihub-radio-label {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.ihub-radio-disabled .ihub-radio-custom {
+  background-color: var(--Gray, #f4f4f4);
+  border-color: var(--ChineseSilver, #cccccc);
+}
+
+.ihub-radio-disabled .ihub-radio-label:hover .ihub-radio-custom {
+  border-color: var(--ChineseSilver, #cccccc);
+}
+
+/* Error state */
+.ihub-radio-error .ihub-radio-custom {
+  border-color: var(--Danger, #ea5f5e);
+}
+
+.ihub-radio-error-message {
+  font-size: 0.875rem;
+  color: var(--Danger, #ea5f5e);
+  margin-top: 4px;
+  padding-left: 30px;
+}
+
+/* Help text */
+.ihub-radio-help-text {
+  font-size: 0.875rem;
+  color: var(--Gunmetal, #2c333a);
+  opacity: 0.7;
+  margin-top: 4px;
+  padding-left: 30px;
+}
+
+/* Animation for radio selection */
+@keyframes ihub-radio-pop {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* Radio Group Styles */
+.ihub-radio-group {
+  border: none;
+  padding: 0;
+  margin: 20px 0;
+  min-width: 200px;
+}
+
+.ihub-radio-group-legend {
+  font-family: var(--Nunito);
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--Gunmetal, #2c333a);
+  margin-bottom: 12px;
+  padding: 0;
+  float: none;
+  width: 100%;
+}
+
+.ihub-radio-group-description {
+  font-size: 0.875rem;
+  margin-bottom: 15px;
+  color: var(--Gunmetal, #2c333a);
+  opacity: 0.8;
+}
+
+.ihub-radio-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Inline radio group layout */
+.ihub-radio-group-inline .ihub-radio-options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+/* Error state for radio group */
+.ihub-radio-group-error {
+  position: relative;
+}
+
+.ihub-radio-group-error .ihub-radio-group-legend {
+  color: var(--Danger, #ea5f5e);
+}
+
+.ihub-radio-group-error-message {
+  font-size: 0.875rem;
+  color: var(--Danger, #ea5f5e);
+  margin-top: 8px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+  .ihub-radio-group-inline .ihub-radio-options {
+    flex-direction: column;
+    gap: 8px;
+  }
+}

package/dist/src/assets/css/forms/search-field-db.css

@@ -0,0 +1,68 @@
+/* Search Field Component Styles */
+.ihub-search-field {
+  position: relative;
+  display: contents;
+}
+
+.ihub-search-courses {
+  margin-right: 15px;
+  position: relative;
+  max-width: 400px;
+  min-width: 300px;
+}
+
+.ihub-search-courses input {
+  max-width: 400px;
+  min-width: 300px;
+  padding: 10px;
+  height: 40px !important;
+  border: var(--borderDefault);
+  border-radius: 4px;
+  font-family: var(--Nunito);
+}
+
+.ihub-search-btn {
+  position: absolute;
+  height: 40px;
+  width: 50px;
+  border-radius: 0 5px 5px 0;
+  cursor: pointer;
+  right: 0px;
+  top: 1px;
+  background: var(--Gunmetal);
+  padding: 10px 15px;
+}
+
+.ihub-search-btn .ihub-material-symbols-outlined {
+  font-weight: 600 !important;
+  color: var(--White);
+  position: relative;
+  top: -3px;
+}
+
+.ihub-search-cancel {
+  position: absolute;
+  right: 55px;
+  top: 10px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.ihub-loader {
+  border: 3px solid #f3f3f3; /* Light grey */
+  border-top: 3px solid var(--DarkCyan); /* Blue */
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: ihub-spin 2s linear infinite;
+}
+
+@keyframes ihub-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/src/assets/css/forms/search-objects-from-db.css

@@ -0,0 +1,182 @@
+/* Improved Search Objects Component Styles */
+
+.ihub-react-search {
+  max-width: 400px;
+  border: var(--borderDefault);
+  padding: 15px;
+  border-radius: 5px;
+  max-height: 400px;
+  overflow: auto;
+  position: relative;
+}
+
+.ihub-search-input {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.ihub-search-input input {
+  width: 100%;
+  padding: 10px;
+  padding-right: 80px; /* Space for icons */
+  border: var(--borderDefault);
+  border-radius: 4px;
+  font-family: var(--Nunito);
+  font-size: 14px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ihub-search-input input:focus {
+  outline: none;
+  border-color: var(--DarkCyan);
+  box-shadow: 0 0 0 2px rgba(0, 131, 143, 0.1);
+}
+
+.ihub-search-input input:disabled {
+  background-color: var(--Gray);
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.ihub-search-icons {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.ihub-search-icon {
+  font-size: 20px !important;
+  margin-left: 10px;
+  cursor: pointer;
+  color: var(--Gunmetal);
+  transition: color 0.2s ease, transform 0.1s ease;
+}
+
+.ihub-search-icon:hover {
+  color: var(--DarkCyan);
+}
+
+.ihub-search-icon:active {
+  transform: scale(0.95);
+}
+
+.ihub-close-icon:hover {
+  color: var(--Danger);
+}
+
+.ihub-disabled {
+  opacity: 0.5;
+  cursor: not-allowed !important;
+}
+
+.ihub-disabled:hover {
+  color: var(--Gunmetal);
+}
+
+.ihub-loading {
+  padding: 10px;
+  text-align: center;
+  color: var(--DarkCyan);
+  font-style: italic;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
+
+.ihub-search-error {
+  padding: 10px;
+  color: var(--Danger);
+  background-color: rgba(234, 95, 94, 0.1);
+  border-radius: 4px;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+.ihub-search-results {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.ihub-search-result-item {
+  padding: 12px;
+  border-radius: 4px;
+  margin-bottom: 5px;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  display: flex;
+  align-items: center;
+}
+
+.ihub-valid {
+  background-color: var(--OpacityBackground);
+  cursor: pointer;
+}
+
+.ihub-valid:hover {
+  background-color: rgba(0, 131, 143, 0.1);
+}
+
+.ihub-valid:active {
+  transform: scale(0.99);
+}
+
+.ihub-no-results,
+.ihub-default-values {
+  padding: 12px;
+  color: #888;
+  font-style: italic;
+  text-align: center;
+}
+
+.ihub-check-icon {
+  color: var(--DarkCyan);
+  min-width: 24px;
+}
+
+.ihub-error {
+  color: var(--Danger);
+  font-size: 12px;
+  margin-top: 8px;
+  margin-bottom: 0;
+  background-color: rgba(234, 95, 94, 0.1);
+  padding: 6px 8px;
+  border-radius: 4px;
+}
+
+/* Add scrollbar styling */
+.ihub-search-results::-webkit-scrollbar,
+.ihub-react-search::-webkit-scrollbar {
+  width: 4px;
+}
+
+.ihub-search-results::-webkit-scrollbar-track,
+.ihub-react-search::-webkit-scrollbar-track {
+  background: var(--Gray);
+  border-radius: 5px;
+}
+
+.ihub-search-results::-webkit-scrollbar-thumb,
+.ihub-react-search::-webkit-scrollbar-thumb {
+  background: var(--DarkCyan);
+  border-radius: 5px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+  .ihub-react-search {
+    max-width: 100%;
+  }
+  
+  .ihub-search-result-item {
+    padding: 14px 12px;
+  }
+}

package/dist/src/assets/css/forms/submit-button.css

@@ -0,0 +1,181 @@
+/* Submit Button Styles */
+.ihub-submit-btn-wrapper {
+  margin-bottom: 20px;
+  position: relative;
+  display: inline-block;
+}
+
+.ihub-submit-btn {
+  position: relative;
+  padding: 12px 35px;
+  border-radius: 5px;
+  border: 0;
+  background-color: unset;
+  font-family: var(--Montserat);
+  outline: 0;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: all 0.2s ease-in;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 150px;
+}
+
+.ihub-submit-btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--White), 0 0 0 4px var(--DarkCyan);
+  outline: none;
+}
+
+/* Button variants */
+.ihub-submit-btn.important-btn {
+  background-color: var(--DarkCyan);
+  color: var(--White);
+}
+
+.ihub-submit-btn.important-btn:hover:not(:disabled) {
+  background-color: var(--DarkCyan);
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.ihub-submit-btn.important-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.ihub-submit-btn.icon-btn.ihub-anime-button-chevron:hover:not(:disabled) {
+  padding-right: 20px;
+  scale: 1.05;
+}
+
+.ihub-submit-btn.icon-btn.ihub-anime-button-chevron:hover svg {
+  transform: translateX(0px);
+}
+
+.ihub-submit-btn.icon-btn {
+  background-color: var(--OpacityBackground);
+  border-radius: 5px;
+  color: var(--Gunmetal);
+  border: none;
+  min-width: auto;
+  padding: 5px;
+}
+
+.ihub-submit-btn.icon-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.ihub-submit-btn.outlined-btn {
+  background-color: transparent;
+  color: var(--DarkCyan);
+  border: 1px solid var(--DarkCyan);
+}
+
+.ihub-submit-btn.outlined-btn:hover:not(:disabled) {
+  color: var(--White);
+  background-color: var(--DarkCyan);
+}
+
+.ihub-submit-btn.primary-btn {
+  background-color: var(--Gunmetal);
+  color: var(--White);
+}
+
+.ihub-submit-btn.primary-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.ihub-submit-btn.danger-btn {
+  background-color: var(--Danger);
+  color: var(--White);
+}
+
+.ihub-submit-btn.danger-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.ihub-submit-btn.default-btn {
+  background-color: var(--Gray);
+  color: var(--Gunmetal);
+}
+
+.ihub-submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--Gray);
+  color: var(--Gunmetal);
+  border: 1px solid rgba(204, 204, 204, 0.4);
+  box-shadow: none;
+}
+
+/* Spinner animation */
+.ihub-submit-btn.ihub-rolling .ihub-bt-spinner {
+  display: block;
+  opacity: 1;
+}
+
+.ihub-bt-spinner {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  animation: ihub-spinner-rotation 1s linear infinite;
+  opacity: 0;
+  display: none;
+}
+
+/* Hover animation */
+.ihub-anime-button-chevron {
+  position: relative;
+  overflow: hidden;
+}
+
+.ihub-anime-button-chevron svg#animate {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translate(-40px, -50%);
+  transition: all 0.4s ease;
+  opacity: 0;
+}
+
+.ihub-anime-button-chevron:hover:not(:disabled) {
+  padding-right: 55px;
+}
+
+.ihub-anime-button-chevron:hover:not(:disabled) svg#animate {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+@keyframes ihub-spinner-rotation {
+  0% {
+    transform: translateY(-50%) rotate(0deg);
+  }
+  100% {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ihub-submit-btn.outlined-btn {
+    border-color: var(--White);
+    color: var(--White);
+  }
+
+  .ihub-submit-btn:focus-visible {
+    box-shadow: 0 0 0 2px var(--Gunmetal), 0 0 0 4px var(--White);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+  .ihub-submit-btn {
+    width: 100%;
+    padding: 12px 20px;
+  }
+}