bref-ui 0.3.1 → 2.0.0

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

package/dist/base/select/select.svelte

@@ -1,145 +0,0 @@
-<script lang="ts">
-	import Icon from '../icon/icon.svelte';
-	import type { SelectProps } from './types.js';
-
-	let {
-		value,
-		options,
-		placeholder = 'Select...',
-		disabled = false,
-		onChange,
-		wide = false,
-		startIcon,
-		size = 'medium'
-	}: SelectProps = $props();
-
-	const handleChange = (e: Event) => onChange((e.currentTarget as HTMLSelectElement).value);
-
-	let select: HTMLSelectElement;
-
-	const triggerDropDown = (e: MouseEvent) => {
-		e.stopPropagation();
-		if (disabled) return;
-		select.focus();
-		select.showPicker();
-	};
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class={size} class:wide class:disabled onclick={triggerDropDown}>
-	{#if startIcon}
-		<Icon {...startIcon} {size} />
-	{/if}
-	<select
-		{disabled}
-		{value}
-		onchange={handleChange}
-		onclick={(e) => e.stopPropagation()}
-		bind:this={select}
-	>
-		{#if placeholder && !value}
-			<option value="" disabled selected>{placeholder}</option>
-		{/if}
-		{#each options as option}
-			<option value={option.value}>
-				{option.label}
-			</option>
-		{/each}
-	</select>
-	<Icon name="arrow_drop_down" {size} onclick={triggerDropDown} />
-</div>
-
-<style>
-	div {
-		--internal-select-bg-opacity: 5%;
-		--internal-select-hover-opacity: 7%;
-		--internal-select-padding-y: calc(var(--spacing) * 0.5);
-		--internal-select-padding-x: calc(var(--spacing) * 0.75);
-		--internal-select-radius: calc(var(--border-radius) * 1);
-
-		display: flex;
-		margin: 2px;
-		cursor: pointer;
-		align-items: center;
-		gap: 0.25rem;
-		flex-shrink: 0;
-		padding: var(--internal-select-padding-y) var(--internal-select-padding-x);
-		border-radius: var(--internal-select-radius);
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-select-bg-opacity),
-			transparent
-		);
-		transition: background-color 0.15s ease;
-	}
-
-	div:hover:not(.disabled) {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-select-hover-opacity),
-			transparent
-		);
-	}
-
-	div:focus-within {
-		outline: 2px solid var(--color-primary);
-		outline-offset: 1px;
-	}
-
-	div.wide {
-		width: 100%;
-		flex-shrink: 1;
-	}
-
-	div.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	div.disabled select {
-		cursor: not-allowed;
-	}
-
-	/* Size variants */
-	div.x-small {
-		--internal-select-padding-y: calc(var(--spacing) * 0.25);
-		--internal-select-padding-x: calc(var(--spacing) * 0.5);
-		--internal-select-radius: calc(var(--border-radius) * 0.75);
-		--select-font-size: 0.75rem;
-	}
-
-	div.small {
-		--internal-select-padding-y: calc(var(--spacing) * 0.375);
-		--internal-select-padding-x: calc(var(--spacing) * 0.75);
-		--internal-select-radius: var(--border-radius);
-		--select-font-size: 0.875rem;
-	}
-
-	div.medium {
-		--internal-select-padding-y: calc(var(--spacing) * 0.5);
-		--internal-select-padding-x: calc(var(--spacing) * 1);
-		--internal-select-radius: calc(var(--border-radius) * 1.25);
-		--select-font-size: 1rem;
-	}
-
-	div.large {
-		--internal-select-padding-y: calc(var(--spacing) * 0.625);
-		--internal-select-padding-x: calc(var(--spacing) * 1.25);
-		--internal-select-radius: calc(var(--border-radius) * 1.5);
-		--select-font-size: 1.125rem;
-	}
-
-	div.x-large {
-		--internal-select-padding-y: calc(var(--spacing) * 0.75);
-		--internal-select-padding-x: calc(var(--spacing) * 1.5);
-		--internal-select-radius: calc(var(--border-radius) * 2);
-		--select-font-size: 1.25rem;
-	}
-
-	select {
-		all: unset;
-		font-size: var(--select-font-size);
-		flex: 1;
-	}
-</style>

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

@@ -1,16 +0,0 @@
-import type { Size } from '../types.ts';
-import type { IconProps } from '../icon/types.ts';
-export interface SelectOptionProps {
-    value: string;
-    label: string;
-}
-export interface SelectProps {
-    value: string;
-    options: SelectOptionProps[];
-    placeholder?: string;
-    disabled?: boolean;
-    onChange: (value: string) => void;
-    wide?: boolean;
-    startIcon?: Exclude<IconProps, 'size'>;
-    size?: Size;
-}

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

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

