@tremolo-ui/react 0.5.0 → 0.7.0

package/src/components/NumberInput/stepperButton.tsx

@@ -1,90 +0,0 @@
-import clsx from 'clsx'
-import {
-  ComponentPropsWithoutRef,
-  CSSProperties,
-  ReactNode,
-  useCallback,
-} from 'react'
-
-import { useLongPress } from '../../hooks/useLongPress'
-
-import { useNumberInputContext, useStepperContext } from './context'
-
-export interface StepperButtonProps {
-  className?: string
-  style?: CSSProperties
-  /** Replaces the default arrow. Size it with the `--stepper-icon-size` variable. */
-  children?: ReactNode
-}
-
-type Props = StepperButtonProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof StepperButtonProps>
-
-/**
- * Shared body of `IncrementStepper` and `DecrementStepper`: the two differ only
- * in which way they move the value and which arrow they draw.
- */
-export function StepperButton({
-  direction,
-  variant,
-  icon,
-  className,
-  style,
-  children,
-  onPointerDown,
-  ...props
-}: Props & {
-  direction: 1 | -1
-  variant: 'increment' | 'decrement'
-  icon: ReactNode
-}) {
-  const { step, readonly, atMin, atMax, nudge } = useNumberInputContext()
-  const stepper = useStepperContext()
-
-  const press = useLongPress(
-    useCallback(() => {
-      // Once the pointer has actually travelled, the drag on `Stepper` owns the
-      // value; repeating on top of it would move it twice.
-      if (stepper?.draggingRef.current) return
-      nudge(direction, ['raw', step])
-    }, [stepper, nudge, direction, step]),
-  )
-
-  return (
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    <div
-      className={clsx(`tremolo-number-input-${variant}-stepper`, className)}
-      role="button"
-      tabIndex={-1}
-      // A bare arrow has no accessible name of its own. Overridable, since a
-      // caller may need it in their own language.
-      aria-label={direction > 0 ? 'Increment' : 'Decrement'}
-      aria-disabled={direction > 0 ? atMax : atMin}
-      aria-readonly={readonly}
-      style={style}
-      onPointerDown={(event) => {
-        if (!readonly) press()
-        onPointerDown?.(event)
-      }}
-      {...props}
-    >
-      {children ?? icon}
-    </div>
-  )
-}
-
-export function StepperArrow({ up }: { up: boolean }) {
-  return (
-    <svg
-      className="tremolo-number-input-stepper-icon"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points={up ? '18 15 12 9 6 15' : '6 9 12 15 18 9'} />
-    </svg>
-  )
-}

package/src/components/Piano/index.css

@@ -1,90 +0,0 @@
-.tremolo-piano {
-  display: inline-block;
-  box-sizing: border-box;
-  user-select: none;
-  touch-action: none;
-  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;
-  position: absolute;
-  background-color: var(--bg);
-  -webkit-tap-highlight-color: transparent;
-  color: var(--color);
-  border: 1px solid #555;
-  border-radius: 0px 0px 8px 8px;
-  cursor: pointer;
-  z-index: 1;
-
-  &[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;
-  position: absolute;
-  background-color: var(--bg);
-  -webkit-tap-highlight-color: transparent;
-  color: var(--color);
-  border: 1px solid #555;
-  border-radius: 0px 0px 8px 8px;
-  cursor: pointer;
-  z-index: 2;
-
-  &[data-active='true'] {
-    background-color: var(--active-bg);
-    color: var(--active-color);
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-piano-key-label-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: end;
-  height: 100%;
-}
-
-.tremolo-piano-key-label {
-  box-sizing: content-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.6rem;
-  height: 10px;
-  margin-bottom: 10px;
-  padding: 4px;
-  border-radius: 4px;
-  border: 1px solid #888;
-  aspect-ratio: 1;
-  max-width: calc(100% - 16px);
-}
-
-: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);
-  }
-}

package/src/components/PointsEditor/index.css

@@ -1,35 +0,0 @@
-.tremolo-points-editor {
-  position: relative;
-}
-
-.tremolo-points-editor-background {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-}
-
-.tremolo-points-editor-container {
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-}
-
-.tremolo-points-editor-point {
-  --color: oklch(59.5% 0.17548 266.373);
-
-  position: absolute;
-  border-radius: 50%;
-  outline: none;
-  cursor: grab;
-  background-color: var(--color);
-  translate: -50% -50%;
-
-  &[data-dragging='true'] {
-    cursor: inherit;
-  }
-
-  /* Dragging does nothing while readonly, so do not offer to. */
-  &[aria-readonly='true'] {
-    cursor: default;
-  }
-}

package/src/components/Slider/index.css

