bref-ui 0.0.11 → 0.0.12

package/README.md

@@ -55,25 +55,29 @@ Bref handles:
 
 ## Base Components
 
-- [ ] Icon
-- [ ] Button
-- [ ] Icon Button
+- [x] Icon
+- [x] Button
+- [x] Icon Button
+- [x] Loading
+  - [x] Circular
+  - [x] Pulsing Dots
+  - [x] Morphing Shapes
+  - [x] Textual
 - [ ] Input
 - [ ] Textarea
+- [ ] Avatar
+- [ ] Progress
 - [ ] Select
+- [ ] Slider
+- [ ] Skeleton
 - [ ] Checkbox
+- [ ] Badge
+- [ ] Popover
 - [ ] Radio
 - [ ] Switch
-- [ ] Avatar
 - [ ] Img
-- [ ] Icon
-- [ ] Progress
 - [ ] Meter
-- [ ] Skeleton
-- [ ] Spinner
-- [ ] Badge
 - [ ] Tooltip
-- [ ] Popover
 - [ ] Dialog
 
 ## Section Components

package/dist/base/button/index.d.ts

@@ -1,3 +1,2 @@
 export { default as IconButton } from './icon-button.svelte';
 export { default as Button } from './button.svelte';
-export * from './types.ts';

package/dist/base/button/index.js

@@ -1,3 +1,2 @@
 export { default as IconButton } from './icon-button.svelte';
 export { default as Button } from './button.svelte';
-export * from "./types.js";

package/dist/base/index.d.ts

@@ -2,3 +2,4 @@ export * from './types.ts';
 export * from './icon/index.ts';
 export * from './theme/index.ts';
 export * from './button/index.ts';
+export * from './loading/index.ts';

package/dist/base/index.js

@@ -2,3 +2,4 @@ export * from "./types.js";
 export * from "./icon/index.js";
 export * from "./theme/index.js";
 export * from "./button/index.js";
+export * from "./loading/index.js";

package/dist/base/loading/circular-loading.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { LoadingProps } from './types.js';
+
+	const { size = 'medium', color = 'primary' }: LoadingProps = $props();
+</script>
+
+<div class={`${size} ${color}`} role="status" aria-label="Loading"></div>
+
+<style>
+	div {
+		--internal-loader-size: 2rem;
+		--internal-loader-border-width: 3px;
+
+		width: var(--internal-loader-size);
+		height: var(--internal-loader-size);
+		border-radius: 50%;
+		border: var(--internal-loader-border-width) solid transparent;
+		border-top-color: var(--internal-current-color);
+		animation: spin 0.9s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Sizes */
+	.x-small {
+		--internal-loader-size: 1rem;
+		--internal-loader-border-width: 2px;
+	}
+
+	.small {
+		--internal-loader-size: 1.5rem;
+		--internal-loader-border-width: 2px;
+	}
+
+	.medium {
+		--internal-loader-size: 2rem;
+		--internal-loader-border-width: 3px;
+	}
+
+	.large {
+		--internal-loader-size: 2.5rem;
+		--internal-loader-border-width: 3px;
+	}
+
+	.x-large {
+		--internal-loader-size: 3rem;
+		--internal-loader-border-width: 4px;
+	}
+
+	/* Color mappings */
+	.primary {
+		--internal-current-color: var(--color-primary);
+		--internal-current-color-soft: var(--color-primary-soft);
+	}
+
+	.secondary {
+		--internal-current-color: var(--color-secondary);
+		--internal-current-color-soft: var(--color-secondary-soft);
+	}
+
+	.success {
+		--internal-current-color: var(--color-success);
+		--internal-current-color-soft: var(--color-success-soft);
+	}
+
+	.warning {
+		--internal-current-color: var(--color-warning);
+		--internal-current-color-soft: var(--color-warning-soft);
+	}
+
+	.danger {
+		--internal-current-color: var(--color-danger);
+		--internal-current-color-soft: var(--color-danger-soft);
+	}
+
+	.info {
+		--internal-current-color: var(--color-info);
+		--internal-current-color-soft: var(--color-info-soft);
+	}
+
+	.foreground {
+		--internal-current-color: var(--color-foreground);
+		--internal-current-color-soft: var(--color-foreground-soft);
+	}
+
+	.background {
+		--internal-current-color: var(--color-background);
+		--internal-current-color-soft: var(--color-background-soft);
+	}
+</style>

package/dist/base/loading/circular-loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LoadingProps } from './types.ts';
+declare const CircularLoading: import("svelte").Component<LoadingProps, {}, "">;
+type CircularLoading = ReturnType<typeof CircularLoading>;
+export default CircularLoading;

