bref-ui 0.3.0 → 2.0.0

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

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

@@ -1,213 +0,0 @@
-<script lang="ts">
-	import Icon from '../icon/icon.svelte';
-	import IconButton from '../button/icon-button.svelte';
-	import { fade } from 'svelte/transition';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { TextInputProps } from './types.js';
-	import { untrack } from 'svelte';
-
-	const {
-		value,
-		placeholder,
-		disabled = false,
-		onChange,
-		wide = false,
-		startIcon,
-		ctaIconButton,
-		variant = 'soft',
-		validation,
-		...rest
-	}: TextInputProps & Omit<SvelteHTMLElements['input'], 'value'> = $props();
-
-	const VALIDATION_DEBOUNCE_MS = 1000;
-
-	let lastEdit = $state(new Date());
-	let now = $state(new Date());
-
-	$effect(() => {
-		const interval = setInterval(() => {
-			untrack(() => {
-				now = new Date();
-			});
-		}, 250);
-		return () => clearInterval(interval);
-	});
-
-	const canJudgeValidity = $derived(now.getTime() - lastEdit.getTime() > VALIDATION_DEBOUNCE_MS);
-	const isValid = $derived(!validation || value === '' || validation.regex.test(value));
-	const validationError = $derived(
-		canJudgeValidity && validation && value !== '' && !isValid ? validation.message : null
-	);
-
-	const handleInput = (e: Event) => {
-		const newValue = (e.currentTarget as HTMLInputElement).value;
-		onChange(newValue);
-		lastEdit = new Date();
-	};
-
-	const handleTrigger = () => {
-		if (!ctaIconButton || (validation && !isValid)) return;
-
-		ctaIconButton.onClick();
-
-		if (ctaIconButton.clearOnTrigger) onChange('');
-	};
-
-	const handleKeydown = (e: KeyboardEvent) => {
-		if (e.key === 'Enter' && ctaIconButton?.triggerOnEnter) {
-			e.preventDefault();
-			handleTrigger();
-		}
-	};
-</script>
-
-<div class="input-container" class:wide>
-	<div class="input-wrapper {variant}" class:wide class:disabled class:invalid={!!validationError}>
-		{#if startIcon}
-			<Icon name={startIcon} size="small" />
-		{/if}
-		<input
-			{...rest}
-			type="text"
-			{placeholder}
-			{disabled}
-			{value}
-			oninput={handleInput}
-			onkeydown={handleKeydown}
-		/>
-		{#if ctaIconButton}
-			<IconButton
-				name={ctaIconButton.name}
-				variant={ctaIconButton.variant}
-				color={ctaIconButton.color}
-				filled={ctaIconButton.filled}
-				rounded={ctaIconButton.rounded}
-				ariaLabel={ctaIconButton.ariaLabel}
-				size="small"
-				disabled={disabled || ctaIconButton.disabled}
-				onClick={handleTrigger}
-			/>
-		{/if}
-	</div>
-	{#if validationError}
-		<span class="validation-error" transition:fade>{validationError}</span>
-	{/if}
-</div>
-
-<style>
-	.input-container {
-		display: inline-flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		margin: 3px;
-		flex-shrink: 0;
-	}
-
-	.input-container.wide {
-		width: 100%;
-		flex-shrink: 1;
-	}
-
-	.input-wrapper {
-		--internal-input-bg-opacity: 5%;
-		--internal-input-hover-opacity: 7%;
-		--internal-input-disabled-opacity: 0.5;
-		--internal-input-padding-y: calc(var(--spacing) * 0.5);
-		--internal-input-padding-x: calc(var(--spacing) * 0.75);
-		--internal-input-radius: calc(var(--border-radius) * 1);
-
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: var(--internal-input-padding-y) var(--internal-input-padding-x);
-		border-radius: var(--internal-input-radius);
-		transition:
-			background-color 0.15s ease,
-			outline-color 0.15s ease;
-	}
-
-	.input-wrapper:focus-within {
-		outline: 2px solid var(--color-primary);
-		outline-offset: 1px;
-	}
-
-	.input-wrapper.invalid {
-		outline: 2px solid var(--color-danger);
-		outline-offset: 1px;
-	}
-
-	.input-wrapper.invalid:focus-within {
-		outline-color: var(--color-danger);
-	}
-
-	input {
-		flex: 1;
-		border: none;
-		background: transparent;
-		color: var(--color-foreground);
-		font-size: 1rem;
-		outline: none;
-		min-width: 0;
-	}
-
-	input::placeholder {
-		color: var(--color-foreground);
-		opacity: 0.5;
-	}
-
-	.validation-error {
-		color: var(--color-danger);
-		font-size: 0.75rem;
-		opacity: 0.5;
-		padding-left: var(--internal-input-padding-x);
-	}
-
-	/* Soft variant */
-	.soft {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-input-bg-opacity),
-			transparent
-		);
-	}
-
-	.soft:hover:not(.disabled) {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-input-hover-opacity),
-			transparent
-		);
-	}
-
-	.soft:focus-within {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-input-hover-opacity),
-			transparent
-		);
-	}
-
-	/* Ghost variant */
-	.ghost {
-		background-color: transparent;
-	}
-
-	.ghost:hover:not(.disabled) {
-		background-color: color-mix(in srgb, var(--color-foreground) 3%, transparent);
-	}
-
-	/* Wide */
-	.input-wrapper.wide {
-		width: 100%;
-	}
-
-	/* Disabled */
-	.disabled {
-		opacity: var(--internal-input-disabled-opacity);
-		cursor: not-allowed;
-	}
-
-	.disabled input {
-		cursor: not-allowed;
-	}
-</style>