rizzo-css 0.0.17 → 0.0.18

package/scaffold/astro-app/src/pages/components/button.astro

@@ -1,74 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Button Component — Astro" description="Semantic button component with variants using theme variables">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/button" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/button</a>.</p>
-	
-		<section>
-		<h2>Button Component</h2>
-		<p>Semantic button component with variants using theme variables.</p>
-		
-		<h3>Button Variants</h3>
-		<div class="example">
-			<div class="example-title">Live Examples</div>
-			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
-				<button class="btn">Default</button>
-				<button class="btn btn-primary">Primary</button>
-				<button class="btn btn-success">Success</button>
-				<button class="btn btn-warning">Warning</button>
-				<button class="btn btn-error">Error</button>
-				<button class="btn btn-info">Info</button>
-				<button class="btn btn-outline">Outline</button>
-			</div>
-		</div>
-		
-		<p>All buttons:</p>
-		<ul>
-			<li>Use semantic theme variables</li>
-			<li>Have hover and focus states</li>
-			<li>Support disabled state</li>
-			<li>Are keyboard accessible</li>
-		</ul>
-		
-		<h3>Usage</h3>
-		<CodeBlock code={`<!-- Using component -->
----
-import Button from '../../components/Button.astro';
----
-
-<Button>Click me</Button>
-
-<!-- Using classes -->
-<button class="btn">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-error">Error</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-outline">Outline</button>`} language="astro" />
-		
-		<h3>Button Variants</h3>
-		<ul>
-			<li><code>btn</code> - Default button style</li>
-			<li><code>btn-primary</code> - Primary action button</li>
-			<li><code>btn-success</code> - Success/positive action</li>
-			<li><code>btn-warning</code> - Warning action</li>
-			<li><code>btn-error</code> - Error/destructive action</li>
-			<li><code>btn-info</code> - Informational action</li>
-			<li><code>btn-outline</code> - Outlined button style</li>
-		</ul>
-		
-		<h3>Disabled State</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
-				<button class="btn" disabled>Disabled Default</button>
-				<button class="btn btn-primary" disabled>Disabled Primary</button>
-			</div>
-		</div>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/button">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
-	</section>
-</DocsLayout>

package/scaffold/astro-app/src/pages/components/cards.astro

