sveltacular 0.0.76 → 1.0.0

package/dist/placeholders/loading.svelte.d.ts

@@ -1,18 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        type?: "block" | "spinner" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+import type { ComponentSize } from '../types/size.js';
+type $$ComponentProps = {
+    type?: 'spinner' | 'block';
+    spinnerSize?: ComponentSize;
+    spinnerVariant?: 'primary' | 'secondary';
+    children?: Snippet;
 };
-export type LoadingProps = typeof __propDef.props;
-export type LoadingEvents = typeof __propDef.events;
-export type LoadingSlots = typeof __propDef.slots;
-export default class Loading extends SvelteComponent<LoadingProps, LoadingEvents, LoadingSlots> {
-}
-export {};
+declare const Loading: import("svelte").Component<$$ComponentProps, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/placeholders/progress.svelte

@@ -1,4 +1,5 @@
-<script>export let value = 0;
+<script lang="ts">
+	let { value = 0 }: { value?: number } = $props(); // Value between 0 and 100
 </script>
 
 <div class="progress-bar" style="--progress-value: {value}%">
@@ -9,13 +10,13 @@
 
 <style>.progress-bar {
   height: 2rem;
-  background-color: var(--base-color-fg, #ccc);
+  background-color: var(--gray-200);
   border-radius: 1rem;
   margin-bottom: 1rem;
 }
 .progress-bar .progress {
   height: 100%;
-  background-color: var(--primary-color, #00a);
+  background-color: var(--color-info);
   color: white;
   border-radius: 1rem;
   transition: width 0.5s ease-in-out;
@@ -26,11 +27,11 @@
   justify-content: flex-end;
 }
 .progress-bar .progress-value {
-  color: var(--base-color-bg, #fff);
+  color: #ffffff;
   font-size: 1rem;
   font-family: var(--base-font-family, sans-serif);
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1.5rem;
   padding: 0 0.5rem;
-  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }</style>

package/dist/placeholders/progress.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    value?: number;
 };
-export type ProgressProps = typeof __propDef.props;
-export type ProgressEvents = typeof __propDef.events;
-export type ProgressSlots = typeof __propDef.slots;
-export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
-}
-export {};
+declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/placeholders/skeleton-input.svelte

@@ -1,45 +1,73 @@
-<script>import FlexItem from "../layout/flex-item.svelte";
-export let animation = "none";
+<script lang="ts">
+	import FlexItem from '../layout/flex-item.svelte';
+
+	let { animation = 'shimmer' }: { animation?: 'pulse' | 'shimmer' | 'none' } = $props();
 </script>
 
 <FlexItem>
-    <div class="box {animation}">
-        <div class="label"></div>
-        <div class="input"></div>
-    </div>
+	<div class="box">
+		<div class="label {animation}"></div>
+		<div class="input {animation}"></div>
+	</div>
 </FlexItem>
 
-<style>
-    div.pulse {
-        animation: pulse 2s infinite;
-    }
+<style>div.label {
+  height: 1rem;
+  background-color: var(--gray-200);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-base);
+  width: 35%;
+  position: relative;
+  overflow: hidden;
+}
+div.label.shimmer {
+  background: linear-gradient(90deg, var(--gray-200) 0%, var(--gray-300) 40%, var(--gray-200) 80%);
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+div.label.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
 
-	div.label {
-		height: 1rem;
-		background-color: var(--base-color-fg, #ccc);
-		opacity: 0.5;
-		border-radius: 1rem;
-		margin-bottom: 1rem;
-        width: 35%;
-	}
-    div.input {
-        height: 2rem;
-        width: 100%;
-        border: 1px solid var(--form-input-border, black);
-		background-color: var(--form-input-bg, white);
-        opacity: 0.7;
-        border-radius: 0.25rem;
-    }
+div.input {
+  height: 2.5rem;
+  width: 100%;
+  border: var(--border-thin) solid var(--gray-300);
+  background-color: var(--gray-100);
+  border-radius: var(--radius-md);
+  position: relative;
+  overflow: hidden;
+}
+div.input.shimmer {
+  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 40%, var(--gray-100) 80%);
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+div.input.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
 
-    @keyframes pulse {
-		0%,
-		100% {
-			opacity: 0.5;
-            scale: 0.99;
-		}
-		50% {
-			opacity: 1;
-            scale: 1;
-		}
-	}
-</style>
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+/* Respect prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  div.pulse,
+  div.shimmer {
+    animation: none;
+    opacity: 0.7;
+  }
+}</style>

package/dist/placeholders/skeleton-input.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        animation?: "none" | "pulse" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    animation?: 'pulse' | 'shimmer' | 'none';
 };
-export type SkeletonInputProps = typeof __propDef.props;
-export type SkeletonInputEvents = typeof __propDef.events;
-export type SkeletonInputSlots = typeof __propDef.slots;
-export default class SkeletonInput extends SvelteComponent<SkeletonInputProps, SkeletonInputEvents, SkeletonInputSlots> {
-}
-export {};
+declare const SkeletonInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonInput = ReturnType<typeof SkeletonInput>;
+export default SkeletonInput;

package/dist/placeholders/skeleton-paragraph.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { randomInt } from '../helpers/random.js';
+	import SkeletonText from './skeleton-text.svelte';
+
+	let {
+		minLines = 3,
+		maxLines = 5,
+		animation = 'shimmer'
+	}: {
+		minLines?: number;
+		maxLines?: number;
+		animation?: 'pulse' | 'shimmer' | 'none';
+	} = $props();
+
+	let lines = $derived(randomInt(minLines, maxLines));
+	let lineArray = $derived(Array.from({ length: lines }, (_, i) => i));
+</script>
+
+{#each lineArray as index}
+	<SkeletonText
+		{animation}
+		minWidth={index === lines - 1 ? 30 : 80}
+		maxWidth={index === lines - 1 ? 60 : 100}
+	/>
+{/each}

package/dist/placeholders/skeleton-paragraph.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    minLines?: number;
+    maxLines?: number;
+    animation?: 'pulse' | 'shimmer' | 'none';
+};
+declare const SkeletonParagraph: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonParagraph = ReturnType<typeof SkeletonParagraph>;
+export default SkeletonParagraph;

package/dist/placeholders/skeleton-table.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { randomInt } from '../helpers/random.js';
+
+	let {
+		columns = 4,
+		rows = 5,
+		animation = 'pulse' as 'pulse' | 'none'
+	}: {
+		columns?: number;
+		rows?: number;
+		animation?: 'pulse' | 'none';
+	} = $props();
+
+	let columnArray = $derived(Array.from({ length: columns }, (_, i) => i));
+	let rowArray = $derived(Array.from({ length: rows }, (_, i) => i));
+</script>
+
+<table class="skeleton-table">
+	<thead>
+		<tr>
+			{#each columnArray as _}
+				<th>
+					<div class="skeleton-cell {animation}" style="width: {randomInt(60, 90)}%"></div>
+				</th>
+			{/each}
+		</tr>
+	</thead>
+	<tbody>
+		{#each rowArray as _}
+			<tr>
+				{#each columnArray as _}
+					<td>
+						<div class="skeleton-cell {animation}" style="width: {randomInt(70, 100)}%"></div>
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>table.skeleton-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+table.skeleton-table th,
+table.skeleton-table td {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--table-row-border, #ddd);
+}
+table.skeleton-table thead th {
+  border-bottom: 2px solid var(--table-header-border, #333);
+}
+table.skeleton-table tbody tr:nth-child(even) {
+  background-color: var(--table-row-alt-bg, #f5f5f5);
+}
+
+.skeleton-cell {
+  height: 1rem;
+  background-color: var(--base-color-fg, #ccc);
+  opacity: 0.5;
+  border-radius: 1rem;
+}
+.skeleton-cell.pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}</style>
+

package/dist/placeholders/skeleton-table.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    columns?: number;
+    rows?: number;
+    animation?: 'pulse' | 'none';
+};
+declare const SkeletonTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonTable = ReturnType<typeof SkeletonTable>;
+export default SkeletonTable;

package/dist/placeholders/skeleton-text.svelte

@@ -1,29 +1,59 @@
-<script>import { randomInt } from "../helpers/random.js";
-export let min = 50;
-export let max = 100;
-export let animation = "none";
-$:
-  width = randomInt(min, max);
+<script lang="ts">
+	import { randomInt } from '../helpers/random.js';
+
+	let {
+		minWidth = 50,
+		maxWidth = 100,
+		animation = 'shimmer'
+	}: {
+		minWidth?: number;
+		maxWidth?: number;
+		animation?: 'pulse' | 'shimmer' | 'none';
+	} = $props();
+
+	let width = $derived(randomInt(minWidth, maxWidth));
 </script>
 
-<div class="{animation}" style="width: {width}%" />
+<div class="skeleton {animation}" style="width: {width}%"></div>
 
-<style>div {
+<style>.skeleton {
   height: 1rem;
-  background-color: var(--base-color-fg, #ccc);
-  opacity: 0.5;
-  border-radius: 1rem;
-  margin-bottom: 1rem;
+  background-color: var(--gray-200);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-base);
+  position: relative;
+  overflow: hidden;
+}
+.skeleton.pulse {
+  animation: pulse 2s ease-in-out infinite;
 }
-div.pulse {
-  animation: pulse 2s infinite;
+.skeleton.shimmer {
+  background: linear-gradient(90deg, var(--gray-200) 0%, var(--gray-300) 40%, var(--gray-200) 80%);
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
 }
 
 @keyframes pulse {
   0%, 100% {
-    opacity: 0.5;
+    opacity: 1;
   }
   50% {
-    opacity: 1;
+    opacity: 0.5;
+  }
+}
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+/* Respect prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton.pulse,
+  .skeleton.shimmer {
+    animation: none;
+    opacity: 0.7;
   }
 }</style>

package/dist/placeholders/skeleton-text.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        min?: number | undefined;
-        max?: number | undefined;
-        animation?: "none" | "pulse" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    minWidth?: number;
+    maxWidth?: number;
+    animation?: 'pulse' | 'shimmer' | 'none';
 };
-export type SkeletonTextProps = typeof __propDef.props;
-export type SkeletonTextEvents = typeof __propDef.events;
-export type SkeletonTextSlots = typeof __propDef.slots;
-export default class SkeletonText extends SvelteComponent<SkeletonTextProps, SkeletonTextEvents, SkeletonTextSlots> {
-}
-export {};
+declare const SkeletonText: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonText = ReturnType<typeof SkeletonText>;
+export default SkeletonText;

package/dist/tables/cell-renderers.d.ts

@@ -0,0 +1,24 @@
+import type { JsonObject, ColumnDef, TextColumn, NumberColumn, CurrencyColumn, DateColumn, DateTimeColumn, BooleanColumn, EmailColumn, CustomColumn } from '../types/data.js';
+export interface CellRenderContext<T extends JsonObject = JsonObject> {
+    row: T;
+    column: ColumnDef<T>;
+    value: unknown;
+    rowIndex: number;
+}
+export declare function getCellValue<T extends JsonObject>(row: T, key: string): unknown;
+export declare function isNullish(value: unknown): value is null | undefined;
+export declare function isEmpty(value: unknown): boolean;
+export declare function formatTextCell<T extends JsonObject>(row: T, column: TextColumn<T>): string;
+export declare function formatNumberCell<T extends JsonObject>(row: T, column: NumberColumn<T>): string;
+export declare function formatCurrencyCell<T extends JsonObject>(row: T, column: CurrencyColumn<T>): string;
+export declare function formatDateCell<T extends JsonObject>(row: T, column: DateColumn<T>): string;
+export declare function formatDateTimeCell<T extends JsonObject>(row: T, column: DateTimeColumn<T>): string;
+export declare function formatBooleanCell<T extends JsonObject>(row: T, column: BooleanColumn<T>): string;
+export declare function formatEmailCell<T extends JsonObject>(row: T, column: EmailColumn<T>): string;
+export declare function formatCustomCell<T extends JsonObject>(row: T, column: CustomColumn<T>): string;
+export declare function formatCell<T extends JsonObject>(row: T, column: ColumnDef<T>): string;
+export declare function getCellLink<T extends JsonObject>(row: T, column: ColumnDef<T>): string | null;
+export declare function getCellAlignment<T extends JsonObject>(column: ColumnDef<T>): 'left' | 'center' | 'right';
+export declare function getCellTypeClass<T extends JsonObject>(column: ColumnDef<T>): string;
+export declare function compareValues(a: unknown, b: unknown, direction: 'asc' | 'desc'): number;
+export declare function sortRows<T extends JsonObject>(rows: T[], column: ColumnDef<T>, direction: 'asc' | 'desc'): T[];