@c-rex/ui 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/ui",
-    "version": "0.1.5",
+    "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"
@@ -121,6 +125,10 @@
         "./badge": {
             "types": "./src/badge.tsx",
             "import": "./src/badge.tsx"
+        },
+        "./card": {
+            "types": "./src/card.tsx",
+            "import": "./src/card.tsx"
         }
     },
     "scripts": {
@@ -142,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/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>
     )
 }