@c-rex/ui 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/ui",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "type": "module",
     "files": [
         "src"
@@ -117,6 +117,10 @@
         "./context-menu": {
             "types": "./src/context-menu.tsx",
             "import": "./src/context-menu.tsx"
+        },
+        "./badge": {
+            "types": "./src/badge.tsx",
+            "import": "./src/badge.tsx"
         }
     },
     "scripts": {

package/src/badge.tsx

@@ -0,0 +1,46 @@
+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"
+
+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",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
                 default:
                     "bg-primary text-primary-foreground shadow hover:bg-primary/90",
                 destructive:
-                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                    "border border-destructive text-destructive shadow-sm hover:bg-destructive/90 hover:text-destructive-foreground",
                 outline:
                     "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
                 secondary:
@@ -23,6 +23,7 @@ const buttonVariants = cva(
             size: {
                 default: "h-9 px-4 py-2",
                 sm: "h-8 rounded-md px-3 text-xs",
+                xs: "h-5 w-5 rounded text-xs",
                 lg: "h-10 rounded-md px-8",
                 icon: "h-9 w-9",
             },

package/src/input.tsx

@@ -8,7 +8,7 @@ const inputVariants = cva(
     {
         variants: {
             variant: {
-                default: "shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                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",
             }

package/src/sidebar.tsx

@@ -713,7 +713,7 @@ const SidebarMenuSub = React.forwardRef<
         ref={ref}
         data-sidebar="menu-sub"
         className={cn(
-            "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+            "ml-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border pl-2.5 py-0.5",
             "group-data-[collapsible=icon]:hidden",
             className,
         )}