@j3m-quantum/ui 0.7.13 → 0.8.2

package/README.md

@@ -129,7 +129,6 @@ All of these are bundled and ready to use:
 - recharts (Charts)
 - react-day-picker + date-fns (Calendar)
 - embla-carousel-react (Carousel)
-- input-otp (OTP input)
 - react-resizable-panels (Resizable)
 - react-hook-form (Form handling)
 

package/dist/index.cjs

@@ -845,6 +845,298 @@ function ToggleGroupItem({
     }
   );
 }
+function ToolBarCanvas({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "toolbar-canvas",
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full bg-sidebar border border-sidebar-border p-1.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToolBarCanvasDivider({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "toolbar-canvas-divider",
+      className: cn("w-px h-6 mx-1.5 bg-foreground/20", className),
+      ...props
+    }
+  );
+}
+function ToolBarCanvasGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "toolbar-canvas-group",
+      className: cn("flex items-center gap-1", className),
+      ...props
+    }
+  );
+}
+var toolBarCanvasButtonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full 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",
+  {
+    variants: {
+      size: {
+        default: "size-10",
+        sm: "size-8",
+        lg: "size-12"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function ToolBarCanvasButton({
+  className,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TogglePrimitive__namespace.Root,
+    {
+      "data-slot": "toolbar-canvas-button",
+      className: cn(
+        toolBarCanvasButtonVariants({ size }),
+        "bg-transparent text-foreground/70 hover:bg-muted hover:text-foreground",
+        "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+        "[&_svg]:size-5 [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function PlayerCanvas({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "player-canvas",
+      className: cn(
+        "relative flex flex-col gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PlayerCanvasControls({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "player-canvas-controls",
+      className: cn(
+        "flex items-center gap-2 px-1.5 py-1.5 rounded-full bg-sidebar border border-sidebar-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var playerCanvasPlayButtonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full 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 text-white hover:opacity-90",
+  {
+    variants: {
+      size: {
+        default: "size-14",
+        sm: "size-10",
+        lg: "size-16"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function PlayerCanvasPlayButton({
+  className,
+  size,
+  isPlaying,
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-slot": "player-canvas-play-button",
+      "data-playing": isPlaying,
+      className: cn(
+        playerCanvasPlayButtonVariants({ size }),
+        "[&_svg]:size-6 [&_svg]:shrink-0",
+        className
+      ),
+      style: {
+        backgroundColor: "var(--j3m-primary-250)",
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+var playerCanvasSkipButtonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full 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 bg-transparent text-foreground/60 hover:text-foreground hover:bg-muted",
+  {
+    variants: {
+      size: {
+        default: "size-10",
+        sm: "size-8",
+        lg: "size-12"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function PlayerCanvasSkipButton({
+  className,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-slot": "player-canvas-skip-button",
+      className: cn(
+        playerCanvasSkipButtonVariants({ size }),
+        "[&_svg]:size-5 [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function PlayerCanvasDivider({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "player-canvas-divider",
+      className: cn("w-px h-10 mx-2 bg-foreground/15", className),
+      ...props
+    }
+  );
+}
+function PlayerCanvasInfo({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "player-canvas-info",
+      className: cn("flex flex-col justify-center flex-1 min-w-0", className),
+      ...props
+    }
+  );
+}
+function PlayerCanvasLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "player-canvas-label",
+      className: cn(
+        "text-xs font-medium text-foreground/50 uppercase tracking-wider",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PlayerCanvasTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "player-canvas-title",
+      className: cn(
+        "text-lg font-semibold text-foreground truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PlayerCanvasActionButton({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-slot": "player-canvas-action-button",
+      className: cn(
+        "inline-flex items-center justify-center size-10 rounded-full 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 bg-transparent text-foreground/40 hover:text-foreground hover:bg-muted",
+        "[&_svg]:size-5 [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function PlayerCanvasProgress({
+  className,
+  value = 0,
+  max = 100,
+  ...props
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "player-canvas-progress",
+      className: cn("relative h-2 w-full rounded-full bg-foreground/10 overflow-hidden", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-slot": "player-canvas-progress-bar",
+          className: "absolute inset-y-0 left-0 rounded-full transition-all duration-200",
+          style: {
+            width: `${percentage}%`,
+            backgroundColor: "var(--j3m-primary-250)"
+          }
+        }
+      )
+    }
+  );
+}
 function Label2({
   className,
   ...props
@@ -3202,7 +3494,7 @@ function CommandItem({
     {
       "data-slot": "command-item",
       className: cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -3717,7 +4009,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-full bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -3794,7 +4086,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground hover:[&_svg]:text-accent-foreground hover:[&_p]:text-accent-foreground hover:[&_.text-muted-foreground]:text-accent-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -5383,6 +5675,16 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.PlayerCanvas = PlayerCanvas;
+exports.PlayerCanvasActionButton = PlayerCanvasActionButton;
+exports.PlayerCanvasControls = PlayerCanvasControls;
+exports.PlayerCanvasDivider = PlayerCanvasDivider;
+exports.PlayerCanvasInfo = PlayerCanvasInfo;
+exports.PlayerCanvasLabel = PlayerCanvasLabel;
+exports.PlayerCanvasPlayButton = PlayerCanvasPlayButton;
+exports.PlayerCanvasProgress = PlayerCanvasProgress;
+exports.PlayerCanvasSkipButton = PlayerCanvasSkipButton;
+exports.PlayerCanvasTitle = PlayerCanvasTitle;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
@@ -5465,6 +5767,10 @@ exports.Toaster = Toaster;
 exports.Toggle = Toggle;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
+exports.ToolBarCanvas = ToolBarCanvas;
+exports.ToolBarCanvasButton = ToolBarCanvasButton;
+exports.ToolBarCanvasDivider = ToolBarCanvasDivider;
+exports.ToolBarCanvasGroup = ToolBarCanvasGroup;
 exports.Tooltip = Tooltip2;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
@@ -5474,8 +5780,11 @@ exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
 exports.cardVariants = cardVariants;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
+exports.playerCanvasPlayButtonVariants = playerCanvasPlayButtonVariants;
+exports.playerCanvasSkipButtonVariants = playerCanvasSkipButtonVariants;
 exports.sectionVariants = sectionVariants;
 exports.toggleVariants = toggleVariants;
+exports.toolBarCanvasButtonVariants = toolBarCanvasButtonVariants;
 exports.useFormField = useFormField;
 exports.useIsMobile = useIsMobile;
 exports.useSidebar = useSidebar;