raystack · rsbh · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git a/bun.lock b/bun.lock
diff --git a/packages/chronicle/package.json b/packages/chronicle/package.json
@@ -42,7 +42,7 @@
     "@opentelemetry/resources": "^2.6.1",
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
-    "@raystack/apsara": "0.55.1",
+    "@raystack/apsara": "1.0.0-rc.3",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
     "chalk": "^5.6.2",
@@ -69,6 +69,7 @@
     "remark-parse": "^11.0.0",
     "satori": "^0.25.0",
     "slugify": "^1.6.6",
+    "std-env": "^4.1.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
     "vite": "8.0.3",

diff --git a/packages/chronicle/src/components/api/field-row.tsx b/packages/chronicle/src/components/api/field-row.tsx
@@ -30,7 +30,7 @@ export function FieldRow({ field, location, editable, value, onChange }: FieldRo
     const objValue = (value ?? {}) as Record<string, unknown>
     return (
       <div className={styles.row}>
-        <Accordion collapsible className={styles.accordion}>
+        <Accordion className={styles.accordion}>
           <Accordion.Item value={field.name}>
             <Accordion.Trigger className={styles.trigger}>{label}</Accordion.Trigger>
             <Accordion.Content>

diff --git a/packages/chronicle/src/components/api/field-section.tsx b/packages/chronicle/src/components/api/field-section.tsx
@@ -57,8 +57,8 @@ export function FieldSection({
         <div className={styles.separator} />
         <Tabs defaultValue="fields" className={styles.tabs}>
           <Tabs.List>
-            <Tabs.Trigger value="fields">Fields</Tabs.Trigger>
-            <Tabs.Trigger value="json">JSON</Tabs.Trigger>
+            <Tabs.Tab value="fields">Fields</Tabs.Tab>
+            <Tabs.Tab value="json">JSON</Tabs.Tab>
           </Tabs.List>
           <Tabs.Content value="fields">
             {fieldsContent}

diff --git a/packages/chronicle/src/components/mdx/index.tsx b/packages/chronicle/src/components/mdx/index.tsx
@@ -20,7 +20,7 @@ function MdxTabs(props: ComponentProps<typeof Tabs>) {
   return <ClientOnly><Tabs {...props} /></ClientOnly>
 }
 MdxTabs.List = Tabs.List
-MdxTabs.Trigger = Tabs.Trigger
+MdxTabs.Tab = Tabs.Tab
 MdxTabs.Content = Tabs.Content
 
 export const mdxComponents: MDXComponents = {

diff --git a/packages/chronicle/src/pages/NotFound.tsx b/packages/chronicle/src/pages/NotFound.tsx
@@ -1,9 +1,11 @@
+import { DocumentTextIcon } from '@heroicons/react/24/outline';
 import { EmptyState } from '@raystack/apsara';
 import styles from './NotFound.module.css';
 
 export function NotFound() {
   return (
     <EmptyState
+      icon={<DocumentTextIcon width={32} height={32} />}
       heading="404"
       subHeading="Page not found"
       classNames={{ container: styles.emptyState }}

diff --git a/packages/chronicle/src/server/vite-config.ts b/packages/chronicle/src/server/vite-config.ts
@@ -86,8 +86,8 @@ export async function createViteConfig(
     resolve: {
       alias: {
         '@': path.resolve(packageRoot, 'src'),
+        'tslib': 'tslib/tslib.es6.js',
       },
-      conditions: ['module-sync', 'import', 'node'],
       dedupe: [
         'react',
         'react-dom',

diff --git a/packages/chronicle/src/themes/default/ContentDirButtons.tsx b/packages/chronicle/src/themes/default/ContentDirButtons.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { Button, DropdownMenu, Flex } from '@raystack/apsara';
+import { Button, Menu, Flex } from '@raystack/apsara';
 import { Link as RouterLink, useLocation, useNavigate } from 'react-router';
 import { getLandingEntries } from '@/lib/config';
 import { getActiveContentDir, splitContentButtons } from '@/lib/navigation';
@@ -36,28 +36,30 @@ export function ContentDirButtons() {
         </RouterLink>
       ))}
       {overflow.length > 0 ? (
-        <DropdownMenu>
-          <DropdownMenu.Trigger asChild>
-            <Button
-              size='small'
-              variant='outline'
-              color='neutral'
-              trailingIcon={<ChevronDownIcon width={14} height={14} />}
-            >
-              More
-            </Button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content>
+        <Menu>
+          <Menu.Trigger
+            render={
+              <Button
+                size='small'
+                variant='outline'
+                color='neutral'
+                trailingIcon={<ChevronDownIcon width={14} height={14} />}
+              />
+            }
+          >
+            More
+          </Menu.Trigger>
+          <Menu.Content>
             {overflow.map(entry => (
-              <DropdownMenu.Item
+              <Menu.Item
                 key={entry.href}
                 onClick={() => navigate(entry.href)}
               >
                 {entry.label}
-              </DropdownMenu.Item>
+              </Menu.Item>
             ))}
-          </DropdownMenu.Content>
-        </DropdownMenu>
+          </Menu.Content>
+        </Menu>
       ) : null}
     </Flex>
   );

diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
@@ -162,7 +162,7 @@ function SidebarNode({
       href={href}
       active={isActive}
       leadingIcon={icon ?? undefined}
-      as={link}
+      render={link}
     >
       {item.name}
     </Sidebar.Item>

diff --git a/packages/chronicle/src/themes/default/VersionSwitcher.tsx b/packages/chronicle/src/themes/default/VersionSwitcher.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { Badge, Button, DropdownMenu, Flex } from '@raystack/apsara';
+import { Badge, Button, Menu, Flex } from '@raystack/apsara';
 import { useNavigate } from 'react-router';
 import { getAllVersions } from '@/lib/config';
 import { getVersionHomeHref } from '@/lib/navigation';
@@ -17,27 +17,29 @@ export function VersionSwitcher() {
   );
 
   return (
-    <DropdownMenu>
-      <DropdownMenu.Trigger asChild>
-        <Button
-          size='small'
-          variant='outline'
-          color='neutral'
-          trailingIcon={<ChevronDownIcon width={14} height={14} />}
-        >
-          <Flex gap='small' align='center'>
-            {active?.label ?? 'Version'}
-            {active?.badge ? (
-              <Badge variant={active.badge.variant} size='micro'>
-                {active.badge.label}
-              </Badge>
-            ) : null}
-          </Flex>
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        <Flex gap='small' align='center'>
+          {active?.label ?? 'Version'}
+          {active?.badge ? (
+            <Badge variant={active.badge.variant} size='micro'>
+              {active.badge.label}
+            </Badge>
+          ) : null}
+        </Flex>
+      </Menu.Trigger>
+      <Menu.Content>
         {versions.map(v => (
-          <DropdownMenu.Item
+          <Menu.Item
             key={v.dir ?? '_latest'}
             onClick={() => navigate(getVersionHomeHref(config, v.dir))}
           >
@@ -49,9 +51,9 @@ export function VersionSwitcher() {
                 </Badge>
               ) : null}
             </Flex>
-          </DropdownMenu.Item>
+          </Menu.Item>
         ))}
-      </DropdownMenu.Content>
-    </DropdownMenu>
+      </Menu.Content>
+    </Menu>
   );
 }
diff --git a/packages/chronicle/src/themes/paper/ContentDirDropdown.tsx b/packages/chronicle/src/themes/paper/ContentDirDropdown.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { Button, DropdownMenu } from '@raystack/apsara';
+import { Button, Menu } from '@raystack/apsara';
 import { useLocation, useNavigate } from 'react-router';
 import { getLandingEntries } from '@/lib/config';
 import { getActiveContentDir } from '@/lib/navigation';
@@ -18,28 +18,30 @@ export function ContentDirDropdown() {
     entries.find(e => e.contentDir === activeDir) ?? entries[0];
 
   return (
-    <DropdownMenu>
-      <DropdownMenu.Trigger asChild>
-        <Button
-          size='small'
-          variant='outline'
-          color='neutral'
-          width='100%'
-          trailingIcon={<ChevronDownIcon width={14} height={14} />}
-        >
-          {activeEntry.label}
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            width='100%'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        {activeEntry.label}
+      </Menu.Trigger>
+      <Menu.Content>
         {entries.map(entry => (
-          <DropdownMenu.Item
+          <Menu.Item
             key={entry.href}
             onClick={() => navigate(entry.href)}
           >
             {entry.label}
-          </DropdownMenu.Item>
+          </Menu.Item>
         ))}
-      </DropdownMenu.Content>
-    </DropdownMenu>
+      </Menu.Content>
+    </Menu>
   );
 }
diff --git a/packages/chronicle/src/themes/paper/VersionSwitcher.tsx b/packages/chronicle/src/themes/paper/VersionSwitcher.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { Badge, Button, DropdownMenu, Flex } from '@raystack/apsara';
+import { Badge, Button, Menu, Flex } from '@raystack/apsara';
 import { useNavigate } from 'react-router';
 import { getAllVersions } from '@/lib/config';
 import { getVersionHomeHref } from '@/lib/navigation';
@@ -17,28 +17,30 @@ export function VersionSwitcher() {
   );
 
   return (
-    <DropdownMenu>
-      <DropdownMenu.Trigger asChild>
-        <Button
-          size='small'
-          variant='outline'
-          color='neutral'
-          width='100%'
-          trailingIcon={<ChevronDownIcon width={14} height={14} />}
-        >
-          <Flex gap='small' align='center' justify='start'>
-            {active?.label ?? 'Version'}
-            {active?.badge ? (
-              <Badge variant={active.badge.variant} size='micro'>
-                {active.badge.label}
-              </Badge>
-            ) : null}
-          </Flex>
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            width='100%'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        <Flex gap='small' align='center' justify='start'>
+          {active?.label ?? 'Version'}
+          {active?.badge ? (
+            <Badge variant={active.badge.variant} size='micro'>
+              {active.badge.label}
+            </Badge>
+          ) : null}
+        </Flex>
+      </Menu.Trigger>
+      <Menu.Content>
         {versions.map(v => (
-          <DropdownMenu.Item
+          <Menu.Item
             key={v.dir ?? '_latest'}
             onClick={() => navigate(getVersionHomeHref(config, v.dir))}
           >
@@ -50,9 +52,9 @@ export function VersionSwitcher() {
                 </Badge>
               ) : null}
             </Flex>
-          </DropdownMenu.Item>
+          </Menu.Item>
         ))}
-      </DropdownMenu.Content>
-    </DropdownMenu>
+      </Menu.Content>
+    </Menu>
   );
 }