@clidey/dory 0.22.0 → 0.24.0

package/src/mdx/callout.tsx

@@ -1,40 +1,28 @@
-import classNames from "classnames"
+import { Alert, AlertTitle, AlertDescription } from '@clidey/ux'
 import { Icon } from "./icon"
 
-const styles = {
-  note: {
-    container: 'my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 text-sm/6 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:var(--color-emerald-300)] dark:[--tw-prose-links:var(--color-white)]',
-    title: 'text-emerald-900 dark:text-emerald-200',
-    body: 'text-emerald-900 dark:text-emerald-200',
-  },
-  warning: {
-    container: 'my-6 flex gap-2.5 rounded-2xl border border-amber-500/20 bg-amber-50/50 p-4 text-sm/6 text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/5 dark:text-amber-200 dark:[--tw-prose-links-hover:var(--color-amber-300)] dark:[--tw-prose-links:var(--color-white)]',
-    title: 'text-amber-900 dark:text-amber-200',
-    body: 'text-amber-900 dark:text-amber-200',
-  },
-  info: {
-    container: 'my-6 flex gap-2.5 rounded-2xl border border-blue-500/20 bg-blue-50/50 p-4 text-sm/6 text-blue-900 dark:border-blue-500/30 dark:bg-blue-500/5 dark:text-blue-200 dark:[--tw-prose-links-hover:var(--color-blue-300)] dark:[--tw-prose-links:var(--color-white)]',
-    title: 'text-blue-900 dark:text-blue-200',
-    body: 'text-blue-900 dark:text-blue-200',
-  },
-  tip: {
-    container: 'my-6 flex gap-2.5 rounded-2xl border border-green-500/20 bg-green-50/50 p-4 text-sm/6 text-green-900 dark:border-green-500/30 dark:bg-green-500/5 dark:text-green-200 dark:[--tw-prose-links-hover:var(--color-green-300)] dark:[--tw-prose-links:var(--color-white)]',
-    title: 'text-green-900 dark:text-green-200',
-    body: 'text-green-900 dark:text-green-200',
-  },
-  check: {
-    container: 'my-6 flex gap-2.5 rounded-2xl border border-purple-500/20 bg-purple-50/50 p-4 text-sm/6 text-purple-900 dark:border-purple-500/30 dark:bg-purple-500/5 dark:text-purple-200 dark:[--tw-prose-links-hover:var(--color-purple-300)] dark:[--tw-prose-links:var(--color-white)]',
-    title: 'text-purple-900 dark:text-purple-200',
-    body: 'text-purple-900 dark:text-purple-200',
-  },
-}
+const typeToVariant = {
+  note: 'default',
+  warning: 'destructive',
+  info: 'default',
+  tip: 'default',
+  check: 'default',
+} as const
 
 const icons = {
-  note: (props: { className?: string }) => <Icon icon="InfoCircle" {...props} />,
-  warning: (props: { className?: string }) => <Icon icon="AlertTriangle" {...props} />,
-  info: (props: { className?: string }) => <Icon icon="InfoCircle" {...props} />,
-  tip: (props: { className?: string }) => <Icon icon="Lightbulb" {...props} />,
-  check: (props: { className?: string }) => <Icon icon="CheckCircle" {...props} />,
+  note: 'InfoCircle',
+  warning: 'AlertTriangle',
+  info: 'InfoCircle',
+  tip: 'Lightbulb',
+  check: 'CheckCircle',
+} as const
+
+const typeColors = {
+  note: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200',
+  warning: 'border-amber-500/30 bg-amber-500/10 text-amber-900 dark:text-amber-200 *:data-[slot=alert-description]:text-inherit dark:data-[slot=alert-description]:text-inherit',
+  info: 'border-blue-500/30 bg-blue-500/10 text-blue-900 dark:text-blue-200',
+  tip: 'border-green-500/30 bg-green-500/10 text-green-900 dark:text-green-200',
+  check: 'border-purple-500/30 bg-purple-500/10 text-purple-900 dark:text-purple-200',
 }
 
 export function Callout({
@@ -44,18 +32,14 @@ export function Callout({
 }: {
   title: string
   children: React.ReactNode
-  type?: keyof typeof styles
+  type?: keyof typeof icons
 }) {
-  const IconComponent = icons[type]
-
   return (
-    <div className={classNames(styles[type].container)}>
-      <IconComponent className="mt-1 h-4 w-4 flex-none" />
-      <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
-        <div className={styles[type].title}>{title}</div>
-        <div className={styles[type].body}>{children}</div>
-      </div>
-    </div>
+    <Alert variant={typeToVariant[type]} className={`my-6 ${typeColors[type]}`}>
+      <Icon icon={icons[type]} className="h-4 w-4" />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
   )
 }
 

package/src/mdx/card.tsx

@@ -1,4 +1,11 @@
 import classNames from "classnames";
+import {
+  Card as UXCard,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent
+} from '@clidey/ux'
 import { Icon } from "./icon";
 import type { ComponentChildren } from "preact";
 
@@ -29,20 +36,19 @@ export function Card({
   children?: ComponentChildren
 }) {
   return (
-    <div className="group relative rounded-xl border border-slate-200 dark:border-slate-700">
-      <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-sky-50)),var(--quick-links-hover-bg,var(--color-sky-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-sky-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]" />
-      <div className="relative overflow-hidden rounded-xl p-6 flex gap-2 items-center">
-        <Icon icon={icon} className="h-8 w-8" />
-        <h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
-          <a href={href}>
-            <span className="absolute -inset-px rounded-xl" />
-            {title}
-          </a>
-        </h2>
-        <div className="text-sm text-slate-700 dark:text-slate-400 leading-tight [&>p]:mb-0">
-          {description ?? children}
+    <UXCard className="group relative">
+      <a href={href} className="absolute inset-0 z-10" aria-label={title} />
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <Icon icon={icon} className="h-8 w-8" />
+          <CardTitle className="text-base">{title}</CardTitle>
         </div>
-      </div>
-    </div>
+      </CardHeader>
+      <CardContent>
+        <CardDescription className="text-sm leading-tight">
+          {description ?? children}
+        </CardDescription>
+      </CardContent>
+    </UXCard>
   )
 }

package/src/mdx/code.tsx

@@ -10,6 +10,8 @@ import {
 } from 'react'
 import { Tag } from './tag'
 import { toTitleCase } from '../utils/functions'
+import { Button, Card } from '@clidey/ux'
+import { CheckIcon } from 'lucide-react'
 
 export const supportedLanguages = {
   'python': 'Python',
@@ -73,10 +75,9 @@ function CopyButton({ code }: { code: string }) {
   }, [copied])
 
   return (
-    <button
-      type="button"
+    <Button
       className={classNames(
-        'group/button absolute top-2 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100',
+        'group/button absolute top-1 right-2 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100',
         {
           'bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset': copied,
           'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5': !copied,
@@ -95,8 +96,7 @@ function CopyButton({ code }: { code: string }) {
           copied && '-translate-y-1.5 opacity-0',
         )}
       >
-        <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
-        Copy
+        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
       </span>
       <span
         aria-hidden={!copied}
@@ -105,9 +105,9 @@ function CopyButton({ code }: { code: string }) {
           !copied && 'translate-y-1.5 opacity-0',
         )}
       >
-        Copied!
+        <CheckIcon className="h-4 w-4" />
       </span>
-    </button>
+    </Button>
   )
 }
 
@@ -158,7 +158,7 @@ function CodePanel({
     <div className="group dark:bg-white/2.5">
       <CodePanelHeader tag={tag} label={label} />
       <div className="relative">
-        <pre className="overflow-x-auto p-4 text-xs text-white">{children}</pre>
+        <pre className="overflow-x-auto p-4 text-xs">{children}</pre>
         <CopyButton code={code ?? ''} />
       </div>
     </div>
@@ -179,9 +179,9 @@ function CodeGroupHeader({
   if (!title && !hasTabs) return null
 
   return (
-    <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 bg-black/5 px-4 dark:border-zinc-800 dark:bg-transparent">
+    <div className="flex flex-wrap items-start gap-x-4 px-4 pb-2">
       {title && (
-        <p className="mr-auto pt-3 text-xs font-semibold text-white">
+        <p className="mr-auto pt-3 text-xs font-semibold">
           {title}
         </p>
       )}
@@ -197,7 +197,7 @@ function CodeGroupHeader({
               <Tab
                 key={index}
                 className={classNames(
-                  'border-b py-3 transition data-selected:not-data-focus:outline-hidden',
+                  'pt-2 transition data-selected:not-data-focus:outline-hidden',
                   index === selectedIndex
                     ? 'border-emerald-500 text-emerald-400'
                     : 'border-transparent text-zinc-400 hover:text-zinc-300',
@@ -247,7 +247,6 @@ export function CodeGroup({
 
   const hasTabs = childrenArray.length > 1
 
-  const containerClassName = 'docucod-mdx-code-group my-6 overflow-hidden rounded-2xl shadow-md dark:ring-1 dark:ring-white/10'
   const header = (
     <CodeGroupHeader title={title} selectedIndex={selectedIndex}>
       {children}
@@ -258,24 +257,25 @@ export function CodeGroup({
   return (
     <CodeGroupContext.Provider value={true}>
       {hasTabs ? (
-        <TabGroup
-          as="div"
-          selectedIndex={selectedIndex}
-          onChange={setSelectedIndex}
-          className={containerClassName}
-        >
-          <div className="not-prose">
-            {header}
-            {panels}
-          </div>
-        </TabGroup>
+        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
+          <TabGroup
+            as="div"
+            selectedIndex={selectedIndex}
+            onChange={setSelectedIndex}
+          >
+            <div className="not-prose">
+              {header}
+              {panels}
+            </div>
+          </TabGroup>
+        </Card>
       ) : (
-        <div className={containerClassName}>
+        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
           <div className="not-prose">
             {header}
             {panels}
           </div>
-        </div>
+        </Card>
       )}
     </CodeGroupContext.Provider>
   )
@@ -285,5 +285,5 @@ export function Code({
   children,
   ...props
 }: React.ComponentPropsWithoutRef<'code'>) {
-  return <code className={classNames('docucod-mdx-code rounded-md py-1 text-sm px-2', props.className)} {...props}>{children}</code>
+  return <code className={classNames('dory-mdx-code rounded-md py-1 text-sm px-2', props.className)} {...props}>{children}</code>
 }

package/src/mdx/expandable.tsx

@@ -1,6 +1,5 @@
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
-import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
-import { Icon } from './icon'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@clidey/ux";
+import { Icon } from './icon';
 
 export function Expandable({
   title,
@@ -12,29 +11,26 @@ export function Expandable({
   icon?: React.ComponentProps<typeof Icon>['icon']
 }) {
   return (
-    <Disclosure as="div" className="my-6 rounded-xl border border-slate-200 dark:border-slate-700">
-      {({ open }) => (
-        <>
-          <DisclosureButton className="group flex w-full items-start justify-between text-left text-slate-900 dark:text-white p-6">
-            <div className="flex items-center gap-2">
-              {icon && <Icon icon={icon} className="h-8 w-8" />}
-              <span className="text-base font-display text-slate-900 dark:text-white">{title}</span>
-            </div>
-            <span className="ml-6 flex h-7 items-center">
-              {open ? (
-                <MinusIcon className="h-6 w-6 text-slate-700 dark:text-slate-400" />
-              ) : (
-                <PlusIcon className="h-6 w-6 text-slate-700 dark:text-slate-400" />
-              )}
-            </span>
-          </DisclosureButton>
-          <DisclosurePanel as="dd" className="px-6 pb-6">
+    <Accordion
+      type="single"
+      collapsible
+      className="my-6 rounded-xl border border-slate-200 dark:border-slate-700"
+    >
+      <AccordionItem value="expandable">
+        <AccordionTrigger className="group flex w-full items-start justify-between text-left text-slate-900 dark:text-white p-6">
+          <div className="flex items-center gap-2">
+            {icon && <Icon icon={icon} className="h-8 w-8" />}
+            <span className="text-base font-display text-slate-900 dark:text-white">{title}</span>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent asChild>
+          <dd className="px-6 pb-6">
             <div className="text-sm text-slate-700 dark:text-slate-400 leading-tight [&>p]:mb-0">
               {children}
             </div>
-          </DisclosurePanel>
-        </>
-      )}
-    </Disclosure>
-  )
+          </dd>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
 }

package/src/mdx/fence.tsx

@@ -3,7 +3,7 @@ import { Highlight, themes } from 'prism-react-renderer'
 import { Code, CodeGroup, CodeGroupContext, supportedLanguages } from './code'
 import { MermaidRenderer } from './mermaid'
 import { Loading } from '../components/loading'
-import { useDarkMode } from '../utils/hooks'
+import { useTheme } from '@clidey/ux'
 import classNames from 'classnames'
 
 
@@ -14,7 +14,7 @@ export function Fence({
   children: string
   language: string
 }) {
-  const { isDark } = useDarkMode();
+  const isDark = useTheme().theme === 'dark';
 
   if (language === 'mermaid') {
     return (

package/src/mdx/list.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'preact/jsx-runtime';
 
-export const UnorderedList = (props: JSX.IntrinsicElements['ul']) => <ul className="list-disc list-inside" {...props} />;
+export const UnorderedList = (props: JSX.IntrinsicElements['ul']) => <ul className="list-disc list-inside my-2" {...props} />;
 
-export const OrderedList = (props: JSX.IntrinsicElements['ol']) => <ol className="list-decimal list-inside" {...props} />;
+export const OrderedList = (props: JSX.IntrinsicElements['ol']) => <ol className="list-decimal list-inside my-2" {...props} />;
 
 export const ListItem = (props: JSX.IntrinsicElements['li']) => <li className="ml-4 mt-2" {...props} />;

package/src/mdx/open-api.tsx

@@ -4,7 +4,7 @@ import { APIPlayground, PlayButton, type Server } from "./api-playground"
 import { Fence } from "./fence"
 import { Tag } from "./tag"
 import { Col, Row } from "./text"
-import { motion } from "motion/react"
+import { Sheet, SheetContent, SheetHeader, SheetTitle, Button } from "@clidey/ux"
 
 export function Properties({ children }: { children: React.ReactNode }) {
   return (
@@ -33,12 +33,16 @@ export function Property({
   return (
     <div className="m-0 px-0 first:pt-0 last:pb-0">
       <div className="my-4 flex flex-wrap items-center gap-x-3 gap-2">
-        <Tag className="px-4 py-1">{name}</Tag>
-        <p className="font-mono text-xs text-zinc-400 dark:text-zinc-500">
-          {type}
-        </p>
-        {required && <span className="text-rose-400 ml-1 text-xs">Required</span>}
-        <p className="w-full flex-none [&>:first-child]:mt-0 [&>:last-child]:mb-0 text-sm">
+        <div className="flex gap-2 items-center grow">
+          <Tag className="px-4 py-1">{name}</Tag>
+          <p className="font-mono text-xs text-zinc-400 dark:text-zinc-500">
+            {type}
+          </p>
+          <div className="flex grow justify-end ">
+            {required && <span className="text-rose-400 ml-1 text-xs">Required</span>}
+          </div>
+        </div>
+        <p className="w-full flex-none [&>:first-child]:mt-0 [&>:last-child]:mb-0 text-xs text-muted-foreground">
           {children}
         </p>
       </div>
@@ -170,36 +174,18 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
 
   return (
     <div className="max-w-none w-full">
-      {
-        showPlayground &&
-        <motion.div
-          initial={{ x: "100%" }}
-          animate={{ x: 0 }}
-          exit={{ x: "100%" }}
-          transition={{ type: "spring", damping: 20 }}
-          className="fixed inset-y-0 right-0 w-full max-w-3xl bg-white dark:bg-[#1e1e1e] shadow-xl z-50 overflow-y-auto border-l border-zinc-200 dark:border-zinc-800"
-        >
-          <div className="p-6">
-            <div className="flex justify-between items-center mb-6">
-              <h2 className="text-xl font-semibold">API Playground</h2>
-              <button
-                onClick={() => setShowPlayground(false)}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-              >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-            <APIPlayground
-              method={selectedMethod}
-              url={selectedPath}
-              servers={openAPIJson.servers}
-            />
-          </div>
-        </motion.div>
-      }
-
+      <Sheet open={showPlayground} onOpenChange={setShowPlayground} modal={true}>
+        <SheetContent side="bottom" className="h-[90vh] w-full overflow-y-auto p-8">
+          <SheetHeader className="p-0">
+            <SheetTitle>API Playground</SheetTitle>
+          </SheetHeader>
+          <APIPlayground
+            method={selectedMethod}
+            url={selectedPath}
+            servers={openAPIJson.servers}
+          />
+        </SheetContent>
+      </Sheet>
       {Object.entries(paths).map(([path, methods]) => {
         if (path !== selectedPath) {
           return null;
@@ -216,7 +202,7 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
             }
 
             return (
-              <Row key={`${method}-${path}`} cols={2}>
+              <Row key={`${method}-${path}`} cols={2} className="gap-0">
                 <Col>
                   <h2 className="flex items-center mt-4">
                     <Tag variant="medium" className="mr-2 py-1 px-4 rounded-lg">{methodUpper}</Tag>
@@ -227,7 +213,7 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
 
                   {parameters && parameters.length > 0 && (
                     <div className="mt-4">
-                      <h3>Parameters</h3>
+                      <h3 className="font-bold">Parameters</h3>
                       <Properties>
                         {parameters.map((param) => (
                           <ParamField 
@@ -245,7 +231,7 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
                   )}
                   {requestBody && (
                     <div className="mt-4">
-                      <h3>Request Body</h3>
+                      <h3 className="font-bold">Request Body</h3>
                       <p>{requestBody.description}</p>
                       {requestBody.content?.['application/json']?.schema && (
                         (() => {
@@ -271,9 +257,9 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
                   )}
                   {components?.schemas && (
                     <div>
-                      <h3>Schemas</h3>
+                      <h3 className="font-bold">Schemas</h3>
                       {Object.entries(components.schemas).filter(([, schema]) => schema.properties).map(([name, schema]) => (
-                        <div key={name} className="mt-4">
+                        <div key={name} className="mt-8">
                           <h4>{name}</h4>
                           <Properties>
                             {Object.entries(schema.properties || {}).map(([propName, prop]) => (
@@ -293,12 +279,12 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
                   )}
                 </Col>
                 <Col sticky>
-                  <button
+                  <Button
                     onClick={handleShowPlayground}
-                    className='ml-auto mt-3 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition bg-sky-600 text-white hover:bg-sky-700'>
+                    className='ml-auto mt-3 flex items-center gap-2'>
                       Try
                     <PlayButton className="h-4 w-4" />
-                  </button>
+                  </Button>
                   <APIGroup title="Request" tag={methodUpper} label={path}>
                     {Object.entries(responses).map(([code, response]) => (
                       <div key={code} title={code}>

package/src/mdx/table.tsx

@@ -1,15 +1,20 @@
 import type { JSX } from 'preact/jsx-runtime';
+import {
+  Table as UXTable,
+  TableHead,
+  TableCell
+} from '@clidey/ux'
 
 export const Table = (props: JSX.IntrinsicElements['table']) => (
   <div className="overflow-x-auto rounded-lg my-8">
-    <table className="border-collapse w-full border border-gray-300/10 rounded-lg" {...props} />
+    <UXTable {...props} />
   </div>
 );
 
 export const Th = (props: JSX.IntrinsicElements['th']) => (
-  <th className="border border-gray-300/10 p-2 bg-gray-100/25 text-left first:rounded-tl-lg last:rounded-tr-lg" {...props} />
+  <TableHead {...props} />
 );
 
 export const Td = (props: JSX.IntrinsicElements['td']) => (
-  <td className="border border-gray-300/10 p-2 text-left last-row:first:rounded-bl-lg last-row:last:rounded-br-lg" {...props} />
+  <TableCell {...props} />
 );

package/src/mdx/tag.tsx

@@ -1,66 +1,53 @@
+import { Badge } from '@clidey/ux'
 import classNames from 'classnames'
 
-const variantStyles = {
-  small: '',
-  medium: 'rounded-lg px-1.5 ring-1 ring-inset',
-}
+const valueColorMap = {
+  GET: 'default',
+  POST: 'secondary',
+  PUT: 'outline',
+  DELETE: 'destructive',
+} as const
 
-const colorStyles = {
-  emerald: {
-    small: 'text-emerald-500 dark:text-emerald-400',
-    medium:
-      'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400',
-  },
-  sky: {
-    small: 'text-sky-500',
-    medium:
-      'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400',
-  },
-  amber: {
-    small: 'text-amber-500',
-    medium:
-      'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400',
-  },
-  rose: {
-    small: 'text-red-500 dark:text-rose-500',
-    medium:
-      'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400',
-  },
-  zinc: {
-    small: 'text-zinc-400 dark:text-zinc-500',
-    medium:
-      'ring-zinc-200 bg-zinc-50 text-zinc-500 dark:ring-zinc-500/20 dark:bg-zinc-400/10 dark:text-zinc-400',
-  },
+const customColorClasses = {
+  emerald: 'bg-emerald-400/10 text-emerald-500 dark:text-emerald-400 border-emerald-300 dark:border-emerald-400/30',
+  sky: 'bg-sky-400/10 text-sky-500 dark:text-sky-400 border-sky-300 dark:border-sky-400/30',
+  amber: 'bg-amber-400/10 text-amber-500 dark:text-amber-400 border-amber-300 dark:border-amber-400/30',
+  rose: 'bg-rose-50 text-red-500 dark:bg-rose-400/10 dark:text-rose-400 border-rose-200 dark:border-rose-500/20',
+  zinc: 'bg-zinc-50 text-zinc-500 dark:bg-zinc-400/10 dark:text-zinc-400 border-zinc-200 dark:border-zinc-500/20',
 }
 
-const valueColorMap = {
+const methodColors: Record<string, keyof typeof customColorClasses> = {
   GET: 'emerald',
   POST: 'sky',
   PUT: 'amber',
   DELETE: 'rose',
-} as Record<string, keyof typeof colorStyles>
+}
 
 export function Tag({
   children,
   variant = 'medium',
-  color = valueColorMap[children] ?? 'zinc',
+  color,
   className,
 }: {
-  children: keyof typeof valueColorMap & (string)
-  variant?: keyof typeof variantStyles
-  color?: keyof typeof colorStyles
+  children: string
+  variant?: 'small' | 'medium'
+  color?: keyof typeof customColorClasses
   className?: string
 }) {
+  const colorKey = color || methodColors[children] || 'zinc'
+  const badgeVariant = valueColorMap[children as keyof typeof valueColorMap] || 'outline'
+
   return (
-    <span
+    <Badge
+      variant={badgeVariant}
       className={classNames(
         'font-mono text-[0.625rem]/6 font-semibold',
-        variantStyles[variant],
-        colorStyles[color][variant],
+        customColorClasses[colorKey],
+        variant === 'small' && 'px-1 py-0',
         className,
       )}
     >
       {children}
-    </span>
+    </Badge>
   )
 }

package/src/mdx/text.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@clidey/ux"
 import classNames from "classnames"
 import { useState } from "preact/hooks"
 
@@ -30,9 +31,9 @@ export const p = function P(props: preact.JSX.HTMLAttributes<HTMLParagraphElemen
   return <p className="mb-2 inline-block" {...props} />
 }
 
-export function Row({ children, cols = 1 }: { children: preact.ComponentChildren, cols?: number }) {
+export function Row({ children, cols = 1, className }: { children: preact.ComponentChildren, cols?: number, className?: string }) {
   return (
-    <div className={`grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none`} style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
+    <div className={cn(`py-6 grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none`, className)} style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
       {children}
     </div>
   )