@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/ui/ProgressBar.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import type { ProgressBarVariant } from './ProgressBarVariant.js';
+
+	export interface ProgressBarSegment {
+		/** Percentage width of this segment (0-100). All segments should sum to <= 100. */
+		value: number;
+		/** Color variant for this segment */
+		variant?: ProgressBarVariant;
+		/** Label text displayed inside the segment */
+		label?: string;
+	}
+
+	export interface ProgressBarProps {
+		/** Current progress value (0-100). Used in simple mode. */
+		value?: number;
+		/** Color variant for simple mode */
+		variant?: ProgressBarVariant;
+		/** Label text displayed centered on the filled portion */
+		label?: string;
+		/** Array of segments for multi-segment mode. Overrides value/variant/label when provided. */
+		segments?: ProgressBarSegment[];
+		/** Height of the bar */
+		size?: 'sm' | 'md' | 'lg';
+		/** Whether the bar has rounded ends */
+		rounded?: boolean;
+		/** Whether to animate width changes */
+		animated?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		value = 0,
+		variant = 'primary',
+		label = undefined,
+		segments = undefined,
+		size = 'md',
+		rounded = true,
+		animated = true,
+		class: classes = ''
+	}: ProgressBarProps = $props();
+
+	let clampedValue = $derived(Math.min(100, Math.max(0, value)));
+	let isMultiSegment = $derived(segments !== undefined && segments.length > 0);
+</script>
+
+<div
+	class="progress-bar size-{size} {rounded ? 'rounded' : ''} {classes}"
+	role="progressbar"
+	aria-valuenow={isMultiSegment ? undefined : clampedValue}
+	aria-valuemin={0}
+	aria-valuemax={100}
+>
+	{#if isMultiSegment && segments}
+		{#each segments as segment}
+			<div
+				class="segment {segment.variant ?? 'primary'} {animated ? 'animated' : ''}"
+				style="width: {Math.min(100, Math.max(0, segment.value))}%"
+			>
+				{#if segment.label}
+					<span class="label">{segment.label}</span>
+				{/if}
+			</div>
+		{/each}
+	{:else}
+		<div
+			class="fill {variant} {animated ? 'animated' : ''}"
+			style="width: {clampedValue}%"
+		>
+			{#if label}
+				<span class="label">{label}</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.progress-bar {
+		width: 100%;
+		background-color: var(--border-color);
+		overflow: hidden;
+		display: flex;
+	}
+
+	.rounded {
+		border-radius: 9999px;
+	}
+
+	.size-sm {
+		height: 8px;
+	}
+
+	.size-md {
+		height: 20px;
+	}
+
+	.size-lg {
+		height: 28px;
+	}
+
+	.fill,
+	.segment {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
+	.animated {
+		transition: width 0.4s ease-in-out;
+	}
+
+	.label {
+		font-weight: 600;
+		line-height: 1;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.size-sm .label {
+		font-size: 0.5rem;
+		padding: 0 0.125rem;
+	}
+
+	.size-md .label {
+		font-size: 0.75rem;
+		padding: 0 0.5rem;
+	}
+
+	.size-lg .label {
+		font-size: 0.875rem;
+		padding: 0 0.625rem;
+	}
+
+	/* Variant colors */
+	.primary,
+	.midnight {
+		background-color: var(--ui-primary);
+		color: #fff;
+	}
+
+	.accent,
+	.pistachio {
+		background-color: var(--ui-accent);
+		color: var(--ui-primary);
+	}
+
+	.tertiary,
+	.turquoise {
+		background-color: var(--ui-tertiary);
+		color: var(--ui-primary);
+	}
+
+	.danger {
+		background-color: var(--danger-bg);
+		color: #fff;
+	}
+
+	.secondary {
+		background-color: var(--accent-color);
+		color: #fff;
+	}
+
+	:global(.dark) .secondary {
+		color: var(--ui-primary);
+	}
+</style>

package/dist/ui/ProgressBar.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { ProgressBarVariant } from './ProgressBarVariant.js';
+export interface ProgressBarSegment {
+    /** Percentage width of this segment (0-100). All segments should sum to <= 100. */
+    value: number;
+    /** Color variant for this segment */
+    variant?: ProgressBarVariant;
+    /** Label text displayed inside the segment */
+    label?: string;
+}
+export interface ProgressBarProps {
+    /** Current progress value (0-100). Used in simple mode. */
+    value?: number;
+    /** Color variant for simple mode */
+    variant?: ProgressBarVariant;
+    /** Label text displayed centered on the filled portion */
+    label?: string;
+    /** Array of segments for multi-segment mode. Overrides value/variant/label when provided. */
+    segments?: ProgressBarSegment[];
+    /** Height of the bar */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether the bar has rounded ends */
+    rounded?: boolean;
+    /** Whether to animate width changes */
+    animated?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const ProgressBar: import("svelte").Component<ProgressBarProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/ui/ProgressBarVariant.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Colour variants for ProgressBar. `midnight`, `pistachio` and `turquoise` are
+ * legacy aliases for `primary`, `accent` and `tertiary`.
+ */
+export type ProgressBarVariant = 'primary' | 'accent' | 'tertiary' | 'danger' | 'secondary' | LegacyProgressBarVariant;
+/** @deprecated Use `primary`, `accent` and `tertiary` instead. */
+export type LegacyProgressBarVariant = 'midnight' | 'pistachio' | 'turquoise';

package/dist/ui/ProgressBarVariant.js

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

package/dist/ui/SegmentedControl.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SegmentedControl;
+type SegmentedControl = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SegmentedControl: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/Sortable.svelte

@@ -0,0 +1,163 @@
+<script lang="ts" module>
+	export interface SortableProps<T> {
+		/** Items to render — bindable so reorders write back */
+		items: T[];
+		/** Renders each item. Receives (item, index, dragging). */
+		children: import('svelte').Snippet<[T, number, boolean]>;
+		/** Stable key per item — defaults to index (not safe for reordered lists with snippets that need identity) */
+		getKey?: (item: T, index: number) => string | number;
+		/** Layout direction */
+		direction?: 'vertical' | 'horizontal';
+		/** When true, dragging is disabled */
+		disabled?: boolean;
+		/** CSS selector for drag handle within each item. When set, drag starts only from this element. */
+		handle?: string;
+		/** Group name — scopes this list's drag type. Note: Sortable is single-list reorder only; to move
+		 * items between containers use MultiSortable, whose grouped lists exchange items. */
+		group?: string;
+		/** FLIP animation duration in ms as items shift during a drag. 0 disables. Requires a stable
+		 * getKey — with the default index key, reordering swaps content in place and nothing moves. */
+		animation?: number;
+		/** Fires when the order changes */
+		onChange?: (items: T[]) => void;
+		class?: string;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import { flip } from 'svelte/animate';
+	import { draggable, droppable, type DragContext } from '../util/DragDrop.js';
+
+	let {
+		items = $bindable(),
+		children,
+		getKey = (_: T, i: number) => i,
+		direction = 'vertical',
+		disabled = false,
+		handle,
+		group = 'default',
+		animation = 150,
+		onChange,
+		class: classes = ''
+	}: SortableProps<T> = $props();
+
+	const SORTABLE_ID = Math.random().toString(36).slice(2);
+	const TYPE = $derived(`pui-sortable:${group}`);
+
+	const reducedMotion =
+		typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	const flipDuration = $derived(reducedMotion ? 0 : animation);
+
+	interface SortablePayload {
+		sortableId: string;
+		index: number;
+	}
+
+	let draggingIndex = $state<number | null>(null);
+	let container = $state<HTMLElement>();
+	/** Order at drag start — restored if the drag is cancelled (Esc or dropped outside the list). */
+	let dragSnapshot: T[] | null = null;
+	let dropped = false;
+
+	function isOwnDrag(ctx: DragContext<SortablePayload>) {
+		return ctx.payload.sortableId === SORTABLE_ID;
+	}
+
+	/**
+	 * Live reorder: instead of showing a drop marker, the dragged item moves in the array
+	 * as the pointer crosses item midpoints and FLIP animates everything into place. The
+	 * target slot is the number of midpoints (dragged item excluded) the pointer has
+	 * passed — comparing that against the current index is what keeps this stable while
+	 * displaced items are still animating under the pointer.
+	 */
+	function handleDragOver(e: DragEvent, ctx: DragContext<SortablePayload>) {
+		if (!isOwnDrag(ctx) || draggingIndex === null || !container) return;
+		const els = container.querySelectorAll<HTMLElement>(':scope > .pui-sortable-item');
+		const pointer = direction === 'vertical' ? e.clientY : e.clientX;
+		let target = 0;
+		for (let idx = 0; idx < els.length; idx++) {
+			if (idx === draggingIndex) continue;
+			const rect = els[idx].getBoundingClientRect();
+			const mid =
+				direction === 'vertical' ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+			if (pointer > mid) target++;
+		}
+		if (target === draggingIndex) return;
+		const next = items.slice();
+		const [moved] = next.splice(draggingIndex, 1);
+		next.splice(target, 0, moved);
+		items = next;
+		draggingIndex = target;
+	}
+
+	function handleDrop(ctx: DragContext<SortablePayload>) {
+		if (!isOwnDrag(ctx)) return;
+		dropped = true;
+		const snapshot = dragSnapshot;
+		if (snapshot && items.some((item, idx) => item !== snapshot[idx])) {
+			onChange?.(items);
+		}
+	}
+</script>
+
+<div
+	bind:this={container}
+	class="pui-sortable {direction} {classes}"
+	use:droppable={{
+		accepts: TYPE,
+		canDrop: (ctx) => isOwnDrag(ctx as DragContext<SortablePayload>),
+		onDragOver: (ctx, e) => handleDragOver(e, ctx as DragContext<SortablePayload>),
+		onDrop: (ctx) => handleDrop(ctx as DragContext<SortablePayload>)
+	}}
+>
+	{#each items as item, i (getKey(item, i))}
+		<div
+			class="pui-sortable-item"
+			class:is-dragging={draggingIndex === i}
+			animate:flip={{ duration: flipDuration }}
+			use:draggable={{
+				payload: { sortableId: SORTABLE_ID, index: i } satisfies SortablePayload,
+				type: TYPE,
+				source: SORTABLE_ID,
+				disabled,
+				handle,
+				onDragStart: () => {
+					draggingIndex = i;
+					dragSnapshot = items.slice();
+					dropped = false;
+				},
+				onDragEnd: () => {
+					if (!dropped && dragSnapshot) items = dragSnapshot;
+					draggingIndex = null;
+					dragSnapshot = null;
+				}
+			}}
+		>
+			{@render children(item, i, draggingIndex === i)}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.pui-sortable {
+		display: flex;
+		gap: 0.25rem;
+	}
+
+	.pui-sortable.vertical {
+		flex-direction: column;
+	}
+
+	.pui-sortable.horizontal {
+		flex-direction: row;
+	}
+
+	.pui-sortable-item {
+		position: relative;
+		transition: opacity 0.15s ease;
+	}
+
+	.pui-sortable-item.is-dragging {
+		opacity: 0.35;
+	}
+</style>

package/dist/ui/Sortable.svelte.d.ts

@@ -0,0 +1,47 @@
+export interface SortableProps<T> {
+    /** Items to render — bindable so reorders write back */
+    items: T[];
+    /** Renders each item. Receives (item, index, dragging). */
+    children: import('svelte').Snippet<[T, number, boolean]>;
+    /** Stable key per item — defaults to index (not safe for reordered lists with snippets that need identity) */
+    getKey?: (item: T, index: number) => string | number;
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** When true, dragging is disabled */
+    disabled?: boolean;
+    /** CSS selector for drag handle within each item. When set, drag starts only from this element. */
+    handle?: string;
+    /** Group name — scopes this list's drag type. Note: Sortable is single-list reorder only; to move
+     * items between containers use MultiSortable, whose grouped lists exchange items. */
+    group?: string;
+    /** FLIP animation duration in ms as items shift during a drag. 0 disables. Requires a stable
+     * getKey — with the default index key, reordering swaps content in place and nothing moves. */
+    animation?: number;
+    /** Fires when the order changes */
+    onChange?: (items: T[]) => void;
+    class?: string;
+}
+declare function $$render<T>(): {
+    props: SortableProps<T>;
+    exports: {};
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "items";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Sortable: $$IsomorphicComponent;
+type Sortable<T> = InstanceType<typeof Sortable<T>>;
+export default Sortable;