zudoku 0.1.1-dev.9 → 0.3.0-dev.100

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

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type SchemaObject } from "../../../oas/graphql/index.js";
+
+export const isObject = (value: unknown): boolean =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+export const generateSchemaExample = (
+  schema: SchemaObject,
+  name?: string,
+): any => {
+  // Directly return the example or default if they exist
+  if (schema.example !== undefined) {
+    return schema.example;
+  } else if (schema.default !== undefined) {
+    return schema.default;
+  }
+
+  // Process examples object
+  if (schema.examples && isObject(schema.examples)) {
+    return Object.values(schema.examples)[0];
+  }
+
+  // Recursively process objects and arrays
+  return processComplexTypes(schema, name);
+};
+
+function processComplexTypes(schema: SchemaObject, name?: string): any {
+  const properties = Object.entries(schema.properties ?? {}).concat(
+    Object.entries(schema.additionalProperties ?? {}),
+  );
+  if (schema.type === "object" && properties.length > 0) {
+    const obj: { [key: string]: any } = {};
+    properties.forEach(([key, propSchema]) => {
+      const value = generateSchemaExample(propSchema, key);
+      if (value !== undefined) {
+        obj[key] = value;
+      }
+    });
+    return obj;
+  } else if (schema.type === "array" && schema.items) {
+    const value = generateSchemaExample(schema.items, name);
+    if (value !== undefined) {
+      return [value];
+    }
+    return [];
+  }
+  // Fallback for missing or undefined types
+  return undefined; //getDefaultForType(schema.type);
+}
+
+function getDefaultForType(type?: string | string[]): any {
+  if (Array.isArray(type)) {
+    return getDefaultForSingleType(type[0]);
+  }
+  return getDefaultForSingleType(type);
+}
+
+function getDefaultForSingleType(type?: string): any {
+  switch (type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "null":
+      return null;
+    default:
+      return "undefined";
+  }
+}

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

@@ -0,0 +1,7 @@
+import { ProseClasses } from "../../../components/Markdown.js";
+import { cn } from "../../../util/cn.js";
+
+export const SchemaProseClasses = cn(
+  ProseClasses,
+  "max-w-full prose-img:max-w-prose",
+);

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

@@ -0,0 +1 @@
+export { createClient } from "./openapi/client/createWorkerClient.js";

package/src/lib/plugins/redirect/index.tsx

@@ -0,0 +1,19 @@
+import { redirect } from "react-router-dom";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+
+export type Redirect = {
+  from: string;
+  to: string;
+};
+
+export const redirectPlugin = (options: {
+  redirects: Redirect[];
+}): DevPortalPlugin => {
+  return {
+    getRoutes: () =>
+      options.redirects.map(({ from, to }) => ({
+        path: from,
+        loader: () => redirect(to),
+      })),
+  };
+};

package/src/lib/plugins/search-inkeep/InkeepCustomTrigger.tsx

@@ -0,0 +1,3 @@
+import { InkeepCustomTrigger } from "@inkeep/widgets";
+
+export default InkeepCustomTrigger;

package/src/lib/plugins/search-inkeep/index.tsx

@@ -0,0 +1,63 @@
+import type { InkeepWidgetBaseSettings } from "@inkeep/widgets";
+import { lazy } from "react";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+import { aiChatSettings, baseSettings } from "./inkeep.js";
+
+type PickedPluginInkeepBaseSettings =
+  | "apiKey"
+  | "integrationId"
+  | "organizationId"
+  | "primaryBrandColor"
+  | "organizationDisplayName";
+
+type PluginInkeepBaseSettings = Pick<
+  InkeepWidgetBaseSettings,
+  PickedPluginInkeepBaseSettings
+>;
+
+const Inkeep = lazy(() => import("./InkeepCustomTrigger.js"));
+
+const InkeepSearch = ({
+  prefilledQuery,
+  isOpen,
+  onClose,
+  settings,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  prefilledQuery?: string | null;
+  settings: PluginInkeepBaseSettings;
+}) => {
+  return (
+    <Inkeep
+      isOpen={isOpen}
+      onClose={onClose}
+      baseSettings={{ ...baseSettings, ...settings }}
+      aiChatSettings={aiChatSettings}
+      searchSettings={{
+        prefilledQuery: prefilledQuery || undefined,
+      }}
+    />
+  );
+};
+
+export const inkeepSearchPlugin = (
+  settings: PluginInkeepBaseSettings,
+): DevPortalPlugin => {
+  return {
+    renderSearch: ({
+      isOpen,
+      onClose,
+    }: {
+      isOpen: boolean;
+      onClose: () => void;
+    }) => {
+      return (
+        <ClientOnly>
+          <InkeepSearch isOpen={isOpen} onClose={onClose} settings={settings} />
+        </ClientOnly>
+      );
+    },
+  };
+};

