chore: select added to ui and eng docs

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/credits-setup.tsx

@@ -1,12 +1,6 @@
 "use client";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { ChartPie, CircleInfo } from "@unkey/icons";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { FormInput } from "@unkey/ui";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { CreditsFormValues } from "../create-key.schema";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx

@@ -20,18 +20,12 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";

apps/dashboard/app/(app)/apis/[apiId]/select.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { usePathname } from "next/navigation";

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx

@@ -2,17 +2,11 @@
 
 import { DialogContainer } from "@/components/dialog-container";
 import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CircleInfo } from "@unkey/icons";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { Button, FormInput } from "@unkey/ui";
 import type { PropsWithChildren } from "react";
 import { Controller, useForm } from "react-hook-form";

apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/add-permission-for-api.tsx

@@ -1,14 +1,8 @@
 "use client";
 
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import type { Permission } from "@unkey/db";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { type PropsWithChildren, useState } from "react";
 import { PermissionToggle } from "./permission_toggle";
 import { apiPermissions } from "./permissions";

apps/dashboard/app/(app)/settings/team/client.tsx

@@ -2,15 +2,15 @@
 
 import { Loading } from "@/components/dashboard/loading";
 import { PageHeader } from "@/components/dashboard/page-header";
+import { trpc } from "@/lib/trpc/client";
 import {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { trpc } from "@/lib/trpc/client";
+} from "@unkey/ui";
 import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import Link from "next/link";

apps/dashboard/app/(app)/settings/team/invite.tsx

@@ -10,17 +10,11 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { toast } from "@/components/ui/toaster";
 import type { AuthenticatedUser, Organization } from "@/lib/auth/types";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { Plus } from "lucide-react";
 import type React from "react";

apps/dashboard/app/(app)/settings/team/role-switcher.tsx

@@ -1,17 +1,17 @@
 "use client";
 
 import { Loading } from "@/components/dashboard/loading";
+import { toast } from "@/components/ui/toaster";
+import type { AuthenticatedUser, Membership, Organization } from "@/lib/auth/types";
+import { trpc } from "@/lib/trpc/client";
 import {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { toast } from "@/components/ui/toaster";
-import type { AuthenticatedUser, Membership, Organization } from "@/lib/auth/types";
-import { trpc } from "@/lib/trpc/client";
+} from "@unkey/ui";
 import { memo, useState } from "react";
 
 type RoleSwitcherProps = {

apps/dashboard/app/(app)/settings/vercel/client.tsx

@@ -17,18 +17,12 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { toast } from "@/components/ui/toaster";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import type { Api, Key, VercelBinding } from "@unkey/db";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { ExternalLink, Link2, MoreHorizontal, Plus, RefreshCw, Trash, Unlink2 } from "lucide-react";

apps/dashboard/app/integrations/vercel/callback/client.tsx

@@ -8,16 +8,10 @@ import { Loading } from "@/components/dashboard/loading";
 import { PageHeader } from "@/components/dashboard/page-header";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { Api, VercelBinding } from "@unkey/db";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { X } from "lucide-react";
 import { useRouter } from "next/navigation";

apps/dashboard/components/dashboard/feedback-component.tsx

@@ -13,11 +13,17 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@unkey/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@unkey/ui/src/components/select";
 import { parseAsBoolean, useQueryState } from "nuqs";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 export const useFeedback = () => {
   return useQueryState("feedback", {

apps/engineering/content/design/components/select.example.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { Row } from "@/app/components/row";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@unkey/ui";
+import { AlertCircle, AlertTriangle, CheckCircle2, Mail } from "lucide-react";
+import { useState } from "react";
+
+export function SelectExample() {
+  const [value, setValue] = useState<string>("");
+
+  return (
+    <RenderComponentWithSnippet>
+      <Row>
+        {/* Basic Select */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">Basic Select</h3>
+          <Select value={value} onValueChange={setValue}>
+            <SelectTrigger variant="default">
+              <SelectValue placeholder="Select 1" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option1">Option 1</SelectItem>
+              <SelectItem value="option2">Option 2</SelectItem>
+              <SelectItem value="option3">Option 3</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Select with Left Icon */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">Select with Left Icon</h3>
+          <Select>
+            <SelectTrigger variant="default" leftIcon={<Mail className="w-4 h-4" />}>
+              <SelectValue placeholder="Select 1" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="personal">Personal Email</SelectItem>
+              <SelectItem value="work">Work Email</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Select with Groups */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">Select with Groups</h3>
+          <Select>
+            <SelectTrigger variant="default">
+              <SelectValue placeholder="Select 1" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Fruits</SelectLabel>
+                <SelectItem value="apple">Apple</SelectItem>
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="orange">Orange</SelectItem>
+              </SelectGroup>
+              <SelectGroup>
+                <SelectLabel>Vegetables</SelectLabel>
+                <SelectItem value="carrot">Carrot</SelectItem>
+                <SelectItem value="potato">Potato</SelectItem>
+                <SelectItem value="tomato">Tomato</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Disabled Select */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">Disabled Select</h3>
+          <Select disabled>
+            <SelectTrigger variant="default">
+              <SelectValue placeholder="Disabled select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="disabled1">Option 1</SelectItem>
+              <SelectItem value="disabled2">Option 2</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </Row>
+    </RenderComponentWithSnippet>
+  );
+}
+
+export function SelectExampleVariants() {
+  return (
+    <RenderComponentWithSnippet>
+      <Row>
+        {/* Select with Variants */}
+
+        <div className="flex flex-row justify-between w-full gap-4">
+          <Select>
+            <SelectTrigger variant="success" leftIcon={<CheckCircle2 className="w-4 h-4" />}>
+              <SelectValue placeholder="Success state" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="success1">Success Option 1</SelectItem>
+              <SelectItem value="success2">Success Option 2</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select>
+            <SelectTrigger variant="warning" leftIcon={<AlertTriangle className="w-4 h-4" />}>
+              <SelectValue placeholder="Warning state" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="warning1">Warning Option 1</SelectItem>
+              <SelectItem value="warning2">Warning Option 2</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select>
+            <SelectTrigger variant="error" leftIcon={<AlertCircle className="w-4 h-4" />}>
+              <SelectValue placeholder="Error state" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="error1">Error Option 1</SelectItem>
+              <SelectItem value="error2">Error Option 2</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </Row>
+    </RenderComponentWithSnippet>
+  );
+}