bref-ui 0.3.0 → 2.0.0

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

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

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

@@ -1,27 +0,0 @@
-import type { IconButtonProps } from '../button/types.ts';
-import type { IconName } from '../icon/types.ts';
-import type { Variant } from '../types.ts';
-interface BaseTextInputProps {
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    onChange: (value: string) => void;
-    wide?: boolean;
-}
-export interface TextInputProps extends BaseTextInputProps {
-    startIcon?: IconName;
-    ctaIconButton?: IconButtonProps & {
-        triggerOnEnter?: boolean;
-        clearOnTrigger?: boolean;
-    };
-    variant?: Extract<Variant, 'soft' | 'ghost'>;
-    validation?: {
-        regex: RegExp;
-        message: string;
-    };
-}
-export interface AreaTextInputProps extends BaseTextInputProps {
-    rows?: number;
-    resizable?: boolean;
-}
-export {};

package/dist/base/theme/color-tokens.d.ts

@@ -1,36 +0,0 @@
-import type { ColorTokenProps, ThemeProps } from './types.ts';
-/**
- * Generates a minimal set of color tokens based on a base color.
- * Produces soft, saturated, and contrast variants. Hover/active states are
- * left to components using CSS color-mix() for context-aware state derivation.
- *
- * @param color - The base color in any valid CSS color format
- * @returns An object containing soft, saturated, and contrast color tokens
- */
-declare const generateColorTokens: (color: string) => ColorTokenProps;
-/**
- * Sets a CSS custom property on the document root element.
- * Automatically prefixes the key with '--' if not already present.
- *
- * @param key - The CSS custom property name (with or without '--' prefix)
- * @param value - The value to assign to the CSS custom property
- */
-declare const setCSSProperty: (key: string, value: string) => void;
-/**
- * Generates and applies a complete set of color tokens as CSS custom properties.
- * Each token is set as `--color-{colorKey}` and `--color-{colorKey}-{variant}` on the document root.
- *
- * @param colorKey - The semantic name for the color (e.g., 'primary', 'success')
- * @param baseColor - The base color in any valid CSS color format
- */
-declare const setColorTokens: (colorKey: string, baseColor: string) => void;
-/**
- * Applies all theme tokens as CSS custom properties.
- * Palette colors are set without mode prefix (consistent across themes).
- * Surface colors (background/foreground) are set with mode prefix for light/dark switching.
- *
- * @param theme - The theme configuration object containing palette and surface colors
- */
-declare const setThemeTokens: (theme: ThemeProps) => void;
-export { generateColorTokens, setCSSProperty, setThemeTokens };
-export default setColorTokens;

package/dist/base/theme/color-tokens.js

