@srcroot/ui 0.0.55 → 0.0.58

package/src/registry/ui/chatbot.tsx

@@ -1,25 +1,31 @@
-"use client"
+"use client"
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { FaComments, FaTimes, FaPaperPlane } from "react-icons/fa"
 import { cn } from "@/lib/utils"
 
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { LuMessageSquare, LuX } from "react-icons/lu"
 
-const Chatbot = React.forwardRef<
+// --- Primitives ---
+
+const ChatbotContainer = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
         className={cn(
-            "flex flex-col w-full h-[500px] border rounded-lg bg-background text-foreground shadow-sm overflow-hidden",
+            "flex flex-col w-full border rounded-xl bg-background text-foreground shadow-2xl overflow-hidden",
             className
         )}
         {...props}
     />
 ))
-Chatbot.displayName = "Chatbot"
+ChatbotContainer.displayName = "ChatbotContainer"
 
 const ChatbotHeader = React.forwardRef<
     HTMLDivElement,
@@ -28,7 +34,7 @@ const ChatbotHeader = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "flex items-center px-4 py-3 border-b bg-muted/40",
+            "flex items-center justify-between px-4 py-3 border-b bg-muted/40",
             className
         )}
         {...props}
@@ -42,7 +48,7 @@ const ChatbotContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <ScrollArea
         ref={ref}
-        className={cn("flex-1 p-2 space-y-4 flex flex-col", className)}
+        className={cn("flex-1 p-4", className)}
         scrollbarSize="thin"
         {...props}
     />
@@ -50,7 +56,7 @@ const ChatbotContent = React.forwardRef<
 ChatbotContent.displayName = "ChatbotContent"
 
 const chatbotMessageVariants = cva(
-    "max-w-[80%] rounded-2xl px-4 py-2 text-sm break-words",
+    "max-w-[85%] rounded-2xl px-4 py-2 text-sm break-words shadow-sm",
     {
         variants: {
             variant: {
@@ -71,9 +77,14 @@ const ChatbotMessage = React.forwardRef<
 >(({ className, variant, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn(chatbotMessageVariants({ variant }), className)}
-        {...props}
-    />
+        // Wrapper div for alignment if needed, but styling handles float-like behavior
+        className={cn("mb-4 flex", variant === "user" ? "justify-end" : "justify-start")}
+    >
+        <div
+            className={cn(chatbotMessageVariants({ variant }), className)}
+            {...props}
+        />
+    </div>
 ))
 ChatbotMessage.displayName = "ChatbotMessage"
 
@@ -83,17 +94,79 @@ const ChatbotFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn("flex items-center p-3 border-t bg-background rounded-b-lg", className)}
+        className={cn("flex items-center gap-2 p-3 border-t bg-background", className)}
         {...props}
     />
 ))
 ChatbotFooter.displayName = "ChatbotFooter"
 
+// --- Main Widget Component ---
+
+export function Chatbot() {
+    const [isOpen, setIsOpen] = React.useState(false)
+
+    return (
+        <>
+            {/* Chat Window - Fixed Position (left of dock) */}
+            {isOpen && (
+                <div className="fixed bottom-4 right-16 md:bottom-6 md:right-32 z-50 w-[calc(100vw-80px)] sm:w-[350px] h-[500px] max-h-[70vh] animate-in slide-in-from-right-10 fade-in duration-300">
+                    <ChatbotContainer className="h-full">
+                        <ChatbotHeader>
+                            <div className="flex items-center gap-2">
+                                <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+                                <span className="font-semibold text-sm">AI Assistant</span>
+                            </div>
+                            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setIsOpen(false)}>
+                                <FaTimes className="h-4 w-4" />
+                            </Button>
+                        </ChatbotHeader>
+
+                        <ChatbotContent>
+                            <div className="flex flex-col">
+                                <ChatbotMessage variant="bot">
+                                    Hello! 👋 I'm your AI assistant. How can I help you build your next project?
+                                </ChatbotMessage>
+                                <ChatbotMessage variant="user">
+                                    I need help with the new dashboard layout.
+                                </ChatbotMessage>
+                                <ChatbotMessage variant="bot">
+                                    Sure thing! I can help you with components, layout structures, or styling. What specifically are you looking for?
+                                </ChatbotMessage>
+                            </div>
+                        </ChatbotContent>
+
+                        <ChatbotFooter>
+                            <Input placeholder="Type a message..." className="flex-1" />
+                            <Button size="icon" type="submit">
+                                <FaPaperPlane className="h-4 w-4" />
+                            </Button>
+                        </ChatbotFooter>
+                    </ChatbotContainer>
+                </div >
+            )
+            }
+
+            {/* Trigger Button */}
+            <Button
+                variant="default"
+                size="icon"
+                onClick={() => setIsOpen(!isOpen)}
+                className={cn(
+                    "rounded-full h-10 w-10 md:h-16 md:w-16 shadow-lg transition-all duration-300 hover:scale-110",
+                    isOpen ? "bg-muted text-foreground hover:bg-muted/80" : "bg-primary text-primary-foreground"
+                )}
+            >
+                {isOpen ? <LuX className="!h-5 !w-5 md:!h-8 md:!w-8" /> : <LuMessageSquare className="!h-5 !w-5 md:!h-8 md:!w-8" />}
+            </Button>
+        </>
+    )
+}
+
+// Export parts if still needed by other consumers (optional, but good practice)
 export {
-    Chatbot,
+    ChatbotContainer,
     ChatbotHeader,
     ChatbotContent,
     ChatbotMessage,
     ChatbotFooter,
 }
