@aspect-ops/exon-ui 0.2.2 → 0.4.0

package/dist/components/FlexibleGrid/README.md

@@ -0,0 +1,212 @@
+# FlexibleGrid Component
+
+A dynamic, responsive grid component that allows you to create custom grid layouts with flexible column spans and customizable cells.
+
+## Features
+
+- **Flexible Column Spans**: Each cell can span 1-12 columns
+- **Customizable Styling**: Background colors, text colors, and custom classes per cell and row
+- **Responsive**: Automatically adjusts to mobile devices (6 columns on small screens)
+- **Design Tokens**: Supports Exon UI spacing tokens (xs, sm, md, lg, xl, 2xl, 3xl)
+- **Custom Gaps**: Use design tokens or custom CSS values
+- **Hover Effects**: Smooth scale transition on hover
+
+## Installation
+
+```bash
+npm install @aspect-ops/exon-ui
+```
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+	import { FlexibleGrid } from '@aspect-ops/exon-ui';
+	import type { FlexibleGridRow } from '@aspect-ops/exon-ui';
+
+	const rows: FlexibleGridRow[] = [
+		{
+			cells: [
+				{ span: 6, content: 'Half Width' },
+				{ span: 6, content: 'Half Width' }
+			]
+		},
+		{
+			cells: [
+				{ span: 4, content: '1/3 Width' },
+				{ span: 4, content: '1/3 Width' },
+				{ span: 4, content: '1/3 Width' }
+			]
+		},
+		{
+			cells: [{ span: 12, content: 'Full Width' }]
+		}
+	];
+</script>
+
+<FlexibleGrid {rows} />
+```
+
+## Advanced Usage
+
+```svelte
+<script lang="ts">
+	import { FlexibleGrid } from '@aspect-ops/exon-ui';
+	import type { FlexibleGridRow } from '@aspect-ops/exon-ui';
+
+	const customRows: FlexibleGridRow[] = [
+		{
+			cells: [
+				{
+					span: 8,
+					content: '<strong>Main Content</strong>',
+					bgColor: '#4654A3',
+					textColor: 'white'
+				},
+				{
+					span: 4,
+					content: 'Sidebar',
+					bgColor: '#FF3131',
+					textColor: 'white',
+					class: 'custom-cell'
+				}
+			],
+			class: 'custom-row'
+		}
+	];
+</script>
+
+<FlexibleGrid
+	rows={customRows}
+	gap="md"
+	cellHeight="120px"
+	defaultBgColor="#6B7A99"
+	defaultTextColor="white"
+	columns={12}
+	class="my-custom-grid"
+/>
+```
+
+## Props
+
+| Prop               | Type                     | Default      | Description                                                              |
+| ------------------ | ------------------------ | ------------ | ------------------------------------------------------------------------ |
+| `rows`             | `FlexibleGridRow[]`      | **Required** | Array of row objects containing cells                                    |
+| `gap`              | `SpacingToken \| string` | `'xs'`       | Gap between cells and rows (supports design tokens or custom CSS values) |
+| `cellHeight`       | `string`                 | `'80px'`     | Default height for all cells                                             |
+| `defaultBgColor`   | `string`                 | `'#6B7A99'`  | Default background color for cells                                       |
+| `defaultTextColor` | `string`                 | `'white'`    | Default text color for cells                                             |
+| `columns`          | `number`                 | `12`         | Total number of columns in the grid                                      |
+| `class`            | `string`                 | `''`         | Additional CSS classes for the grid container                            |
+
+## Type Definitions
+
+### FlexibleGridCell
+
+```typescript
+interface FlexibleGridCell {
+	span: number; // How many columns to span (1-12)
+	content: string; // Content to display (can use HTML)
+	bgColor?: string; // Optional background color
+	textColor?: string; // Optional text color
+	class?: string; // Optional custom classes
+}
+```
+
+### FlexibleGridRow
+
+```typescript
+interface FlexibleGridRow {
+	cells: FlexibleGridCell[];
+	class?: string; // Optional custom classes for the row
+}
+```
+
+## Spacing Tokens
+
+The `gap` prop accepts the following design tokens:
+
+- `xs` - 0.25rem (4px)
+- `sm` - 0.5rem (8px)
+- `md` - 1rem (16px)
+- `lg` - 1.5rem (24px)
+- `xl` - 2rem (32px)
+- `2xl` - 3rem (48px)
+- `3xl` - 4rem (64px)
+
+Or you can use any custom CSS value like `'10px'`, `'1.5rem'`, etc.
+
+## Responsive Behavior
+
+- **Desktop/Tablet (>768px)**: 12-column grid
+- **Mobile (480-768px)**: Cells maintain height with adjusted font size
+- **Small Mobile (<480px)**: 6-column grid with reduced cell height and font size
+
+## Accessibility
+
+- Cells have hover effects with smooth transitions
+- Supports keyboard navigation (inherits from native HTML)
+- Content can include semantic HTML for better accessibility
+
+## Examples
+
+### Dashboard Layout
+
+```svelte
+<script lang="ts">
+	const dashboardRows = [
+		{
+			cells: [{ span: 12, content: '<h2>Dashboard Header</h2>', bgColor: '#270949' }]
+		},
+		{
+			cells: [
+				{ span: 3, content: 'Stat 1', bgColor: '#4654A3' },
+				{ span: 3, content: 'Stat 2', bgColor: '#4654A3' },
+				{ span: 3, content: 'Stat 3', bgColor: '#4654A3' },
+				{ span: 3, content: 'Stat 4', bgColor: '#4654A3' }
+			]
+		},
+		{
+			cells: [
+				{ span: 8, content: 'Main Chart', bgColor: '#FF3131' },
+				{ span: 4, content: 'Summary', bgColor: '#6B7A99' }
+			]
+		}
+	];
+</script>
+
+<FlexibleGrid rows={dashboardRows} gap="md" cellHeight="150px" />
+```
+
+### Content Layout
+
+```svelte
+<script lang="ts">
+	const contentRows = [
+		{
+			cells: [
+				{ span: 9, content: 'Article Content', cellHeight: '300px' },
+				{ span: 3, content: 'Sidebar Widgets' }
+			]
+		},
+		{
+			cells: [
+				{ span: 4, content: 'Related 1' },
+				{ span: 4, content: 'Related 2' },
+				{ span: 4, content: 'Related 3' }
+			]
+		}
+	];
+</script>
+
+<FlexibleGrid rows={contentRows} gap="lg" />
+```
+
+## Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- IE11+ (with polyfills for CSS Grid)
+
+## License
+
+MIT

package/dist/components/FlexibleGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FlexibleGrid } from './FlexibleGrid.svelte';
+export type { FlexibleGridCell, FlexibleGridRow, FlexibleGridProps } from '../../types/index.js';

package/dist/components/FlexibleGrid/index.js

@@ -0,0 +1 @@
+export { default as FlexibleGrid } from './FlexibleGrid.svelte';