fix: docs ui improvements and component improvements

apps/www/package.json

@@ -34,7 +34,7 @@
     "remark-gfm": "^4.0.1",
     "remark-mdx": "^3.1.0",
     "unist-util-visit": "^5.0.0",
-    "zod": "^3.24.2"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@raystack/tools-config": "workspace:*",

apps/www/source.config.ts

@@ -1,6 +1,4 @@
 import * as path from 'node:path';
-import { fileURLToPath } from 'url';
-import { SourceSchema, TagSchema } from '@/lib/types';
 import {
   rehypeToc,
   remarkGfm,
@@ -16,10 +14,12 @@ import {
   metaSchema
 } from 'fumadocs-mdx/config';
 import {
-  GeneratorOptions,
   createGenerator,
+  GeneratorOptions,
   remarkAutoTypeTable
 } from 'fumadocs-typescript';
+import { fileURLToPath } from 'url';
+import { SourceSchema, TagSchema } from '@/lib/types';
 
 const relative = (s: string): string =>
   path.resolve(fileURLToPath(new URL(s, import.meta.url)));

apps/www/src/app/docs/[[...slug]]/page.module.css

@@ -2,6 +2,8 @@
   max-width: 806px;
   padding: var(--rs-space-15) var(--rs-space-7);
   width: 100%;
+  gap: var(--rs-space-12);
+  min-height: calc(100vh - 50px);
 }
 
 :global(.prose) {

apps/www/src/app/docs/[[...slug]]/page.tsx

@@ -1,11 +1,12 @@
-import DocsNavbar from '@/components/docs/navbar';
-import { mdxComponents } from '@/components/mdx';
-import TableOfContents from '@/components/toc/toc';
-import { docs } from '@/lib/source';
 import { Flex, Headline, Text } from '@raystack/apsara';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import DocsFooter from '@/components/docs/footer';
+import DocsNavbar from '@/components/docs/navbar';
+import { mdxComponents } from '@/components/mdx';
+import TableOfContents from '@/components/toc/toc';
+import { docs } from '@/lib/source';
 import styles from './page.module.css';
 
 export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
@@ -15,8 +16,6 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
 
   const MDX = page.data.body;
 
-  console.log('page', page);
-
   return (
     <Flex
       direction='column'
@@ -33,22 +32,25 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
       />
       <Flex width='full' align='start'>
         <Flex direction='column' align='center' justify='center' width='full'>
-          <Flex direction='column' gap={6} className={styles.content}>
-            <Flex direction='column' gap={3}>
-              <Headline size='t4'>{page.data.title}</Headline>
-              <Text size='regular' variant='secondary'>
-                {page.data.description}
-              </Text>
-            </Flex>
-            <Flex direction='column' className='prose'>
-              <MDX
-                components={{
-                  ...mdxComponents,
-                  // this allows you to link to other pages with relative file paths
-                  a: createRelativeLink(docs, page)
-                }}
-              />
+          <Flex direction='column' className={styles.content} justify='between'>
+            <Flex direction='column' gap={6}>
+              <Flex direction='column' gap={3}>
+                <Headline size='t4'>{page.data.title}</Headline>
+                <Text size='regular' variant='secondary'>
+                  {page.data.description}
+                </Text>
+              </Flex>
+              <Flex direction='column' className='prose'>
+                <MDX
+                  components={{
+                    ...mdxComponents,
+                    // this allows you to link to other pages with relative file paths
+                    a: createRelativeLink(docs, page)
+                  }}
+                />
+              </Flex>
             </Flex>
+            <DocsFooter url={page.url} />
           </Flex>
         </Flex>
         <aside
@@ -58,6 +60,7 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
             position: 'sticky',
             top: '50px',
             padding: '40px 0',
+            paddingRight: 'var(--rs-space-7)',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',

apps/www/src/app/docs/layout.tsx

@@ -1,7 +1,7 @@
-import DocsSidebar from '@/components/docs/sidebar';
-import { docs } from '@/lib/source';
 import { Flex } from '@raystack/apsara';
 import type { ReactNode } from 'react';
+import DocsSidebar from '@/components/docs/sidebar';
+import { docs } from '@/lib/source';
 import styles from './layout.module.css';
 
 export default function Layout({ children }: { children: ReactNode }) {

apps/www/src/components/datatable-demo.tsx

@@ -46,24 +46,29 @@ export type Payment = {
 };
 
 export const columns: DataTableColumnDef<Payment, unknown>[] = [
-  {
-    accessorKey: 'select',
-    header: '',
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label='Select row'
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false
-  },
   {
     accessorKey: 'status',
     header: 'Status',
+    styles: {
+      cell: {
+        paddingLeft: 'var(--rs-space-7)'
+      },
+      header: {
+        paddingLeft: 'var(--rs-space-7)'
+      }
+    },
     cell: ({ row }) => (
-      <div className='capitalize'>{row.getValue('status')}</div>
+      <Flex gap={3} align='center'>
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={value => row.toggleSelected(!!value)}
+          aria-label='Select row'
+          style={{
+            display: 'block'
+          }}
+        />
+        <div className='capitalize'>{row.getValue('status')}</div>
+      </Flex>
     ),
     filterOptions: [
       {

apps/www/src/components/demo/demo-controls.tsx

@@ -1,4 +1,3 @@
-import { camelCaseToWords } from '@/lib/utils';
 import {
   InfoCircledIcon,
   Pencil2Icon,
@@ -15,6 +14,7 @@ import {
   Text
 } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
+import { camelCaseToWords } from '@/lib/utils';
 import styles from './styles.module.css';
 import {
   ComponentPropsType,
@@ -48,6 +48,7 @@ export default function DemoControls({
         const propValue = componentProps?.[prop] ?? '';
         const isCheckbox = control.type === 'checkbox';
         const isIcon = control.type === 'icon';
+        const isIconOptional = control.isIconOptional ?? true;
 
         // For checkbox and icon types, render in a special container
         if (isCheckbox || isIcon) {
@@ -61,18 +62,20 @@ export default function DemoControls({
                 <Text variant='secondary' size='small' weight='medium'>
                   {propLabel}
                 </Text>
-                <Switch
-                  size='small'
-                  checked={!!componentProps[prop]}
-                  onCheckedChange={checked => {
-                    if (isCheckbox) onPropChange(prop, checked);
-                    else
-                      onPropChange(
-                        prop,
-                        checked ? String(ICONS_MAP.plus.value) : ''
-                      );
-                  }}
-                />
+                {isIconOptional && (
+                  <Switch
+                    size='small'
+                    checked={!!componentProps[prop]}
+                    onCheckedChange={checked => {
+                      if (isCheckbox) onPropChange(prop, checked);
+                      else
+                        onPropChange(
+                          prop,
+                          checked ? String(ICONS_MAP.plus.value) : ''
+                        );
+                    }}
+                  />
+                )}
               </Flex>
               {isIcon && (
                 <Flex gap={2} align='center' className={styles.iconContainer}>
@@ -90,6 +93,12 @@ export default function DemoControls({
                         e.stopPropagation();
                       }}
                       aria-label={`Select ${icon.value || 'none'} icon`}
+                      style={{
+                        color:
+                          propValue === icon.value
+                            ? 'var(--rs-color-background-accent-emphasis)'
+                            : undefined
+                      }}
                     >
                       {icon.icon}
                     </IconButton>

apps/www/src/components/demo/demo.tsx

@@ -8,6 +8,7 @@ import {
   UploadIcon
 } from '@radix-ui/react-icons';
 import * as Apsara from '@raystack/apsara';
+import dayjs from 'dayjs';
 import { Home, Info, Laugh, X } from 'lucide-react';
 import NextLink from 'next/link';
 import { Suspense } from 'react';
@@ -35,7 +36,8 @@ export default function Demo(props: DemoProps) {
       TransformIcon,
       Pencil2Icon,
       InfoCircledIcon,
-      UploadIcon
+      UploadIcon,
+      dayjs
     }
   } = props;
 

apps/www/src/components/demo/styles.module.css

@@ -11,8 +11,6 @@
   min-height: 368px;
   display: flex;
   width: 100%;
-  /* border-bottom: 0.5px solid var(--rs-color-border-base-primary); */
-  max-height: 340px;
 }
 
 .preview {
@@ -48,6 +46,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   flex-shrink: 0;
+  max-height: 400px;
 }
 .noShadow {
   box-shadow: none;
@@ -117,7 +116,9 @@
   padding: var(--rs-space-3) var(--rs-space-4);
   cursor: pointer;
   color: var(--rs-color-foreground-base-secondary);
-  transition: color 0.2s ease-in-out, border-bottom 0.2s ease-in-out;
+  transition:
+    color 0.2s ease-in-out,
+    border-bottom 0.2s ease-in-out;
   border-bottom: 0.5px solid transparent;
   font-size: var(--rs-font-size-small);
   letter-spacing: var(--rs-letter-spacing-small);

apps/www/src/components/demo/types.ts

@@ -31,6 +31,7 @@ export type ControlType = {
   initialValue?: string | boolean;
   min?: number;
   max?: number;
+  isIconOptional?: boolean;
 };
 
 export type ControlsType = Record<string, ControlType>;

apps/www/src/components/docs/footer.tsx

@@ -0,0 +1,44 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Link } from '@raystack/apsara';
+import { findNeighbour } from 'fumadocs-core/page-tree';
+import { docs } from '@/lib/source';
+
+type DocsFooterProps = {
+  url: string;
+};
+
+export default function DocsFooter({ url }: DocsFooterProps) {
+  const neighbours = findNeighbour(docs.pageTree, url);
+  return (
+    <Flex width='full' justify='between'>
+      {neighbours.previous ? (
+        <Link href={neighbours.previous.url}>
+          <Button
+            variant='outline'
+            color='neutral'
+            size='normal'
+            leadingIcon={<ArrowLeftIcon />}
+          >
+            {neighbours.previous.name}
+          </Button>
+        </Link>
+      ) : (
+        <span />
+      )}
+      {neighbours.next ? (
+        <Link href={neighbours.next.url}>
+          <Button
+            variant='outline'
+            color='neutral'
+            size='normal'
+            trailingIcon={<ArrowRightIcon />}
+          >
+            {neighbours.next.name}
+          </Button>
+        </Link>
+      ) : (
+        <span />
+      )}
+    </Flex>
+  );
+}

apps/www/src/components/docs/navbar.module.css

@@ -18,8 +18,12 @@
   top: 0;
   z-index: var(--rs-z-index-portal);
   height: 50px;
+  background: #fcfcfce6;
 }
 
+[data-theme="dark"] .navbar {
+  background: #111111e6;
+}
 .left {
   display: flex;
   align-items: center;