@srcroot/ui 0.0.55 → 0.0.58

package/src/registry/ui/table.tsx

@@ -1,139 +1,138 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-/**
- * Table components for data display
- * 
- * @example
- * <Table>
- *   <TableHeader>
- *     <TableRow>
- *       <TableHead>Name</TableHead>
- *       <TableHead>Email</TableHead>
- *     </TableRow>
- *   </TableHeader>
- *   <TableBody>
- *     <TableRow>
- *       <TableCell>John Doe</TableCell>
- *       <TableCell>john@example.com</TableCell>
- *     </TableRow>
- *   </TableBody>
- * </Table>
- */
-
-const Table = React.forwardRef<
-    HTMLTableElement,
-    React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
->(({ className, containerClassName, ...props }, ref) => (
-    <div className={cn("relative w-full overflow-auto", containerClassName)}>
-        <table
-            ref={ref}
-            className={cn("w-full caption-bottom text-sm", className)}
-            {...props}
-        />
-    </div>
-))
-Table.displayName = "Table"
-
-const TableHeader = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
-
-const TableBody = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tbody
-        ref={ref}
-        className={cn("[&_tr:last-child]:border-0", className)}
-        {...props}
-    />
-))
-TableBody.displayName = "TableBody"
-
-const TableFooter = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tfoot
-        ref={ref}
-        className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-        {...props}
-    />
-))
-TableFooter.displayName = "TableFooter"
-
-const TableRow = React.forwardRef<
-    HTMLTableRowElement,
-    React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-    <tr
-        ref={ref}
-        className={cn(
-            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-            className
-        )}
-        {...props}
-    />
-))
-TableRow.displayName = "TableRow"
-
-const TableHead = React.forwardRef<
-    HTMLTableCellElement,
-    React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <th
-        ref={ref}
-        className={cn(
-            "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-            className
-        )}
-        {...props}
-    />
-))
-TableHead.displayName = "TableHead"
-
-const TableCell = React.forwardRef<
-    HTMLTableCellElement,
-    React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <td
-        ref={ref}
-        className={cn(
-            "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-            className
-        )}
-        {...props}
-    />
-))
-TableCell.displayName = "TableCell"
-
-const TableCaption = React.forwardRef<
-    HTMLTableCaptionElement,
-    React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-    <caption
-        ref={ref}
-        className={cn("mt-4 text-sm text-muted-foreground", className)}
-        {...props}
-    />
-))
-TableCaption.displayName = "TableCaption"
-
-export {
-    Table,
-    TableHeader,
-    TableBody,
-    TableFooter,
-    TableHead,
-    TableRow,
-    TableCell,
-    TableCaption,
-}
-
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Table components for data display
+ * 
+ * @example
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Email</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>John Doe</TableCell>
+ *       <TableCell>john@example.com</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ */
+
+const Table = React.forwardRef<
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
+>(({ className, containerClassName, ...props }, ref) => (
+    <div className={cn("relative w-full overflow-auto", containerClassName)}>
+        <table
+            ref={ref}
+            className={cn("w-full caption-bottom text-sm", className)}
+            {...props}
+        />
+    </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody
+        ref={ref}
+        className={cn("[&_tr:last-child]:border-0", className)}
+        {...props}
+    />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+        {...props}
+    />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+    HTMLTableRowElement,
+    React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+    <tr
+        ref={ref}
+        className={cn(
+            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+            className
+        )}
+        {...props}
+    />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+            className
+        )}
+        {...props}
+    />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn(
+            "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+            className
+        )}
+        {...props}
+    />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption
+        ref={ref}
+        className={cn("mt-4 text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+    Table,
+    TableHeader,
+    TableBody,
+    TableFooter,
+    TableHead,
+    TableRow,
+    TableCell,
+    TableCaption,
+}

package/src/registry/ui/tabs.tsx

@@ -1,125 +1,124 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface TabsContextValue {
-    value: string
-    onValueChange: (value: string) => void
-}
-
-const TabsContext = React.createContext<TabsContextValue | null>(null)
-
-interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
-    value?: string
-    onValueChange?: (value: string) => void
-    defaultValue?: string
-}
-
-/**
- * Tabs component with keyboard navigation
- * 
- * @example
- * <Tabs defaultValue="tab1">
- *   <TabsList>
- *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
- *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="tab1">Content 1</TabsContent>
- *   <TabsContent value="tab2">Content 2</TabsContent>
- * </Tabs>
- */
-const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
-    ({ className, value: controlledValue, onValueChange, defaultValue = "", children, ...props }, ref) => {
-        const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
-
-        const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
-        const setValue = onValueChange || setUncontrolledValue
-
-        return (
-            <TabsContext.Provider value={{ value, onValueChange: setValue }}>
-                <div ref={ref} className={cn("", className)} {...props}>
-                    {children}
-                </div>
-            </TabsContext.Provider>
-        )
-    }
-)
-Tabs.displayName = "Tabs"
-
-const TabsList = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-    <div
-        ref={ref}
-        role="tablist"
-        className={cn(
-            "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-            className
-        )}
-        {...props}
-    />
-))
-TabsList.displayName = "TabsList"
-
-interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    value: string
-}
-
-const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
-    ({ className, value, ...props }, ref) => {
-        const context = React.useContext(TabsContext)
-        if (!context) throw new Error("TabsTrigger must be used within Tabs")
-
-        const isSelected = context.value === value
-
-        return (
-            <button
-                ref={ref}
-                type="button"
-                role="tab"
-                aria-selected={isSelected}
-                tabIndex={isSelected ? 0 : -1}
-                className={cn(
-                    "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-                    isSelected && "bg-background text-foreground shadow",
-                    className
-                )}
-                onClick={() => context.onValueChange(value)}
-                {...props}
-            />
-        )
-    }
-)
-TabsTrigger.displayName = "TabsTrigger"
-
-interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    value: string
-}
-
-const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
-    ({ className, value, ...props }, ref) => {
-        const context = React.useContext(TabsContext)
-        if (!context) throw new Error("TabsContent must be used within Tabs")
-
-        if (context.value !== value) return null
-
-        return (
-            <div
-                ref={ref}
-                role="tabpanel"
-                tabIndex={0}
-                className={cn(
-                    "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                    className
-                )}
-                {...props}
-            />
-        )
-    }
-)
-TabsContent.displayName = "TabsContent"
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
-
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface TabsContextValue {
+    value: string
+    onValueChange: (value: string) => void
+}
+
+const TabsContext = React.createContext<TabsContextValue | null>(null)
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string
+    onValueChange?: (value: string) => void
+    defaultValue?: string
+}
+
+/**
+ * Tabs component with keyboard navigation
+ * 
+ * @example
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ */
+const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+    ({ className, value: controlledValue, onValueChange, defaultValue = "", children, ...props }, ref) => {
+        const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+
+        const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
+        const setValue = onValueChange || setUncontrolledValue
+
+        return (
+            <TabsContext.Provider value={{ value, onValueChange: setValue }}>
+                <div ref={ref} className={cn("", className)} {...props}>
+                    {children}
+                </div>
+            </TabsContext.Provider>
+        )
+    }
+)
+Tabs.displayName = "Tabs"
+
+const TabsList = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="tablist"
+        className={cn(
+            "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+TabsList.displayName = "TabsList"
+
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string
+}
+
+const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
+    ({ className, value, ...props }, ref) => {
+        const context = React.useContext(TabsContext)
+        if (!context) throw new Error("TabsTrigger must be used within Tabs")
+
+        const isSelected = context.value === value
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                role="tab"
+                aria-selected={isSelected}
+                tabIndex={isSelected ? 0 : -1}
+                className={cn(
+                    "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                    isSelected && "bg-background text-foreground shadow",
+                    className
+                )}
+                onClick={() => context.onValueChange(value)}
+                {...props}
+            />
+        )
+    }
+)
+TabsTrigger.displayName = "TabsTrigger"
+
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string
+}
+
+const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
+    ({ className, value, ...props }, ref) => {
+        const context = React.useContext(TabsContext)
+        if (!context) throw new Error("TabsContent must be used within Tabs")
+
+        if (context.value !== value) return null
+
+        return (
+            <div
+                ref={ref}
+                role="tabpanel"
+                tabIndex={0}
+                className={cn(
+                    "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    className
+                )}
+                {...props}
+            />
+        )
+    }
+)
+TabsContent.displayName = "TabsContent"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/registry/ui/text.tsx

@@ -1,64 +1,61 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const textVariants = cva("", {
-    variants: {
-        variant: {
-            h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
-            h2: "scroll-m-20 text-3xl font-semibold tracking-tight",
-            h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
-            h4: "scroll-m-20 text-xl font-semibold tracking-tight",
-            h5: "scroll-m-20 text-lg font-semibold tracking-tight",
-            h6: "scroll-m-20 text-base font-semibold tracking-tight",
-            p: "leading-7 [&:not(:first-child)]:mt-6",
-            lead: "text-xl text-muted-foreground",
-            large: "text-lg font-semibold",
-            small: "text-sm font-medium leading-none",
-            muted: "text-sm text-muted-foreground",
-            code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
-        },
-    },
-    defaultVariants: {
-        variant: "p",
-    },
-})
-
-type TextVariants = VariantProps<typeof textVariants>
-
-interface TextProps extends TextVariants {
-    className?: string
-    children?: React.ReactNode
-    as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label"
-}
-
-/**
- * Text component for typography
- * 
- * @example
- * // As a heading
- * <Text as="h1" variant="h1">Page Title</Text>
- * 
- * // Using heading styles on a different element
- * <Text as="span" variant="h2">Styled as H2</Text>
- * 
- * // Muted text
- * <Text variant="muted">Secondary information</Text>
- */
-const Text = React.forwardRef<HTMLElement, TextProps>(
-    ({ as: Component = "p", className, variant, ...props }, ref) => {
-        return (
-            <Component
-                ref={ref as any}
-                className={cn(textVariants({ variant }), className)}
-                {...props}
-            />
-        )
-    }
-)
-Text.displayName = "Text"
-
-export { Text, textVariants }
-
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const textVariants = cva("", {
+    variants: {
+        variant: {
+            h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+            h2: "scroll-m-20 text-3xl font-semibold tracking-tight",
+            h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+            h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+            h5: "scroll-m-20 text-lg font-semibold tracking-tight",
+            h6: "scroll-m-20 text-base font-semibold tracking-tight",
+            p: "leading-7 [&:not(:first-child)]:mt-6",
+            lead: "text-xl text-muted-foreground",
+            large: "text-lg font-semibold",
+            small: "text-sm font-medium leading-none",
+            muted: "text-sm text-muted-foreground",
+            code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+        },
+    },
+    defaultVariants: {
+        variant: "p",
+    },
+})
+
+type TextVariants = VariantProps<typeof textVariants>
+
+interface TextProps extends TextVariants {
+    className?: string
+    children?: React.ReactNode
+    as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label"
+}
+
+/**
+ * Text component for typography
+ * 
+ * @example
+ * // As a heading
+ * <Text as="h1" variant="h1">Page Title</Text>
+ * 
+ * // Using heading styles on a different element
+ * <Text as="span" variant="h2">Styled as H2</Text>
+ * 
+ * // Muted text
+ * <Text variant="muted">Secondary information</Text>
+ */
+const Text = React.forwardRef<HTMLElement, TextProps>(
+    ({ as: Component = "p", className, variant, ...props }, ref) => {
+        return (
+            <Component
+                ref={ref as any}
+                className={cn(textVariants({ variant }), className)}
+                {...props}
+            />
+        )
+    }
+)
+Text.displayName = "Text"
+
+export { Text, textVariants }