@quidgest/ui 0.16.15 → 0.16.17

package/dist/manifest/components.json

@@ -48,6 +48,7 @@
   "QSidebar",
   "QSkeletonLoader",
   "QSpinnerLoader",
+  "QSwitch",
   "QTextArea",
   "QTextField",
   "QThemeProvider",

package/dist/ui.css

@@ -1011,17 +1011,16 @@ body *::-webkit-scrollbar-track {
   --box-size: 1.15rem;
   --icon-color: var(--q-theme-on-primary);
   --icon-opacity: 0;
+  --transition-duration: 0.15s;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.5rem;
   width: -moz-fit-content;
   width: fit-content;
   color: var(--q-theme-neutral-dark);
-  cursor: pointer;
 }
 .q-checkbox__input {
   display: flex;
-  align-self: flex-start;
   align-items: center;
   justify-content: center;
   width: var(--box-size);
@@ -1030,7 +1029,7 @@ body *::-webkit-scrollbar-track {
   border: 1px solid var(--q-theme-neutral-light);
   border-radius: var(--border-radius);
   padding: 0;
-  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
+  transition: background var(--transition-duration), border-color var(--transition-duration), box-shadow var(--transition-duration);
   background-color: transparent;
   flex-shrink: 0;
   cursor: inherit;
@@ -1050,15 +1049,21 @@ body *::-webkit-scrollbar-track {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  transition: transform 0.2s ease;
+  transition: transform var(--transition-duration) ease;
   opacity: var(--icon-opacity);
 }
 .q-checkbox__native-input {
-  transform: translateX(-100%);
   position: absolute;
-  pointer-events: none;
   opacity: 0;
-  margin: 0;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+.q-checkbox__label.q-label {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  line-height: var(--box-size);
 }
 .q-checkbox--small {
   --box-size: 0.95rem;
@@ -3868,7 +3873,6 @@ body *::-webkit-scrollbar-track {
      -moz-appearance: none;
           appearance: none;
   border-width: 1px;
-  border-color: var(--q-theme-neutral);
   border-radius: 50%;
   /** The inner dot */
 }
@@ -4238,6 +4242,175 @@ body *::-webkit-scrollbar-track {
     transform: rotate(1turn);
   }
 }
+.q-switch {
+  --q-switch-inner-padding: 2px;
+  --q-switch-border-radius: 9999px;
+  --q-switch-transition-duration: 0.15s;
+  --q-switch-transition-easing: ease-out;
+  --q-switch-label-padding-v: 10px;
+  --q-switch-label-padding-h: 15px;
+  --q-switch-font-size: 0.75rem;
+  --q-switch-shadow-color-primary: rgb(var(--q-theme-on-background-rgb) / 20%);
+  --q-switch-shadow-color-secondary: rgb(var(--q-theme-on-background-rgb) / 10%);
+  --q-switch-shadow-blur-base: 3px;
+  --q-switch-shadow-offset-y: 1px;
+  --q-switch-shadow-spread: 2px;
+  --q-switch-shadow-color-primary-hover: rgb(var(--q-theme-on-background-rgb) / 30%);
+  --q-switch-shadow-color-secondary-hover: rgb(var(--q-theme-on-background-rgb) / 15%);
+  --q-switch-shadow-blur-hover: 6px;
+  --q-switch-shadow-offset-y-hover: 2px;
+  --q-switch-shadow-spread-hover: 4px;
+  --q-switch-disabled-opacity: 0.5;
+  --q-switch-hover-background-opacity: 0.5;
+  --q-switch-checked-background: var(--q-theme-primary);
+  --q-switch-on-checked-background: var(--q-theme-on-primary);
+  --q-switch-unchecked-background: rgb(var(--q-theme-neutral-light-rgb) / 50%);
+  --q-switch-on-unchecked-background: var(--q-theme-neutral);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  white-space: nowrap;
+  background: var(--q-switch-unchecked-background);
+  border-radius: var(--q-switch-border-radius);
+  padding: var(--q-switch-inner-padding);
+  transition: background var(--q-switch-transition-duration) var(--q-switch-transition-easing);
+}
+.q-switch--small {
+  --q-switch-inner-padding: 1px;
+  --q-switch-label-padding-v: 8px;
+  --q-switch-label-padding-h: 12px;
+  --q-switch-font-size: 0.6875rem;
+}
+.q-switch--large {
+  --q-switch-inner-padding: 3px;
+  --q-switch-label-padding-v: 12px;
+  --q-switch-label-padding-h: 18px;
+  --q-switch-font-size: 0.875rem;
+}
+.q-switch--disabled {
+  opacity: var(--q-switch-disabled-opacity);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.q-switch__container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+}
+
+.q-switch__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--q-switch-border-radius);
+  z-index: 2;
+}
+.q-switch__input:focus-visible {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+}
+.q-switch__input:disabled {
+  cursor: not-allowed;
+}
+.q-switch__input:disabled:focus-visible {
+  outline: none;
+}
+
+.q-switch__labels {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.q-switch__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--q-switch-border-radius);
+  padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition: padding-left var(--q-switch-transition-duration) var(--q-switch-transition-easing), padding-right var(--q-switch-transition-duration) var(--q-switch-transition-easing), box-shadow var(--q-switch-transition-duration) var(--q-switch-transition-easing);
+  cursor: pointer;
+  color: var(--q-switch-on-unchecked-background);
+  background: transparent;
+  font-size: var(--q-switch-font-size);
+  line-height: 1;
+  pointer-events: none;
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+}
+
+.q-switch__label--off {
+  padding-right: var(--q-switch-label-padding-v);
+}
+
+.q-switch__label--on {
+  padding-left: var(--q-switch-label-padding-v);
+}
+
+.q-switch--with-labels {
+  --q-switch-label-padding-v: 4px;
+}
+.q-switch--with-labels .q-switch__label {
+  padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h);
+}
+
+.q-switch--checked:not(.q-switch--readonly) {
+  background: var(--q-switch-checked-background);
+}
+.q-switch--checked:not(.q-switch--readonly) .q-switch__label--off {
+  color: var(--q-switch-on-checked-background);
+}
+
+.q-switch__input:checked ~ .q-switch__labels .q-switch__label--on,
+.q-switch__input:not(:checked) ~ .q-switch__labels .q-switch__label--off {
+  background: var(--q-theme-background);
+  color: var(--q-theme-on-background);
+  box-shadow: var(--q-switch-shadow-color-primary) 0 0 var(--q-switch-shadow-blur-base), var(--q-switch-shadow-color-secondary) 0 var(--q-switch-shadow-offset-y) var(--q-switch-shadow-spread);
+  padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h);
+}
+
+.q-switch--readonly {
+  cursor: default;
+  pointer-events: none;
+}
+.q-switch--readonly .q-switch__input:checked ~ .q-switch__labels .q-switch__label--on,
+.q-switch--readonly .q-switch__input:not(:checked) ~ .q-switch__labels .q-switch__label--off {
+  background: var(--q-theme-neutral);
+  color: var(--q-theme-on-neutral);
+  box-shadow: none;
+}
+
+.q-switch:not(.q-switch--disabled) .q-switch__input:hover ~ .q-switch__labels .q-switch__label--on,
+.q-switch:not(.q-switch--disabled) .q-switch__input:hover ~ .q-switch__labels .q-switch__label--off {
+  background: rgba(var(--q-theme-background-rgb, 255, 255, 255), var(--q-switch-hover-background-opacity));
+}
+.q-switch:not(.q-switch--disabled) .q-switch__input:checked:hover ~ .q-switch__labels .q-switch__label--on,
+.q-switch:not(.q-switch--disabled) .q-switch__input:not(:checked):hover ~ .q-switch__labels .q-switch__label--off {
+  background: var(--q-theme-background);
+  box-shadow: var(--q-switch-shadow-color-primary-hover) 0 0 var(--q-switch-shadow-blur-hover), var(--q-switch-shadow-color-secondary-hover) 0 var(--q-switch-shadow-offset-y-hover) var(--q-switch-shadow-spread-hover);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .q-switch__label {
+    transition: none;
+  }
+}
 .q-text-area {
   /* Container styles */
   display: flex;