@rovula/ui 0.1.3 → 0.1.4

package/dist/src/theme/global.css

@@ -1105,23 +1105,21 @@
   /* Element: [progress, track]                                         */
   /* ------------------------------------------------------------------ */
   /* Default State */
-  --switch-default-color: rgb(from var(--state-color-tertiary-active) r g b / 0.32);
-  --switch-thumb-default-color: var(--state-color-tertiary-active);
+  --switch-default-color: rgb(from var(--grey-grey-100, #9e9e9e) r g b / 0.32);
+  --switch-thumb-default-color: var(--grey-grey-100, #9e9e9e);
+  --switch-thumb-filter: drop-shadow(0 2px 8px rgba(145, 158, 171, 0.24));
   /* Hover State */
-  --switch-hover-color: rgb(from var(--state-color-tertiary-active) r g b / 0.48);
-  --switch-thumb-hover-color: var(--switch-thumb-default-color);
-  --switch-thumb-hover-ring: var(--state-color-tertiary-hover-bg);
+  --switch-hover-color: rgb(from var(--grey-grey-80, #b1b1b1) r g b / 0.48);
+  --switch-thumb-hover-color: var(--grey-grey-80, #b1b1b1);
   /* Active State */
-  --switch-active-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
-  --switch-thumb-active-color: var(--state-color-secondary-active);
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active, #ddcd00);
   /* Active Hover State */
-  --switch-active-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
-  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
-  --switch-thumb-active-hover-ring: var(--state-color-secondary-hover-bg);
+  --switch-active-hover-color: rgb(from var(--state-color-primary-text-hover) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--state-color-primary-text-hover);
   /* Disabled State */
   --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
-  --switch-thumb-disabled-color: var(--state-color-disable-solid)
-;
+  --switch-thumb-disabled-color: var(--state-color-disable-solid, #454f5b);
   /* COLOR PROJECT */
   --main-primary-xspector: #ddcd00;
   --main-primary-report-xspector-light-mode: #1e3249;
@@ -2674,30 +2672,6 @@
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
   --dropdown-menu-disabled-text: var(--grey-grey-140);
-  /* ------------------------------------------------------------------ */
-  /* Switch Component Tokens                                           */
-  /* ------------------------------------------------------------------ */
-  /* Naming Convention: --[component]-[element]-[state]-[property]              */
-  /* Element: [progress, track]                                         */
-  /* ------------------------------------------------------------------ */
-  /* Default State */
-  --switch-default-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
-  --switch-thumb-default-color: var(--state-color-secondary-active);
-  /* Hover State */
-  --switch-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
-  --switch-thumb-hover-color: var(--switch-thumb-default-color);
-  --switch-thumb-hover-ring: var(--state-color-secondary-hover-bg);
-  /* Active State */
-  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
-  --switch-thumb-active-color: var(--state-color-primary-active);
-  /* Active Hover State */
-  --switch-active-hover-color: rgb(from var(--state-color-primary-active) r g b / 0.48);
-  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
-  --switch-thumb-active-hover-ring: var(--state-color-primary-hover-bg);
-  /* Disabled State */
-  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
-  --switch-thumb-disabled-color: var(--state-color-disable-solid)
-;
 }
 
 :root[data-theme="skyller"] {
@@ -3892,6 +3866,10 @@ input[type=number] {
   top: 100%;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -4120,6 +4098,11 @@ input[type=number] {
   height: 18px;
 }
 
+.size-\[22px\] {
+  width: 22px;
+  height: 22px;
+}
+
 .size-\[30px\] {
   width: 30px;
   height: 30px;
@@ -4426,6 +4409,16 @@ input[type=number] {
   border-collapse: collapse;
 }
 
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4533,6 +4526,10 @@ input[type=number] {
   grid-template-columns: 160px 16px;
 }
 
+.grid-cols-\[1fr_40px\] {
+  grid-template-columns: 1fr 40px;
+}
+
 .grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)\] {
   grid-template-columns: repeat(3,minmax(0,1fr));
 }
@@ -4699,6 +4696,10 @@ input[type=number] {
   overflow: hidden;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -5165,6 +5166,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-l-warning-stroke {
+  --tw-border-opacity: 1;
+  border-left-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-r-input-default-stroke {
   --tw-border-opacity: 1;
   border-right-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -5175,6 +5181,11 @@ input[type=number] {
   border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-r-warning-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-t-\[var\(--footer-border-color\)\] {
   border-top-color: var(--footer-border-color);
 }
@@ -6978,14 +6989,6 @@ input[type=number] {
   stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }
 
-.stroke-input-error {
-  stroke: color-mix(in srgb, var(--input-color-error) calc(100% * 1), transparent);
-}
-
-.stroke-input-filled-text {
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
-}
-
 .stroke-primary-default {
   stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -7026,6 +7029,11 @@ input[type=number] {
   padding: 2rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -7899,6 +7907,10 @@ input[type=number] {
   caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -7917,6 +7929,12 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[0px_8px_16px_0px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
+  --tw-shadow: 0px 8px 16px 0px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 0px 8px 16px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -7999,6 +8017,11 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
+.ring-warning-stroke {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .ring-offset-background {
   --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
 }
@@ -8025,6 +8048,12 @@ input[type=number] {
   transition-duration: 150ms;
 }
 
+.transition-\[transform\2c background-color\2c color\2c filter\] {
+  transition-property: transform,background-color,color,filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -8049,12 +8078,6 @@ input[type=number] {
   transition-duration: 150ms;
 }
 
-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .delay-150 {
   transition-delay: 150ms;
 }
@@ -8271,6 +8294,10 @@ input[type=number] {
   /* background: transparent; */
 }
 
+.\[filter\:var\(--switch-thumb-filter\)\] {
+  filter: var(--switch-thumb-filter);
+}
+
 .placeholder\:text-input-default-text::-moz-placeholder {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8314,11 +8341,42 @@ input[type=number] {
   inset: 0px;
 }
 
+.before\:left-1::before {
+  content: var(--tw-content);
+  left: 0.25rem;
+}
+
+.before\:top-1\/2::before {
+  content: var(--tw-content);
+  top: 50%;
+}
+
+.before\:h-3::before {
+  content: var(--tw-content);
+  height: 0.75rem;
+}
+
+.before\:w-8::before {
+  content: var(--tw-content);
+  width: 2rem;
+}
+
+.before\:-translate-y-1\/2::before {
+  content: var(--tw-content);
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .before\:rounded-\[inherit\]::before {
   content: var(--tw-content);
   border-radius: inherit;
 }
 
+.before\:rounded-full::before {
+  content: var(--tw-content);
+  border-radius: 9999px;
+}
+
 .before\:border::before {
   content: var(--tw-content);
   border-width: 1px;
@@ -8334,6 +8392,13 @@ input[type=number] {
   border-color: inherit;
 }
 
+.before\:transition-colors::before {
+  content: var(--tw-content);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .before\:content-\[\'\'\]::before {
   --tw-content: '';
   content: var(--tw-content);
@@ -8943,6 +9008,11 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
+.hover\:ring-warning-stroke:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .hover\:placeholder\:text-input-disable-text:hover::-moz-placeholder {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -9019,6 +9089,11 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
+.focus\:ring-warning-stroke:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
@@ -10032,13 +10107,7 @@ input[type=number] {
   opacity: 0.5;
 }
 
-.group:hover .group-hover\:ring {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.group:disabled .group-disabled\:\!bg-\[--switch-thumb-disabled-color\] {
+.group:disabled .group-disabled\:\!bg-\[var\(--switch-thumb-disabled-color\)\] {
   background-color: var(--switch-thumb-disabled-color) !important;
 }
 
@@ -10245,8 +10314,8 @@ input[type=number] {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.data-\[state\=unchecked\]\:-translate-x-\[2px\][data-state="unchecked"] {
-  --tw-translate-x: -2px;
+.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
+  --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -10397,10 +10466,6 @@ input[type=number] {
   background-color: var(--dropdown-menu-disabled-bg) !important;
 }
 
-.data-\[disabled\]\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled] {
-  background-color: var(--switch-disabled-color) !important;
-}
-
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading="true"] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-error-flat-active-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -10510,14 +10575,14 @@ input[type=number] {
   background-color: var(--dropdown-menu-selected-bg);
 }
 
-.data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state="checked"] {
-  background-color: var(--switch-active-color);
-}
-
 .data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state="checked"] {
   background-color: var(--switch-thumb-active-color);
 }
 
+.data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"] {
+  background-color: var(--switch-thumb-active-hover-color);
+}
+
 .data-\[state\=checked\]\:bg-function-active-solid[data-state="checked"] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -10538,14 +10603,14 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state="unchecked"] {
-  background-color: var(--switch-default-color);
-}
-
 .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state="unchecked"] {
   background-color: var(--switch-thumb-default-color);
 }
 
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state="unchecked"] {
+  background-color: var(--switch-thumb-hover-color);
+}
+
 .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled] {
   fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
 }
@@ -10752,6 +10817,10 @@ input[type=number] {
   color: var(--dropdown-menu-selected-text);
 }
 
+.data-\[state\=checked\]\:text-\[var\(--state-color-primary-hover-bg\)\][data-state="checked"] {
+  color: var(--state-color-primary-hover-bg);
+}
+
 .data-\[state\=checked\]\:text-function-active-icon[data-state="checked"] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -10772,6 +10841,10 @@ input[type=number] {
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.data-\[state\=unchecked\]\:text-\[var\(--state-color-tertiary-hover-bg\)\][data-state="unchecked"] {
+  color: var(--state-color-tertiary-hover-bg);
+}
+
 .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
   transition-property: none;
 }
@@ -10782,6 +10855,31 @@ input[type=number] {
   font-weight: var(--subtitle5-weight, 500);
 }
 
+.data-\[disabled\]\:before\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-disabled-color) !important;
+}
+
+.data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-color\)\][data-state="checked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-active-color);
+}
+
+.data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-active-hover-color);
+}
+
+.data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-default-color\)\][data-state="unchecked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-default-color);
+}
+
+.data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]::before {
+  content: var(--tw-content);
+  background-color: var(--switch-hover-color);
+}
+
 .hover\:data-\[state\=checked\]\:border-function-active-hover[data-state="checked"]:hover {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -10792,10 +10890,6 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
-.hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover {
-  background-color: var(--switch-active-hover-color);
-}
-
 .hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state="checked"]:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -10806,15 +10900,21 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
-.hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover {
-  background-color: var(--switch-hover-color);
-}
-
 .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state="checked"]:hover {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.hover\:data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover::before {
+  content: var(--tw-content);
+  background-color: var(--switch-active-hover-color);
+}
+
+.hover\:data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover::before {
+  content: var(--tw-content);
+  background-color: var(--switch-hover-color);
+}
+
 .disabled\:data-\[state\=checked\]\:bg-state-disable-solid[data-state="checked"]:disabled {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -10833,14 +10933,6 @@ input[type=number] {
   background-color: var(--switch-thumb-hover-color);
 }
 
-.group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state="checked"] {
-  --tw-ring-color: var(--switch-thumb-active-hover-ring);
-}
-
-.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state="unchecked"] {
-  --tw-ring-color: var(--switch-thumb-hover-ring);
-}
-
 @media (min-width: 640px) {
   .sm\:mt-0 {
     margin-top: 0px;
@@ -10911,6 +11003,18 @@ input[type=number] {
   display: block;
 }
 
+.\[\&_\.switch-thumb-halo\]\:opacity-100 .switch-thumb-halo {
+  opacity: 1;
+}
+
+.group:hover .group-hover\:\[\&_\.switch-thumb-halo\]\:opacity-100 .switch-thumb-halo {
+  opacity: 1;
+}
+
+.group:disabled .group-disabled\:\[\&_\.switch-thumb-halo\]\:opacity-0 .switch-thumb-halo {
+  opacity: 0;
+}
+
 .\[\&_button\]\:rounded-full button {
   border-radius: 9999px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Switch/Switch.stories.tsx

@@ -21,6 +21,7 @@ const meta = {
 } satisfies Meta<typeof Switch>;
 
 export default meta;
+type Story = StoryObj<typeof Switch>;
 
 export const Default = {
   args: {
@@ -28,7 +29,6 @@ export const Default = {
     disabled: false,
   },
   render: (args) => {
-    console.log("args ", args);
     const props: typeof args = {
       ...args,
     };
@@ -38,4 +38,35 @@ export const Default = {
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
+
+type SwitchPreviewRow = {
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  forceHover?: boolean;
+};
+
+const switchPreviewRows: SwitchPreviewRow[] = [
+  { label: "On - Default", checked: true },
+  { label: "On - Hover", checked: true, forceHover: true },
+  { label: "On - Disable", checked: true, disabled: true },
+  { label: "Off - Default", checked: false },
+  { label: "Off - Hover", checked: false, forceHover: true },
+  { label: "Off - Disable", checked: false, disabled: true },
+];
+
+export const FigmaPreview = {
+  render: () => (
+    <div className="bg-base-bg2 p-8 min-h-screen">
+      <div className="mx-auto flex w-full max-w-[300px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6">
+        {switchPreviewRows.map((row) => (
+          <div key={row.label} className="grid grid-cols-[1fr_40px] items-center gap-6">
+            <span className="text-sm font-medium text-text-white">{row.label}</span>
+            <Switch checked={row.checked} disabled={row.disabled} forceHover={row.forceHover} />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+} satisfies Story;

package/src/components/Switch/Switch.styles.ts

@@ -0,0 +1,48 @@
+import { cva } from "class-variance-authority";
+
+export const switchRootVariants = cva(
+  [
+    "group relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center overflow-visible px-1",
+    "before:pointer-events-none before:absolute before:left-1 before:top-1/2 before:h-3 before:w-8 before:-translate-y-1/2 before:rounded-full before:transition-colors",
+    "data-[state=unchecked]:before:bg-[var(--switch-default-color)] hover:data-[state=unchecked]:before:bg-[var(--switch-hover-color)]",
+    "data-[state=checked]:before:bg-[var(--switch-active-color)] hover:data-[state=checked]:before:bg-[var(--switch-active-hover-color)]",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:before:!bg-[var(--switch-disabled-color)]",
+  ],
+  {
+    variants: {
+      forceHover: {
+        true: "data-[state=unchecked]:before:bg-[var(--switch-hover-color)] data-[state=checked]:before:bg-[var(--switch-active-hover-color)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      forceHover: false,
+    },
+  },
+);
+
+export const switchThumbVariants = cva(
+  [
+    "relative isolate block size-4 rounded-full [filter:var(--switch-thumb-filter)] transition-[transform,background-color,color,filter]",
+    "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:translate-x-0",
+    "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
+    "data-[state=unchecked]:text-[var(--state-color-tertiary-hover-bg)] data-[state=checked]:text-[var(--state-color-primary-hover-bg)]",
+    "group-hover:[&_.switch-thumb-halo]:opacity-100 group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
+    "group-disabled:!bg-[var(--switch-thumb-disabled-color)] group-disabled:[&_.switch-thumb-halo]:opacity-0",
+  ],
+  {
+    variants: {
+      forceHover: {
+        true: "[&_.switch-thumb-halo]:opacity-100 data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)] data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      forceHover: false,
+    },
+  },
+);
+
+export const switchThumbHaloVariants = cva([
+  "switch-thumb-halo pointer-events-none absolute left-0 top-0.5 -z-10 block size-6 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity",
+]);