-

package/src/registry/ui/checkbox.tsx

@@ -1,94 +1,93 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
-    /**
-     * Whether the checkbox is checked
-     */
-    checked?: boolean
-    /**
-     * Callback when the checked state changes
-     */
-    onCheckedChange?: (checked: boolean) => void
-    /**
-     * Whether the checkbox is disabled
-     */
-    disabled?: boolean
-    /**
-     * The default checked state (for uncontrolled mode)
-     */
-    defaultChecked?: boolean
-}
-
-/**
- * Checkbox component with keyboard accessibility
- * 
- * @example
- * const [checked, setChecked] = useState(false)
- * <Checkbox checked={checked} onCheckedChange={setChecked} />
- */
-const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
-    ({ className, checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled, ...props }, ref) => {
-        const [isChecked, setIsChecked] = React.useState(defaultChecked)
-
-        const checked = controlledChecked !== undefined ? controlledChecked : isChecked
-
-        const handleClick = () => {
-            if (!disabled) {
-                const newChecked = !checked
-                if (controlledChecked === undefined) {
-                    setIsChecked(newChecked)
-                }
-                onCheckedChange?.(newChecked)
-            }
-        }
-
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            if (e.key === " " || e.key === "Enter") {
-                e.preventDefault()
-                handleClick()
-            }
-        }
-
-        return (
-            <button
-                type="button"
-                role="checkbox"
-                aria-checked={checked}
-                aria-disabled={disabled}
-                disabled={disabled}
-                ref={ref}
-                className={cn(
-                    "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-                    checked && "bg-primary text-primary-foreground",
-                    className
-                )}
-                onClick={handleClick}
-                onKeyDown={handleKeyDown}
-                {...props}
-            >
-                {checked && (
-                    <svg
-                        className="h-full w-full"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        strokeWidth={3}
-                    >
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            d="M5 13l4 4L19 7"
-                        />
-                    </svg>
-                )}
-            </button>
-        )
-    }
-)
-Checkbox.displayName = "Checkbox"
-
-export { Checkbox }
-
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean
+    /**
+     * Callback when the checked state changes
+     */
+    onCheckedChange?: (checked: boolean) => void
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean
+    /**
+     * The default checked state (for uncontrolled mode)
+     */
+    defaultChecked?: boolean
+}
+
+/**
+ * Checkbox component with keyboard accessibility
+ * 
+ * @example
+ * const [checked, setChecked] = useState(false)
+ * <Checkbox checked={checked} onCheckedChange={setChecked} />
+ */
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+    ({ className, checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled, ...props }, ref) => {
+        const [isChecked, setIsChecked] = React.useState(defaultChecked)
+
+        const checked = controlledChecked !== undefined ? controlledChecked : isChecked
+
+        const handleClick = () => {
+            if (!disabled) {
+                const newChecked = !checked
+                if (controlledChecked === undefined) {
+                    setIsChecked(newChecked)
+                }
+                onCheckedChange?.(newChecked)
+            }
+        }
+
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault()
+                handleClick()
+            }
+        }
+
+        return (
+            <button
+                type="button"
+                role="checkbox"
+                aria-checked={checked}
+                aria-disabled={disabled}
+                disabled={disabled}
+                ref={ref}
+                className={cn(
+                    "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    checked && "bg-primary text-primary-foreground",
+                    className
+                )}
+                onClick={handleClick}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                {checked && (
+                    <svg
+                        className="h-full w-full"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={3}
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M5 13l4 4L19 7"
+                        />
+                    </svg>
+                )}
+            </button>
+        )
+    }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/src/registry/ui/collapsible.tsx

