bref-ui 0.3.1 → 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,171 +0,0 @@
-<script lang="ts">
-	import type { PillProps } from './types.js';
-	import Icon from '../icon/icon.svelte';
-
-	const {
-		label,
-		size = 'medium',
-		color = 'primary',
-		variant = 'filled',
-		icon,
-		onClick,
-		disabled = false
-	}: PillProps = $props();
-
-	const handleClick = () => {
-		if (!disabled && onClick) onClick();
-	};
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-	class={`${size} ${color} ${variant}`}
-	class:clickable={!!onClick}
-	class:disabled
-	onclick={handleClick}
->
-	{#if icon}
-		<Icon contrastMode={variant === 'filled'} {color} {...icon} {size} />
-	{/if}
-	<span>{label}</span>
-</div>
-
-<style>
-	div,
-	span {
-		transition: all 0.2s ease-in-out;
-	}
-	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;
-	}
-
-	div.clickable {
-		cursor: pointer;
-	}
-
-	div.disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
-
-	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,11 +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'>;
-    onClick?: () => void;
-    disabled?: boolean;
-}

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

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

package/dist/base/pill-selection/index.js

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

package/dist/base/pill-selection/pill-selection.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import type { PillSelectionProps } from './types.js';
-	import Pill from '../pill/pill.svelte';
-
-	const {
-		items,
-		selection,
-		onSelect,
-		maxSelectionLength,
-		disableOthersOnFull = false,
-		size = 'medium',
-		color = 'primary'
-	}: PillSelectionProps = $props();
-
-	const isFull = $derived(
-		maxSelectionLength !== undefined && selection.length >= maxSelectionLength
-	);
-
-	const handleClick = (id: string) => {
-		const selected = selection.includes(id);
-		if (selected) onSelect(selection.filter((s) => s !== id));
-		else if (isFull && !disableOthersOnFull) onSelect([...selection.slice(1), id]);
-		else if (!isFull) onSelect([...selection, id]);
-	};
-</script>
-
-<div>
-	{#each items as item}
-		{@const selected = selection.includes(item.id)}
-		<Pill
-			label={item.label}
-			icon={item.icon}
-			{size}
-			{color}
-			variant={selected ? 'filled' : 'soft'}
-			disabled={disableOthersOnFull && isFull && !selected}
-			onClick={() => handleClick(item.id)}
-		/>
-	{/each}
-</div>
-
-<style>
-	div {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-</style>

package/dist/base/pill-selection/pill-selection.svelte.d.ts

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

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

@@ -1,16 +0,0 @@
-import type { IconProps } from '../icon/types.ts';
-import type { Color, Size } from '../types.ts';
-export interface PillSelectionItem {
-    id: string;
-    label: string;
-    icon?: Pick<IconProps, 'name' | 'filled' | 'ariaLabel'>;
-}
-export interface PillSelectionProps {
-    items: PillSelectionItem[];
-    selection: string[];
-    onSelect: (selection: string[]) => void;
-    maxSelectionLength?: number;
-    disableOthersOnFull?: boolean;
-    size?: Size;
-    color?: Color;
-}

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