@@ -1,105 +0,0 @@
-import { colord } from 'colord';
-/**
- * Generates a soft background color from the base color.
- * Produces a lighter, slightly desaturated shade suitable as a
- * background when using the base color as foreground.
- *
- * @param baseColor - The base color in any valid CSS color format
- * @returns A hex color string representing the soft background color
- */
-const generateSoftColor = (baseColor) => colord(baseColor).lighten(0.25).desaturate(0.1).toHex();
-/**
- * Generates a saturated (darker) version of the base color.
- * Produces a deeper, more intense shade suitable for emphasis or contrast.
- *
- * @param baseColor - The base color in any valid CSS color format
- * @returns A hex color string representing the saturated color
- */
-const generateSaturatedColor = (baseColor) => colord(baseColor).darken(0.15).saturate(0.1).toHex();
-/**
- * Generates a contrast color for text or icons placed on top of the base color.
- * Returns either black or white depending on the base color's perceived brightness,
- * ensuring readability and accessibility (WCAG compliance).
- *
- * @param baseColor - The base color in any valid CSS color format
- * @returns '#ffffff' for dark base colors, '#000000' for light base colors
- */
-const generateContrastColor = (baseColor) => colord(baseColor).isDark() ? '#ffffff' : '#000000';
-/**
- * Generates a minimal set of color tokens based on a base color.
- * Produces soft, saturated, and contrast variants. Hover/active states are
- * left to components using CSS color-mix() for context-aware state derivation.
- *
- * @param color - The base color in any valid CSS color format
- * @returns An object containing soft, saturated, and contrast color tokens
- */
-const generateColorTokens = (color) => ({
-    soft: generateSoftColor(color),
-    saturated: generateSaturatedColor(color),
-    contrast: generateContrastColor(color)
-});
-/**
- * Sets a CSS custom property on the document root element.
- * Automatically prefixes the key with '--' if not already present.
- *
- * @param key - The CSS custom property name (with or without '--' prefix)
- * @param value - The value to assign to the CSS custom property
- */
-const setCSSProperty = (key, value) => {
-    const prefixedKey = key.startsWith('--') ? key : `--${key}`;
-    document.documentElement.style.setProperty(prefixedKey, value);
-};
-/**
- * Generates and applies a complete set of color tokens as CSS custom properties.
- * Each token is set as `--color-{colorKey}` and `--color-{colorKey}-{variant}` on the document root.
- *
- * @param colorKey - The semantic name for the color (e.g., 'primary', 'success')
- * @param baseColor - The base color in any valid CSS color format
- */
-const setColorTokens = (colorKey, baseColor) => {
-    const tokens = generateColorTokens(baseColor);
-    setCSSProperty(`--color-${colorKey}`, baseColor);
-    Object.entries(tokens).forEach(([variant, value]) => {
-        setCSSProperty(`--color-${colorKey}-${variant}`, value);
-    });
-};
-/**
- * Generates and applies surface color tokens with mode prefix for light/dark switching.
- * Each token is set as `--color-{mode}-{surfaceKey}-{variant}` on the document root.
- *
- * @param surfaceKey - The semantic name for the surface (e.g., 'background', 'foreground')
- * @param baseColor - The base color in any valid CSS color format
- * @param mode - The theme mode ('light' or 'dark')
- */
-const setSurfaceTokens = (surfaceKey, baseColor, mode) => {
-    const tokens = generateColorTokens(baseColor);
-    setCSSProperty(`--color-${mode}-${surfaceKey}`, baseColor);
-    Object.entries(tokens).forEach(([variant, value]) => {
-        setCSSProperty(`--color-${mode}-${surfaceKey}-${variant}`, value);
-    });
-};
-/**
- * Applies all theme tokens as CSS custom properties.
- * Palette colors are set without mode prefix (consistent across themes).
- * Surface colors (background/foreground) are set with mode prefix for light/dark switching.
- *
- * @param theme - The theme configuration object containing palette and surface colors
- */
-const setThemeTokens = (theme) => {
-    // Palette colors: same across light/dark modes
-    Object.entries(theme.paletteHex).forEach(([color, value]) => {
-        setColorTokens(color, value);
-    });
-    // Surface colors: different for light/dark modes
-    // Light mode uses colors as-is
-    Object.entries(theme.surfaceHex).forEach(([surface, value]) => {
-        setSurfaceTokens(surface, value, 'light');
-    });
-    // Dark mode flips background and foreground
-    setSurfaceTokens('background', theme.surfaceHex.foreground, 'dark');
-    setSurfaceTokens('foreground', theme.surfaceHex.background, 'dark');
-    // Border color
-    setCSSProperty('--color-border', theme.border.colorHex);
-};
-export { generateColorTokens, setCSSProperty, setThemeTokens };
-export default setColorTokens;

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

@@ -1,3 +0,0 @@
-export { default as Theme } from './theme.svelte';
-export * from './mode.ts';
-export * from './types.ts';

package/dist/base/theme/index.js

@@ -1,3 +0,0 @@
-export { default as Theme } from './theme.svelte';
-export * from "./mode.js";
-export * from "./types.js";

package/dist/base/theme/mode.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeMode } from './types.ts';
-export declare const toggleThemeMode: (mode: ThemeMode) => void;
-export declare const initializeThemeMode: () => ThemeMode;

package/dist/base/theme/mode.js

@@ -1,14 +0,0 @@
-export const toggleThemeMode = (mode) => {
-    if (typeof window === 'undefined')
-        return console.warn('toggleThemeMode called on server side');
-    document.documentElement.setAttribute('data-theme', mode);
-    localStorage.setItem('theme-mode', mode);
-};
-export const initializeThemeMode = () => {
-    if (typeof window === 'undefined')
-        return 'light';
-    const stored = localStorage.getItem('theme-mode');
-    const resolved = stored ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-    toggleThemeMode(resolved);
-    return resolved;
-};

