@c-rex/ui 0.3.0-build.27 → 0.3.0-build.27710

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/ui",
-    "version":  "0.3.0-build.27",
+    "version":  "0.3.0-build.27710",
     "type":  "module",
     "files":  [
                   "src"
@@ -50,6 +50,10 @@
                                     "types":  "./src/input.tsx",
                                     "import":  "./src/input.tsx"
                                 },
+                    "./textarea":  {
+                                       "types":  "./src/textarea.tsx",
+                                       "import":  "./src/textarea.tsx"
+                                   },
                     "./input-group":  {
                                           "types":  "./src/input-group.tsx",
                                           "import":  "./src/input-group.tsx"
@@ -153,18 +157,23 @@
                 },
     "scripts":  {
                     "lint":  "eslint .",
-                    "lint:fix":  "eslint . --fix"
+                    "lint:fix":  "eslint . --fix",
+                    "check-types":  "tsc --noEmit",
+                    "test":  "echo \u0027No tests\u0027",
+                    "build":  "echo \u0027No build script\u0027",
+                    "format:check":  "prettier --check .",
+                    "validate":  "npm run lint \u0026\u0026 npm run check-types \u0026\u0026 npm run test \u0026\u0026 npm run build"
                 },
     "devDependencies":  {
                             "@c-rex/eslint-config":  "*",
                             "@c-rex/typescript-config":  "*",
                             "@turbo/gen":  "^2.4.4",
                             "@types/node":  "^22.13.10",
-                            "@types/react":  "19.0.10",
-                            "@types/react-dom":  "19.0.4",
+                            "@types/react":  "18.3.31",
+                            "@types/react-dom":  "18.3.7",
                             "eslint":  "^9.23.0",
                             "shadcn":  "^2.5.0",
-                            "typescript":  "latest"
+                            "typescript":  "5.8.3"
                         },
     "dependencies":  {
                          "@c-rex/constants":  "*",
@@ -191,7 +200,7 @@
                          "class-variance-authority":  "^0.7.1",
                          "clsx":  "^2.1.1",
                          "cmdk":  "^1.1.1",
-                         "lucide-react":  "^0.486.0",
+                         "lucide-react":  "^0.511.0",
                          "radix-ui":  "^1.4.3",
                          "react":  "^18.3.1",
                          "react-dom":  "^18.3.1",

package/src/badge.tsx

@@ -1,46 +1,46 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@c-rex/utils"
+import { cn } from "@c-rex/utils";
 
 const badgeVariants = cva(
-    "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-                secondary:
-                    "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-                destructive:
-                    "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-                outline:
-                    "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    }
-)
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
 
 function Badge({
-    className,
-    variant,
-    asChild = false,
-    ...props
+  className,
+  variant,
+  asChild = false,
+  ...props
 }: React.ComponentProps<"span"> &
-    VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-    const Comp = asChild ? Slot : "span"
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
 
-    return (
-        <Comp
-            data-slot="badge"
-            className={cn(badgeVariants({ variant }), className)}
-            {...props}
-        />
-    )
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

package/src/command.tsx

@@ -7,145 +7,149 @@ import { cn } from "@c-rex/utils";
 import { Dialog, DialogContent } from "./dialog";
 
 const Command = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+  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}
-    />
+  <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>
-    );
+  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>
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    /** Rendered inside the input row, after the text field (e.g. an info button). */
+    trailing?: React.ReactNode;
+  }
+>(({ className, trailing, ...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}
+    />
+    {trailing}
+  </div>
 ));
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+  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}
-    />
+  <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>
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-    <CommandPrimitive.Empty
-        ref={ref}
-        className="py-6 text-center text-sm"
-        {...props}
-    />
+  <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>
+  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}
-    />
+  <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>
+  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}
-    />
+  <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>
+  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}
-    />
+  <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
+  className,
+  ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-    return (
-        <span
-            className={cn(
-                "ml-auto text-xs tracking-widest text-muted-foreground",
-                className,
-            )}
-            {...props}
-        />
-    );
+  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,
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
 };

package/src/dropdown-hover-item.tsx

