@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/ui/Stepper.svelte

@@ -1,355 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Icon from '../icon/Icon.svelte';
-	import { iconCheck } from '../icon/index.js';
-
-	interface StepItem {
-		label: string;
-		description?: string;
-		icon?: string;
-	}
-
-	interface Props {
-		active?: number;
-		steps?: StepItem[];
-		orientation?: 'horizontal' | 'vertical';
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		color?: 'primary' | 'secondary' | 'accent' | 'success';
-		iconSize?: number;
-		allowStepClick?: boolean;
-		allowStepSelect?: boolean;
-		completedIcon?: string;
-		class?: string;
-		onStepClick?: (step: number) => void;
-		stepContent?: Snippet<[number, StepItem]>;
-		children?: Snippet;
-	}
-
-	let {
-		active = $bindable(0),
-		steps = [],
-		orientation = 'horizontal',
-		size = 'md',
-		color = 'primary',
-		iconSize = 24,
-		allowStepClick = false,
-		allowStepSelect = true,
-		completedIcon = undefined,
-		class: classes = '',
-		onStepClick,
-		stepContent,
-		children
-	}: Props = $props();
-
-	function handleStepClick(index: number) {
-		if (!allowStepClick && !allowStepSelect) return;
-		if (allowStepSelect && index <= active) {
-			active = index;
-			onStepClick?.(index);
-		} else if (allowStepClick) {
-			active = index;
-			onStepClick?.(index);
-		}
-	}
-
-	function getStepState(index: number): 'completed' | 'active' | 'pending' {
-		if (index < active) return 'completed';
-		if (index === active) return 'active';
-		return 'pending';
-	}
-</script>
-
-<div class="stepper orientation-{orientation} size-{size} color-{color} {classes}">
-	{#each steps as step, index (index)}
-		{@const state = getStepState(index)}
-		<div class="step {state}" class:clickable={allowStepClick || (allowStepSelect && index <= active)}>
-			<button
-				type="button"
-				class="step-button"
-				disabled={!allowStepClick && (!allowStepSelect || index > active)}
-				onclick={() => handleStepClick(index)}
-				aria-current={state === 'active' ? 'step' : undefined}
-			>
-				<div class="step-icon-wrapper">
-					<div class="step-icon">
-						{#if state === 'completed'}
-							{#if completedIcon}
-								<Icon svg={completedIcon} size="{iconSize * 0.6}px" />
-							{:else}
-								<Icon svg={iconCheck} size="{iconSize * 0.6}px" />
-							{/if}
-						{:else if step.icon}
-							<Icon svg={step.icon} size="{iconSize * 0.6}px" />
-						{:else}
-							<span class="step-number">{index + 1}</span>
-						{/if}
-					</div>
-				</div>
-				<div class="step-content">
-					<div class="step-label">{step.label}</div>
-					{#if step.description}
-						<div class="step-description">{step.description}</div>
-					{/if}
-				</div>
-			</button>
-			{#if index < steps.length - 1}
-				<div class="step-separator" class:completed={index < active}></div>
-			{/if}
-		</div>
-	{/each}
-	{#if children}
-		<div class="step-panel">
-			{@render children()}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.stepper {
-		display: flex;
-		width: 100%;
-	}
-
-	/* Orientation */
-	.orientation-horizontal {
-		flex-direction: row;
-		align-items: flex-start;
-	}
-
-	.orientation-vertical {
-		flex-direction: column;
-	}
-
-	.step {
-		display: flex;
-		position: relative;
-	}
-
-	.orientation-horizontal .step {
-		flex: 1;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.orientation-vertical .step {
-		flex-direction: row;
-		align-items: flex-start;
-		padding-bottom: var(--pui-spacing-6);
-	}
-
-	.step-button {
-		display: flex;
-		background: none;
-		border: none;
-		cursor: default;
-		padding: 0;
-		text-align: center;
-	}
-
-	.step.clickable .step-button {
-		cursor: pointer;
-	}
-
-	.orientation-horizontal .step-button {
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.orientation-vertical .step-button {
-		flex-direction: row;
-		align-items: flex-start;
-		gap: var(--pui-spacing-3);
-		text-align: left;
-	}
-
-	.step-icon-wrapper {
-		position: relative;
-		z-index: 1;
-	}
-
-	.step-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		background-color: var(--pui-color-gray-200);
-		color: var(--pui-color-gray-600);
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	:global(.dark) .step-icon {
-		background-color: var(--pui-color-dark-border);
-		color: var(--pui-color-gray-400);
-	}
-
-	.step.active .step-icon {
-		background-color: var(--step-color, var(--pui-color-primary));
-		color: var(--pui-color-white);
-	}
-
-	.step.completed .step-icon {
-		background-color: var(--step-color, var(--pui-color-primary));
-		color: var(--pui-color-white);
-	}
-
-	/* Sizes */
-	.size-xs .step-icon {
-		width: 24px;
-		height: 24px;
-		font-size: var(--pui-font-size-xs);
-	}
-	.size-sm .step-icon {
-		width: 32px;
-		height: 32px;
-		font-size: var(--pui-font-size-sm);
-	}
-	.size-md .step-icon {
-		width: 40px;
-		height: 40px;
-		font-size: var(--pui-font-size-base);
-	}
-	.size-lg .step-icon {
-		width: 48px;
-		height: 48px;
-		font-size: var(--pui-font-size-md);
-	}
-	.size-xl .step-icon {
-		width: 56px;
-		height: 56px;
-		font-size: var(--pui-font-size-lg);
-	}
-
-	/* Colors */
-	.color-primary {
-		--step-color: var(--pui-color-primary);
-	}
-	.color-secondary {
-		--step-color: var(--pui-color-secondary);
-	}
-	.color-accent {
-		--step-color: var(--pui-color-accent);
-	}
-	.color-success {
-		--step-color: var(--pui-color-success);
-	}
-
-	.step-number {
-		font-weight: var(--pui-font-weight-semibold);
-	}
-
-	.step-content {
-		margin-top: var(--pui-spacing-2);
-	}
-
-	.orientation-vertical .step-content {
-		margin-top: 0;
-		padding-top: var(--pui-spacing-1);
-	}
-
-	.step-label {
-		font-weight: var(--pui-font-weight-medium);
-		color: var(--pui-color-gray-600);
-		font-size: var(--pui-font-size-sm);
-	}
-
-	:global(.dark) .step-label {
-		color: var(--pui-color-gray-400);
-	}
-
-	.step.active .step-label,
-	.step.completed .step-label {
-		color: var(--pui-color-gray-900);
-	}
-
-	:global(.dark) .step.active .step-label,
-	:global(.dark) .step.completed .step-label {
-		color: var(--pui-color-gray-100);
-	}
-
-	.step-description {
-		font-size: var(--pui-font-size-xs);
-		color: var(--pui-color-gray-500);
-		margin-top: var(--pui-spacing-0_5);
-	}
-
-	:global(.dark) .step-description {
-		color: var(--pui-color-gray-500);
-	}
-
-	/* Separator */
-	.step-separator {
-		background-color: var(--pui-color-gray-300);
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	:global(.dark) .step-separator {
-		background-color: var(--pui-color-dark-border);
-	}
-
-	.step-separator.completed {
-		background-color: var(--step-color, var(--pui-color-primary));
-	}
-
-	.orientation-horizontal .step-separator {
-		position: absolute;
-		top: 20px;
-		left: calc(50% + 24px);
-		right: calc(-50% + 24px);
-		height: 2px;
-	}
-
-	.size-xs.orientation-horizontal .step-separator {
-		top: 12px;
-		left: calc(50% + 16px);
-		right: calc(-50% + 16px);
-	}
-	.size-sm.orientation-horizontal .step-separator {
-		top: 16px;
-		left: calc(50% + 20px);
-		right: calc(-50% + 20px);
-	}
-	.size-lg.orientation-horizontal .step-separator {
-		top: 24px;
-		left: calc(50% + 28px);
-		right: calc(-50% + 28px);
-	}
-	.size-xl.orientation-horizontal .step-separator {
-		top: 28px;
-		left: calc(50% + 32px);
-		right: calc(-50% + 32px);
-	}
-
-	.orientation-vertical .step-separator {
-		position: absolute;
-		left: 19px;
-		top: 44px;
-		bottom: 4px;
-		width: 2px;
-	}
-
-	.size-xs.orientation-vertical .step-separator {
-		left: 11px;
-		top: 28px;
-	}
-	.size-sm.orientation-vertical .step-separator {
-		left: 15px;
-		top: 36px;
-	}
-	.size-lg.orientation-vertical .step-separator {
-		left: 23px;
-		top: 52px;
-	}
-	.size-xl.orientation-vertical .step-separator {
-		left: 27px;
-		top: 60px;
-	}
-
-	.step-panel {
-		margin-top: var(--pui-spacing-6);
-	}
-
-	.orientation-vertical .step-panel {
-		margin-top: 0;
-		margin-left: var(--pui-spacing-6);
-	}
-</style>

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

@@ -1,24 +0,0 @@
-import type { Snippet } from 'svelte';
-interface StepItem {
-    label: string;
-    description?: string;
-    icon?: string;
-}
-interface Props {
-    active?: number;
-    steps?: StepItem[];
-    orientation?: 'horizontal' | 'vertical';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'secondary' | 'accent' | 'success';
-    iconSize?: number;
-    allowStepClick?: boolean;
-    allowStepSelect?: boolean;
-    completedIcon?: string;
-    class?: string;
-    onStepClick?: (step: number) => void;
-    stepContent?: Snippet<[number, StepItem]>;
-    children?: Snippet;
-}
-declare const Stepper: import("svelte").Component<Props, {}, "active">;
-type Stepper = ReturnType<typeof Stepper>;
-export default Stepper;

package/dist/ui/Timeline.svelte

@@ -1,225 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Icon from '../icon/Icon.svelte';
-
-	interface TimelineItem {
-		title: string;
-		description?: string;
-		date?: string;
-		icon?: string;
-		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'gray';
-	}
-
-	interface Props {
-		items?: TimelineItem[];
-		active?: number;
-		bulletSize?: number;
-		lineWidth?: number;
-		align?: 'left' | 'right';
-		reverseActive?: boolean;
-		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'gray';
-		class?: string;
-		itemContent?: Snippet<[TimelineItem, number]>;
-		children?: Snippet;
-	}
-
-	let {
-		items = [],
-		active = -1,
-		bulletSize = 20,
-		lineWidth = 2,
-		align = 'left',
-		reverseActive = false,
-		color = 'primary',
-		class: classes = '',
-		itemContent,
-		children
-	}: Props = $props();
-
-	function isActive(index: number): boolean {
-		if (active < 0) return false;
-		return reverseActive ? index >= active : index <= active;
-	}
-
-	function getItemColor(item: TimelineItem, index: number): string {
-		if (item.color) return item.color;
-		return isActive(index) ? color : 'gray';
-	}
-</script>
-
-<div class="timeline align-{align} {classes}" style="--bullet-size: {bulletSize}px; --line-width: {lineWidth}px;">
-	{#if children}
-		{@render children()}
-	{:else}
-		{#each items as item, index (index)}
-			{@const itemColor = getItemColor(item, index)}
-			{@const itemActive = isActive(index)}
-			<div class="timeline-item color-{itemColor}" class:active={itemActive}>
-				<div class="timeline-bullet-wrapper">
-					<div class="timeline-bullet">
-						{#if item.icon}
-							<Icon svg={item.icon} size="{bulletSize * 0.6}px" />
-						{/if}
-					</div>
-					{#if index < items.length - 1}
-						<div class="timeline-line" class:active={isActive(index + 1)}></div>
-					{/if}
-				</div>
-				<div class="timeline-content">
-					{#if itemContent}
-						{@render itemContent(item, index)}
-					{:else}
-						<div class="timeline-header">
-							<div class="timeline-title">{item.title}</div>
-							{#if item.date}
-								<div class="timeline-date">{item.date}</div>
-							{/if}
-						</div>
-						{#if item.description}
-							<div class="timeline-description">{item.description}</div>
-						{/if}
-					{/if}
-				</div>
-			</div>
-		{/each}
-	{/if}
-</div>
-
-<style>
-	.timeline {
-		display: flex;
-		flex-direction: column;
-		position: relative;
-	}
-
-	.timeline-item {
-		display: flex;
-		position: relative;
-	}
-
-	.align-right .timeline-item {
-		flex-direction: row-reverse;
-	}
-
-	.timeline-bullet-wrapper {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		position: relative;
-		flex-shrink: 0;
-	}
-
-	.timeline-bullet {
-		width: var(--bullet-size);
-		height: var(--bullet-size);
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: var(--pui-color-gray-200);
-		border: var(--line-width) solid var(--bullet-color, var(--pui-color-gray-400));
-		color: var(--bullet-color, var(--pui-color-gray-400));
-		z-index: 1;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	:global(.dark) .timeline-bullet {
-		background-color: var(--pui-color-dark-200);
-	}
-
-	.timeline-item.active .timeline-bullet {
-		background-color: var(--bullet-color, var(--pui-color-primary));
-		color: var(--pui-color-white);
-	}
-
-	.timeline-line {
-		position: absolute;
-		top: var(--bullet-size);
-		width: var(--line-width);
-		height: calc(100% - var(--bullet-size) + var(--pui-spacing-4));
-		background-color: var(--pui-color-gray-300);
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	:global(.dark) .timeline-line {
-		background-color: var(--pui-color-dark-border);
-	}
-
-	.timeline-line.active {
-		background-color: var(--bullet-color, var(--pui-color-primary));
-	}
-
-	.timeline-content {
-		flex: 1;
-		padding-bottom: var(--pui-spacing-6);
-	}
-
-	.align-left .timeline-content {
-		padding-left: var(--pui-spacing-4);
-	}
-
-	.align-right .timeline-content {
-		padding-right: var(--pui-spacing-4);
-		text-align: right;
-	}
-
-	.timeline-header {
-		display: flex;
-		align-items: baseline;
-		gap: var(--pui-spacing-2);
-		flex-wrap: wrap;
-	}
-
-	.align-right .timeline-header {
-		flex-direction: row-reverse;
-	}
-
-	.timeline-title {
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-color-gray-900);
-		font-size: var(--pui-font-size-base);
-	}
-
-	:global(.dark) .timeline-title {
-		color: var(--pui-color-gray-100);
-	}
-
-	.timeline-date {
-		font-size: var(--pui-font-size-xs);
-		color: var(--pui-color-gray-500);
-	}
-
-	.timeline-description {
-		margin-top: var(--pui-spacing-1);
-		font-size: var(--pui-font-size-sm);
-		color: var(--pui-color-gray-600);
-		line-height: var(--pui-line-height-relaxed);
-	}
-
-	:global(.dark) .timeline-description {
-		color: var(--pui-color-gray-400);
-	}
-
-	/* Colors */
-	.color-primary {
-		--bullet-color: var(--pui-color-primary);
-	}
-	.color-secondary {
-		--bullet-color: var(--pui-color-secondary);
-	}
-	.color-accent {
-		--bullet-color: var(--pui-color-accent);
-	}
-	.color-success {
-		--bullet-color: var(--pui-color-success);
-	}
-	.color-warning {
-		--bullet-color: var(--pui-color-warning);
-	}
-	.color-danger {
-		--bullet-color: var(--pui-color-danger);
-	}
-	.color-gray {
-		--bullet-color: var(--pui-color-gray-400);
-	}
-</style>

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

@@ -1,23 +0,0 @@
-import type { Snippet } from 'svelte';
-interface TimelineItem {
-    title: string;
-    description?: string;
-    date?: string;
-    icon?: string;
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'gray';
-}
-interface Props {
-    items?: TimelineItem[];
-    active?: number;
-    bulletSize?: number;
-    lineWidth?: number;
-    align?: 'left' | 'right';
-    reverseActive?: boolean;
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'gray';
-    class?: string;
-    itemContent?: Snippet<[TimelineItem, number]>;
-    children?: Snippet;
-}
-declare const Timeline: import("svelte").Component<Props, {}, "">;
-type Timeline = ReturnType<typeof Timeline>;
-export default Timeline;