@tremolo-ui/react 0.1.6 → 0.2.0

package/src/components/XYPad/index.tsx

@@ -23,8 +23,8 @@ import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
-import { XYPadArea, AreaProps } from './Area'
-import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
+import { Area, XYPadAreaProps } from './Area'
+import { Thumb, XYPadThumbMethods, XYPadThumbProps } from './Thumb'
 
 /**
  * Two-dimensional slider component.
@@ -82,11 +82,7 @@ const defaultValueOptions = {
 type Props = XYPadProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadProps>
 
-/**
- * Simple XYPad
- * @category XYPad
- */
-export const XYPad = forwardRef<XYPadMethods, Props>(
+export const XYPadImpl = forwardRef<XYPadMethods, Props>(
   (
     {
       x: _x,
@@ -125,15 +121,15 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     const percentX = toFixed((x.reverse ? 1 - nx : nx) * 100)
     const percentY = toFixed((y.reverse ? 1 - ny : ny) * 100)
 
-    let areaProps: AreaProps = {}
-    let thumbProps: ThumbProps = {}
+    let areaProps: XYPadAreaProps = {}
+    let thumbProps: XYPadThumbProps = {}
     if (children != undefined) {
       React.Children.forEach(children, (child) => {
         if (React.isValidElement(child)) {
-          if (child.type == XYPadThumb) {
-            thumbProps = child.props as ThumbProps
-          } else if (child.type == XYPadArea) {
-            areaProps = child.props as AreaProps
+          if (child.type == Thumb) {
+            thumbProps = child.props as XYPadThumbProps
+          } else if (child.type == Area) {
+            areaProps = child.props as XYPadAreaProps
           } else {
             throw new Error('only <XYPadThumb> or <XYPadArea>')
           }
@@ -323,11 +319,12 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
         {...props}
       >
         <div className="tremolo-xy-pad-area-wrapper" ref={areaElementRef}>
-          <XYPadArea
+          <Area
             __thumb={
-              <XYPadThumb
+              <Thumb
                 ref={thumbRef}
                 __disabled={disabled}
+                __readonly={readonly}
                 __css={{
                   top: `${percentY}%`,
                   left: `${percentX}%`,
@@ -343,5 +340,14 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
   },
 )
 
-export * from './Thumb'
-export * from './Area'
+/**
+ * Simple XYPad
+ * @category XYPad
+ */
+export const XYPad = Object.assign(XYPadImpl, {
+  Thumb,
+  Area,
+})
+
+export { type XYPadThumbProps, type XYPadThumbMethods } from './Thumb'
+export { type XYPadAreaProps } from './Area'

package/src/index.ts

@@ -7,8 +7,8 @@ import './components/Slider/index.css'
 import './components/XYPad/index.css'
 
 export {
-  type AbsoluteSizingProps,
   AnimationCanvas,
+  type AbsoluteSizingProps,
   type AnimationCanvasProps,
   type CommonProps,
   type DrawFunction,
@@ -17,65 +17,53 @@ export {
 } from './components/AnimationCanvas'
 export {
   AnimationKnob,
-  type AnimationKnobMethods,
   type AnimationKnobProps,
+  type AnimationKnobMethods,
 } from './components/AnimationKnob'
 export { DragObserver, type DragObserverProps } from './components/DragObserver'
-export { Knob, type KnobMethods, type KnobProps } from './components/Knob'
+export { Knob, type KnobProps, type KnobMethods } from './components/Knob'
 export {
-  DecrementStepper,
-  type DecrementStepperProps,
-  IncrementStepper,
-  type IncrementStepperProps,
   NumberInput,
-  type NumberInputMethods,
   type NumberInputProps,
-  Stepper,
+  type NumberInputMethods,
   type StepperProps,
+  type IncrementStepperProps,
+  type DecrementStepperProps,
 } from './components/NumberInput'
 export {
   Piano,
+  getNoteRangeArray,
+  SHORTCUTS,
   type PianoProps,
   type PianoMethods,
-  getNoteRangeArray,
-  WhiteKey,
-  BlackKey,
   type KeyProps,
   type KeyMethods,
-  KeyLabel,
   type KeyLabelProps,
-  SHORTCUTS,
   type KeyboardShortcuts,
 } from './components/Piano'
 export {
-  Scale,
-  ScaleOption,
+  Slider,
+  useSliderContext,
   type ScaleOptionProps,
   type ScaleProps,
-  Slider,
   type SliderMethods,
   type SliderProps,
-  SliderThumb,
   type SliderThumbMethods,
   type SliderThumbProps,
-  SliderTrack,
   type SliderTrackProps,
-  useSliderContext,
 } from './components/Slider'
 export {
   WheelObserver,
   type WheelObserverProps,
 } from './components/WheelObserver'
 export {
-  type AreaProps,
-  type ThumbProps,
-  type ValueOptions,
   XYPad,
-  XYPadArea,
-  type XYPadMethods,
   type XYPadProps,
-  XYPadThumb,
+  type XYPadMethods,
+  type XYPadAreaProps,
+  type XYPadThumbProps,
   type XYPadThumbMethods,
+  type ValueOptions,
 } from './components/XYPad'
 
 // hooks

package/src/styles/global.css

@@ -1,7 +1,3 @@
-:root {
-  --tremolo-theme-color: oklch(59.5% 0.17548 266.373);
-}
-
 .tremolo-no-select {
   user-select: none;
 }