spaper 1.3.0 → 2.0.0

package/dist/components/Form/Slider.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { onMount } from 'svelte'
+import type { PaperType, PaperColor } from '../../types'
+
+interface Props {
+  label?: string
+  min?: number | string
+  max?: number | string
+  step?: number | string
+  /** @deprecated Use `class="w-full"` instead. */
+  block?: boolean
+  hideValue?: boolean
+  value?: number | string | null
+  type?: PaperColor | null
+  /** @deprecated Use `type` — maps to `slider-paper-{color}`. */
+  background?: PaperType | null
+  percentage?: boolean
+  disabled?: boolean
+  children?: import('svelte').Snippet
+  output?: import('svelte').Snippet<[number | string | null]>
+  [key: string]: any
+}
+
+let {
+  label = '',
+  min = 0,
+  max = 100,
+  step = 1,
+  block = false,
+  hideValue = false,
+  value = $bindable(null),
+  type = null,
+  background = null,
+  percentage = false,
+  disabled = false,
+  children,
+  output,
+  ...rest
+}: Props = $props()
+
+const typeClass: Record<PaperColor, string> = {
+  primary: 'slider-paper-primary',
+  secondary: 'slider-paper-secondary',
+  success: 'slider-paper-success',
+  warning: 'slider-paper-warning',
+  danger: 'slider-paper-danger',
+  muted: 'slider-paper-muted',
+}
+
+let rangeEl: HTMLInputElement | undefined = $state()
+let outputValue: string = $state('')
+
+function syncFill(el = rangeEl) {
+  if (!el) return
+  const lo = Number(min)
+  const hi = Number(max)
+  const span = hi - lo
+  const pct =
+    !Number.isFinite(span) || span === 0
+      ? 0
+      : Math.min(100, Math.max(0, ((el.valueAsNumber - lo) / span) * 100))
+  el.style.setProperty('--value', `${pct}%`)
+}
+
+function formatOutput(raw: string | number) {
+  return percentage
+    ? String(Math.round((Number(raw) / Number(max)) * 100))
+    : String(raw)
+}
+
+function syncOutput() {
+  if (value !== null && value !== '') {
+    outputValue = formatOutput(value)
+    return
+  }
+  outputValue = rangeEl ? formatOutput(rangeEl.value) : ''
+}
+
+function onInput() {
+  syncFill()
+  outputValue = formatOutput(rangeEl!.value)
+}
+
+onMount(() => {
+  syncFill()
+  syncOutput()
+})
+
+let color = $derived(type ?? background)
+
+$effect(() => {
+  syncFill()
+  syncOutput()
+})
+</script>
+
+<label {...rest} class={[{ block, disabled }, rest.class]}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {label}
+  {/if}
+  <input
+    type="range"
+    bind:this={rangeEl}
+    bind:value
+    class={[
+      'slider-paper',
+      color ? typeClass[color] : '',
+      { 'w-full': block },
+      rest.class,
+    ]}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    oninput={onInput}
+  />
+  {#if !hideValue}
+    <output>
+      {#if output}
+        {@render output(value)}
+      {:else}
+        {outputValue}
+        {#if percentage}%{/if}
+      {/if}
+    </output>
+  {/if}
+</label>

package/dist/components/Form/Slider.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { PaperType, PaperColor } from '../../types';
+interface Props {
+    label?: string;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    /** @deprecated Use `class="w-full"` instead. */
+    block?: boolean;
+    hideValue?: boolean;
+    value?: number | string | null;
+    type?: PaperColor | null;
+    /** @deprecated Use `type` — maps to `slider-paper-{color}`. */
+    background?: PaperType | null;
+    percentage?: boolean;
+    disabled?: boolean;
+    children?: import('svelte').Snippet;
+    output?: import('svelte').Snippet<[number | string | null]>;
+    [key: string]: any;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Form/Switch.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+import type { PaperType } from '../../types'
+
+interface TileSide {
+  label: string
+  background?: PaperType
+}
+
+interface TileOptions {
+  on: TileSide
+  off: TileSide
+}
+
+interface Props {
+  checked?: boolean
+  disabled?: boolean
+  round?: boolean
+  inline?: boolean
+  tile?: TileOptions | null
+  onchange?: (checked: boolean) => void
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  checked = $bindable(false),
+  disabled = false,
+  round = false,
+  inline = false,
+  tile = null,
+  onchange,
+  children,
+  ...rest
+}: Props = $props()
+
+const domId = $props.id()
+
+let switchClass = $derived(inline ? 'paper-switch-2' : 'paper-switch')
+let labelClass = $derived(
+  inline ? 'paper-switch-2-label' : 'paper-switch-label',
+)
+
+function handleChange() {
+  onchange?.(checked)
+}
+
+const backgrounds: Record<PaperType, string> = {
+  primary: 'bg-primary',
+  secondary: 'bg-secondary',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  danger: 'bg-danger',
+}
+
+function bgClass(color?: PaperType) {
+  if (!color) return ''
+  return backgrounds[color]
+}
+</script>
+
+{#if tile}
+  <label {...rest} class={['paper-switch-tile', { disabled }, rest.class]}>
+    <input bind:checked type="checkbox" {disabled} onchange={handleChange} />
+    <div class="paper-switch-tile-card border-paper">
+      <div
+        class={[
+          'paper-switch-tile-card-front',
+          'border-paper',
+          bgClass(tile.off.background),
+        ]}
+      >
+        {tile.off.label}
+      </div>
+      <div
+        class={[
+          'paper-switch-tile-card-back',
+          'border-paper',
+          bgClass(tile.on.background),
+        ]}
+      >
+        {tile.on.label}
+      </div>
+    </div>
+  </label>
+{:else}
+  <label class={switchClass}>
+    <input
+      id={domId}
+      bind:checked
+      type="checkbox"
+      {disabled}
+      onchange={handleChange}
+    />
+    <span class={['paper-switch-slider', { round }]}></span>
+  </label>
+  {#if children}
+    <label class={labelClass} for={domId}>
+      {@render children?.()}
+    </label>
+  {/if}
+{/if}

package/dist/components/Form/Switch.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { PaperType } from '../../types';
+interface TileSide {
+    label: string;
+    background?: PaperType;
+}
+interface TileOptions {
+    on: TileSide;
+    off: TileSide;
+}
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    round?: boolean;
+    inline?: boolean;
+    tile?: TileOptions | null;
+    onchange?: (checked: boolean) => void;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/Form/index.d.ts

@@ -0,0 +1,9 @@
+import Input from './Input.svelte';
+import Select from './Select.svelte';
+import Radio from './Radio.svelte';
+import Checkbox from './Checkbox.svelte';
+import Switch from './Switch.svelte';
+import Slider from './Slider.svelte';
+import { NumberInput } from './NumberInput';
+export type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'time' | 'date' | 'month' | 'week' | 'datetime-local' | 'color' | 'textarea';
+export { Input, Select, Radio, Checkbox, Switch, Slider, NumberInput };

package/{components → dist/components}/Form/index.js

@@ -4,5 +4,5 @@ import Radio from './Radio.svelte';
 import Checkbox from './Checkbox.svelte';
 import Switch from './Switch.svelte';
 import Slider from './Slider.svelte';
-import Form from './Form.svelte';
-export { Input, Select, Radio, Checkbox, Switch, Slider, Form, };
+import { NumberInput } from './NumberInput';
+export { Input, Select, Radio, Checkbox, Switch, Slider, NumberInput };

package/dist/components/Hero.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+import type { Snippet } from 'svelte'
+import type { PaperSize, PaperType, StringOrSnippet } from '../types'
+import { isSnippet } from '../utils'
+
+type HeroSize = PaperSize | 'fullheight'
+type HeroType = PaperType | 'muted'
+
+interface Props {
+  type?: HeroType
+  size?: HeroSize
+  border?: boolean
+  title?: StringOrSnippet
+  textLead?: StringOrSnippet
+  children?: Snippet
+  class?: string
+  [key: string]: unknown
+}
+
+let {
+  type = 'primary',
+  size = 'default',
+  border = true,
+  title = '',
+  textLead = '',
+  children,
+  class: className = '',
+  ...rest
+}: Props = $props()
+
+const typeClass: Record<HeroType, string> = {
+  primary: 'hero-paper-primary',
+  secondary: 'hero-paper-secondary',
+  success: 'hero-paper-success',
+  warning: 'hero-paper-warning',
+  danger: 'hero-paper-danger',
+  muted: 'hero-paper-muted',
+}
+
+const sizeClass: Record<Exclude<HeroSize, 'default'>, string> = {
+  small: 'hero-paper-sm',
+  large: 'hero-paper-lg',
+  fullheight: 'hero-paper-fullheight',
+}
+</script>
+
+<section
+  {...rest}
+  class={[
+    'hero-paper',
+    typeClass[type],
+    size !== 'default' ? sizeClass[size] : '',
+    { 'border-0': !border },
+    className,
+  ]}
+>
+  <div class="hero-paper-body">
+    {#if isSnippet(title)}
+      {@render title()}
+    {:else if title}
+      <h2 class="hero-paper-title">{title}</h2>
+    {/if}
+
+    {#if isSnippet(textLead) || textLead}
+      <p class="hero-paper-lead">
+        {#if isSnippet(textLead)}
+          {@render textLead()}
+        {:else}
+          {textLead}
+        {/if}
+      </p>
+    {/if}
+
+    {#if children}
+      <div>{@render children()}</div>
+    {/if}
+  </div>
+</section>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { PaperSize, PaperType, StringOrSnippet } from '../types';
+type HeroSize = PaperSize | 'fullheight';
+type HeroType = PaperType | 'muted';
+interface Props {
+    type?: HeroType;
+    size?: HeroSize;
+    border?: boolean;
+    title?: StringOrSnippet;
+    textLead?: StringOrSnippet;
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/components/Icon.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+import { SketchyIcon } from '@sketchyicons/svelte'
+import type { IconNode } from '@sketchyicons/svelte'
+import type { PaperColor } from '../types'
+
+interface Props {
+  /** Icon geometry (`IconNode` from `spaper/icons` or `@sketchyicons/svelte`). */
+  name?: IconNode | null
+  /** Sketchyicons prop name — same as `name`. */
+  img?: IconNode | null
+  /** Paper color token. Overridden by `color` when both are set. */
+  type?: PaperColor | null
+  /**
+   * Stroke color: a paper token (`primary`, `muted`, …) or any CSS color.
+   * Wins over `type` when both are set.
+   */
+  color?: PaperColor | (string & {}) | null
+  size?: number | string
+  strokeWidth?: number | string
+  absoluteStrokeWidth?: boolean
+  /**
+   * Path fill: a paper token (`primary`, `danger`, …) or any CSS color
+   * (e.g. `currentColor`). SketchyIcon has no fill — drawn locally when set.
+   */
+  fill?: PaperColor | (string & {}) | null
+  [key: string]: any
+}
+
+let {
+  name = null,
+  img = null,
+  type = null,
+  color = null,
+  size = 24,
+  strokeWidth = 2,
+  absoluteStrokeWidth = false,
+  fill = null,
+  ...rest
+}: Props = $props()
+
+const TOKEN_COLORS = new Set<string>([
+  'primary',
+  'secondary',
+  'success',
+  'warning',
+  'danger',
+  'muted',
+])
+
+function resolveColor(raw: string | null | undefined): string {
+  if (!raw) return 'currentColor'
+  if (TOKEN_COLORS.has(raw)) return `var(--paper-${raw})`
+  return raw
+}
+
+let node = $derived(name ?? img)
+let resolvedColor = $derived(
+  resolveColor((color ?? type) as string | null | undefined),
+)
+let resolvedFill = $derived(!fill ? null : resolveColor(fill as string))
+let width = $derived(
+  absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
+)
+let ariaHidden = $derived(
+  rest['aria-label'] || rest['aria-labelledby'] ? undefined : ('true' as const),
+)
+</script>
+
+{#if node}
+  {#if resolvedFill}
+    <!-- SketchyIcon has no `fill` prop — draw locally when a fill is requested. -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      width={size}
+      height={size}
+      stroke={resolvedColor}
+      stroke-width={width}
+      aria-hidden={ariaHidden}
+      {...rest}
+      class={['inline-block', rest.class]}
+    >
+      {#each node as [, attributes], i (i)}
+        <path d={String(attributes.d)} fill={resolvedFill} />
+      {/each}
+    </svg>
+  {:else}
+    <SketchyIcon
+      img={node}
+      {size}
+      color={resolvedColor}
+      {strokeWidth}
+      {absoluteStrokeWidth}
+      aria-hidden={ariaHidden}
+      {...rest}
+      class={['inline-block', rest.class]}
+    />
+  {/if}
+{/if}

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

@@ -0,0 +1,27 @@
+import type { IconNode } from '@sketchyicons/svelte';
+import type { PaperColor } from '../types';
+interface Props {
+    /** Icon geometry (`IconNode` from `spaper/icons` or `@sketchyicons/svelte`). */
+    name?: IconNode | null;
+    /** Sketchyicons prop name — same as `name`. */
+    img?: IconNode | null;
+    /** Paper color token. Overridden by `color` when both are set. */
+    type?: PaperColor | null;
+    /**
+     * Stroke color: a paper token (`primary`, `muted`, …) or any CSS color.
+     * Wins over `type` when both are set.
+     */
+    color?: PaperColor | (string & {}) | null;
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    /**
+     * Path fill: a paper token (`primary`, `danger`, …) or any CSS color
+     * (e.g. `currentColor`). SketchyIcon has no fill — drawn locally when set.
+     */
+    fill?: PaperColor | (string & {}) | null;
+    [key: string]: any;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+import type { Component } from 'svelte'
+import type { StringOrSnippet } from '../../types'
+import { isSnippet } from '../../utils'
+import Button from '../Button.svelte'
+import Icon from '../Icon.svelte'
+import { X } from '../../icons'
+
+interface Props {
+  active?: boolean
+  title?: StringOrSnippet
+  subTitle?: StringOrSnippet
+  content?: string
+  component?: Component | null
+  closeBtnText?: string
+  onclose?: () => void
+  children?: import('svelte').Snippet
+  footer?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  active = $bindable(false),
+  title = '',
+  subTitle = '',
+  content = '',
+  component = null,
+  closeBtnText = 'Close',
+  onclose,
+  children,
+  footer,
+  ...rest
+}: Props = $props()
+
+let dialogEl: HTMLDialogElement | undefined = $state()
+const uid = $props.id()
+
+export function close() {
+  active = false
+}
+
+function onNativeClose() {
+  active = false
+  onclose?.()
+}
+
+function onBackdropClick(e: MouseEvent) {
+  if (e.target === dialogEl) close()
+}
+
+$effect(() => {
+  if (dialogEl) {
+    if (active && !dialogEl.open) dialogEl.showModal()
+    else if (!active && dialogEl.open) dialogEl.close()
+  }
+})
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+  bind:this={dialogEl}
+  {...rest}
+  class={[
+    'modal-paper',
+    'border-paper',
+    'rounded-paper',
+    'shadow-paper',
+    rest.class,
+  ]}
+  onclick={onBackdropClick}
+  onclose={onNativeClose}
+  {...title ? { 'aria-labelledby': uid } : {}}
+>
+  <form method="dialog">
+    <button
+      type="submit"
+      class="modal-paper-close inline-flex items-center justify-center"
+      aria-label="Close"
+    >
+      <Icon name={X} size={20} />
+    </button>
+  </form>
+
+  {#if title}
+    <h4 id={uid} class="modal-paper-title">
+      {#if isSnippet(title)}
+        {@render title()}
+      {:else}
+        {title}
+      {/if}
+    </h4>
+  {/if}
+  {#if subTitle}
+    <h5 class="modal-paper-subtitle">
+      {#if isSnippet(subTitle)}
+        {@render subTitle()}
+      {:else}
+        {subTitle}
+      {/if}
+    </h5>
+  {/if}
+
+  {#if content}
+    {content}
+  {:else if component}
+    {@const Dynamic = component}
+    <Dynamic />
+  {:else}
+    {@render children?.()}
+  {/if}
+
+  <footer class="flex flex-wrap items-center justify-end gap-2 mt-4">
+    {#if footer}
+      {@render footer?.()}
+    {/if}
+    <Button onclick={close} type="primary">
+      {closeBtnText}
+    </Button>
+  </footer>
+</dialog>

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

@@ -0,0 +1,19 @@
+import type { Component } from 'svelte';
+import type { StringOrSnippet } from '../../types';
+interface Props {
+    active?: boolean;
+    title?: StringOrSnippet;
+    subTitle?: StringOrSnippet;
+    content?: string;
+    component?: Component | null;
+    closeBtnText?: string;
+    onclose?: () => void;
+    children?: import('svelte').Snippet;
+    footer?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Modal: Component<Props, {
+    close: () => void;
+}, "active">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'svelte';
+import Modal from './Modal.svelte';
+type ModalProps = ComponentProps<typeof Modal>;
+type ProgrammaticModalProps = Omit<ModalProps, 'active'>;
+interface ProgrammaticModalInstance {
+    close: () => void;
+}
+type ProgrammaticModalComponent = typeof Modal & {
+    open: (props: ProgrammaticModalProps) => ProgrammaticModalInstance;
+};
+declare const _default: ProgrammaticModalComponent;
+export default _default;