bref-ui 0.3.0 → 2.0.0

package/dist/base/button/button.svelte

@@ -1,260 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { ButtonProps } from './types.js';
-	import Icon from '../icon/icon.svelte';
-
-	const {
-		label,
-		size = 'medium',
-		color = 'primary',
-		variant = 'filled',
-		disabled = false,
-		wide = false,
-		icon,
-		onClick,
-		...rest
-	}: ButtonProps & SvelteHTMLElements['button'] = $props();
-</script>
-
-<button {...rest} class={`${size} ${color} ${variant}`} class:wide {disabled} onclick={onClick}>
-	{#if icon}
-		<Icon
-			name={icon.name}
-			contrastMode={variant === 'filled'}
-			{color}
-			filled={icon.filled}
-			ariaLabel={icon.ariaLabel}
-			{size}
-		/>
-	{/if}
-	<span>{label}</span>
-</button>
-
-<style>
-	button {
-		/* Button interaction variables */
-		--internal-btn-transition-bg: 0.15s;
-		--internal-btn-transition-transform: 0.08s;
-		--internal-btn-scale-active: 0.98;
-		--internal-btn-disabled-opacity: 0.5;
-
-		/* Color mix percentages */
-		--internal-btn-hover-mix: 85%;
-		--internal-btn-active-mix: 70%;
-		--internal-btn-ghost-hover-opacity: 10%;
-		--internal-btn-ghost-active-opacity: 25%;
-
-		/* Size defaults (medium) */
-		--internal-btn-padding-y: calc(var(--spacing) * 0.5);
-		--internal-btn-padding-x: calc(var(--spacing) * 1);
-		--internal-btn-font-size: 1rem;
-		--internal-btn-radius: calc(var(--border-radius) * 1.25);
-
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5em;
-		border: none;
-		cursor: pointer;
-		font-weight: 500;
-		flex-shrink: 0;
-		width: fit-content;
-		min-width: fit-content;
-		height: fit-content;
-		min-height: fit-content;
-		padding: var(--internal-btn-padding-y) var(--internal-btn-padding-x);
-		font-size: var(--internal-btn-font-size);
-		border-radius: var(--internal-btn-radius);
-		transition:
-			background-color var(--internal-btn-transition-bg) ease,
-			transform var(--internal-btn-transition-transform) cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-
-	span {
-		cursor: inherit;
-		color: inherit;
-		display: inline-block;
-	}
-
-	button:disabled {
-		opacity: var(--internal-btn-disabled-opacity);
-		cursor: not-allowed;
-	}
-
-	button:not(:disabled):active {
-		transform: scale(var(--internal-btn-scale-active));
-	}
-
-	.wide {
-		width: 100%;
-		flex-shrink: 1;
-	}
-
-	/* Sizes */
-	.x-small {
-		--internal-btn-padding-y: calc(var(--spacing) * 0.25);
-		--internal-btn-padding-x: calc(var(--spacing) * 0.5);
-		--internal-btn-font-size: 0.75rem;
-		--internal-btn-radius: calc(var(--border-radius) * 0.75);
-	}
-
-	.small {
-		--internal-btn-padding-y: calc(var(--spacing) * 0.375);
-		--internal-btn-padding-x: calc(var(--spacing) * 0.75);
-		--internal-btn-font-size: 0.875rem;
-		--internal-btn-radius: var(--border-radius);
-	}
-
-	.medium {
-		--internal-btn-padding-y: calc(var(--spacing) * 0.5);
-		--internal-btn-padding-x: calc(var(--spacing) * 1);
-		--internal-btn-font-size: 1rem;
-		--internal-btn-radius: calc(var(--border-radius) * 1.25);
-	}
-
-	.large {
-		--internal-btn-padding-y: calc(var(--spacing) * 0.625);
-		--internal-btn-padding-x: calc(var(--spacing) * 1.25);
-		--internal-btn-font-size: 1.125rem;
-		--internal-btn-radius: calc(var(--border-radius) * 1.5);
-	}
-
-	.x-large {
-		--internal-btn-padding-y: calc(var(--spacing) * 0.75);
-		--internal-btn-padding-x: calc(var(--spacing) * 1.5);
-		--internal-btn-font-size: 1.25rem;
-		--internal-btn-radius: calc(var(--border-radius) * 2);
-	}
-
-	/* 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);
-	}
-
-	.filled:not(:disabled):hover {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color) var(--internal-btn-hover-mix),
-			black
-		);
-	}
-
-	.filled:not(:disabled):active {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color) var(--internal-btn-active-mix),
-			black
-		);
-	}
-
-	/* Soft variant */
-	.soft {
-		background-color: var(--internal-current-color-soft);
-		color: var(--internal-current-color);
-	}
-
-	.soft:not(:disabled):hover {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color-soft) var(--internal-btn-hover-mix),
-			var(--internal-current-color)
-		);
-	}
-
-	.soft:not(:disabled):active {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color-soft) var(--internal-btn-active-mix),
-			var(--internal-current-color)
-		);
-	}
-
-	/* Ghost variant */
-	.ghost {
-		background-color: transparent;
-		color: var(--internal-current-color);
-	}
-
-	.ghost:not(:disabled):hover {
-		background-color: color-mix(
-			in srgb,
-			var(--internal-current-color) var(--internal-btn-ghost-hover-opacity),
-			var(--color-background)
-		);
-	}
-
-	.ghost:not(:disabled):active {
-		background-color: color-mix(
-			in srgb,
-			var(--internal-current-color) var(--internal-btn-ghost-active-opacity),
-			var(--color-background)
-		);
-	}
-
-	/* Background color ghost variant needs inverted hover colors */
-	.background.ghost:not(:disabled):hover {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-btn-ghost-hover-opacity),
-			var(--color-background)
-		);
-	}
-
-	.background.ghost:not(:disabled):active {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-btn-ghost-active-opacity),
-			var(--color-background)
-		);
-	}
-</style>

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

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

