feat(ui): add Mosaic Delete Org section and destructive button variant

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {

.changeset/delete-org-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/Composition.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+
+export interface CompositionPiece {
+ /** Display name of the piece (e.g. `Destructive`). */
+ name: string;
+ /** Route to the piece's page in swingset (e.g. `/blocks/destructive`). */
+ href: string;
+ /** Which Mosaic layer the piece lives in (e.g. `Blocks`, `Components`, `Primitives`). */
+ layer: string;
+}
+
+// Mosaic layers, high → low. Drives the order the composition groups render in.
+// Plural to match the sidebar group names.
+const LAYER_ORDER = ['AIO', 'Sections', 'Blocks', 'Components', 'Primitives'];
+
+function layerRank(layer: string): number {
+ const i = LAYER_ORDER.indexOf(layer);
+ return i === -1 ? LAYER_ORDER.length : i;
+}
+
+/**
+ * The linked pieces shown inside a `<Story>`'s attached "Composition" footer, sorted
+ * and grouped by Mosaic layer. Each piece links to its own page.
+ */
+export function CompositionPanel({ pieces }: { pieces: CompositionPiece[] }) {
+ const groups = new Map<string, CompositionPiece[]>();
+ for (const piece of pieces) {
+ if (!groups.has(piece.layer)) {
+ groups.set(piece.layer, []);
+ }
+ groups.get(piece.layer)?.push(piece);
+ }
+
+ const sortedLayers = Array.from(groups.keys()).sort((a, b) => layerRank(a) - layerRank(b) || a.localeCompare(b));
+
+ return (
+ <div className='flex flex-col gap-4 p-3'>
+ {sortedLayers.map(layer => (
+ <section
+ key={layer}
+ className='flex flex-col gap-2'
+ >
+ <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>{layer}</div>
+ {groups
+ .get(layer)
+ ?.slice()
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(piece => (
+ <Link
+ key={piece.href}
+ href={piece.href}
+ className='text-muted-foreground hover:text-foreground font-mono text-xs'
+ >
+ {`<${piece.name} />`}
+ </Link>
+ ))}
+ </section>
+ ))}
+ </div>
+ );
+}

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
  },
  sections: {
  'leave-organization': dynamic(() => import('../stories/leave-organization.mdx')),
+ 'delete-organization': dynamic(() => import('../stories/delete-organization.mdx')),
  },
  blocks: {
  destructive: dynamic(() => import('../stories/destructive.mdx')),

packages/swingset/src/components/StoryEmbed.tsx

@@ -1,30 +1,65 @@
 'use client';
 
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
+import { Layers2Icon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
 import type { StoryModule } from '@/lib/types';
 
+import type { CompositionPiece } from './Composition';
+import { CompositionPanel } from './Composition';
+
 interface StoryEmbedProps {
  name: string;
  storyModule: StoryModule;
+ /** When provided, a collapsible "Composition" footer is attached to the example card. */
+ composition?: CompositionPiece[];
 }
 
-export function StoryEmbed({ name, storyModule }: StoryEmbedProps) {
+export function StoryEmbed({ name, storyModule, composition }: StoryEmbedProps) {
  const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
+ const [compositionOpen, setCompositionOpen] = useState(false);
+
  if (!StoryComp) {
  return <div className='rounded bg-red-50 p-3 text-sm text-red-500'>Story &quot;{name}&quot; not found</div>;
  }
 
  const knobs = generateKnobs(storyModule.meta);
  const defaultValues = initKnobValues(knobs);
 
-return (
- <div className='not-prose border-border bg-background my-4 flex min-h-20 items-center justify-center rounded-lg border p-6'>
+const preview = (
+ <div className='flex min-h-20 items-center justify-center p-6'>
  <MosaicProvider>
  <StoryComp {...defaultValues} />
  </MosaicProvider>
  </div>
  );
+
+ if (!composition) {
+ return <div className='not-prose border-border bg-background my-4 rounded-lg border'>{preview}</div>;
+ }
+
+ return (
+ <Collapsible
+ open={compositionOpen}
+ onOpenChange={setCompositionOpen}
+ className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+ >
+ {preview}
+
+ <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+ <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+ <Layers2Icon className='size-3' />
+ Composition
+ </CollapsibleTrigger>
+ </div>
+
+ <CollapsibleContent className='border-t'>
+ <CompositionPanel pieces={composition} />
+ </CollapsibleContent>
+ </Collapsible>
+ );
 }

packages/swingset/src/components/app-sidebar.tsx

@@ -78,7 +78,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  isActive={pathname === href}
  render={<Link href={href} />}
  >
- <span className='truncate'>{mod.meta.title}</span>
+ <span className='truncate'>{mod.meta.label ?? mod.meta.title}</span>
  <span className='text-sidebar-foreground/50 shrink-0 font-mono text-[10px] leading-none'>
  {`<${mod.meta.title} />`}
  </span>

packages/swingset/src/lib/registry.ts

@@ -3,6 +3,10 @@ import { meta as accordionMeta } from '../stories/accordion.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
+import {
+ Default as DeleteOrganizationDefault,
+ meta as deleteOrganizationMeta,
+} from '../stories/delete-organization.stories';
 import { Default as DestructiveDefault, meta as destructiveMeta } from '../stories/destructive.stories';
 import { Default as DialogDefault, meta as dialogComponentMeta } from '../stories/dialog.component.stories';
 import { meta as dialogMeta } from '../stories/dialog.stories';
@@ -31,6 +35,7 @@ import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
 const leaveOrganizationModule: StoryModule = { meta: leaveOrganizationMeta, Default: LeaveOrganizationDefault };
+const deleteOrganizationModule: StoryModule = { meta: deleteOrganizationMeta, Default: DeleteOrganizationDefault };
 const organizationProfileModule: StoryModule = { meta: organizationProfileMeta, Default: OrganizationProfileDefault };
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
@@ -57,6 +62,7 @@ export const registry: StoryModule[] = [
  organizationProfileModule,
  // Sections
  leaveOrganizationModule,
+ deleteOrganizationModule,
  // Blocks
  destructiveModule,
  // Components

packages/swingset/src/lib/types.ts

@@ -37,6 +37,12 @@ export type KnobValues = Record<string, string | boolean | number>;
 export interface StoryMeta {
  group: string;
  title: string;
+ /**
+ * Optional human-friendly label shown in the sidebar. Falls back to `title` when
+ * omitted. Use this when the desired sidebar text differs from the component name
+ * (which still drives the slug and the `<Title />` tag).
+ */
+ label?: string;
  /**
  * Path to the file that exports the documented component, relative to the monorepo
  * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View

packages/swingset/src/stories/delete-organization.mdx

@@ -0,0 +1,16 @@
+import * as DeleteOrganizationStories from './delete-organization.stories';
+
+# Delete Organization
+
+A section that owns the open/deleting state and wires the `Destructive` block to the delete-organization flow.
+
+<Story
+ name='Default'
+ storyModule={DeleteOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
+/>

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+ group: 'Sections',
+ title: 'DeleteOrganization',
+ label: 'Delete Org',
+ source: 'packages/ui/src/mosaic/sections/delete-organization.tsx',
+};
+
+export function Default() {
+ return <DeleteOrganization organizationName="Alex's Organization" />;
+}

packages/swingset/src/stories/leave-organization.mdx

@@ -7,4 +7,10 @@ A section that owns the open/deleting state and wires the `Destructive` block to
 <Story
  name='Default'
  storyModule={LeaveOrganizationStories}
+ composition={[
+ { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+ { name: 'Button', href: '/components/button', layer: 'Components' },
+ { name: 'Input', href: '/components/input', layer: 'Components' },
+ { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+ ]}
 />

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/section/leave-organization';
+import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
 
 import type { StoryMeta } from '@/lib/types';
 
 export const meta: StoryMeta = {
  group: 'Sections',
  title: 'LeaveOrganization',
- source: 'packages/ui/src/mosaic/section/leave-organization.tsx',
+ label: 'Leave Org',
+ source: 'packages/ui/src/mosaic/sections/leave-organization.tsx',
 };
 
 export function Default() {

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -6,6 +6,7 @@ import type { StoryMeta } from '@/lib/types';
 export const meta: StoryMeta = {
  group: 'AIO',
  title: 'OrganizationProfile',
+ label: 'Org Profile',
  source: 'packages/ui/src/mosaic/aio/organization-profile.tsx',
 };
 

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,4 +1,4 @@
-import { LeaveOrganization } from '../section/leave-organization';
+import { LeaveOrganization } from '../sections/leave-organization';
 
 interface OrganizationProfileProps {
  organizationName: string;

packages/ui/src/mosaic/block/destructive.tsx

@@ -51,7 +51,10 @@ export function Destructive({
  Are you sure you want to leave this {resourceType}? You will lose access to this {resourceType} and its
  applications.
  </Dialog.Description>
- <form onSubmit={handleSubmit}>
+ <form
+ onSubmit={handleSubmit}
+ style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+ >
  <label>
  Type &quot;{resourceName}&quot; below to continue.
  <Input
@@ -62,7 +65,9 @@ export function Destructive({
  </label>
  <Button
  type='submit'
+ color='destructive'
  disabled={!canSubmit}
+ sx={{ alignSelf: 'flex-start' }}
  >
  {isDeleting ? 'Leaving…' : `Leave ${resourceType}`}
  </Button>

packages/ui/src/mosaic/components/button.tsx

@@ -32,6 +32,12 @@ export const buttonRecipe = defineSlotRecipe(theme => ({
  _hover: { backgroundColor: theme.mix('primary', 'primaryForeground', 12) },
  _active: { backgroundColor: theme.mix('primary', 'primaryForeground', 24) },
  },
+ destructive: {
+ backgroundColor: theme.color.destructive,
+ color: theme.color.destructiveForeground,
+ _hover: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 12) },
+ _active: { backgroundColor: theme.mix('destructive', 'destructiveForeground', 24) },
+ },
  },
  size: {
  sm: { padding: `${theme.spacing(0.2)} ${theme.spacing(2)}`, ...theme.text('xs') },

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+import { Button } from '../components/button';
+import { Destructive } from '../block/destructive';
+
+interface DeleteOrganizationProps {
+ organizationName: string;
+}
+
+export function DeleteOrganization({ organizationName }: DeleteOrganizationProps) {
+ const [open, setOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const handleDelete = async () => {
+ setIsDeleting(true);
+ await new Promise<void>(resolve => setTimeout(resolve, 2000));
+ setIsDeleting(false);
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Delete organization</h2>
+ <p>Your organization will be permanently deleted and all members will lose access</p>
+ <Destructive
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Delete organization
+ </Button>
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ resourceType='organization'
+ resourceName={organizationName}
+ onDelete={handleDelete}
+ isDeleting={isDeleting}
+ />
+ </div>
+ );
+}

packages/ui/src/mosaic/section/leave-organization.tsx → packages/ui/src/mosaic/sections/leave-organization.tsx

@@ -19,17 +19,25 @@ export function LeaveOrganization({ organizationName }: LeaveOrganizationProps)
  };
 
  return (
- <>
- <h2>Leave organization</h2>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
+ <h2 style={{ fontWeight: 700 }}>Leave organization</h2>
+ <p>You will be removed from the organization and need to be invited back</p>
  <Destructive
- trigger={props => <Button {...props}>Leave organization</Button>}
+ trigger={props => (
+ <Button
+ color='destructive'
+ {...props}
+ >
+ Leave organization
+ </Button>
+ )}
  open={open}
  onOpenChange={setOpen}
  resourceType='organization'
  resourceName={organizationName}
  onDelete={handleDelete}
  isDeleting={isDeleting}
  />
- </>
+ </div>
  );
 }

packages/ui/src/mosaic/variables.ts

@@ -7,6 +7,8 @@ export const defaultMosaicVariables = Object.freeze({
  color: {
  primary: 'light-dark(oklch(0.205 0 0), oklch(0.922 0 0))',
  primaryForeground: 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+ destructive: 'light-dark(oklch(0.577 0.245 27.325), oklch(0.637 0.237 25.331))',
+ destructiveForeground: 'oklch(0.985 0 0)',
  },
  spacing: '0.25rem',
  rounded: {