bref-ui 0.3.0 → 2.0.0

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

@@ -1,115 +0,0 @@
-<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);
-		flex-shrink: 0;
-	}
-
-	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

@@ -1,4 +0,0 @@
-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

@@ -1,179 +0,0 @@
-<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;
-		--internal-height: 1.5rem;
-		flex-shrink: 0;
-		font-size: var(--internal-font-size);
-		line-height: var(--internal-height);
-		max-height: var(--internal-height);
-		color: var(--internal-current-color);
-		font-weight: 500;
-	}
-
-	.cursor {
-		animation: blink 0.8s step-end infinite;
-	}
-
-	@keyframes blink {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0;
-		}
-	}
-
-	/* Sizes */
-	.x-small {
-		--internal-font-size: 0.75rem;
-		--internal-height: 1.125rem;
-	}
-
-	.small {
-		--internal-font-size: 0.875rem;
-		--internal-height: 1.3125rem;
-	}
-
-	.medium {
-		--internal-font-size: 1rem;
-		--internal-height: 1.5rem;
-	}
-
-	.large {
-		--internal-font-size: 1.125rem;
-		--internal-height: 1.6875rem;
-	}
-
-	.x-large {
-		--internal-font-size: 1.25rem;
-		--internal-height: 1.875rem;
-	}
-
-	/* 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

@@ -1,4 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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;
-}
-export interface MorphingShapesLoadingProps extends LoadingProps {
-    speed?: Speed;
-    isGradient?: boolean;
-    pulseShadow?: boolean;
-}

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

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

package/dist/base/pill/index.js

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

package/dist/base/pill/pill.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { PillProps } from './types.js';
-	import Icon from '../icon/icon.svelte';
-
-	const {
-		label,
-		size = 'medium',
-		color = 'primary',
-		variant = 'filled',
-		icon
-	}: PillProps = $props();
-</script>
-
-<div class={`${size} ${color} ${variant}`}>
-	{#if icon}
-		<Icon contrastMode={variant === 'filled'} {color} {...icon} {size} />
-	{/if}
-	<span>{label}</span>
-</div>
-
-<style>
-	div {
-		/* Size defaults (medium) */
-		--internal-pill-padding-y: calc(var(--spacing) * 0.375);
-		--internal-pill-padding-x: calc(var(--spacing) * 0.75);
-		--internal-pill-font-size: 1rem;
-
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border: none;
-		flex-shrink: 0;
-		width: fit-content;
-		min-width: fit-content;
-		height: fit-content;
-		min-height: fit-content;
-		gap: 0.35em;
-		padding: var(--internal-pill-padding-y) var(--internal-pill-padding-x);
-		font-size: var(--internal-pill-font-size);
-		border-radius: 4rem;
-	}
-
-	span {
-		white-space: nowrap;
-		color: inherit;
-	}
-
-	/* Sizes - compact padding that scales proportionally */
-	.x-small {
-		--internal-pill-padding-y: calc(var(--spacing) * 0.125);
-		--internal-pill-padding-x: calc(var(--spacing) * 0.375);
-		--internal-pill-font-size: 0.75rem;
-	}
-
-	.small {
-		--internal-pill-padding-y: calc(var(--spacing) * 0.25);
-		--internal-pill-padding-x: calc(var(--spacing) * 0.5);
-		--internal-pill-font-size: 0.875rem;
-	}
-
-	.medium {
-		--internal-pill-padding-y: calc(var(--spacing) * 0.375);
-		--internal-pill-padding-x: calc(var(--spacing) * 0.75);
-		--internal-pill-font-size: 1rem;
-	}
-
-	.large {
-		--internal-pill-padding-y: calc(var(--spacing) * 0.5);
-		--internal-pill-padding-x: calc(var(--spacing) * 1);
-		--internal-pill-font-size: 1.125rem;
-	}
-
-	.x-large {
-		--internal-pill-padding-y: calc(var(--spacing) * 0.625);
-		--internal-pill-padding-x: calc(var(--spacing) * 1.25);
-		--internal-pill-font-size: 1.25rem;
-	}
-
-	/* Color mappings - set current color variables per color class */
-	.primary {
-		--internal-current-color: var(--color-primary);
-		--internal-current-color-soft: var(--color-primary-soft);
-		--internal-current-contrast: var(--color-primary-contrast);
-	}
-
-	.secondary {
-		--internal-current-color: var(--color-secondary);
-		--internal-current-color-soft: var(--color-secondary-soft);
-		--internal-current-contrast: var(--color-secondary-contrast);
-	}
-
-	.success {
-		--internal-current-color: var(--color-success);
-		--internal-current-color-soft: var(--color-success-soft);
-		--internal-current-contrast: var(--color-success-contrast);
-	}
-
-	.warning {
-		--internal-current-color: var(--color-warning);
-		--internal-current-color-soft: var(--color-warning-soft);
-		--internal-current-contrast: var(--color-warning-contrast);
-	}
-
-	.danger {
-		--internal-current-color: var(--color-danger);
-		--internal-current-color-soft: var(--color-danger-soft);
-		--internal-current-contrast: var(--color-danger-contrast);
-	}
-
-	.info {
-		--internal-current-color: var(--color-info);
-		--internal-current-color-soft: var(--color-info-soft);
-		--internal-current-contrast: var(--color-info-contrast);
-	}
-
-	.foreground {
-		--internal-current-color: var(--color-foreground);
-		--internal-current-color-soft: var(--color-background-saturated);
-		--internal-current-contrast: var(--color-background);
-	}
-
-	.background {
-		--internal-current-color: var(--color-background);
-		--internal-current-color-soft: var(--color-foreground-saturated);
-		--internal-current-contrast: var(--color-foreground);
-	}
-
-	/* Filled variant */
-	.filled {
-		background-color: var(--internal-current-color);
-		color: var(--internal-current-contrast);
-	}
-
-	/* Soft variant */
-	.soft {
-		background-color: var(--internal-current-color-soft);
-		color: var(--internal-current-color);
-	}
-
-	/* Ghost variant */
-	.ghost {
-		background-color: transparent;
-		color: var(--internal-current-color);
-	}
-</style>

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

