@tremolo-ui/react 0.1.6 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [

package/src/components/Knob/index.css

@@ -14,7 +14,7 @@
   color: oklch(69.2% 0.17548 266.373);
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: var(--tremolo-theme-color);
+    color: oklch(59.5% 0.17548 266.373);
   }
 
   :where(.tremolo-knob[aria-disabled='true']) & {
@@ -22,43 +22,43 @@
   }
 }
 
-:where(.dark, [data-theme='dark']) {
-  .tremolo-knob-active-line {
-    color: var(--tremolo-theme-color);
+.tremolo-knob-inactive-line {
+  color: oklch(95% 0 0);
 
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(65.2% 0.17548 266.373);
-    }
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(90% 0 0);
   }
 }
 
-.tremolo-knob-inactive-line {
-  color: oklch(95% 0 0);
+.tremolo-knob-thumb {
+  color: oklch(85.7% 0 0);
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(90% 0 0);
+    color: oklch(84.5% 0 0);
   }
 }
 
+.tremolo-knob-thumb-line {
+  color: oklch(94.2% 0 0);
+}
+
 :where(.dark, [data-theme='dark']) {
-  .tremolo-knob-inactive-line {
-    color: oklch(41.7% 0 0);
+  .tremolo-knob-active-line {
+    color: oklch(59.5% 0.17548 266.373);
 
     :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(44.59% 0 0);
+      color: oklch(65.2% 0.17548 266.373);
     }
   }
-}
 
-.tremolo-knob-thumb {
-  color: oklch(85.7% 0 0);
+  .tremolo-knob-inactive-line {
+    color: oklch(41.7% 0 0);
 
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(84.5% 0 0);
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(44.59% 0 0);
+    }
   }
-}
 
-:where(.dark, [data-theme='dark']) {
   .tremolo-knob-thumb {
     color: oklch(48.6% 0 0);
 
@@ -66,13 +66,7 @@
       color: oklch(51.7% 0 0);
     }
   }
-}
 
-.tremolo-knob-thumb-line {
-  color: oklch(94.2% 0 0);
-}
-
-:where(.dark, [data-theme='dark']) {
   .tremolo-knob-thumb-line {
     color: oklch(84.2% 0 0);
   }

package/src/components/Knob/index.tsx

@@ -286,13 +286,6 @@ export const Knob = forwardRef<KnobMethods, Props>(
             strokeWidth={lineWeight}
           />
         )}
-        <path
-          className={clsx('tremolo-knob-active-line', classes?.activeLine)}
-          d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`}
-          fill="none"
-          stroke={activeLine || 'currentColor'}
-          strokeWidth={lineWeight}
-        />
         {startValue < max && (
           <path
             className={clsx(
@@ -305,6 +298,13 @@ export const Knob = forwardRef<KnobMethods, Props>(
             strokeWidth={lineWeight}
           />
         )}
+        <path
+          className={clsx('tremolo-knob-active-line', classes?.activeLine)}
+          d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`}
+          fill="none"
+          stroke={activeLine || 'currentColor'}
+          strokeWidth={lineWeight}
+        />
         {/* thumb */}
         <svg className={clsx('tremolo-knob-thumb', classes?.thumb)}>
           <circle

package/src/components/NumberInput/index.css