package/dist/base/theme/theme.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { setCSSProperty, setThemeTokens } from './color-tokens.js';
-	import { initializeThemeMode } from './mode.js';
-	import { DEFAULT_THEME, type ThemeProps } from './types.js';
-
-	const userTheme: ThemeProps | undefined | Partial<ThemeProps> = $props();
-
-	const theme: ThemeProps = {
-		...DEFAULT_THEME,
-		...userTheme,
-		paletteHex: {
-			...DEFAULT_THEME.paletteHex,
-			...(userTheme?.paletteHex ?? {})
-		},
-		surfaceHex: {
-			...DEFAULT_THEME.surfaceHex,
-			...(userTheme?.surfaceHex ?? {})
-		},
-		border: {
-			...DEFAULT_THEME.border,
-			...(userTheme?.border ?? {})
-		}
-	};
-
-	$effect.pre(() => {
-		setThemeTokens(theme);
-
-		setCSSProperty(`--border-width`, `${theme.border.widthPx}px`);
-		setCSSProperty(`--border-radius`, `${theme.border.radiusRem}rem`);
-		setCSSProperty(`--spacing`, `${theme.spacingRem}rem`);
-
-		initializeThemeMode();
-	});
-</script>
-
-<style>
-	:global(:root),
-	:global(:root[data-theme='light']) {
-		color-scheme: light;
-		--color-background: var(--color-light-background);
-		--color-background-soft: var(--color-light-background-soft);
-		--color-background-saturated: var(--color-light-background-saturated);
-		--color-background-contrast: var(--color-light-background-contrast);
-		--color-foreground: var(--color-light-foreground);
-		--color-foreground-soft: var(--color-light-foreground-soft);
-		--color-foreground-saturated: var(--color-light-foreground-saturated);
-		--color-foreground-contrast: var(--color-light-foreground-contrast);
-	}
-
-	:global(*) {
-		color: var(--color-foreground);
-	}
-
-	:global(body) {
-		background-color: var(--color-background);
-	}
-
-	:global(*) {
-		gap: var(--spacing);
-	}
-
-	:global(:root[data-theme='dark']) {
-		color-scheme: dark;
-		--color-background: var(--color-dark-background);
-		--color-background-soft: var(--color-dark-background-soft);
-		--color-background-saturated: var(--color-dark-background-saturated);
-		--color-background-contrast: var(--color-dark-background-contrast);
-		--color-foreground: var(--color-dark-foreground);
-		--color-foreground-soft: var(--color-dark-foreground-soft);
-		--color-foreground-saturated: var(--color-dark-foreground-saturated);
-		--color-foreground-contrast: var(--color-dark-foreground-contrast);
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) {
-			color-scheme: dark;
-			--color-background: var(--color-dark-background);
-			--color-background-soft: var(--color-dark-background-soft);
-			--color-background-saturated: var(--color-dark-background-saturated);
-			--color-background-contrast: var(--color-dark-background-contrast);
-			--color-foreground: var(--color-dark-foreground);
-			--color-foreground-soft: var(--color-dark-foreground-soft);
-			--color-foreground-saturated: var(--color-dark-foreground-saturated);
-			--color-foreground-contrast: var(--color-dark-foreground-contrast);
-		}
-	}
-</style>

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

@@ -1,3 +0,0 @@
-declare const Theme: import("svelte").Component<Record<string, any>, {}, "">;
-type Theme = ReturnType<typeof Theme>;
-export default Theme;

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

@@ -1,27 +0,0 @@
-export type ThemeMode = 'light' | 'dark';
-export interface ThemeProps {
-    paletteHex: {
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        info: string;
-    };
-    surfaceHex: {
-        background: string;
-        foreground: string;
-    };
-    border: {
-        widthPx: number;
-        radiusRem: number;
-        colorHex: string;
-    };
-    spacingRem: number;
-}
-export interface ColorTokenProps {
-    soft: string;
-    saturated: string;
-    contrast: string;
-}
-export declare const DEFAULT_THEME: ThemeProps;

