147 lines
4.6 KiB
JavaScript
147 lines
4.6 KiB
JavaScript
/**
|
|
* Overlay
|
|
* Modal and overlay components
|
|
* @generated 2025-12-12T07:22:24.844781
|
|
*/
|
|
export default {
|
|
title: 'Components/Overlay',
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Modal and overlay components'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const styles = `
|
|
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
.component-card {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
background: white;
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
.radix-badge {
|
|
font-size: 0.6rem;
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
}
|
|
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
.variants { margin-bottom: 0.5rem; }
|
|
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
.badge {
|
|
display: inline-block;
|
|
background: #f3f4f6;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 4px;
|
|
margin-right: 0.25rem;
|
|
font-family: monospace;
|
|
font-size: 0.65rem;
|
|
}
|
|
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
`;
|
|
|
|
export const Overview = {
|
|
name: 'Component Catalog',
|
|
render: () => `
|
|
<style>${styles}</style>
|
|
<div class="component-grid">
|
|
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Alert Dialog</h3>
|
|
<span class="radix-badge">@radix-ui/react-alert-dialog</span>
|
|
</div>
|
|
<p class="description">A modal dialog that interrupts user flow with important information</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Context Menu</h3>
|
|
<span class="radix-badge">@radix-ui/react-context-menu</span>
|
|
</div>
|
|
<p class="description">Right-click context menu with keyboard support</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Dialog</h3>
|
|
<span class="radix-badge">@radix-ui/react-dialog</span>
|
|
</div>
|
|
<p class="description">A modal dialog for content display</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Drawer</h3>
|
|
|
|
</div>
|
|
<p class="description">A drawer component extending dialog</p>
|
|
<div class="variants"></div>
|
|
<div class="deps">deps: vaul</div>
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Dropdown Menu</h3>
|
|
<span class="radix-badge">@radix-ui/react-dropdown-menu</span>
|
|
</div>
|
|
<p class="description">Menu displayed on trigger interaction</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Hover Card</h3>
|
|
<span class="radix-badge">@radix-ui/react-hover-card</span>
|
|
</div>
|
|
<p class="description">Content appearing on hover</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Popover</h3>
|
|
<span class="radix-badge">@radix-ui/react-popover</span>
|
|
</div>
|
|
<p class="description">Floating content panel</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Sheet</h3>
|
|
<span class="radix-badge">@radix-ui/react-dialog</span>
|
|
</div>
|
|
<p class="description">Side panel overlay</p>
|
|
<div class="variants"><div class="variant-row"><span class="var-name">side:</span> <span class="badge">top</span> <span class="badge">right</span> <span class="badge">bottom</span> <span class="badge">left</span></div></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Tooltip</h3>
|
|
<span class="radix-badge">@radix-ui/react-tooltip</span>
|
|
</div>
|
|
<p class="description">Informative popup on hover</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|