@@ -1,7 +1,8 @@
 .tremolo-number-input-wrapper {
   --border-radius: 4px;
   --stepper-width: 20px;
-  --active-color: var(--tremolo-theme-color);
+  --active-color: oklch(59.5% 0.17548 266.373);
+  --border-color: oklch(81% 0 0);
 
   display: inline-flex;
   flex-direction: row;
@@ -9,13 +10,13 @@
   width: 140px;
   height: min-content;
   border-style: solid;
-  border-color: #c1c1c1;
+  border-color: var(--border-color);
   border-width: 0px;
   outline: none;
   transition: all 0.1s;
 
   &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
-    border-color: #f34343;
+    border-color: oklch(64.245% 0.21266 25.499);
   }
 
   &[data-variant='outline'] {
@@ -23,29 +24,30 @@
     border-radius: var(--border-radius);
 
     &:hover {
-      border-color: #909090;
+      --border-color: oklch(65.335% 0 0);
     }
 
     &:focus-within {
-      border-color: var(--active-color);
+      --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-width: 1px;
     border-radius: var(--border-radius);
     border-color: transparent;
-    background-color: #edf2f7;
+    background-color: var(--bg);
 
     &:hover {
-      background-color: #e4e9ee;
+      --bg: oklch(93.166% 0 0);
     }
 
     &:focus-within {
       background-color: inherit;
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 0px 0px 2px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
@@ -55,11 +57,11 @@
     border-bottom-width: 1px;
 
     &:hover {
-      border-color: #909090;
+      --border-color: oklch(65.335% 0 0);
     }
 
     &:focus-within {
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 2px 0px 0px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
@@ -116,7 +118,7 @@
 .tremolo-number-input-increment-stepper {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-inline-start-color: #ccc;
+  border-inline-start-color: oklch(84.522% 0 0);
   font-size: calc(0.75rem);
   display: flex;
   justify-content: center;
@@ -128,7 +130,7 @@
   border-top-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
-    background-color: #3443560e;
+    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
   }
 
   &[aria-disabled='true'] {
@@ -143,8 +145,8 @@
 .tremolo-number-input-decrement-stepper {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-inline-start-color: #ccc;
-  border-top: 1px solid #ccc;
+  border-inline-start-color: oklch(84.522% 0 0);
+  border-top: 1px solid oklch(84.522% 0 0);
   font-size: calc(0.75rem);
   display: flex;
   justify-content: center;
@@ -156,7 +158,7 @@
   border-bottom-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
-    background-color: #3443560e;
+    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
   }
 
   &[aria-disabled='true'] {
@@ -167,3 +169,17 @@
     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);
+      }
+    }
+  }
+}

package/src/components/NumberInput/index.tsx

@@ -4,7 +4,10 @@ import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
 import { InputEventOption } from '@tremolo-ui/functions'
 
 import { NumberInputProvider } from './context'
+import { DecrementStepper } from './DecrementStepper'
+import { IncrementStepper } from './IncrementStepper'
 import { InternalInput } from './InternalInput'
+import { Stepper } from './Stepper'
 import { Units } from './type'
 
 /*
@@ -18,11 +21,11 @@ export interface NumberInputProps {
   value: number | string
 
   /**
-   * @default Number.MIN_SAFE_INTEGER
+   * Number.MIN_SAFE_INTEGER
    */
   min?: number
   /**
-   * @default Number.MAX_SAFE_INTEGER
+   * Number.MAX_SAFE_INTEGER
    */
   max?: number
   step?: number
@@ -94,11 +97,7 @@ export interface NumberInputMethods {
 type Props = NumberInputProps &
   Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>
 
-/**
- * Input with some useful functions for entering numerical values.
- * @category NumberInput
- */
-export const NumberInput = forwardRef<NumberInputMethods, Props>(
+const NumberInputImpl = forwardRef<NumberInputMethods, Props>(
   (
     {
       value,
@@ -174,7 +173,17 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
   },
 )
 
-export * from './Stepper'
-export * from './IncrementStepper'
-export * from './DecrementStepper'
+/**
+ * Input with some useful functions for entering numerical values.
+ * @category NumberInput
+ */
+export const NumberInput = Object.assign(NumberInputImpl, {
+  Stepper,
+  IncrementStepper,
+  DecrementStepper,
+})
+
+export { type StepperProps } from './Stepper'
+export { type IncrementStepperProps } from './IncrementStepper'
+export { type DecrementStepperProps } from './DecrementStepper'
 export { type Units } from './type'

package/src/components/Piano/index.css

@@ -9,7 +9,7 @@
 .tremolo-piano-white-key {
   --bg: oklch(100% 0 0);
   --color: oklch(0% 0 0);
-  --active-bg: oklch(90% 0 0);
+  --active-bg: oklch(92% 0 0);
   --active-color: oklch(0% 0 0);
 
   box-sizing: border-box;
@@ -34,9 +34,9 @@
 
 .tremolo-piano-black-key {
   --color: oklch(100% 0 0);
-  --bg: oklch(32.109% 0.00004 271.152);
+  --bg: oklch(32% 0 0);
   --active-color: oklch(100% 0 0);
-  --active-bg: oklch(47.836% 0.00005 271.152);
+  --active-bg: oklch(44% 0 0);
 
   box-sizing: border-box;
   position: absolute;
@@ -82,16 +82,9 @@
 
 :where(.dark, [data-theme='dark']) {
   .tremolo-piano-white-key {
-    --bg: oklch(48.193% 0.00005 271.152);
-    --color: oklch(100% 0 0);
-    --active-bg: oklch(52.78% 0.00006 271.152);
-    --active-color: oklch(100% 0 0);
-  }
-
-  .tremolo-piano-black-key {
-    --color: oklch(100% 0 0);
-    --bg: oklch(32.109% 0 0);
-    --active-color: oklch(100% 0 0);
-    --active-bg: oklch(38.666% 0.00004 271.152);
+    --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/Piano/index.tsx

@@ -35,6 +35,7 @@ import {
   WhiteKey,
 } from './key'
 import { KeyboardShortcuts } from './keyboardShortcuts'
+import { KeyLabel } from './KeyLabel'
 
 /**
  * [noteRange.first, noteRange.first + 1 ..., noteRange.last]
@@ -84,11 +85,7 @@ export interface PianoMethods {
 type Props = PianoProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>
 
-/**
- * Customizable piano component.
- * @category Piano
- */
-export const Piano = forwardRef<PianoMethods, Props>(
+const PianoImpl = forwardRef<PianoMethods, Props>(
   (
     {
       noteRange,
@@ -345,6 +342,12 @@ export const Piano = forwardRef<PianoMethods, Props>(
   },
 )
 
+/**
+ * Customizable piano component.
+ * @category Piano
+ */
+export const Piano = Object.assign(PianoImpl, { WhiteKey, BlackKey, KeyLabel })
+
 export { type KeyboardShortcuts, SHORTCUTS } from './keyboardShortcuts'
-export { WhiteKey, BlackKey, type KeyProps, type KeyMethods } from './key'
-export { KeyLabel, type KeyLabelProps } from './KeyLabel'
+export { type KeyProps, type KeyMethods } from './key'
+export { type KeyLabelProps } from './KeyLabel'

package/src/components/Slider/Thumb.tsx

@@ -35,7 +35,7 @@ export interface SliderThumbMethods {
 export const defaultThumbSize = 22
 
 /** @category Slider */
-export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
+export const Thumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
   (
     {
       size,

package/src/components/Slider/Track.tsx

@@ -29,7 +29,7 @@ export interface SliderTrackProps {
 }
 
 /** @category Slider */
-export function SliderTrack({
+export function Track({
   length = defaultLength,
   thickness = defaultThickness,
   active,

package/src/components/Slider/index.css

@@ -16,14 +16,14 @@
 }
 
 .tremolo-slider-thumb {
-  --color: var(--tremolo-theme-color);
+  --color: oklch(59.5% 0.17548 266.373);
 
   background: var(--color);
   border-radius: 50%;
   outline: none;
 
   &[aria-disabled='true'] {
-    background: #5d6478;
+    background: oklch(50.462% 0.03307 270.021);
   }
 
   &[aria-readonly='false']:focus {
@@ -33,8 +33,8 @@
 }
 
 .tremolo-slider-track {
-  --active: #7998ec;
-  --inactive: #eee;
+  --active: oklch(69.212% 0.12903 267.633);
+  --inactive: oklch(95% 0 0);
 
   position: relative;
 
@@ -47,13 +47,13 @@
   }
 
   &:hover {
-    --active: #6387e9;
+    --active: oklch(64.276% 0.15244 266.932);
     --inactive: #e0e0e0;
   }
 
   &[aria-disabled='true'] {
-    --active: #858890;
-    --inactive: #ddd;
+    --active: oklch(75.327% 0.01237 264.547);
+    --inactive: oklch(89.755% 0.0001 271.152);
   }
 }
 
@@ -64,7 +64,7 @@
 
 .tremolo-slider-scale-option {
   display: flex;
-  color: #222;
+  color: oklch(25.197% 0.00003 271.152);
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -85,3 +85,28 @@
 .tremolo-slider-scale-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/Slider/index.tsx

@@ -27,8 +27,9 @@ import { addNoSelect, removeNoSelect } from '../_util'
 
 import { SliderProvider } from './context'
 import { Scale } from './Scale'
-import { SliderThumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
-import { SliderTrack, SliderTrackProps } from './Track'
+import { ScaleOption } from './ScaleOption'
+import { Thumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
+import { Track, SliderTrackProps } from './Track'
 
 /** @category Slider */
 export interface SliderProps {
@@ -81,11 +82,7 @@ export interface SliderMethods {
 type Props = SliderProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof SliderProps>
 
-/**
- * Customizable slider
- * @category Slider
- */
-export const Slider = forwardRef<SliderMethods, Props>(
+const SliderImpl = forwardRef<SliderMethods, Props>(
   (
     {
       value,
@@ -138,9 +135,9 @@ export const Slider = forwardRef<SliderMethods, Props>(
     if (children != undefined) {
       React.Children.forEach(children, (child) => {
         if (React.isValidElement(child)) {
-          if (child.type == SliderThumb) {
+          if (child.type == Thumb) {
             thumbProps = child.props as SliderThumbProps
-          } else if (child.type == SliderTrack) {
+          } else if (child.type == Track) {
             trackProps = child.props as SliderTrackProps
           } else if (child.type == Scale) {
             scaleComponent = child
@@ -312,14 +309,10 @@ export const Slider = forwardRef<SliderMethods, Props>(
             }}
           >
             <div className="tremolo-slider-track-wrapper" ref={trackElementRef}>
-              <SliderTrack
+              <Track
                 __percent={percent}
                 __thumb={
-                  <SliderThumb
-                    ref={thumbRef}
-                    __percent={percent}
-                    {...thumbProps}
-                  />
+                  <Thumb ref={thumbRef} __percent={percent} {...thumbProps} />
                 }
                 {...trackProps}
               />
@@ -332,13 +325,20 @@ export const Slider = forwardRef<SliderMethods, Props>(
   },
 )
 
+/**
+ * Customizable slider
+ * @category Slider
+ */
+export const Slider = Object.assign(SliderImpl, {
+  Thumb,
+  Track,
+  Scale,
+  ScaleOption,
+})
+
 export { useSliderContext } from './context'
-export {
-  SliderThumb,
-  type SliderThumbMethods,
-  type SliderThumbProps,
-} from './Thumb'
-export { SliderTrack, type SliderTrackProps } from './Track'
-export { Scale, type ScaleProps } from './Scale'
-export { ScaleOption, type ScaleOptionProps } from './ScaleOption'
+export { type SliderThumbMethods, type SliderThumbProps } from './Thumb'
+export { type SliderTrackProps } from './Track'
+export { type ScaleProps } from './Scale'
+export { type ScaleOptionProps } from './ScaleOption'
 export { type ScaleOptions, type ScaleType } from './type'

package/src/components/XYPad/Area.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
 
 /** @category XYPad */
-export interface AreaProps {
+export interface XYPadAreaProps {
   width?: number | string
   height?: number | string
   color?: string
@@ -15,7 +15,7 @@ export interface AreaProps {
 }
 
 /** @category XYPad */
-export function XYPadArea({
+export function Area({
   width = 120,
   height = 120,
   color,
@@ -24,7 +24,8 @@ export function XYPadArea({
   style,
   __thumb,
   ...props
-}: AreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AreaProps>) {
+}: XYPadAreaProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadAreaProps>) {
   return (
     <div
       className={clsx('tremolo-xy-pad-area', className)}

package/src/components/XYPad/Thumb.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react'
 
 /** @category XYPad */
-export interface ThumbProps {
+export interface XYPadThumbProps {
   size?: number | string
   width?: number | string
   height?: number | string
@@ -24,6 +24,8 @@ export interface ThumbProps {
   /** @internal */
   __disabled?: boolean
   /** @internal */
+  __readonly?: boolean
+  /** @internal */
   __css?: CSSProperties
 }
 
@@ -33,11 +35,11 @@ export interface XYPadThumbMethods {
   blur: () => void
 }
 
-type Props = ThumbProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof ThumbProps>
+type Props = XYPadThumbProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadThumbProps>
 
 /** @category XYPad */
-export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
+export const Thumb = forwardRef<XYPadThumbMethods, Props>(
   (
     {
       size,
@@ -50,6 +52,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
       className,
       style,
       __disabled,
+      __readonly,
       __css,
       ...props
     }: Props,
@@ -87,6 +90,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
             tabIndex={0}
             aria-disabled={__disabled}
+            aria-readonly={__readonly}
             style={{
               ...{ '--color': color },
               width: size ?? width,

package/src/components/XYPad/index.css

@@ -4,7 +4,7 @@
 }
 
 .tremolo-xy-pad-area {
-  --color: #eee;
+  --color: oklch(95% 0 0);
 
   position: relative;
   background-color: var(--color);
@@ -17,18 +17,32 @@
 }
 
 .tremolo-xy-pad-thumb {
-  --color: var(--tremolo-theme-color);
+  --color: oklch(59.5% 0.17548 266.373);
 
   border-radius: 50%;
   outline: none;
   background-color: var(--color);
 
   &[aria-disabled='true'] {
-    background-color: #5d6478;
+    background-color: oklch(50.462% 0.03307 270.021);
   }
 
-  &:focus {
+  &[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);
+    }
+  }
+}