package/dist/base/theme/types.js

@@ -1,20 +0,0 @@
-export const DEFAULT_THEME = {
-    paletteHex: {
-        primary: '#736CED',
-        secondary: '#E08D79',
-        success: '#60935D',
-        warning: '#E67F0D',
-        danger: '#F03A47',
-        info: '#4D9DE0'
-    },
-    surfaceHex: {
-        background: '#eee',
-        foreground: '#222'
-    },
-    border: {
-        widthPx: 1,
-        radiusRem: 0.5,
-        colorHex: '#CCCCCC'
-    },
-    spacingRem: 1
-};

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

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

package/dist/base/toggle/index.js

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

package/dist/base/toggle/toggle.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">
-	import type { ToggleProps } from './types.js';
-
-	const {
-		checked = false,
-		disabled = false,
-		size = 'medium',
-		onChange
-	}: ToggleProps = $props();
-
-	const handleClick = () => {
-		if (!disabled) {
-			onChange(!checked);
-		}
-	};
-</script>
-
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-	class={size}
-	class:checked
-	class:disabled
-	role="switch"
-	aria-checked={checked}
-	aria-disabled={disabled}
-	onclick={handleClick}
->
-	<span></span>
-</div>
-
-<style>
-	div {
-		--internal-track-width: 2.5rem;
-		--internal-track-height: 1.5rem;
-		--internal-thumb-size: 1.125rem;
-		--internal-thumb-offset: 0.1875rem;
-
-		position: relative;
-		width: var(--internal-track-width);
-		height: var(--internal-track-height);
-		background: var(--color-foreground-soft);
-		border-radius: calc(var(--internal-track-height) / 2);
-		cursor: pointer;
-		transition: background 0.2s ease;
-	}
-
-	div.checked {
-		background: var(--color-primary);
-	}
-
-	/* Size variants */
-	div.x-small {
-		--internal-track-width: 1.5rem;
-		--internal-track-height: 0.875rem;
-		--internal-thumb-size: 0.625rem;
-		--internal-thumb-offset: 0.125rem;
-	}
-
-	div.small {
-		--internal-track-width: 2rem;
-		--internal-track-height: 1.25rem;
-		--internal-thumb-size: 0.875rem;
-		--internal-thumb-offset: 0.1875rem;
-	}
-
-	div.medium {
-		--internal-track-width: 2.5rem;
-		--internal-track-height: 1.5rem;
-		--internal-thumb-size: 1.125rem;
-		--internal-thumb-offset: 0.1875rem;
-	}
-
-	div.large {
-		--internal-track-width: 3rem;
-		--internal-track-height: 1.75rem;
-		--internal-thumb-size: 1.375rem;
-		--internal-thumb-offset: 0.1875rem;
-	}
-
-	div.x-large {
-		--internal-track-width: 3.5rem;
-		--internal-track-height: 2rem;
-		--internal-thumb-size: 1.625rem;
-		--internal-thumb-offset: 0.1875rem;
-	}
-
-	span {
-		position: absolute;
-		top: var(--internal-thumb-offset);
-		left: var(--internal-thumb-offset);
-		width: var(--internal-thumb-size);
-		height: var(--internal-thumb-size);
-		background: var(--color-background);
-		border-radius: 50%;
-		transition: left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-
-	div.checked span {
-		left: calc(
-			var(--internal-track-width) - var(--internal-thumb-size) - var(--internal-thumb-offset)
-		);
-	}
-
-	div.disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
-</style>

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

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

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

@@ -1,7 +0,0 @@
-import type { Size } from '../types.ts';
-export interface ToggleProps {
-    onChange: (checked: boolean) => void;
-    checked?: boolean;
-    disabled?: boolean;
-    size?: Size;
-}

package/dist/base/tree-view/index.d.ts

@@ -1,3 +0,0 @@
-export { default as TreeView } from './tree-view.svelte';
-export { default as TreeNode } from './tree-node.svelte';
-export * from './types.ts';

package/dist/base/tree-view/index.js

@@ -1,3 +0,0 @@
-export { default as TreeView } from './tree-view.svelte';
-export { default as TreeNode } from './tree-node.svelte';
-export * from "./types.js";

package/dist/base/tree-view/tree-node.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">
-	import type { TreeNodeProps } from './types.js';
-	import Icon from '../icon/icon.svelte';
-	import TreeNode from './tree-node.svelte';
-	const {
-		node,
-		level,
-		size,
-		onSelect,
-		selectedIds,
-		filledIcon,
-		wide,
-		expandOnSelect
-	}: TreeNodeProps = $props();
-
-	let expanded: boolean = $state(false);
-	let selected: boolean = $derived(selectedIds?.has(node.id) ?? false);
-
-	const hasChildren = $derived(node.children && node.children.length > 0);
-
-	const toggleExpand = (e: MouseEvent) => {
-		e.stopPropagation();
-		if (hasChildren) expanded = !expanded;
-	};
-
-	const handleSelect = () => {
-		onSelect(node.id);
-		if (expandOnSelect && hasChildren) expanded = true;
-	};
-
-	const nextLevel = $derived(level + 1);
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class={size}
-	class:selected
-	style:padding-left="calc({level} * var(--tree-indent))"
-	onclick={handleSelect}
-	class:wide
->
-	{#if hasChildren}
-		<button class:expanded onclick={toggleExpand}>
-			<Icon name="chevron_right" {size} color={selected ? 'primary' : undefined} />
-		</button>
-	{:else}
-		<span class="spacer"></span>
-	{/if}
-
-	{#if node.icon}
-		<Icon
-			name={node.icon}
-			filled={selected || filledIcon}
-			{size}
-			color={selected ? 'primary' : undefined}
-		/>
-	{/if}
-
-	<span>{node.label}</span>
-</div>
-
-{#if expanded && hasChildren}
-	{#each node.children as child (child.id)}
-		<TreeNode
-			node={child}
-			level={nextLevel}
-			{size}
-			{onSelect}
-			{selectedIds}
-			{filledIcon}
-			{wide}
-			{expandOnSelect}
-		/>
-	{/each}
-{/if}
-
-<style>
-	div,
-	span,
-	button {
-		transition: all 0.1s ease-in-out;
-	}
-
-	div {
-		--tree-indent: 1em;
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		padding: 0.25em 0.5em;
-		gap: 0.25em;
-		border-radius: var(--border-radius);
-		cursor: pointer;
-	}
-
-	div:hover {
-		background-color: color-mix(in srgb, var(--color-foreground) 10%, transparent);
-	}
-
-	.selected {
-		background-color: var(--color-primary-soft);
-	}
-	.selected:hover {
-		background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-primary-soft));
-	}
-
-	.selected span {
-		color: var(--color-primary);
-	}
-	span {
-		user-select: none;
-	}
-
-	button {
-		all: unset;
-		display: flex;
-		padding: 0.25em;
-		cursor: pointer;
-	}
-
-	button.expanded {
-		transform: rotate(90deg);
-	}
-
-	.spacer {
-		width: 1em;
-	}
-
-	.wide {
-		width: 100%;
-	}
-</style>

package/dist/base/tree-view/tree-view.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import type { TreeViewProps } from './types.js';
-	import TreeNode from './tree-node.svelte';
-
-	let {
-		data,
-		size = 'medium',
-		onSelect,
-		selectedIds,
-		wide,
-		filledIcon,
-		expandOnSelect
-	}: TreeViewProps = $props();
-</script>
-
-<div role="tree" class={size} class:wide>
-	{#each data as node (node.id)}
-		<TreeNode
-			{node}
-			level={0}
-			{size}
-			{onSelect}
-			{selectedIds}
-			{wide}
-			{filledIcon}
-			{expandOnSelect}
-		/>
-	{/each}
-</div>
-
-<style>
-	div {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.wide {
-		width: 100%;
-	}
-
-	.x-small {
-		gap: 0.125rem;
-	}
-	.small {
-		gap: 0.25rem;
-	}
-	.medium {
-		gap: 0.5rem;
-	}
-	.large {
-		gap: 0.75rem;
-	}
-	.x-large {
-		gap: 1rem;
-	}
-</style>