package/dist/base/slider/index.js

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

package/dist/base/slider/slider.svelte

@@ -1,192 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { SliderProps } from './types.js';
-
-	const {
-		value,
-		min = 0,
-		max = 100,
-		step = 1,
-		disabled = false,
-		wide = false,
-		size = 'medium',
-		color = 'primary',
-		onChange,
-		...rest
-	}: SliderProps &
-		Omit<
-			SvelteHTMLElements['input'],
-			'value' | 'step' | 'min' | 'max' | 'disabled' | 'size'
-		> = $props();
-
-	const ratio = $derived((value - min) / (max - min));
-
-	const handleInput = (e: Event) => {
-		const newValue = Number((e.currentTarget as HTMLInputElement).value);
-		onChange(newValue);
-	};
-</script>
-
-<div class="track {size} {color}" class:wide class:disabled>
-	<div
-		class="fill"
-		style:width="calc({ratio} * (100% - var(--internal-track-height)) + var(--internal-track-height) /
-		2)"
-	></div>
-	<input {...rest} type="range" {min} {max} {step} {value} {disabled} oninput={handleInput} />
-</div>
-
-<style>
-	.track {
-		--internal-track-height: 0.5rem;
-		--internal-color: var(--color-primary);
-		--internal-color-soft: var(--color-primary-soft);
-		--internal-thumb-color: var(--color-primary-saturated);
-
-		position: relative;
-		width: 7.5rem;
-		max-width: 100%;
-		min-width: 1.5rem;
-		height: var(--internal-track-height);
-		background: var(--internal-color-soft);
-		border-radius: calc(var(--internal-track-height) / 2);
-	}
-
-	.track.wide {
-		width: 100%;
-	}
-
-	/* Color variants */
-	.track.primary {
-		--internal-color: var(--color-primary);
-		--internal-color-soft: var(--color-primary-soft);
-		--internal-thumb-color: var(--color-primary-saturated);
-	}
-
-	.track.foreground {
-		--internal-color: var(--color-foreground);
-		--internal-color-soft: var(--color-foreground-soft);
-		--internal-thumb-color: var(--color-foreground-saturated);
-	}
-
-	/* Size variants */
-	.track.x-small {
-		--internal-track-height: 0.25rem;
-	}
-
-	.track.small {
-		--internal-track-height: 0.375rem;
-	}
-
-	.track.medium {
-		--internal-track-height: 0.5rem;
-	}
-
-	.track.large {
-		--internal-track-height: 0.625rem;
-	}
-
-	.track.x-large {
-		--internal-track-height: 0.75rem;
-	}
-
-	/* Fill bar */
-	.fill {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		background: var(--internal-color);
-		border-radius: calc(var(--internal-track-height) / 2) 0 0 calc(var(--internal-track-height) / 2);
-		pointer-events: none;
-	}
-
-	/* Input */
-	input {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		-webkit-appearance: none;
-		appearance: none;
-		background: transparent;
-		outline: none;
-		cursor: pointer;
-	}
-
-	input:focus-visible {
-		outline: 0.1rem solid var(--internal-color);
-		outline-offset: 0.2rem;
-	}
-
-	/* Webkit thumb */
-	input::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: var(--internal-track-height);
-		height: var(--internal-track-height);
-		border-radius: 50%;
-		background: var(--internal-thumb-color);
-		cursor: pointer;
-		border: none;
-		box-shadow: 0 0.03rem 0.125rem rgba(0, 0, 0, 0.08);
-		transition:
-			transform 0.2s ease,
-			box-shadow 0.2s ease;
-	}
-
-	input::-webkit-slider-thumb:hover {
-		transform: scale(1.2);
-		box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.1);
-	}
-
-	input::-webkit-slider-thumb:active {
-		transform: scale(1.1);
-	}
-
-	/* Firefox thumb */
-	input::-moz-range-thumb {
-		width: var(--internal-track-height);
-		height: var(--internal-track-height);
-		border-radius: 50%;
-		background: var(--internal-thumb-color);
-		cursor: pointer;
-		border: none;
-		box-shadow: 0 0.03rem 0.125rem rgba(0, 0, 0, 0.08);
-		transition:
-			transform 0.2s ease,
-			box-shadow 0.2s ease;
-	}
-
-	input::-moz-range-thumb:hover {
-		transform: scale(1.2);
-		box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.1);
-	}
-
-	input::-moz-range-thumb:active {
-		transform: scale(1.1);
-	}
-
-	/* Firefox track */
-	input::-moz-range-track {
-		background: transparent;
-	}
-
-	/* Disabled state */
-	.track.disabled {
-		opacity: 0.4;
-	}
-
-	.track.disabled input {
-		cursor: not-allowed;
-	}
-
-	.track.disabled input::-webkit-slider-thumb {
-		cursor: not-allowed;
-	}
-
-	.track.disabled input::-moz-range-thumb {
-		cursor: not-allowed;
-	}
-</style>

