feat: add size variants to select

risc0 · Apr 12, 2024 · b84827c · b84827c
1 parent 6c474cc
commit b84827c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
 ));