create-bubbles 0.1.25 → 0.1.27

package/template-vp-react-shadcn/src/components/Player/VideoJS/index.tsx

@@ -1,97 +1,109 @@
-import { createPlayer } from "@videojs/react";
-import { HlsVideo } from "@videojs/react/media/hls-video";
-import { Video, VideoSkin, videoFeatures } from "@videojs/react/video";
-import "@videojs/react/video/skin.css";
-import type { ReactNode, VideoHTMLAttributes } from "react";
+import { createPlayer } from '@videojs/react'
+import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'
+import { Video, VideoSkin, videoFeatures } from '@videojs/react/video'
 
-import { cn } from "@/lib/utils";
+import '@videojs/react/video/skin.css'
+import type { ReactNode, VideoHTMLAttributes } from 'react'
+
+import { cn } from '@/lib/utils'
 
 export const VIDEO_JS_SOURCE_TYPES = {
-  AUTO: "auto",
-  HLS: "hls",
-  MP4: "mp4",
-  NATIVE: "native",
-} as const;
+  AUTO: 'auto',
+  HLS: 'hls',
+  MP4: 'mp4',
+  NATIVE: 'native',
+} as const
 
-export type VideoJSSourceType = (typeof VIDEO_JS_SOURCE_TYPES)[keyof typeof VIDEO_JS_SOURCE_TYPES];
+export type VideoJSSourceType =
+  (typeof VIDEO_JS_SOURCE_TYPES)[keyof typeof VIDEO_JS_SOURCE_TYPES]
 
 export type VideoJSSource = {
-  src: string;
-  type?: string;
-  sourceType?: Exclude<VideoJSSourceType, "auto">;
-};
+  src: string
+  type?: string
+  sourceType?: Exclude<VideoJSSourceType, 'auto'>
+}
 
-type VideoJSPreload = "" | "none" | "metadata" | "auto";
+type VideoJSPreload = '' | 'none' | 'metadata' | 'auto'
 
 type NativeVideoProps = Omit<
   VideoHTMLAttributes<HTMLVideoElement>,
-  "children" | "className" | "controls" | "poster" | "preload" | "src"
->;
+  'children' | 'className' | 'controls' | 'poster' | 'preload' | 'src'
+>
 
 export type VideoJSProps = NativeVideoProps & {
-  src?: string;
-  type?: string;
-  sources?: VideoJSSource[];
-  sourceType?: VideoJSSourceType;
-  poster?: string;
-  className?: string;
-  videoClassName?: string;
-  preload?: VideoJSPreload;
-  hlsConfig?: Record<string, unknown>;
-  hlsDebug?: boolean;
-  preferPlayback?: "mse" | "native";
-  children?: ReactNode;
-};
+  src?: string
+  type?: string
+  sources?: VideoJSSource[]
+  sourceType?: VideoJSSourceType
+  poster?: string
+  className?: string
+  videoClassName?: string
+  preload?: VideoJSPreload
+  hlsConfig?: Record<string, unknown>
+  hlsDebug?: boolean
+  preferPlayback?: 'mse' | 'native'
+  children?: ReactNode
+}
 
 const VideoJSPlayer = createPlayer({
   features: videoFeatures,
-  displayName: "VideoJS",
-});
+  displayName: 'VideoJS',
+})
 
-const HLS_MIME_TYPES = new Set(["application/vnd.apple.mpegurl", "application/x-mpegurl"]);
+const HLS_MIME_TYPES = new Set([
+  'application/vnd.apple.mpegurl',
+  'application/x-mpegurl',
+])
 
-const MP4_MIME_TYPES = new Set(["video/mp4", "application/mp4"]);
+const MP4_MIME_TYPES = new Set(['video/mp4', 'application/mp4'])
 
-const getSourceList = ({ src, type, sources }: Pick<VideoJSProps, "src" | "type" | "sources">) => {
+const getSourceList = ({
+  src,
+  type,
+  sources,
+}: Pick<VideoJSProps, 'src' | 'type' | 'sources'>) => {
   if (sources?.length) {
-    return sources;
+    return sources
   }
 
-  return src ? [{ src, type }] : [];
-};
+  return src ? [{ src, type }] : []
+}
 
