spaper 1.3.0 → 2.0.0

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

@@ -0,0 +1,33 @@
+import type { PaperSize, PaperType } from '../types';
+import type { IconNode } from '../icons';
+interface Props {
+    type?: PaperType | null;
+    /** Icon shown to the left of the label. */
+    icon?: IconNode | null;
+    size?: PaperSize;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    outline?: PaperType | null;
+    /**
+     * The `type` attribute for `<button>`. Useful for forms.
+     * Ignored if rendered as a link.
+     */
+    nativeType?: 'submit' | 'reset' | 'button' | null;
+    /** When true, the button is rendered as an `<a>` element. */
+    isLink?: boolean;
+    href?: string | null;
+    /** When true and `isLink` is set,
+     * adds `target="_blank"` and `rel="noopener noreferrer"`
+     * to the link for external navigation.
+     */
+    external?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+    /** Replaces the default spinner while `loading` is set. */
+    loader?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Card.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+import type { Snippet } from 'svelte'
+import type { PositionY, StringOrSnippet } from '../types'
+import { isSnippet } from '../utils'
+
+interface Props {
+  title?: StringOrSnippet
+  subTitle?: StringOrSnippet
+  image?: string
+  imageAlt?: string
+  imagePlacement?: PositionY
+  header?: StringOrSnippet
+  footer?: StringOrSnippet
+  /** @deprecated Use a width class, e.g. `class="w-1/2"`. */
+  width?: string
+  /** Root element. */
+  as?: keyof HTMLElementTagNameMap
+  children?: Snippet
+  bottom?: Snippet
+  class?: string
+  [key: string]: unknown
+}
+
+let {
+  title = '',
+  subTitle = '',
+  image = '',
+  imageAlt = '',
+  imagePlacement = 'top',
+  header = '',
+  footer = '',
+  width,
+  as = 'article',
+  children,
+  bottom,
+  class: className = '',
+  ...rest
+}: Props = $props()
+
+const showImage = $derived(Boolean(image))
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  class={['card-paper', className]}
+  {...width ? { style: `width: ${width}` } : {}}
+>
+  {#if header}
+    <header class="card-paper-header">
+      {#if isSnippet(header)}
+        {@render header()}
+      {:else}
+        {header}
+      {/if}
+    </header>
+  {/if}
+
+  {#if showImage && imagePlacement === 'top'}
+    <img class="w-full object-cover" src={image} alt={imageAlt} />
+  {/if}
+
+  <div class="card-paper-body">
+    <h4 class="card-paper-title">
+      {#if isSnippet(title)}
+        {@render title()}
+      {:else}
+        {title}
+      {/if}
+    </h4>
+    <h5 class="card-paper-subtitle">
+      {#if isSnippet(subTitle)}
+        {@render subTitle()}
+      {:else}
+        {subTitle}
+      {/if}
+    </h5>
+
+    <p class="card-text">
+      {@render children?.()}
+    </p>
+
+    {#if bottom}
+      {@render bottom()}
+    {/if}
+  </div>
+
+  {#if showImage && imagePlacement === 'bottom'}
+    <img class="image-bottom w-full object-cover" src={image} alt={imageAlt} />
+  {/if}
+
+  {#if footer}
+    <footer class="card-paper-footer">
+      {#if isSnippet(footer)}
+        {@render footer()}
+      {:else}
+        {footer}
+      {/if}
+    </footer>
+  {/if}
+</svelte:element>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { PositionY, StringOrSnippet } from '../types';
+interface Props {
+    title?: StringOrSnippet;
+    subTitle?: StringOrSnippet;
+    image?: string;
+    imageAlt?: string;
+    imagePlacement?: PositionY;
+    header?: StringOrSnippet;
+    footer?: StringOrSnippet;
+    /** @deprecated Use a width class, e.g. `class="w-1/2"`. */
+    width?: string;
+    /** Root element. */
+    as?: keyof HTMLElementTagNameMap;
+    children?: Snippet;
+    bottom?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Carousel/Carousel.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+import { onMount, setContext } from 'svelte'
+import { writable } from 'svelte/store'
+import type { Transition } from '../../types'
+import type {
+  CarouselControls,
+  CarouselItemsStore,
+  CarouselItemsData,
+  TransitionStore,
+} from './types'
+import Pagination from '../Pagination/Pagination.svelte'
+
+interface Props {
+  index?: number
+  /** The interval in milliseconds between slides. */
+  interval?: number
+  autoplay?: boolean
+  repeat?: boolean
+  pauseOnHover?: boolean
+  bullets?: boolean
+  keyNavigation?: boolean
+  transition?: Transition | null
+  onchange?: (index: number) => void
+  onclick?: (e: MouseEvent) => void
+  onkeydown?: (e: KeyboardEvent) => void
+  onmouseover?: (e: MouseEvent) => void
+  onmouseenter?: (e: MouseEvent) => void
+  onmouseleave?: (e: MouseEvent) => void
+  onfocus?: (e: FocusEvent) => void
+  /** Replaces the default bullets. Receives 0-based index helpers. */
+  controls?: import('svelte').Snippet<[CarouselControls]>
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  index = $bindable(0),
+  interval = 2500,
+  autoplay = true,
+  repeat = true,
+  pauseOnHover = true,
+  bullets = true,
+  keyNavigation = true,
+  transition = 'fade',
+  onchange,
+  onclick,
+  onkeydown,
+  onmouseover,
+  onmouseenter,
+  onmouseleave,
+  onfocus,
+  controls,
+  children,
+  ...rest
+}: Props = $props()
+
+let intervalId: number
+
+const items: CarouselItemsStore = writable([])
+const transitionStore: TransitionStore = writable(null)
+$effect(() => {
+  // Use .set() — `$store =` inside an effect re-subscribes and loops forever.
+  transitionStore.set(transition)
+})
+const itemsData: CarouselItemsData = {
+  activeItem: index,
+  items,
+  transition: transitionStore,
+}
+
+setContext('carouselItems', itemsData)
+
+onMount(() => {
+  $items[index]?.show()
+  if (autoplay) {
+    setUpAutoplay()
+    return () => clearInterval(intervalId)
+  }
+})
+
+function setUpAutoplay() {
+  if (intervalId) clearInterval(intervalId)
+  if (!autoplay) return
+
+  intervalId = window.setInterval(() => {
+    if (!length) return
+    index = (index + 1) % length
+    if (!repeat && index === length - 1) {
+      clearInterval(intervalId)
+    }
+  }, interval)
+}
+
+function navigationHandler(value: number) {
+  goToItem(value - 1)
+}
+
+function goToItem(idx: number) {
+  if (autoplay) {
+    setUpAutoplay()
+  }
+  index = idx
+}
+
+function next() {
+  if (!length) return
+  goToItem((index + 1) % length)
+}
+
+function previous() {
+  if (!length) return
+  goToItem((length + index - 1) % length)
+}
+
+function pause() {
+  if (!pauseOnHover || !autoplay) return
+
+  clearInterval(intervalId)
+}
+
+function resume() {
+  if (!pauseOnHover || !autoplay) return
+
+  setUpAutoplay()
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  onkeydown?.(e)
+  if (!keyNavigation || !length) return
+
+  switch (e.key) {
+    case 'ArrowRight':
+      next()
+      break
+    case 'ArrowLeft':
+      previous()
+      break
+  }
+}
+
+function handleMouseEnter(e: MouseEvent) {
+  onmouseenter?.(e)
+  pause()
+}
+
+function handleMouseLeave(e: MouseEvent) {
+  onmouseleave?.(e)
+  resume()
+}
+
+function updateTabsVisility() {
+  $items.forEach((item, idx) => {
+    if (idx === index) item.show()
+    else item.hide()
+  })
+}
+
+$effect(() => {
+  if (index > -1) {
+    updateTabsVisility()
+    onchange?.(index)
+  }
+})
+let { length } = $derived($items)
+</script>
+
+<section
+  {...rest}
+  class={['outline-none', rest.class]}
+  {onclick}
+  onkeydown={handleKeydown}
+  {onmouseover}
+  {onfocus}
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+>
+  <div
+    class={[
+      'relative inline-block',
+      'min-h-(--min-height,120px) h-(--height,auto) max-h-(--max-height,none)',
+      'min-w-(--min-width,0) w-(--width,auto) max-w-(--max-width,none)',
+    ]}
+  >
+    {@render children?.()}
+    {#if controls}
+      {@render controls({
+        index,
+        length,
+        goTo: goToItem,
+        next,
+        previous,
+      })}
+    {:else if bullets}
+      <Pagination
+        class="mt-2 flex w-full justify-center"
+        total={length}
+        pageSize={1}
+        current={index + 1}
+        bullets
+        onchange={navigationHandler}
+      />
+    {/if}
+  </div>
+</section>

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

@@ -0,0 +1,27 @@
+import type { Transition } from '../../types';
+import type { CarouselControls } from './types';
+interface Props {
+    index?: number;
+    /** The interval in milliseconds between slides. */
+    interval?: number;
+    autoplay?: boolean;
+    repeat?: boolean;
+    pauseOnHover?: boolean;
+    bullets?: boolean;
+    keyNavigation?: boolean;
+    transition?: Transition | null;
+    onchange?: (index: number) => void;
+    onclick?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onmouseover?: (e: MouseEvent) => void;
+    onmouseenter?: (e: MouseEvent) => void;
+    onmouseleave?: (e: MouseEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    /** Replaces the default bullets. Receives 0-based index helpers. */
+    controls?: import('svelte').Snippet<[CarouselControls]>;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "index">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/Carousel/CarouselItem.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { onDestroy, getContext } from 'svelte'
+import type { CarouselItemsData } from './types'
+import { configureTransition } from '../../utils'
+interface Props {
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let { children, ...rest }: Props = $props()
+
+const key = Symbol()
+let active: boolean = $state(false)
+
+const itemsData: CarouselItemsData = getContext('carouselItems')
+
+if (!itemsData)
+  throw new Error('CarouselItem should be nested inside a Carousel')
+
+// Register during init so the parent can show the first slide without racing onMount.
+itemsData.items.update((list) => [
+  ...list,
+  {
+    key,
+    show: () => (active = true),
+    hide: () => (active = false),
+  },
+])
+
+onDestroy(() => {
+  itemsData.items.update((list) => list.filter((item) => item.key !== key))
+})
+
+let { transition } = $derived(itemsData)
+</script>
+
+{#if active}
+  <div
+    {...rest}
+    class={['carousel-item', rest.class]}
+    in:configureTransition={{
+      name: $transition,
+      disabled: !$transition,
+    }}
+  >
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/Carousel/CarouselItem.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const CarouselItem: import("svelte").Component<Props, {}, "">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/{components → dist/components}/Carousel/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Carousel } from './Carousel.svelte';
 export { default as CarouselItem } from './CarouselItem.svelte';
+export type { CarouselControls } from './types';

package/dist/components/Carousel/types.d.ts

@@ -0,0 +1,22 @@
+import type { Transition } from '../../types';
+import type { Writable } from 'svelte/store';
+export interface iCarouselItem {
+    key: symbol;
+    show: () => void;
+    hide: () => void;
+}
+export type CarouselItemsStore = Writable<iCarouselItem[]>;
+export type TransitionStore = Writable<Transition | null>;
+export interface CarouselItemsData {
+    activeItem: number;
+    items: CarouselItemsStore;
+    transition: TransitionStore;
+}
+/** Arguments passed to the Carousel `controls` snippet. Index is 0-based. */
+export interface CarouselControls {
+    index: number;
+    length: number;
+    goTo: (index: number) => void;
+    next: () => void;
+    previous: () => void;
+}

package/dist/components/CloseButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import Icon from './Icon.svelte'
+import { X } from '../icons'
+
+interface Props {
+  ariaLabel?: string
+  onclick?: (e: MouseEvent) => void
+  [key: string]: any
+}
+
+let { ariaLabel = 'close', onclick, ...rest }: Props = $props()
+</script>
+
+<button {...rest} aria-label={ariaLabel} onclick={(e) => onclick?.(e)}>
+  <Icon name={X} size={18} />
+</button>
+
+<style>
+button {
+  cursor: pointer;
+  float: right;
+  border: 0;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+  transform: none;
+  &:hover,
+  &:focus {
+    transform: none;
+    box-shadow: none;
+    border: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    ariaLabel?: string;
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: any;
+}
+declare const CloseButton: import("svelte").Component<Props, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;

package/dist/components/Collapsible.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+import Icon from './Icon.svelte'
+import { ChevronDown } from '../icons'
+
+interface Props {
+  label?: string
+  open?: boolean
+  /** Shared `name` → native exclusive accordion (only one open at a time). */
+  name?: string
+  /** Show the expand/collapse chevron next to the trigger. */
+  chevron?: boolean
+  onopen?: () => void
+  onclose?: () => void
+  trigger?: import('svelte').Snippet<[boolean]>
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  label = '',
+  open = $bindable(false),
+  name = undefined,
+  chevron = true,
+  onopen,
+  onclose,
+  trigger,
+  children,
+  ...rest
+}: Props = $props()
+
+function onToggle(e: Event) {
+  const el = e.currentTarget as HTMLDetailsElement
+  open = el.open
+  if (open) onopen?.()
+  else onclose?.()
+}
+</script>
+
+<details
+  {...rest}
+  class={['collapsible-paper', rest.class]}
+  {name}
+  bind:open
+  ontoggle={onToggle}
+>
+  <summary class="flex! items-center justify-center gap-2">
+    <span class="min-w-0">
+      {#if trigger}{@render trigger(open)}{:else}{label}{/if}
+    </span>
+    {#if chevron}
+      <Icon
+        name={ChevronDown}
+        size={18}
+        class={[
+          'shrink-0 transition-transform ease-[ease]',
+          'duration-(--paper-collapsible-duration,0.3s)',
+          { 'rotate-180': open },
+        ]}
+        aria-hidden="true"
+      />
+    {/if}
+  </summary>
+  {@render children?.()}
+</details>

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

@@ -0,0 +1,16 @@
+interface Props {
+    label?: string;
+    open?: boolean;
+    /** Shared `name` → native exclusive accordion (only one open at a time). */
+    name?: string;
+    /** Show the expand/collapse chevron next to the trigger. */
+    chevron?: boolean;
+    onopen?: () => void;
+    onclose?: () => void;
+    trigger?: import('svelte').Snippet<[boolean]>;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Collapsible: import("svelte").Component<Props, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/components/CopyButton.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+import Button from './Button.svelte'
+import Icon from './Icon.svelte'
+import { Copy } from '../icons'
+import { success } from './Toast'
+
+interface Props {
+  /** The text to copy. */
+  text: string
+  successMessage?: string
+  ariaLabel?: string
+  onclick?: (e: MouseEvent) => void
+  oncopy?: (text: string) => void
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  text,
+  successMessage = 'Copied!',
+  ariaLabel = 'Copy to clipboard',
+  onclick,
+  oncopy,
+  children,
+  ...rest
+}: Props = $props()
+
+async function copy(e: MouseEvent) {
+  onclick?.(e)
+  if (!text) return
+
+  try {
+    await navigator.clipboard.writeText(text)
+    oncopy?.(text)
+
+    if (successMessage)
+      success({
+        message: successMessage,
+        position: 'top',
+        duration: 1000,
+      })
+  } catch (e) {
+    console.error(e)
+  }
+}
+</script>
+
+<Button {...rest} aria-label={ariaLabel} onclick={copy}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <Icon name={Copy} size={18} />
+  {/if}
+</Button>

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

@@ -0,0 +1,13 @@
+interface Props {
+    /** The text to copy. */
+    text: string;
+    successMessage?: string;
+    ariaLabel?: string;
+    onclick?: (e: MouseEvent) => void;
+    oncopy?: (text: string) => void;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/components/Divider.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+interface Props {
+  [key: string]: any
+}
+
+let { ...rest }: Props = $props()
+</script>
+
+<hr {...rest} class={['divider-paper', rest.class]} />

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

@@ -0,0 +1,6 @@
+interface Props {
+    [key: string]: any;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;