@tremolo-ui/react 0.5.0 → 0.7.0

package/src/components/Slider/Marks.tsx

@@ -1,26 +1,42 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
-import { xor } from '@tremolo-ui/functions'
+import { cssLength } from '../_util/css-length'
+import { Placement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
 import { MarksOption } from './MarksOption'
 import { generateOptionsList, MarksOptions } from './type'
 
-export interface MarksProps {
+import type { CSSVariables } from '../../css-variables'
+
+export interface SliderMarksProps {
+  /**
+   * Space between the marks and the track. Sets `--gap`; the theme's own
+   * spacing stands when this is omitted.
+   */
   gap?: number | string
+  /**
+   * Build the marks instead of writing `Slider.MarksOption` out: a number puts
+   * one every that many, `'step'` one every `step`, and `{ per, mark, label }`
+   * also turns the mark or the label off for all of them. `children` is
+   * ignored while it is set.
+   *
+   * `'step'` makes one per step, which is a great many for a fine `step`.
+   */
   options?: MarksOptions
-  children?: ReactNode
+
+  style?: CSSProperties & CSSVariables<'gap'>
 }
 
 export function Marks({
-  gap = 6,
+  gap,
   options,
   children,
   className,
   style,
   ...props
-}: MarksProps & Omit<ComponentPropsWithoutRef<'div'>, keyof MarksProps>) {
+}: SliderMarksProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksProps>) {
   const min = useSliderContext((s) => s.min)
   const max = useSliderContext((s) => s.max)
   const step = useSliderContext((s) => s.step)
@@ -30,23 +46,36 @@ export function Marks({
   const optionsList = options
     ? generateOptionsList(options, min, max, step)
     : []
-  if (xor(vertical, reverse)) optionsList.reverse()
+  if (vertical !== reverse) optionsList.reverse()
 
   return (
     <div
-      className={clsx('tremolo-slider-marks', className)}
-      style={{
-        marginLeft: vertical ? gap : undefined,
-        marginTop: !vertical ? gap : undefined,
-        ...style,
-      }}
+      className={className}
+      data-orientation={vertical ? 'vertical' : 'horizontal'}
+      style={
+        {
+          '--gap': cssLength(gap),
+          // Each option inside is placed against this box.
+          position: 'relative',
+          ...style,
+        } as CSSProperties
+      }
       {...props}
     >
-      {options
-        ? optionsList.map(({ value, type }, index) => {
-            return <MarksOption key={index} value={value} type={type} />
-          })
-        : children}
+      <Placement name="Slider.Marks">
+        {options
+          ? optionsList.map(({ value, mark, label }, index) => {
+              return (
+                <MarksOption
+                  key={index}
+                  value={value}
+                  mark={mark}
+                  label={label ? undefined : null}
+                />
+              )
+            })
+          : children}
+      </Placement>
     </div>
   )
 }

package/src/components/Slider/MarksOption.tsx

@@ -1,51 +1,68 @@
-import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
 
-import { toFixed, xor } from '@tremolo-ui/functions'
+import { toFixed } from '@tremolo-ui/functions'
+
+import { cssLength } from '../_util/css-length'
+import { useCheckPlacement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
-import { MarksType } from './type'
 
-export interface MarksOptionProps {
-  // required
+import type { CSSVariables } from '../../css-variables'
+
+export interface SliderMarksOptionProps {
+  /** Where the mark sits, on the same scale as the thumb. */
   value: number
 
-  // optional
-  type?: MarksType
-  /** Display text instead of value. */
-  label?: string
-  /** mark thickness */
+  /**
+   * Draw the mark itself. Turn it off to show the label alone.
+   * @default true
+   */
+  mark?: boolean
+  /**
+   * Text shown next to the mark. Leave it out to show the value; `null` leaves
+   * the label out, and an empty string draws an empty one.
+   */
+  label?: number | string | null
+  /** Thickness of the mark. Sets `--thickness`. */
   thickness?: number | string
-  /** mark length */
+  /** Length of the mark. Sets `--length`. */
   length?: number | string
-  /** Gap between mark and label. */
+  /** Space between the mark and the label. Sets `--gap`. */
   gap?: number | string
+  /** Width of the label. Sets `--label-width`. */
   labelWidth?: number | string
+  /** Classes for the mark and the label inside the option. */
   classes?: {
     mark?: string
     label?: string
   }
+  /** Styles for the mark and the label inside the option. */
   styles?: {
     mark?: CSSProperties
     label?: CSSProperties
   }
+
+  style?: CSSProperties &
+    CSSVariables<'thickness' | 'length' | 'gap' | 'label-width' | 'translate'>
 }
 
 export function MarksOption({
   value,
-  type = 'mark-number',
+  mark = true,
   label,
-  thickness = 1,
-  length = '0.5rem',
-  gap = 2,
+  thickness,
+  length,
+  gap,
   labelWidth,
   classes,
   styles,
   className,
   style,
   ...props
-}: MarksOptionProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof MarksOptionProps>) {
+}: SliderMarksOptionProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksOptionProps>) {
+  useCheckPlacement('Slider.MarksOption', 'Slider.Marks')
+
   const min = useSliderContext((s) => s.min)
   const max = useSliderContext((s) => s.max)
   const scale = useSliderContext((s) => s.scale)
@@ -56,44 +73,46 @@ export function MarksOption({
     (value: number) => {
       // The marks have to sit on the same curve the thumb runs along.
       const percent = scale.normalize(value, min, max) * 100
-      return toFixed(xor(vertical, reverse) ? 100 - percent : percent)
+      return toFixed(vertical !== reverse ? 100 - percent : percent)
     },
     [vertical, reverse, max, min, scale],
   )
 
   return (
     <div
-      className={clsx('tremolo-slider-marks-option', className)}
-      style={{
-        left: !vertical ? `${calcPercent(value)}%` : undefined,
-        top: vertical ? `${calcPercent(value)}%` : undefined,
-        ...style,
-      }}
-      data-vertical={vertical}
+      className={className}
+      style={
+        {
+          // The mark and the label read these, so they are set once here.
+          '--thickness': cssLength(thickness),
+          '--length': cssLength(length),
+          '--gap': cssLength(gap),
+          '--label-width': cssLength(labelWidth),
+          // The mechanics of the position below, as on the thumb.
+          position: 'absolute',
+          translate: vertical
+            ? 'var(--translate, 0 -50%)'
+            : 'var(--translate, -50% 0)',
+          zIndex: 10,
+          ...style,
+          // Where the mark belongs on the track: the value, not a style.
+          left: !vertical ? `${calcPercent(value)}%` : undefined,
+          top: vertical ? `${calcPercent(value)}%` : undefined,
+        } as CSSProperties
+      }
+      data-orientation={vertical ? 'vertical' : 'horizontal'}
       {...props}
     >
-      {type != 'number' && (
+      {mark && (
         <div
-          className={clsx('tremolo-slider-marks-option-mark', classes?.mark)}
-          style={{
-            width: !vertical ? thickness : length,
-            height: vertical ? thickness : length,
-            marginBottom: !vertical ? gap : undefined,
-            marginRight: vertical ? gap : undefined,
-            ...styles?.mark,
-          }}
-          data-vertical={vertical}
+          className={classes?.mark}
+          style={styles?.mark}
+          data-orientation={vertical ? 'vertical' : 'horizontal'}
         ></div>
       )}
-      {type != 'mark' && (
-        <div
-          className={clsx('tremolo-slider-marks-option-label', classes?.label)}
-          style={{
-            width: labelWidth,
-            ...styles?.label,
-          }}
-        >
-          {label || value}
+      {label !== null && (
+        <div className={classes?.label} style={styles?.label}>
+          {label ?? value}
         </div>
       )}
     </div>

package/src/components/Slider/Thumb.tsx

@@ -1,25 +1,27 @@
-import clsx from 'clsx'
 import {
-  CSSProperties,
-  ReactNode,
-  Ref,
+  ComponentPropsWithoutRef,
+  forwardRef,
   useImperativeHandle,
   useRef,
+  CSSProperties,
 } from 'react'
 
+import { useCheckPlacement } from '../_util/Placement'
+import { VisuallyHiddenRangeInput } from '../_util/VisuallyHiddenRangeInput'
+
 import { useSliderContext } from './context'
 
+import type { CSSVariables } from '../../css-variables'
+
 export interface SliderThumbProps {
   /**
-   * Size comes from the `--thumb-size` CSS variable on `Slider.Root`, so that
-   * the root can reserve the matching amount of space around the track.
+   * Sets `--color`, for the theme to colour the thumb with. The size is not
+   * set here but by `--thumb-size` on `Slider.Root`, so that the root can
+   * leave the matching room around the track.
    */
   color?: string
 
-  className?: string
-  style?: CSSProperties
-  children?: ReactNode
-  ref?: Ref<SliderThumbMethods>
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>
 }
 
 export interface SliderThumbMethods {
@@ -27,55 +29,105 @@ export interface SliderThumbMethods {
   blur: () => void
 }
 
-export function Thumb({
-  color,
-  children,
-  className,
-  style,
-  ref,
-}: SliderThumbProps) {
-  const elementRef = useRef<HTMLDivElement>(null)
-  const { vertical, disabled, readonly, percent, thumbRef } = useSliderContext()
+type Props = SliderThumbProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderThumbProps>
 
-  const methods = () => ({
-    focus() {
-      elementRef.current?.focus()
+export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
+  function Thumb(
+    {
+      color,
+      children,
+      className,
+      style,
+      // Pulled out of `props` so that they land on the range input rather than
+      // on the thumb: the input is the control, it takes the focus, and a name
+      // on a plain div would be ignored. No declaration in `SliderThumbProps`
+      // is needed for this — they are already on the div attributes it is
+      // merged with, with the same types.
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      'aria-describedby': ariaDescribedby,
+      'aria-valuetext': ariaValuetext,
+      ...props
     },
-    blur() {
-      elementRef.current?.blur()
-    },
-  })
+    forwardedRef,
+  ) {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const {
+      value,
+      min,
+      max,
+      step,
+      vertical,
+      disabled,
+      readonly,
+      onChange,
+      percent,
+      thumbRef,
+    } = useSliderContext()
+
+    // The thumb is positioned against the track.
+    useCheckPlacement('Slider.Thumb', 'Slider.Track')
 
-  useImperativeHandle(ref, methods, [])
-  // Root focuses the thumb when a drag starts, wherever the user placed it.
+    const methods = () => ({
+      focus() {
+        if (!disabled) inputRef.current?.focus()
+      },
+      blur() {
+        inputRef.current?.blur()
+      },
+    })
 
-  useImperativeHandle(thumbRef, methods, [])
+    useImperativeHandle(forwardedRef, methods, [disabled])
+    // Root focuses the thumb when a drag starts, wherever the user placed it.
+    useImperativeHandle(thumbRef, methods, [disabled])
 
-  return (
-    <div
-      className="tremolo-slider-thumb-wrapper"
-      style={{
-        top: vertical ? `${percent}%` : '50%',
-        left: !vertical ? `${percent}%` : '50%',
-      }}
-    >
-      {children ? (
-        children
-      ) : (
-        // default slider thumb
-        <div
-          ref={elementRef}
-          className={clsx('tremolo-slider-thumb', className)}
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          aria-disabled={disabled}
+    return (
+      <div
+        className={className}
+        data-disabled={disabled ? '' : undefined}
+        data-readonly={readonly ? '' : undefined}
+        {...props}
+        style={{
+          ...{ '--color': color },
+          // Not a style but the mechanics of the position below: the thumb is
+          // placed by a percentage of the track, which needs it out of flow
+          // and measured from its own centre. `--translate` is there for a
+          // thumb that should hang off its edge instead.
+          position: 'absolute',
+          translate: 'var(--translate, -50% -50%)',
+          zIndex: 100,
+          ...style,
+          // Where the thumb sits is the component's decision, not a style: a
+          // `left` from the caller would take it off the track, so it is
+          // written after theirs.
+          top: vertical ? `${percent}%` : '50%',
+          left: !vertical ? `${percent}%` : '50%',
+        }}
+      >
+        <VisuallyHiddenRangeInput
+          ref={inputRef}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
           aria-readonly={readonly}
-          style={{
-            ...{ '--color': color },
-            ...style,
+          aria-orientation={vertical ? 'vertical' : 'horizontal'}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
+          aria-valuetext={ariaValuetext}
+          onChange={(event) => {
+            if (readonly) {
+              event.currentTarget.value = String(value)
+              return
+            }
+            onChange?.(event.currentTarget.valueAsNumber)
           }}
-        ></div>
-      )}
-    </div>
-  )
-}
+        />
+        {children}
+      </div>
+    )
+  },
+)

package/src/components/Slider/Track.tsx

@@ -1,79 +1,83 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, CSSProperties, ReactNode, Ref } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from 'react'
 
-import { styleHelper, xor } from '@tremolo-ui/functions'
-
-import { useComposedRefs } from '../_util/composeRefs'
+import { useComposedRefs } from '../../compose-refs'
+import { cssLength } from '../_util/css-length'
+import { Placement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
 
-export const defaultLength = 140
-export const defaultThickness = 10
+import type { CSSVariables } from '../../css-variables'
 
 export interface SliderTrackProps {
+  /**
+   * How long the track is along the axis the slider runs. Sets `--length`;
+   * the size the theme gives it stands when this is omitted.
+   */
   length?: number | string
+  /** How thick the track is across that axis. Sets `--thickness`. */
   thickness?: number | string
 
+  /** Colour of the part from `min` to the value. Sets `--active`. */
   active?: string
+  /** Colour of the rest of the track. Sets `--inactive`. */
   inactive?: string
 
-  defaultStyle?: boolean
-
-  className?: string
-  style?: CSSProperties
-  /** `<Slider.Thumb />` goes here. */
-  children?: ReactNode
-  ref?: Ref<HTMLDivElement>
+  style?: CSSProperties &
+    CSSVariables<'length' | 'thickness' | 'active' | 'inactive' | 'percent'>
 }
 
-export function Track({
-  length = defaultLength,
-  thickness = defaultThickness,
-  active,
-  inactive,
-  children,
-  className,
-  style,
-  defaultStyle = true,
-  ref,
-  ...props
-}: SliderTrackProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>) {
-  const { vertical, reverse, disabled, percent, trackRef } = useSliderContext()
+type Props = SliderTrackProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>
 
-  // The track is what the pointer position is normalized against, so the
-  // context ref is composed with any ref the caller passed.
-  const composedRef = useComposedRefs<HTMLDivElement>(ref, trackRef)
+export const Track = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
+  function Track(
+    {
+      length,
+      thickness,
+      active,
+      inactive,
+      children,
+      className,
+      style,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const { vertical, reverse, disabled, percent, trackRef } =
+      useSliderContext()
 
-  const direction = vertical ? 'bottom' : 'right'
-  const colors = {
-    '--active': active,
-    '--inactive': inactive,
-  }
+    // The track is what the pointer position is normalized against, so the
+    // context ref is composed with any ref the caller passed.
+    const composedRef = useComposedRefs<HTMLDivElement>(forwardedRef, trackRef)
 
-  return (
-    <div
-      ref={composedRef}
-      className={clsx('tremolo-slider-track', className)}
-      aria-disabled={disabled}
-      data-vertical={vertical}
-      style={
-        !defaultStyle
-          ? style
-          : {
-              ...colors,
-              background: xor(vertical, reverse)
-                ? `linear-gradient(to ${direction}, var(--inactive) ${percent}%, var(--active) ${percent}%)`
-                : `linear-gradient(to ${direction}, var(--active) ${percent}%, var(--inactive) ${percent}%)`,
-              borderRadius: styleHelper(thickness!, '/', 2),
-              width: !vertical ? length : thickness,
-              height: vertical ? length : thickness,
-              ...style,
-            }
-      }
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
+    return (
+      <div
+        ref={composedRef}
+        className={className}
+        data-disabled={disabled ? '' : undefined}
+        data-orientation={vertical ? 'vertical' : 'horizontal'}
+        // Which end the value grows from. `percent` is already the position on
+        // screen, so this only says which side of it is the filled one.
+        data-flipped={vertical !== reverse ? '' : undefined}
+        style={
+          {
+            '--active': active,
+            '--inactive': inactive,
+            '--length': cssLength(length),
+            '--thickness': cssLength(thickness),
+            // Where the value sits, for the theme to paint the fill with. The
+            // component draws nothing itself: this is the one number CSS cannot
+            // work out on its own.
+            '--percent': `${percent}%`,
+            // The thumb inside is placed against this box.
+            position: 'relative',
+            ...style,
+          } as CSSProperties
+        }
+        {...props}
+      >
+        <Placement name="Slider.Track">{children}</Placement>
+      </div>
+    )
+  },
+)

package/src/components/Slider/context.tsx

@@ -15,7 +15,7 @@ export type SliderContextValue = {
   reverse: boolean
   disabled: boolean
   readonly: boolean
-
+  onChange?: (value: number) => void
   /**
    * Position of the thumb, 0-100, already accounting for the display direction
    * implied by `vertical` and `reverse`.
@@ -28,7 +28,9 @@ export type SliderContextValue = {
   thumbRef: RefObject<SliderThumbMethods | null>
 }
 
-const SliderContext = createContext<SliderContextValue | null>(null)
+const SliderContext = /* @__PURE__ */ createContext<SliderContextValue | null>(
+  null,
+)
 
 export const SliderProvider = SliderContext.Provider