@k3-universe/react-kit 0.0.1

package/src/stories/kit/components/Login.stories.tsx

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Login } from '../../../kit/components/login/Login';
+import { FormBuilder, type FormBuilderSectionConfig } from '../../../kit/builder/form/components';
+import { z } from 'zod';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Login> = {
+  title: 'Kit/Components/Login',
+  component: Login,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Login>;
+
+const formSections: FormBuilderSectionConfig[] = [
+  {
+    variant: 'plain',
+    fields: [
+      {
+        name: 'email',
+        label: 'Email',
+        type: 'email',
+        placeholder: 'm@example.com',
+        required: true,
+        validation: z.string().email('Please enter a valid email'),
+      },
+      {
+        name: 'password',
+        label: 'Password',
+        type: 'password',
+        required: true,
+        validation: z.string().min(6, 'Password must be at least 6 characters'),
+      },
+    ],
+  },
+];
+
+const handleSubmit = async (data: Record<string, unknown>) => {
+  // Demo only
+  console.log('Login submit', data);
+};
+
+function GoogleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden>
+      <path fill="#EA4335" d="M12 10.2v3.9h5.5c-.2 1.3-1.7 3.9-5.5 3.9-3.3 0-6-2.7-6-6s2.7-6 6-6c1.9 0 3.2.8 3.9 1.5l2.7-2.6C16.9 3 14.7 2 12 2 6.9 2 2.7 6.2 2.7 11.3S6.9 20.7 12 20.7c6 0 9.9-4.2 9.9-10.1 0-.7-.1-1.2-.2-1.7H12z" />
+    </svg>
+  );
+}
+
+function MicrosoftIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden>
+      <path fill="#F25022" d="M11.5 11.5H2.5V2.5h9z" />
+      <path fill="#7FBA00" d="M21.5 11.5h-9V2.5h9z" />
+      <path fill="#00A4EF" d="M11.5 21.5H2.5v-9h9z" />
+      <path fill="#FFB900" d="M21.5 21.5h-9v-9h9z" />
+    </svg>
+  );
+}
+
+export const Basic: Story = {
+  name: 'Basic with FormBuilder',
+  render: () => (
+    <Login
+      appTitle="Acme Inc"
+      subtitle="Enter your email and password to sign in"
+      signupLabel="Don't have an account?"
+      signupLinkLabel="Create one"
+      signupHref="#signup"
+      rightImageSrc="https://images.unsplash.com/photo-1547658719-da2b51169166?q=80&w=2069&auto=format&fit=crop"
+    >
+      <FormBuilder
+        sections={formSections}
+        onSubmit={handleSubmit}
+        submitLabel="Login"
+        className=""
+        formClassName=""
+      />
+    </Login>
+  ),
+};
+
+export const WithSocial: Story = {
+  name: 'With social continue-with',
+  render: () => (
+    <Login
+      appTitle="Acme Inc"
+      subtitle="Welcome back"
+      signupLabel="New here?"
+      signupLinkLabel="Sign up"
+      signupHref="#signup"
+      rightImageSrc="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=2070&auto=format&fit=crop"
+      continueWith={
+        <>
+          <Button variant="outline" className="w-full justify-center gap-2">
+            <GoogleIcon />
+            Continue with Google
+          </Button>
+          <Button variant="outline" className="w-full justify-center gap-2">
+            <MicrosoftIcon />
+            Continue with Microsoft
+          </Button>
+        </>
+      }
+    >
+      <FormBuilder
+        sections={formSections}
+        onSubmit={handleSubmit}
+        submitLabel="Login"
+      />
+    </Login>
+  ),
+};
+
+export const WithForgotPassword: Story = {
+  name: 'With forgot password (default label)',
+  render: () => (
+    <Login
+      appTitle="Acme Inc"
+      subtitle="Use your credentials to sign in"
+      signupLabel="Don't have an account?"
+      signupLinkLabel="Create one"
+      signupHref="#signup"
+      forgotPasswordLabel="Forgot your password?"
+      forgotPasswordLinkLabel="Reset Here"
+      forgotPasswordHref="#forgot-password"
+      rightImageSrc="https://images.unsplash.com/photo-1547658719-da2b51169166?q=80&w=2069&auto=format&fit=crop"
+    >
+      <FormBuilder
+        sections={formSections}
+        onSubmit={handleSubmit}
+        submitLabel="Login"
+      />
+    </Login>
+  ),
+};
+
+export const WithForgotPasswordCustom: Story = {
+  name: 'With forgot password (custom label/link)',
+  render: () => (
+    <Login
+      appTitle="Acme Inc"
+      subtitle="Welcome back"
+      signupLabel="New here?"
+      signupLinkLabel="Join now"
+      signupHref="#signup"
+      forgotPasswordHref="/auth/reset-password"
+      forgotPasswordLabel="Your password is lost?"
+      forgotPasswordLinkLabel="Reset Here"
+      rightImageSrc="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=2070&auto=format&fit=crop"
+    >
+      <FormBuilder
+        sections={formSections}
+        onSubmit={handleSubmit}
+        submitLabel="Login"
+      />
+    </Login>
+  ),
+};

