@svadmin/ui 0.75.0 → 0.76.0

package/dist/components/Marquee.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Plain text shortcut; ignored when `children` is provided. */
+    text?: string;
+    children?: Snippet;
+    /** Seconds for one full loop. */
+    duration?: number;
+    direction?: 'left' | 'right';
+    vertical?: boolean;
+    /** Copies of the content used to build a seamless loop. */
+    repeat?: number;
+    pauseOnHover?: boolean;
+    /** Fades the leading and trailing edges. */
+    fade?: boolean;
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    text,
+    children,
+    duration = 14,
+    direction = 'left',
+    vertical = false,
+    repeat = 2,
+    pauseOnHover = true,
+    fade = true,
+    ariaLabel,
+    class: className = '',
+  }: Props = $props();
+
+  const copies = $derived(Math.max(2, Math.round(repeat)));
+  const safeDuration = $derived(duration > 0 ? duration : 14);
+</script>
+
+<div
+  class={cn('svadmin-marquee', className)}
+  data-slot="marquee"
+  data-direction={direction}
+  data-vertical={vertical ? 'true' : 'false'}
+  data-pause={pauseOnHover ? 'true' : 'false'}
+  data-fade={fade ? 'true' : 'false'}
+  role="marquee"
+  aria-label={ariaLabel}
+>
+  <div
+    class="svadmin-marquee__track"
+    style={`--svadmin-marquee-duration: ${safeDuration}s; --svadmin-marquee-repeat: ${copies};`}
+  >
+    {#each Array.from({ length: copies }) as _, index (index)}
+      <div class="svadmin-marquee__item" aria-hidden={index > 0 ? 'true' : undefined}>
+        {#if children}{@render children()}{:else}{text}{/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .svadmin-marquee {
+    position: relative;
+    overflow: hidden;
+    color: inherit;
+  }
+
+  .svadmin-marquee[data-fade='true'] {
+    mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
+  }
+
+  .svadmin-marquee__track {
+    display: flex;
+    width: max-content;
+    animation: svadmin-marquee-scroll var(--svadmin-marquee-duration, 14s) linear infinite;
+    will-change: transform;
+  }
+
+  .svadmin-marquee[data-direction='right'] .svadmin-marquee__track { animation-direction: reverse; }
+  .svadmin-marquee[data-vertical='true'] .svadmin-marquee__track { flex-direction: column; }
+  .svadmin-marquee[data-pause='true']:hover .svadmin-marquee__track,
+  .svadmin-marquee[data-pause='true']:focus-within .svadmin-marquee__track { animation-play-state: paused; }
+
+  .svadmin-marquee__item {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding-inline-end: 2rem;
+  }
+
+  .svadmin-marquee[data-vertical='true'] .svadmin-marquee__item {
+    padding-inline-end: 0;
+    padding-block-end: 1rem;
+  }
+
+  @keyframes svadmin-marquee-scroll {
+    from { transform: translate(0, 0); }
+    to { transform: translate(calc(-100% / var(--svadmin-marquee-repeat, 2)), 0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .svadmin-marquee__track { animation: none; }
+  }
+</style>

package/dist/components/Marquee.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Plain text shortcut; ignored when `children` is provided. */
+    text?: string;
+    children?: Snippet;
+    /** Seconds for one full loop. */
+    duration?: number;
+    direction?: 'left' | 'right';
+    vertical?: boolean;
+    /** Copies of the content used to build a seamless loop. */
+    repeat?: number;
+    pauseOnHover?: boolean;
+    /** Fades the leading and trailing edges. */
+    fade?: boolean;
+    ariaLabel?: string;
+    class?: string;
+}
+declare const Marquee: import("svelte").Component<Props, {}, "">;
+type Marquee = ReturnType<typeof Marquee>;
+export default Marquee;

package/dist/components/MediaPlayer.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    src: string;
+    media?: 'video' | 'audio';
+    poster?: string;
+    title?: string;
+    description?: string;
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    /** CSS aspect ratio for video, e.g. `16 / 9`. */
+    aspectRatio?: string;
+    class?: string;
+    ontimeupdate?: (event: Event) => void;
+    onended?: (event: Event) => void;
+  }
+
+  let {
+    src,
+    media = 'video',
+    poster,
+    title,
+    description,
+    controls = true,
+    autoplay = false,
+    loop = false,
+    muted = false,
+    playsinline = true,
+    preload = 'metadata',
+    aspectRatio = '16 / 9',
+    class: className = '',
+    ontimeupdate,
+    onended,
+  }: Props = $props();
+</script>
+
+<figure class={cn('svadmin-media-player', className)} data-slot="media-player" data-media={media}>
+  {#if media === 'video'}
+    <div class="svadmin-media-player__stage" style={`aspect-ratio: ${aspectRatio};`}>
+      <video
+        class="svadmin-media-player__video"
+        {src}
+        {poster}
+        {controls}
+        autoplay={autoplay}
+        {loop}
+        {muted}
+        {playsinline}
+        {preload}
+        aria-label={title}
+        ontimeupdate={ontimeupdate}
+        onended={onended}
+      ></video>
+    </div>
+  {:else}
+    <div class="svadmin-media-player__audio-stage">
+      <audio
+        class="svadmin-media-player__audio"
+        {src}
+        {controls}
+        autoplay={autoplay}
+        {loop}
+        {muted}
+        {preload}
+        aria-label={title}
+        ontimeupdate={ontimeupdate}
+        onended={onended}
+      ></audio>
+    </div>
+  {/if}
+
+  {#if title || description}
+    <figcaption class="svadmin-media-player__caption">
+      {#if title}<span class="svadmin-media-player__title">{title}</span>{/if}
+      {#if description}<span class="svadmin-media-player__description">{description}</span>{/if}
+    </figcaption>
+  {/if}
+</figure>
+
+<style>
+  .svadmin-media-player {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.75rem);
+    padding: 0.5rem;
+    background: var(--card, transparent);
+    color: var(--card-foreground, var(--foreground, currentColor));
+  }
+
+  .svadmin-media-player__stage { overflow: hidden; border-radius: min(var(--radius, 0.5rem), 0.5rem); background: var(--muted, transparent); }
+  .svadmin-media-player__video { display: block; width: 100%; height: 100%; object-fit: contain; }
+  .svadmin-media-player__audio-stage { padding: 0.25rem; }
+  .svadmin-media-player__audio { width: 100%; }
+  .svadmin-media-player__caption { display: grid; gap: 0.125rem; padding-inline: 0.25rem; }
+  .svadmin-media-player__title { font-size: 0.875rem; font-weight: 600; }
+  .svadmin-media-player__description { color: var(--muted-foreground, currentColor); font-size: 0.8125rem; }
+</style>

package/dist/components/MediaPlayer.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    src: string;
+    media?: 'video' | 'audio';
+    poster?: string;
+    title?: string;
+    description?: string;
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    /** CSS aspect ratio for video, e.g. `16 / 9`. */
+    aspectRatio?: string;
+    class?: string;
+    ontimeupdate?: (event: Event) => void;
+    onended?: (event: Event) => void;
+}
+declare const MediaPlayer: import("svelte").Component<Props, {}, "">;
+type MediaPlayer = ReturnType<typeof MediaPlayer>;
+export default MediaPlayer;

package/dist/components/PhoneInput.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import {
+    findDialCodeByCountry,
+    PHONE_DIAL_CODES,
+    toE164,
+    type PhoneDialCode,
+  } from './phone-dial-codes.js';
+
+  interface Props {
+    /** ISO 3166-1 alpha-2 country code. */
+    country?: string;
+    /** National number without the dialling prefix. */
+    nationalNumber?: string;
+    countries?: readonly PhoneDialCode[];
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (payload: { country: string; nationalNumber: string; e164: string }) => void;
+  }
+
+  let {
+    country = $bindable('CN'),
+    nationalNumber = $bindable(''),
+    countries = PHONE_DIAL_CODES,
+    id,
+    name,
+    placeholder = 'Phone number',
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    describedby,
+    ariaLabel = 'Phone number',
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const entry = $derived(findDialCodeByCountry(country, countries));
+  const dial = $derived(entry?.dial ?? '');
+
+  function emit(): void {
+    onchange?.({
+      country,
+      nationalNumber,
+      e164: toE164(country, nationalNumber, countries),
+    });
+  }
+</script>
+
+<div
+  class={cn('svadmin-phone-input', className)}
+  data-slot="phone-input"
+  data-invalid={invalid ? 'true' : undefined}
+  data-disabled={disabled ? 'true' : undefined}
+>
+  <select
+    class="svadmin-phone-input__country"
+    bind:value={country}
+    {disabled}
+    aria-label={`${ariaLabel}: country code`}
+    onchange={emit}
+  >
+    {#each countries as option (option.country)}
+      <option value={option.country}>{option.name} (+{option.dial})</option>
+    {/each}
+  </select>
+
+  <div class="svadmin-phone-input__control">
+    {#if dial}<span class="svadmin-phone-input__dial" aria-hidden="true">+{dial}</span>{/if}
+    <input
+      class="svadmin-phone-input__field"
+      type="tel"
+      inputmode="tel"
+      autocomplete="tel-national"
+      {id}
+      {name}
+      bind:value={nationalNumber}
+      {placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      aria-label={ariaLabel}
+      aria-invalid={invalid ? 'true' : undefined}
+      aria-describedby={describedby}
+      oninput={emit}
+    />
+  </div>
+</div>
+
+<style>
+  .svadmin-phone-input {
+    display: flex;
+    align-items: stretch;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.5rem);
+    background: var(--background, transparent);
+    color: var(--foreground, currentColor);
+  }
+
+  .svadmin-phone-input:focus-within { outline: 2px solid var(--ring, currentColor); outline-offset: 1px; }
+  .svadmin-phone-input[data-invalid='true'] { border-color: var(--destructive, currentColor); }
+  .svadmin-phone-input[data-disabled='true'] { cursor: not-allowed; opacity: 0.6; }
+
+  .svadmin-phone-input__country {
+    flex: none;
+    max-width: 11rem;
+    border: 0;
+    border-inline-end: 1px solid var(--border, currentColor);
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+    padding: 0.5rem 0.625rem;
+    background: var(--muted, transparent);
+    color: inherit;
+    font: inherit;
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+
+  .svadmin-phone-input__country:focus-visible { outline: none; }
+
+  .svadmin-phone-input__control {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: 0.375rem;
+    padding-inline: 0.625rem;
+  }
+
+  .svadmin-phone-input__dial {
+    flex: none;
+    color: var(--muted-foreground, currentColor);
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .svadmin-phone-input__field {
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    padding-block: 0.5rem;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+  }
+
+  .svadmin-phone-input__field:focus { outline: none; }
+</style>

package/dist/components/PhoneInput.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type PhoneDialCode } from './phone-dial-codes.js';
+interface Props {
+    /** ISO 3166-1 alpha-2 country code. */
+    country?: string;
+    /** National number without the dialling prefix. */
+    nationalNumber?: string;
+    countries?: readonly PhoneDialCode[];
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (payload: {
+        country: string;
+        nationalNumber: string;
+        e164: string;
+    }) => void;
+}
+declare const PhoneInput: import("svelte").Component<Props, {}, "country" | "nationalNumber">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

package/dist/components/QRCode.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import QRCodeLib from 'qrcode';
+  import { cn } from '../utils.js';
+
+  /**
+   * Renders a QR code from the Svelte ecosystem `qrcode` package as a crisp
+   * SVG. No canvas is required, so it is safe under SSR and test DOMs.
+   */
+  interface Props {
+    /** Content to encode. Empty content renders a neutral placeholder. */
+    value: string;
+    /** Rendered size in pixels. */
+    size?: number;
+    /** Quiet-zone width in modules. Keep at least 4 for reliable scanning. */
+    margin?: number;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    /** Module color; defaults to the semantic foreground token. */
+    color?: string;
+    /** Background color; defaults to the semantic background token. */
+    background?: string;
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    size = 160,
+    margin = 4,
+    errorCorrectionLevel = 'M',
+    color = 'var(--foreground, black)',
+    background = 'var(--background, white)',
+    ariaLabel = 'QR code',
+    class: className = '',
+  }: Props = $props();
+
+  const matrix = $derived.by(() => {
+    if (!value) return null;
+    try {
+      const qr = QRCodeLib.create(value, { errorCorrectionLevel });
+      const moduleCount = qr.modules.size;
+      const data = qr.modules.data;
+      const total = moduleCount + margin * 2;
+      let path = '';
+      for (let y = 0; y < moduleCount; y += 1) {
+        for (let x = 0; x < moduleCount; x += 1) {
+          if (data[y * moduleCount + x]) path += `M${x + margin} ${y + margin}h1v1h-1z`;
+        }
+      }
+      return { total, path };
+    } catch {
+      return null;
+    }
+  });
+</script>
+
+<figure class={cn('svadmin-qr-code', className)} data-slot="qr-code">
+  {#if matrix}
+    <svg
+      class="svadmin-qr-code__svg"
+      width={size}
+      height={size}
+      viewBox={`0 0 ${matrix.total} ${matrix.total}`}
+      role="img"
+      aria-label={ariaLabel}
+      shape-rendering="crispEdges"
+    >
+      <rect width={matrix.total} height={matrix.total} fill={background} />
+      <path d={matrix.path} fill={color} />
+    </svg>
+  {:else}
+    <p class="svadmin-qr-code__empty" role="status">No QR content.</p>
+  {/if}
+</figure>
+
+<style>
+  .svadmin-qr-code {
+    display: inline-flex;
+    margin: 0;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.75rem);
+    padding: 0.5rem;
+    background: var(--card, var(--background, transparent));
+    color: var(--card-foreground, var(--foreground, currentColor));
+  }
+
+  .svadmin-qr-code__svg { display: block; border-radius: calc(min(var(--radius, 0.5rem), 0.75rem) - 0.25rem); }
+  .svadmin-qr-code__empty { margin: 0; padding: 1rem; color: var(--muted-foreground, currentColor); font-size: 0.8125rem; }
+</style>

package/dist/components/QRCode.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Renders a QR code from the Svelte ecosystem `qrcode` package as a crisp
+ * SVG. No canvas is required, so it is safe under SSR and test DOMs.
+ */
+interface Props {
+    /** Content to encode. Empty content renders a neutral placeholder. */
+    value: string;
+    /** Rendered size in pixels. */
+    size?: number;
+    /** Quiet-zone width in modules. Keep at least 4 for reliable scanning. */
+    margin?: number;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    /** Module color; defaults to the semantic foreground token. */
+    color?: string;
+    /** Background color; defaults to the semantic background token. */
+    background?: string;
+    ariaLabel?: string;
+    class?: string;
+}
+declare const QRCode: import("svelte").Component<Props, {}, "">;
+type QRCode = ReturnType<typeof QRCode>;
+export default QRCode;