@@ -1,108 +1,107 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Slot } from "@/components/ui/slot"
-
-interface CollapsibleContextValue {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-}
-
-const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
-
-interface CollapsibleProps {
-    children: React.ReactNode
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    defaultOpen?: boolean
-    className?: string
-}
-
-/**
- * Collapsible component for expandable content
- * 
- * @example
- * <Collapsible>
- *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
- *   <CollapsibleContent>
- *     Hidden content here
- *   </CollapsibleContent>
- * </Collapsible>
- */
-const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
-    ({ children, open: controlledOpen, onOpenChange, defaultOpen = false, className }, ref) => {
-        const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
-
-        const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
-        const setOpen = onOpenChange || setUncontrolledOpen
-
-        return (
-            <CollapsibleContext.Provider value={{ open, onOpenChange: setOpen }}>
-                <div ref={ref} className={className} data-state={open ? "open" : "closed"}>
-                    {children}
-                </div>
-            </CollapsibleContext.Provider>
-        )
-    }
-)
-Collapsible.displayName = "Collapsible"
-
-interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    asChild?: boolean
-}
-
-const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
-    ({ className, children, asChild, onClick, ...props }, ref) => {
-        const context = React.useContext(CollapsibleContext)
-        if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible")
-
-        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-            onClick?.(e)
-            context.onOpenChange(!context.open)
-        }
-
-        const Comp = asChild ? Slot : "button"
-
-        return (
-            <Comp
-                ref={ref}
-                type="button"
-                aria-expanded={context.open}
-                className={className}
-                onClick={handleClick}
-                {...props}
-            >
-                {children}
-            </Comp>
-        )
-    }
-)
-CollapsibleTrigger.displayName = "CollapsibleTrigger"
-
-const CollapsibleContent = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-    const context = React.useContext(CollapsibleContext)
-    if (!context) throw new Error("CollapsibleContent must be used within Collapsible")
-
-    return (
-        <div
-            ref={ref}
-            className={cn(
-                "overflow-hidden transition-all",
-                context.open ? "animate-collapsible-down" : "animate-collapsible-up hidden",
-                className
-            )}
-            data-state={context.open ? "open" : "closed"}
-            {...props}
-        >
-            {children}
-        </div>
-    )
-})
-CollapsibleContent.displayName = "CollapsibleContent"
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
-
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
+
+interface CollapsibleContextValue {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
+
+interface CollapsibleProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+    className?: string
+}
+
+/**
+ * Collapsible component for expandable content
+ * 
+ * @example
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     Hidden content here
+ *   </CollapsibleContent>
+ * </Collapsible>
+ */
+const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
+    ({ children, open: controlledOpen, onOpenChange, defaultOpen = false, className }, ref) => {
+        const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+
+        const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
+        const setOpen = onOpenChange || setUncontrolledOpen
+
+        return (
+            <CollapsibleContext.Provider value={{ open, onOpenChange: setOpen }}>
+                <div ref={ref} className={className} data-state={open ? "open" : "closed"}>
+                    {children}
+                </div>
+            </CollapsibleContext.Provider>
+        )
+    }
+)
+Collapsible.displayName = "Collapsible"
+
+interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean
+}
+
+const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
+    ({ className, children, asChild, onClick, ...props }, ref) => {
+        const context = React.useContext(CollapsibleContext)
+        if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible")
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            context.onOpenChange(!context.open)
+        }
+
+        const Comp = asChild ? Slot : "button"
+
+        return (
+            <Comp
+                ref={ref}
+                type="button"
+                aria-expanded={context.open}
+                className={className}
+                onClick={handleClick}
+                {...props}
+            >
+                {children}
+            </Comp>
+        )
+    }
+)
+CollapsibleTrigger.displayName = "CollapsibleTrigger"
+
+const CollapsibleContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext)
+    if (!context) throw new Error("CollapsibleContent must be used within Collapsible")
+
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                "overflow-hidden transition-all",
+                context.open ? "animate-collapsible-down" : "animate-collapsible-up hidden",
+                className
+            )}
+            data-state={context.open ? "open" : "closed"}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+})
+CollapsibleContent.displayName = "CollapsibleContent"
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }