@srcroot/ui 0.0.55 → 0.0.58

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

@@ -1,129 +1,129 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "./toggle"
-import { type VariantProps } from "class-variance-authority"
-
-// ToggleGroup Context
-interface ToggleGroupContextValue {
-    type: "single" | "multiple"
-    value: string[]
-    onValueChange: (value: string) => void
-    variant?: VariantProps<typeof toggleVariants>["variant"]
-    size?: VariantProps<typeof toggleVariants>["size"]
-}
-
-const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
-
-function useToggleGroup() {
-    const context = React.useContext(ToggleGroupContext)
-    if (!context) {
-        throw new Error("useToggleGroup must be used within a ToggleGroup")
-    }
-    return context
-}
-
-// ToggleGroup Props
-interface ToggleGroupSingleProps {
-    type: "single"
-    value?: string
-    defaultValue?: string
-    onValueChange?: (value: string) => void
-}
-
-interface ToggleGroupMultipleProps {
-    type: "multiple"
-    value?: string[]
-    defaultValue?: string[]
-    onValueChange?: (value: string[]) => void
-}
-
-type ToggleGroupProps = (ToggleGroupSingleProps | ToggleGroupMultipleProps) &
-    React.HTMLAttributes<HTMLDivElement> &
-    VariantProps<typeof toggleVariants>
-
-const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
-    ({ className, type, value: controlledValue, defaultValue, onValueChange, variant, size, children, ...props }, ref) => {
-        // Handle both single and multiple types
-        const [uncontrolledValue, setUncontrolledValue] = React.useState<string[]>(() => {
-            if (type === "single") {
-                return defaultValue ? [defaultValue as string] : []
-            }
-            return (defaultValue as string[]) || []
-        })
-
-        const value = controlledValue !== undefined
-            ? (type === "single" ? [controlledValue as string] : controlledValue as string[])
-            : uncontrolledValue
-
-        const handleValueChange = (itemValue: string) => {
-            let newValue: string[]
-
-            if (type === "single") {
-                // Toggle off if clicking same value, otherwise set new value
-                newValue = value.includes(itemValue) ? [] : [itemValue]
-                if (controlledValue === undefined) {
-                    setUncontrolledValue(newValue)
-                }
-                ; (onValueChange as ((value: string) => void))?.(newValue[0] || "")
-            } else {
-                // Toggle item in array
-                newValue = value.includes(itemValue)
-                    ? value.filter(v => v !== itemValue)
-                    : [...value, itemValue]
-                if (controlledValue === undefined) {
-                    setUncontrolledValue(newValue)
-                }
-                ; (onValueChange as ((value: string[]) => void))?.(newValue)
-            }
-        }
-
-        return (
-            <ToggleGroupContext.Provider value={{ type, value, onValueChange: handleValueChange, variant, size }}>
-                <div
-                    ref={ref}
-                    role="group"
-                    className={cn("flex items-center justify-center gap-1", className)}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </ToggleGroupContext.Provider>
-        )
-    }
-)
-ToggleGroup.displayName = "ToggleGroup"
-
-// ToggleGroupItem
-interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    value: string
-}
-
-const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
-    ({ className, value, children, ...props }, ref) => {
-        const context = useToggleGroup()
-        const pressed = context.value.includes(value)
-
-        return (
-            <button
-                ref={ref}
-                type="button"
-                aria-pressed={pressed}
-                data-state={pressed ? "on" : "off"}
-                className={cn(
-                    toggleVariants({ variant: context.variant, size: context.size }),
-                    pressed && "bg-accent text-accent-foreground",
-                    className
-                )}
-                onClick={() => context.onValueChange(value)}
-                {...props}
-            >
-                {children}
-            </button>
-        )
-    }
-)
-ToggleGroupItem.displayName = "ToggleGroupItem"
-
-export { ToggleGroup, ToggleGroupItem }
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "./toggle"
+import { type VariantProps } from "class-variance-authority"
+
+// ToggleGroup Context
+interface ToggleGroupContextValue {
+    type: "single" | "multiple"
+    value: string[]
+    onValueChange: (value: string) => void
+    variant?: VariantProps<typeof toggleVariants>["variant"]
+    size?: VariantProps<typeof toggleVariants>["size"]
+}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
+
+function useToggleGroup() {
+    const context = React.useContext(ToggleGroupContext)
+    if (!context) {
+        throw new Error("useToggleGroup must be used within a ToggleGroup")
+    }
+    return context
+}
+
+// ToggleGroup Props
+interface ToggleGroupSingleProps {
+    type: "single"
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+}
+
+interface ToggleGroupMultipleProps {
+    type: "multiple"
+    value?: string[]
+    defaultValue?: string[]
+    onValueChange?: (value: string[]) => void
+}
+
+type ToggleGroupProps = (ToggleGroupSingleProps | ToggleGroupMultipleProps) &
+    React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof toggleVariants>
+
+const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
+    ({ className, type, value: controlledValue, defaultValue, onValueChange, variant, size, children, ...props }, ref) => {
+        // Handle both single and multiple types
+        const [uncontrolledValue, setUncontrolledValue] = React.useState<string[]>(() => {
+            if (type === "single") {
+                return defaultValue ? [defaultValue as string] : []
+            }
+            return (defaultValue as string[]) || []
+        })
+
+        const value = controlledValue !== undefined
+            ? (type === "single" ? [controlledValue as string] : controlledValue as string[])
+            : uncontrolledValue
+
+        const handleValueChange = (itemValue: string) => {
+            let newValue: string[]
+
+            if (type === "single") {
+                // Toggle off if clicking same value, otherwise set new value
+                newValue = value.includes(itemValue) ? [] : [itemValue]
+                if (controlledValue === undefined) {
+                    setUncontrolledValue(newValue)
+                }
+                ; (onValueChange as ((value: string) => void))?.(newValue[0] || "")
+            } else {
+                // Toggle item in array
+                newValue = value.includes(itemValue)
+                    ? value.filter(v => v !== itemValue)
+                    : [...value, itemValue]
+                if (controlledValue === undefined) {
+                    setUncontrolledValue(newValue)
+                }
+                ; (onValueChange as ((value: string[]) => void))?.(newValue)
+            }
+        }
+
+        return (
+            <ToggleGroupContext.Provider value={{ type, value, onValueChange: handleValueChange, variant, size }}>
+                <div
+                    ref={ref}
+                    role="group"
+                    className={cn("flex items-center justify-center gap-1", className)}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </ToggleGroupContext.Provider>
+        )
+    }
+)
+ToggleGroup.displayName = "ToggleGroup"
+
+// ToggleGroupItem
+interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string
+}
+
+const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+    ({ className, value, children, ...props }, ref) => {
+        const context = useToggleGroup()
+        const pressed = context.value.includes(value)
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                aria-pressed={pressed}
+                data-state={pressed ? "on" : "off"}
+                className={cn(
+                    toggleVariants({ variant: context.variant, size: context.size }),
+                    pressed && "bg-accent text-accent-foreground",
+                    className
+                )}
+                onClick={() => context.onValueChange(value)}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+ToggleGroupItem.displayName = "ToggleGroupItem"
+
+export { ToggleGroup, ToggleGroupItem }

package/src/registry/ui/toggle.tsx

@@ -1,72 +1,72 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-    {
-        variants: {
-            variant: {
-                default: "bg-transparent",
-                outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-            },
-            size: {
-                default: "h-10 px-3",
-                sm: "h-9 px-2.5",
-                lg: "h-11 px-5",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default",
-        },
-    }
-)
-
-export interface ToggleProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof toggleVariants> {
-    /** Controlled pressed state */
-    pressed?: boolean
-    /** Default pressed state for uncontrolled usage */
-    defaultPressed?: boolean
-    /** Callback when pressed state changes */
-    onPressedChange?: (pressed: boolean) => void
-}
-
-const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
-    ({ className, variant, size, pressed: controlledPressed, defaultPressed = false, onPressedChange, ...props }, ref) => {
-        const [uncontrolledPressed, setUncontrolledPressed] = React.useState(defaultPressed)
-        const pressed = controlledPressed ?? uncontrolledPressed
-
-        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-            const newPressed = !pressed
-            if (controlledPressed === undefined) {
-                setUncontrolledPressed(newPressed)
-            }
-            onPressedChange?.(newPressed)
-            props.onClick?.(e)
-        }
-
-        return (
-            <button
-                ref={ref}
-                type="button"
-                aria-pressed={pressed}
-                data-state={pressed ? "on" : "off"}
-                className={cn(
-                    toggleVariants({ variant, size }),
-                    pressed && "bg-accent text-accent-foreground",
-                    className
-                )}
-                onClick={handleClick}
-                {...props}
-            />
-        )
-    }
-)
-Toggle.displayName = "Toggle"
-
-export { Toggle, toggleVariants }
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "bg-transparent",
+                outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+            },
+            size: {
+                default: "h-10 px-3",
+                sm: "h-9 px-2.5",
+                lg: "h-11 px-5",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+export interface ToggleProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof toggleVariants> {
+    /** Controlled pressed state */
+    pressed?: boolean
+    /** Default pressed state for uncontrolled usage */
+    defaultPressed?: boolean
+    /** Callback when pressed state changes */
+    onPressedChange?: (pressed: boolean) => void
+}
+
+const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+    ({ className, variant, size, pressed: controlledPressed, defaultPressed = false, onPressedChange, ...props }, ref) => {
+        const [uncontrolledPressed, setUncontrolledPressed] = React.useState(defaultPressed)
+        const pressed = controlledPressed ?? uncontrolledPressed
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            const newPressed = !pressed
+            if (controlledPressed === undefined) {
+                setUncontrolledPressed(newPressed)
+            }
+            onPressedChange?.(newPressed)
+            props.onClick?.(e)
+        }
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                aria-pressed={pressed}
+                data-state={pressed ? "on" : "off"}
+                className={cn(
+                    toggleVariants({ variant, size }),
+                    pressed && "bg-accent text-accent-foreground",
+                    className
+                )}
+                onClick={handleClick}
+                {...props}
+            />
+        )
+    }
+)
+Toggle.displayName = "Toggle"
+
+export { Toggle, toggleVariants }