@placeholderco/placeholder-ui 1.0.12 → 2.0.0

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

@@ -1,17 +1,26 @@
-import type { Snippet } from "svelte";
-type PopoverPosition = "top" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
-type PopoverTrigger = "click" | "hover";
-interface Props {
+import type { Snippet } from 'svelte';
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+type PopoverTrigger = 'click' | 'hover';
+export interface PopoverProps {
+    /** Whether the popover is visible (bindable) */
     show?: boolean;
+    /** Text label for the default trigger button */
     label?: string | undefined;
+    /** Position of the popover relative to trigger */
     position?: PopoverPosition;
+    /** Additional CSS classes */
     class?: string;
+    /** Custom width for the popover content */
     cssWidth?: string;
+    /** Custom trigger button content */
     button?: Snippet;
+    /** Popover content */
     children?: Snippet;
+    /** How to trigger the popover */
     trigger?: PopoverTrigger;
+    /** Delay before showing on hover (ms) */
     hoverDelay?: number;
 }
-declare const Popover: import("svelte").Component<Props, {}, "show">;
+declare const Popover: import("svelte").Component<PopoverProps, {}, "show">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/ui/ProgressBar.svelte

@@ -77,17 +77,13 @@
 <style>
 	.progress-bar {
 		width: 100%;
-		background-color: var(--pui-color-gray-200);
+		background-color: var(--border-color);
 		overflow: hidden;
 		display: flex;
 	}
 
-	:global(.dark) .progress-bar {
-		background-color: var(--pui-color-dark-border);
-	}
-
 	.rounded {
-		border-radius: var(--pui-radius-full);
+		border-radius: 9999px;
 	}
 
 	.size-sm {
@@ -117,55 +113,57 @@
 	}
 
 	.label {
-		font-weight: var(--pui-font-weight-semibold);
+		font-weight: 600;
 		line-height: 1;
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
 
 	.size-sm .label {
-		font-size: var(--pui-font-size-xs);
-		padding: 0 var(--pui-spacing-half);
+		font-size: 0.5rem;
+		padding: 0 0.125rem;
 	}
 
 	.size-md .label {
-		font-size: var(--pui-font-size-xs);
-		padding: 0 var(--pui-spacing-2);
+		font-size: 0.75rem;
+		padding: 0 0.5rem;
 	}
 
 	.size-lg .label {
-		font-size: var(--pui-font-size-sm);
-		padding: 0 var(--pui-spacing-2);
+		font-size: 0.875rem;
+		padding: 0 0.625rem;
 	}
 
 	/* Variant colors */
-	.primary {
-		background-color: var(--pui-color-primary);
-		color: var(--pui-color-white);
+	.primary,
+	.midnight {
+		background-color: var(--ui-primary);
+		color: #fff;
 	}
 
-	.secondary {
-		background-color: var(--pui-color-secondary);
-		color: var(--pui-color-primary);
+	.accent,
+	.pistachio {
+		background-color: var(--ui-accent);
+		color: var(--ui-primary);
 	}
 
-	.accent {
-		background-color: var(--pui-color-accent);
-		color: var(--pui-color-white);
+	.tertiary,
+	.turquoise {
+		background-color: var(--ui-tertiary);
+		color: var(--ui-primary);
 	}
 
 	.danger {
-		background-color: var(--pui-color-danger);
-		color: var(--pui-color-white);
+		background-color: var(--danger-bg);
+		color: #fff;
 	}
 
-	.success {
-		background-color: var(--pui-color-success);
-		color: var(--pui-color-white);
+	.secondary {
+		background-color: var(--accent-color);
+		color: #fff;
 	}
 
-	.warning {
-		background-color: var(--pui-color-warning);
-		color: var(--pui-color-primary);
+	:global(.dark) .secondary {
+		color: var(--ui-primary);
 	}
 </style>

package/dist/ui/ProgressBarVariant.d.ts

@@ -1 +1,7 @@
-export type ProgressBarVariant = 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'warning';
+/**
+ * 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/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;