@tremolo-ui/react 0.1.6 → 0.2.1

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

@@ -23,14 +23,25 @@ import {
 
 import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { addNoSelect, removeNoSelect } from '../_util'
+import {
+  addUserSelectNone,
+  Cursor,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} 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'
+
+const defaultExternalStyles: SliderProps['externalStyles'] = {
+  userSelectNone: true,
+  cursor: 'pointer',
+}
 
-/** @category Slider */
 export interface SliderProps {
   // required
   value: number
@@ -40,24 +51,38 @@ export interface SliderProps {
   // optional
   step?: number
   skew?: number // TODO | SkewFunction
+  /**
+   * slider orientation
+   * aria-orientation property is also applied.
+   */
   vertical?: boolean
   reverse?: boolean
-  bodyNoSelect?: boolean
+
+  /** Global style to apply when dragged */
+  externalStyles?: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   keyboard?: InputEventOption | null
+
   /**
    * Only the appearance will change.
    * Please consider using with readonly.
+   * aria-disabled property is also applied.
    */
   disabled?: boolean
   /**
    * Make the value unchangeable.
+   * aria-readonly property is also applied.
    */
   readonly?: boolean
   className?: string
@@ -70,9 +95,6 @@ export interface SliderProps {
   // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
 }
 
-/**
- * @category Slider
- */
 export interface SliderMethods {
   focus: () => void
   blur: () => void
@@ -81,11 +103,7 @@ export interface SliderMethods {
 type Props = SliderProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof SliderProps>
 
-/**
- * Customizable slider
- * @category Slider
- */
-export const Slider = forwardRef<SliderMethods, Props>(
+const Root = forwardRef<SliderMethods, Props>(
   (
     {
       value,
@@ -95,7 +113,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
       skew = 1,
       vertical = false,
       reverse = false,
-      bodyNoSelect = true,
+      externalStyles: _externalStyles,
       wheel = ['raw', 1],
       keyboard = ['raw', 1],
       disabled = false,
@@ -119,6 +137,8 @@ export const Slider = forwardRef<SliderMethods, Props>(
     const thumbRef = useRef<SliderThumbMethods>(null)
 
     // --- interpret props ---
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
+
     const p = toFixed(normalizeValue(value, min, max, skew) * 100)
     const rev = toFixed(100 - p)
     // NOTE
@@ -138,9 +158,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
@@ -195,13 +215,15 @@ export const Slider = forwardRef<SliderMethods, Props>(
     )
 
     // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] =
+    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
       useDragWithElement<HTMLDivElement>({
         baseElementRef: trackElementRef,
         onDrag: onDrag,
         onDragStart: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) addNoSelect()
+          if (externalStyles.userSelectNone) addUserSelectNone()
+          if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
+
           thumbRef.current?.focus()
           onDragStart?.(
             clamp(
@@ -213,7 +235,10 @@ export const Slider = forwardRef<SliderMethods, Props>(
         },
         onDragEnd: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) removeNoSelect()
+
+          if (externalStyles.userSelectNone) removeUserSelectNone()
+          if (externalStyles.cursor) resetCursorStyle()
+
           onDragEnd?.(
             clamp(
               stepValue(rawValue(vertical ? ny : nx, min, max, skew), step),
@@ -312,14 +337,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 +353,20 @@ export const Slider = forwardRef<SliderMethods, Props>(
   },
 )
 
+/**
+ * Customizable slider
+ */
+export const Slider = {
+  Root,
+  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/WheelObserver/index.tsx

@@ -1,20 +1,9 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
+import { ComponentProps, ElementType, ReactNode } from 'react'
 
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { composeRefs } from '../_util/composeRefs'
+import { Override } from '../_util/type'
 
-/**
- * @example
- * <WheelObserver
- *   onWheel={(event) => {
- *     event.preventDefault()
- *     console.log(event.deltaY)
- *   }
- * >
- *   <div>Wheel here</div>
- * </WheelObserver>
- */
-
-/** @category WheelObserver */
 export interface WheelObserverProps<T extends ElementType> {
   /**
    * React.ElementType
@@ -26,12 +15,21 @@ export interface WheelObserverProps<T extends ElementType> {
   onWheel?: (event: WheelEvent) => void
 }
 
-/** @category WheelObserver */
+/**
+ * @example
+ * <WheelObserver
+ *   onWheel={(event) => {
+ *     event.preventDefault()
+ *     console.log(event.deltaY)
+ *   }
+ * >
+ *   <div>Wheel here</div>
+ * </WheelObserver>
+ */
 export function WheelObserver<T extends ElementType = 'div'>(
-  props: WheelObserverProps<T> &
-    Omit<ComponentPropsWithoutRef<T>, keyof WheelObserverProps<T>>,
+  props: Override<WheelObserverProps<T>, ComponentProps<T>>,
 ) {
-  const { children, onWheel, as: Component = 'div', ...attributes } = props
+  const { as: Component = 'div', children, onWheel, ref, ...attributes } = props
 
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
@@ -43,7 +41,7 @@ export function WheelObserver<T extends ElementType = 'div'>(
   )
 
   return (
-    <Component ref={wheelRefCallback} {...attributes}>
+    <Component ref={composeRefs(ref, wheelRefCallback)} {...attributes}>
       {children}
     </Component>
   )

package/src/components/XYPad/Area.tsx

@@ -1,8 +1,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
@@ -14,8 +13,7 @@ export interface AreaProps {
   __thumb?: ReactElement
 }
 
-/** @category XYPad */
-export function XYPadArea({
+export function Area({
   width = 120,
   height = 120,
   color,
@@ -24,7 +22,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

@@ -8,8 +8,7 @@ import {
   useRef,
 } from 'react'
 
-/** @category XYPad */
-export interface ThumbProps {
+export interface XYPadThumbProps {
   size?: number | string
   width?: number | string
   height?: number | string
@@ -24,20 +23,20 @@ export interface ThumbProps {
   /** @internal */
   __disabled?: boolean
   /** @internal */
+  __readonly?: boolean
+  /** @internal */
   __css?: CSSProperties
 }
 
-/** @category XYPad */
 export interface XYPadThumbMethods {
   focus: () => void
   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 +49,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
       className,
       style,
       __disabled,
+      __readonly,
       __css,
       ...props
     }: Props,
@@ -87,6 +87,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);
+    }
+  }
+}

package/src/components/XYPad/index.tsx

@@ -3,6 +3,7 @@ import React, {
   ComponentPropsWithoutRef,
   forwardRef,
   ReactElement,
+  Ref,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -21,14 +22,33 @@ import {
 
 import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { addNoSelect, removeNoSelect } from '../_util'
+import {
+  addUserSelectNone,
+  Cursor,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} from '../_util'
+import { composeRefs } from '../_util/composeRefs'
+
+import { Area, XYPadAreaProps } from './Area'
+import { Thumb, XYPadThumbMethods, XYPadThumbProps } from './Thumb'
 
-import { XYPadArea, AreaProps } from './Area'
-import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
+const defaultValueOptions = {
+  skew: 1,
+  step: 1,
+  reverse: false,
+  wheel: ['raw', 1] as InputEventOption,
+  keyboard: ['raw', 1] as InputEventOption,
+}
+
+const defaultExternalStyles: XYPadProps['externalStyles'] = {
+  userSelectNone: true,
+  cursor: 'pointer',
+}
 
 /**
  * Two-dimensional slider component.
- * @category XYPad
  */
 export interface ValueOptions {
   // required
@@ -50,14 +70,18 @@ export interface ValueOptions {
   keyboard?: InputEventOption | null
 }
 
-/** @category XYPad */
 export interface XYPadProps {
   x: ValueOptions
   y: ValueOptions
 
-  bodyNoSelect?: boolean
+  externalStyles?: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
+
   disabled?: boolean
   readonly?: boolean
+
   onChange?: (valueX: number, valueY: number) => void
   onDragStart?: (valueX: number, valueY: number) => void
   onDragEnd?: (valueX: number, valueY: number) => void
@@ -65,35 +89,23 @@ export interface XYPadProps {
   children?: ReactElement | ReactElement[]
 }
 
-/** @category XYPad */
 export interface XYPadMethods {
   focus: () => void
   blur: () => void
-}
-
-const defaultValueOptions = {
-  skew: 1,
-  step: 1,
-  reverse: false,
-  wheel: ['raw', 1] as InputEventOption,
-  keyboard: ['raw', 1] as InputEventOption,
+  original: Ref<HTMLDivElement>
 }
 
 type Props = XYPadProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadProps>
 
-/**
- * Simple XYPad
- * @category XYPad
- */
-export const XYPad = forwardRef<XYPadMethods, Props>(
+export const Root = forwardRef<XYPadMethods, Props>(
   (
     {
       x: _x,
       y: _y,
       className,
       style,
-      bodyNoSelect = true,
+      externalStyles: _externalStyles,
       disabled = false,
       readonly = false,
       onChange,
@@ -116,24 +128,27 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     }, [_y])
 
     // -- state and ref ---
+    const rootRef = useRef<HTMLDivElement>(null)
     const areaElementRef = useRef<HTMLDivElement>(null)
     const thumbRef = useRef<XYPadThumbMethods>(null)
 
     // --- interpret props ---
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
+
     const nx = normalizeValue(x.value, x.min, x.max, x.skew)
     const ny = normalizeValue(y.value, y.min, y.max, y.skew)
     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>')
           }
@@ -216,14 +231,18 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     )
 
     // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] =
+    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
       useDragWithElement<HTMLDivElement>({
         baseElementRef: areaElementRef,
         onDrag: onDrag,
         onDragStart: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) addNoSelect()
+
+          if (externalStyles.userSelectNone) addUserSelectNone()
+          if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
+
           thumbRef.current?.focus()
+
           const valueX = clamp(
             stepValue(rawValue(nx, x.min, x.max, x.skew), x.step),
             x.min,
@@ -234,11 +253,17 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
             y.min,
             y.max,
           )
+
+          // TODO: ドラッグせず、pointer downだけの場合でも、onChange を発火させるべき
+          // onChange()
           onDragStart?.(valueX, valueY)
         },
         onDragEnd: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) removeNoSelect()
+
+          if (externalStyles.userSelectNone) removeUserSelectNone()
+          if (externalStyles.cursor) resetCursorStyle()
+
           const valueX = clamp(
             stepValue(rawValue(nx, x.min, x.max, x.skew), x.step),
             x.min,
@@ -284,6 +309,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
         blur() {
           thumbRef.current?.blur()
         },
+        original: rootRef,
       }
     }, [])
 
@@ -291,10 +317,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         className={clsx('tremolo-xy-pad', className)}
-        ref={(div) => {
-          wheelRefCallback(div)
-          touchMoveRefCallback(div)
-        }}
+        ref={composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback)}
         tabIndex={-1}
         aria-disabled={disabled}
         aria-readonly={readonly}
@@ -323,11 +346,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 +367,14 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
   },
 )
 
-export * from './Thumb'
-export * from './Area'
+/**
+ * Simple XYPad
+ */
+export const XYPad = {
+  Root,
+  Thumb,
+  Area,
+}
+
+export { type XYPadThumbProps, type XYPadThumbMethods } from './Thumb'
+export { type XYPadAreaProps } from './Area'