package/dist/base/button/icon-button.svelte

@@ -1,226 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { IconButtonProps } from './types.js';
-	import Icon from '../icon/icon.svelte';
-
-	const {
-		name,
-		filled,
-		ariaLabel,
-		size = 'medium',
-		color = 'primary',
-		variant = 'filled',
-		disabled = false,
-		rounded = false,
-		onClick,
-		...rest
-	}: IconButtonProps & SvelteHTMLElements['button'] = $props();
-</script>
-
-<button {...rest} class={`${size} ${color} ${variant}`} class:rounded {disabled} onclick={onClick}>
-	<Icon {name} contrastMode={variant === 'filled'} {color} {filled} {ariaLabel} {size} />
-</button>
-
-<style>
-	button {
-		/* Button interaction variables */
-		--internal-btn-transition-bg: 0.15s;
-		--internal-btn-transition-transform: 0.08s;
-		--internal-btn-scale-active: 0.95;
-		--internal-btn-disabled-opacity: 0.5;
-
-		/* Color mix percentages */
-		--internal-btn-hover-mix: 85%;
-		--internal-btn-active-mix: 70%;
-		--internal-btn-ghost-hover-opacity: 10%;
-		--internal-btn-ghost-active-opacity: 25%;
-
-		/* Size defaults (medium) */
-		--internal-btn-size: calc(var(--spacing) * 2.5);
-		--internal-btn-radius: calc(var(--border-radius) * 1.25);
-
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border: none;
-		flex-shrink: 0;
-		cursor: pointer;
-		width: var(--internal-btn-size);
-		height: var(--internal-btn-size);
-		border-radius: var(--internal-btn-radius);
-		transition:
-			background-color var(--internal-btn-transition-bg) ease,
-			transform var(--internal-btn-transition-transform) cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-
-	button:disabled {
-		opacity: var(--internal-btn-disabled-opacity);
-		cursor: not-allowed;
-	}
-
-	button:not(:disabled):active {
-		transform: scale(var(--internal-btn-scale-active));
-	}
-
-	/* Sizes */
-	.x-small {
-		--internal-btn-size: calc(var(--spacing) * 1.5);
-		--internal-btn-radius: calc(var(--border-radius) * 0.75);
-	}
-
-	.small {
-		--internal-btn-size: calc(var(--spacing) * 2);
-		--internal-btn-radius: var(--border-radius);
-	}
-
-	.medium {
-		--internal-btn-size: calc(var(--spacing) * 2.5);
-		--internal-btn-radius: calc(var(--border-radius) * 1.25);
-	}
-
-	.large {
-		--internal-btn-size: calc(var(--spacing) * 3);
-		--internal-btn-radius: calc(var(--border-radius) * 1.5);
-	}
-
-	.x-large {
-		--internal-btn-size: calc(var(--spacing) * 4);
-		--internal-btn-radius: calc(var(--border-radius) * 2);
-	}
-
-	.rounded {
-		border-radius: 50%;
-	}
-
-	/* 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);
-	}
-
-	.filled:not(:disabled):hover {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color) var(--internal-btn-hover-mix),
-			black
-		);
-	}
-
-	.filled:not(:disabled):active {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color) var(--internal-btn-active-mix),
-			black
-		);
-	}
-
-	/* Soft variant */
-	.soft {
-		background-color: var(--internal-current-color-soft);
-		color: var(--internal-current-color);
-	}
-
-	.soft:not(:disabled):hover {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color-soft) var(--internal-btn-hover-mix),
-			var(--internal-current-color)
-		);
-	}
-
-	.soft:not(:disabled):active {
-		background-color: color-mix(
-			in oklch,
-			var(--internal-current-color-soft) var(--internal-btn-active-mix),
-			var(--internal-current-color)
-		);
-	}
-
-	/* Ghost variant */
-	.ghost {
-		background-color: transparent;
-		color: var(--internal-current-color);
-	}
-
-	.ghost:not(:disabled):hover {
-		background-color: color-mix(
-			in srgb,
-			var(--internal-current-color) var(--internal-btn-ghost-hover-opacity),
-			var(--color-background)
-		);
-	}
-
-	.ghost:not(:disabled):active {
-		background-color: color-mix(
-			in srgb,
-			var(--internal-current-color) var(--internal-btn-ghost-active-opacity),
-			var(--color-background)
-		);
-	}
-
-	/* Background color ghost variant needs inverted hover colors */
-	.background.ghost:not(:disabled):hover {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-btn-ghost-hover-opacity),
-			var(--color-background)
-		);
-	}
-
-	.background.ghost:not(:disabled):active {
-		background-color: color-mix(
-			in srgb,
-			var(--color-foreground) var(--internal-btn-ghost-active-opacity),
-			var(--color-background)
-		);
-	}
-</style>

