@srcroot/ui 0.0.61 → 0.0.63

package/src/registry/ui/pagination.tsx

@@ -1,12 +1,14 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "./button"
+"use client";
 
-interface PaginationProps extends React.HTMLAttributes<HTMLElement> { }
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "./button";
+
+interface PaginationProps extends React.HTMLAttributes<HTMLElement> {}
 
 /**
  * Pagination component
- * 
+ *
  * @example
  * <Pagination>
  *   <PaginationContent>
@@ -26,124 +28,136 @@ interface PaginationProps extends React.HTMLAttributes<HTMLElement> { }
  * </Pagination>
  */
 const Pagination = ({ className, ...props }: PaginationProps) => (
-    <nav
-        role="navigation"
-        aria-label="pagination"
-        className={cn("mx-auto flex w-full justify-center", className)}
-        {...props}
-    />
-)
-Pagination.displayName = "Pagination"
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
 
 const PaginationContent = React.forwardRef<
-    HTMLUListElement,
-    React.HTMLAttributes<HTMLUListElement>
+  HTMLUListElement,
+  React.HTMLAttributes<HTMLUListElement>
 >(({ className, ...props }, ref) => (
-    <ul
-        ref={ref}
-        className={cn("flex flex-row items-center gap-1", className)}
-        {...props}
-    />
-))
-PaginationContent.displayName = "PaginationContent"
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
 
 const PaginationItem = React.forwardRef<
-    HTMLLIElement,
-    React.LiHTMLAttributes<HTMLLIElement>
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
 >(({ className, ...props }, ref) => (
-    <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
 
 interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    isActive?: boolean
-    size?: "default" | "sm" | "lg" | "icon"
-    children?: React.ReactNode
-    className?: string
-    href?: string
+  isActive?: boolean;
+  size?: "default" | "sm" | "lg" | "icon";
+  children?: React.ReactNode;
+  className?: string;
+  href?: string;
 }
 
 const PaginationLink = ({
-    className,
-    isActive,
-    size = "icon",
-    ...props
+  className,
+  isActive,
+  size = "icon",
+  ...props
 }: PaginationLinkProps) => (
-    <a
-        aria-current={isActive ? "page" : undefined}
-        className={cn(
-            buttonVariants({
-                variant: isActive ? "outline" : "ghost",
-                size,
-            }),
-            className
-        )}
-        {...props}
-    />
-)
-PaginationLink.displayName = "PaginationLink"
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
 
 const PaginationPrevious = ({
-    className,
-    ...props
+  className,
+  ...props
 }: React.ComponentProps<typeof PaginationLink>) => (
-    <PaginationLink
-        aria-label="Go to previous page"
-        size="default"
-        className={cn("gap-1 pl-2.5", className)}
-        {...props}
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <svg
+      className="h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
     >
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-        </svg>
-        <span>Previous</span>
-    </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+    </svg>
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
 
 const PaginationNext = ({
-    className,
-    ...props
+  className,
+  ...props
 }: React.ComponentProps<typeof PaginationLink>) => (
-    <PaginationLink
-        aria-label="Go to next page"
-        size="default"
-        className={cn("gap-1 pr-2.5", className)}
-        {...props}
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <svg
+      className="h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
     >
-        <span>Next</span>
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-        </svg>
-    </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+    </svg>
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
 
 const PaginationEllipsis = ({
-    className,
-    ...props
+  className,
+  ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => (
-    <span
-        aria-hidden
-        className={cn("flex h-9 w-9 items-center justify-center", className)}
-        {...props}
-    >
-        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="1" />
-            <circle cx="19" cy="12" r="1" />
-            <circle cx="5" cy="12" r="1" />
-        </svg>
-        <span className="sr-only">More pages</span>
-    </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export {
-    Pagination,
-    PaginationContent,
-    PaginationLink,
-    PaginationItem,
-    PaginationPrevious,
-    PaginationNext,
-    PaginationEllipsis,
-}
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/registry/ui/radio.tsx

@@ -1,24 +1,30 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 interface RadioGroupContextValue {
-    value: string
-    onValueChange: (value: string) => void
-    name: string
+  value: string;
+  onValueChange: (value: string) => void;
+  name: string;
 }
 
-const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null)
+const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(
+  null,
+);
 
-interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
-    value?: string
-    onValueChange?: (value: string) => void
-    defaultValue?: string
-    name?: string
+interface RadioGroupProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  defaultValue?: string;
+  name?: string;
 }
 
 /**
  * RadioGroup component
- * 
+ *
  * @example
  * <RadioGroup value={value} onValueChange={setValue}>
  *   <div className="flex items-center space-x-2">
@@ -32,68 +38,92 @@ interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
  * </RadioGroup>
  */
 const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
-    ({ className, value: controlledValue, onValueChange, defaultValue = "", name = "radio-group", children, ...props }, ref) => {
-        const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+  (
+    {
+      className,
+      value: controlledValue,
+      onValueChange,
+      defaultValue = "",
+      name = "radio-group",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolledValue, setUncontrolledValue] =
+      React.useState(defaultValue);
 
-        const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
-        const setValue = onValueChange || setUncontrolledValue
+    const value =
+      controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    const setValue = onValueChange || setUncontrolledValue;
 
-        return (
-            <RadioGroupContext.Provider value={{ value, onValueChange: setValue, name }}>
-                <div ref={ref} role="radiogroup" className={cn("grid gap-2", className)} {...props}>
-                    {children}
-                </div>
-            </RadioGroupContext.Provider>
-        )
-    }
-)
-RadioGroup.displayName = "RadioGroup"
+    return (
+      <RadioGroupContext.Provider
+        value={{ value, onValueChange: setValue, name }}
+      >
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn("grid gap-2", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+RadioGroup.displayName = "RadioGroup";
 
-interface RadioGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
-    value: string
+interface RadioGroupItemProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
+  value: string;
 }
 
 const RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioGroupItemProps>(
-    ({ className, value, ...props }, ref) => {
-        const context = React.useContext(RadioGroupContext)
-        if (!context) throw new Error("RadioGroupItem must be used within RadioGroup")
+  ({ className, value, ...props }, ref) => {
+    const context = React.useContext(RadioGroupContext);
+    if (!context)
+      throw new Error("RadioGroupItem must be used within RadioGroup");
 
-        const isSelected = context.value === value
+    const isSelected = context.value === value;
 
-        const handleClick = () => {
-            context.onValueChange(value)
-        }
+    const handleClick = () => {
+      context.onValueChange(value);
+    };
 
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            if (e.key === " " || e.key === "Enter") {
-                e.preventDefault()
-                handleClick()
-            }
-        }
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        handleClick();
+      }
+    };
 
-        return (
-            <button
-                ref={ref}
-                type="button"
-                role="radio"
-                aria-checked={isSelected}
-                className={cn(
-                    "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-                    className
-                )}
-                onClick={handleClick}
-                onKeyDown={handleKeyDown}
-                {...props}
-            >
-                {isSelected && (
-                    <span className="flex items-center justify-center">
-                        <span className="h-2 w-2 rounded-full bg-primary" />
-                    </span>
-                )}
-            </button>
-        )
-    }
-)
-RadioGroupItem.displayName = "RadioGroupItem"
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="radio"
+        aria-checked={isSelected}
+        className={cn(
+          "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        {isSelected && (
+          <span className="flex items-center justify-center">
+            <span className="h-2 w-2 rounded-full bg-primary" />
+          </span>
+        )}
+      </button>
+    );
+  },
+);
+RadioGroupItem.displayName = "RadioGroupItem";
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };

package/src/registry/ui/skeleton.tsx

@@ -1,26 +1,27 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 /**
  * Skeleton loading placeholder
- * 
+ *
  * @example
  * <Skeleton className="h-4 w-[200px]" />
- * 
+ *
  * @example
  * // Circle skeleton for avatars
  * <Skeleton className="h-12 w-12 rounded-full" />
  */
 const Skeleton = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-    <div
