auto-backup: 2025-12-12 09:14:37 (18 files: +0 ~18 -0)

Generated by DSS Git Backup Hook
This commit is contained in:
2025-12-12 06:14:37 -03:00
parent 8a09b6830a
commit db5be5ce37
18 changed files with 121 additions and 121 deletions

View File

@@ -1,7 +1,7 @@
/**
* Color Primitives - Foundation
* Full Tailwind color palette organized by category
* @generated 2025-12-11T18:41:28.962171
* @generated 2025-12-12T06:14:20.891750
*/
export default {
title: 'Foundation/Colors/Primitives',
@@ -35,7 +35,7 @@ export const AllColors = {
render: () => `
<style>${styles}</style>
<div class="color-container">
<div class="color-section">
<h2>Base</h2>
<div class="swatch-row">
@@ -55,7 +55,7 @@ export const AllColors = {
<div class="value">transparent</div>
</div></div>
</div>
<div class="color-section">
<h2>Neutral Scales</h2>
<div class="palette-grid">
@@ -245,7 +245,7 @@ export const AllColors = {
</div></div>
</div></div>
</div>
<div class="color-section">
<h2>Semantic Scales</h2>
<div class="palette-grid">

View File

@@ -1,7 +1,7 @@
/**
* Data Display
* Components for displaying data
* @generated 2025-12-11T18:41:28.963727
* @generated 2025-12-12T06:14:20.892979
*/
export default {
title: 'Components/Data Display',
@@ -59,7 +59,7 @@ export const Overview = {
render: () => `
<style>${styles}</style>
<div class="component-grid">
<div class="component-card">
<div class="card-header">
<h3>Accordion</h3>
@@ -67,7 +67,7 @@ export const Overview = {
</div>
<p class="description">A vertically stacked set of interactive headings that reveal content sections</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -76,21 +76,21 @@ export const Overview = {
</div>
<p class="description">An image element with a fallback for user profile images</p>
<div class="variants"><div class="variant-row"><span class="var-name">size:</span> <span class="badge">sm</span> <span class="badge">md</span> <span class="badge">lg</span></div></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Badge</h3>
</div>
<p class="description">Displays a badge or label</p>
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">secondary</span> <span class="badge">destructive</span> <span class="badge">outline</span></div></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Carousel</h3>
</div>
<p class="description">A carousel with embla-carousel</p>
<div class="variants"></div>
@@ -99,7 +99,7 @@ export const Overview = {
<div class="component-card">
<div class="card-header">
<h3>Chart</h3>
</div>
<p class="description">Beautiful charts using Recharts</p>
<div class="variants"></div>
@@ -112,12 +112,12 @@ export const Overview = {
</div>
<p class="description">An interactive component that expands/collapses content</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Data Table</h3>
</div>
<p class="description">Powerful table with sorting, filtering, pagination</p>
<div class="variants"></div>
@@ -126,38 +126,38 @@ export const Overview = {
<div class="component-card">
<div class="card-header">
<h3>Item</h3>
</div>
<p class="description">Generic list item component</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Kbd</h3>
</div>
<p class="description">Keyboard key display</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Table</h3>
</div>
<p class="description">Styled HTML table</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Typography</h3>
</div>
<p class="description">Text styling components</p>
<div class="variants"></div>
</div>
</div>
`

View File

@@ -1,7 +1,7 @@
/**
* Feedback
* User feedback components
* @generated 2025-12-11T18:41:28.963874
* @generated 2025-12-12T06:14:20.893111
*/
export default {
title: 'Components/Feedback',
@@ -59,24 +59,24 @@ export const Overview = {
render: () => `
<style>${styles}</style>
<div class="component-grid">
<div class="component-card">
<div class="card-header">
<h3>Alert</h3>
</div>
<p class="description">Displays a callout for user attention</p>
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Empty</h3>
</div>
<p class="description">Empty state display</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -85,21 +85,21 @@ export const Overview = {
</div>
<p class="description">Progress indicator bar</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Skeleton</h3>
</div>
<p class="description">Loading placeholder</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Sonner</h3>
</div>
<p class="description">Toast notifications with sonner</p>
<div class="variants"></div>
@@ -108,11 +108,11 @@ export const Overview = {
<div class="component-card">
<div class="card-header">
<h3>Spinner</h3>
</div>
<p class="description">Loading spinner animation</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -121,7 +121,7 @@ export const Overview = {
</div>
<p class="description">Toast notification component</p>
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
</div>
</div>
`

View File

@@ -1,7 +1,7 @@
/**
* Form Components
* Input controls and form elements
* @generated 2025-12-11T18:41:28.963371
* @generated 2025-12-12T06:14:20.892828
*/
export default {
title: 'Components/Form Components',
@@ -59,29 +59,29 @@ export const Overview = {
render: () => `
<style>${styles}</style>
<div class="component-grid">
<div class="component-card">
<div class="card-header">
<h3>Button</h3>
</div>
<p class="description">Displays a button or a component that looks like a button</p>
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span> <span class="badge">outline</span> <span class="badge">secondary</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span> <span class="badge">icon</span></div></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Button Group</h3>
</div>
<p class="description">Groups multiple buttons together</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Calendar</h3>
</div>
<p class="description">A date picker component with monthly/yearly views</p>
<div class="variants"></div>
@@ -94,21 +94,21 @@ export const Overview = {
</div>
<p class="description">A control that allows toggling between checked and unchecked</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Combobox</h3>
</div>
<p class="description">Autocomplete input with command palette</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Command</h3>
</div>
<p class="description">Command palette with search and filtering</p>
<div class="variants"></div>
@@ -117,25 +117,25 @@ export const Overview = {
<div class="component-card">
<div class="card-header">
<h3>Date Picker</h3>
</div>
<p class="description">A date picker built with calendar and popover</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Field</h3>
</div>
<p class="description">Form field wrapper with label and error</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Form</h3>
</div>
<p class="description">Form component with react-hook-form integration</p>
<div class="variants"></div>
@@ -144,25 +144,25 @@ export const Overview = {
<div class="component-card">
<div class="card-header">
<h3>Input</h3>
</div>
<p class="description">Text input field</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Input Group</h3>
</div>
<p class="description">Group of inputs with addons</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Input OTP</h3>
</div>
<p class="description">One-time password input</p>
<div class="variants"></div>
@@ -175,16 +175,16 @@ export const Overview = {
</div>
<p class="description">Text label for form elements</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Native Select</h3>
</div>
<p class="description">Native HTML select element with styling</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -193,7 +193,7 @@ export const Overview = {
</div>
<p class="description">Set of mutually exclusive options</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -202,7 +202,7 @@ export const Overview = {
</div>
<p class="description">Custom select dropdown</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -211,7 +211,7 @@ export const Overview = {
</div>
<p class="description">Range slider input</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -220,16 +220,16 @@ export const Overview = {
</div>
<p class="description">Toggle switch control</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Textarea</h3>
</div>
<p class="description">Multi-line text input</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -238,7 +238,7 @@ export const Overview = {
</div>
<p class="description">Two-state button</p>
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">outline</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span></div></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -247,7 +247,7 @@ export const Overview = {
</div>
<p class="description">Group of toggle buttons</p>
<div class="variants"></div>
</div>
</div>
`

View File

@@ -1,7 +1,7 @@
/**
* Layout
* Layout and structure components
* @generated 2025-12-11T18:41:28.964213
* @generated 2025-12-12T06:14:20.893461
*/
export default {
title: 'Components/Layout',
@@ -59,7 +59,7 @@ export const Overview = {
render: () => `
<style>${styles}</style>
<div class="component-grid">
<div class="component-card">
<div class="card-header">
<h3>Aspect Ratio</h3>
@@ -67,21 +67,21 @@ export const Overview = {
</div>
<p class="description">Displays content with a desired aspect ratio</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Card</h3>
</div>
<p class="description">Displays a card with header, content, and footer</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Resizable</h3>
</div>
<p class="description">Resizable panel groups</p>
<div class="variants"></div>
@@ -94,7 +94,7 @@ export const Overview = {
</div>
<p class="description">Custom scrollbar styling</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -103,7 +103,7 @@ export const Overview = {
</div>
<p class="description">Visual divider</p>
<div class="variants"><div class="variant-row"><span class="var-name">orientation:</span> <span class="badge">horizontal</span> <span class="badge">vertical</span></div></div>
</div>
</div>
`

View File

@@ -1,7 +1,7 @@
/**
* Navigation
* Navigation components
* @generated 2025-12-11T18:41:28.963979
* @generated 2025-12-12T06:14:20.893213
*/
export default {
title: 'Components/Navigation',
@@ -59,15 +59,15 @@ export const Overview = {
render: () => `
<style>${styles}</style>
<div class="component-grid">
<div class="component-card">
<div class="card-header">
<h3>Breadcrumb</h3>
</div>
<p class="description">Displays the path to the current page in a hierarchy</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -76,7 +76,7 @@ export const Overview = {
</div>
<p class="description">Horizontal menu with dropdowns</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -85,25 +85,25 @@ export const Overview = {
</div>
<p class="description">Website navigation with mega menus</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Pagination</h3>
</div>
<p class="description">Page navigation with previous/next</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
<h3>Sidebar</h3>
</div>
<p class="description">Application sidebar with collapsible sections</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -112,7 +112,7 @@ export const Overview = {
</div>
<p class="description">Tabbed interface</p>
<div class="variants"></div>
</div>
</div>
`

View File

@@ -1,7 +1,7 @@
/**
* Overlay
* Modal and overlay components
* @generated 2025-12-11T18:41:28.964095
* @generated 2025-12-12T06:14:20.893320
*/
export default {
title: 'Components/Overlay',
@@ -59,7 +59,7 @@ export const Overview = {
render: () => `
<style>${styles}</style>
<div class="component-grid">
<div class="component-card">
<div class="card-header">
<h3>Alert Dialog</h3>
@@ -67,7 +67,7 @@ export const Overview = {
</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">
@@ -76,7 +76,7 @@ export const Overview = {
</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">
@@ -85,12 +85,12 @@ export const Overview = {
</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>
@@ -103,7 +103,7 @@ export const Overview = {
</div>
<p class="description">Menu displayed on trigger interaction</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -112,7 +112,7 @@ export const Overview = {
</div>
<p class="description">Content appearing on hover</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -121,7 +121,7 @@ export const Overview = {
</div>
<p class="description">Floating content panel</p>
<div class="variants"></div>
</div>
<div class="component-card">
<div class="card-header">
@@ -130,7 +130,7 @@ export const Overview = {
</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">
@@ -139,7 +139,7 @@ export const Overview = {
</div>
<p class="description">Informative popup on hover</p>
<div class="variants"></div>
</div>
</div>
`

View File

@@ -1,6 +1,6 @@
/**
* Design System Overview
* @generated 2025-12-11T18:41:28.961736
* @generated 2025-12-12T06:14:20.891489
*/
export default {
title: 'Overview',

View File

@@ -1,6 +1,6 @@
/**
* Border Radius - Foundation
* @generated 2025-12-11T18:41:28.962806
* @generated 2025-12-12T06:14:20.892363
*/
export default {
title: 'Foundation/Radius',
@@ -27,7 +27,7 @@ export const RadiusScale = {
render: () => `
<style>${styles}</style>
<div class="radius-grid">
<div class="radius-item">
<div class="box" style="border-radius: 0;"></div>
<div class="name">none</div>

View File

@@ -1,7 +1,7 @@
/**
* Semantic Colors - Design Tokens
* Resolved color tokens for light theme
* @generated 2025-12-11T18:41:28.963202
* @generated 2025-12-12T06:14:20.892645
*/
export default {
title: 'Tokens/Semantic Colors',
@@ -30,7 +30,7 @@ export const LightTheme = {
render: () => `
<style>${styles}</style>
<div class="semantic-colors">
<div class="token-group">
<h3>Surface</h3>
<div class="token-row">

View File

@@ -1,7 +1,7 @@
/**
* Shadows - Foundation
* Box shadow scale
* @generated 2025-12-11T18:41:28.962994
* @generated 2025-12-12T06:14:20.892493
*/
export default {
title: 'Foundation/Effects/Shadows',
@@ -27,7 +27,7 @@ export const AllShadows = {
render: () => `
<style>${styles}</style>
<div class="shadows-grid">
<div class="shadow-card">
<div class="box" style="box-shadow: none;"></div>
<div class="name">none</div>

View File

@@ -1,6 +1,6 @@
/**
* Spacing Primitives - Foundation
* @generated 2025-12-11T18:41:28.962384
* @generated 2025-12-12T06:14:20.891907
*/
export default {
title: 'Foundation/Spacing',
@@ -28,7 +28,7 @@ export const SpacingScale = {
render: () => `
<style>${styles}</style>
<div class="spacing-grid">
<div class="spacing-item">
<div class="bar" style="width: 1px;"></div>
<div class="info">

View File

@@ -1,7 +1,7 @@
/**
* Typography - Foundation
* Font families, sizes, weights, and composed styles
* @generated 2025-12-11T18:41:28.962604
* @generated 2025-12-12T06:14:20.892202
*/
export default {
title: 'Foundation/Typography',
@@ -41,7 +41,7 @@ export const FontFamilies = {
<div class="typo-container">
<div class="section">
<h2>Font Families</h2>
<div class="font-sample">
<div class="sample-text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
The quick brown fox jumps over the lazy dog
@@ -214,7 +214,7 @@ export const TextStyles = {
<div class="typo-container">
<div class="section">
<h2>Composed Text Styles</h2>
<div class="style-sample">
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 3rem; font-weight: 700; line-height: 1;">
The quick brown fox