@proteos/ui 0.76.0 → 0.78.0

package/src/components/slider/slider.test.tsx

@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Slider } from './slider'
+
+describe('Slider', () => {
+  it('exposes its name and value', () => {
+    render(<Slider aria-label="Volume" value={30} maxValue={100} />)
+    const slider = screen.getByRole('slider', { name: 'Volume' })
+    expect(slider).toHaveValue('30')
+  })
+
+  it('announces valueText instead of the number', () => {
+    render(<Slider aria-label="Seek" value={48} maxValue={156} valueText="48 seconds" />)
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuetext', '48 seconds')
+  })
+
+  it('keeps valueText current when the value changes', () => {
+    const { rerender } = render(<Slider aria-label="Seek" value={1} maxValue={9} valueText="one" />)
+    rerender(<Slider aria-label="Seek" value={2} maxValue={9} valueText="two" />)
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuetext', 'two')
+  })
+
+  it('reports changes', () => {
+    const onChange = vi.fn()
+    render(<Slider aria-label="Seek" value={10} maxValue={100} onChange={onChange} />)
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '40' } })
+    expect(onChange).toHaveBeenCalledWith(40)
+  })
+
+  it('disables its input', () => {
+    render(<Slider aria-label="Seek" value={0} maxValue={100} isDisabled />)
+    expect(screen.getByRole('slider')).toBeDisabled()
+  })
+})

package/src/components/slider/slider.tsx

@@ -0,0 +1,89 @@
+import { useLayoutEffect, useRef } from 'react'
+import {
+  Slider as AriaSlider,
+  type SliderProps as AriaSliderProps,
+  SliderThumb,
+  SliderTrack,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Slider — a single-thumb numeric range on RAC Slider. Thin rail, ink fill,
+   small ink thumb; the 18px track is the pointer target around the 4px rail.
+   `valueText` replaces the announced number when the raw value means little
+   on its own (a media position reads "48 seconds of 2 minutes").
+   ========================================================================= */
+
+export const sliderStyles = tv({
+  slots: {
+    root: 'flex w-full items-center',
+    track: 'group relative h-[18px] w-full cursor-pointer data-[disabled]:cursor-default',
+    rail: 'absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 overflow-hidden rounded-pill bg-surface-3',
+    fill: 'h-full bg-ink',
+    thumb: [
+      'top-1/2 size-3 rounded-pill bg-ink',
+      'shadow-[var(--shadow-rest)]',
+      'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      'data-[disabled]:hidden',
+    ],
+  },
+})
+
+export type SliderVariants = VariantProps<typeof sliderStyles>
+
+export type SliderProps = Omit<
+  AriaSliderProps<number>,
+  'children' | 'value' | 'defaultValue' | 'onChange' | 'onChangeEnd' | 'orientation'
+> & {
+  value: number
+  onChange?: (value: number) => void
+  onChangeEnd?: (value: number) => void
+  /** Spoken in place of the number. */
+  valueText?: string
+}
+
+export function Slider({
+  value,
+  onChange,
+  onChangeEnd,
+  valueText,
+  className,
+  ...props
+}: SliderProps) {
+  const styles = sliderStyles()
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // RAC writes its formatted number onto the thumb's input on every render and
+  // offers no override, so ours has to land after it.
+  useLayoutEffect(() => {
+    if (valueText !== undefined) inputRef.current?.setAttribute('aria-valuetext', valueText)
+  })
+
+  return (
+    <AriaSlider
+      {...props}
+      value={value}
+      {...(onChange ? { onChange } : {})}
+      {...(onChangeEnd ? { onChangeEnd } : {})}
+      className={(renderProps) =>
+        cn(styles.root(), typeof className === 'function' ? className(renderProps) : className)
+      }
+    >
+      <SliderTrack className={styles.track()}>
+        {({ state }) => (
+          <>
+            <div className={styles.rail()}>
+              <div
+                className={styles.fill()}
+                style={{ width: `${state.getThumbPercent(0) * 100}%` }}
+              />
+            </div>
+            <SliderThumb inputRef={inputRef} className={styles.thumb()} />
+          </>
+        )}
+      </SliderTrack>
+    </AriaSlider>
+  )
+}

package/src/index.ts

@@ -26,12 +26,14 @@ export * from './components/error-animation'
 export * from './components/field'
 export * from './components/file-field'
 export * from './components/file-viewer'
+export * from './components/frame-strip'
 export * from './components/glow-frame'
 export * from './components/icon-picker'
 export * from './components/image-attachment'
 export * from './components/image-lightbox'
 export * from './components/input'
 export * from './components/kbd'
+export * from './components/media-player'
 export * from './components/menu'
 export * from './components/message-composer'
 export * from './components/modal'
@@ -49,6 +51,7 @@ export * from './components/segmented-control'
 export * from './components/select'
 export * from './components/separator'
 export * from './components/skeleton'
+export * from './components/slider'
 export * from './components/stepper'
 export * from './components/success-animation'
 export * from './components/switch'