bref-ui 0.2.2 → 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

@@ -5,3 +5,5 @@ export * from './button/index.ts';
 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

@@ -5,3 +5,5 @@ export * from "./button/index.js";
 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/base/slider/index.d.ts

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

package/dist/base/slider/index.js

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

package/dist/base/slider/slider.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { SliderProps } from './types.js';
+
+	const {
+		value,
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		wide = false,
+		size = 'medium',
+		color = 'primary',
+		onChange,
+		...rest
+	}: SliderProps &
+		Omit<
+			SvelteHTMLElements['input'],
+			'value' | 'step' | 'min' | 'max' | 'disabled' | 'size'
+		> = $props();
+
+	const ratio = $derived((value - min) / (max - min));
+
+	const handleInput = (e: Event) => {
+		const newValue = Number((e.currentTarget as HTMLInputElement).value);
+		onChange(newValue);
+	};
+</script>
+
+<div class="track {size} {color}" class:wide class:disabled>
+	<div
+		class="fill"
+		style:width="calc({ratio} * (100% - var(--internal-track-height)) + var(--internal-track-height) /
+		2)"
+	></div>
+	<input {...rest} type="range" {min} {max} {step} {value} {disabled} oninput={handleInput} />
+</div>
+
+<style>
+	.track {
+		--internal-track-height: 0.5rem;
+		--internal-color: var(--color-primary);
+		--internal-color-soft: var(--color-primary-soft);
+		--internal-thumb-color: var(--color-primary-saturated);
+
+		position: relative;
+		min-width: 7.5rem;
+		height: var(--internal-track-height);
+		background: var(--internal-color-soft);
+		border-radius: calc(var(--internal-track-height) / 2);
+	}
+
+	.track.wide {
+		width: 100%;
+	}
+
+	/* Color variants */
+	.track.primary {
+		--internal-color: var(--color-primary);
+		--internal-color-soft: var(--color-primary-soft);
+		--internal-thumb-color: var(--color-primary-saturated);
+	}
+
+	.track.foreground {
+		--internal-color: var(--color-foreground);
+		--internal-color-soft: var(--color-foreground-soft);
+		--internal-thumb-color: var(--color-foreground-saturated);
+	}
+
+	/* Size variants */
+	.track.x-small {
+		--internal-track-height: 0.25rem;
+	}
+
+	.track.small {
+		--internal-track-height: 0.375rem;
+	}
+
+	.track.medium {
+		--internal-track-height: 0.5rem;
+	}
+
+	.track.large {
+		--internal-track-height: 0.625rem;
+	}
+
+	.track.x-large {
+		--internal-track-height: 0.75rem;
+	}
+
+	/* Fill bar */
+	.fill {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background: var(--internal-color);
+		border-radius: calc(var(--internal-track-height) / 2) 0 0 calc(var(--internal-track-height) / 2);
+		pointer-events: none;
+	}
+
+	/* Input */
+	input {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		-webkit-appearance: none;
+		appearance: none;
+		background: transparent;
+		outline: none;
+		cursor: pointer;
+	}
+
+	input:focus-visible {
+		outline: 0.1rem solid var(--internal-color);
+		outline-offset: 0.2rem;
+	}
+
+	/* Webkit thumb */
+	input::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: var(--internal-track-height);
+		height: var(--internal-track-height);
+		border-radius: 50%;
+		background: var(--internal-thumb-color);
+		cursor: pointer;
+		border: none;
+		box-shadow: 0 0.03rem 0.125rem rgba(0, 0, 0, 0.08);
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+	}
+
+	input::-webkit-slider-thumb:hover {
+		transform: scale(1.2);
+		box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.1);
+	}
+
+	input::-webkit-slider-thumb:active {
+		transform: scale(1.1);
+	}
+
+	/* Firefox thumb */
+	input::-moz-range-thumb {
+		width: var(--internal-track-height);
+		height: var(--internal-track-height);
+		border-radius: 50%;
+		background: var(--internal-thumb-color);
+		cursor: pointer;
+		border: none;
+		box-shadow: 0 0.03rem 0.125rem rgba(0, 0, 0, 0.08);
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+	}
+
+	input::-moz-range-thumb:hover {
+		transform: scale(1.2);
+		box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.1);
+	}
+
+	input::-moz-range-thumb:active {
+		transform: scale(1.1);
+	}
+
+	/* Firefox track */
+	input::-moz-range-track {
+		background: transparent;
+	}
+
+	/* Disabled state */
+	.track.disabled {
+		opacity: 0.4;
+	}
+
+	.track.disabled input {
+		cursor: not-allowed;
+	}
+
+	.track.disabled input::-webkit-slider-thumb {
+		cursor: not-allowed;
+	}
+
+	.track.disabled input::-moz-range-thumb {
+		cursor: not-allowed;
+	}
+</style>

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

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

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

@@ -0,0 +1,12 @@
+import type { Size, Color } from '../types.ts';
+export interface SliderProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    wide?: boolean;
+    size?: Size;
+    color?: Extract<Color, 'primary' | 'foreground'>;
+    onChange: (value: number) => void;
+}

package/dist/base/slider/types.js

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

package/dist/internal/layout/types.js

@@ -44,53 +44,65 @@ export const PAGES = [
         ]
     },
     {
-        title: 'Text Inputs',
-        description: 'Text input fields with customizable size, color, and validation states',
-        href: '/text-inputs',
+        title: 'Inputs',
+        description: 'Input fields for text, numbers, and selections',
+        href: '/inputs',
         icon: 'input',
         children: [
             {
                 title: 'Text Input',
                 description: 'Single-line text input fields with labels, placeholders, and icons',
-                href: '/text-inputs/text-input',
+                href: '/inputs/text-input',
                 icon: 'short_text'
             },
             {
                 title: 'Area Text Input',
                 description: 'Multi-line text area input fields with labels and placeholders',
-                href: '/text-inputs/area-text-input',
+                href: '/inputs/area-text-input',
                 icon: 'notes'
+            },
+            {
+                title: 'Slider',
+                description: 'Range slider for selecting numeric values within a range',
+                href: '/inputs/slider',
+                icon: 'tune'
             }
         ]
     },
     {
-        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.2",
+	"version": "0.2.4",
 	"description": "A Svelte UI component library using scoped CSS - minimal and flexible",
 	"license": "MIT",
 	"author": "feuerstein",