@podoba/react 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.5",
+	"version": "0.0.7",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -25,8 +25,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.5",
-		"@podoba/tailwind": "^0.0.5",
+		"@podoba/tokens": "^0.0.7",
+		"@podoba/tailwind": "^0.0.7",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/combobox.tsx

@@ -86,7 +86,7 @@ export const ComboBox = <T extends object>({
 		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
 		<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
 			<ListBox
-				className="flex max-h-64 flex-col gap-0.5 overflow-auto p-1 outline-none"
+				className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
 				renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No results</div>}
 			>
 				{children}

package/src/components/multiselect.tsx

@@ -115,7 +115,7 @@ export const MultiSelect = ({
 			selectedKeys={selected}
 			onSelectionChange={handleChange}
 			renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No matches</div>}
-			className="flex max-h-64 flex-col gap-0.5 overflow-auto p-1 outline-none"
+			className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
 		>
 			{options.map((o) => (
 				<MultiSelectItem key={o.id} id={o.id} textValue={o.label} isDisabled={o.isDisabled}>

package/src/components/select.tsx

@@ -106,7 +106,9 @@ export const Select = <T extends object>({
 		{/* Cream fill, 8px radius, shadow-lg, NO border. 4px inset so each option's
 		    highlight sits as a padded pill; small gap for an even list rhythm. */}
 		<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
-			<ListBox className="flex flex-col gap-0.5 p-1 outline-none">{children}</ListBox>
+			<ListBox className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none">
+				{children}
+			</ListBox>
 		</Popover>
 	</RACSelect>
 )

package/src/components/slider.tsx

@@ -1,32 +1,24 @@
 import type { ReactNode } from 'react'
-import {
-	Label,
-	Slider as RACSlider,
-	type SliderProps as RACSliderProps,
-	SliderOutput,
-	SliderThumb,
-	SliderTrack,
-} from 'react-aria-components'
+import { Label, Slider as RACSlider, type SliderProps as RACSliderProps, SliderThumb, SliderTrack } from 'react-aria-components'
 
 /**
  * Slider — a draggable value selector (single value or a range when `value`/
  * `defaultValue` is a two-number array). Built on React Aria Components `Slider`
- * (keyboard support, RTL, ARIA). The filled portion is brand-green.
+ * (keyboard support, RTL, ARIA). The filled portion is brand-green and each
+ * thumb carries its current value above it (respects `formatOptions`).
  */
 export type SliderProps<T extends number | number[]> = RACSliderProps<T> & {
 	/** Visible label (required for accessibility). */
 	label: ReactNode
-	/** Hide the numeric readout next to the label. */
-	hideOutput?: boolean
+	/** Hide the value label above each thumb. */
+	hideValue?: boolean
 }
 
-export const Slider = <T extends number | number[]>({ label, hideOutput, ...props }: SliderProps<T>) => (
-	<RACSlider {...props} className="flex flex-col gap-2 data-[disabled]:opacity-50">
-		<div className="flex items-center justify-between">
-			<Label className="text-heading5 font-medium text-fg">{label}</Label>
-			{hideOutput ? null : <SliderOutput className="text-sm tabular-nums text-fg-muted" />}
-		</div>
-		<SliderTrack className="relative flex h-6 w-full items-center">
+export const Slider = <T extends number | number[]>({ label, hideValue, ...props }: SliderProps<T>) => (
+	<RACSlider {...props} className="flex flex-col gap-1.5 data-[disabled]:opacity-50">
+		<Label className="text-heading5 font-medium text-fg">{label}</Label>
+		{/* mt-6 leaves room for the value label that sits above each thumb. */}
+		<SliderTrack className="relative mt-6 flex h-6 w-full items-center">
 			{({ state }) => {
 				const start = state.values.length > 1 ? state.getThumbPercent(0) : 0
 				const end = state.getThumbPercent(state.values.length - 1)
@@ -43,7 +35,13 @@ export const Slider = <T extends number | number[]>({ label, hideOutput, ...prop
 								key={i}
 								index={i}
 								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"
-							/>
+							>
+								{hideValue ? null : (
+									<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">
+										{state.getThumbValueLabel(i)}
+									</span>
+								)}
+							</SliderThumb>
 						))}
 					</>
 				)