mirror of
https://github.com/jnsahaj/tweakcn.git
synced 2026-08-29 07:14:31 +08:00
Sahaj Jain
cde8adc6bd
* chore: update shadcn/ui components to v3.8.5 and migrate to unified radix-ui - Update shadcn CLI from 2.5.0 to 3.8.5 - Update 45 standard UI components to latest versions - Migrate from 28 individual @radix-ui/react-* packages to unified radix-ui - Update react-resizable-panels from v2 to v4 (direction→orientation, onLayout→onLayoutChanged, ref→panelRef, numeric sizes→percentage strings) - Fix revola.tsx runtime error by sharing shouldUseDialog via React context instead of independent useMediaQuery calls in each sub-component - Preserve custom components: sidebar.tsx, base-ui-tabs.tsx, revola.tsx - Re-apply button accent variant after component update - Fix direct Radix imports in theme-toggle, user-profile-dropdown, data-table-view-options - Fix registryItemSchema import (shadcn/registry→shadcn/schema) - Fix ScrollArea viewPortClassName removal (use data-slot CSS selector) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: resolve CSS specificity regressions from shadcn v3.8.5 update - button: remove has-[>svg]:px-* variants that override custom padding, restore lg px-8 - dialog: revert sm:max-w-lg to max-w-lg so consumer max-w overrides work - separator: use JS conditionals instead of data-attribute variants for orientation - tabs: restore old TabsTrigger styles to prevent dark mode border overrides - select consumers: use size="sm" prop instead of className h-8 override Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Slider as SliderPrimitive } from "radix-ui"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function Slider({
|
|
className,
|
|
defaultValue,
|
|
value,
|
|
min = 0,
|
|
max = 100,
|
|
...props
|
|
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
|
const _values = React.useMemo(
|
|
() =>
|
|
Array.isArray(value)
|
|
? value
|
|
: Array.isArray(defaultValue)
|
|
? defaultValue
|
|
: [min, max],
|
|
[value, defaultValue, min, max]
|
|
)
|
|
|
|
return (
|
|
<SliderPrimitive.Root
|
|
data-slot="slider"
|
|
defaultValue={defaultValue}
|
|
value={value}
|
|
min={min}
|
|
max={max}
|
|
className={cn(
|
|
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<SliderPrimitive.Track
|
|
data-slot="slider-track"
|
|
className={cn(
|
|
"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
|
)}
|
|
>
|
|
<SliderPrimitive.Range
|
|
data-slot="slider-range"
|
|
className={cn(
|
|
"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
|
)}
|
|
/>
|
|
</SliderPrimitive.Track>
|
|
{Array.from({ length: _values.length }, (_, index) => (
|
|
<SliderPrimitive.Thumb
|
|
data-slot="slider-thumb"
|
|
key={index}
|
|
className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
|
/>
|
|
))}
|
|
</SliderPrimitive.Root>
|
|
)
|
|
}
|
|
|
|
export { Slider }
|