@@ -1,125 +0,0 @@
-.tremolo-slider {
-  /* Half the thumb size. The thumb overhangs the ends of the track, so the
-     slider reserves room for it. Override this when using a different size. */
-  --thumb-size: 22px;
-
-  display: inline-flex;
-  flex-direction: column;
-  margin: calc(var(--thumb-size) / 2);
-  cursor: pointer;
-  outline: 0;
-  -webkit-tap-highlight-color: transparent;
-
-  &[data-vertical='true'] {
-    flex-direction: row;
-  }
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-slider-thumb-wrapper {
-  position: absolute;
-  translate: -50% -50%;
-  z-index: 100;
-}
-
-.tremolo-slider-thumb {
-  --color: oklch(59.5% 0.17548 266.373);
-
-  width: var(--thumb-size);
-  height: var(--thumb-size);
-
-  background: var(--color);
-  border-radius: 50%;
-  outline: none;
-
-  &[aria-disabled='true'] {
-    background: oklch(50.462% 0.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% 0.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% 0.15244 266.932);
-    --inactive: #e0e0e0;
-  }
-
-  &[aria-disabled='true'] {
-    --active: oklch(75.327% 0.01237 264.547);
-    --inactive: oklch(89.755% 0.0001 271.152);
-  }
-}
-
-.tremolo-slider-marks {
-  display: block;
-  position: relative;
-}
-
-.tremolo-slider-marks-option {
-  display: flex;
-  color: oklch(25.197% 0.00003 271.152);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  translate: -50% 0;
-  z-index: 10;
-
-  &[data-vertical='true'] {
-    flex-direction: row;
-    translate: 0 -50%;
-  }
-}
-
-.tremolo-slider-marks-option-mark {
-  background-color: currentColor;
-}
-
-.tremolo-slider-marks-option-label {
-  text-align: right;
-}
-
-:where(.dark, [data-theme='dark']) {
-  .tremolo-slider-thumb {
-    --color: oklch(64.5% 0.17548 266.373);
-
-    &:hover {
-      --color: oklch(67.5% 0.17548 266.373);
-    }
-  }
-
-  .tremolo-slider-track {
-    --active: oklch(59.5% 0.17548 266.373);
-    --inactive: oklch(41.7% 0 0);
-
-    &:hover {
-      --active: oklch(62.5% 0.17548 266.373);
-      --inactive: oklch(44.7% 0 0);
-    }
-
-    &[aria-disabled='true'] {
-      --active: oklch(75.327% 0.01237 264.547);
-      --inactive: oklch(89.755% 0.0001 271.152);
-    }
-  }
-}

package/src/components/XYPad/index.css

@@ -1,60 +0,0 @@
-.tremolo-xy-pad {
-  /* Half the thumb size. The thumb overhangs the edges of the area, so the
-     pad reserves room for it. Override this when using a different size. */
-  --thumb-size: 22px;
-
-  display: inline-block;
-  margin: calc(var(--thumb-size) / 2);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-xy-pad-area {
-  --color: oklch(95% 0 0);
-
-  position: relative;
-  background-color: var(--color);
-}
-
-.tremolo-xy-pad-thumb-wrapper {
-  position: absolute;
-  translate: -50% -50%;
-  z-index: 100;
-}
-
-.tremolo-xy-pad-thumb {
-  --color: oklch(59.5% 0.17548 266.373);
-
-  width: var(--thumb-size);
-  height: var(--thumb-size);
-  border-radius: 50%;
-  outline: none;
-  background-color: var(--color);
-
-  &[aria-disabled='true'] {
-    background-color: oklch(50.462% 0.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% 0.17548 266.373);
-
-    &:hover {
-      --color: oklch(67.5% 0.17548 266.373);
-    }
-  }
-}

package/src/components/_util/index.ts

@@ -1,28 +0,0 @@
-export function addUserSelectNone() {
-  window.document.body.classList.add('tremolo-user-select-none')
-}
-
-export function removeUserSelectNone() {
-  window.document.body.classList.remove('tremolo-user-select-none')
-}
-
-const cursorStyles = {
-  grabbing: 'tremolo-cursor-grabbing',
-  grab: 'tremolo-cursor-grab',
-  pointer: 'tremolo-cursor-pointer',
-  move: 'tremolo-cursor-move',
-  none: 'tremolo-cursor-none',
-}
-
-export type Cursor = keyof typeof cursorStyles
-
-export function setCursorStyle(type: Cursor) {
-  resetCursorStyle()
-  window.document.body.classList.add(cursorStyles[type])
-}
-
-export function resetCursorStyle() {
-  Object.values(cursorStyles).forEach((s) => {
-    window.document.body.classList.remove(s)
-  })
-}

package/src/styles/global.css

@@ -1,19 +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;
-}