bref-ui 0.2.5 → 0.2.7

package/README.md

@@ -62,6 +62,7 @@ Bref handles:
   - [x] Morphing Shapes
   - [x] Textual
 - [x] Tree View
+- [x] Pill
 - [-] Inputs
   - [x] Text Input (single line)
   - [x] Area Text Input

package/dist/base/index.d.ts

@@ -7,3 +7,5 @@ export * from './tree-view/index.ts';
 export * from './text-input/index.ts';
 export * from './slider/index.ts';
 export * from './progress-bar/index.ts';
+export * from './pill/index.ts';
+export * from './select/index.ts';

package/dist/base/index.js

@@ -7,3 +7,5 @@ export * from "./tree-view/index.js";
 export * from "./text-input/index.js";
 export * from "./slider/index.js";
 export * from "./progress-bar/index.js";
+export * from "./pill/index.js";
+export * from "./select/index.js";

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

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

package/dist/base/pill/index.js

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

package/dist/base/pill/pill.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { PillProps } from './types.js';
+	import Icon from '../icon/icon.svelte';
+
+	const {
+		label,
+		size = 'medium',
+		color = 'primary',
+		variant = 'filled',
+		icon
+	}: PillProps = $props();
+</script>
+
+<div class={`${size} ${color} ${variant}`}>
+	{#if icon}
+		<Icon contrastMode={variant === 'filled'} {color} {...icon} {size} />
+	{/if}
+	<span>{label}</span>
+</div>
+
+<style>
+	div {
+		/* Size defaults (medium) */
+		--internal-pill-padding-y: calc(var(--spacing) * 0.375);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.75);
+		--internal-pill-font-size: 1rem;
+
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		flex-shrink: 0;
+		width: fit-content;
+		min-width: fit-content;
+		height: fit-content;
+		min-height: fit-content;
+		gap: 0.35em;
+		padding: var(--internal-pill-padding-y) var(--internal-pill-padding-x);
+		font-size: var(--internal-pill-font-size);
+		border-radius: 4rem;
+	}
+
+	span {
+		white-space: nowrap;
+		color: inherit;
+	}
+
+	/* Sizes - compact padding that scales proportionally */
+	.x-small {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.125);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.375);
+		--internal-pill-font-size: 0.75rem;
+	}
+
+	.small {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.25);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.5);
+		--internal-pill-font-size: 0.875rem;
+	}
+
+	.medium {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.375);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.75);
+		--internal-pill-font-size: 1rem;
+	}
+
+	.large {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.5);
+		--internal-pill-padding-x: calc(var(--spacing) * 1);
+		--internal-pill-font-size: 1.125rem;
+	}
+
+	.x-large {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.625);
+		--internal-pill-padding-x: calc(var(--spacing) * 1.25);
+		--internal-pill-font-size: 1.25rem;
+	}
+
+	/* 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);
+	}
+
+	/* Soft variant */
+	.soft {
+		background-color: var(--internal-current-color-soft);
+		color: var(--internal-current-color);
+	}
+
+	/* Ghost variant */
+	.ghost {
+		background-color: transparent;
+		color: var(--internal-current-color);
+	}
+</style>

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

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

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

@@ -0,0 +1,9 @@
+import type { IconProps } from '../icon/types.ts';
+import type { Color, Size, Variant } from '../types.ts';
+export interface PillProps {
+    label: string;
+    size?: Size;
+    color?: Color;
+    variant?: Variant;
+    icon?: Pick<IconProps, 'name' | 'filled' | 'ariaLabel'>;
+}

package/dist/base/pill/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as Select } from './select.svelte';
+export * from './types.ts';

package/dist/base/select/index.js

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

package/dist/base/select/select.svelte

@@ -0,0 +1,139 @@
+<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;
+		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.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/select.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+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/select/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "0.2.5",
+	"version": "0.2.7",
 	"description": "A Svelte UI component library using scoped CSS - minimal and flexible",
 	"license": "MIT",
 	"author": "feuerstein",