-        ref={ref}
-        className={cn("animate-pulse rounded-md bg-primary/10", className)}
-        {...props}
-    />
-))
-Skeleton.displayName = "Skeleton"
+  <div
+    ref={ref}
+    className={cn("animate-pulse rounded-md bg-primary/10", className)}
+    {...props}
+  />
+));
+Skeleton.displayName = "Skeleton";
 
-export { Skeleton }
+export { Skeleton };

package/src/registry/ui/slot.tsx

@@ -1,69 +1,70 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode
+  children?: React.ReactNode;
 }
 
 const Slot = React.forwardRef<HTMLElement, SlotProps>(
-    ({ children, className, ...props }, ref) => {
-        if (React.isValidElement(children)) {
-            const child = children as React.ReactElement<any>
+  ({ children, className, ...props }, ref) => {
+    if (React.isValidElement(children)) {
+      const child = children as React.ReactElement<any>;
 
-            const mergedProps: Record<string, any> = { ...props }
-            if (className) {
-                mergedProps.className = className
-            }
+      const mergedProps: Record<string, any> = { ...props };
+      if (className) {
+        mergedProps.className = className;
+      }
 
-            for (const propName in child.props) {
-                const slotPropValue = mergedProps[propName]
-                const childPropValue = child.props[propName]
+      for (const propName in child.props) {
+        const slotPropValue = mergedProps[propName];
+        const childPropValue = child.props[propName];
 
-                if (
-                    /^on[A-Z]/.test(propName) &&
-                    typeof slotPropValue === "function" &&
-                    typeof childPropValue === "function"
-                ) {
-                    mergedProps[propName] = (...args: any[]) => {
-                        childPropValue(...args)
-                        if (!args[0]?.defaultPrevented) {
-                            slotPropValue(...args)
-                        }
-                    }
-                } else if (propName === "style") {
-                    mergedProps[propName] = { ...slotPropValue, ...childPropValue }
-                } else if (propName === "className") {
-                    mergedProps[propName] = cn(slotPropValue, childPropValue)
-                } else {
-                    mergedProps[propName] = childPropValue
-                }
+        if (
+          /^on[A-Z]/.test(propName) &&
+          typeof slotPropValue === "function" &&
+          typeof childPropValue === "function"
+        ) {
+          mergedProps[propName] = (...args: any[]) => {
+            childPropValue(...args);
+            if (!args[0]?.defaultPrevented) {
+              slotPropValue(...args);
             }
-
-            return React.cloneElement(child, {
-                ...mergedProps,
-                ref: (node: HTMLElement | null) => {
-                    // Handle both function and object refs for the forwarded ref
-                    if (typeof ref === "function") {
-                        ref(node)
-                    } else if (ref && "current" in ref) {
-                        (ref as any).current = node
-                    }
-
-                    // Handle the child's existing ref
-                    const childRef = (child as any).ref
-                    if (typeof childRef === "function") {
-                        childRef(node)
-                    } else if (childRef && "current" in childRef) {
-                        (childRef as any).current = node
-                    }
-                },
-            })
+          };
+        } else if (propName === "style") {
+          mergedProps[propName] = { ...slotPropValue, ...childPropValue };
+        } else if (propName === "className") {
+          mergedProps[propName] = cn(slotPropValue, childPropValue);
+        } else {
+          mergedProps[propName] = childPropValue;
         }
+      }
 
-        return null
+      return React.cloneElement(child, {
+        ...mergedProps,
+        ref: (node: HTMLElement | null) => {
+          // Handle both function and object refs for the forwarded ref
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref && "current" in ref) {
+            (ref as any).current = node;
+          }
+
+          // Handle the child's existing ref
+          const childRef = (child as any).ref;
+          if (typeof childRef === "function") {
+            childRef(node);
+          } else if (childRef && "current" in childRef) {
+            (childRef as any).current = node;
+          }
+        },
+      });
     }
-)
 
-Slot.displayName = "Slot"
+    return null;
+  },
+);
+
+Slot.displayName = "Slot";
 
-export { Slot }
+export { Slot };