@c-rex/ui 0.1.20 → 0.1.21

package/src/card.tsx

@@ -1,92 +1,92 @@
-import * as React from "react"
-
-import { cn } from "@c-rex/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-    return (
-        <div
-            data-slot="card"
-            className={cn(
-                "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-    return (
-        <div
-            data-slot="card-header"
-            className={cn(
-                "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-    return (
-        <div
-            data-slot="card-title"
-            className={cn("leading-none font-semibold", className)}
-            {...props}
-        />
-    )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-    return (
-        <div
-            data-slot="card-description"
-            className={cn("text-muted-foreground text-sm", className)}
-            {...props}
-        />
-    )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-    return (
-        <div
-            data-slot="card-action"
-            className={cn(
-                "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-    return (
-        <div
-            data-slot="card-content"
-            className={cn("px-4", className)}
-            {...props}
-        />
-    )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-    return (
-        <div
-            data-slot="card-footer"
-            className={cn("flex items-center px-4 [.border-t]:pt-6", className)}
-            {...props}
-        />
-    )
-}
-
-export {
-    Card,
-    CardHeader,
-    CardFooter,
-    CardTitle,
-    CardAction,
-    CardDescription,
-    CardContent,
-}
+import * as React from "react"
+
+import { cn } from "@c-rex/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card"
+            className={cn(
+                "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-header"
+            className={cn(
+                "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-title"
+            className={cn("leading-none font-semibold", className)}
+            {...props}
+        />
+    )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-description"
+            className={cn("text-muted-foreground text-sm", className)}
+            {...props}
+        />
+    )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-action"
+            className={cn(
+                "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-content"
+            className={cn("px-4", className)}
+            {...props}
+        />
+    )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-footer"
+            className={cn("flex items-center px-4 [.border-t]:pt-6", className)}
+            {...props}
+        />
+    )
+}
+
+export {
+    Card,
+    CardHeader,
+    CardFooter,
+    CardTitle,
+    CardAction,
+    CardDescription,
+    CardContent,
+}

package/src/checkbox.tsx

@@ -1,30 +1,30 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
-
-import { cn } from "@c-rex/utils"
-
-function Checkbox({
-    className,
-    ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-    return (
-        <CheckboxPrimitive.Root
-            data-slot="checkbox"
-            className={cn(
-                "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-                className
-            )}
-            {...props}
-        >
-            <CheckboxPrimitive.Indicator
-                data-slot="checkbox-indicator"
-                className="flex items-center justify-center text-current transition-none"
-            >
-                <CheckIcon className="size-3.5" />
-            </CheckboxPrimitive.Indicator>
-        </CheckboxPrimitive.Root>
-    )
-}
-
-export { Checkbox }
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@c-rex/utils"
+
+function Checkbox({
+    className,
+    ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+    return (
+        <CheckboxPrimitive.Root
+            data-slot="checkbox"
+            className={cn(
+                "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator
+                data-slot="checkbox-indicator"
+                className="flex items-center justify-center text-current transition-none"
+            >
+                <CheckIcon className="size-3.5" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    )
+}
+
+export { Checkbox }

package/src/collapsible.tsx

@@ -1,31 +1,31 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/command.tsx

@@ -1,151 +1,151 @@
-import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-
-import { cn } from "@c-rex/utils";
-import { Dialog, DialogContent } from "./dialog";
-
-const Command = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive
-        ref={ref}
-        className={cn(
-            "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-            className,
-        )}
-        {...props}
-    />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-    return (
-        <Dialog {...props}>
-            <DialogContent className="overflow-hidden p-0">
-                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-                    {children}
-                </Command>
-            </DialogContent>
-        </Dialog>
-    );
-};
-
-const CommandInput = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Input>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-        <CommandPrimitive.Input
-            ref={ref}
-            className={cn(
-                "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                className,
-            )}
-            {...props}
-        />
-    </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.List
-        ref={ref}
-        className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-        {...props}
-    />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Empty>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-    <CommandPrimitive.Empty
-        ref={ref}
-        className="py-6 text-center text-sm"
-        {...props}
-    />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Group>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.Group
-        ref={ref}
-        className={cn(
-            "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-            className,
-        )}
-        {...props}
-    />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.Separator
-        ref={ref}
-        className={cn("-mx-1 h-px bg-border", className)}
-        {...props}
-    />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.Item
-        ref={ref}
-        className={cn(
-            "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-            className,
-        )}
-        {...props}
-    />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-    return (
-        <span
-            className={cn(
-                "ml-auto text-xs tracking-widest text-muted-foreground",
-                className,
-            )}
-            {...props}
-        />
-    );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-    Command,
-    CommandDialog,
-    CommandInput,
-    CommandList,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandShortcut,
-    CommandSeparator,
-};
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@c-rex/utils";
+import { Dialog, DialogContent } from "./dialog";
+
+const Command = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive
+        ref={ref}
+        className={cn(
+            "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+            className,
+        )}
+        {...props}
+    />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+    return (
+        <Dialog {...props}>
+            <DialogContent className="overflow-hidden p-0">
+                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+const CommandInput = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Input>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <CommandPrimitive.Input
+            ref={ref}
+            className={cn(
+                "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                className,
+            )}
+            {...props}
+        />
+    </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.List
+        ref={ref}
+        className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+        {...props}
+    />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Empty>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+    <CommandPrimitive.Empty
+        ref={ref}
+        className="py-6 text-center text-sm"
+        {...props}
+    />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Group>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Group
+        ref={ref}
+        className={cn(
+            "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+            className,
+        )}
+        {...props}
+    />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 h-px bg-border", className)}
+        {...props}
+    />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Item
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+            className,
+        )}
+        {...props}
+    />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn(
+                "ml-auto text-xs tracking-widest text-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+};