@livepeer-frameworks/player-react 0.0.4 → 0.1.1

package/src/ui/context-menu.tsx

@@ -1,40 +1,36 @@
-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"
+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 ContextMenu = ContextMenuPrimitive.Root;
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
-const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuGroup = ContextMenuPrimitive.Group;
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
 
-const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuSub = ContextMenuPrimitive.Sub;
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
-    className={cn(
-      "fw-context-menu-item",
-      inset && "fw-context-menu-item--inset",
-      className
-    )}
+    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
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -45,8 +41,8 @@ const ContextMenuSubContent = React.forwardRef<
     className={cn("fw-player-surface fw-context-menu", className)}
     {...props}
   />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -59,34 +55,30 @@ const ContextMenuContent = React.forwardRef<
       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
+        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
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
     ref={ref}
-    className={cn(
-      "fw-context-menu-item",
-      inset && "fw-context-menu-item--inset",
-      className
-    )}
+    className={cn("fw-context-menu-item", inset && "fw-context-menu-item--inset", className)}
     {...props}
   />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -105,9 +97,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -125,26 +116,22 @@ const ContextMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "fw-context-menu-label",
-      inset && "fw-context-menu-item--inset",
-      className
-    )}
+    className={cn("fw-context-menu-label", inset && "fw-context-menu-item--inset", className)}
     {...props}
   />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -155,24 +142,18 @@ const ContextMenuSeparator = React.forwardRef<
     className={cn("fw-context-menu-separator", className)}
     {...props}
   />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
   ContextMenu,
@@ -190,4 +171,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};

package/src/ui/select.tsx

@@ -41,13 +41,11 @@ const SelectContent = React.forwardRef<
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
         className
       )}
-      style={{ backgroundColor: '#1a1b26' }} // Inline fallback for opaque background
+      style={{ backgroundColor: "#1a1b26" }} // Inline fallback for opaque background
       position={position}
       {...props}
     >
-      <SelectPrimitive.Viewport className="p-1">
-        {children}
-      </SelectPrimitive.Viewport>
+      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ));
@@ -82,7 +80,11 @@ 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} />
+  <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;
 
@@ -90,7 +92,11 @@ 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} />
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
@@ -101,5 +107,5 @@ export {
   SelectLabel,
   SelectSeparator,
   SelectTrigger,
-  SelectValue
+  SelectValue,
 };

package/src/ui/slider.tsx

@@ -13,48 +13,37 @@ export interface SliderProps extends React.ComponentPropsWithoutRef<typeof Slide
 }
 
 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";
-
+  (
+    {
+      className,
+      trackClassName,
+      thumbClassName,
+      showTrack = true,
+      hoverThumb: _hoverThumb = false,
+      accentColor = false,
+      orientation = "horizontal",
+      ...props
+    },
+    ref
+  ) => {
     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
-        )}
+        className={cn("fw-slider", orientation === "vertical" && "fw-slider--vertical", 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.Track className={cn("fw-slider-track", trackClassName)}>
             <SliderPrimitive.Range
-              className={cn(
-                "absolute rounded-full transition-all duration-150",
-                orientation === "horizontal" ? "h-full" : "w-full bottom-0",
-                rangeColorClass
-              )}
+              className={cn("fw-slider-range", accentColor && "fw-slider-range--accent")}
             />
           </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,
+            "fw-slider-thumb",
+            accentColor && "fw-slider-thumb--accent",
             thumbClassName
           )}
         />