bref-ui 0.3.0 → 2.0.0

package/src/lib/tree-view/tree-node/chevron-button.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Icon from '../../icon/icon.svelte';
+
+	let attributes: HTMLButtonAttributes = $props();
+</script>
+
+<button {...attributes} type="button">
+	<span><Icon name="chevron_right" /></span>
+</button>
+
+<style>
+	* {
+		transition: all 150ms;
+	}
+	button {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--tree-action-size);
+		min-height: var(--tree-action-size);
+		padding: 0.25rem 0.5rem;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+	}
+	span {
+		display: inline-flex;
+		font-size: 1.25em;
+	}
+	button[aria-expanded='true'] span {
+		transform: rotate(90deg);
+	}
+	button:not(:disabled):hover {
+		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		* {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button:focus-visible {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/src/lib/tree-view/tree-node/content.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Icon from '../../icon/icon.svelte';
+	import type { TreeNodeContentProps } from '../types.js';
+
+	let { item, ...attributes }: TreeNodeContentProps = $props();
+</script>
+
+<button {...attributes} type="button" disabled={item.disabled}>
+	{#if item.icon}<Icon {...item.icon} label={undefined} />{/if}
+	<span>{item.label}</span>
+</button>
+
+<style>
+	* {
+		transition: all 150ms;
+	}
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: start;
+		flex: 1;
+		gap: 0.5rem;
+		min-width: 0;
+		min-height: var(--tree-action-size);
+		padding: 0.25rem 0.5rem;
+		border: 0;
+		border-radius: 999px;
+		outline: none;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		cursor: pointer;
+	}
+	button::before {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		content: '';
+	}
+	button:focus-visible::before {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	button:disabled {
+		color: var(--color-muted);
+		cursor: default;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		* {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button:disabled {
+			color: GrayText;
+		}
+		button:focus-visible::before {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/src/lib/tree-view/tree-node/delete-button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Icon from '../../icon/icon.svelte';
+
+	let attributes: HTMLButtonAttributes = $props();
+</script>
+
+<button {...attributes} type="button"><Icon name="close" /></button>
+
+<style>
+	button {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--tree-action-size);
+		min-height: var(--tree-action-size);
+		padding: 0.25rem 0.5rem;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		transition: all 150ms;
+	}
+	button:not(:disabled):hover {
+		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	button:disabled {
+		color: var(--color-muted);
+		cursor: default;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		button {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button:disabled {
+			color: GrayText;
+		}
+		button:focus-visible {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/src/lib/tree-view/tree-node/tree-node.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { fly } from 'svelte/transition';
+	import ChevronButton from './chevron-button.svelte';
+	import DeleteButton from './delete-button.svelte';
+	import Content from './content.svelte';
+	import RecursiveNode from './tree-node.svelte';
+	import type { TreeNodeProps } from '../types.js';
+
+	let {
+		item,
+		selection = $bindable(),
+		defaultExpanded = false,
+		onDelete,
+		indent = 0
+	}: TreeNodeProps = $props();
+
+	// svelte-ignore state_referenced_locally
+	let expanded = $state(defaultExpanded);
+	const childrenId = $props.id();
+
+	const selected = $derived(
+		Array.isArray(selection) ? selection.includes(item.id) : selection === item.id
+	);
+	const select = () => {
+		selection = Array.isArray(selection)
+			? selected
+				? selection.filter((id) => id !== item.id)
+				: [...selection, item.id]
+			: item.id;
+	};
+</script>
+
+<div
+	in:fly|global={{ y: -4, duration: prefersReducedMotion.current ? 0 : 150 }}
+	data-selected={selected}
+	data-disabled={item.disabled}
+	style:padding-left={`calc(0.25rem + ${indent * 1.25}rem)`}
+>
+	{#if item.children?.length}
+		<ChevronButton
+			aria-label={`Children of ${item.label}`}
+			aria-expanded={expanded}
+			aria-controls={childrenId}
+			onclick={() => (expanded = !expanded)}
+		/>
+	{:else}
+		<span data-spacer aria-hidden="true"></span>
+	{/if}
+	<Content {item} aria-pressed={selected} onclick={select} />
+	{#if onDelete}
+		<DeleteButton
+			aria-label={`Delete ${item.label}`}
+			disabled={item.disabled}
+			onclick={() => onDelete?.(item.id)}
+		/>
+	{/if}
+</div>
+{#if item.children?.length}
+	<div role="group" id={childrenId} hidden={!expanded}>
+		{#each item.children as child (child.id)}
+			<RecursiveNode indent={indent + 1} item={child} bind:selection {defaultExpanded} {onDelete} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+	* {
+		transition: all 150ms;
+	}
+	div[data-selected] {
+		box-sizing: border-box;
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		min-height: var(--tree-height);
+		padding: 0.125rem 0.25rem;
+		border: 1px solid transparent;
+		border-radius: 999px;
+		overflow-wrap: anywhere;
+	}
+	[data-spacer] {
+		flex: 0 0 var(--tree-action-size);
+	}
+	div[role='group'] {
+		display: contents;
+	}
+	div[hidden] {
+		display: none;
+	}
+	div[data-selected='true'] {
+		border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+		background: color-mix(in srgb, var(--color-primary) 16%, transparent);
+		color: var(--color-primary);
+	}
+	div[data-selected='false']:not([data-disabled='true']):hover {
+		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		* {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		div[data-selected='true'] {
+			border-color: Highlight;
+			color: Highlight;
+		}
+	}
+</style>

package/src/lib/tree-view/tree-view-section.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import type { TreeSectionProps } from './types.js';
+
+	let { label, description, icon }: TreeSectionProps = $props();
+</script>
+
+<header>
+	<div>
+		{#if icon}<Icon {...icon} label={undefined} />{/if}
+		<span>{label}</span>
+	</div>
+	{#if description}<p>{description}</p>{/if}
+</header>
+
+<style>
+	header {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.25rem;
+		padding: 0.75rem 0.5rem 0.25rem;
+		color: var(--color-muted);
+		font-size: 0.8em;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		overflow-wrap: anywhere;
+	}
+	div {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+	}
+	p {
+		margin: 0;
+		font-weight: 400;
+		letter-spacing: normal;
+		text-transform: none;
+	}
+</style>

package/src/lib/tree-view/tree-view.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import TreeNode from './tree-node/tree-node.svelte';
+	import TreeViewSection from './tree-view-section.svelte';
+	import type { TreeViewProps } from './types.js';
+
+	let {
+		items,
+		sections = [],
+		label = 'Tree view',
+		size = 'medium',
+		selection = $bindable(),
+		defaultExpanded = false,
+		onDelete,
+		node
+	}: TreeViewProps = $props();
+</script>
+
+{#snippet nodes(items: TreeViewProps['items'])}
+	<div data-nodes>
+		{#each items as item (item.id)}
+			{#if node}
+				{@render node(item)}
+			{:else}
+				<TreeNode {item} bind:selection {defaultExpanded} {onDelete} />
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<div role="group" aria-label={label} data-size={size}>
+	{@render nodes(items)}
+	{#each sections as section (section.id)}
+		<section aria-label={section.label}>
+			<TreeViewSection {...section} />
+			{@render nodes(section.items)}
+		</section>
+	{/each}
+</div>
+
+<style>
+	div {
+		--tree-height: 2.75rem;
+		--tree-action-size: 2.25rem;
+		display: grid;
+		gap: 0.375rem;
+		min-width: 0;
+		color: var(--color-foreground);
+		font: inherit;
+	}
+	div[data-size='small'] {
+		--tree-height: 2.5rem;
+		--tree-action-size: 2rem;
+		font-size: 0.875rem;
+	}
+	div[data-size='large'] {
+		--tree-height: 3.25rem;
+		--tree-action-size: 2.5rem;
+		font-size: 1.125rem;
+	}
+	div[data-nodes] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+</style>

package/src/lib/tree-view/types.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { BaseSize, IconProps } from '../types.js';
+
+export interface TreeItemProps {
+	id: string;
+	label: string;
+	icon?: Omit<IconProps, 'label' | 'size' | 'color'>;
+	children?: TreeItemProps[];
+	disabled?: boolean;
+}
+
+export interface TreeSectionProps extends Pick<TreeItemProps, 'id' | 'label' | 'icon'> {
+	description?: string;
+	items: TreeItemProps[];
+}
+
+export interface TreeViewProps {
+	items: TreeItemProps[];
+	sections?: TreeSectionProps[];
+	label?: string;
+	size?: BaseSize;
+	selection?: string | string[];
+	defaultExpanded?: boolean;
+	onDelete?: (id: string) => void;
+	node?: Snippet<[TreeItemProps]>;
+}
+
+export interface TreeNodeProps extends Pick<
+	TreeViewProps,
+	'selection' | 'defaultExpanded' | 'onDelete'
+> {
+	item: TreeItemProps;
+	indent?: number;
+}
+
+export interface TreeNodeContentProps extends HTMLButtonAttributes {
+	item: TreeItemProps;
+}

package/src/lib/types.ts

@@ -0,0 +1,45 @@
+export type BaseSize = 'small' | 'medium' | 'large';
+export type Size = 'x-small' | BaseSize | 'x-large';
+export type Variant = 'neutral' | 'soft' | 'filled';
+export type StatusColor = 'info' | 'success' | 'warning' | 'error';
+export type Color = 'primary' | 'secondary' | 'foreground' | 'background' | 'muted' | StatusColor;
+export type Orientation = 'horizontal' | 'vertical';
+export type Dimension = 'fit' | 'fill';
+
+export type { ButtonProps } from './button/types.js';
+export type {
+	ComboboxProps,
+	ComboboxNativeProps,
+	ComboboxInputProps,
+	ComboboxListProps,
+	ComboboxOptionProps,
+	ComboboxFormProps
+} from './combobox/types.js';
+export type * from './icon/types.js';
+export type { SurfaceBaseProps, SurfaceProps, SurfaceRadius } from './surface/types.js';
+export type * from './theme/types.ts';
+export type { CheckboxProps } from './checkbox/types.js';
+export type { SwitchProps } from './switch/types.js';
+export type { ProgressProps } from './progress/types.js';
+export type { SpinnerProps } from './spinner/types.js';
+export type { PopoverProps } from './popover/types.js';
+export type {
+	DialogActionProps,
+	DialogHeaderDataProps,
+	DialogHeaderProps,
+	DialogProps
+} from './dialog/types.js';
+export type { TextInputProps } from './text-input/types.js';
+export type { TextAreaProps } from './text-area/types.js';
+export type * from './tree-view/types.js';
+export type { PillDataProps, PillProps } from './pill/types.js';
+export type { PillGroupProps } from './pill-group/types.js';
+export type { PillChoiceGroupProps } from './pill-choice-group/types.js';
+export type {
+	OptionProps,
+	SelectEmptyProps,
+	SelectOptionDataProps,
+	SelectListProps,
+	SelectProps,
+	SelectTriggerProps
+} from './select/types.js';

package/README.md

@@ -1,110 +0,0 @@
-# Bref: a Svelte UI Component Library
-
-**[Live Demo](https://feuersteiner.github.io/bref/)**
-
-Bref is a Svelte UI component library designed to be minimal, flexible, and easy to use. It uses Svelte's built-in scoped CSS for styling, no external CSS frameworks required.
-
-## What We Promise
-
-- **Pure CSS with scoped styles**: Uses Svelte's native styling system for clean, maintainable components
-- **Base UI components with escape hatches**: Access raw CSS properties when you need full control
-- **Clear naming conventions**: Component names resemble HTML as much as possible to avoid confusion
-- **Section-based components**: For more complex UI needs like navbars, modals, and cards
-- **Marketing site components**: Ready-made components for building landing pages and marketing sites
-- **Theming component**: A simple component to style the entire UI library (colors, padding, spacing, fonts, borders...) to your desires
-- **WIP: CLI tool**: Import components directly into your codebase and customize them at will
-
-## Installation
-
-```
-npm install bref-ui
-```
-
-## Usage
-
-```tsx
-<script lang="ts">
-  import { Button } from 'bref-ui';
-</script>
-
-<Button onclick={() => console.log('Clicked!')}>Click Me</Button>
-```
-
-## Why Bref?
-
-- **Scoped CSS**: Uses Svelte's built-in scoped styling, each component's styles are encapsulated and won't leak or conflict.
-- **Minimal**: Only essential components, nothing extra.
-- **Flexible**: Use as an npm package or copy components directly into your project with our CLI tool (WIP).
-- **Batteries included theming**: Just provide your base colors and we handle the rest (see below).
-
-## Theming: Just Bring Your Colors
-
-Bref is a **batteries included** theming solution. You don't need to be a color theory expert or spend hours crafting the perfect palette.
-
-Simply provide your base theme colors, and Bref automatically generates all the necessary CSS variables with proper contrast ratios, hover states, and luminance variations. No more manually calculating shades, tints, or ensuring accessibility compliance.
-
-Bref handles:
-
-- **Shade generation**: Automatically creates lighter and darker variants
-- **Contrast calculation**: Ensures text remains readable on all backgrounds
-- **State variations**: Hover, active, and disabled states just work
-- **Dark mode**: Seamlessly adapts your palette for dark themes
-
-## Base Components
-
-- [x] Icon
-- [x] Button
-- [x] Icon Button
-- [x] Progress / Loading
-  - [x] Progress Bar
-  - [x] Circular
-  - [x] Pulsing Dots
-  - [x] Morphing Shapes
-  - [x] Textual
-- [x] Tree View
-- [x] Pill
-- [-] Inputs
-  - [x] Text Input (single line)
-  - [x] Area Text Input
-  - [x] Slider (range)
-  - [ ] File Input
-  - [ ] Image Input
-- [ ] Avatar
-- [ ] Select
-- [ ] Skeleton
-- [ ] Checkbox
-- [ ] Badge
-- [ ] Popover
-- [ ] Radio
-- [ ] Switch
-- [ ] Tooltip
-- [ ] Dialog
-- [ ] Toast
-- [ ] Accordion
-
-## Section Components
-
-- [ ] Nav
-- [ ] Aside
-- [ ] Header
-- [ ] Footer
-- [ ] Article
-- [ ] Card
-- [ ] Tabs
-- [ ] Table
-- [ ] Form
-
-## Marketing Components
-
-- [ ] Hero
-- [ ] Features
-- [ ] Pricing
-- [ ] FAQ
-- [ ] Testimonials
-- [ ] CTA
-
-> If you need something you don't see here, feel free to open an issue or a PR!
-
-## License
-
-MIT