zudoku 0.64.2 → 0.65.1

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -1,7 +1,15 @@
 import { InfoIcon } from "lucide-react";
+import { Fragment } from "react";
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+} from "zudoku/ui/Frame.js";
+import { ItemGroup, ItemSeparator } from "zudoku/ui/Item.js";
 import { Markdown } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
-import { Card } from "../../../ui/Card.js";
 import { groupBy } from "../../../util/groupBy.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
@@ -22,19 +30,30 @@ const renderMarkdown = (content?: string) =>
 const renderBasicSchema = (
   schema: SchemaObject,
   cardHeader?: React.ReactNode,
-) => (
-  <Card className="overflow-hidden">
-    {cardHeader}
-    <div className="p-4 space-y-2">
+  embedded?: boolean,
+) => {
+  const content = (
+    <>
       <span className="text-sm text-muted-foreground">
         <ParamInfos schema={schema} />
       </span>
       {schema.enum && <EnumValues values={schema.enum} />}
       {renderMarkdown(schema.description)}
       <SchemaExampleAndDefault schema={schema} />
-    </div>
-  </Card>
-);
+    </>
+  );
+
+  if (embedded) {
+    return <div className="space-y-2 p-4">{content}</div>;
+  }
+
+  return (
+    <Frame>
+      {cardHeader}
+      <FramePanel className="space-y-2">{content}</FramePanel>
+    </Frame>
+  );
+};
 
 export const SchemaView = ({
   schema,
@@ -49,12 +68,14 @@ export const SchemaView = ({
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
-      <Card className="overflow-hidden">
+      <Frame>
         {cardHeader}
-        <div className="text-sm text-muted-foreground italic p-4">
-          No data returned
-        </div>
-      </Card>
+        <FramePanel>
+          <div className="text-sm text-muted-foreground italic">
+            No data returned
+          </div>
+        </FramePanel>
+      </Frame>
     );
   }
 
@@ -67,7 +88,7 @@ export const SchemaView = ({
   }
 
   if (isBasicType(schema.type)) {
-    return renderBasicSchema(schema, cardHeader);
+    return renderBasicSchema(schema, cardHeader, embedded);
   }
 
   if (schema.type === "array" && typeof schema.items === "object") {
@@ -87,48 +108,61 @@ export const SchemaView = ({
     );
     const groupNames = ["required", "optional", "deprecated"] as const;
 
-    const additionalProperties =
-      typeof schema.additionalProperties === "object" ? (
-        <SchemaView schema={schema.additionalProperties} embedded />
-      ) : schema.additionalProperties === true ? (
-        <div className="text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1">
-          <span>Additional properties are allowed</span>
-          <a
-            className="p-0.5 -m-0.5"
-            href="https://swagger.io/docs/specification/v3_0/data-models/dictionaries/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <InfoIcon size={14} />
-          </a>
-        </div>
-      ) : null;
+    const additionalObjectProperties = typeof schema.additionalProperties ===
+      "object" && <SchemaView schema={schema.additionalProperties} embedded />;
 
-    const Component = embedded ? "div" : Card;
-
-    return (
-      <Component className="divide-y overflow-hidden">
-        {cardHeader}
-        {groupNames.map(
-          (group) =>
-            groupedProperties[group] && (
-              <ul key={group} className="divide-y">
-                {groupedProperties[group].map(([name, schema]) => (
+    const itemsList = groupNames.map(
+      (group, index) =>
+        groupedProperties[group] && (
+          <Fragment key={group}>
+            {index > 0 && <ItemSeparator />}
+            <ItemGroup className="overflow-clip">
+              {groupedProperties[group].map(([name, schema], index) => (
+                <Fragment key={name}>
+                  {index > 0 && <ItemSeparator />}
                   <SchemaPropertyItem
-                    key={name}
                     name={name}
                     schema={schema}
                     group={group}
                     defaultOpen={defaultOpen}
                   />
-                ))}
-              </ul>
-            ),
+                </Fragment>
+              ))}
+            </ItemGroup>
+          </Fragment>
+        ),
+    );
+
+    if (embedded) {
+      return itemsList;
+    }
+
+    return (
+      <Frame>
+        {cardHeader}
+        {schema.description && (
+          <FrameHeader>
+            <FrameDescription>{schema.description}</FrameDescription>
+          </FrameHeader>
         )}
-        {additionalProperties}
-      </Component>
+        <FramePanel className="p-0!">
+          {itemsList}
+          {additionalObjectProperties}
+        </FramePanel>
+        {schema.additionalProperties === true && (
+          <FrameFooter>
+            <a
+              className="text-sm flex items-center gap-1 hover:underline"
+              href="https://swagger.io/docs/specification/v3_0/data-models/dictionaries/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Additional properties are allowed
+              <InfoIcon size={14} />
+            </a>
+          </FrameFooter>
+        )}
+      </Frame>
     );
   }
-
-  return null;
 };

package/src/lib/plugins/openapi/schema/UnionView.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Badge } from "../../../ui/Badge.js";
-import { Card } from "../../../ui/Card.js";
+import { Frame, FramePanel } from "../../../ui/Frame.js";
 import { cn } from "../../../util/cn.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -67,17 +67,6 @@ const DecisionTable = ({
   );
 };
 
-const VariantPanel = ({ variant }: { variant: SchemaObject }) => {
-  return (
-    <div className="space-y-2">
-      {variant.description && (
-        <p className="text-sm text-muted-foreground">{variant.description}</p>
-      )}
-      <SchemaView schema={variant} />
-    </div>
-  );
-};
-
 export const UnionView = ({
   schema,
   cardHeader,
@@ -119,9 +108,9 @@ export const UnionView = ({
     currentVariantIndex >= 0 ? variants[currentVariantIndex] : null;
 
   return (
-    <Card className="overflow-hidden text-sm">
+    <Frame>
       {cardHeader}
-      <div className="flex flex-col gap-4 p-4">
+      <FramePanel className="text-sm flex flex-col gap-4">
         <div className="flex items-center gap-2">
           <Badge variant="outline">{mode}</Badge>
           <div className="flex-1 p-2">
@@ -136,8 +125,8 @@ export const UnionView = ({
           onSelectVariant={setSelectedVariant}
         />
         <strong>Properties for {selectedVariant}:</strong>
-        {currentVariant && <VariantPanel variant={currentVariant} />}
-      </div>
-    </Card>
+        {currentVariant && <SchemaView schema={currentVariant} />}
+      </FramePanel>
+    </Frame>
   );
 };

package/src/lib/ui/Badge.tsx

@@ -1,21 +1,22 @@
+import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
-
 import { cn } from "../util/cn.js";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        muted: "bg-muted text-muted-foreground ",
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        muted: "bg-muted text-muted-foreground ",
       },
     },
     defaultVariants: {
@@ -24,13 +25,21 @@ const badgeVariants = cva(
   },
 );
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
 
-function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
   );
 }
 

package/src/lib/ui/Button.tsx

@@ -30,6 +30,7 @@ export const buttonVariants = cva(
         xl: "h-14 rounded-lg px-10 text-lg",
         icon: "size-9",
         "icon-xs": "size-7",
+        "icon-xxs": "size-5",
       },
     },
     defaultVariants: {

package/src/lib/ui/Checkbox.tsx

@@ -1,29 +1,28 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import * as React from "react";
-
+import { CheckIcon } from "lucide-react";
+import type * as React from "react";
 import { cn } from "../util/cn.js";
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-[min(6px,var(--radius)-4px)] ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary",
-      "border border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
     >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
 export { Checkbox };

package/src/lib/ui/CodeBlock.tsx

@@ -34,12 +34,12 @@ export const CodeBlock = ({
   return (
     <div
       className={cn(
-        "border code-block-wrapper relative group rounded-md overflow-hidden",
+        "border code-block-wrapper relative group rounded-xl overflow-hidden",
         showLineNumbers && "line-numbers",
         props.className,
       )}
     >
-      <div className="border-b flex items-center h-10 font-sans bg-black/2">
+      <div className="border-b flex items-center py-1 font-sans bg-black/2">
         <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
           <LanguageIcon language={language} />
           {title}
@@ -50,7 +50,7 @@ export const CodeBlock = ({
             aria-label="Copy code"
             title="Copy code"
             className={cn(
-              "transition px-2 py-2 mx-1 rounded-sm",
+              "transition p-1.5 mx-1 rounded-lg",
               !isCopied && "hover:bg-accent hover:brightness-95",
             )}
             disabled={isCopied}

package/src/lib/ui/Collapsible.tsx

@@ -1,9 +1,31 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-const Collapsible = CollapsiblePrimitive.Root;
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
 
-export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -2,6 +2,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { cn } from "../util/cn.js";
+import { Button } from "./Button.js";
 
 export type CodeBlockProps = {
   className?: string;
@@ -39,20 +40,22 @@ export const EmbeddedCodeBlock = ({
         fullHeight && "h-full",
       )}
     >
-      <div
-        className={cn(
-          "code-block text-sm not-prose scrollbar [&>pre]:overflow-x-auto [&_code]:p-2",
-          fullHeight && "h-full [&>pre]:h-full",
-          props.className,
-        )}
-        ref={ref}
-      >
-        {children}
+      <div className="relative overflow-auto">
+        <div
+          className={cn(
+            "code-block text-sm not-prose scrollbar [&>pre]:overflow-x-auto [&_code]:p-2",
+            fullHeight && "h-full [&>pre]:h-full",
+            props.className,
+          )}
+          ref={ref}
+        >
+          {children}
+        </div>
       </div>
       {showLanguageIndicator && (
         <span
           className={cn(
-            "absolute top-1.5 end-3 text-[11px]! font-mono text-muted-foreground transition group-hover:opacity-0",
+            "absolute top-1.5 end-3 text-[11px]! font-mono text-muted-foreground transition group-hover:opacity-0 pointer-events-none",
             showCopy === "always" && "hidden",
           )}
         >
@@ -60,12 +63,12 @@ export const EmbeddedCodeBlock = ({
         </span>
       )}
       {showCopy !== "never" && (
-        <button
+        <Button
           type="button"
-          aria-label="Copy code"
-          title="Copy code"
+          variant="outline"
+          size="icon-xs"
           className={cn(
-            "absolute top-2 end-2 p-2 transition hover:shadow-xs active:shadow-none active:inset-shadow-xs hover:outline outline-border rounded-md text-sm text-muted-foreground",
+            "absolute top-2 end-2 p-2",
             showCopy === "hover" && "opacity-0 group-hover:opacity-100",
             showCopyText && "flex gap-2 items-center font-medium",
           )}
@@ -80,16 +83,16 @@ export const EmbeddedCodeBlock = ({
         >
           {isCopied ? (
             <CheckIcon
-              className="text-emerald-600"
-              size={16}
+              className="shrink-0 text-emerald-600 dark:text-emerald-300"
+              size={13}
               strokeWidth={2.5}
               absoluteStrokeWidth
             />
           ) : (
-            <CopyIcon size={16} />
+            <CopyIcon className="shrink-0" size={13} />
           )}
           {showCopyText && "Copy"}
-        </button>
+        </Button>
       )}
     </div>
   );

package/src/lib/ui/Frame.tsx

@@ -0,0 +1,81 @@
+import type * as React from "react";
+import { cn } from "../util/cn.js";
+
+function Frame({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="frame"
+      className={cn(
+        "relative flex flex-col rounded-2xl bg-muted p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FramePanel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="frame-panel"
+      className={cn(
+        "relative bg-clip-padding rounded-xl border bg-card p-5 shadow-xs",
+        "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FrameHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return (
+    <header
+      data-slot="frame-panel-header"
+      className={cn("flex flex-col p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function FrameTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="frame-panel-title"
+      className={cn("text-sm font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function FrameDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="frame-panel-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function FrameFooter({ className, ...props }: React.ComponentProps<"footer">) {
+  return (
+    <footer
+      data-slot="frame-panel-footer"
+      className={cn("flex flex-col gap-1 px-5 py-4", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Frame,
+  FramePanel,
+  FrameHeader,
+  FrameTitle,
+  FrameDescription,
+  FrameFooter,
+};