bref-ui 0.3.0 → 0.3.1

package/dist/base/index.d.ts

@@ -8,5 +8,6 @@ export * from './text-input/index.ts';
 export * from './slider/index.ts';
 export * from './progress-bar/index.ts';
 export * from './pill/index.ts';
+export * from './pill-selection/index.ts';
 export * from './select/index.ts';
 export * from './toggle/index.ts';

package/dist/base/index.js

@@ -8,5 +8,6 @@ export * from "./text-input/index.js";
 export * from "./slider/index.js";
 export * from "./progress-bar/index.js";
 export * from "./pill/index.js";
+export * from "./pill-selection/index.js";
 export * from "./select/index.js";
 export * from "./toggle/index.js";

package/dist/base/pill/pill.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
 	import type { PillProps } from './types.js';
 	import Icon from '../icon/icon.svelte';
 
@@ -8,11 +7,24 @@
 		size = 'medium',
 		color = 'primary',
 		variant = 'filled',
-		icon
+		icon,
+		onClick,
+		disabled = false
 	}: PillProps = $props();
+
+	const handleClick = () => {
+		if (!disabled && onClick) onClick();
+	};
 </script>
 
-<div class={`${size} ${color} ${variant}`}>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+	class={`${size} ${color} ${variant}`}
+	class:clickable={!!onClick}
+	class:disabled
+	onclick={handleClick}
+>
 	{#if icon}
 		<Icon contrastMode={variant === 'filled'} {color} {...icon} {size} />
 	{/if}
@@ -20,6 +32,10 @@
 </div>
 
 <style>
+	div,
+	span {
+		transition: all 0.2s ease-in-out;
+	}
 	div {
 		/* Size defaults (medium) */
 		--internal-pill-padding-y: calc(var(--spacing) * 0.375);
@@ -41,6 +57,15 @@
 		border-radius: 4rem;
 	}
 
+	div.clickable {
+		cursor: pointer;
+	}
+
+	div.disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
 	span {
 		white-space: nowrap;
 		color: inherit;

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

@@ -6,4 +6,6 @@ export interface PillProps {
     color?: Color;
     variant?: Variant;
     icon?: Pick<IconProps, 'name' | 'filled' | 'ariaLabel'>;
+    onClick?: () => void;
+    disabled?: boolean;
 }

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

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

package/dist/base/pill-selection/index.js

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

package/dist/base/pill-selection/pill-selection.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { PillSelectionProps } from './types.js';
+	import Pill from '../pill/pill.svelte';
+
+	const {
+		items,
+		selection,
+		onSelect,
+		maxSelectionLength,
+		disableOthersOnFull = false,
+		size = 'medium',
+		color = 'primary'
+	}: PillSelectionProps = $props();
+
+	const isFull = $derived(
+		maxSelectionLength !== undefined && selection.length >= maxSelectionLength
+	);
+
+	const handleClick = (id: string) => {
+		const selected = selection.includes(id);
+		if (selected) onSelect(selection.filter((s) => s !== id));
+		else if (isFull && !disableOthersOnFull) onSelect([...selection.slice(1), id]);
+		else if (!isFull) onSelect([...selection, id]);
+	};
+</script>
+
+<div>
+	{#each items as item}
+		{@const selected = selection.includes(item.id)}
+		<Pill
+			label={item.label}
+			icon={item.icon}
+			{size}
+			{color}
+			variant={selected ? 'filled' : 'soft'}
+			disabled={disableOthersOnFull && isFull && !selected}
+			onClick={() => handleClick(item.id)}
+		/>
+	{/each}
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+</style>

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

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

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

@@ -0,0 +1,16 @@
+import type { IconProps } from '../icon/types.ts';
+import type { Color, Size } from '../types.ts';
+export interface PillSelectionItem {
+    id: string;
+    label: string;
+    icon?: Pick<IconProps, 'name' | 'filled' | 'ariaLabel'>;
+}
+export interface PillSelectionProps {
+    items: PillSelectionItem[];
+    selection: string[];
+    onSelect: (selection: string[]) => void;
+    maxSelectionLength?: number;
+    disableOthersOnFull?: boolean;
+    size?: Size;
+    color?: Color;
+}

package/dist/base/pill-selection/types.js

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

package/package.json

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