package/src/lib/plugins/search-inkeep/inkeep.ts

@@ -0,0 +1,32 @@
+import {
+  InkeepAIChatSettings,
+  InkeepModalSettings,
+  InkeepSearchSettings,
+} from "@inkeep/widgets";
+
+const baseSettings = {
+  theme: {
+    components: {
+      AIChatPageWrapper: {
+        defaultProps: {
+          size: "shrink-vertically",
+          variant: "no-shadow",
+        },
+      },
+      SearchBarTrigger: {
+        defaultProps: {
+          size: "expand",
+          variant: "subtle", // Choose from 'emphasized' or 'subtle'
+        },
+      },
+    },
+  },
+} as const;
+
+const modalSettings: InkeepModalSettings = {};
+
+const searchSettings: InkeepSearchSettings = {};
+
+const aiChatSettings: InkeepAIChatSettings = {};
+
+export { aiChatSettings, baseSettings, modalSettings, searchSettings };

package/src/lib/ui/Button.tsx

@@ -0,0 +1,55 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const buttonVariants = cva(
+  "not-prose 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",
+        xl: "h-14 rounded-lg px-10 text-lg",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";

package/src/lib/ui/Callout.tsx

@@ -0,0 +1,87 @@
+import {
+  AlertTriangleIcon,
+  InfoIcon,
+  LightbulbIcon,
+  ShieldAlertIcon,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../util/cn.js";
+
+const stylesMap = {
+  note: {
+    border: "border-gray-300 dark:border-zinc-800",
+    bg: "bg-gray-100 dark:bg-zinc-800/50",
+    iconColor: "text-gray-600 dark:text-zinc-300",
+    titleColor: "text-gray-600 dark:text-zinc-300",
+    textColor: "text-gray-600 dark:text-zinc-300",
+    Icon: InfoIcon,
+  },
+  tip: {
+    border: "border-green-500 dark:border-green-800",
+    bg: "bg-green-200/25 dark:bg-green-950/70",
+    iconColor: "text-green-600 dark:text-green-200",
+    titleColor: "text-green-700 dark:text-green-200",
+    textColor: "text-green-600 dark:text-green-50",
+    Icon: LightbulbIcon,
+  },
+  info: {
+    border: "border-blue-400 dark:border-blue-900/60",
+    bg: "bg-blue-50 dark:bg-blue-950/40",
+    iconColor: "text-blue-400 dark:text-blue-200",
+    titleColor: "text-blue-700 dark:text-blue-200",
+    textColor: "text-blue-600 dark:text-blue-100",
+    Icon: InfoIcon,
+  },
+  caution: {
+    border: "border-yellow-400 dark:border-yellow-400/25",
+    bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
+    iconColor: "text-yellow-500 dark:text-yellow-300",
+    titleColor: "text-yellow-600 dark:text-yellow-300",
+    textColor: "text-yellow-700 dark:text-yellow-200",
+    Icon: AlertTriangleIcon,
+  },
+  danger: {
+    border: "border-rose-400 dark:border-rose-800",
+    bg: "bg-rose-50 dark:bg-rose-950/40",
+    iconColor: "text-rose-400 dark:text-rose-300",
+    titleColor: "text-rose-800 dark:text-rose-300",
+    textColor: "text-rose-700 dark:text-rose-100",
+    Icon: ShieldAlertIcon,
+  },
+};
+
+type CalloutProps = {
+  type: keyof typeof stylesMap;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const Callout = ({ type, children, title, className }: CalloutProps) => {
+  const { border, bg, iconColor, titleColor, textColor, Icon } =
+    stylesMap[type];
+
+  return (
+    <div
+      className={cn(
+        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
+        title && "items-center",
+        border,
+        bg,
+        className,
+      )}
+    >
+      <Icon
+        className={cn(!title && "mt-1 translate-y-px", iconColor)}
+        size={20}
+        aria-hidden="true"
+      />
+      {title && <h3 className={cn("font-medium", titleColor)}>{title}</h3>}
+      <div className={cn("col-start-2", !title && "row-start-1", textColor)}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/ui/Card.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/lib/ui/DropdownMenu.tsx

@@ -0,0 +1,199 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/lib/ui/Tabs.tsx

@@ -0,0 +1,52 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };