@tremolo-ui/react 0.4.0 → 0.6.0

package/dist/index.css

@@ -1,536 +0,0 @@
-.tremolo-user-select-none {
-  user-select: none;
-}
-
-.tremolo-cursor-pointer {
-  cursor: pointer;
-}
-
-.tremolo-cursor-move {
-  cursor: move;
-}
-
-.tremolo-cursor-grabbing {
-  cursor: grabbing;
-}
-
-.tremolo-cursor-none {
-  cursor: none;
-}
-.tremolo-knob {
-  cursor: grab;
-  outline: 0;
-  display: inline-block;
-  overflow: visible;
-
-  &[aria-readonly="true"] {
-    cursor: not-allowed;
-  }
-
-  &[data-dragging="true"] {
-    cursor: inherit;
-  }
-}
-
-.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);
-  }
-
-  :where(.tremolo-knob[aria-disabled="true"]) & {
-    color: oklch(50.5% .03307 270.021);
-  }
-}
-
-.tremolo-knob-inactive-line {
-  color: oklch(95% 0 0);
-
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(90% 0 0);
-  }
-}
-
-.tremolo-knob-thumb {
-  color: oklch(85.7% 0 0);
-
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(84.5% 0 0);
-  }
-}
-
-.tremolo-knob-thumb-line {
-  color: oklch(94.2% 0 0);
-}
-
-:where(.dark, [data-theme="dark"]) {
-  & .tremolo-knob-active-line {
-    color: oklch(59.5% .17548 266.373);
-
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(65.2% .17548 266.373);
-    }
-  }
-
-  & .tremolo-knob-inactive-line {
-    color: oklch(41.7% 0 0);
-
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(44.59% 0 0);
-    }
-  }
-
-  & .tremolo-knob-thumb {
-    color: oklch(48.6% 0 0);
-
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(51.7% 0 0);
-    }
-  }
-
-  & .tremolo-knob-thumb-line {
-    color: oklch(84.2% 0 0);
-  }
-}
-.tremolo-number-input-wrapper {
-  --border-radius: 4px;
-  --stepper-width: 20px;
-  --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;
-  outline: none;
-  flex-direction: row;
-  width: 140px;
-  height: min-content;
-  transition: all .1s;
-  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);
-    }
-  }
-
-  &[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);
-    }
-  }
-
-  &[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);
-    }
-  }
-
-  &[data-stepper="false"] {
-    --stepper-width: 0px;
-  }
-}
-
-.tremolo-number-input {
-  color: inherit;
-  width: calc(100% - 20px - var(--stepper-width));
-  background-color: inherit;
-  font: inherit;
-  appearance: none;
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 6px 10px;
-  display: block;
-
-  &[aria-readonly="true"] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-number-input-stepper {
-  height: 100%;
-  width: var(--stepper-width);
-  flex-direction: column;
-  transition: all .1s linear;
-  display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  &[data-dynamic="true"] {
-    opacity: 0;
-    transform: translateX(40%);
-  }
-}
-
-:is(.tremolo-number-input-wrapper:hover, .tremolo-number-input-wrapper:focus-within) .tremolo-number-input-stepper {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.tremolo-number-input-increment-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;
-  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;
-  }
-}
-
-.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 {
-    --border-color: oklch(52% 0 0);
-
-    &[data-variant="filled"] {
-      --bg: oklch(43.5% 0 0);
-
-      &:hover {
-        --bg: oklch(46.6% 0 0);
-      }
-    }
-  }
-}
-.tremolo-piano {
-  box-sizing: border-box;
-  user-select: none;
-  touch-action: none;
-  display: inline-block;
-  position: relative;
-}
-
-.tremolo-piano-white-key {
-  --bg: oklch(100% 0 0);
-  --color: oklch(0% 0 0);
-  --active-bg: oklch(92% 0 0);
-  --active-color: oklch(0% 0 0);
-  box-sizing: border-box;
-  background-color: var(--bg);
-  -webkit-tap-highlight-color: transparent;
-  color: var(--color);
-  cursor: pointer;
-  z-index: 1;
-  border: 1px solid #555;
-  border-radius: 0 0 8px 8px;
-  position: absolute;
-
-  &[data-active="true"] {
-    background-color: var(--active-bg);
-    color: var(--active-color);
-  }
-
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-piano-black-key {
-  --color: oklch(100% 0 0);
-  --bg: oklch(32% 0 0);
-  --active-color: oklch(100% 0 0);
-  --active-bg: oklch(44% 0 0);
-  box-sizing: border-box;
-  background-color: var(--bg);
-  -webkit-tap-highlight-color: transparent;
-  color: var(--color);
-  cursor: pointer;
-  z-index: 2;
-  border: 1px solid #555;
-  border-radius: 0 0 8px 8px;
-  position: absolute;
-
-  &[data-active="true"] {
-    background-color: var(--active-bg);
-    color: var(--active-color);
-  }
-
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-piano-key-label-wrapper {
-  justify-content: center;
-  align-items: end;
-  height: 100%;
-  display: flex;
-}
-
-.tremolo-piano-key-label {
-  box-sizing: content-box;
-  aspect-ratio: 1;
-  border: 1px solid #888;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  max-width: calc(100% - 16px);
-  height: 10px;
-  margin-bottom: 10px;
-  padding: 4px;
-  font-size: .6rem;
-  display: flex;
-}
-
-:where(.dark, [data-theme="dark"]) {
-  & .tremolo-piano-white-key {
-    --bg: oklch(80% 0 0);
-    --color: oklch(0% 0 0);
-    --active-bg: oklch(72% 0 0);
-    --active-color: oklch(0% 0 0);
-  }
-}
-.tremolo-points-editor {
-  position: relative;
-}
-
-.tremolo-points-editor-background {
-  z-index: 0;
-  position: absolute;
-  inset: 0;
-}
-
-.tremolo-points-editor-container {
-  z-index: 10;
-  position: absolute;
-  inset: 0;
-}
-
-.tremolo-points-editor-point {
-  --color: oklch(59.5% .17548 266.373);
-  cursor: grab;
-  background-color: var(--color);
-  border-radius: 50%;
-  outline: none;
-  position: absolute;
-  translate: -50% -50%;
-
-  &[data-dragging="true"] {
-    cursor: inherit;
-  }
-}
-.tremolo-slider {
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  outline: 0;
-  display: inline-block;
-
-  &[aria-readonly="true"] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-slider-thumb-wrapper {
-  z-index: 100;
-  position: absolute;
-  translate: -50% -50%;
-}
-
-.tremolo-slider-thumb {
-  --color: oklch(59.5% .17548 266.373);
-  background: var(--color);
-  border-radius: 50%;
-  outline: none;
-
-  &[aria-disabled="true"] {
-    background: oklch(50.462% .03307 270.021);
-  }
-
-  &[aria-readonly="false"]:focus {
-    box-shadow: 0px 0px 0px 3px
-      color-mix(in srgb, var(--color) 20%, transparent);
-  }
-}
-
-.tremolo-slider-track {
-  --active: oklch(69.212% .12903 267.633);
-  --inactive: oklch(95% 0 0);
-  position: relative;
-
-  &[data-vertical="false"] {
-    min-width: 50px;
-  }
-
-  &[data-vertical="true"] {
-    min-height: 50px;
-  }
-
-  &:hover {
-    --active: oklch(64.276% .15244 266.932);
-    --inactive: #e0e0e0;
-  }
-
-  &[aria-disabled="true"] {
-    --active: oklch(75.327% .01237 264.547);
-    --inactive: oklch(89.755% .0001 271.152);
-  }
-}
-
-.tremolo-slider-scale {
-  display: block;
-  position: relative;
-}
-
-.tremolo-slider-scale-option {
-  color: oklch(25.197% .00003 271.152);
-  z-index: 10;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: absolute;
-  translate: -50%;
-
-  &[data-vertical="true"] {
-    flex-direction: row;
-    translate: 0 -50%;
-  }
-}
-
-.tremolo-slider-scale-option-mark {
-  background-color: currentColor;
-}
-
-.tremolo-slider-scale-option-label {
-  text-align: right;
-}
-
-:where(.dark, [data-theme="dark"]) {
-  & .tremolo-slider-thumb {
-    --color: oklch(64.5% .17548 266.373);
-
-    &:hover {
-      --color: oklch(67.5% .17548 266.373);
-    }
-  }
-
-  & .tremolo-slider-track {
-    --active: oklch(59.5% .17548 266.373);
-    --inactive: oklch(41.7% 0 0);
-
-    &:hover {
-      --active: oklch(62.5% .17548 266.373);
-      --inactive: oklch(44.7% 0 0);
-    }
-
-    &[aria-disabled="true"] {
-      --active: oklch(75.327% .01237 264.547);
-      --inactive: oklch(89.755% .0001 271.152);
-    }
-  }
-}
-.tremolo-xy-pad {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.tremolo-xy-pad-area {
-  --color: oklch(95% 0 0);
-  background-color: var(--color);
-  position: relative;
-}
-
-.tremolo-xy-pad-thumb-wrapper {
-  z-index: 100;
-  position: absolute;
-  translate: -50% -50%;
-}
-
-.tremolo-xy-pad-thumb {
-  --color: oklch(59.5% .17548 266.373);
-  background-color: var(--color);
-  border-radius: 50%;
-  outline: none;
-
-  &[aria-disabled="true"] {
-    background-color: oklch(50.462% .03307 270.021);
-  }
-
-  &[aria-readonly="false"]:focus {
-    box-shadow: 0px 0px 0px 3px
-      color-mix(in srgb, var(--color) 20%, transparent);
-  }
-}
-
-:where(.dark, [data-theme="dark"]) {
-  & .tremolo-xy-pad-area {
-    --color: oklch(41.7% 0 0);
-  }
-
-  & .tremolo-xy-pad-thumb {
-    --color: oklch(64.5% .17548 266.373);
-
-    &:hover {
-      --color: oklch(67.5% .17548 266.373);
-    }
-  }
-}

package/src/Globals.d.ts

@@ -1,3 +0,0 @@
-declare module '*.css'
-declare module '*.module.css'
-declare module '*.module.scss'

package/src/components/AnimationCanvas/canvas.ts

@@ -1,46 +0,0 @@
-// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
-export const drawingState = [
-  'strokeStyle',
-  'fillStyle',
-  'globalAlpha',
-  'lineWidth',
-  'lineCap',
-  'lineJoin',
-  'miterLimit',
-  'lineDashOffset',
-  'shadowOffsetX',
-  'shadowOffsetY',
-  'shadowBlur',
-  'shadowColor',
-  'globalCompositeOperation',
-  'font',
-  'textAlign',
-  'textBaseline',
-  'direction',
-  'imageSmoothingEnabled',
-] as const
-
-export type DrawingState = (typeof drawingState)[number]
-export type DrawingStateValue = CanvasRenderingContext2D[DrawingState]
-export type DrawingContext = Pick<CanvasRenderingContext2D, DrawingState>
-
-export function isDrawingState(obj: unknown): obj is DrawingState {
-  const d: string[] = [...drawingState]
-  return typeof obj == 'string' && d.includes(obj)
-}
-
-export function setDprConfig(
-  canvas: HTMLCanvasElement,
-  context: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  dpr: number,
-) {
-  canvas.width = width * dpr
-  canvas.height = height * dpr
-  // Reset current transformation matrix to the identity matrix
-  context.setTransform(1, 0, 0, 1, 0, 0)
-  context.scale(dpr, dpr)
-  canvas.style.width = `${width}px`
-  canvas.style.height = `${height}px`
-}

package/src/components/Knob/index.css

@@ -1,77 +0,0 @@
-.tremolo-knob {
-  display: inline-block;
-  cursor: grab;
-  overflow: visible;
-  outline: 0;
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
-
-  &[data-dragging='true'] {
-    cursor: inherit;
-  }
-}
-
-.tremolo-knob-active-line {
-  overflow: visible;
-  color: oklch(69.2% 0.17548 266.373);
-
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(59.5% 0.17548 266.373);
-  }
-
-  :where(.tremolo-knob[aria-disabled='true']) & {
-    color: oklch(50.5% 0.03307 270.021);
-  }
-}
-
-.tremolo-knob-inactive-line {
-  color: oklch(95% 0 0);
-
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(90% 0 0);
-  }
-}
-
-.tremolo-knob-thumb {
-  color: oklch(85.7% 0 0);
-
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(84.5% 0 0);
-  }
-}
-
-.tremolo-knob-thumb-line {
-  color: oklch(94.2% 0 0);
-}
-
-:where(.dark, [data-theme='dark']) {
-  .tremolo-knob-active-line {
-    color: oklch(59.5% 0.17548 266.373);
-
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(65.2% 0.17548 266.373);
-    }
-  }
-
-  .tremolo-knob-inactive-line {
-    color: oklch(41.7% 0 0);
-
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(44.59% 0 0);
-    }
-  }
-
-  .tremolo-knob-thumb {
-    color: oklch(48.6% 0 0);
-
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(51.7% 0 0);
-    }
-  }
-
-  .tremolo-knob-thumb-line {
-    color: oklch(84.2% 0 0);
-  }
-}