From b84827cccf510f2731bbd398d1460e84adb4cc91 Mon Sep 17 00:00:00 2001
From: Cohan Carpentier <cohan.carpentier@gmail.com>
Date: Fri, 12 Apr 2024 15:26:18 -0400
Subject: [PATCH] feat: add size variants to select

---
 alert.tsx    | 25 +++++++++++++------------
 label.tsx    | 24 ++++++++++++------------
 package.json |  7 +++----
 select.tsx   | 45 ++++++++++++++++++++++++++++++++++-----------
 4 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/alert.tsx b/alert.tsx
index 3b8adfd..fff8aee 100644
--- a/alert.tsx
+++ b/alert.tsx
@@ -1,20 +1,21 @@
-import type { VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 import { type HTMLAttributes, forwardRef } from "react";
-import { tv } from "tailwind-variants";
 import { cn } from "./cn";
 
-const alertVariants = tv({
-  base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  variants: {
-    variant: {
-      default: "bg-background text-foreground",
-      destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
     },
   },
-  defaultVariants: {
-    variant: "default",
-  },
-});
+);
 
 const Alert = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(
   ({ className, variant, ...rest }, ref) => (
diff --git a/label.tsx b/label.tsx
index bcfb8cf..357ee25 100644
--- a/label.tsx
+++ b/label.tsx
@@ -1,21 +1,21 @@
 "use client";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
-import type { VariantProps } from "class-variance-authority";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import { tv } from "tailwind-variants";
 import { cn } from "./cn";
 
-const labelVariants = tv({
-  base: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-});
-
-const Label = forwardRef<
-  ElementRef<typeof LabelPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...rest }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...rest} />
-));
+const Label = forwardRef<ElementRef<typeof LabelPrimitive.Root>, ComponentPropsWithoutRef<typeof LabelPrimitive.Root>>(
+  ({ className, ...rest }, ref) => (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(
+        "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...rest}
+    />
+  ),
+);
 
 Label.displayName = LabelPrimitive.Root.displayName;
 
diff --git a/package.json b/package.json
index a0a446d..f27654e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "sideEffects": false,
   "type": "module",
   "scripts": {
@@ -34,13 +34,12 @@
     "clsx": "2.1.0",
     "cmdk": "0.2.0",
     "lodash-es": "4.17.21",
-    "lucide-react": "0.367.0",
+    "lucide-react": "0.368.0",
     "next-themes": "0.3.0",
     "nprogress": "0.2.0",
-    "react-hook-form": "7.51.2",
+    "react-hook-form": "7.51.3",
     "sonner": "1.4.41",
     "tailwind-merge": "2.2.2",
-    "tailwind-variants": "0.2.1",
     "tailwindcss": "3.4.3",
     "tailwindcss-animate": "1.0.7",
     "typescript": "5.4.5"
diff --git a/select.tsx b/select.tsx
index 8f8dd1c..ee6c10f 100644
--- a/select.tsx
+++ b/select.tsx
@@ -1,25 +1,48 @@
 "use client";
 
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { type VariantProps, cva } from "class-variance-authority";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
 import { cn } from "./cn";
 
+const selectVariants = cva(
+  "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background [&>span]:line-clamp-1 disabled:cursor-not-allowed placeholder:text-muted-foreground disabled:opacity-50 focus:outline-none focus:ring-1 focus:ring-ring",
+  {
+    variants: {
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8 text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+const iconVariants = cva(undefined, {
+  variants: {
+    size: {
+      default: "size-4",
+      sm: "size-3",
+      lg: "size-5",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
 const SelectTrigger = forwardRef<
   ElementRef<typeof SelectPrimitive.Trigger>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...rest }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background [&>span]:line-clamp-1 disabled:cursor-not-allowed placeholder:text-muted-foreground disabled:opacity-50 focus:outline-none focus:ring-1 focus:ring-ring",
-      className,
-    )}
-    {...rest}
-  >
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & VariantProps<typeof selectVariants>
+>(({ className, size, children, ...rest }, ref) => (
+  <SelectPrimitive.Trigger ref={ref} className={cn(selectVariants({ size, className }))} {...rest}>
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronsUpDownIcon className="size-4 opacity-50" />
+      <ChevronsUpDownIcon className={cn("ml-2", iconVariants({ size }))} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));