@@ -1,247 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import Card from '../../components/Card.astro';
-import Button from '../../components/Button.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Card Component — Astro" description="Flexible card component with variants, sections, and image support">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/cards" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/cards</a>.</p>
-	
-		<section>
-		<h2>Card Component</h2>
-		<p>The Card component provides a flexible container for organizing content with variants, sections, and image support.</p>
-	</section>
-
-	<section>
-		<h2>Basic Usage</h2>
-		<p>The simplest card usage:</p>
-		
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card>
-				<h3>Card Title</h3>
-				<p>This is a basic card with default styling. It uses semantic theme variables and adapts to all themes.</p>
-			</Card>
-		</div>
-		
-		<h3>Code Example</h3>
-		<CodeBlock code={`---
-import Card from '../../components/Card.astro';
----
-
-<Card>
-  <h3>Card Title</h3>
-  <p>Card content goes here</p>
-</Card>`} language="astro" />
-	</section>
-
-	<section>
-		<h2>Card Variants</h2>
-		<p>Cards support four variants for different visual styles:</p>
-		
-		<h3>Default</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card variant="default">
-				<h3>Default Card</h3>
-				<p>Standard card with border and background.</p>
-			</Card>
-		</div>
-		
-		<h3>Elevated</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card variant="elevated">
-				<h3>Elevated Card</h3>
-				<p>Card with shadow effect. Hover to see it lift up.</p>
-			</Card>
-		</div>
-		
-		<h3>Outlined</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card variant="outlined">
-				<h3>Outlined Card</h3>
-				<p>Transparent background with border. Hover to see accent border.</p>
-			</Card>
-		</div>
-		
-		<h3>Filled</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card variant="filled">
-				<h3>Filled Card</h3>
-				<p>Uses main background color instead of alt background.</p>
-			</Card>
-		</div>
-		
-		<h3>Code Example</h3>
-		<CodeBlock code={`---
-import Card from '../../components/Card.astro';
----
-
-<Card variant="elevated">
-  <h3>Elevated Card</h3>
-  <p>Content</p>
-</Card>
-
-<Card variant="outlined">
-  <h3>Outlined Card</h3>
-  <p>Content</p>
-</Card>
-
-<Card variant="filled">
-  <h3>Filled Card</h3>
-  <p>Content</p>
-</Card>`} language="astro" />
-	</section>
-
-	<section>
-		<h2>Card Sections</h2>
-		<p>Use card sections for structured layouts with header, body, and footer:</p>
-		
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card>
-				<div class="card__header">
-					<h3 class="card__title">Card Title</h3>
-					<p class="card__subtitle">Card subtitle or description</p>
-				</div>
-				<div class="card__body">
-					<p>This is the main content area of the card. It can contain any content you need.</p>
-					<p>Multiple paragraphs, lists, or other elements work great here.</p>
-				</div>
-				<div class="card__footer">
-					<button class="btn btn-primary">Action</button>
-					<button class="btn btn-outline">Cancel</button>
-				</div>
-			</Card>
-		</div>
-		
-		<h3>Code Example</h3>
-		<CodeBlock code={`---
-import Card from '../../components/Card.astro';
-import Button from '../../components/Button.astro';
----
-
-<Card>
-  <div class="card__header">
-    <h3 class="card__title">Card Title</h3>
-    <p class="card__subtitle">Subtitle text</p>
-  </div>
-  <div class="card__body">
-    <p>Main content area</p>
-  </div>
-  <div class="card__footer">
-    <Button>Action</Button>
-  </div>
-</Card>`} language="astro" />
-		
-		<h3>Section Classes</h3>
-		<ul>
-			<li><code>card__header</code> - Header section with bottom border</li>
-			<li><code>card__body</code> - Main content area (flexible, takes remaining space)</li>
-			<li><code>card__footer</code> - Footer section with top border</li>
-			<li><code>card__title</code> - Title styling for header</li>
-			<li><code>card__subtitle</code> - Subtitle styling for header</li>
-		</ul>
-	</section>
-
-	<section>
-		<h2>Card with Image</h2>
-		<p>Add an image to your card using the <code>card__image</code> class:</p>
-		
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card variant="elevated">
-				<div style="width: 100%; height: var(--spacing-50); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-6)) var(--spacing-6) calc(-1 * var(--spacing-6)); display: flex; align-items: center; justify-content: center; color: var(--accent-text); font-weight: var(--font-weight-semibold);">
-					Image Placeholder
-				</div>
-				<div class="card__header">
-					<h3 class="card__title">Card with Image</h3>
-				</div>
-				<div class="card__body">
-					<p>This card includes an image at the top. The image automatically adjusts to the card's border radius.</p>
-				</div>
-			</Card>
-		</div>
-		
-		<h3>Code Example</h3>
-		<CodeBlock code={`---
-import Card from '../../components/Card.astro';
----
-
-<Card variant="elevated">
-  <img src="/path/to/image.jpg" alt="Description" class="card__image" />
-  <div class="card__header">
-    <h3 class="card__title">Card Title</h3>
-  </div>
-  <div class="card__body">
-    <p>Card content</p>
-  </div>
-</Card>`} language="astro" />
-	</section>
-
-	<section>
-		<h2>Complete Example</h2>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<Card variant="elevated">
-				<div style="width: 100%; height: var(--spacing-50); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-6)) var(--spacing-6) calc(-1 * var(--spacing-6)); display: flex; align-items: center; justify-content: center; color: var(--accent-text); font-weight: var(--font-weight-semibold);">
-					Featured Image
-				</div>
-				<div class="card__header">
-					<h3 class="card__title">Complete Card Example</h3>
-					<p class="card__subtitle">With image, header, body, and footer</p>
-				</div>
-				<div class="card__body">
-					<p>This is a complete card example showcasing all features:</p>
-					<ul>
-						<li>Image at the top</li>
-						<li>Structured header with title and subtitle</li>
-						<li>Flexible body content</li>
-						<li>Footer with actions</li>
-					</ul>
-				</div>
-				<div class="card__footer">
-					<button class="btn btn-primary">Primary Action</button>
-					<button class="btn btn-outline">Secondary</button>
-				</div>
-			</Card>
-		</div>
-	</section>
-
-	<section>
-		<h2>Props</h2>
-		<ul>
-			<li><code>variant</code> ('default' | 'elevated' | 'outlined' | 'filled', optional) - Card variant style (default: 'default')</li>
-			<li><code>class</code> (string, optional) - Additional CSS classes</li>
-		</ul>
-	</section>
-
-	<section>
-		<h2>Styling</h2>
-		<p>All card styles use semantic theme variables and automatically adapt to the selected theme. Card styles are defined in <code>src/styles/layout.css</code>.</p>
-		
-		<h3>Customization</h3>
-		<p>You can customize cards using CSS variables or by adding custom classes:</p>
-		<CodeBlock code={`.custom-card {
-  border-radius: 1rem;
-  padding: 2rem;
-}`} language="css" />
-	</section>
-
-	<section>
-		<h2>Accessibility</h2>
-		<p>Cards are semantic containers and don't require specific ARIA attributes. However, when using cards as interactive elements (like links or buttons), ensure proper accessibility:</p>
-		<ul>
-			<li>Use semantic HTML (e.g., <code>&lt;article&gt;</code> for card content)</li>
-			<li>Provide proper heading hierarchy</li>
-			<li>Include alt text for images</li>
-			<li>Ensure keyboard navigation for interactive cards</li>
-		</ul>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/cards">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
-	</section>
-</DocsLayout>

