@aspect-ops/exon-ui 0.3.0 → 0.4.1

package/README.md

@@ -1202,51 +1202,6 @@ Pure SVG doughnut chart with interactive legend (no external dependencies).
 | `showLegend` | `boolean`  | `true`          | Show legend               |
 | `showTotal`  | `boolean`  | `true`          | Show center total         |
 
-### Mermaid
-
-Render Mermaid diagrams with customizable theming.
-
-**Note:** Requires `mermaid` package: `npm install mermaid`
-
-```svelte
-<script>
-	import { Mermaid } from '@aspect-ops/exon-ui';
-
-	const diagram = `flowchart TD
-    A[Start] --> B{Decision}
-    B -->|Yes| C[Action 1]
-    B -->|No| D[Action 2]
-    C --> E[End]
-    D --> E`;
-</script>
-
-<!-- Using code prop -->
-<Mermaid code={diagram} />
-
-<!-- Using slot -->
-<Mermaid>flowchart LR A --> B --> C</Mermaid>
-```
-
-**Props:**
-
-| Prop    | Type     | Default       | Description            |
-| ------- | -------- | ------------- | ---------------------- |
-| `code`  | `string` | -             | Mermaid diagram code   |
-| `theme` | `object` | ExonPro theme | Custom theme variables |
-
-**Theme variables:**
-
-```javascript
-const theme = {
-	primaryColor: '#4654A3',
-	primaryTextColor: '#270949',
-	primaryBorderColor: '#4654A3',
-	lineColor: '#270949',
-	secondaryColor: '#FF3131',
-	tertiaryColor: '#f3f4f6'
-};
-```
-
 ## Theming & Customization
 
 ### Quick Setup

package/dist/components/BottomNav/BottomNavItem.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { BottomNavItemProps } from '../../types/index.js';
 
-	interface Props extends BottomNavItemProps {
+	interface Props extends Omit<BottomNavItemProps, 'icon'> {
+		icon: import('svelte').Snippet;
 		onclick?: () => void;
 		children?: import('svelte').Snippet;
 	}
@@ -25,7 +26,7 @@
 		class:bottom-nav-item--active={active}
 		aria-current={active ? 'page' : undefined}
 	>
-		<span class="bottom-nav-item__icon">{icon}</span>
+		<span class="bottom-nav-item__icon">{@render icon()}</span>
 		{#if children}
 			<span class="bottom-nav-item__label">{@render children()}</span>
 		{:else}
@@ -45,7 +46,7 @@
 		aria-current={active ? 'page' : undefined}
 		{onclick}
 	>
-		<span class="bottom-nav-item__icon">{icon}</span>
+		<span class="bottom-nav-item__icon">{@render icon()}</span>
 		{#if children}
 			<span class="bottom-nav-item__label">{@render children()}</span>
 		{:else}

package/dist/components/BottomNav/BottomNavItem.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { BottomNavItemProps } from '../../types/index.js';
-interface Props extends BottomNavItemProps {
+interface Props extends Omit<BottomNavItemProps, 'icon'> {
+    icon: import('svelte').Snippet;
     onclick?: () => void;
     children?: import('svelte').Snippet;
 }

package/dist/components/DoughnutChart/DoughnutChart.svelte

@@ -49,6 +49,10 @@
 	// Calculate total
 	const total = $derived(data.reduce((sum, item) => sum + item.value, 0));
 
+	// Calculate inner radius for doughnut (must be before arcs)
+	const innerRadius = $derived((size / 2 - 10) * (1 - thickness));
+	const outerRadius = $derived(size / 2 - 10);
+
 	// Calculate arc data
 	interface ArcData extends DataItem {
 		percentage: number;
@@ -87,10 +91,6 @@
 		return result;
 	});
 
-	// Calculate inner radius for doughnut
-	const innerRadius = $derived((size / 2 - 10) * (1 - thickness));
-	const outerRadius = $derived(size / 2 - 10);
-
 	// Helper to convert polar to cartesian coordinates
 	function polarToCartesian(
 		centerX: number,

package/dist/components/FlexibleGrid/FlexibleGrid.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type {
+		SpacingToken,
+		FlexibleGridCell,
+		FlexibleGridRow,
+		FlexibleGridProps
+	} from '../../types/index.js';
+
+	interface Props extends Omit<FlexibleGridProps, 'children'> {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		rows,
+		gap = 'xs', // Use design token by default
+		cellHeight = '80px',
+		defaultBgColor = '#6B7A99',
+		defaultTextColor = 'white',
+		columns = 12,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Convert SpacingToken to CSS value if needed
+	const getGapValue = (gapValue: SpacingToken | string): string => {
+		const spacingMap: Record<SpacingToken, string> = {
+			xs: 'var(--space-xs, 0.25rem)',
+			sm: 'var(--space-sm, 0.5rem)',
+			md: 'var(--space-md, 1rem)',
+			lg: 'var(--space-lg, 1.5rem)',
+			xl: 'var(--space-xl, 2rem)',
+			'2xl': 'var(--space-2xl, 3rem)',
+			'3xl': 'var(--space-3xl, 4rem)'
+		};
+		return spacingMap[gapValue as SpacingToken] || gapValue;
+	};
+</script>
+
+<div class="flexible-grid {className}" style="gap: {getGapValue(gap)};">
+	{#each rows as row, rowIndex}
+		<div
+			class="grid-row {row.class || ''}"
+			style="gap: {getGapValue(gap)}; grid-template-columns: repeat({columns}, 1fr);"
+		>
+			{#each row.cells as cell, cellIndex}
+				<div
+					class="grid-cell {cell.class || ''}"
+					style="
+						grid-column: span {cell.span};
+						height: {cellHeight};
+						background-color: {cell.bgColor || defaultBgColor};
+						color: {cell.textColor || defaultTextColor};
+					"
+				>
+					{@html cell.content}
+				</div>
+			{/each}
+		</div>
+	{/each}
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.flexible-grid {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		background-color: transparent;
+		font-family: inherit;
+	}
+
+	.grid-row {
+		display: grid;
+		width: 100%;
+	}
+
+	.grid-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 2rem;
+		font-weight: 600;
+		border-radius: 4px;
+		transition: transform 0.2s ease;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.grid-cell:hover {
+		transform: scale(1.02);
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 768px) {
+		.grid-cell {
+			font-size: 1.5rem;
+			min-height: 60px;
+		}
+	}
+
+	@media (max-width: 480px) {
+		.grid-cell {
+			font-size: 1rem;
+			min-height: 50px;
+		}
+
+		.grid-row {
+			grid-template-columns: repeat(6, 1fr) !important;
+		}
+
+		.grid-cell {
+			/* On mobile, adjust span to fit 6 columns */
+			grid-column: span min(6, attr(data-span integer, 1)) !important;
+		}
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { FlexibleGridProps } from '../../types/index.js';
+interface Props extends Omit<FlexibleGridProps, 'children'> {
+    children?: import('svelte').Snippet;
+}
+declare const FlexibleGrid: import("svelte").Component<Props, {}, "">;
+type FlexibleGrid = ReturnType<typeof FlexibleGrid>;
+export default FlexibleGrid;

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';