@c-rex/ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/ui",
-    "version": "0.1.4",
+    "version": "0.1.6",
     "type": "module",
     "files": [
         "src"
@@ -10,6 +10,10 @@
         "access": "public"
     },
     "exports": {
+        "./collapsible": {
+            "types": "./src/collapsible.tsx",
+            "import": "./src/collapsible.tsx"
+        },
         "./alert": {
             "types": "./src/alert.tsx",
             "import": "./src/alert.tsx"
@@ -117,6 +121,14 @@
         "./context-menu": {
             "types": "./src/context-menu.tsx",
             "import": "./src/context-menu.tsx"
+        },
+        "./badge": {
+            "types": "./src/badge.tsx",
+            "import": "./src/badge.tsx"
+        },
+        "./card": {
+            "types": "./src/card.tsx",
+            "import": "./src/card.tsx"
         }
     },
     "scripts": {
@@ -138,6 +150,7 @@
         "@c-rex/utils": "*",
         "@radix-ui/react-avatar": "^1.1.9",
         "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-collapsible": "^1.1.11",
         "@radix-ui/react-context-menu": "^2.2.15",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.15",

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/card.tsx

@@ -0,0 +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,
+}

package/src/collapsible.tsx

@@ -0,0 +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 }

package/src/dropdown-menu.tsx

@@ -117,11 +117,15 @@ function DropdownMenuRadioGroup({
     )
 }
 
+type Props = {
+    link?: string
+}
 function DropdownMenuRadioItem({
     className,
     children,
+    link,
     ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & Props) {
     return (
         <DropdownMenuPrimitive.RadioItem
             data-slot="dropdown-menu-radio-item"
@@ -131,12 +135,20 @@ function DropdownMenuRadioItem({
             )}
             {...props}
         >
-            <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-                <DropdownMenuPrimitive.ItemIndicator>
-                    <CircleIcon className="size-2 fill-current" />
-                </DropdownMenuPrimitive.ItemIndicator>
-            </span>
-            {children}
+            <a
+                href={link}
+                className="flex-1 flex items-center gap-2"
+                aria-label={typeof children === "string" ? children : "Dropdown menu radio item"}
+                title={typeof children === "string" ? children : undefined}
+                tabIndex={0}
+            >
+                <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+                    <DropdownMenuPrimitive.ItemIndicator>
+                        <CircleIcon className="size-2 fill-current" />
+                    </DropdownMenuPrimitive.ItemIndicator>
+                </span>
+                {children}
+            </a>
         </DropdownMenuPrimitive.RadioItem>
     )
 }

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,
         )}