zudoku 0.1.1-dev.48 → 0.1.1-dev.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.48",
+  "version": "0.1.1-dev.49",
   "type": "module",
   "files": [
     "dist",
@@ -67,6 +67,7 @@
     "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.2.0",
+    "loglevel": "^1.9.1",
     "lru-cache": "10.2.0",
     "mdx": "0.3.1",
     "object-hash": "3.0.0",
@@ -109,6 +110,7 @@
     "@types/express": "^4.17.21",
     "@types/har-format": "^1.2.15",
     "@types/json-schema": "7.0.15",
+    "@types/loglevel": "^1.6.3",
     "@types/mdx": "2.0.13",
     "@types/node": "20.12.10",
     "@types/object-hash": "^3.0.6",

package/src/app/App.tsx

@@ -4,10 +4,10 @@ import "./main.css";
 import config from "virtual:zudoku-config";
 
 // Virtual Plugins
+import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
-import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 
 // Base React Component
@@ -20,11 +20,11 @@ export default function App() {
   return (
     <DevPortal
       meta={{
-        headerTitle: config?.ui?.headerTitle ?? "Developer Portal",
-        pageTitle: config?.ui?.pageTitle ?? "%s | Dev Portal",
-        logo: config?.ui?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
+        headerTitle: config.ui?.headerTitle ?? "Developer Portal",
+        pageTitle: config.ui?.pageTitle ?? "%s | Dev Portal",
+        logo: config.ui?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
         favicon:
-          config?.ui?.metadata?.favicon ??
+          config.ui?.metadata?.favicon ??
           "https://cdn.zuplo.com/www/favicon.png",
       }}
       navigation={config.navigation ?? []}

package/src/app/main.tsx

@@ -1,7 +1,16 @@
+import log from "loglevel";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.js";
 
+log.setDefaultLevel("silent");
+
+if (import.meta.env.DEV) {
+  log.setLevel("debug");
+} else if (localStorage.getItem("ENABLE_DEBUG_LOGS")) {
+  log.setLevel("debug");
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />

package/src/lib/authentication/clerk.ts

@@ -9,7 +9,6 @@ const clerkAuth = ({ clerkPubKey }: { clerkPubKey: string }): AuthProvider => {
     clerkApi = new Clerk(clerkPubKey);
 
     await clerkApi.load({});
-    clerkApi.load({});
   })();
 
   return {

package/src/lib/authentication/openid.ts

@@ -1,6 +1,8 @@
+import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { DevPortalContext } from "../core/DevPortalContext.js";
 import { type AuthProvider } from "./authentication.js";
+
 const algorithm = "oauth2";
 
 const getAuthServerByIssuer = async (issuer: string) => {
@@ -140,7 +142,7 @@ export const openIdAuth = ({
         state,
       );
       if (oauth.isOAuth2Error(params)) {
-        console.error("Error Response", params);
+        logger.error("Error Response", params);
         throw new Error(); // Handle OAuth 2.0 redirect error
       }
 
@@ -167,7 +169,7 @@ export const openIdAuth = ({
         response,
       );
       if (oauth.isOAuth2Error(oauthResult)) {
-        console.error("Error Response", oauthResult);
+        logger.error("Error Response", oauthResult);
         throw new Error(oauthResult.error);
       }
 

package/src/lib/components/Header.tsx

@@ -5,7 +5,7 @@ import { TopNavigation } from "./TopNavigation.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useTheme } from "./context/ThemeContext.js";
 
-export const Header = memo(() => {
+export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
   const { isLoggedIn, email } = useDevPortalState();
   const { login, logout, meta } = useDevPortal();

package/src/lib/components/navigation/SideNavigationWrapper.tsx

@@ -4,19 +4,21 @@ import { cn } from "../../util/cn.js";
 export const SideNavigationWrapper = forwardRef<
   HTMLDivElement,
   PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(({ children, className, pushMainContent }, ref) => (
-  <nav
-    // this data attribute is used in `Layout.tsx` to determine if side navigation
-    // is present for the current page so the main content is pushed to the right
-    // it's also important to set `peer` class here.
-    // maybe this could be simplified by adjusting the layout
-    data-navigation={String(pushMainContent)}
-    className={cn(
-      "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 pt-[--padding-content-top] w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
-      className,
-    )}
-    ref={ref}
-  >
-    {children}
-  </nav>
-));
+>(function SideNavigation({ children, className, pushMainContent }, ref) {
+  return (
+    <nav
+      // this data attribute is used in `Layout.tsx` to determine if side navigation
+      // is present for the current page so the main content is pushed to the right
+      // it's also important to set `peer` class here.
+      // maybe this could be simplified by adjusting the layout
+      data-navigation={String(pushMainContent)}
+      className={cn(
+        "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 pt-[--padding-content-top] w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+        className,
+      )}
+      ref={ref}
+    >
+      {children}
+    </nav>
+  );
+});

package/src/lib/oas/graphql/index.ts

@@ -69,7 +69,7 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
       if (!value?.[method]) return [];
 
       const operation = value[method] as OperationObject;
-      const pathParameters = value?.parameters ?? [];
+      const pathParameters = value.parameters ?? [];
       const operationParameters = operation.parameters ?? [];
 
       // parameters are inherited from the parent path object,

package/src/lib/plugins/api-key/SettingsApiKeys.tsx

@@ -51,7 +51,7 @@ export const SettingsApiKeys = ({
 
       <Card>
         <ul className="grid grid-cols-[min-content_1fr_min-content] ">
-          {data?.map((key) => (
+          {data.map((key) => (
             <li
               className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
               key={key.id}

package/src/lib/plugins/api-key/index.tsx

@@ -3,8 +3,8 @@ import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
-import { SettingsApiKeys } from "./SettingsApiKeys.js";
 import { CreateApiKey } from "./CreateApiKey.js";
+import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
 export type ApiKeyResults = Promise<ApiKey[]>;
 const DEFAULT_API_KEY_ENDPOINT =
@@ -25,9 +25,9 @@ export type ApiKeyService = {
   ) => Promise<void>;
 };
 
-export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | {};
+export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | object;
 
-export type ApiKeyPluginOptions = {} & GetApiKeysOptions;
+export type ApiKeyPluginOptions = object & GetApiKeysOptions;
 
 export interface ApiKey {
   id: string;

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,3 +1,4 @@
+import { useMDXComponents } from "@mdx-js/react";
 import { useMemo, type PropsWithChildren, type ReactNode } from "react";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
@@ -6,20 +7,24 @@ import { useTopNavigationItem } from "../../components/context/DevPortalProvider
 import { isPathItem } from "../../components/navigation/util.js";
 import { Helmet } from "../../core/helmet.js";
 import { Link, useLocation } from "../../core/router.js";
+import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
 import type { MDXImport } from "./index.js";
-import { useMDXComponents } from "@mdx-js/react";
-import type { MdxComponentsType } from "../../util/MdxComponents.js";
 
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
-    <Heading level={2} id={id} children={children} registerSidebarAnchor />
+    <Heading level={2} id={id} registerSidebarAnchor>
+      {children}
+    </Heading>
   ),
   h3: ({ children, id }) => (
-    <Heading level={3} id={id} children={children} registerSidebarAnchor />
+    <Heading level={3} id={id} registerSidebarAnchor>
+      {" "}
+      {children}
+    </Heading>
   ),
 } satisfies MdxComponentsType;
 
@@ -43,9 +48,9 @@ export const MdxPage = ({
       })
     : undefined;
 
-  const title = frontmatter?.title;
-  const category = frontmatter?.category ?? categoryTitle;
-  const hideToc = frontmatter?.toc === false;
+  const title = frontmatter.title;
+  const category = frontmatter.category ?? categoryTitle;
+  const hideToc = frontmatter.toc === false;
 
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
@@ -100,7 +105,7 @@ export const MdxPage = ({
               {title}
             </Heading>
           )}
-          {frontmatter?.description && (
+          {frontmatter.description && (
             <p className="prose-lg">{frontmatter.description}</p>
           )}
         </header>

package/src/lib/plugins/openapi/ColorizedParam.tsx

@@ -74,7 +74,7 @@ export const ColorizedParam = ({
         className="absolute inset-0 border-b-2 transition-opacity duration-200 opacity-30 group-data-[active=true]:opacity-100"
         style={{ borderColor, backgroundColor }}
       />
-      <span className="relative">{children || name}</span>
+      <span className="relative">{children ?? name}</span>
     </span>
   );
 };

package/src/lib/plugins/openapi/MakeRequest.tsx

@@ -23,19 +23,19 @@ export const MakeRequest = ({
 
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
-    ?.map((p) => ({
+    .map((p) => ({
       name: p.name,
       value: p.examples?.find((x) => x.value)?.value ?? "",
     }));
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")
-    ?.map((p) => ({
+    .map((p) => ({
       name: p.name,
       value: "",
     }));
   const pathParams = operation.parameters
     ?.filter((p) => p.in === "path")
-    ?.map((p) => ({
+    .map((p) => ({
       name: p.name,
       value: "",
     }));

package/src/lib/plugins/openapi/OperationList.tsx

@@ -101,7 +101,7 @@ export const OperationList = () => {
         </Heading>
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
-      {result.data?.schema.tags
+      {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)
         .map((tag) => (
           <div key={tag.name}>

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -17,7 +17,7 @@ export const OperationListItem = ({
   operationFragment: FragmentType<typeof OperationsFragment>;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
-  const groupedParameters = groupBy(operation?.parameters ?? [], "in");
+  const groupedParameters = groupBy(operation.parameters ?? [], "in");
   const first = operation.responses.find((re) => re.statusCode === "200");
   return (
     <div
@@ -37,7 +37,7 @@ export const OperationListItem = ({
         {operation.parameters && operation.parameters.length > 0 && (
           <div className="mt-4">
             {PARAM_GROUPS.flatMap((group) =>
-              groupedParameters?.[group]?.length ? (
+              groupedParameters[group].length ? (
                 <ParameterList
                   key={group}
                   id={operation.slug}

package/src/lib/plugins/openapi/ResponsesSidecarBox.tsx

@@ -15,7 +15,7 @@ export const ResponsesSidecarBox = ({
   const [tabIndex, setTabIndex] = useState(0);
 
   const activeTab = responses[tabIndex];
-  const schema = activeTab?.content?.[0]?.schema as SchemaObject | undefined;
+  const schema = activeTab.content?.[0]?.schema as SchemaObject | undefined;
 
   return (
     <SidecarBox.Root>

package/src/lib/plugins/openapi/SchemaListView.tsx

@@ -1,10 +1,10 @@
-import { SchemaObject } from "../../oas/parser/index.js";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ListPlusIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../util/cn.js";
 import { Markdown } from "../../components/Markdown.js";
-import * as Collapsible from "@radix-ui/react-collapsible";
+import { SchemaObject } from "../../oas/parser/index.js";
 import { Button } from "../../ui/Button.js";
-import { ListPlusIcon } from "lucide-react";
+import { cn } from "../../util/cn.js";
 
 export const SchemaListView = ({
   name,
@@ -117,7 +117,7 @@ const SchemaListViewItemGroup = ({
             property={property}
             propertyName={propertyName}
             nestingLevel={nestingLevel}
-            isRequired={required?.includes(propertyName) ?? false}
+            isRequired={required.includes(propertyName)}
           />
         ))}
       </Collapsible.Content>

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -1,5 +1,7 @@
+import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useState } from "react";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 import { ColorizedParam } from "./ColorizedParam.js";
 import { MakeRequest } from "./MakeRequest.js";
@@ -9,9 +11,7 @@ import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
 import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import { Select } from "./Select.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
-import type { SchemaObject } from "../../oas/parser/index.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
   let converted;
@@ -105,7 +105,7 @@ export const Sidecar = ({
       } as never, // 👈 never touch this
     );
 
-    return getConverted(snippet, option) ?? "";
+    return getConverted(snippet, option);
   }, [option, operation.method, operation.path, requestBodyContent]);
 
   return (

package/src/lib/plugins/openapi/playground/PathParams.tsx

@@ -1,16 +1,16 @@
+import { forwardRef, InputHTMLAttributes } from "react";
 import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { cn } from "../../../util/cn.js";
+import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
 import { InlineInput } from "./InlineInput.js";
 import { PlaygroundForm } from "./Playground.js";
-import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
-import { forwardRef, InputHTMLAttributes } from "react";
-import { cn } from "../../../util/cn.js";
 
 type ParameterValueProps = {
   part: string;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
-  ({ part, className, ...props }, ref) => {
+  function ParameterValue({ part, className, ...props }, ref) {
     const color = usePastellizedColor(part);
     return (
       <InlineInput

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -1,24 +1,15 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { useMutation } from "@tanstack/react-query";
+import { CirclePlayIcon } from "lucide-react";
+import { Fragment } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   DialogTrigger,
 } from "../../../components/Dialog.js";
-import { Card } from "../../../ui/Card.js";
-import { Button } from "../../../ui/Button.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
-import { Fragment } from "react";
-import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
-import { ColorizedParam } from "../ColorizedParam.js";
-import { useMutation } from "@tanstack/react-query";
-import { FormProvider, useForm } from "react-hook-form";
-import { Headers } from "./Headers.js";
-import { QueryParams } from "./QueryParams.js";
-import { PathParams } from "./PathParams.js";
-import { CirclePlayIcon } from "lucide-react";
-import { createUrl } from "./createUrl.js";
-import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
-import { Spinner } from "../../../components/Spinner.js";
 import {
   Select,
   SelectContent,
@@ -26,7 +17,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../../components/Select.js";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { Spinner } from "../../../components/Spinner.js";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import { Button } from "../../../ui/Button.js";
+import { Card } from "../../../ui/Card.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import { createUrl } from "./createUrl.js";
+import { Headers } from "./Headers.js";
+import { PathParams } from "./PathParams.js";
+import { QueryParams } from "./QueryParams.js";
 
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
@@ -128,7 +128,7 @@ const Playground = ({
 
       if (data.identity !== NO_IDENTITY) {
         identities.data
-          ?.find((i) => i.id === data.identity)
+          .find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
 
@@ -152,9 +152,6 @@ const Playground = ({
         <ColorizedParam
           name={part}
           backgroundOpacity="0"
-          onClick={() => {
-            console.log("asd");
-          }}
           slug={part.slice(1, -1)}
         >
           {
@@ -257,7 +254,7 @@ const Playground = ({
                         </SelectTrigger>
                         <SelectContent align="center">
                           <SelectItem value={NO_IDENTITY}>None</SelectItem>
-                          {identities.data?.map((identity) => (
+                          {identities.data.map((identity) => (
                             <SelectItem key={identity.id} value={identity.id}>
                               {identity.label}
                             </SelectItem>
@@ -330,7 +327,7 @@ const Playground = ({
                             noBackground
                             className="overflow-x-auto "
                             code={
-                              queryMutation.data?.body ?? JSON.stringify("")
+                              queryMutation.data.body ?? JSON.stringify("")
                             }
                           />
                         </Card>

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -1,3 +1,6 @@
+import logger from "loglevel";
+import { XIcon } from "lucide-react";
+import { useEffect } from "react";
 import {
   Control,
   Controller,
@@ -5,10 +8,8 @@ import {
   useFormContext,
   useWatch,
 } from "react-hook-form";
-import { XIcon } from "lucide-react";
 import { InlineInput } from "./InlineInput.js";
 import { PlaygroundForm } from "./Playground.js";
-import { useEffect } from "react";
 
 const QueryParamActive = ({
   i,
@@ -23,7 +24,7 @@ const QueryParamActive = ({
 
   useEffect(() => {
     if (value) {
-      console.log(`queryParams.${i}.active`, active);
+      logger.log(`queryParams.${i}.active`, active);
       form.setValue(`queryParams.${i}.active`, true);
     }
   }, [value]);

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -50,7 +50,6 @@ function processComplexTypes(schema: SchemaObject, name?: string): any {
 
 function getDefaultForType(type?: string | string[]): any {
   if (Array.isArray(type)) {
-    debugger;
     return getDefaultForSingleType(type[0]);
   }
   return getDefaultForSingleType(type);

package/src/lib/plugins/openapi/worker/createSharedWorkerClient.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { monotonicFactory } from "ulidx";
 import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
 import {

package/src/lib/ui/Button.tsx

@@ -1,56 +1,25 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../util/cn.js";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center 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",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+import { buttonVariants } from "./button-variants.js";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
+    );
+  },
+);
+Button.displayName = "Button";

package/src/lib/ui/button-variants.ts

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center 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",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);