bref-ui 0.2.3 → 0.2.4

package/README.md

@@ -55,7 +55,8 @@ Bref handles:
 - [x] Icon
 - [x] Button
 - [x] Icon Button
-- [x] Loading
+- [x] Progress / Loading
+  - [x] Progress Bar
   - [x] Circular
   - [x] Pulsing Dots
   - [x] Morphing Shapes
@@ -64,12 +65,11 @@ Bref handles:
 - [-] Inputs
   - [x] Text Input (single line)
   - [x] Area Text Input
+  - [x] Slider (range)
   - [ ] File Input
   - [ ] Image Input
 - [ ] Avatar
-- [ ] Progress
 - [ ] Select
-- [ ] Slider
 - [ ] Skeleton
 - [ ] Checkbox
 - [ ] Badge

package/dist/base/index.d.ts

@@ -6,3 +6,4 @@ export * from './loading/index.ts';
 export * from './tree-view/index.ts';
 export * from './text-input/index.ts';
 export * from './slider/index.ts';
+export * from './progress-bar/index.ts';

package/dist/base/index.js

@@ -6,3 +6,4 @@ export * from "./loading/index.js";
 export * from "./tree-view/index.js";
 export * from "./text-input/index.js";
 export * from "./slider/index.js";
+export * from "./progress-bar/index.js";

package/dist/base/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export { default as ProgressBar } from './progress-bar.svelte';

package/dist/base/progress-bar/index.js

@@ -0,0 +1 @@
+export { default as ProgressBar } from './progress-bar.svelte';