package/dist/base/slider/slider.svelte.d.ts

@@ -1,6 +0,0 @@
-import type { SvelteHTMLElements } from 'svelte/elements';
-import type { SliderProps } from './types.ts';
-type $$ComponentProps = SliderProps & Omit<SvelteHTMLElements['input'], 'value' | 'step' | 'min' | 'max' | 'disabled' | 'size'>;
-declare const Slider: import("svelte").Component<$$ComponentProps, {}, "">;
-type Slider = ReturnType<typeof Slider>;
-export default Slider;

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

@@ -1,12 +0,0 @@
-import type { Size, Color } from '../types.ts';
-export interface SliderProps {
-    value: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-    wide?: boolean;
-    size?: Size;
-    color?: Extract<Color, 'primary' | 'foreground'>;
-    onChange: (value: number) => void;
-}

package/dist/base/text-input/area-text-input.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { AreaTextInputProps } from './types.js';
-
-	const {
-		value,
-		placeholder,
-		disabled = false,
-		onChange,
-		wide = false,
-		rows = 3,
-		resizable = true,
-		...rest
-	}: AreaTextInputProps & Omit<SvelteHTMLElements['textarea'], 'value'> = $props();
-
-	const handleInput = (e: Event) => {
-		const newValue = (e.currentTarget as HTMLTextAreaElement).value;
-		onChange(newValue);
-	};
-</script>
-
-<div class:wide class:disabled class:resizable>
-	<textarea {...rest} {placeholder} {disabled} {rows} {value} oninput={handleInput}></textarea>
-</div>
-
-<style>
-	div {
-		--internal-textarea-bg-opacity: 3%;
-		--internal-textarea-hover-opacity: 7%;
-		--internal-textarea-disabled-opacity: 0.5;
-		--internal-textarea-padding-y: calc(var(--spacing) * 0.5);
-		--internal-textarea-padding-x: calc(var(--spacing) * 0.75);
-		--internal-textarea-radius: calc(var(--border-radius) * 1);
-
-		display: inline-flex;
-		padding: var(--internal-textarea-padding-y) var(--internal-textarea-padding-x);
-		border-radius: var(--internal-textarea-radius);
-		margin: 3px;
-		flex-shrink: 0;
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-textarea-bg-opacity),
-			transparent
-		);
-		transition:
-			background-color 0.15s ease,
-			outline-color 0.15s ease;
-	}
-
-	div:hover:not(.disabled) {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-textarea-hover-opacity),
-			transparent
-		);
-	}
-
-	div:focus-within {
-		outline: 2px solid var(--color-primary);
-		outline-offset: 1px;
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-textarea-hover-opacity),
-			transparent
-		);
-	}
-
-	textarea {
-		flex: 1;
-		border: none;
-		background: transparent;
-		color: var(--color-foreground);
-		font-size: 1rem;
-		font-family: inherit;
-		outline: none;
-		min-width: 0;
-		resize: none;
-		line-height: 1.5;
-	}
-
-	.resizable textarea {
-		resize: vertical;
-	}
-
-	textarea::placeholder {
-		color: var(--color-foreground);
-		opacity: 0.5;
-	}
-
-	/* Wide */
-	div.wide {
-		width: 100%;
-		flex-shrink: 1;
-	}
-
-	/* Disabled */
-	.disabled {
-		opacity: var(--internal-textarea-disabled-opacity);
-		cursor: not-allowed;
-	}
-
-	.disabled textarea {
-		cursor: not-allowed;
-	}
-</style>

package/dist/base/text-input/area-text-input.svelte.d.ts

@@ -1,6 +0,0 @@
-import type { SvelteHTMLElements } from 'svelte/elements';
-import type { AreaTextInputProps } from './types.ts';
-type $$ComponentProps = AreaTextInputProps & Omit<SvelteHTMLElements['textarea'], 'value'>;
-declare const AreaTextInput: import("svelte").Component<$$ComponentProps, {}, "">;
-type AreaTextInput = ReturnType<typeof AreaTextInput>;
-export default AreaTextInput;

package/dist/base/text-input/index.d.ts

@@ -1,2 +0,0 @@
-export { default as TextInput } from './text-input.svelte';
-export { default as AreaTextInput } from './area-text-input.svelte';

package/dist/base/text-input/index.js

@@ -1,2 +0,0 @@
-export { default as TextInput } from './text-input.svelte';
-export { default as AreaTextInput } from './area-text-input.svelte';