@srcroot/ui 0.0.54 → 0.0.56

package/src/registry/ui/breadcrumb.tsx

@@ -1,150 +1,147 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Slot } from "@/components/ui/slot"
-
-/**
- * Breadcrumb navigation component
- * 
- * @example
- * <Breadcrumb>
- *   <BreadcrumbList>
- *     <BreadcrumbItem>
- *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
- *     </BreadcrumbItem>
- *     <BreadcrumbSeparator />
- *     <BreadcrumbItem>
- *       <BreadcrumbPage>Current Page</BreadcrumbPage>
- *     </BreadcrumbItem>
- *   </BreadcrumbList>
- * </Breadcrumb>
- */
-
-const Breadcrumb = React.forwardRef<
-    HTMLElement,
-    React.HTMLAttributes<HTMLElement>
->(({ ...props }, ref) => (
-    <nav ref={ref} aria-label="breadcrumb" {...props} />
-))
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-    HTMLOListElement,
-    React.OlHTMLAttributes<HTMLOListElement>
->(({ className, ...props }, ref) => (
-    <ol
-        ref={ref}
-        className={cn(
-            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-            className
-        )}
-        {...props}
-    />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-    HTMLLIElement,
-    React.LiHTMLAttributes<HTMLLIElement>
->(({ className, ...props }, ref) => (
-    <li
-        ref={ref}
-        className={cn("inline-flex items-center gap-1.5", className)}
-        {...props}
-    />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    asChild?: boolean
-}
-
-const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-    ({ asChild, className, children, ...props }, ref) => {
-        const Comp = asChild ? Slot : "a"
-
-        return (
-            <Comp
-                ref={ref}
-                className={cn("transition-colors hover:text-foreground", className)}
-                {...props}
-            >
-                {children}
-            </Comp>
-        )
-    }
-)
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-    HTMLSpanElement,
-    React.HTMLAttributes<HTMLSpanElement>
->(({ className, ...props }, ref) => (
-    <span
-        ref={ref}
-        role="link"
-        aria-disabled="true"
-        aria-current="page"
-        className={cn("font-normal text-foreground", className)}
-        {...props}
-    />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-    children,
-    className,
-    ...props
-}: React.LiHTMLAttributes<HTMLLIElement>) => (
-    <li
-        role="presentation"
-        aria-hidden="true"
-        className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
-        {...props}
-    >
-        {children || (
-            <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>
-        )}
-    </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => (
-    <span
-        role="presentation"
-        aria-hidden="true"
-        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</span>
-    </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
-
-export {
-    Breadcrumb,
-    BreadcrumbList,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-    BreadcrumbEllipsis,
-}
-
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
+
+/**
+ * Breadcrumb navigation component
+ * 
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+
+const Breadcrumb = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ ...props }, ref) => (
+    <nav ref={ref} aria-label="breadcrumb" {...props} />
+))
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+    HTMLOListElement,
+    React.OlHTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+            className
+        )}
+        {...props}
+    />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+    HTMLLIElement,
+    React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        {...props}
+    />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    asChild?: boolean
+}
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+    ({ asChild, className, children, ...props }, ref) => {
+        const Comp = asChild ? Slot : "a"
+
+        return (
+            <Comp
+                ref={ref}
+                className={cn("transition-colors hover:text-foreground", className)}
+                {...props}
+            >
+                {children}
+            </Comp>
+        )
+    }
+)
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+    HTMLSpanElement,
+    React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn("font-normal text-foreground", className)}
+        {...props}
+    />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+    children,
+    className,
+    ...props
+}: React.LiHTMLAttributes<HTMLLIElement>) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+        {...props}
+    >
+        {children || (
+            <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>
+        )}
+    </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        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</span>
+    </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+}

package/src/registry/ui/button-group.tsx

@@ -1,67 +1,64 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const buttonGroupVariants = cva("inline-flex", {
-    variants: {
-        orientation: {
-            horizontal: "flex-row",
-            vertical: "flex-col",
-        },
-        attached: {
-            true: "",
-            false: "gap-2",
-        },
-    },
-    compoundVariants: [
-        {
-            orientation: "horizontal",
-            attached: true,
-            className:
-                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child)]:-ml-px",
-        },
-        {
-            orientation: "vertical",
-            attached: true,
-            className:
-                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child)]:-mt-px",
-        },
-    ],
-    defaultVariants: {
-        orientation: "horizontal",
-        attached: true,
-    },
-})
-
-interface ButtonGroupProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof buttonGroupVariants> { }
-
-/**
- * ButtonGroup to group buttons together
- * 
- * @example
- * <ButtonGroup>
- *   <Button>Left</Button>
- *   <Button>Center</Button>
- *   <Button>Right</Button>
- * </ButtonGroup>
- */
-const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-    ({ className, orientation, attached, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                role="group"
-                className={cn(buttonGroupVariants({ orientation, attached }), className)}
-                {...props}
-            />
-        )
-    }
-)
-ButtonGroup.displayName = "ButtonGroup"
-
-export { ButtonGroup, buttonGroupVariants }
-
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonGroupVariants = cva("inline-flex", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row",
+            vertical: "flex-col",
+        },
+        attached: {
+            true: "",
+            false: "gap-2",
+        },
+    },
+    compoundVariants: [
+        {
+            orientation: "horizontal",
+            attached: true,
+            className:
+                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child)]:-ml-px",
+        },
+        {
+            orientation: "vertical",
+            attached: true,
+            className:
+                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child)]:-mt-px",
+        },
+    ],
+    defaultVariants: {
+        orientation: "horizontal",
+        attached: true,
+    },
+})
+
+interface ButtonGroupProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof buttonGroupVariants> { }
+
+/**
+ * ButtonGroup to group buttons together
+ * 
+ * @example
+ * <ButtonGroup>
+ *   <Button>Left</Button>
+ *   <Button>Center</Button>
+ *   <Button>Right</Button>
+ * </ButtonGroup>
+ */
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+    ({ className, orientation, attached, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                role="group"
+                className={cn(buttonGroupVariants({ orientation, attached }), className)}
+                {...props}
+            />
+        )
+    }
+)
+ButtonGroup.displayName = "ButtonGroup"
+
+export { ButtonGroup, buttonGroupVariants }

