@c-rex/ui 0.1.20 → 0.1.21

package/src/input-group.tsx

@@ -1,189 +1,189 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@c-rex/utils"
-import { Button } from "./button"
-import { Input } from "./input"
-import { Textarea } from "./textarea"
-
-const inputGroupVariants = cva(
-    "group/input-group relative flex w-full items-center rounded-md transition-[color,box-shadow] outline-none h-9 min-w-0 has-[>textarea]:h-auto",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border border-input bg-white",
-                embedded:
-                    "border-0 bg-transparent shadow-none",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    }
-)
-
-function InputGroup({
-    className,
-    variant,
-    ...props
-}: React.ComponentProps<"div"> &
-    VariantProps<typeof inputGroupVariants>) {
-    return (
-        <div
-            data-slot="input-group"
-            role="group"
-            className={cn(
-                inputGroupVariants({ variant }),
-
-                // Variants based on alignment.
-                "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-                "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-                "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-                "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-
-                // Focus state.
-                "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
-
-                // Error state.
-                "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-const inputGroupAddonVariants = cva(
-    "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-    {
-        variants: {
-            align: {
-                "inline-start":
-                    "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-                "inline-end":
-                    "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-                "block-start":
-                    "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-                "block-end":
-                    "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
-            },
-        },
-        defaultVariants: {
-            align: "inline-start",
-        },
-    }
-)
-
-function InputGroupAddon({
-    className,
-    align = "inline-start",
-    ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-    return (
-        <div
-            role="group"
-            data-slot="input-group-addon"
-            data-align={align}
-            className={cn(inputGroupAddonVariants({ align }), className)}
-            onClick={(e) => {
-                if ((e.target as HTMLElement).closest("button")) {
-                    return
-                }
-                e.currentTarget.parentElement?.querySelector("input")?.focus()
-            }}
-            {...props}
-        />
-    )
-}
-
-const inputGroupButtonVariants = cva(
-    "text-sm shadow-none flex gap-2 items-center",
-    {
-        variants: {
-            size: {
-                xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-                sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-                "icon-xs":
-                    "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-                "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-            },
-        },
-        defaultVariants: {
-            size: "xs",
-        },
-    }
-)
-
-function InputGroupButton({
-    className,
-    type = "button",
-    variant = "ghost",
-    size = "xs",
-    ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-    VariantProps<typeof inputGroupButtonVariants>) {
-    return (
-        <Button
-            type={type}
-            data-size={size}
-            variant={variant}
-            className={cn(inputGroupButtonVariants({ size }), className)}
-            {...props}
-        />
-    )
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-    return (
-        <span
-            className={cn(
-                "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function InputGroupInput({
-    className,
-    ...props
-}: React.ComponentProps<typeof Input>) {
-    return (
-        <Input
-            data-slot="input-group-control"
-            className={cn(
-                "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function InputGroupTextarea({
-    className,
-    ...props
-}: React.ComponentProps<"textarea">) {
-    return (
-        <Textarea
-            data-slot="input-group-control"
-            className={cn(
-                "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-export {
-    InputGroup,
-    InputGroupAddon,
-    InputGroupButton,
-    InputGroupText,
-    InputGroupInput,
-    InputGroupTextarea,
-}
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@c-rex/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+const inputGroupVariants = cva(
+    "group/input-group relative flex w-full items-center rounded-md transition-[color,box-shadow] outline-none h-9 min-w-0 has-[>textarea]:h-auto",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border border-input bg-white",
+                embedded:
+                    "border-0 bg-transparent shadow-none",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+function InputGroup({
+    className,
+    variant,
+    ...props
+}: React.ComponentProps<"div"> &
+    VariantProps<typeof inputGroupVariants>) {
+    return (
+        <div
+            data-slot="input-group"
+            role="group"
+            className={cn(
+                inputGroupVariants({ variant }),
+
+                // Variants based on alignment.
+                "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+                "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+                "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+                "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+                // Focus state.
+                "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+
+                // Error state.
+                "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+const inputGroupAddonVariants = cva(
+    "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+    {
+        variants: {
+            align: {
+                "inline-start":
+                    "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+                "inline-end":
+                    "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+                "block-start":
+                    "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+                "block-end":
+                    "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+            },
+        },
+        defaultVariants: {
+            align: "inline-start",
+        },
+    }
+)
+
+function InputGroupAddon({
+    className,
+    align = "inline-start",
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+    return (
+        <div
+            role="group"
+            data-slot="input-group-addon"
+            data-align={align}
+            className={cn(inputGroupAddonVariants({ align }), className)}
+            onClick={(e) => {
+                if ((e.target as HTMLElement).closest("button")) {
+                    return
+                }
+                e.currentTarget.parentElement?.querySelector("input")?.focus()
+            }}
+            {...props}
+        />
+    )
+}
+
+const inputGroupButtonVariants = cva(
+    "text-sm shadow-none flex gap-2 items-center",
+    {
+        variants: {
+            size: {
+                xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+                sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+                "icon-xs":
+                    "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+                "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+            },
+        },
+        defaultVariants: {
+            size: "xs",
+        },
+    }
+)
+
+function InputGroupButton({
+    className,
+    type = "button",
+    variant = "ghost",
+    size = "xs",
+    ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+    VariantProps<typeof inputGroupButtonVariants>) {
+    return (
+        <Button
+            type={type}
+            data-size={size}
+            variant={variant}
+            className={cn(inputGroupButtonVariants({ size }), className)}
+            {...props}
+        />
+    )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+    return (
+        <span
+            className={cn(
+                "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function InputGroupInput({
+    className,
+    ...props
+}: React.ComponentProps<typeof Input>) {
+    return (
+        <Input
+            data-slot="input-group-control"
+            className={cn(
+                "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function InputGroupTextarea({
+    className,
+    ...props
+}: React.ComponentProps<"textarea">) {
+    return (
+        <Textarea
+            data-slot="input-group-control"
+            className={cn(
+                "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+export {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupText,
+    InputGroupInput,
+    InputGroupTextarea,
+}

package/src/input.tsx

@@ -1,42 +1,42 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@c-rex/utils";
-
-
-const inputVariants = cva(
-    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors placeholder:text-muted-foreground  disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-    {
-        variants: {
-            variant: {
-                default: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                file: "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
-                embedded: "border-0 outline-none focus:border-0 focus:outline-none focus:ring20",
-            }
-        },
-        defaultVariants: {
-            variant: "default",
-        }
-    }
-)
-
-interface InputProps
-    extends React.ComponentProps<"input">,
-    VariantProps<typeof inputVariants> {
-    asChild?: boolean;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, variant, ...props }, ref) => {
-        return (
-            <input
-                type={type}
-                className={cn(inputVariants({ variant, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-Input.displayName = "Input";
-
-export { Input };
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@c-rex/utils";
+
+
+const inputVariants = cva(
+    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors placeholder:text-muted-foreground  disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+    {
+        variants: {
+            variant: {
+                default: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                file: "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+                embedded: "border-0 outline-none focus:border-0 focus:outline-none focus:ring20",
+            }
+        },
+        defaultVariants: {
+            variant: "default",
+        }
+    }
+)
+
+interface InputProps
+    extends React.ComponentProps<"input">,
+    VariantProps<typeof inputVariants> {
+    asChild?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, variant, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(inputVariants({ variant, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/label.tsx

@@ -1,22 +1,22 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@c-rex/utils"
-
-function Label({
-    className,
-    ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-    return (
-        <LabelPrimitive.Root
-            data-slot="label"
-            className={cn(
-                "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-export { Label }
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@c-rex/utils"
+
+function Label({
+    className,
+    ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    return (
+        <LabelPrimitive.Root
+            data-slot="label"
+            className={cn(
+                "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+export { Label }