@livepeer-frameworks/player-react 0.0.3

package/src/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * @livepeer-frameworks/player-react
+ *
+ * React components for FrameWorks streaming player.
+ */
+
+// Main player component
+export { default as Player } from './components/Player';
+export { default as PlayerControls } from './components/PlayerControls';
+
+// Overlay components
+export { default as LoadingScreen } from './components/LoadingScreen';
+export { default as IdleScreen } from './components/IdleScreen';
+export { default as ThumbnailOverlay } from './components/ThumbnailOverlay';
+export { default as TitleOverlay } from './components/TitleOverlay';
+export { default as StreamStateOverlay } from './components/StreamStateOverlay';
+export { default as StatsPanel } from './components/StatsPanel';
+export { default as DevModePanel } from './components/DevModePanel';
+export { default as PlayerErrorBoundary } from './components/PlayerErrorBoundary';
+
+// Icon components
+export * from './components/Icons';
+
+// UI primitives
+export { Button } from './ui/button';
+export { Badge } from './ui/badge';
+export { Slider } from './ui/slider';
+
+// Context
+export { PlayerProvider, usePlayerContext, usePlayerContextOptional, PlayerContext } from './context/PlayerContext';
+export type { PlayerContextValue } from './context/PlayerContext';
+
+// Hooks
+export { useStreamState } from './hooks/useStreamState';
+export { usePlaybackQuality } from './hooks/usePlaybackQuality';
+export { useViewerEndpoints } from './hooks/useViewerEndpoints';
+export { useMetaTrack } from './hooks/useMetaTrack';
+export { useTelemetry } from './hooks/useTelemetry';
+export { usePlayerSelection } from './hooks/usePlayerSelection';
+export type { UsePlayerSelectionOptions, UsePlayerSelectionReturn } from './hooks/usePlayerSelection';
+export { usePlayerController } from './hooks/usePlayerController';
+export type {
+  UsePlayerControllerConfig,
+  UsePlayerControllerReturn,
+  PlayerControllerState,
+} from './hooks/usePlayerController';
+
+// Types
+export * from './types';
+
+// Re-export commonly used core items
+export {
+  PlayerManager,
+  globalPlayerManager,
+  PlayerController,
+  GatewayClient,
+  StreamStateClient,
+  QualityMonitor,
+  cn,
+} from '@livepeer-frameworks/player-core';
+
+export type {
+  PlayerState,
+  PlayerStateContext,
+  StreamState,
+  StreamStatus,
+  MistStreamInfo,
+  PlaybackQuality,
+  PlaybackMode,
+  ContentEndpoints,
+  EndpointInfo,
+  PlayerSelection,
+  PlayerCombination,
+  PlayerManagerEvents,
+} from '@livepeer-frameworks/player-core';

package/src/player.css

@@ -0,0 +1,2 @@
+/* Re-export core player CSS - apps import from wrapper, not core */
+@import "@livepeer-frameworks/player-core/player.css";

package/src/types.ts