package/src/stories/kit/layouts/admin/AdminLayout.Basic.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { Home, ShoppingCart, Settings } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+function RegisterMenus() {
+  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    registerGroup({ id: 'main', label: 'Main' });
+    registerItem('main', { id: 'dashboard', title: 'Dashboard', url: '/', icon: Home });
+
+    registerGroup({ id: 'commerce', label: 'Commerce' });
+    registerItem('commerce', { id: 'orders', title: 'Orders', url: '/orders', icon: ShoppingCart, badge: 12 });
+
+    registerGroup({ id: 'settings', label: 'Settings' });
+    registerItem('settings', { id: 'general', title: 'General', url: '/settings', icon: Settings });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterMenus />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-2">Dashboard</h2>
+        <p className="text-muted-foreground">Welcome to the admin dashboard.</p>
+      </div>
+    ),
+  });
+
+  const ordersRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/orders',
+    component: () => (
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-2">Orders</h2>
+        <p className="text-muted-foreground">Manage your store orders here.</p>
+      </div>
+    ),
+  });
+
+  const settingsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/settings',
+    component: () => (
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-2">Settings</h2>
+        <p className="text-muted-foreground">Update your application settings.</p>
+      </div>
+    ),
+  });
+
+  const routeTree = rootRoute.addChildren([indexRoute, ordersRoute, settingsRoute]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+
+  return <RouterProvider router={router} />;
+}
+
+export const Basic: Story = {
+  name: 'Basic (non-collapsible by default)',
+  render: () => <App />,
+};