package/dist/base/button/icon-button.svelte.d.ts

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

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

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

package/dist/base/button/index.js

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

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

@@ -1,17 +0,0 @@
-import type { IconProps } from '../icon/types.ts';
-import type { Color, Size, Variant } from '../types.ts';
-export interface BaseButtonProps {
-    size?: Size;
-    color?: Color;
-    disabled?: boolean;
-    onClick: () => void;
-    variant?: Variant;
-}
-export interface IconButtonProps extends BaseButtonProps, Pick<IconProps, 'name' | 'filled' | 'ariaLabel'> {
-    rounded?: boolean;
-}
-export interface ButtonProps extends BaseButtonProps {
-    label: string;
-    wide?: boolean;
-    icon?: Pick<IconProps, 'name' | 'filled' | 'ariaLabel'>;
-}

package/dist/base/icon/icon.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import '@fontsource-variable/material-symbols-rounded/fill.css';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { IconProps } from './types.js';
-
-	const {
-		name,
-		filled = false,
-		size = 'medium',
-		color = 'foreground',
-		ariaLabel,
-		contrastMode,
-		...rest
-	}: IconProps & SvelteHTMLElements['span'] = $props();
-</script>
-
-<span
-	{...rest}
-	class:filled
-	class={`${size} ${color}`}
-	class:contrastMode
-	aria-label={ariaLabel}
-	aria-hidden={ariaLabel ? 'false' : 'true'}
->
-	{name}
-</span>
-
-<style>
-	span {
-		font-family: 'Material Symbols Rounded Variable';
-		font-weight: 200;
-		font-style: normal;
-		display: inline-block;
-		line-height: 1;
-		text-transform: none;
-		letter-spacing: normal;
-		word-wrap: normal;
-		white-space: nowrap;
-		direction: ltr;
-		flex-shrink: 0;
-		user-select: none;
-	}
-
-	.filled {
-		font-variation-settings: 'FILL' 1;
-		font-weight: 500;
-	}
-
-	.x-small {
-		font-size: 0.75rem;
-	}
-	.small {
-		font-size: 1rem;
-	}
-	.medium {
-		font-size: 1.5rem;
-	}
-	.large {
-		font-size: 2rem;
-	}
-	.x-large {
-		font-size: 3rem;
-	}
-	.foreground {
-		color: var(--color-foreground);
-	}
-	.foreground.contrastMode {
-		color: var(--color-foreground-contrast);
-	}
-	.primary {
-		color: var(--color-primary);
-	}
-	.primary.contrastMode {
-		color: var(--color-primary-contrast);
-	}
-
-	.secondary {
-		color: var(--color-secondary);
-	}
-	.secondary.contrastMode {
-		color: var(--color-secondary-contrast);
-	}
-
-	.success {
-		color: var(--color-success);
-	}
-	.success.contrastMode {
-		color: var(--color-success-contrast);
-	}
-
-	.warning {
-		color: var(--color-warning);
-	}
-	.warning.contrastMode {
-		color: var(--color-warning-contrast);
-	}
-
-	.danger {
-		color: var(--color-danger);
-	}
-	.danger.contrastMode {
-		color: var(--color-danger-contrast);
-	}
-
-	.background {
-		color: var(--color-background);
-	}
-	.background.contrastMode {
-		color: var(--color-background-contrast);
-	}
-
-	.info {
-		color: var(--color-info);
-	}
-	.info.contrastMode {
-		color: var(--color-info-contrast);
-	}
-</style>

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

@@ -1,7 +0,0 @@
-import '@fontsource-variable/material-symbols-rounded/fill.css';
-import type { SvelteHTMLElements } from 'svelte/elements';
-import type { IconProps } from './types.ts';
-type $$ComponentProps = IconProps & SvelteHTMLElements['span'];
-declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
-type Icon = ReturnType<typeof Icon>;
-export default Icon;

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

@@ -1,2 +0,0 @@
-export { type IconName, type IconProps } from './types.ts';
-export { default as Icon } from './icon.svelte';

package/dist/base/icon/index.js

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