package/src/registry/ui/button.tsx

@@ -1,72 +1,71 @@
-"use client"
-
-import * as React from "react"
-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 cursor-pointer",
-    {
-        variants: {
-            variant: {
-                default:
-                    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-                destructive:
-                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-                outline:
-                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-                secondary:
-                    "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-                ghost: "hover:bg-accent hover:text-accent-foreground",
-                link: "text-primary underline-offset-4 hover:underline",
-            },
-            size: {
-                default: "h-9 px-4 py-2",
-                sm: "h-8 rounded-md px-3 text-xs",
-                lg: "h-10 rounded-md px-8",
-                icon: "h-9 w-9",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default",
-        },
-    }
-)
-
-interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-    asChild?: boolean
-}
-
-/**
- * Button component
- * 
- * @example
- * // Default button
- * <Button variant="outline">Click me</Button>
- * 
- * // With loading state
- * <Button disabled>
- *   <LoadingSpinner /> Processing...
- * </Button>
- */
-import { Slot } from "@/components/ui/slot"
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : "button"
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size }), className)}
-                ref={ref}
-                {...props}
-            />
-        )
-    }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
-
+"use client"
+
+import * as React from "react"
+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 cursor-pointer",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                destructive:
+                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                outline:
+                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                secondary:
+                    "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    asChild?: boolean
+}
+
+/**
+ * Button component
+ * 
+ * @example
+ * // Default button
+ * <Button variant="outline">Click me</Button>
+ * 
+ * // With loading state
+ * <Button disabled>
+ *   <LoadingSpinner /> Processing...
+ * </Button>
+ */
+import { Slot } from "@/components/ui/slot"
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button"
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size }), className)}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }