@tremolo-ui/react 0.4.0 → 0.5.0

package/dist/index.css

@@ -18,10 +18,12 @@
   cursor: none;
 }
 .tremolo-knob {
+  --knob-size: 50px;
+  width: var(--knob-size);
+  height: var(--knob-size);
   cursor: grab;
   outline: 0;
   display: inline-block;
-  overflow: visible;
 
   &[aria-readonly="true"] {
     cursor: not-allowed;
@@ -34,7 +36,6 @@
 
 .tremolo-knob-active-line {
   color: oklch(69.2% .17548 266.373);
-  overflow: visible;
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
     color: oklch(59.5% .17548 266.373);
@@ -94,14 +95,14 @@
     color: oklch(84.2% 0 0);
   }
 }
-.tremolo-number-input-wrapper {
+.tremolo-number-input {
   --border-radius: 4px;
   --stepper-width: 20px;
+  --stepper-icon-size: 12px;
   --active-color: oklch(59.5% .17548 266.373);
   --border-color: oklch(81% 0 0);
-  border-style: solid;
-  border-color: var(--border-color);
-  border-width: 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
   outline: none;
   flex-direction: row;
   width: 140px;
@@ -110,64 +111,26 @@
   display: inline-flex;
   position: relative;
 
-  &:not(:focus-within):has( > .tremolo-number-input[data-error="true"]) {
-    border-color: oklch(64.245% .21266 25.499);
-  }
-
-  &[data-variant="outline"] {
-    border-radius: var(--border-radius);
-    border-width: 1px;
-
-    &:hover {
-      --border-color: oklch(65.335% 0 0);
-    }
-
-    &:focus-within {
-      --border-color: var(--active-color);
-      box-shadow: 0px 0px 0px 2px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
+  &:hover {
+    --border-color: oklch(65.335% 0 0);
   }
 
-  &[data-variant="filled"] {
-    --bg: oklch(95.88% 0 0);
-    border-radius: var(--border-radius);
-    background-color: var(--bg);
-    border-width: 1px;
-    border-color: #0000;
-
-    &:hover {
-      --bg: oklch(93.166% 0 0);
-    }
-
-    &:focus-within {
-      background-color: inherit;
-      --border-color: var(--active-color);
-      box-shadow: 0px 0px 0px 2px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
+  &:focus-within {
+    --border-color: var(--active-color);
+    box-shadow: 0px 0px 0px 2px
+      color-mix(in srgb, var(--active-color) 10%, transparent);
   }
 
-  &[data-variant="flushed"] {
-    border-bottom-width: 1px;
-
-    &:hover {
-      --border-color: oklch(65.335% 0 0);
-    }
-
-    &:focus-within {
-      --border-color: var(--active-color);
-      box-shadow: 0px 2px 0px 0px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
+  &:not(:focus-within):has(.tremolo-number-input-field[data-out-of-range="true"]) {
+    border-color: oklch(64.245% .21266 25.499);
   }
 
-  &[data-stepper="false"] {
+  &:not(:has(.tremolo-number-input-stepper)) {
     --stepper-width: 0px;
   }
 }
 
-.tremolo-number-input {
+.tremolo-number-input-field {
   color: inherit;
   width: calc(100% - 20px - var(--stepper-width));
   background-color: inherit;
@@ -187,28 +150,29 @@
 .tremolo-number-input-stepper {
   height: 100%;
   width: var(--stepper-width);
+  opacity: 0;
   flex-direction: column;
   transition: all .1s linear;
   display: flex;
   position: absolute;
   top: 0;
   right: 0;
-
-  &[data-dynamic="true"] {
-    opacity: 0;
-    transform: translateX(40%);
-  }
+  transform: translateX(40%);
 }
 
-:is(.tremolo-number-input-wrapper:hover, .tremolo-number-input-wrapper:focus-within) .tremolo-number-input-stepper {
+:is(.tremolo-number-input:hover, .tremolo-number-input:focus-within) .tremolo-number-input-stepper {
   opacity: 1;
   transform: translateX(0);
 }
 
-.tremolo-number-input-increment-stepper {
+.tremolo-number-input-stepper-icon {
+  width: var(--stepper-icon-size);
+  height: var(--stepper-icon-size);
+}
+
+:is(.tremolo-number-input-increment-stepper, .tremolo-number-input-decrement-stepper) {
   user-select: none;
   cursor: pointer;
-  border-top-right-radius: var(--border-radius);
   border-inline-start: 1px solid oklch(84.522% 0 0);
   flex: 1;
   justify-content: center;
@@ -226,39 +190,18 @@
   }
 }
 
+.tremolo-number-input-increment-stepper {
+  border-top-right-radius: var(--border-radius);
+}
+
 .tremolo-number-input-decrement-stepper {
-  border-inline-start: 1px solid oklch(84.522% 0 0);
-  user-select: none;
-  cursor: pointer;
   border-bottom-right-radius: var(--border-radius);
   border-top: 1px solid oklch(84.522% 0 0);
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  max-height: 50%;
-  font-size: .75rem;
-  display: flex;
-
-  &[aria-disabled="false"]:active {
-    background-color: oklch(37.798% .03812 254.612 / .055);
-  }
-
-  &[aria-disabled="true"], &[aria-readonly="true"] {
-    cursor: not-allowed;
-  }
 }
 
 :where(.dark, [data-theme="dark"]) {
-  & .tremolo-number-input-wrapper {
+  & .tremolo-number-input {
     --border-color: oklch(52% 0 0);
-
-    &[data-variant="filled"] {
-      --bg: oklch(43.5% 0 0);
-
-      &:hover {
-        --bg: oklch(46.6% 0 0);
-      }
-    }
   }
 }
 .tremolo-piano {
@@ -377,12 +320,23 @@
   &[data-dragging="true"] {
     cursor: inherit;
   }
+
+  &[aria-readonly="true"] {
+    cursor: default;
+  }
 }
 .tremolo-slider {
+  --thumb-size: 22px;
+  margin: calc(var(--thumb-size) / 2);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   outline: 0;
-  display: inline-block;
+  flex-direction: column;
+  display: inline-flex;
+
+  &[data-vertical="true"] {
+    flex-direction: row;
+  }
 
   &[aria-readonly="true"] {
     cursor: not-allowed;
@@ -397,6 +351,8 @@
 
 .tremolo-slider-thumb {
   --color: oklch(59.5% .17548 266.373);
+  width: var(--thumb-size);
+  height: var(--thumb-size);
   background: var(--color);
   border-radius: 50%;
   outline: none;
@@ -435,12 +391,12 @@
   }
 }
 
-.tremolo-slider-scale {
+.tremolo-slider-marks {
   display: block;
   position: relative;
 }
 
-.tremolo-slider-scale-option {
+.tremolo-slider-marks-option {
   color: oklch(25.197% .00003 271.152);
   z-index: 10;
   flex-direction: column;
@@ -456,11 +412,11 @@
   }
 }
 
-.tremolo-slider-scale-option-mark {
+.tremolo-slider-marks-option-mark {
   background-color: currentColor;
 }
 
-.tremolo-slider-scale-option-label {
+.tremolo-slider-marks-option-label {
   text-align: right;
 }
 
@@ -489,8 +445,15 @@
   }
 }
 .tremolo-xy-pad {
+  --thumb-size: 22px;
+  margin: calc(var(--thumb-size) / 2);
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
   display: inline-block;
+
+  &[aria-readonly="true"] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-xy-pad-area {
@@ -507,6 +470,8 @@
 
 .tremolo-xy-pad-thumb {
   --color: oklch(59.5% .17548 266.373);
+  width: var(--thumb-size);
+  height: var(--thumb-size);
   background-color: var(--color);
   border-radius: 50%;
   outline: none;