unkeyed · MichaelUnkey · Jul 10, 2025 · Jun 26, 2025 · Jun 30, 2025 · Jul 8, 2025
@@ -1,4 +1,5 @@
-import { CopyButton, SettingCard } from "@unkey/ui";
+import { SettingCard } from "@unkey/ui";
+import { CopyButton } from "@unkey/ui";
 
 export const CopyApiId = ({ apiId }: { apiId: string }) => {
   return (
@@ -8,16 +9,18 @@ export const CopyApiId = ({ apiId }: { apiId: string }) => {
         <div className="max-w-[380px]">An identifier for the API, used in some API calls.</div>
       }
       border="bottom"
-      contentWidth="w-full lg:w-[420px] justify-end items-center"
+      contentWidth="w-full lg:w-[420px] justify-end"
     >
       {/* TODO: make this a Code component in UI for CopyKeys with optional hidden button like in Code.*/}
-      <div
-        className={
-          "flex flex-row justify-between min-w-[328px] pl-4 pr-2 py-1.5 bg-gray-2 dark:bg-black border rounded-lg border-grayA-5"
-        }
-      >
-        <div className="text-sm text-gray-11">{apiId}</div>
-        <CopyButton value={apiId} variant="ghost" toastMessage={apiId} />
+      <div className="flex flex-row justify-end items-center">
+        <div
+          className={
+            "flex flex-row justify-between min-w-[327px] pl-4 pr-2 py-1.5 bg-gray-2 dark:bg-black border rounded-lg border-grayA-5"
+          }
+        >
+          <div className="text-sm text-gray-11">{apiId}</div>
+          <CopyButton value={apiId} variant="ghost" toastMessage={apiId} />
+        </div>
       </div>
     </SettingCard>
   );

@@ -1,7 +1,6 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { ApiOverview } from "@/lib/trpc/routers/api/overview/query-overview/schemas";
-import { LLMSearch } from "@unkey/ui";
+import { LLMSearch, toast } from "@unkey/ui";
 import { useRef } from "react";
 type Props = {
   apiList: ApiOverview[];

@@ -1,7 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
-import { transformStructuredOutputToFilters } from "@unkey/ui";
+import { LLMSearch, toast, transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
 export const LogsSearch = () => {

@@ -1,7 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
-import { transformStructuredOutputToFilters } from "@unkey/ui";
+import { LLMSearch, toast, transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
 export const PermissionSearch = () => {

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useDeletePermission = (
   onSuccess: (data: {

@@ -1,8 +1,8 @@
 "use client";
 import { type MenuItem, TableActionPopover } from "@/components/logs/table-action.popover";
-import { toast } from "@/components/ui/toaster";
 import type { Permission } from "@/lib/trpc/routers/authorization/permissions/query";
 import { Clone, PenWriting3, Trash } from "@unkey/icons";
+import { toast } from "@unkey/ui";
 import { DeletePermission } from "./components/delete-permission";
 import { EditPermission } from "./components/edit-permission";
 

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useUpsertPermission = (
   onSuccess: (data: {

@@ -1,7 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
-import { transformStructuredOutputToFilters } from "@unkey/ui";
+import { LLMSearch, toast, transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
 export const RolesSearch = () => {

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useDeleteRole = (
   onSuccess: (data: { roleIds: string[] | string; message: string }) => void,

@@ -4,10 +4,10 @@ import {
   type MenuItem,
   TableActionPopoverDefaultTrigger,
 } from "@/components/logs/table-action.popover";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { RoleBasic } from "@/lib/trpc/routers/authorization/roles/query";
 import { Clone, PenWriting3, Trash } from "@unkey/icons";
+import { toast } from "@unkey/ui";
 import dynamic from "next/dynamic";
 import { MAX_KEYS_FETCH_LIMIT } from "../../../upsert-role/components/assign-key/hooks/use-fetch-keys";
 import { MAX_PERMS_FETCH_LIMIT } from "../../../upsert-role/components/assign-permission/hooks/use-fetch-permissions";

@@ -1,6 +1,6 @@
 "use client";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 import { useMemo } from "react";
 
 // No need to fetch more than 10 items, because combobox allows seeing 6 items at a time so even if users scroll 10 items are more than enough.

@@ -1,6 +1,6 @@
 "use client";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 import { useMemo } from "react";
 
 // No need to fetch more than 10 items, because combobox allows seeing 6 items at a time so even if users scroll 10 items are more than enough.

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useUpsertRole = (
   onSuccess: (data: {

@@ -1,8 +1,6 @@
 import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
-import { transformStructuredOutputToFilters } from "@unkey/ui";
+import { LLMSearch, toast, transformStructuredOutputToFilters } from "@unkey/ui";
 
 export const LogsSearch = () => {
   const { filters, updateFilters } = useFilters();

@@ -1,9 +1,7 @@
 "use client";
-
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, DialogContainer, Input } from "@unkey/ui";
+import { Button, DialogContainer, Input, toast } from "@unkey/ui";
 import type { PropsWithChildren } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";