@rufous/ui 0.1.84 → 0.1.86

package/dist/main.css

@@ -1,116 +1,5 @@
 @import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap";
 
-/* lib/styles/button.css */
-.btn {
-  padding: 10px 20px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  white-space: nowrap;
-}
-.add-btn,
-.btn-add {
-  background-color: transparent;
-  border: 1.5px solid var(--primary-color) !important;
-  color: var(--primary-color) !important;
-  border-radius: 34px;
-}
-.add-btn:hover,
-.btn-add:hover {
-  background-color: var(--primary-color);
-  color: #ffffff !important;
-}
-.cancel-btn,
-.btn-cancel {
-  background-color: transparent;
-  border: 1.5px solid var(--primary-color) !important;
-  color: var(--primary-color) !important;
-  border-radius: 34px;
-  padding: 10px 24px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  text-transform: uppercase;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  letter-spacing: 0.5px;
-  transition: all 0.2s;
-}
-.cancel-btn:hover,
-.btn-cancel:hover {
-  background-color: var(--hover-color);
-}
-.submit-btn,
-.btn-submit,
-.btn-confirm {
-  background-color: var(--primary-color) !important;
-  color: #ffffff !important;
-  border: none;
-  border-radius: 6px;
-  padding: 10px 32px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  text-transform: uppercase;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  letter-spacing: 0.5px;
-  transition: all 0.2s ease;
-}
-.submit-btn:hover:not(:disabled),
-.btn-submit:hover:not(:disabled),
-.btn-confirm:hover:not(:disabled) {
-  background-color: var(--secondary-color) !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transform: translateY(-1px);
-}
-.standard-btn,
-.btn-std {
-  background-color: var(--surface-color);
-  border: 1.5px solid var(--border-color) !important;
-  color: var(--text-color) !important;
-  border-radius: 6px;
-}
-.standard-btn:hover,
-.btn-std:hover {
-  background-color: var(--hover-color);
-  border-color: var(--primary-color) !important;
-  color: var(--primary-color) !important;
-}
-.btn:disabled,
-.cancel-btn:disabled,
-.submit-btn:disabled,
-.standard-btn:disabled,
-.btn-confirm:disabled,
-.btn-cancel:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.btn-content {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-.submit-btn-gradiant {
-  background:
-    linear-gradient(
-      135deg,
-      var(--primary-color),
-      var(--secondary-color)) !important;
-}
-
 /* lib/styles/checkbox.css */
 .checkbox-wrapper-13 {
   display: inline-flex;
@@ -1494,6 +1383,11 @@ pre {
   justify-content: space-between;
   padding: 18px 20px 12px;
 }
+.rf-date-picker__header-labels {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
 .rf-date-picker__month-label {
   font-size: 1rem;
   font-weight: 700;
@@ -1501,6 +1395,33 @@ pre {
   letter-spacing: -0.01em;
   cursor: pointer;
   user-select: none;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.rf-date-picker__month-label:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__month-label--active {
+  background-color: rgba(164, 27, 6, 0.1);
+  color: #a41b06;
+}
+.rf-date-picker__year-label {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #555555;
+  cursor: pointer;
+  user-select: none;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.rf-date-picker__year-label:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__year-label--active {
+  background-color: rgba(164, 27, 6, 0.1);
+  color: #a41b06;
 }
 .rf-date-picker__nav {
   display: flex;
@@ -1884,6 +1805,83 @@ pre {
   color: rgba(0, 0, 0, 0.75);
   background-color: rgba(0, 0, 0, 0.05);
 }
+.rf-date-picker--drop-up {
+  top: auto;
+  bottom: calc(100% + 6px);
+  transform-origin: bottom left;
+}
+.rf-date-picker__month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding: 8px 16px 12px;
+}
+.rf-date-picker__month-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 8px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #333333;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  outline: none;
+}
+.rf-date-picker__month-cell:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__month-cell--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-date-picker__month-cell--selected:hover {
+  background-color: #8a1705;
+}
+.rf-date-picker__month-cell--current:not(.rf-date-picker__month-cell--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
+.rf-date-picker__year-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  padding: 8px 16px 12px;
+}
+.rf-date-picker__year-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 4px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #333333;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  outline: none;
+}
+.rf-date-picker__year-cell:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__year-cell--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-date-picker__year-cell--selected:hover {
+  background-color: #8a1705;
+}
+.rf-date-picker__year-cell--current:not(.rf-date-picker__year-cell--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
 
 /* lib/styles/date-range-field.css */
 .rf-date-range-field {
@@ -2345,6 +2343,16 @@ pre {
   padding-left: 0;
   margin-top: 0;
 }
+.rf-autocomplete.rf-text-field--disabled .rf-text-field__wrapper {
+  cursor: not-allowed;
+}
+.rf-autocomplete.rf-text-field--disabled .rf-autocomplete__tag {
+  opacity: 0.5;
+}
+.rf-autocomplete.rf-text-field--disabled .rf-autocomplete__endgroup {
+  opacity: 0.35;
+  pointer-events: none;
+}
 .rf-autocomplete__icon-btn {
   background: none;
   border: none;
@@ -2571,6 +2579,18 @@ pre {
 .rf-select.rf-text-field--disabled .rf-text-field__wrapper {
   cursor: not-allowed;
 }
+.rf-select.rf-text-field--disabled .rf-select__display {
+  color: var(--tf-disabled-color, rgba(0, 0, 0, 0.38));
+}
+.rf-select.rf-text-field--disabled .rf-select__arrow {
+  color: rgba(0, 0, 0, 0.2);
+}
+.rf-select.rf-text-field--disabled .rf-select__chip {
+  opacity: 0.5;
+}
+.rf-select.rf-text-field--disabled .rf-select__count {
+  opacity: 0.5;
+}
 .rf-select__display {
   display: flex;
   align-items: center;
@@ -4893,6 +4913,12 @@ pre {
   align-items: center;
   font-size: 1.25rem;
 }
+.rf-tab-panel {
+  width: 100%;
+}
+.rf-tab-panel[hidden] {
+  display: none;
+}
 
 /* lib/styles/breadcrumbs.css */
 .rf-breadcrumbs {
@@ -5800,9 +5826,367 @@ pre {
   outline-offset: 2px;
 }
 .rf-image-field--disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
   pointer-events: none;
+  filter: grayscale(60%);
+}
+
+/* lib/styles/button.css */
+.btn {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+.add-btn,
+.btn-add {
+  background-color: transparent;
+  border: 1.5px solid var(--primary-color) !important;
+  color: var(--primary-color) !important;
+  border-radius: 34px;
+}
+.add-btn:hover,
+.btn-add:hover {
+  background-color: var(--primary-color);
+  color: #ffffff !important;
+}
+.cancel-btn,
+.btn-cancel {
+  background-color: transparent;
+  border: 1.5px solid var(--primary-color) !important;
+  color: var(--primary-color) !important;
+  border-radius: 34px;
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 0.5px;
+  transition: all 0.2s;
+}
+.cancel-btn:hover,
+.btn-cancel:hover {
+  background-color: var(--hover-color);
+}
+.submit-btn,
+.btn-submit,
+.btn-confirm {
+  background-color: var(--primary-color) !important;
+  color: #ffffff !important;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 32px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 0.5px;
+  transition: all 0.2s ease;
+}
+.submit-btn:hover:not(:disabled),
+.btn-submit:hover:not(:disabled),
+.btn-confirm:hover:not(:disabled) {
+  background-color: var(--secondary-color) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transform: translateY(-1px);
+}
+.standard-btn,
+.btn-std {
+  background-color: var(--surface-color);
+  border: 1.5px solid var(--border-color) !important;
+  color: var(--text-color) !important;
+  border-radius: 6px;
+}
+.standard-btn:hover,
+.btn-std:hover {
+  background-color: var(--hover-color);
+  border-color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
+}
+.btn:disabled,
+.cancel-btn:disabled,
+.submit-btn:disabled,
+.standard-btn:disabled,
+.btn-confirm:disabled,
+.btn-cancel:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.btn-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.submit-btn-gradiant {
+  background:
+    linear-gradient(
+      135deg,
+      var(--primary-color),
+      var(--secondary-color)) !important;
+}
+.rf-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: none;
+  border-radius: 6px;
+  font-family: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition:
+    background-color 0.2s,
+    box-shadow 0.2s,
+    border-color 0.2s,
+    color 0.2s;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  outline: 0;
+  user-select: none;
+}
+.rf-btn--small {
+  padding: 4px 10px;
+  font-size: 0.8125rem;
+}
+.rf-btn--medium {
+  padding: 6px 16px;
+  font-size: 0.875rem;
+}
+.rf-btn--large {
+  padding: 8px 22px;
+  font-size: 0.9375rem;
+}
+.rf-btn--full-width {
+  width: 100%;
+}
+.rf-btn--text {
+  background-color: transparent;
+  border: none;
+}
+.rf-btn--text.rf-btn--primary {
+  color: var(--primary-color);
+}
+.rf-btn--text.rf-btn--secondary {
+  color: var(--secondary-color);
+}
+.rf-btn--text.rf-btn--success {
+  color: #2e7d32;
+}
+.rf-btn--text.rf-btn--error {
+  color: #d32f2f;
+}
+.rf-btn--text.rf-btn--info {
+  color: #0288d1;
+}
+.rf-btn--text.rf-btn--warning {
+  color: #ed6c02;
+}
+.rf-btn--text.rf-btn--inherit {
+  color: inherit;
+}
+.rf-btn--text:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-btn--contained {
+  color: #fff;
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+.rf-btn--contained.rf-btn--primary {
+  background-color: var(--primary-color);
+}
+.rf-btn--contained.rf-btn--secondary {
+  background-color: var(--secondary-color);
+}
+.rf-btn--contained.rf-btn--success {
+  background-color: #2e7d32;
+}
+.rf-btn--contained.rf-btn--error {
+  background-color: #d32f2f;
+}
+.rf-btn--contained.rf-btn--info {
+  background-color: #0288d1;
+}
+.rf-btn--contained.rf-btn--warning {
+  background-color: #ed6c02;
+}
+.rf-btn--contained.rf-btn--inherit {
+  background-color: #e0e0e0;
+  color: rgba(0, 0, 0, 0.87);
+}
+.rf-btn--contained:hover {
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  filter: brightness(0.92);
+}
+.rf-btn--contained.rf-btn--no-elevation {
+  box-shadow: none;
+}
+.rf-btn--contained.rf-btn--no-elevation:hover {
+  box-shadow: none;
+}
+.rf-btn--outlined {
+  background-color: transparent;
+}
+.rf-btn--outlined.rf-btn--primary {
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+}
+.rf-btn--outlined.rf-btn--secondary {
+  color: var(--secondary-color);
+  border: 1px solid var(--secondary-color);
+}
+.rf-btn--outlined.rf-btn--success {
+  color: #2e7d32;
+  border: 1px solid #2e7d32;
+}
+.rf-btn--outlined.rf-btn--error {
+  color: #d32f2f;
+  border: 1px solid #d32f2f;
+}
+.rf-btn--outlined.rf-btn--info {
+  color: #0288d1;
+  border: 1px solid #0288d1;
+}
+.rf-btn--outlined.rf-btn--warning {
+  color: #ed6c02;
+  border: 1px solid #ed6c02;
+}
+.rf-btn--outlined.rf-btn--inherit {
+  color: inherit;
+  border: 1px solid currentColor;
+}
+.rf-btn--outlined:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-btn--disabled,
+.rf-btn:disabled {
+  opacity: 0.38;
+  cursor: default;
+  pointer-events: none;
+  box-shadow: none;
+}
+.rf-btn--loading {
+  cursor: default;
+  pointer-events: none;
+}
+.rf-btn__start-icon,
+.rf-btn__end-icon {
+  display: inherit;
+  font-size: 1.25em;
+}
+.rf-btn__start-icon > *,
+.rf-btn__end-icon > * {
+  font-size: inherit;
+}
+.rf-btn__label {
+  display: inherit;
+}
+.rf-btn__loading-indicator {
+  display: inline-flex;
+  align-items: center;
+}
+.rf-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  outline: 0;
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.54);
+  padding: 8px;
+  font-size: 1.5rem;
+}
+.rf-icon-btn:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-icon-btn--small {
+  padding: 5px;
+  font-size: 1.125rem;
+}
+.rf-icon-btn--medium {
+  padding: 8px;
+  font-size: 1.5rem;
+}
+.rf-icon-btn--large {
+  padding: 12px;
+  font-size: 1.75rem;
+}
+.rf-icon-btn--default {
+  color: rgba(0, 0, 0, 0.54);
+}
+.rf-icon-btn--primary {
+  color: var(--primary-color);
+}
+.rf-icon-btn--secondary {
+  color: var(--secondary-color);
+}
+.rf-icon-btn--success {
+  color: #2e7d32;
+}
+.rf-icon-btn--error {
+  color: #d32f2f;
+}
+.rf-icon-btn--info {
+  color: #0288d1;
+}
+.rf-icon-btn--warning {
+  color: #ed6c02;
+}
+.rf-icon-btn--inherit {
+  color: inherit;
+}
+.rf-icon-btn--edge-start {
+  margin-left: -12px;
+}
+.rf-icon-btn--edge-start.rf-icon-btn--small {
+  margin-left: -3px;
+}
+.rf-icon-btn--edge-end {
+  margin-right: -12px;
+}
+.rf-icon-btn--edge-end.rf-icon-btn--small {
+  margin-right: -3px;
+}
+.rf-icon-btn--disabled,
+.rf-icon-btn:disabled {
+  opacity: 0.38;
+  cursor: default;
+  pointer-events: none;
+  background-color: transparent;
 }
 
 /* lib/styles/text-field.css */
@@ -5900,10 +6284,28 @@ pre {
 .rf-text-field__input:focus {
   outline: none;
 }
+.rf-text-field--disabled {
+  pointer-events: none;
+}
+.rf-text-field--disabled .rf-text-field__wrapper {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--disabled .rf-text-field__label {
+  color: var(--tf-disabled-color);
+}
+.rf-text-field--disabled .rf-text-field__adornment {
+  color: var(--tf-disabled-color);
+  opacity: 0.5;
+}
+.rf-text-field--disabled .rf-text-field__helper-text {
+  color: var(--tf-disabled-color);
+}
 .rf-text-field__input:disabled {
   opacity: 1;
   color: var(--tf-disabled-color);
-  cursor: default;
+  cursor: not-allowed;
 }
 .rf-text-field__input::placeholder {
   color: var(--tf-placeholder-color);
@@ -6007,7 +6409,10 @@ pre {
   border-width: 2px;
 }
 .rf-text-field--outlined.rf-text-field--disabled .rf-text-field__notch {
-  border-color: var(--tf-disabled-bg);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.rf-text-field--outlined.rf-text-field--disabled .rf-text-field__wrapper:hover .rf-text-field__notch {
+  border-color: rgba(0, 0, 0, 0.15);
 }
 .rf-text-field--filled .rf-text-field__wrapper {
   background-color: var(--tf-filled-bg);
@@ -6061,7 +6466,13 @@ pre {
   transform: translate(12px, 7px) scale(0.75);
 }
 .rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper:hover::before {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
 }
 .rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper::before {
   border-bottom-style: dotted;
@@ -6111,6 +6522,9 @@ pre {
 .rf-text-field--standard.rf-text-field--disabled .rf-text-field__wrapper::before {
   border-bottom-style: dotted;
 }
+.rf-text-field--standard.rf-text-field--disabled .rf-text-field__wrapper:hover::before {
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.42);
+}
 .rf-text-field--error .rf-text-field__label,
 .rf-text-field--error .rf-text-field__wrapper:focus-within .rf-text-field__label {
   color: var(--tf-error-color);
@@ -6217,6 +6631,13 @@ pre {
   margin-right: 10px;
   margin-left: 0;
 }
+.rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper {
+  border-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper:hover {
+  border-color: rgba(0, 0, 0, 0.12);
+}
 
 /* node_modules/jodit/es5/jodit.min.css */
 .jodit-ui-button-icon-text__icon {