package/scaffold/astro-app/src/pages/components/copy-to-clipboard.astro

@@ -1,49 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import CopyToClipboard from '../../components/CopyToClipboard.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="CopyToClipboard Component — Astro" description="Reusable component for copying text values to the clipboard with visual feedback">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/copy-to-clipboard" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/copy-to-clipboard</a>.</p>
-	
-		<section>
-		<h2>CopyToClipboard Component</h2>
-		<p>A reusable component for copying text values to the clipboard with visual feedback.</p>
-		
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<p>Click the button below to copy text:</p>
-			<CopyToClipboard id="copy-example-email" value="example@email.com" format="Email" />
-		</div>
-		
-		<h3>Usage</h3>
-		<CodeBlock code={`---
-import CopyToClipboard from '../../components/CopyToClipboard.astro';
----
-
-<CopyToClipboard id="copy-example-email" value="example@email.com" format="Email" />
-<CopyToClipboard id="copy-css-var" value="var(--accent)" format="CSS Variable" />
-<CopyToClipboard id="copy-hex-color" value="#FF5733" format="Hex" />`} language="astro" />
-		
-		<h3>Props</h3>
-		<ul>
-			<li><code>value</code> (string, required) - The text value to copy</li>
-			<li><code>id</code> (string, optional) - Unique ID for the button. If not provided, a random ID will be generated</li>
-			<li><code>label</code> (string, optional) - ARIA label for the button</li>
-			<li><code>format</code> (string, optional) - Format name shown in feedback message</li>
-			<li><code>class</code> (string, optional) - Additional CSS classes</li>
-		</ul>
-		
-		<h3>Features</h3>
-		<ul>
-			<li>Visual feedback with icon change (copy → checkmark)</li>
-			<li>Accessible with ARIA labels and keyboard support</li>
-			<li>Fallback for older browsers (document.execCommand)</li>
-			<li>Theme-aware styling</li>
-			<li>Auto-reset after 2 seconds</li>
-		</ul>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/copy-to-clipboard">Svelte</a> · Vanilla: same HTML and BEM as in Usage above; add minimal JS for copy.</p>
-	</section>
-</DocsLayout>

package/scaffold/astro-app/src/pages/components/divider.astro

@@ -1,74 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import DividerComponent from '../../components/Divider.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Divider Component — Astro" description="Horizontal or vertical divider line with optional label">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/divider" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/divider</a>.</p>
-	
-		<section>
-		<h2>Divider Component</h2>
-		<p>A simple divider for visually separating content. Supports horizontal (default) and vertical orientation, and an optional label (e.g. "OR") in the middle for horizontal dividers.</p>
-		
-		<h3>Props</h3>
-		<ul>
-			<li><code>orientation</code> (string, optional) - <code>horizontal</code>, <code>vertical</code> (default: horizontal)</li>
-			<li><code>label</code> (string, optional) - Optional text shown in the middle (horizontal only)</li>
-			<li><code>class</code> (string, optional) - Additional CSS classes</li>
-		</ul>
-
-		<h3>Basic Usage (horizontal)</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<div>
-				<p style="margin: 0 0 var(--spacing-2) 0;">Content above</p>
-				<DividerComponent />
-				<p style="margin: var(--spacing-2) 0 0 0;">Content below</p>
-			</div>
-		</div>
-		<CodeBlock code={`---
-import Divider from '../../components/Divider.astro';
----
-
-<Divider />`} language="astro" />
-
-		<h3>With Label</h3>
-		<p>Use <code>label</code> to show text in the middle (e.g. "OR" between two options).</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<DividerComponent label="OR" />
-		</div>
-		<CodeBlock code={`<Divider label="OR" />`} language="astro" />
-
-		<h3>Vertical</h3>
-		<p>Use <code>orientation="vertical"</code> inside a flex row to separate items. The parent should have a defined height (e.g. <code>min-height</code> or <code>height</code>).</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: var(--spacing-16);">
-				<span>Item 1</span>
-				<DividerComponent orientation="vertical" />
-				<span>Item 2</span>
-				<DividerComponent orientation="vertical" />
-				<span>Item 3</span>
-			</div>
-		</div>
-		<CodeBlock code={`<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: 3rem;">
-  <span>Item 1</span>
-  <Divider orientation="vertical" />
-  <span>Item 2</span>
-  <Divider orientation="vertical" />
-  <span>Item 3</span>
-</div>`} language="astro" />
-
-		<h3>Features</h3>
-		<ul>
-			<li><strong>Accessible</strong> - <code>role="separator"</code> and <code>aria-orientation</code>; optional <code>aria-label</code> when label is set</li>
-			<li><strong>Horizontal</strong> - Full-width line; optional label in the center</li>
-			<li><strong>Vertical</strong> - Full-height line for use in flex layouts</li>
-			<li><strong>Theme-aware</strong> - Uses <code>--border</code> and <code>--text-dim</code></li>
-		</ul>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/divider">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
-	</section>
-</DocsLayout>