spaper 1.3.0 → 2.0.0

package/dist/components/Modal/index.js

@@ -0,0 +1,30 @@
+import { mount, unmount } from 'svelte';
+import Modal from './Modal.svelte';
+const TRANSITION_TIME = 300;
+function open(props) {
+    let closing = false;
+    const modal = mount(Modal, {
+        target: document.body,
+        props: {
+            ...props,
+            active: true,
+            onclose: () => {
+                props.onclose?.();
+                if (closing)
+                    return;
+                closing = true;
+                setTimeout(() => unmount(modal), TRANSITION_TIME);
+            },
+        },
+    });
+    return {
+        close: () => {
+            if (closing)
+                return;
+            modal.close();
+        },
+    };
+}
+;
+Modal.open = open;
+export default Modal;

package/dist/components/Navbar.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+interface Props {
+  border?: boolean
+  fixed?: boolean
+  split?: boolean
+  brand?: import('svelte').Snippet
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  border = true,
+  fixed = false,
+  split = true,
+  brand,
+  children,
+  ...rest
+}: Props = $props()
+
+const uid = $props.id()
+
+let open: boolean = $state(false)
+let mobile = $state(false)
+
+$effect(() => {
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue('--breakpoint-paper-nav')
+    .trim()
+  const query = window.matchMedia(`(width < ${raw || '48rem'})`)
+  const update = () => {
+    mobile = query.matches
+  }
+  update()
+  query.addEventListener('change', update)
+  return () => query.removeEventListener('change', update)
+})
+
+function close() {
+  open = false
+}
+
+function toggle() {
+  open = !open
+}
+
+/** Close after a link/button click without making the wrapper a click target. */
+function closeOnNavigate(node: HTMLElement) {
+  const onClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement | null
+    if (target?.closest('a, button')) close()
+  }
+  node.addEventListener('click', onClick)
+  return {
+    destroy() {
+      node.removeEventListener('click', onClick)
+    },
+  }
+}
+</script>
+
+<nav
+  {...rest}
+  class={[
+    'nav-paper',
+    {
+      'border-paper': border,
+      'nav-paper-fixed': fixed,
+      'nav-paper-split': split,
+    },
+    rest.class,
+  ]}
+>
+  {#if brand}
+    {@render brand?.()}
+  {/if}
+  <div class="nav-paper-collapsible">
+    <button
+      type="button"
+      class={['nav-paper-burger', { open }]}
+      aria-label={open ? 'Close navigation' : 'Open navigation'}
+      aria-expanded={open}
+      aria-controls="{uid}-menu"
+      onclick={toggle}
+    >
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </button>
+    <div
+      id="{uid}-menu"
+      class={['nav-paper-collapsible-body', { open }]}
+      inert={mobile && !open}
+      use:closeOnNavigate
+    >
+      {@render children?.()}
+    </div>
+  </div>
+</nav>

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

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

package/dist/components/Pagination/Arrow.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import Icon from '../Icon.svelte'
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from '../../icons'
+import type { PaperSize } from '../../types'
+import arrowDimension from './arrow-dimension'
+
+interface Props {
+  size: PaperSize
+  action: 'first' | 'previous' | 'next' | 'last'
+}
+
+let { size, action }: Props = $props()
+
+const icons = {
+  first: ChevronsLeft,
+  previous: ChevronLeft,
+  next: ChevronRight,
+  last: ChevronsRight,
+}
+
+let dimension = $derived(arrowDimension[size])
+</script>
+
+<Icon name={icons[action]} size={dimension} />

package/dist/components/Pagination/Arrow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PaperSize } from '../../types';
+interface Props {
+    size: PaperSize;
+    action: 'first' | 'previous' | 'next' | 'last';
+}
+declare const Arrow: import("svelte").Component<Props, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;