package/dist/base/loading/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CircularLoading } from './circular-loading.svelte';
+export { default as PulsingDotsLoading } from './pulsing-dots-loading.svelte';
+export { default as MorphingShapesLoading } from './morphing-shapes-loading.svelte';
+export { default as TextualLoading } from './textual-loading.svelte';

package/dist/base/loading/index.js

@@ -0,0 +1,4 @@
+export { default as CircularLoading } from './circular-loading.svelte';
+export { default as PulsingDotsLoading } from './pulsing-dots-loading.svelte';
+export { default as MorphingShapesLoading } from './morphing-shapes-loading.svelte';
+export { default as TextualLoading } from './textual-loading.svelte';

package/dist/base/loading/morphing-shapes-loading.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { LoadingProps } from './types.js';
+
+	const { size = 'medium', color = 'primary' }: LoadingProps = $props();
+</script>
+
+<div class={`${size} ${color}`} role="status" aria-label="Loading">
+	<div class="shape"></div>
+</div>
+
+<style>
+	div {
+		--internal-shape-size: 2rem;
+		width: var(--internal-shape-size);
+		height: var(--internal-shape-size);
+	}
+
+	.shape {
+		width: 100%;
+		height: 100%;
+		background-color: var(--internal-current-color);
+		animation:
+			morph 4s ease-in-out infinite,
+			rotate 8s linear infinite;
+	}
+
+	@keyframes morph {
+		0% {
+			/* Circle */
+			border-radius: 50%;
+			corner-shape: round;
+		}
+		14% {
+			/* Squircle */
+			border-radius: 35%;
+			corner-shape: squircle;
+		}
+		28% {
+			/* Blob with bevel corners */
+			border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+			corner-shape: bevel;
+		}
+		42% {
+			/* Scoop corners */
+			border-radius: 40%;
+			corner-shape: scoop;
+		}
+		57% {
+			/* Organic blob */
+			border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
+			corner-shape: round;
+		}
+		71% {
+			/* Notched */
+			border-radius: 30%;
+			corner-shape: notch;
+		}
+		85% {
+			/* Another blob with squircle */
+			border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
+			corner-shape: squircle;
+		}
+		100% {
+			/* Back to circle */
+			border-radius: 50%;
+			corner-shape: round;
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Sizes */
+	.x-small {
+		--internal-shape-size: 1rem;
+	}
+
+	.small {
+		--internal-shape-size: 1.5rem;
+	}
+
+	.medium {
+		--internal-shape-size: 2rem;
+	}
+
+	.large {
+		--internal-shape-size: 2.5rem;
+	}
+
+	.x-large {
+		--internal-shape-size: 3rem;
+	}
+
+	/* Color mappings */
+	.primary {
+		--internal-current-color: var(--color-primary);
+	}
+
+	.secondary {
+		--internal-current-color: var(--color-secondary);
+	}
+
+	.success {
+		--internal-current-color: var(--color-success);
+	}
+
+	.warning {
+		--internal-current-color: var(--color-warning);
+	}
+
+	.danger {
+		--internal-current-color: var(--color-danger);
+	}
+
+	.info {
+		--internal-current-color: var(--color-info);
+	}
+
+	.foreground {
+		--internal-current-color: var(--color-foreground);
+	}
+
+	.background {
+		--internal-current-color: var(--color-background);
+	}
+</style>

package/dist/base/loading/morphing-shapes-loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LoadingProps } from './types.ts';
+declare const MorphingShapesLoading: import("svelte").Component<LoadingProps, {}, "">;
+type MorphingShapesLoading = ReturnType<typeof MorphingShapesLoading>;
+export default MorphingShapesLoading;

package/dist/base/loading/pulsing-dots-loading.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { LoadingProps } from './types.js';
+
+	const { size = 'medium', color = 'primary' }: LoadingProps = $props();
+</script>
+
+<div class={`${size} ${color}`} role="status" aria-label="Loading">
+	<span></span>
+	<span></span>
+	<span></span>
+</div>
+
+<style>
+	div {
+		--internal-dot-size: 0.5rem;
+		--internal-gap: 0.375rem;
+
+		display: flex;
+		align-items: center;
+		gap: var(--internal-gap);
+	}
+
+	span {
+		width: var(--internal-dot-size);
+		height: var(--internal-dot-size);
+		border-radius: 50%;
+		background-color: var(--internal-current-color);
+		animation: pulse 1.4s ease-in-out infinite;
+	}
+
+	span:nth-child(1) {
+		animation-delay: 0s;
+	}
+
+	span:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+
+	span:nth-child(3) {
+		animation-delay: 0.4s;
+	}
+
+	@keyframes pulse {
+		0%,
+		80%,
+		100% {
+			opacity: 0.3;
+			transform: scale(0.8);
+		}
+		40% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	/* Sizes */
+	.x-small {
+		--internal-dot-size: 0.25rem;
+		--internal-gap: 0.2rem;
+	}
+
+	.small {
+		--internal-dot-size: 0.375rem;
+		--internal-gap: 0.25rem;
+	}
+
+	.medium {
+		--internal-dot-size: 0.5rem;
+		--internal-gap: 0.375rem;
+	}
+
+	.large {
+		--internal-dot-size: 0.625rem;
+		--internal-gap: 0.5rem;
+	}
+
+	.x-large {
+		--internal-dot-size: 0.75rem;
+		--internal-gap: 0.5rem;
+	}
+
+	/* Color mappings */
+	.primary {
+		--internal-current-color: var(--color-primary);
+	}
+
+	.secondary {
+		--internal-current-color: var(--color-secondary);
+	}
+
+	.success {
+		--internal-current-color: var(--color-success);
+	}
+
+	.warning {
+		--internal-current-color: var(--color-warning);
+	}
+
+	.danger {
+		--internal-current-color: var(--color-danger);
+	}
+
+	.info {
+		--internal-current-color: var(--color-info);
+	}
+
+	.foreground {
+		--internal-current-color: var(--color-foreground);
+	}
+
+	.background {
+		--internal-current-color: var(--color-background);
+	}
+</style>

package/dist/base/loading/pulsing-dots-loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LoadingProps } from './types.ts';
+declare const PulsingDotsLoading: import("svelte").Component<LoadingProps, {}, "">;
+type PulsingDotsLoading = ReturnType<typeof PulsingDotsLoading>;
+export default PulsingDotsLoading;

package/dist/base/loading/textual-loading.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import type { TextualLoadingProps } from './types.js';
+
+	const DEFAULT_WORDS = [
+		'Thinking',
+		'Brewing',
+		'Conjuring',
+		'Pondering',
+		'Crunching',
+		'Fetching',
+		'Spinning',
+		'Warming',
+		'Polishing',
+		'Shuffling',
+		'Wiggling',
+		'Stretching',
+		'Juggling',
+		'Wrangling',
+		'Herding',
+		'Tickling',
+		'Poking',
+		'Nudging',
+		'Summoning',
+		'Manifesting'
+	];
+
+	const {
+		size = 'medium',
+		color = 'primary',
+		words = DEFAULT_WORDS,
+		hideDots = false,
+		typeSpeed = 'normal',
+		pauseSpeed = 'normal'
+	}: TextualLoadingProps = $props();
+
+	const TYPE_MS = { slow: 100, normal: 50, fast: 25 } as const;
+	const PAUSE_MS = { slow: 800, normal: 500, fast: 300 } as const;
+
+	let leftPart = $state('');
+	let rightPart = $state('');
+	let showCursor = $state(true);
+
+	const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+	const typeWord = async (word: string, prev: string) => {
+		const target = hideDots ? word : word + '...';
+		const maxLen = Math.max(target.length, prev.length);
+		const ms = TYPE_MS[typeSpeed];
+
+		for (let i = 0; i <= maxLen; i++) {
+			leftPart = target.slice(0, i);
+			rightPart = prev.slice(i + 1);
+			await sleep(ms);
+		}
+
+		leftPart = target;
+		rightPart = '';
+	};
+
+	$effect(() => {
+		let cancelled = false;
+
+		const animate = async () => {
+			let index = 0;
+			let prev = '';
+
+			while (!cancelled) {
+				const word = words[index];
+
+				showCursor = true;
+				await typeWord(word, prev);
+
+				await sleep(TYPE_MS[typeSpeed]);
+				showCursor = false;
+
+				await sleep(PAUSE_MS[pauseSpeed]);
+
+				prev = hideDots ? word : word + '...';
+				index = (index + 1) % words.length;
+			}
+		};
+
+		animate();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+</script>
+
+<span class={`${size} ${color}`} role="status" aria-label="Loading">
+	{leftPart}{#if showCursor}<span class="cursor">▌</span>{/if}{rightPart}
+</span>
+
+<style>
+	span {
+		--internal-font-size: 1rem;
+
+		font-size: var(--internal-font-size);
+		color: var(--internal-current-color);
+		font-weight: 500;
+	}
+
+	.cursor {
+		animation: blink 0.7s step-end infinite;
+	}
+
+	@keyframes blink {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+	}
+
+	/* Sizes */
+	.x-small {
+		--internal-font-size: 0.75rem;
+	}
+
+	.small {
+		--internal-font-size: 0.875rem;
+	}
+
+	.medium {
+		--internal-font-size: 1rem;
+	}
+
+	.large {
+		--internal-font-size: 1.125rem;
+	}
+
+	.x-large {
+		--internal-font-size: 1.25rem;
+	}
+
+	/* Color mappings */
+	.primary {
+		--internal-current-color: var(--color-primary);
+	}
+
+	.secondary {
+		--internal-current-color: var(--color-secondary);
+	}
+
+	.success {
+		--internal-current-color: var(--color-success);
+	}
+
+	.warning {
+		--internal-current-color: var(--color-warning);
+	}
+
+	.danger {
+		--internal-current-color: var(--color-danger);
+	}
+
+	.info {
+		--internal-current-color: var(--color-info);
+	}
+
+	.foreground {
+		--internal-current-color: var(--color-foreground);
+	}
+
+	.background {
+		--internal-current-color: var(--color-background);
+	}
+</style>

package/dist/base/loading/textual-loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TextualLoadingProps } from './types.ts';
+declare const TextualLoading: import("svelte").Component<TextualLoadingProps, {}, "">;
+type TextualLoading = ReturnType<typeof TextualLoading>;
+export default TextualLoading;

package/dist/base/loading/types.d.ts

@@ -0,0 +1,11 @@
+import type { Color, Size, Speed } from '../types.ts';
+export interface LoadingProps {
+    size?: Size;
+    color?: Color;
+}
+export interface TextualLoadingProps extends LoadingProps {
+    words?: string[];
+    hideDots?: boolean;
+    typeSpeed?: Speed;
+    pauseSpeed?: Speed;
+}

package/dist/base/loading/types.js

@@ -0,0 +1 @@
+export {};

package/dist/base/types.d.ts

@@ -1,3 +1,4 @@
 export type Size = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 export type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'foreground' | 'background';
 export type Variant = 'filled' | 'soft' | 'ghost';
+export type Speed = 'slow' | 'normal' | 'fast';

package/dist/internal/demo-loading.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import CircularLoading from '../base/loading/circular-loading.svelte';
+	import PulsingDotsLoading from '../base/loading/pulsing-dots-loading.svelte';
+	import MorphingShapesLoading from '../base/loading/morphing-shapes-loading.svelte';
+	import TextualLoading from '../base/loading/textual-loading.svelte';
+	import DemoSection from './demo-section.svelte';
+	import DemoCodeSnippet from './demo-code-snippet.svelte';
+</script>
+
+<DemoSection
+	title="Loading"
+	id="loading"
+	description="Loading indicators with multiple styles: circular spinner, pulsing dots, morphing shapes, and textual."
+>
+	<h3>Circular Loading</h3>
+	<div>
+		<CircularLoading size="x-small" />
+		<CircularLoading size="small" />
+		<CircularLoading size="medium" />
+		<CircularLoading size="large" />
+		<CircularLoading size="x-large" />
+	</div>
+	<h3>Pulsing Dots Loading</h3>
+	<div>
+		<PulsingDotsLoading size="x-small" />
+		<PulsingDotsLoading size="small" />
+		<PulsingDotsLoading size="medium" />
+		<PulsingDotsLoading size="large" />
+		<PulsingDotsLoading size="x-large" />
+	</div>
+	<h3>Morphing Shapes Loading</h3>
+	<div>
+		<MorphingShapesLoading size="x-small" />
+		<MorphingShapesLoading size="small" />
+		<MorphingShapesLoading size="medium" />
+		<MorphingShapesLoading size="large" />
+		<MorphingShapesLoading size="x-large" />
+	</div>
+	<h3>Textual Loading</h3>
+	<div class="textual">
+		<TextualLoading />
+		<TextualLoading words={['Thinking', 'Processing', 'Generating']} />
+		<TextualLoading words={['Please wait', 'Wait please']} hideDots />
+		<TextualLoading words={['Ready', 'Set', 'Go']} pauseSpeed="slow" typeSpeed="slow" />
+	</div>
+	<h3>Colors</h3>
+	<div>
+		<CircularLoading color="primary" />
+		<CircularLoading color="secondary" />
+		<CircularLoading color="success" />
+		<CircularLoading color="warning" />
+		<CircularLoading color="danger" />
+		<CircularLoading color="info" />
+	</div>
+	<div>
+		<PulsingDotsLoading color="primary" />
+		<PulsingDotsLoading color="secondary" />
+		<PulsingDotsLoading color="success" />
+		<PulsingDotsLoading color="warning" />
+		<PulsingDotsLoading color="danger" />
+		<PulsingDotsLoading color="info" />
+	</div>
+	<h3>Usage Example</h3>
+	<DemoCodeSnippet
+		snippet={`<CircularLoading size="medium" color="primary" />
+
+<PulsingDotsLoading size="small" color="info" />
+
+<MorphingShapesLoading size="large" color="success" />
+
+<!-- Uses 20 fun default words -->
+<TextualLoading />
+
+<!-- Custom words -->
+<TextualLoading
+  words={['Thinking', 'Processing']}
+  typeSpeed="fast"
+  pauseSpeed="slow"
+/>`}
+	/>
+</DemoSection>
+
+<style>
+	div {
+		display: flex;
+		gap: 1.5rem;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+
+	.textual {
+		flex-direction: column;
+	}
+</style>

package/dist/internal/demo-loading.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DemoLoading: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DemoLoading = InstanceType<typeof DemoLoading>;
+export default DemoLoading;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "0.0.11",
+	"version": "0.0.12",
 	"description": "A truly Svelte-esque UI component library - minimal, flexible, pure CSS, no Tailwind",
 	"license": "MIT",
 	"author": "feuerstein",