package/src/stories/kit/layouts/admin/AdminLayout.Collapsible.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { Home, ShoppingCart, Settings } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function RegisterMenus() {
+  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    registerGroup({ id: 'main', label: 'Main' });
+    registerItem('main', { id: 'dashboard', title: 'Dashboard', url: '/', icon: Home });
+    registerGroup({ id: 'commerce', label: 'Commerce' });
+    registerItem('commerce', { id: 'orders', title: 'Orders', url: '/orders', icon: ShoppingCart, badge: 12 });
+    registerGroup({ id: 'settings', label: 'Settings' });
+    registerItem('settings', { id: 'general', title: 'General', url: '/settings', icon: Settings });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterMenus />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+
+  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const routeTree = rootRoute.addChildren([indexRoute]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+  return <RouterProvider router={router} />;
+}
+
+export const Collapsible: Story = {
+  name: 'Collapsible sidebar',
+  render: () => <App sidebarCollapsible />,
+};

package/src/stories/kit/layouts/admin/AdminLayout.Complex.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { Home, ShoppingCart, Settings, Users, BarChart3, FileText, Shield, Bell, LifeBuoy } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function RegisterComplexMenus() {
+  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    // Overview
+    registerGroup({ id: 'overview', label: 'Overview' });
+    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
+    registerItem('overview', { id: 'reports', title: 'Reports', url: '/reports', icon: BarChart3, badge: 'New' });
+
+    // Management
+    registerGroup({ id: 'management', label: 'Management' });
+    registerItem('management', {
+      id: 'users',
+      title: 'Users',
+      icon: Users,
+      badge: 3,
+      children: [
+        { id: 'users-all', title: 'All Users', url: '/users' },
+        {
+          id: 'users-teams',
+          title: 'Teams',
+          children: [
+            {
+              id: 'team-alpha',
+              title: 'Team Alpha',
+              url: '/users/teams/alpha',
+              children: [
+                { id: 'team-alpha-members', title: 'Members', url: '/users/teams/alpha/members' },
+                { id: 'team-alpha-settings', title: 'Settings', url: '/users/teams/alpha/settings' },
+              ],
+            },
+            { id: 'team-beta', title: 'Team Beta', url: '/users/teams/beta' },
+          ],
+        },
+      ],
+    });
+    registerItem('management', {
+      id: 'orders',
+      title: 'Orders',
+      icon: ShoppingCart,
+      children: [
+        { id: 'orders-all', title: 'All Orders', url: '/orders' },
+        { id: 'orders-pending', title: 'Pending', url: '/orders/pending', badge: 5 },
+        { id: 'orders-completed', title: 'Completed', url: '/orders/completed' },
+      ],
+    });
+    // Action-only item
+    registerItem('management', { id: 'export', title: 'Export CSV', onClick: () => console.log('Export CSV') });
+
+    // Content
+    registerGroup({ id: 'content', label: 'Content' });
+    registerItem('content', {
+      id: 'articles',
+      title: 'Articles',
+      icon: FileText,
+      children: [
+        { id: 'articles-published', title: 'Published', url: '/articles' },
+        { id: 'articles-archived', title: 'Archived', url: '/articles/archived' },
+      ],
+    });
+    registerItem('content', { id: 'drafts', title: 'Drafts', url: '/drafts', icon: FileText, badge: 7 });
+
+    // System
+    registerGroup({ id: 'system', label: 'System' });
+    registerItem('system', { id: 'alerts', title: 'Alerts', url: '/alerts', icon: Bell });
+    registerItem('system', { id: 'security', title: 'Security', url: '/security', icon: Shield, disabled: true });
+    registerItem('system', { id: 'support', title: 'Support', url: '/support', icon: LifeBuoy });
+
+    // Settings
+    registerGroup({ id: 'settings', label: 'Settings' });
+    registerItem('settings', { id: 'general', title: 'General', url: '/settings', icon: Settings });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterComplexMenus />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-2">Home</h2>
+        <p className="text-muted-foreground">Overview of your admin panel.</p>
+      </div>
+    ),
+  });
+
+  const extraRoutes = [
+    { path: '/reports', title: 'Reports' },
+    { path: '/users', title: 'Users' },
+    { path: '/users/teams/alpha', title: 'Team Alpha' },
+    { path: '/users/teams/alpha/members', title: 'Team Alpha Members' },
+    { path: '/users/teams/alpha/settings', title: 'Team Alpha Settings' },
+    { path: '/users/teams/beta', title: 'Team Beta' },
+    { path: '/orders', title: 'Orders' },
+    { path: '/orders/pending', title: 'Orders Pending' },
+    { path: '/orders/completed', title: 'Orders Completed' },
+    { path: '/articles', title: 'Articles' },
+    { path: '/articles/archived', title: 'Articles Archived' },
+    { path: '/drafts', title: 'Drafts' },
+    { path: '/alerts', title: 'Alerts' },
+    { path: '/security', title: 'Security' },
+    { path: '/support', title: 'Support' },
+    { path: '/settings', title: 'Settings' },
+  ].map(({ path, title }) =>
+    createRoute({
+      getParentRoute: () => rootRoute,
+      path,
+      component: () => (
+        <div className="p-6">
+          <h2 className="text-xl font-semibold mb-2">{title}</h2>
+          <p className="text-muted-foreground">This is the {title} page.</p>
+        </div>
+      ),
+    })
+  );
+
+  const routeTree = rootRoute.addChildren([indexRoute, ...extraRoutes]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+  return <RouterProvider router={router} />;
+}
+
+export const Complex: Story = {
+  name: 'Complex menu',
+  render: () => (
+    <App
+      sidebarHeaderIcon={Home}
+      sidebarHeaderTitle={<span>Admin App</span>}
+      headerAfterTrigger={<input className="h-8 w-64 rounded-md border px-3 text-sm" placeholder="Quick search…" />}
+      headerAfterTheme={<button className="h-8 rounded-md border px-3 text-sm">Help</button>}
+    />
+  ),
+};

