@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/display/Alert.svelte

@@ -1,179 +1,179 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import Icon from "../icon/Icon.svelte";
-  import { iconInfoCircle, iconAlertTriangle, iconCircleCheck, iconCircleX, iconX } from "../icon/index.js";
-
-  type AlertVariant = "default" | "secondary" | "success" | "warning" | "danger" | "info";
-
-  interface Props {
-    variant?: AlertVariant;
-    title?: string;
-    dismissible?: boolean;
-    children?: Snippet;
-    ondismiss?: () => void;
-    class?: string;
-  }
-
-  let { variant = "default", title, dismissible = false, children, ondismiss, class: className = "" }: Props = $props();
-
-  let visible = $state(true);
-
-  const icons: Record<AlertVariant, string> = {
-    default: iconInfoCircle,
-    secondary: iconInfoCircle,
-    info: iconInfoCircle,
-    success: iconCircleCheck,
-    warning: iconAlertTriangle,
-    danger: iconCircleX,
-  };
-
-  function dismiss() {
-    visible = false;
-    ondismiss?.();
-  }
-</script>
-
-{#if visible}
-  <div class="alert alert-{variant} {className}" role="alert">
-    <div class="alert-icon">
-      <Icon svg={icons[variant]} size="20px" />
-    </div>
-    <div class="alert-content">
-      {#if title}
-        <div class="alert-title">{title}</div>
-      {/if}
-      {#if children}
-        <div class="alert-message">
-          {@render children()}
-        </div>
-      {/if}
-    </div>
-    {#if dismissible}
-      <button class="alert-dismiss" onclick={dismiss} aria-label="Dismiss">
-        <Icon svg={iconX} size="16px" />
-      </button>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .alert {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--pui-spacing-3);
-    padding: var(--pui-spacing-4);
-    border-radius: var(--pui-radius-md);
-    border: 1px solid;
-  }
-
-  .alert-default {
-    background-color: rgba(122, 74, 153, 0.15);
-    color: rgb(122, 74, 153);
-    border-color: var(--pui-color-primary);
-  }
-
-  .alert-secondary {
-    background-color: var(--pui-color-gray-50);
-    border-color: var(--pui-color-gray-200);
-    color: var(--pui-color-gray-800);
-  }
-
-  .alert-info {
-    background-color: var(--pui-alert-info-bg);
-    border-color: var(--pui-alert-info-border);
-    color: var(--pui-color-info-dark, var(--pui-color-info));
-  }
-
-  .alert-success {
-    background-color: var(--pui-alert-success-bg);
-    border-color: var(--pui-alert-success-border);
-    color: var(--pui-color-success-dark, var(--pui-color-success));
-  }
-
-  .alert-warning {
-    background-color: var(--pui-alert-warning-bg);
-    border-color: var(--pui-alert-warning-border);
-    color: var(--pui-color-warning-dark, var(--pui-color-warning));
-  }
-
-  .alert-danger {
-    background-color: var(--pui-alert-danger-bg);
-    border-color: var(--pui-alert-danger-border);
-    color: var(--pui-color-danger, var(--pui-color-danger));
-  }
-
-  :global(.dark) .alert-default {
-    background-color: rgba(122, 74, 153, 0.15);
-    color: var(--pui-color-primary-light);
-    border-color: var(--pui-color-primary);
-  }
-
-  :global(.dark) .alert-secondary {
-    background-color: var(--pui-color-dark-200);
-    border-color: var(--pui-color-dark-border);
-    color: var(--pui-color-gray-100);
-  }
-
-  :global(.dark) .alert-info {
-    background-color: var(--pui-alert-info-bg);
-    border-color: var(--pui-alert-info-border);
-    color: #6edff6;
-  }
-
-  :global(.dark) .alert-success {
-    background-color: var(--pui-alert-success-bg);
-    border-color: var(--pui-alert-success-border);
-    color: #75b798;
-  }
-
-  :global(.dark) .alert-warning {
-    background-color: var(--pui-alert-warning-bg);
-    border-color: var(--pui-alert-warning-border);
-    color: #ffda6a;
-  }
-
-  :global(.dark) .alert-danger {
-    background-color: var(--pui-alert-danger-bg);
-    border-color: var(--pui-alert-danger-border);
-    color: #ea868f;
-  }
-
-  .alert-icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .alert-content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .alert-title {
-    font-weight: var(--pui-font-weight-semibold);
-    margin-bottom: var(--pui-spacing-1);
-  }
-
-  .alert-message {
-    line-height: var(--pui-line-height-relaxed);
-  }
-
-  .alert-dismiss {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: var(--pui-spacing-1);
-    border-radius: var(--pui-radius-sm);
-    color: inherit;
-    opacity: 0.7;
-    transition: opacity var(--pui-transition-fast) var(--pui-ease-in-out);
-  }
-
-  .alert-dismiss:hover {
-    opacity: 1;
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Icon from "../icon/Icon.svelte";
+  import { iconInfoCircle, iconAlertTriangle, iconCircleCheck, iconCircleX, iconX } from "../icon/index.js";
+
+  type AlertVariant = "default" | "secondary" | "success" | "warning" | "danger" | "info";
+
+  interface Props {
+    variant?: AlertVariant;
+    title?: string;
+    dismissible?: boolean;
+    children?: Snippet;
+    ondismiss?: () => void;
+    class?: string;
+  }
+
+  let { variant = "default", title, dismissible = false, children, ondismiss, class: className = "" }: Props = $props();
+
+  let visible = $state(true);
+
+  const icons: Record<AlertVariant, string> = {
+    default: iconInfoCircle,
+    secondary: iconInfoCircle,
+    info: iconInfoCircle,
+    success: iconCircleCheck,
+    warning: iconAlertTriangle,
+    danger: iconCircleX,
+  };
+
+  function dismiss() {
+    visible = false;
+    ondismiss?.();
+  }
+</script>
+
+{#if visible}
+  <div class="alert alert-{variant} {className}" role="alert">
+    <div class="alert-icon">
+      <Icon svg={icons[variant]} size="20px" />
+    </div>
+    <div class="alert-content">
+      {#if title}
+        <div class="alert-title">{title}</div>
+      {/if}
+      {#if children}
+        <div class="alert-message">
+          {@render children()}
+        </div>
+      {/if}
+    </div>
+    {#if dismissible}
+      <button class="alert-dismiss" onclick={dismiss} aria-label="Dismiss">
+        <Icon svg={iconX} size="16px" />
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--pui-spacing-3);
+    padding: var(--pui-spacing-4);
+    border-radius: var(--pui-radius-md);
+    border: 1px solid;
+  }
+
+  .alert-default {
+    background-color: rgba(122, 74, 153, 0.15);
+    color: rgb(122, 74, 153);
+    border-color: var(--pui-color-primary);
+  }
+
+  .alert-secondary {
+    background-color: var(--pui-color-gray-50);
+    border-color: var(--pui-color-gray-200);
+    color: var(--pui-color-gray-800);
+  }
+
+  .alert-info {
+    background-color: var(--pui-alert-info-bg);
+    border-color: var(--pui-alert-info-border);
+    color: var(--pui-color-info-dark, var(--pui-color-info));
+  }
+
+  .alert-success {
+    background-color: var(--pui-alert-success-bg);
+    border-color: var(--pui-alert-success-border);
+    color: var(--pui-color-success-dark, var(--pui-color-success));
+  }
+
+  .alert-warning {
+    background-color: var(--pui-alert-warning-bg);
+    border-color: var(--pui-alert-warning-border);
+    color: var(--pui-color-warning-dark, var(--pui-color-warning));
+  }
+
+  .alert-danger {
+    background-color: var(--pui-alert-danger-bg);
+    border-color: var(--pui-alert-danger-border);
+    color: var(--pui-color-danger, var(--pui-color-danger));
+  }
+
+  :global(.dark) .alert-default {
+    background-color: rgba(122, 74, 153, 0.15);
+    color: var(--pui-color-primary-light);
+    border-color: var(--pui-color-primary);
+  }
+
+  :global(.dark) .alert-secondary {
+    background-color: var(--pui-color-dark-200);
+    border-color: var(--pui-color-dark-border);
+    color: var(--pui-color-gray-100);
+  }
+
+  :global(.dark) .alert-info {
+    background-color: var(--pui-alert-info-bg);
+    border-color: var(--pui-alert-info-border);
+    color: #6edff6;
+  }
+
+  :global(.dark) .alert-success {
+    background-color: var(--pui-alert-success-bg);
+    border-color: var(--pui-alert-success-border);
+    color: #75b798;
+  }
+
+  :global(.dark) .alert-warning {
+    background-color: var(--pui-alert-warning-bg);
+    border-color: var(--pui-alert-warning-border);
+    color: #ffda6a;
+  }
+
+  :global(.dark) .alert-danger {
+    background-color: var(--pui-alert-danger-bg);
+    border-color: var(--pui-alert-danger-border);
+    color: #ea868f;
+  }
+
+  .alert-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .alert-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .alert-title {
+    font-weight: var(--pui-font-weight-semibold);
+    margin-bottom: var(--pui-spacing-1);
+  }
+
+  .alert-message {
+    line-height: var(--pui-line-height-relaxed);
+  }
+
+  .alert-dismiss {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--pui-spacing-1);
+    border-radius: var(--pui-radius-sm);
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity var(--pui-transition-fast) var(--pui-ease-in-out);
+  }
+
+  .alert-dismiss:hover {
+    opacity: 1;
+  }
+</style>

package/dist/display/Avatar.svelte

@@ -1,166 +1,166 @@
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-
-	interface Props {
-		src: string;
-		alt?: string;
-		size?: number;
-		initials?: string;
-		fallBackSvg?: string;
-		class?: string;
-		href?: string;
-		backgroundColor?: string;
-		shape?: 'circle' | 'rounded' | 'square';
-		onClick?: () => void;
-	}
-
-	let {
-		src,
-		alt = '',
-		initials = '',
-		size = 2.5,
-		class: classes = '',
-		fallBackSvg,
-		href,
-		backgroundColor,
-		shape = 'circle',
-		onClick
-	}: Props = $props();
-
-	let imgExists = $state(true);
-	const sizeText = $derived(size ? `${size}rem` : '');
-	const svgSizeText = $derived(size ? `${size - 1}rem` : '');
-	const initialsSizeText = $derived(size ? `${size / 2}rem` : '');
-
-	function handleError() {
-		imgExists = false;
-	}
-</script>
-
-{#snippet img()}
-	{#if imgExists && src}
-		<img
-			{src}
-			{alt}
-			class="avatar {shape}"
-			style="width: {sizeText}; height: {sizeText};"
-			onerror={handleError}
-		/>
-	{:else if initials}
-		<div
-			class="avatar {shape}"
-			style="font-size: {initialsSizeText}; width: {sizeText}; height: {sizeText}; {backgroundColor
-				? `background-color: ${backgroundColor};`
-				: ''}"
-		>
-			{initials}
-		</div>
-	{:else if fallBackSvg}
-		<div
-			class="avatar {shape}"
-			style="width: {sizeText}; height: {sizeText}; {backgroundColor
-				? `background-color: ${backgroundColor};`
-				: ''}"
-		>
-			<Icon svg={fallBackSvg} size={svgSizeText} />
-		</div>
-	{:else}
-		<div
-			class="avatar {shape}"
-			style="width: {sizeText}; height: {sizeText}; background-color: {backgroundColor
-				? backgroundColor
-				: '#ccc'};"
-		>
-			?
-		</div>
-	{/if}
-{/snippet}
-
-<div class="avatar-container {classes}">
-	{#if onClick}
-		<button onclick={onClick}>
-			{@render img()}
-		</button>
-	{:else if href}
-		<a {href}>
-			{@render img()}
-		</a>
-	{:else}
-		{@render img()}
-	{/if}
-</div>
-
-<style>
-	.avatar-container {
-		display: inline-flex;
-		position: relative;
-	}
-
-	.avatar-container button,
-	.avatar-container a {
-		display: inline-flex;
-		background: none;
-		border: none;
-		color: var(--pui-color-black);
-		padding: 0;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-		text-decoration: none;
-
-		.avatar {
-			cursor: pointer;
-
-			&:hover {
-				background: var(--pui-color-primary);
-				color: var(--pui-text-primary);
-			}
-		}
-
-		&:hover {
-			transform: scale(1.1);
-		}
-	}
-
-	.avatar {
-		object-fit: cover;
-		background: var(--pui-color-gray-200);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	.avatar.circle {
-		border-radius: var(--pui-radius-full);
-	}
-
-	.avatar.rounded {
-		border-radius: var(--pui-radius-lg);
-	}
-
-	.initials {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--pui-color-white);
-		font-weight: var(--pui-font-weight-bold);
-		border-radius: var(--pui-radius-full);
-	}
-
-	:global(.dark) {
-		.avatar-container button,
-		.avatar-container a {
-			color: var(--pui-text-primary);
-
-			.avatar {
-				&:hover {
-					background: var(--pui-color-secondary);
-					color: var(--pui-color-black);
-				}
-			}
-		}
-
-		.avatar {
-			background: var(--pui-color-dark-500);
-		}
-	}
-</style>
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+
+	interface Props {
+		src: string;
+		alt?: string;
+		size?: number;
+		initials?: string;
+		fallBackSvg?: string;
+		class?: string;
+		href?: string;
+		backgroundColor?: string;
+		shape?: 'circle' | 'rounded' | 'square';
+		onClick?: () => void;
+	}
+
+	let {
+		src,
+		alt = '',
+		initials = '',
+		size = 2.5,
+		class: classes = '',
+		fallBackSvg,
+		href,
+		backgroundColor,
+		shape = 'circle',
+		onClick
+	}: Props = $props();
+
+	let imgExists = $state(true);
+	const sizeText = $derived(size ? `${size}rem` : '');
+	const svgSizeText = $derived(size ? `${size - 1}rem` : '');
+	const initialsSizeText = $derived(size ? `${size / 2}rem` : '');
+
+	function handleError() {
+		imgExists = false;
+	}
+</script>
+
+{#snippet img()}
+	{#if imgExists && src}
+		<img
+			{src}
+			{alt}
+			class="avatar {shape}"
+			style="width: {sizeText}; height: {sizeText};"
+			onerror={handleError}
+		/>
+	{:else if initials}
+		<div
+			class="avatar {shape}"
+			style="font-size: {initialsSizeText}; width: {sizeText}; height: {sizeText}; {backgroundColor
+				? `background-color: ${backgroundColor};`
+				: ''}"
+		>
+			{initials}
+		</div>
+	{:else if fallBackSvg}
+		<div
+			class="avatar {shape}"
+			style="width: {sizeText}; height: {sizeText}; {backgroundColor
+				? `background-color: ${backgroundColor};`
+				: ''}"
+		>
+			<Icon svg={fallBackSvg} size={svgSizeText} />
+		</div>
+	{:else}
+		<div
+			class="avatar {shape}"
+			style="width: {sizeText}; height: {sizeText}; background-color: {backgroundColor
+				? backgroundColor
+				: '#ccc'};"
+		>
+			?
+		</div>
+	{/if}
+{/snippet}
+
+<div class="avatar-container {classes}">
+	{#if onClick}
+		<button onclick={onClick}>
+			{@render img()}
+		</button>
+	{:else if href}
+		<a {href}>
+			{@render img()}
+		</a>
+	{:else}
+		{@render img()}
+	{/if}
+</div>
+
+<style>
+	.avatar-container {
+		display: inline-flex;
+		position: relative;
+	}
+
+	.avatar-container button,
+	.avatar-container a {
+		display: inline-flex;
+		background: none;
+		border: none;
+		color: var(--pui-color-black);
+		padding: 0;
+		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		text-decoration: none;
+
+		.avatar {
+			cursor: pointer;
+
+			&:hover {
+				background: var(--pui-color-primary);
+				color: var(--pui-text-primary);
+			}
+		}
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+
+	.avatar {
+		object-fit: cover;
+		background: var(--pui-color-gray-200);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+	}
+
+	.avatar.circle {
+		border-radius: var(--pui-radius-full);
+	}
+
+	.avatar.rounded {
+		border-radius: var(--pui-radius-lg);
+	}
+
+	.initials {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--pui-color-white);
+		font-weight: var(--pui-font-weight-bold);
+		border-radius: var(--pui-radius-full);
+	}
+
+	:global(.dark) {
+		.avatar-container button,
+		.avatar-container a {
+			color: var(--pui-text-primary);
+
+			.avatar {
+				&:hover {
+					background: var(--pui-color-secondary);
+					color: var(--pui-color-black);
+				}
+			}
+		}
+
+		.avatar {
+			background: var(--pui-color-dark-500);
+		}
+	}
+</style>