@sentropic/design-system-svelte 0.4.1 → 0.5.0

package/dist/DatePicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DatePicker.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB,CAAC;AAGJ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,eAAe,GAAG,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA4UJ,QAAA,MAAM,UAAU,0DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/FileUploader.svelte

@@ -0,0 +1,431 @@
+<script lang="ts" module>
+  export type FileUploadStatus = "idle" | "uploading" | "complete" | "error";
+
+  export type FileUploadItem = {
+    file: File;
+    status: FileUploadStatus;
+    progress?: number;
+    error?: string;
+  };
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type FileUploaderProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    maxSizeBytes?: number;
+    disabled?: boolean;
+    files?: File[];
+    onfiles?: (files: File[]) => void;
+    triggerLabel?: string;
+    dropzoneLabel?: string;
+    removeLabel?: (filename: string) => string;
+    maxSizeErrorLabel?: (filename: string, maxSizeBytes: number) => string;
+    id?: string;
+    class?: string;
+  };
+
+  let {
+    label,
+    helperText,
+    errorText,
+    invalid = false,
+    accept,
+    multiple = false,
+    maxSizeBytes,
+    disabled = false,
+    files = $bindable([]),
+    onfiles,
+    triggerLabel,
+    dropzoneLabel = "Drag and drop files here",
+    removeLabel = (filename) => `Remove ${filename}`,
+    maxSizeErrorLabel = (filename, max) =>
+      `${filename} exceeds the ${formatSize(max)} size limit`,
+    id,
+    class: className,
+    ...rest
+  }: FileUploaderProps = $props();
+
+  const generatedId = `st-file-uploader-${Math.random().toString(36).slice(2, 9)}`;
+  const inputId = $derived(id ?? generatedId);
+  const helperId = $derived(`${inputId}-help`);
+  const errorId = $derived(`${inputId}-error`);
+
+  let inputRef = $state<HTMLInputElement | null>(null);
+  let isDragOver = $state(false);
+
+  const isInvalid = $derived(invalid || Boolean(errorText));
+  const effectiveTriggerLabel = $derived(
+    triggerLabel ?? (multiple ? "Choose files" : "Choose file")
+  );
+
+  function fieldClasses() {
+    return ["st-field", "st-fileUploader-field", className].filter(Boolean).join(" ");
+  }
+
+  function dropzoneClasses() {
+    return [
+      "st-fileUploader__dropzone",
+      isDragOver ? "st-fileUploader__dropzone--dragover" : null,
+      isInvalid ? "st-fileUploader__dropzone--invalid" : null,
+      disabled ? "st-fileUploader__dropzone--disabled" : null
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  function formatSize(bytes: number): string {
+    if (!Number.isFinite(bytes) || bytes < 0) return "";
+    if (bytes === 0) return "0 B";
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / Math.pow(1024, i);
+    const formatted = value >= 10 || i === 0 ? value.toFixed(0) : value.toFixed(1);
+    return `${formatted} ${units[i]}`;
+  }
+
+  function appendFiles(incoming: File[]) {
+    if (disabled || incoming.length === 0) return;
+    const next = multiple ? [...files, ...incoming] : incoming.slice(0, 1);
+    files = next;
+    onfiles?.(next);
+  }
+
+  function onChange(event: Event) {
+    const input = event.currentTarget as HTMLInputElement;
+    const list = input.files ? Array.from(input.files) : [];
+    appendFiles(list);
+    // Allow re-selecting the same file later.
+    input.value = "";
+  }
+
+  function openPicker() {
+    if (disabled) return;
+    inputRef?.click();
+  }
+
+  function onTriggerKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openPicker();
+    }
+  }
+
+  function onDragOver(event: DragEvent) {
+    if (disabled) return;
+    event.preventDefault();
+    isDragOver = true;
+  }
+
+  function onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    isDragOver = false;
+  }
+
+  function onDrop(event: DragEvent) {
+    if (disabled) return;
+    event.preventDefault();
+    isDragOver = false;
+    const dropped = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
+    if (dropped.length === 0) return;
+    appendFiles(dropped);
+  }
+
+  function removeAt(index: number) {
+    if (disabled) return;
+    const next = files.filter((_, i) => i !== index);
+    files = next;
+    onfiles?.(next);
+  }
+
+  function fileError(file: File): string | undefined {
+    if (typeof maxSizeBytes === "number" && file.size > maxSizeBytes) {
+      return maxSizeErrorLabel(file.name, maxSizeBytes);
+    }
+    return undefined;
+  }
+</script>
+
+<div {...rest} class={fieldClasses()}>
+  {#if label}
+    <label class="st-field__label" for={inputId}>{label}</label>
+  {/if}
+
+  <div
+    class={dropzoneClasses()}
+    role="presentation"
+    ondragover={onDragOver}
+    ondragenter={onDragOver}
+    ondragleave={onDragLeave}
+    ondrop={onDrop}
+  >
+    <input
+      bind:this={inputRef}
+      id={inputId}
+      type="file"
+      class="st-fileUploader__input"
+      {accept}
+      {multiple}
+      {disabled}
+      aria-invalid={isInvalid ? "true" : undefined}
+      aria-describedby={errorText ? errorId : helperText ? helperId : undefined}
+      onchange={onChange}
+    />
+    <div class="st-fileUploader__content">
+      <button
+        type="button"
+        class="st-fileUploader__trigger"
+        {disabled}
+        onclick={openPicker}
+        onkeydown={onTriggerKeydown}
+      >
+        {effectiveTriggerLabel}
+      </button>
+      <span class="st-fileUploader__hint">{dropzoneLabel}</span>
+    </div>
+  </div>
+
+  {#if errorText}
+    <span class="st-field__error" id={errorId}>{errorText}</span>
+  {:else if helperText}
+    <span class="st-field__help" id={helperId}>{helperText}</span>
+  {/if}
+
+  {#if files.length > 0}
+    <ul class="st-fileUploader__list">
+      {#each files as file, index (file.name + index)}
+        {@const itemError = fileError(file)}
+        <li
+          class={[
+            "st-fileUploader__item",
+            itemError ? "st-fileUploader__item--error" : null
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          <span class="st-fileUploader__itemMeta">
+            <span class="st-fileUploader__itemName">{file.name}</span>
+            <span class="st-fileUploader__itemSize">{formatSize(file.size)}</span>
+            {#if itemError}
+              <span class="st-fileUploader__itemError">{itemError}</span>
+            {/if}
+          </span>
+          <button
+            type="button"
+            class="st-fileUploader__remove"
+            aria-label={removeLabel(file.name)}
+            {disabled}
+            onclick={() => removeAt(index)}
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-fileUploader-field {
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    max-width: var(--st-component-field-maxWidth, 28rem);
+  }
+
+  .st-field__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-field__help,
+  .st-field__error {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .st-field__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+  }
+
+  .st-field__error {
+    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
+  }
+
+  .st-fileUploader__dropzone {
+    align-items: center;
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border: 1px dashed var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-component-control-text, var(--st-semantic-text-primary));
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-3, 0.75rem);
+    justify-content: flex-start;
+    padding: var(--st-spacing-4, 1rem);
+    transition:
+      background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-fileUploader__dropzone:hover:not(.st-fileUploader__dropzone--disabled) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-fileUploader__dropzone--dragover {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-fileUploader__dropzone--invalid {
+    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-fileUploader__dropzone--disabled {
+    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  .st-fileUploader__input {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  .st-fileUploader__content {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-fileUploader__trigger {
+    align-items: center;
+    background: var(--st-semantic-action-primary);
+    border: 1px solid transparent;
+    border-radius: var(--st-component-button-radius, 0.375rem);
+    color: var(--st-semantic-action-primaryText, #ffffff);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-weight: 600;
+    justify-content: center;
+    min-height: 2.25rem;
+    padding: 0 var(--st-spacing-3, 0.75rem);
+    transition:
+      background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-fileUploader__trigger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--st-semantic-action-primary) 88%, black);
+  }
+
+  .st-fileUploader__trigger:focus-visible {
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-fileUploader__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .st-fileUploader__hint {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+  }
+
+  .st-fileUploader__list {
+    display: grid;
+    gap: var(--st-spacing-2, 0.5rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-fileUploader__item {
+    align-items: center;
+    background: var(--st-semantic-surface-subtle);
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    justify-content: space-between;
+    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-fileUploader__item--error {
+    border-color: var(--st-semantic-feedback-error);
+  }
+
+  .st-fileUploader__itemMeta {
+    display: grid;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .st-fileUploader__itemName {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .st-fileUploader__itemSize {
+    color: var(--st-semantic-text-muted);
+    font-size: 0.8125rem;
+  }
+
+  .st-fileUploader__itemError {
+    color: var(--st-semantic-feedback-error);
+    font-size: 0.8125rem;
+  }
+
+  .st-fileUploader__remove {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font: inherit;
+    font-size: 1.125rem;
+    height: 1.75rem;
+    justify-content: center;
+    line-height: 1;
+    padding: 0;
+    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 1.75rem;
+  }
+
+  .st-fileUploader__remove:hover:not(:disabled) {
+    background: color-mix(in srgb, currentColor 14%, transparent);
+  }
+
+  .st-fileUploader__remove:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 1px;
+  }
+
+  .st-fileUploader__remove:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+</style>

package/dist/FileUploader.svelte.d.ts

@@ -0,0 +1,30 @@
+export type FileUploadStatus = "idle" | "uploading" | "complete" | "error";
+export type FileUploadItem = {
+    file: File;
+    status: FileUploadStatus;
+    progress?: number;
+    error?: string;
+};
+import type { HTMLAttributes } from "svelte/elements";
+type FileUploaderProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    maxSizeBytes?: number;
+    disabled?: boolean;
+    files?: File[];
+    onfiles?: (files: File[]) => void;
+    triggerLabel?: string;
+    dropzoneLabel?: string;
+    removeLabel?: (filename: string) => string;
+    maxSizeErrorLabel?: (filename: string, maxSizeBytes: number) => string;
+    id?: string;
+    class?: string;
+};
+declare const FileUploader: import("svelte").Component<FileUploaderProps, {}, "files">;
+type FileUploader = ReturnType<typeof FileUploader>;
+export default FileUploader;
+//# sourceMappingURL=FileUploader.svelte.d.ts.map

package/dist/FileUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FileUploader.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAGJ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoLJ,QAAA,MAAM,YAAY,4DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/InlineLoading.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type InlineLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    status?: "active" | "success" | "error" | "inactive";
+    class?: string;
+  };
+
+  let {
+    label,
+    status = "active",
+    class: className,
+    ...rest
+  }: InlineLoadingProps = $props();
+
+  const classes = () =>
+    ["st-inlineLoading", `st-inlineLoading--${status}`, className].filter(Boolean).join(" ");
+
+  const role = () => (status === "error" ? "alert" : "status");
+</script>
+
+<div {...rest} class={classes()} role={role()} aria-live="polite">
+  <span class="st-inlineLoading__icon" aria-hidden="true">
+    {#if status === "active"}
+      <svg viewBox="0 0 16 16" width="16" height="16">
+        <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-opacity="0.2" />
+        <path d="M14 8a6 6 0 0 0-6-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+          <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="0.9s" repeatCount="indefinite" />
+        </path>
+      </svg>
+    {:else if status === "success"}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
+        <path d="m3 8 3.5 3.5L13 5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    {:else if status === "error"}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
+        <path d="M4 4l8 8M12 4l-8 8" stroke-linecap="round" />
+      </svg>
+    {/if}
+  </span>
+  {#if label}<span class="st-inlineLoading__label">{label}</span>{/if}
+</div>
+
+<style>
+  .st-inlineLoading {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    font-size: 0.875rem;
+    gap: 0.5rem;
+  }
+
+  .st-inlineLoading__icon {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+  }
+
+  .st-inlineLoading--active .st-inlineLoading__icon {
+    color: var(--st-semantic-action-primary);
+  }
+
+  .st-inlineLoading--success {
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-inlineLoading--error {
+    color: var(--st-semantic-feedback-error);
+  }
+
+  .st-inlineLoading--inactive {
+    color: var(--st-semantic-text-muted);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-inlineLoading__icon svg path animateTransform {
+      display: none;
+    }
+  }
+</style>

package/dist/InlineLoading.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "svelte/elements";
+type InlineLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    status?: "active" | "success" | "error" | "inactive";
+    class?: string;
+};
+declare const InlineLoading: import("svelte").Component<InlineLoadingProps, {}, "">;
+type InlineLoading = ReturnType<typeof InlineLoading>;
+export default InlineLoading;
+//# sourceMappingURL=InlineLoading.svelte.d.ts.map

package/dist/InlineLoading.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineLoading.svelte.d.ts","sourceRoot":"","sources":["../src/lib/InlineLoading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4CJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/SkeletonText.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type SkeletonTextProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    lines?: number;
+    width?: string;
+    heading?: boolean;
+    paragraph?: boolean;
+    class?: string;
+  };
+
+  let {
+    lines = 1,
+    width,
+    heading = false,
+    paragraph = false,
+    class: className,
+    ...rest
+  }: SkeletonTextProps = $props();
+
+  const wrapperClasses = () => ["st-skeleton", className].filter(Boolean).join(" ");
+  const lineClasses = () =>
+    ["st-skeleton__line", heading ? "st-skeleton__line--heading" : null].filter(Boolean).join(" ");
+  const lineCount = () => (paragraph ? Math.max(lines, 3) : lines);
+
+  function lineWidth(index: number, total: number): string | undefined {
+    if (width && index === 0) return width;
+    if (paragraph && index === total - 1) return "60%";
+    return undefined;
+  }
+</script>
+
+<div {...rest} class={wrapperClasses()} role="status" aria-label="Loading…" aria-busy="true">
+  {#each Array.from({ length: lineCount() }) as _, i (i)}
+    <span class={lineClasses()} style={lineWidth(i, lineCount()) ? `width:${lineWidth(i, lineCount())}` : undefined}></span>
+  {/each}
+</div>
+
+<style>
+  .st-skeleton {
+    display: grid;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .st-skeleton__line {
+    background: linear-gradient(
+      90deg,
+      var(--st-semantic-surface-subtle, #eaeef2),
+      var(--st-semantic-border-subtle, #d8dee4),
+      var(--st-semantic-surface-subtle, #eaeef2)
+    );
+    background-size: 200% 100%;
+    border-radius: 0.25rem;
+    display: block;
+    height: 0.875rem;
+    width: 100%;
+    animation: st-skeleton-shimmer 1.4s ease-in-out infinite;
+  }
+
+  .st-skeleton__line--heading {
+    height: 1.25rem;
+  }
+
+  @keyframes st-skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-skeleton__line {
+      animation: none;
+    }
+  }
+</style>

package/dist/SkeletonText.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "svelte/elements";
+type SkeletonTextProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    lines?: number;
+    width?: string;
+    heading?: boolean;
+    paragraph?: boolean;
+    class?: string;
+};
+declare const SkeletonText: import("svelte").Component<SkeletonTextProps, {}, "">;
+type SkeletonText = ReturnType<typeof SkeletonText>;
+export default SkeletonText;
+//# sourceMappingURL=SkeletonText.svelte.d.ts.map

package/dist/SkeletonText.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SkeletonText.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoCJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}