@srcroot/ui 0.0.26 → 0.0.28

package/README.md

@@ -1,6 +1,6 @@
 # @srcroot/ui
 
-A **shadcn-like** React UI library for building accessible, polymorphic web applications.
+A UI library with polymorphic, accessible React components.
 This library provides a collection of re-usable components that you can copy and paste into your apps.
 
 ## Features

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.26",
-  "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
+  "version": "0.0.28",
+  "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {
     "srcroot-ui": "./dist/index.js"

package/registry/button.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
     {
         variants: {
             variant: {

package/registry/carousel.tsx

@@ -1,3 +1,4 @@
+'use client'
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
@@ -80,7 +81,7 @@ const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
         return (
             <div ref={ref} className={cn("overflow-hidden", className)} {...props}>
                 <div
-                    className="flex transition-transform duration-300 ease-in-out"
+                    className="w-full h-full flex transition-transform duration-300 ease-in-out"
                     style={{ transform: `translateX(-${context.currentIndex * 100}%)` }}
                 >
                     {children}
@@ -97,7 +98,7 @@ const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLD
             ref={ref}
             role="group"
             aria-roledescription="slide"
-            className={cn("min-w-0 shrink-0 grow-0 basis-full", className)}
+            className={cn("min-w-0 h-full shrink-0 grow-0 basis-full", className)}
             {...props}
         />
     )
@@ -118,7 +119,7 @@ const CarouselPrevious = React.forwardRef<
             ref={ref}
             type="button"
             className={cn(
-                "absolute left-4 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full border bg-background shadow-md flex items-center justify-center",
+                "absolute left-4 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full border bg-background shadow-md flex items-center justify-center cursor-pointer",
                 "hover:bg-accent disabled:opacity-50",
                 className
             )}
@@ -149,7 +150,7 @@ const CarouselNext = React.forwardRef<
             ref={ref}
             type="button"
             className={cn(
-                "absolute right-4 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full border bg-background shadow-md flex items-center justify-center",
+                "absolute right-4 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full border bg-background shadow-md flex items-center justify-center cursor-pointer",
                 "hover:bg-accent disabled:opacity-50",
                 className
             )}

package/registry/file-upload.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
 interface FileUploadProps {
-    onChange?: (files: LuFile[]) => void
+    onChange?: (files: File[]) => void
     accept?: string
     multiple?: boolean
     maxSize?: number // in bytes
@@ -16,7 +16,7 @@ interface FileUploadProps {
 }
 
 interface UploadedFile {
-    file: LuFile
+    file: File
     preview?: string
 }
 
@@ -71,7 +71,7 @@ export function FileUpload({
             // Validate file sizes
             const oversizedFiles = fileArray.filter(f => f.size > maxSize)
             if (oversizedFiles.length > 0) {
-                setError(`LuFile(s) exceed maximum size of ${formatFileSize(maxSize)}`)
+                setError(`File(s) exceed maximum size of ${formatFileSize(maxSize)}`)
                 return
             }
 

package/registry/search.tsx

@@ -36,14 +36,14 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
         ref
     ) => {
         const [value, setValue] = React.useState(String(defaultValue))
-        const debounceRef = React.useRef<NodeJS.Timeout>()
+        const debounceRef = React.useRef<NodeJS.Timeout | null>(null)
 
         const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
             const newValue = e.target.value
             setValue(newValue)
 
             if (debounceMs > 0) {
-                clearTimeout(debounceRef.current)
+                if (debounceRef.current) clearTimeout(debounceRef.current)
                 debounceRef.current = setTimeout(() => {
                     onSearch?.(newValue)
                 }, debounceMs)
@@ -65,7 +65,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
 
         React.useEffect(() => {
             return () => {
-                clearTimeout(debounceRef.current)
+                if (debounceRef.current) clearTimeout(debounceRef.current)
             }
         }, [])
 

package/registry/sidebar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { LuPanelLeft } from "react-icons/lu"
+import { PanelLeft } from "lucide-react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
@@ -168,7 +168,10 @@ const Sidebar = React.forwardRef<
         return (
             <div
                 ref={ref}
-                className="group peer hidden md:block text-sidebar-foreground"
+                className={cn(
+                    "group peer hidden md:block text-sidebar-foreground",
+                    className
+                )}
                 data-state={state}
                 data-collapsible={state === "collapsed" ? collapsible : ""}
                 data-variant={variant}
@@ -233,7 +236,7 @@ const SidebarTrigger = React.forwardRef<
             }}
             {...props}
         >
-            <LuPanelLeft />
+            <PanelLeft />
             <span className="sr-only">Toggle Sidebar</span>
         </Button>
     )