package/dist/components/Pagination/NavigationButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import Button from '../Button.svelte'
+import Arrow from './Arrow.svelte'
+import type { PaperSize, PaperType } from '../../types'
+
+interface Props {
+  size: PaperSize
+  label: string | null
+  action: 'first' | 'previous' | 'next' | 'last'
+  type: PaperType
+  disabled: boolean
+  clickHandler: (e: MouseEvent) => any
+  ariaLabel: string
+}
+
+let { size, label, action, type, disabled, clickHandler, ariaLabel }: Props =
+  $props()
+</script>
+
+<Button
+  {size}
+  {type}
+  isLink
+  {disabled}
+  aria-label={ariaLabel}
+  onclick={clickHandler}
+>
+  {#if label}
+    {label}
+  {:else}
+    <Arrow {size} {action} />
+  {/if}
+</Button>

package/dist/components/Pagination/NavigationButton.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { PaperSize, PaperType } from '../../types';
+interface Props {
+    size: PaperSize;
+    label: string | null;
+    action: 'first' | 'previous' | 'next' | 'last';
+    type: PaperType;
+    disabled: boolean;
+    clickHandler: (e: MouseEvent) => any;
+    ariaLabel: string;
+}
+declare const NavigationButton: import("svelte").Component<Props, {}, "">;
+type NavigationButton = ReturnType<typeof NavigationButton>;
+export default NavigationButton;

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+import type { Snippet } from 'svelte'
+import Button from '../Button.svelte'
+import Input from '../Form/Input.svelte'
+import type { PaperSize, PaperType } from '../../types'
+import NavigationButton from './NavigationButton.svelte'
+
+interface Props {
+  total: number
+  pageSize?: number
+  current?: number
+  size?: PaperSize
+  navigation?: boolean
+  /** When true, the pagination is displayed as $page / $pageCount. */
+  simple?: boolean
+  bullets?: boolean
+  previousLabel?: string | null
+  nextLabel?: string | null
+  highlightedStyle?: PaperType
+  defaultStyle?: PaperType | null
+  /** The number of pages to show before and after the current page. */
+  rangeBetween?: number | null
+  /** When true, an input is displayed to jump to a specific page. */
+  jumper?: boolean
+  pageLabel?: Snippet<[number]> | null
+  ariaLabel?: string
+  ariaFirstLabel?: string
+  ariaPreviousLabel?: string
+  ariaNextLabel?: string
+  ariaLastLabel?: string
+  ariaPageLabel?: ((idx: number) => string) | null
+  onchange?: (current: number) => void
+  [key: string]: any
+}
+
+let {
+  total,
+  pageSize = 10,
+  current = $bindable(1),
+  size = 'small',
+  navigation = true,
+  simple = false,
+  bullets = false,
+  previousLabel = null,
+  nextLabel = null,
+  highlightedStyle = 'secondary',
+  defaultStyle = null,
+  rangeBetween = null,
+  jumper = false,
+  pageLabel = null,
+  ariaLabel = 'Pagination',
+  ariaFirstLabel = 'first page',
+  ariaPreviousLabel = 'previous page',
+  ariaNextLabel = 'next page',
+  ariaLastLabel = 'last page',
+  ariaPageLabel = null,
+  onchange,
+  ...rest
+}: Props = $props()
+
+let jumperValue = $state('')
+
+const pageCount = $derived(Math.ceil(total / pageSize))
+
+const pages = $derived(
+  current
+    ? Array.from({ length: pageCount }, (_, i) => ({
+        idx: ++i,
+        show: shouldDisplayButton(i),
+      }))
+    : [],
+)
+
+let showNavigation: boolean = $derived(navigation && !bullets)
+
+function submitJumper({ code }: KeyboardEvent) {
+  const toPage = Number(jumperValue)
+  if (code !== 'Enter' || pageInvalid(toPage)) return
+
+  changePage(toPage)
+}
+
+function pageInvalid(idx: number): boolean {
+  return idx < 1 || idx > pageCount || !Number.isInteger(idx)
+}
+
+function shouldDisplayButton(idx: number): boolean {
+  if (!rangeBetween || [1, pageCount].includes(idx)) return true
+
+  return idx >= current - rangeBetween && idx <= current + rangeBetween
+}
+
+function shouldDisplayEllipsis(idx: number): boolean {
+  return pages[idx - 2].show
+}
+
+function changePage(val: number) {
+  if (pageInvalid(val)) return
+
+  current = val
+  onchange?.(current)
+}
+</script>
+
+{#snippet pageNumber(idx: number)}
+  {idx}
+{/snippet}
+
+{#snippet navigationButton(action: 'first' | 'previous' | 'next' | 'last')}
+  {@const atStart = action === 'first' || action === 'previous'}
+  {@const label = {
+    first: null,
+    previous: previousLabel,
+    next: nextLabel,
+    last: null,
+  }[action]}
+  {@const page = {
+    first: 1,
+    previous: current - 1,
+    next: current + 1,
+    last: pageCount,
+  }[action]}
+  {@const name = {
+    first: ariaFirstLabel,
+    previous: ariaPreviousLabel,
+    next: ariaNextLabel,
+    last: ariaLastLabel,
+  }[action]}
+  <NavigationButton
+    type={highlightedStyle}
+    {size}
+    {action}
+    {label}
+    disabled={atStart ? current <= 1 : current >= pageCount}
+    clickHandler={changePage.bind(null, page)}
+    ariaLabel={name}
+  />
+{/snippet}
+
+{#snippet navButtons(
+  actions: Array<'first' | 'previous' | 'next' | 'last'>,
+  inList: boolean,
+)}
+  {#if showNavigation}
+    {#each actions as action (action)}
+      {#if inList}
+        <li class="m-0">{@render navigationButton(action)}</li>
+      {:else}
+        {@render navigationButton(action)}
+      {/if}
+    {/each}
+  {/if}
+{/snippet}
+
+<nav
+  {...rest}
+  class={[
+    'inline-flex flex-wrap items-center justify-center gap-1',
+    rest.class,
+  ]}
+  aria-label={ariaLabel}
+>
+  {#if simple}
+    {@render navButtons(['first', 'previous'], false)}
+    {current} / {pageCount}
+    {@render navButtons(['next', 'last'], false)}
+  {:else}
+    <ul
+      class="m-0 flex list-none items-center gap-1 p-0 [&_li]:before:content-none"
+    >
+      {@render navButtons(['first', 'previous'], true)}
+      {#each pages as { idx, show }}
+        {#if show}
+          <li class="m-0">
+            <Button
+              {size}
+              isLink
+              class={bullets ? 'rounded-full!' : ''}
+              onclick={() => changePage(idx)}
+              type={idx === current ? highlightedStyle : defaultStyle}
+              aria-label={ariaPageLabel?.(idx) ?? `Page ${idx}`}
+              aria-current={idx === current ? 'page' : undefined}
+            >
+              {#if !bullets}
+                {@render (pageLabel ?? pageNumber)(idx)}
+              {/if}
+            </Button>
+          </li>
+        {:else if shouldDisplayEllipsis(idx)}
+          <li class="m-0">…</li>
+        {/if}
+      {/each}
+      {@render navButtons(['next', 'last'], true)}
+    </ul>
+  {/if}
+
+  {#if jumper}
+    <Input
+      class="inline w-16"
+      bind:value={jumperValue}
+      type="number"
+      placeholder="Go to"
+      min="1"
+      max={pageCount}
+      step="1"
+      onkeydown={submitJumper}
+    />
+  {/if}
+</nav>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { PaperSize, PaperType } from '../../types';
+interface Props {
+    total: number;
+    pageSize?: number;
+    current?: number;
+    size?: PaperSize;
+    navigation?: boolean;
+    /** When true, the pagination is displayed as $page / $pageCount. */
+    simple?: boolean;
+    bullets?: boolean;
+    previousLabel?: string | null;
+    nextLabel?: string | null;
+    highlightedStyle?: PaperType;
+    defaultStyle?: PaperType | null;
+    /** The number of pages to show before and after the current page. */
+    rangeBetween?: number | null;
+    /** When true, an input is displayed to jump to a specific page. */
+    jumper?: boolean;
+    pageLabel?: Snippet<[number]> | null;
+    ariaLabel?: string;
+    ariaFirstLabel?: string;
+    ariaPreviousLabel?: string;
+    ariaNextLabel?: string;
+    ariaLastLabel?: string;
+    ariaPageLabel?: ((idx: number) => string) | null;
+    onchange?: (current: number) => void;
+    [key: string]: any;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "current">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/{components → dist/components}/Pagination/arrow-dimension.js

@@ -1,6 +1,6 @@
 const arrowDimension = {
-    'small': 10,
-    'default': 14,
-    'large': 24,
+    small: 14,
+    default: 18,
+    large: 32,
 };
 export default arrowDimension;

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

@@ -1,3 +1,3 @@
 import Pagination from './Pagination.svelte';
-export declare type Direction = 'left' | 'right';
+export type Direction = 'left' | 'right';
 export default Pagination;

package/dist/components/Popover.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+import type { PaperColor, Position } from '../types'
+
+interface Props {
+  label?: string
+  position?: Position
+  inline?: boolean
+  type?: PaperColor | null
+  /** @deprecated Use `type`. */
+  background?: PaperColor | null
+  active?: boolean
+  /** When true, the popover is always shown. */
+  always?: boolean
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  label = '',
+  position = 'top',
+  inline = true,
+  type = null,
+  background = 'primary',
+  active = false,
+  always = false,
+  children,
+  ...rest
+}: Props = $props()
+
+const positionClass: Record<Position, string> = {
+  top: 'popover-paper-top',
+  bottom: 'popover-paper-bottom',
+  left: 'popover-paper-left',
+  right: 'popover-paper-right',
+}
+
+const color = $derived(type ?? background)
+
+const backgroundClass: Record<PaperColor, string> = {
+  primary: 'popover-paper-primary',
+  secondary: 'popover-paper-secondary',
+  success: 'popover-paper-success',
+  warning: 'popover-paper-warning',
+  danger: 'popover-paper-danger',
+  muted: 'popover-paper-muted',
+}
+</script>
+
+<div
+  {...rest}
+  data-popover={label}
+  class={[
+    'popover-paper',
+    positionClass[position],
+    color && backgroundClass[color],
+    {
+      inline,
+      active: always || active,
+    },
+    rest.class,
+  ]}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,17 @@
+import type { PaperColor, Position } from '../types';
+interface Props {
+    label?: string;
+    position?: Position;
+    inline?: boolean;
+    type?: PaperColor | null;
+    /** @deprecated Use `type`. */
+    background?: PaperColor | null;
+    active?: boolean;
+    /** When true, the popover is always shown. */
+    always?: boolean;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Popover: import("svelte").Component<Props, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/Progress.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+import type { PaperColor } from '../types'
+
+interface Props {
+  value?: number | string
+  type?: PaperColor
+  showValue?: boolean
+  striped?: boolean
+  /** Loops the bar. Ignores `value`. */
+  indeterminate?: boolean
+  /** @deprecated Use `indeterminate`. */
+  infinite?: boolean
+  /** @deprecated Use `class="mb-4"` instead. */
+  marginBottom?: boolean
+  barClass?: string
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  value = 50,
+  type = 'primary',
+  showValue = false,
+  striped = false,
+  indeterminate = false,
+  infinite = false,
+  marginBottom = true,
+  barClass = '',
+  children,
+  ...rest
+}: Props = $props()
+
+const barTypeClass: Record<Exclude<PaperColor, 'primary'>, string> = {
+  secondary: 'progress-paper-bar-secondary',
+  success: 'progress-paper-bar-success',
+  warning: 'progress-paper-bar-warning',
+  danger: 'progress-paper-bar-danger',
+  muted: 'progress-paper-bar-muted',
+}
+
+const stripedClass: Record<PaperColor, string> = {
+  primary: 'progress-paper-striped',
+  secondary: 'progress-paper-striped-secondary',
+  success: 'progress-paper-striped-success',
+  warning: 'progress-paper-striped-warning',
+  danger: 'progress-paper-striped-danger',
+  muted: 'progress-paper-striped-muted',
+}
+
+let cappedValue: number = $derived(Math.max(Math.min(+value, 100), 0))
+const isIndeterminate = $derived(indeterminate || infinite)
+
+let variantClass = $derived(
+  striped
+    ? (stripedClass[type] ?? '')
+    : type === 'primary'
+      ? ''
+      : (barTypeClass[type] ?? ''),
+)
+</script>
+
+<div
+  {...rest}
+  class={[
+    'progress-paper',
+    {
+      'progress-paper-indeterminate': isIndeterminate,
+      'mb-4': marginBottom,
+    },
+    rest.class,
+  ]}
+  role="progressbar"
+  aria-valuenow={isIndeterminate ? undefined : cappedValue}
+>
+  {#if isIndeterminate || cappedValue > 0}
+    <div
+      class={['progress-paper-bar', variantClass, barClass]}
+      style={isIndeterminate ? undefined : `width: ${cappedValue}%`}
+    >
+      {#if children}
+        {@render children?.()}
+      {:else if showValue}
+        {cappedValue}%
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { PaperColor } from '../types';
+interface Props {
+    value?: number | string;
+    type?: PaperColor;
+    showValue?: boolean;
+    striped?: boolean;
+    /** Loops the bar. Ignores `value`. */
+    indeterminate?: boolean;
+    /** @deprecated Use `indeterminate`. */
+    infinite?: boolean;
+    /** @deprecated Use `class="mb-4"` instead. */
+    marginBottom?: boolean;
+    barClass?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;