-const getUrlPath = (src: string) => src.split(/[?#]/)[0]?.toLowerCase() ?? "";
+const getUrlPath = (src: string) => src.split(/[?#]/)[0]?.toLowerCase() ?? ''
 
-const inferSourceType = (source: VideoJSSource, fallback: VideoJSSourceType) => {
+const inferSourceType = (
+  source: VideoJSSource,
+  fallback: VideoJSSourceType,
+) => {
   if (source.sourceType) {
-    return source.sourceType;
+    return source.sourceType
   }
 
   if (fallback !== VIDEO_JS_SOURCE_TYPES.AUTO) {
-    return fallback;
+    return fallback
   }
 
-  const mimeType = source.type?.toLowerCase();
-  const path = getUrlPath(source.src);
+  const mimeType = source.type?.toLowerCase()
+  const path = getUrlPath(source.src)
 
   if (mimeType && HLS_MIME_TYPES.has(mimeType)) {
-    return VIDEO_JS_SOURCE_TYPES.HLS;
+    return VIDEO_JS_SOURCE_TYPES.HLS
   }
 
-  if (path.endsWith(".m3u8")) {
-    return VIDEO_JS_SOURCE_TYPES.HLS;
+  if (path.endsWith('.m3u8')) {
+    return VIDEO_JS_SOURCE_TYPES.HLS
   }
 
   if (mimeType && MP4_MIME_TYPES.has(mimeType)) {
-    return VIDEO_JS_SOURCE_TYPES.MP4;
+    return VIDEO_JS_SOURCE_TYPES.MP4
   }
 
-  if (path.endsWith(".mp4")) {
-    return VIDEO_JS_SOURCE_TYPES.MP4;
+  if (path.endsWith('.mp4')) {
+    return VIDEO_JS_SOURCE_TYPES.MP4
   }
 
-  return VIDEO_JS_SOURCE_TYPES.NATIVE;
-};
+  return VIDEO_JS_SOURCE_TYPES.NATIVE
+}
 
 const VideoJS = ({
   src,
@@ -101,63 +113,67 @@ const VideoJS = ({
   poster,
   className,
   videoClassName,
-  preload = "metadata",
+  preload = 'metadata',
   playsInline = true,
   hlsConfig,
   hlsDebug = false,
-  preferPlayback = "mse",
+  preferPlayback = 'mse',
   children,
   ...videoProps
 }: VideoJSProps) => {
-  const sourceList = getSourceList({ src, type, sources });
-  const primarySource = sourceList[0];
+  const sourceList = getSourceList({ src, type, sources })
+  const primarySource = sourceList[0]
 
   if (!primarySource) {
-    return null;
+    return null
   }
 
-  const resolvedSourceType = inferSourceType(primarySource, sourceType);
-  const isHls = resolvedSourceType === VIDEO_JS_SOURCE_TYPES.HLS;
+  const resolvedSourceType = inferSourceType(primarySource, sourceType)
+  const isHls = resolvedSourceType === VIDEO_JS_SOURCE_TYPES.HLS
 
   return (
-    <VideoJSPlayer.Provider>
+    <VideoJSPlayer.Player poster={poster}>
       <VideoSkin
-        poster={poster}
         className={cn(
-          "aspect-video w-full overflow-hidden rounded-lg bg-black shadow-sm",
+          'aspect-video w-full overflow-hidden rounded-lg bg-black shadow-sm',
           className,
         )}
       >
         {isHls ? (
-          <HlsVideo
+          <HlsJsVideo
             {...videoProps}
-            src={primarySource.src}
-            type={primarySource.type ?? "application/vnd.apple.mpegurl"}
+            source={{
+              src: primarySource.src,
+              type: 'hls',
+              preferPlayback,
+              engine: { hlsJs: { ...hlsConfig, debug: hlsDebug } },
+            }}
             preload={preload}
             playsInline={playsInline}
-            config={hlsConfig}
-            debug={hlsDebug}
-            preferPlayback={preferPlayback}
-            className={cn("h-full w-full", videoClassName)}
+            className={cn('h-full w-full', videoClassName)}
           >
             {children}
-          </HlsVideo>
+          </HlsJsVideo>
         ) : (
           <Video
             {...videoProps}
             preload={preload}
             playsInline={playsInline}
-            className={cn("h-full w-full", videoClassName)}
+            className={cn('h-full w-full', videoClassName)}
           >
             {sourceList.map((source) => (
-              <source key={`${source.src}-${source.type}`} src={source.src} type={source.type} />
+              <source
+                key={`${source.src}-${source.type}`}
+                src={source.src}
+                type={source.type}
+              />
             ))}
             {children}
           </Video>
         )}
       </VideoSkin>
-    </VideoJSPlayer.Provider>
-  );
-};
+    </VideoJSPlayer.Player>
+  )
+}
 
-export default VideoJS;
+export default VideoJS

package/template-vp-react-shadcn/src/components/Player/index.ts

@@ -4,4 +4,4 @@ export {
   type VideoJSProps,
   type VideoJSSource,
   type VideoJSSourceType,
-} from "./VideoJS";
+} from './VideoJS'

package/template-vp-react-shadcn/src/components/ui/button.tsx

@@ -1,67 +1,60 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
         destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
         xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
           "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
-);
+)
 
 function Button({
   className,
-  variant = "default",
-  size = "default",
-  asChild = false,
+  variant = 'default',
+  size = 'default',
   ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot.Root : "button";
-
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
   return (
-    <Comp
+    <ButtonPrimitive
       data-slot="button"
       data-variant={variant}
       data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }

package/template-vp-react-shadcn/src/components/ui/spinner.tsx

@@ -1,17 +1,18 @@
-import { Loader2Icon } from "lucide-react";
-import type { ComponentProps } from "react";
+/* oxlint-disable jsx-a11y/prefer-tag-over-role -- SVG 加载图标需要显式声明状态角色。 */
+import { Loader2Icon } from 'lucide-react'
+import type { ComponentProps } from 'react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-function Spinner({ className, ...props }: ComponentProps<"svg">) {
+function Spinner({ className, ...props }: ComponentProps<'svg'>) {
   return (
     <Loader2Icon
       role="status"
       aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
+      className={cn('size-4 animate-spin', className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Spinner };
+export { Spinner }

package/template-vp-react-shadcn/src/components/ui/toast.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { Toast as ToastPrimitive } from '@base-ui/react/toast'
+import {
+  XIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from 'lucide-react'
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const toast = ToastPrimitive.createToastManager()
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        'pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        'group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        '[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]',
+        'h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]',
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        'data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]',
+        'data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]',
+        '[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]',
+        'data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        'flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn('text-sm font-medium', className)}
+      {...props}
+    />
+  )
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function ToastAction({
+  className,
+  render = <Button variant="outline" size="sm" />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn('shrink-0', className)}
+      {...props}
+    />
+  )
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button variant="ghost" size="icon-sm" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <XIcon aria-hidden="true" />}
+    </ToastPrimitive.Close>
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null
+
+  if (type === 'success') {
+    icon = <CircleCheckIcon aria-hidden="true" />
+  }
+
+  if (type === 'info') {
+    icon = <InfoIcon aria-hidden="true" />
+  }
+
+  if (type === 'warning') {
+    icon = <TriangleAlertIcon aria-hidden="true" />
+  }
+
+  if (type === 'error') {
+    icon = <OctagonXIcon className="text-destructive" aria-hidden="true" />
+  }
+
+  if (type === 'loading') {
+    icon = <Loader2Icon className="animate-spin" aria-hidden="true" />
+  }
+
+  if (!icon) {
+    return null
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager()
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ))
+}
+
+function Toaster({
+  children,
+  toastManager = toast,
+  ...props
+}: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider toastManager={toastManager} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  )
+}
+
+const createToastManager = ToastPrimitive.createToastManager
+const useToastManager = ToastPrimitive.useToastManager
+
+export {
+  Toaster,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  createToastManager,
+  toast,
+  useToastManager,
+}

package/template-vp-react-shadcn/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }

package/template-vp-react-shadcn/src/main.tsx

@@ -1,5 +1,6 @@
-import { createRoot } from "react-dom/client";
-import "./styles/index.css";
-import App from "./App.tsx";
+import { createRoot } from 'react-dom/client'
 
-createRoot(document.getElementById("root")!).render(<App />);
+import './styles/index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(<App />)