@podoba/react 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/components/slider.tsx +17 -19
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@podoba/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
|
|
6
6
|
"repository": {
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"typecheck": "tsc --build"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@podoba/tokens": "^0.0.
|
|
29
|
-
"@podoba/tailwind": "^0.0.
|
|
28
|
+
"@podoba/tokens": "^0.0.7",
|
|
29
|
+
"@podoba/tailwind": "^0.0.7",
|
|
30
30
|
"react-aria-components": "1.18.0",
|
|
31
31
|
"class-variance-authority": "0.7.1",
|
|
32
32
|
"clsx": "2.1.1",
|
|
@@ -1,32 +1,24 @@
|
|
|
1
1
|
import type { ReactNode } from 'react'
|
|
2
|
-
import {
|
|
3
|
-
Label,
|
|
4
|
-
Slider as RACSlider,
|
|
5
|
-
type SliderProps as RACSliderProps,
|
|
6
|
-
SliderOutput,
|
|
7
|
-
SliderThumb,
|
|
8
|
-
SliderTrack,
|
|
9
|
-
} from 'react-aria-components'
|
|
2
|
+
import { Label, Slider as RACSlider, type SliderProps as RACSliderProps, SliderThumb, SliderTrack } from 'react-aria-components'
|
|
10
3
|
|
|
11
4
|
/**
|
|
12
5
|
* Slider — a draggable value selector (single value or a range when `value`/
|
|
13
6
|
* `defaultValue` is a two-number array). Built on React Aria Components `Slider`
|
|
14
|
-
* (keyboard support, RTL, ARIA). The filled portion is brand-green
|
|
7
|
+
* (keyboard support, RTL, ARIA). The filled portion is brand-green and each
|
|
8
|
+
* thumb carries its current value above it (respects `formatOptions`).
|
|
15
9
|
*/
|
|
16
10
|
export type SliderProps<T extends number | number[]> = RACSliderProps<T> & {
|
|
17
11
|
/** Visible label (required for accessibility). */
|
|
18
12
|
label: ReactNode
|
|
19
|
-
/** Hide the
|
|
20
|
-
|
|
13
|
+
/** Hide the value label above each thumb. */
|
|
14
|
+
hideValue?: boolean
|
|
21
15
|
}
|
|
22
16
|
|
|
23
|
-
export const Slider = <T extends number | number[]>({ label,
|
|
24
|
-
<RACSlider {...props} className="flex flex-col gap-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</div>
|
|
29
|
-
<SliderTrack className="relative flex h-6 w-full items-center">
|
|
17
|
+
export const Slider = <T extends number | number[]>({ label, hideValue, ...props }: SliderProps<T>) => (
|
|
18
|
+
<RACSlider {...props} className="flex flex-col gap-1.5 data-[disabled]:opacity-50">
|
|
19
|
+
<Label className="text-heading5 font-medium text-fg">{label}</Label>
|
|
20
|
+
{/* mt-6 leaves room for the value label that sits above each thumb. */}
|
|
21
|
+
<SliderTrack className="relative mt-6 flex h-6 w-full items-center">
|
|
30
22
|
{({ state }) => {
|
|
31
23
|
const start = state.values.length > 1 ? state.getThumbPercent(0) : 0
|
|
32
24
|
const end = state.getThumbPercent(state.values.length - 1)
|
|
@@ -43,7 +35,13 @@ export const Slider = <T extends number | number[]>({ label, hideOutput, ...prop
|
|
|
43
35
|
key={i}
|
|
44
36
|
index={i}
|
|
45
37
|
className="h-4 w-4 rounded-full border-2 border-fg bg-surface outline-none transition-transform data-[dragging]:scale-110 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
|
|
46
|
-
|
|
38
|
+
>
|
|
39
|
+
{hideValue ? null : (
|
|
40
|
+
<span className="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-medium tabular-nums text-fg">
|
|
41
|
+
{state.getThumbValueLabel(i)}
|
|
42
|
+
</span>
|
|
43
|
+
)}
|
|
44
|
+
</SliderThumb>
|
|
47
45
|
))}
|
|
48
46
|
</>
|
|
49
47
|
)
|