package/dist/base/progress-bar/progress-bar.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import type { ProgressBarProps } from './types.js';
+
+	const {
+		value,
+		size = 'medium',
+		color = 'primary',
+		wide = false,
+		animateValue = false,
+		onValueClick
+	}: ProgressBarProps = $props();
+
+	const isIndeterminate = $derived(value === undefined);
+	const progressWidth = $derived(
+		value === undefined ? undefined : `${Math.min(100, Math.max(0, value))}%`
+	);
+	const isClickable = $derived(onValueClick !== undefined);
+
+	const handleClick = (e: MouseEvent) => {
+		if (!onValueClick) return;
+		const element = e.currentTarget as HTMLElement;
+		const rect = element.getBoundingClientRect();
+		const clickX = e.clientX - rect.left;
+		const percentage = Math.round((clickX / rect.width) * 100);
+		onValueClick(Math.min(100, Math.max(0, percentage)));
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- aria-valuenow={isIndeterminate ? undefined : clampedValue} -->
+<div
+	class={`${size} ${color}`}
+	class:wide
+	class:clickable={isClickable}
+	class:indeterminate={isIndeterminate}
+	class:animate={animateValue}
+	role="progressbar"
+	aria-valuemin={0}
+	aria-valuemax={100}
+	onclick={isClickable ? handleClick : undefined}
+>
+	<span class:indeterminate={isIndeterminate} style:width={progressWidth}></span>
+</div>
+
+<style>
+	div {
+		--internal-progress-height: 0.5rem;
+		--internal-progress-radius: calc(var(--internal-progress-height) * 0.5);
+
+		position: relative;
+		display: flex;
+		width: 12rem;
+		height: var(--internal-progress-height);
+		background-color: var(--internal-current-color-soft);
+		border-radius: var(--internal-progress-radius);
+		overflow: hidden;
+	}
+
+	.wide {
+		width: 100%;
+	}
+
+	.clickable {
+		cursor: pointer;
+	}
+
+	span {
+		height: 100%;
+		display: flex;
+		background-color: var(--internal-current-color);
+		border-radius: var(--internal-progress-radius);
+	}
+
+	.animate span:not(.indeterminate) {
+		transition: width 0.3s ease-out;
+	}
+
+	span.indeterminate {
+		animation: indeterminate-fill 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+	}
+
+	div.indeterminate {
+		justify-content: flex-start;
+		animation: indeterminate-container 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+	}
+
+	@keyframes indeterminate-fill {
+		0%,
+		100% {
+			width: 25%;
+			opacity: 0.5;
+		}
+
+		50% {
+			width: 100%;
+			opacity: 0.25;
+		}
+	}
+
+	@keyframes indeterminate-container {
+		0%,
+		100% {
+			padding-left: 0;
+		}
+		50% {
+			padding-left: 75%;
+		}
+	}
+
+	/* Sizes */
+	.x-small {
+		--internal-progress-height: 0.25rem;
+	}
+
+	.small {
+		--internal-progress-height: 0.375rem;
+	}
+
+	.medium {
+		--internal-progress-height: 0.5rem;
+	}
+
+	.large {
+		--internal-progress-height: 0.625rem;
+	}
+
+	.x-large {
+		--internal-progress-height: 0.75rem;
+	}
+
+	/* Color mappings */
+	.primary {
+		--internal-current-color: var(--color-primary);
+		--internal-current-color-soft: var(--color-primary-soft);
+	}
+
+	.secondary {
+		--internal-current-color: var(--color-secondary);
+		--internal-current-color-soft: var(--color-secondary-soft);
+	}
+
+	.success {
+		--internal-current-color: var(--color-success);
+		--internal-current-color-soft: var(--color-success-soft);
+	}
+
+	.warning {
+		--internal-current-color: var(--color-warning);
+		--internal-current-color-soft: var(--color-warning-soft);
+	}
+
+	.danger {
+		--internal-current-color: var(--color-danger);
+		--internal-current-color-soft: var(--color-danger-soft);
+	}
+
+	.info {
+		--internal-current-color: var(--color-info);
+		--internal-current-color-soft: var(--color-info-soft);
+	}
+
+	.foreground {
+		--internal-current-color: var(--color-foreground);
+		--internal-current-color-soft: var(--color-background-saturated);
+	}
+
+	.background {
+		--internal-current-color: var(--color-background);
+		--internal-current-color-soft: var(--color-foreground-saturated);
+	}
+</style>

package/dist/base/progress-bar/progress-bar.svelte.d.ts

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

package/dist/base/progress-bar/types.d.ts

@@ -0,0 +1,9 @@
+import type { Size, Color } from '../types.ts';
+export interface ProgressBarProps {
+    value?: number;
+    size?: Size;
+    color?: Color;
+    wide?: boolean;
+    animateValue?: boolean;
+    onValueClick?: (clickedValue: number) => void;
+}

package/dist/base/progress-bar/types.js

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

package/dist/internal/layout/types.js

@@ -70,33 +70,39 @@ export const PAGES = [
         ]
     },
     {
-        title: 'Loading',
-        description: 'Multiple loading indicator styles for different visual contexts',
-        href: '/loadings',
+        title: 'Progress / Loading',
+        description: 'Progress indicators and loading animations',
+        href: '/progress',
         icon: 'hourglass_empty',
         children: [
+            {
+                title: 'Progress Bar',
+                description: 'A progress bar with determinate and indeterminate states',
+                href: '/progress/progress-bar',
+                icon: 'linear_scale'
+            },
             {
                 title: 'Circular',
                 description: 'A classic spinning circle indicator for loading states',
-                href: '/loadings/circular',
+                href: '/progress/circular',
                 icon: 'autorenew'
             },
             {
                 title: 'Pulsing Dots',
                 description: 'Three dots that pulse in sequence to indicate loading',
-                href: '/loadings/pulsing-dots',
+                href: '/progress/pulsing-dots',
                 icon: 'more_horiz'
             },
             {
                 title: 'Morphing Shapes',
                 description: 'A shape that transforms through organic forms while rotating',
-                href: '/loadings/morphing-shapes',
+                href: '/progress/morphing-shapes',
                 icon: 'animation'
             },
             {
                 title: 'Textual',
                 description: 'Animated text with a typewriter effect that cycles through words',
-                href: '/loadings/textual',
+                href: '/progress/textual',
                 icon: 'text_fields'
             }
         ]

package/package.json

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