@@ -0,0 +1,135 @@
+/**
+ * React-specific types for FrameWorks player
+ */
+import type React from 'react';
+import type { 
+  PlayerOptions, 
+  PlayerState, 
+  PlayerStateContext, 
+  ContentEndpoints,
+  MetaTrackSubscription,
+  PlaybackQuality,
+  QualityThresholds,
+  ContentType
+} from '@livepeer-frameworks/player-core';
+
+export interface PlayerProps {
+  /** Content identifier or stream name */
+  contentId: string;
+  /** Content type */
+  contentType: ContentType;
+  /** Pre-resolved endpoints/capabilities from Gateway/Foghorn */
+  endpoints?: ContentEndpoints;
+  /** Optional thumbnail/poster image */
+  thumbnailUrl?: string | null;
+  /** Unified options (branding, playback prefs, etc.) */
+  options?: Partial<PlayerOptions>;
+  /** Detailed state updates for UI (booting, gateway, connecting, playing, etc.) */
+  onStateChange?: (state: PlayerState, context?: PlayerStateContext) => void;
+}
+
+export interface MistPlayerProps {
+  streamName: string;
+  htmlUrl?: string;
+  playerJsUrl?: string;
+  developmentMode?: boolean;
+  muted?: boolean;
+  poster?: string;
+}
+
+export interface LoadingScreenProps {
+  message?: string;
+}
+
+export interface ThumbnailOverlayProps {
+  thumbnailUrl?: string | null | undefined;
+  onPlay?: () => void;
+  message?: string | null;
+  showUnmuteMessage?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface AnimatedBubbleProps {
+  index: number;
+}
+
+export interface CenterLogoProps {
+  containerRef: React.RefObject<HTMLDivElement>;
+  scale?: number;
+  onHitmarker?: (event: React.MouseEvent) => void;
+}
+
+export interface HitmarkerData {
+  id: number;
+  x: number;
+  y: number;
+}
+
+export interface DvdLogoProps {
+  parentRef: React.RefObject<HTMLDivElement>;
+  scale?: number;
+}
+
+// React-specific hook option types
+export interface UsePlaybackQualityOptions {
+  videoElement: HTMLVideoElement | null;
+  enabled?: boolean;
+  sampleInterval?: number;
+  thresholds?: Partial<QualityThresholds>;
+  onQualityDegraded?: (quality: PlaybackQuality) => void;
+}
+
+export interface UseMetaTrackOptions {
+  mistBaseUrl: string;
+  streamName: string;
+  enabled?: boolean;
+  subscriptions?: MetaTrackSubscription[];
+}
+
+export interface UseStreamStateOptions {
+  /** MistServer base URL */
+  mistBaseUrl: string;
+  /** Stream name */
+  streamName: string;
+  /** Poll interval in ms (default: 3000) */
+  pollInterval?: number;
+  /** Enable/disable the hook (default: true) */
+  enabled?: boolean;
+  /** Use WebSocket instead of HTTP polling (default: true) */
+  useWebSocket?: boolean;
+  /** Enable debug logging (default: false) */
+  debug?: boolean;
+}
+
+export interface UseTelemetryOptions {
+  enabled?: boolean;
+  endpoint?: string;
+  authToken?: string;
+  interval?: number;
+  batchSize?: number;
+  contentId?: string;
+  contentType?: string;
+  playerType?: string;
+  protocol?: string;
+}
+
+// Re-export core types for convenience
+export type {
+  PlayerState,
+  PlayerStateContext,
+  ContentEndpoints,
+  PlayerOptions,
+  PlaybackQuality,
+  TelemetryOptions,
+  TelemetryPayload,
+  MetaTrackEvent,
+  MetaTrackEventType,
+  SubtitleCue,
+  PlaybackMode,
+  MistStreamInfo,
+  StreamState,
+  StreamStatus,
+  EndpointInfo,
+  ContentMetadata,
+} from '@livepeer-frameworks/player-core';

package/src/ui/badge.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@livepeer-frameworks/player-core";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border-border text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/ui/button.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@livepeer-frameworks/player-core";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        subtle: "bg-muted text-muted-foreground hover:bg-muted/80",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/ui/context-menu.tsx

@@ -0,0 +1,193 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "@livepeer-frameworks/player-core"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "fw-context-menu-item",
+      inset && "fw-context-menu-item--inset",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn("fw-player-surface fw-context-menu", className)}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, style, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn("fw-player-surface fw-context-menu", className)}
+      style={{
+        // Inline styles for portal elements (rendered outside .fw-player-root)
+        // These ensure styles work even without CSS variable inheritance
+        backgroundColor: 'hsl(235 19% 13%)',
+        color: 'hsl(229 35% 75%)',
+        border: '1px solid rgba(90, 96, 127, 0.3)',
+        ...style
+      }}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "fw-context-menu-item",
+      inset && "fw-context-menu-item--inset",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn("fw-context-menu-checkbox", className)}
+    checked={checked}
+    {...props}
+  >
+    <span className="fw-context-menu-indicator">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn("fw-context-menu-checkbox", className)}
+    {...props}
+  >
+    <span className="fw-context-menu-indicator">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "fw-context-menu-label",
+      inset && "fw-context-menu-item--inset",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("fw-context-menu-separator", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

package/src/ui/select.tsx

@@ -0,0 +1,105 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "@livepeer-frameworks/player-core";
+
+const Select = SelectPrimitive.Root;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-border bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="fw-h-4 w-4 opacity-60" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        // Explicit Tokyo Night colors for portal (doesn't inherit CSS vars)
+        "z-50 min-w-[8rem] overflow-hidden border border-[#414868]/50 bg-[#1a1b26] text-[#a9b1d6] shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      style={{ backgroundColor: '#1a1b26' }} // Inline fallback for opaque background
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="p-1">
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      // Explicit Tokyo Night colors for portal context
+      "relative flex w-full cursor-pointer select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-[#292e42] focus:text-[#c0caf5] hover:bg-[#292e42]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};

package/src/ui/slider.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@livepeer-frameworks/player-core";
+
+export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  showTrack?: boolean;
+  trackClassName?: string;
+  thumbClassName?: string;
+  /** Show thumb only on hover (YouTube-style) - but always shows a smaller thumb when not hovered */
+  hoverThumb?: boolean;
+  /** Use cyan accent color (matches SeekBar styling) */
+  accentColor?: boolean;
+}
+
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  ({ className, trackClassName, thumbClassName, showTrack = true, hoverThumb = false, accentColor = false, orientation = "horizontal", ...props }, ref) => {
+    // Colors based on accentColor prop
+    const rangeColorClass = accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white/90";
+    const thumbColorClass = accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white";
+
+    return (
+      <SliderPrimitive.Root
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+          "group relative flex touch-none select-none items-center cursor-pointer",
+          orientation === "horizontal" ? "w-full h-5" : "h-full flex-col w-5",
+          className
+        )}
+        {...props}
+      >
+        {showTrack && (
+          <SliderPrimitive.Track
+            className={cn(
+              "absolute rounded-full bg-white/30 transition-all duration-150",
+              orientation === "horizontal"
+                ? "inset-x-0 h-1 group-hover:h-1.5"
+                : "inset-y-0 w-1 group-hover:w-1.5",
+              trackClassName
+            )}
+          >
+            <SliderPrimitive.Range
+              className={cn(
+                "absolute rounded-full transition-all duration-150",
+                orientation === "horizontal" ? "h-full" : "w-full bottom-0",
+                rangeColorClass
+              )}
+            />
+          </SliderPrimitive.Track>
+        )}
+        <SliderPrimitive.Thumb
+          className={cn(
+            "block rounded-full border-0 cursor-pointer shadow-md transition-all duration-150",
+            "w-2.5 h-2.5 group-hover:w-3.5 group-hover:h-3.5",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+            "disabled:pointer-events-none disabled:opacity-50",
+            thumbColorClass,
+            thumbClassName
+          )}
+        />
+      </SliderPrimitive.Root>
+    );
+  }
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };