@c-rex/ui 0.3.0-build.18 → 0.3.0-build.22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/ui",
-    "version":  "0.3.0-build.18",
+    "version":  "0.3.0-build.22",
     "type":  "module",
     "files":  [
                   "src"

package/src/button.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@c-rex/utils";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0",
     {
         variants: {
             variant: {

package/src/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
         <div
             data-slot="card"
             className={cn(
-                "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm",
+                "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border shadow-sm",
                 className
             )}
             {...props}
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
         <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",
+                "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start p-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
                 className
             )}
             {...props}

package/src/sidebar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { VariantProps, cva } from "class-variance-authority";
-import { Info, PanelLeft } from "lucide-react";
+import { PanelLeft, PanelRight } from "lucide-react";
 import { cn } from "@c-rex/utils";
 import { useBreakpoint } from "./hooks";
 import { Button } from "./button";
@@ -180,7 +180,7 @@ const MultiSidebarProvider = React.forwardRef<
                             } as React.CSSProperties
                         }
                         className={cn(
-                            "min-h-screen items-center flex flex-col overflow-x-hidden",
+                            "min-h-screen items-center flex flex-col",
                             className,
                         )}
                         ref={ref}
@@ -325,14 +325,14 @@ const SidebarTrigger = React.forwardRef<
             data-sidebar="trigger"
             variant={variant}
             size={size}
-            className={cn("h-8 w-8", className)}
+            className={className}
             onClick={(event) => {
                 onClick?.(event);
                 toggleSidebar();
             }}
             {...props}
         >
-            {side === "left" ? <PanelLeft className="!h-5 !w-5" /> : <Info className="!h-5 !w-5" />}
+            {side === "left" ? <PanelLeft /> : <PanelRight />}
             <span className="sr-only">
                 Toggle {side === "left" ? "Left" : "Right"} Sidebar
             </span>

package/src/tabs.tsx

@@ -4,61 +4,61 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
 import { cn } from "@c-rex/utils"
 
 function Tabs({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
+    return (
+        <TabsPrimitive.Root
+            data-slot="tabs"
+            className={cn("flex flex-col", className)}
+            {...props}
+        />
+    )
 }
 
 function TabsList({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <TabsPrimitive.List
+            data-slot="tabs-list"
+            className={cn(
+                "inline-flex h-9 w-full items-center justify-center rounded-lg p-[3px]",
+                className
+            )}
+            {...props}
+        />
+    )
 }
 
 function TabsTrigger({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <TabsPrimitive.Trigger
+            data-slot="tabs-trigger"
+            className={cn(
+                "data-[state=active]:text-foreground hover:text-foreground text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 whitespace-nowrap transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50  [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className
+            )}
+            {...props}
+        />
+    )
 }
 
 function TabsContent({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  )
+    return (
+        <TabsPrimitive.Content
+            data-slot="tabs-content"
+            className={cn("flex-1 outline-none", className)}
+            {...props}
+        />
+    )
 }
 
 export { Tabs, TabsList, TabsTrigger, TabsContent }