@@ -1,9 +0,0 @@
-import type { IconProps } from '../icon/types.ts';
-import type { Color, Size, Variant } from '../types.ts';
-export interface PillProps {
-    label: string;
-    size?: Size;
-    color?: Color;
-    variant?: Variant;
-    icon?: Pick<IconProps, 'name' | 'filled' | 'ariaLabel'>;
-}

package/dist/base/progress-bar/index.d.ts

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

package/dist/base/progress-bar/index.js

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

package/dist/base/progress-bar/progress-bar.svelte

@@ -1,174 +0,0 @@
-<script lang="ts">
-	import type { ProgressBarProps } from './types.js';
-
-	const {
-		value,
-		size = 'medium',
-		color = 'primary',
-		wide = false,
-		animateValue = false,
-		onValueClick
-	}: ProgressBarProps = $props();
-
-	const isIndeterminate = $derived(value === undefined);
-	const progressWidth = $derived(
-		value === undefined ? undefined : `${Math.min(100, Math.max(0, value))}%`
-	);
-	const isClickable = $derived(onValueClick !== undefined);
-
-	const handleClick = (e: MouseEvent) => {
-		if (!onValueClick) return;
-		const element = e.currentTarget as HTMLElement;
-		const rect = element.getBoundingClientRect();
-		const clickX = e.clientX - rect.left;
-		const percentage = Math.round((clickX / rect.width) * 100);
-		onValueClick(Math.min(100, Math.max(0, percentage)));
-	};
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-	class={`${size} ${color}`}
-	class:wide
-	class:clickable={isClickable}
-	class:indeterminate={isIndeterminate}
-	class:animate={animateValue}
-	role="progressbar"
-	aria-valuemin={0}
-	aria-valuemax={100}
-	aria-valuetext={isIndeterminate ? 'Loading' : `${value}%`}
-	onclick={isClickable ? handleClick : undefined}
->
-	<span class:indeterminate={isIndeterminate} style:width={progressWidth}></span>
-</div>
-
-<style>
-	div {
-		--internal-progress-height: 0.5rem;
-		--internal-progress-radius: calc(var(--internal-progress-height) * 0.5);
-
-		position: relative;
-		display: flex;
-		min-width: 4rem;
-		width: 8rem;
-		max-width: 100%;
-		height: var(--internal-progress-height);
-		background-color: var(--internal-current-color-soft);
-		border-radius: var(--internal-progress-radius);
-		overflow: hidden;
-	}
-
-	.wide {
-		width: 100%;
-	}
-
-	.clickable {
-		cursor: pointer;
-	}
-
-	span {
-		height: 100%;
-		display: flex;
-		background-color: var(--internal-current-color);
-		border-radius: var(--internal-progress-radius);
-	}
-
-	.animate span:not(.indeterminate) {
-		transition: width 0.3s ease-out;
-	}
-
-	span.indeterminate {
-		animation: indeterminate-fill 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-	}
-
-	div.indeterminate {
-		justify-content: flex-start;
-		animation: indeterminate-container 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-	}
-
-	@keyframes indeterminate-fill {
-		0%,
-		100% {
-			width: 25%;
-			opacity: 0.5;
-		}
-
-		50% {
-			width: 100%;
-			opacity: 0.25;
-		}
-	}
-
-	@keyframes indeterminate-container {
-		0%,
-		100% {
-			padding-left: 0;
-		}
-		50% {
-			padding-left: 75%;
-		}
-	}
-
-	/* Sizes */
-	.x-small {
-		--internal-progress-height: 0.25rem;
-	}
-
-	.small {
-		--internal-progress-height: 0.375rem;
-	}
-
-	.medium {
-		--internal-progress-height: 0.5rem;
-	}
-
-	.large {
-		--internal-progress-height: 0.625rem;
-	}
-
-	.x-large {
-		--internal-progress-height: 0.75rem;
-	}
-
-	/* 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-background-saturated);
-	}
-
-	.background {
-		--internal-current-color: var(--color-background);
-		--internal-current-color-soft: var(--color-foreground-saturated);
-	}
-</style>

package/dist/base/progress-bar/progress-bar.svelte.d.ts

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

package/dist/base/progress-bar/types.d.ts

@@ -1,9 +0,0 @@
-import type { Size, Color } from '../types.ts';
-export interface ProgressBarProps {
-    value?: number;
-    size?: Size;
-    color?: Color;
-    wide?: boolean;
-    animateValue?: boolean;
-    onValueClick?: (clickedValue: number) => void;
-}

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

@@ -1,2 +0,0 @@
-export { default as Select } from './select.svelte';
-export * from './types.ts';

package/dist/base/select/index.js

@@ -1,2 +0,0 @@
-export { default as Select } from './select.svelte';
-export * from "./types.js";