@@ -1,27 +1,24 @@
-import { cn } from "@c-rex/utils"
+import { cn } from "@c-rex/utils";
 
 interface DropdownHoverItemProps {
-    label: React.ReactNode;
-    children: React.ReactNode;
-    className?: string;
+  label: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
 }
 
 export function DropdownHoverItem({
-    label,
-    children,
-    className
+  label,
+  children,
+  className,
 }: DropdownHoverItemProps) {
-    return (
-        <div className={cn("relative inline-block group/dropdown", className)}>
-
-            {label}
-            <div className="hidden group-hover/dropdown:block absolute left-0 z-10 pt-2">
-
-                <div className="w-48 bg-white border rounded shadow-lg p-2 max-h-[30rem] overflow-auto">
-                    {children}
-                </div>
-
-            </div>
+  return (
+    <div className={cn("relative inline-block group/dropdown", className)}>
+      {label}
+      <div className="hidden group-hover/dropdown:block absolute left-0 z-10 pt-2">
+        <div className="rounded border border-border bg-popover p-2 text-popover-foreground shadow-lg max-h-[30rem] overflow-auto">
+          {children}
         </div>
-    );
+      </div>
+    </div>
+  );
 }

package/src/input-group.tsx

@@ -1,189 +1,188 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+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"
+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",
-        },
-    }
-)
+  "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-background",
+        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 }),
+  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",
+        // 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",
+        // 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",
+        // 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}
-        />
-    )
+        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",
-        },
-    }
-)
+  "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
+  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}
-        />
-    )
+  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",
-        },
-    }
-)
+  "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
+  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}
-        />
-    )
+  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}
-        />
-    )
+  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}
-        />
-    )
-}
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      data-slot="input-group-control"
+      ref={ref}
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+InputGroupInput.displayName = "InputGroupInput";
 
 function InputGroupTextarea({
-    className,
-    ...props
+  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}
-        />
-    )
+  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,
-}
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/src/input.tsx

@@ -19,7 +19,7 @@ const inputVariants = cva(
     }
 )
 
-interface InputProps
+export interface InputProps
     extends React.ComponentProps<"input">,
     VariantProps<typeof inputVariants> {
     asChild?: boolean;

package/src/navigation-menu.tsx

@@ -37,7 +37,7 @@ function NavigationMenuList({
         <NavigationMenuPrimitive.List
             data-slot="navigation-menu-list"
             className={cn(
-                "group flex flex-1 list-none items-center justify-center gap-1",
+                "group flex flex-1 list-none items-center justify-center",
                 className
             )}
             {...props}

package/src/pagination.tsx

@@ -67,12 +67,13 @@ function PaginationLink({
 
 function PaginationPrevious({
     className,
+    size = "default",
     ...props
 }: React.ComponentProps<typeof PaginationLink>) {
     return (
         <PaginationLink
             aria-label="Go to previous page"
-            size="default"
+            size={size}
             className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
             {...props}
         >
@@ -83,12 +84,13 @@ function PaginationPrevious({
 
 function PaginationNext({
     className,
+    size = "default",
     ...props
 }: React.ComponentProps<typeof PaginationLink>) {
     return (
         <PaginationLink
             aria-label="Go to next page"
-            size="default"
+            size={size}
             className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
             {...props}
         >

package/src/sidebar.tsx

@@ -9,7 +9,7 @@ import { useBreakpoint } from "./hooks";
 import { Button } from "./button";
 import { Input } from "./input";
 import { Separator } from "./separator";
-import { Sheet, SheetContent } from "./sheet";
+import { Sheet, SheetContent, SheetTitle } from "./sheet";
 import { Skeleton } from "./skeleton";
 import {
     Tooltip,
@@ -251,6 +251,7 @@ const Sidebar = React.forwardRef<
                         }
                         side={side}
                     >
+                        <SheetTitle className="sr-only">Sidebar</SheetTitle>
                         <div className={cn(
                             side === "right" && "pl-4",
                             "flex h-full w-full flex-col"
@@ -265,7 +266,7 @@ const Sidebar = React.forwardRef<
             <div
                 ref={ref}
                 className={cn(
-                    "group peer relative hidden shrink-0 overflow-hidden text-sidebar-foreground lg:block",
+                    "group peer relative hidden h-full shrink-0 overflow-hidden text-sidebar-foreground lg:block",
                     "duration-200 transition-[width,height] ease-linear",
                     "data-[collapsible=offcanvas]:w-0",
                     "data-[collapsible=offcanvas]:h-0",
@@ -300,7 +301,6 @@ const Sidebar = React.forwardRef<
                         data-sidebar="sidebar"
                         className={cn(
                             "flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
-                            side === "left" && "bg-sidebar"
                         )}>
                         {children}
                     </div>