package/src/stories/kit/layouts/admin/AdminLayout.CustomSidebarHeaderComponent.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { Home } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function RegisterMenus() {
+  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    registerGroup({ id: 'overview', label: 'Overview' });
+    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterMenus />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const routeTree = rootRoute.addChildren([indexRoute]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+  return <RouterProvider router={router} />;
+}
+
+export const CustomSidebarHeaderComponent: Story = {
+  name: 'Custom sidebar header component',
+  render: () => (
+    <App
+      sidebarHeader={
+        <div className="px-4 py-3">
+          <div className="flex items-center gap-2">
+            <img src="https://dummyimage.com/32x32/000/fff.png&text=A" alt="Logo" className="h-8 w-8 rounded" />
+            <span className="font-semibold">My Admin</span>
+          </div>
+        </div>
+      }
+    />
+  ),
+};

package/src/stories/kit/layouts/admin/AdminLayout.CustomSidebarTitleAndIcon.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { BarChart3, Home } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function RegisterMenus() {
+  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    registerGroup({ id: 'overview', label: 'Overview' });
+    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterMenus />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const routeTree = rootRoute.addChildren([indexRoute]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+  return <RouterProvider router={router} />;
+}
+
+export const CustomSidebarTitleAndIcon: Story = {
+  name: 'Custom sidebar title and icon',
+  render: () => (
+    <App sidebarHeaderIcon={BarChart3} sidebarHeaderTitle={<span>Custom Title</span>} />
+  ),
+};

package/src/stories/kit/layouts/admin/AdminLayout.HeaderSlots.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import AdminLayout from '../../../../kit/layouts/admin/components/AdminLayout';
+import { ThemeProvider } from '../../../../kit/providers/ThemeProvider';
+import { useAdminSidebarMenuRegistration } from '../../../../kit/layouts/admin/hooks/menu';
+import {
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+import { Home } from 'lucide-react';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Kit/Layouts/Admin',
+  component: AdminLayout,
+};
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
+
+function RegisterMenus() {
+  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  useEffect(() => {
+    clear();
+    registerGroup({ id: 'overview', label: 'Overview' });
+    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
+  }, [registerGroup, registerItem, clear]);
+  return null;
+}
+
+function App(props: AdminLayoutStoryProps) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <ThemeProvider>
+        <AdminLayout {...props}>
+          <RegisterMenus />
+        </AdminLayout>
+      </ThemeProvider>
+    ),
+  });
+  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const routeTree = rootRoute.addChildren([indexRoute]);
+  const router = createRouter({ routeTree, basepath: '/iframe.html' });
+  return <RouterProvider router={router} />;
+}
+
+export const HeaderSlots: Story = {
+  name: 'Header slots (after trigger/theme)',
+  render: () => (
+    <App
+      headerAfterTrigger={<input className="h-8 w-64 rounded-md border px-3 text-sm" placeholder="Search…" />}
+      headerAfterTheme={
+        <div className="flex items-center gap-2">
+          <button className="h-8 rounded-md border px-3 text-sm">Invite</button>
+          <button className="h-8 rounded-md bg-primary px-3 text-sm text-primary-foreground">New</button>
+        </div>
+      }
+    />
+  ),
+};