@yr3/ui 1.0.13 → 1.0.14

package/dist/styles/global.css

@@ -129,4 +129,9 @@ p {
   --color-label: #6C5CE7;
 }
 
+input[type=date]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  position: absolute;
+}
+
 /*# sourceMappingURL=global.css.map */

package/dist/styles/global.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/_mixins.scss","../../src/styles/global.scss"],"names":[],"mappings":"AAMA;ECCI;EAOA;EACA;EACA;EACA;EACA;;;ACbJ;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAEF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EACA","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/_mixins.scss","../../src/styles/global.scss"],"names":[],"mappings":"AAMA;ECCI;EAOA;EACA;EACA;EACA;EACA;;;ACbJ;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAEF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EACA;;;AAGF;EACE;EACA","file":"global.css"}

package/dist/styles/index.css

@@ -129,6 +129,11 @@ p {
   --color-label: #6C5CE7;
 }
 
+input[type=date]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  position: absolute;
+}
+
 .yr3Avatar {
   display: inline-flex;
   align-items: center;
@@ -189,6 +194,12 @@ p {
   border-radius: 0;
 }
 
+.yr3Avatar--bordered {
+  border: 2px solid var(--avatar-color);
+  background: transparent;
+  border-radius: 50%;
+}
+
 /* ===== COLORS (THEME DRIVEN) ===== */
 .yr3Avatar--color-primary {
   --avatar-bg: var(--color-primary);
@@ -238,8 +249,14 @@ p {
   --avatar-color: var(--color-on-surface);
 }
 
-.yr3Avatar--bordered {
-  border: 1px solid var(--avatar-color);
+.yr3Avatar--color-common {
+  --avatar-bg: var(--color-white);
+  --avatar-shadow: var(--color-surface);
+  --avatar-color: var(--color-surface);
+}
+
+.yr3Avatar--border-active {
+  border: 2px solid var(--avatar-color);
 }
 
 .yr3Avatar--shadow-1 {
@@ -268,7 +285,7 @@ p {
   right: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-backdrop, rgba(0, 0, 0, 0.5));
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
@@ -371,6 +388,7 @@ p {
   color: var(--color-button);
 }
 .yr3Button--outlined.yr3Button--gradientBorder {
+  --border-radius: 4px;
   background: linear-gradient(129deg, #fdfdfd, #81e9f9, #fda6fe, var(--color-primary)) !important;
   background-clip: text !important;
   -webkit-background-clip: text !important;
@@ -445,6 +463,12 @@ p {
   --color-button: var(--color-warning);
 }
 
+.yr3Button--color-common {
+  --bg-button: var(--color-white);
+  --border-button: var(--color-white);
+  --color-button: var(--color-white);
+}
+
 .yr3Button--animated {
   animation: glowPulse 1s infinite;
   background: linear-gradient(155deg, #4e90fa 0%, #9b41ee 50%, #fd58aa 100%) !important;
@@ -455,10 +479,6 @@ p {
   opacity: 0.6;
 }
 
-.yr3Button:hover, .yr3Button:focus, .yr3Button:active {
-  background: none;
-}
-
 @keyframes glowPulse {
   0% {
     filter: drop-shadow(0 0 8px #d46ef3);
@@ -602,76 +622,67 @@ p {
   position: relative;
 }
 
-/* CHECKED */
-.yr3Checkbox-box--checked {
-  background: var(--checkbox-active);
-  border-color: var(--checkbox-active);
-}
-.yr3Checkbox-box--checked > .yr3Checkbox-label {
-  color: var(--checkbox-active);
-}
-
-/* ICON */
-.yr3Checkbox-box--checked::after {
-  content: "";
-  position: absolute;
-  left: 4px;
-  top: 1px;
-  width: 5px;
-  height: 10px;
-  border: solid var(--color-checkmark, #fff);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-
 /* COLORS */
 .yr3Checkbox--color-primary {
   --checkbox-active: var(--color-primary);
-  --color-checkmark: var(--color-surface);
+  --checkbox-filled-active: var(--color-surface);
+  --color-checkmark: var(--color-primary);
 }
 
 .yr3Checkbox--color-secondary {
   --checkbox-active: var(--color-secondary);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-secondary);
 }
 
 .yr3Checkbox--color-error {
   --checkbox-active: var(--color-error);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-error);
 }
 
 .yr3Checkbox--color-success {
   --checkbox-active: var(--color-success);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-success);
 }
 
 .yr3Checkbox--color-warning {
   --checkbox-active: var(--color-warning);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-warning);
 }
 
 .yr3Checkbox--color-info {
   --checkbox-active: var(--color-info);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-info);
 }
 
 .yr3Checkbox--color-disabled {
   --checkbox-active: var(--color-disabled);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-disabled);
 }
 
 .yr3Checkbox--color-background {
   --checkbox-active: var(--color-surface);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-surface);
 }
 
 .yr3Checkbox--color-text {
   --checkbox-active: var(--color-text);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-text);
-  --checkbox-spacing: 1px;
 }
 
-/* DISABLED */
+.yr3Checkbox--color-common {
+  --checkbox-active: var(--color-white);
+  --checkbox-filled-active: var(--color-surface);
+  --color-checkmark: var(--color-white);
+}
+
 .yr3Checkbox--disabled {
   opacity: 0.5;
   pointer-events: none;
@@ -681,26 +692,59 @@ p {
 .yr3Checkbox--variant-filled .yr3Checkbox-box {
   background: var(--checkbox-active);
   border-color: var(--checkbox-active);
+  color: var(--checkbox-active);
+}
+.yr3Checkbox--variant-filled .yr3Checkbox-box.yr3Checkbox-box--checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--checkbox-filled-active, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
 
 .yr3Checkbox--variant-outlined .yr3Checkbox-box {
   background: transparent;
   border-color: var(--checkbox-active);
 }
+.yr3Checkbox--variant-outlined .yr3Checkbox-box.yr3Checkbox-box--checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--checkbox-active, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
 
 .yr3Checkbox--variant-text .yr3Checkbox-box {
   border-color: transparent;
   background: transparent;
   --checkbox-spacing: 1px;
 }
+.yr3Checkbox--variant-text .yr3Checkbox-box.yr3Checkbox-box--checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--checkbox-active, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
 
-/* LABEL */
-.yr3Checkbox-label {
-  font-size: 14px;
-  user-select: none;
+.yr3Checkbox--type-circle .yr3Checkbox-box {
+  border-radius: 50%;
 }
-.yr3Checkbox-label.yr3Checkbox-box--checked {
-  color: var(--checkbox-active);
+
+.yr3Checkbox--type-circle.yr3Checkbox--variant-filled .yr3Checkbox-box {
+  border-radius: 50%;
 }
 
 .yr3Chip {
@@ -777,6 +821,11 @@ p {
   --badge-color: var(--color-surface);
   --badge-border: var(--color-text-primary);
 }
+.yr3Chip--filled.yr3Chip--common {
+  --badge-bg: var(--color-white);
+  --badge-color: var(--color-surface);
+  --badge-border: var(--color-white);
+}
 .yr3Chip--filled--rounded {
   border-radius: 16px;
 }
@@ -820,6 +869,10 @@ p {
   --badge-border: var(--color-text-primary);
   --badge-color: var(--color-text-primary);
 }
+.yr3Chip--outlined.yr3Chip--common {
+  --badge-border: var(--color-white);
+  --badge-color: var(--color-white);
+}
 .yr3Chip--outlined .yr3Chip--rounded {
   border-radius: 16px;
 }
@@ -975,6 +1028,18 @@ p {
   --input-color: var(--color-text-primary);
 }
 
+.yr3Control--color-text {
+  --input-bg: var(--color-surface);
+  --input-border: var(--color-text);
+  --input-color: var(--color-text);
+}
+
+.yr3Control--color-common {
+  --input-bg: var(--color-white);
+  --input-border: var(--color-surface);
+  --input-color: var(--color-surface);
+}
+
 .yr3Control--label {
   height: 48px;
 }
@@ -1069,6 +1134,10 @@ p {
   --color-divider: var(--color-text, var(--color-primary));
 }
 
+.yr3Divider--color-common {
+  --color-divider: var(--color-white, var(--color-surface));
+}
+
 .yr3Drawer {
   position: fixed;
   transition: transform 0.3s ease;
@@ -1282,11 +1351,11 @@ p {
   border-color: var(--group-border-color, var(--color-primary));
   background: var(--bg-group, var(--color-primary));
   --group-bg-item: var(--color-surface, #fff);
-  border-radius: 40px;
+  border-radius: var(--group-border-radius, 40px);
 }
 .yr3Group--filled .yr3Group--item {
   color: var(--color-surface, var(--color-surface));
-  border-radius: 40px;
+  border-radius: var(--group-border-radius, 40px);
 }
 .yr3Group--filled .yr3Group--item--active {
   background: var(--color-surface);
@@ -1296,7 +1365,7 @@ p {
 .yr3Group--outlined {
   border: 1px solid;
   border-color: var(--group-border-color, var(--color-primary));
-  border-radius: 40px;
+  border-radius: var(--group-border-radius, 40px);
 }
 .yr3Group--outlined .yr3Group--item {
   background: var(--group-bg-item, transparent);
@@ -1334,6 +1403,13 @@ p {
   --group-color-text: var(--color-secondary);
 }
 
+.yr3Group--color-success {
+  --group-active: var(--color-success);
+  --bg-group: var(--color-success);
+  --group-border-color: var(--color-success);
+  --group-color-text: var(--color-success);
+}
+
 .yr3Group--color-error {
   --group-active: var(--color-error);
   --bg-group: var(--color-error);
@@ -1362,6 +1438,13 @@ p {
   --group-color-text: var(--color-disabled);
 }
 
+.yr3Group--color-background {
+  --group-active: var(--color-text-primary);
+  --bg-group: var(--color-surface);
+  --group-border-color: var(--color-surface);
+  --group-color-text: var(--color-text-primary);
+}
+
 .yr3Group--color-text {
   --group-active: var(--color-text);
   --bg-group: var(--color-text);
@@ -1369,25 +1452,19 @@ p {
   --group-color-text: var(--color-text);
 }
 
-.yr3Group--color-background {
-  --group-active: var(--color-text-primary);
-  --bg-group: var(--color-surface);
-  --group-border-color: var(--color-surface);
-  --group-color-text: var(--color-text-primary);
+.yr3Group--color-common {
+  --group-active: var(--color-white);
+  --bg-group: var(--color-text);
+  --group-border-color: var(--color-text);
+  --group-color-text: var(--color-text);
 }
 
-.yr3Group--color-success {
-  --group-active: var(--color-success);
-  --bg-group: var(--color-success);
-  --group-border-color: var(--color-success);
-  --group-color-text: var(--color-success);
+.yr3Group--type-rounded {
+  --group-border-radius: 40px;
 }
 
-.yr3Group--color-text {
-  --group-active: var(--color-text-primary);
-  --bg-group: var(--color-text-primary);
-  --group-border-color: var(--color-text-primary);
-  --group-color-text: var(--color-text-primary);
+.yr3Group--type-square {
+  --group-border-radius: 0;
 }
 
 .yr3Image {
@@ -1533,7 +1610,11 @@ input::placeholder {
 }
 
 .yr3Input--color-text {
-  color: var(--color-text-primary);
+  color: var(--color-text);
+}
+
+.yr3Input--color-common {
+  color: var(--color-white);
 }
 
 .yr3Input--label {
@@ -1632,6 +1713,11 @@ input::placeholder {
   color: var(--color-surface);
 }
 
+.yr3InputArea--color-common {
+  --border-color: var(--color-white);
+  color: var(--color-white);
+}
+
 .yr3InputArea--rounded {
   --border-radius: var(--radius-sm);
 }
@@ -1696,6 +1782,120 @@ input::placeholder {
   --color-label: var(--color-text-primary);
 }
 
+.yr3Label--color-common {
+  --color-label: var(--color-white);
+}
+
+.yr3Loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-backdrop, rgba(0, 0, 0, 0.5));
+}
+
+.yr3Loader--spinner-default {
+  width: var(--spinner-width, 24px);
+  height: var(--spinner-height, 24px);
+  border: 3px solid transparent;
+  border-top-color: var(--spinner-color, var(--color-primary));
+  border-radius: 50%;
+  animation: yr3-spin 0.8s linear infinite;
+}
+
+@keyframes yr3-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.yr3Loader--spinner-size-sm {
+  --spinner-width: 16px;
+  --spinner-height: 16px;
+}
+
+.yr3Loader--spinner-size-md {
+  --spinner-width: 24px;
+  --spinner-height: 24px;
+}
+
+.yr3Loader--spinner-size-lg {
+  --spinner-width: 40px;
+  --spinner-height: 40px;
+}
+
+.yr3Loader--spinner-fancy {
+  width: var(--spinner-width, 24px);
+  height: var(--spinner-height, 24px);
+  border: 3px solid transparent;
+  border-top-color: var(--spinner-color, var(--color-primary));
+  border-radius: 50%;
+  animation: yr3-spin 0.8s linear infinite;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--spinner-color, var(--color-primary));
+}
+
+.yr3Loader--spinner-color-primary {
+  --spinner-color: var(--color-primary);
+}
+
+.yr3Loader--spinner-color-secondary {
+  --spinner-color: var(--color-secondary);
+}
+
+.yr3Loader--spinner-color-success {
+  --spinner-color: var(--color-success);
+}
+
+.yr3Loader--spinner-color-error {
+  --spinner-color: var(--color-error);
+}
+
+.yr3Loader--spinner-color-disabled {
+  --spinner-color: var(--color-disabled);
+}
+
+.yr3Loader--spinner-color-text {
+  --spinner-color: var(--color-text);
+}
+
+.yr3Loader--spinner-color-background {
+  --spinner-color: var(--color-background);
+}
+
+.yr3Loader--spinner-color-common {
+  --spinner-color: var(--color-white);
+}
+
+.yr3Loader--spinner-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.yr3Loader--spinner-dots span {
+  width: var(--spinner-width, 24px);
+  height: var(--spinner-height, 24px);
+  background: var(--spinner-color, var(--color-primary));
+  border-radius: 50%;
+  animation: yr3-bounce 1s infinite ease-in-out;
+}
+
+.yr3Loader--spinner-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.yr3Loader--spinner-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes yr3-bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
 .yr3Modal {
   animation: fadeIn 0.3s ease;
   z-index: 1000;
@@ -1903,6 +2103,11 @@ input::placeholder {
   color: var(--color-on-surface);
 }
 
+.yr3Notistack--color-common {
+  background: var(--color-white);
+  color: var(--color-surface);
+}
+
 .yr3Notistack--bottom-right {
   bottom: 20px;
   right: 20px;
@@ -2027,6 +2232,10 @@ input::placeholder {
   --pending-surface: var(--bg-background);
 }
 
+.yr3Pending--color-common {
+  --pending-surface: var(--color-white);
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.6;
@@ -2170,6 +2379,11 @@ input::placeholder {
   --color-border: var(--color-surface);
 }
 
+.yr3Radio--color-common {
+  --radio-active: var(--color-white);
+  --color-border: var(--color-white);
+}
+
 .yr3Select {
   display: flex;
   flex-direction: row;
@@ -2221,6 +2435,50 @@ input::placeholder {
   overflow-x: "hidden";
 }
 
+.yr3Select--icon-color-primary {
+  color: var(--color-primary);
+}
+
+.yr3Select--icon-color-secondary {
+  color: var(--color-secondary);
+}
+
+.yr3Select--icon-color-success {
+  color: var(--color-success);
+}
+
+.yr3Select--icon-color-error {
+  color: var(--color-error);
+}
+
+.yr3Select--icon-color-warning {
+  color: var(--color-warning);
+}
+
+.yr3Select--icon-color-info {
+  color: var(--color-info);
+}
+
+.yr3Select--icon-color-disabled {
+  color: var(--color-disabled);
+}
+
+.yr3Select--icon-color-background {
+  color: var(--color-surface);
+}
+
+.yr3Select--icon-color-text {
+  color: var(--color-text);
+}
+
+.yr3Select--icon-color-common {
+  color: var(--color-white);
+}
+
+.yr3Select--icon-animated {
+  transition: transform 0.3s ease;
+}
+
 .yr3Selector-wrapper {
   position: relative;
   margin: 0 auto;
@@ -2442,6 +2700,34 @@ input::placeholder {
   --switch-track-active: var(--color-warning);
 }
 
+.yr3Switch--color-error {
+  --switch-thumb-bg: var(--color-error);
+  --switch-thumb-border: var(--color-error);
+  --switch-track-bg: var(--color-error);
+  --switch-track-active: var(--color-error);
+}
+
+.yr3Switch--color-info {
+  --switch-thumb-bg: var(--color-info);
+  --switch-thumb-border: var(--color-info);
+  --switch-track-bg: var(--color-info);
+  --switch-track-active: var(--color-info);
+}
+
+.yr3Switch--color-background {
+  --switch-thumb-bg: var(--color-background);
+  --switch-thumb-border: var(--color-background);
+  --switch-track-bg: var(--color-background);
+  --switch-track-active: var(--color-background);
+}
+
+.yr3Switch--color-common {
+  --switch-thumb-bg: var(--color-white);
+  --switch-thumb-border: var(--color-white);
+  --switch-track-bg: var(--color-white);
+  --switch-track-active: var(--color-white);
+}
+
 .yr3Switch--label-start {
   flex-direction: row-reverse;
 }
@@ -2590,7 +2876,7 @@ input::placeholder {
   --text-color: var(--color-info);
 }
 
-.yr3Text--color-nherit {
+.yr3Text--color-inherit {
   --text-color: inherit;
 }
 
@@ -2602,4 +2888,12 @@ input::placeholder {
   --text-color: var(--color-disabled);
 }
 
+.yr3Text--color-background {
+  --text-color: var(--color-background);
+}
+
+.yr3Text--color-common {
+  --text-color: var(--color-white);
+}
+
 /*# sourceMappingURL=index.css.map */