drab 4.1.6 → 5.0.0-beta.0

package/dist/components/ShareButton.svelte

@@ -1,133 +0,0 @@
-<!--
-@component
-
-### ShareButton
-
-Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
-
-- If the browser cannot share the provided data:
-	- `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
-	- `files` - uses a hidden `anchor` element to download the first file in the `files` array
-- If no JavaScript:
-	- `button` is disabled
-	- `url` - displayed after the `button`
-
-@props
-
-- `classNoscript` - `noscript` class
-- `class` 
-- `id` 
-- `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
-- `title` 
-
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | default                         | `Share`       |
-| `complete` | displays after copy is complete | `Copied`      |
-
-@example
-
-```svelte
-<script lang="ts">
-	import { ShareButton } from "drab";
-
-	let fileInput: HTMLInputElement;
-
-	let fileShareData: ShareData;
-
-	const onInput = () => {
-		if (fileInput.files) {
-			fileShareData.files = [fileInput.files[0]];
-		}
-	};
-</script>
-
-<ShareButton
-	class="button button-primary mb-8"
-	shareData={{
-		text: "Check out this page: ",
-		title: "drab",
-		url: "https://drab.robino.dev",
-	}}
->
-	Share URL
-</ShareButton>
-
-<div>
-	<label class="label" for="fileInput">Upload File</label>
-	<input
-		type="file"
-		id="fileInput"
-		class="input mb-4"
-		bind:this={fileInput}
-		on:input={onInput}
-	/>
-	<ShareButton class="button button-primary" bind:shareData={fileShareData}>
-		Share File
-	</ShareButton>
-</div>
-```
--->
-
-<script>import { onMount } from "svelte";
-import { delay } from "../util/delay";
-let className = "";
-export { className as class };
-export let id = "";
-export let title = "";
-export let shareData = {};
-let downloadAnchor;
-export let classNoscript = "";
-let clientJs = false;
-let complete = false;
-const onClick = async () => {
-  if (navigator.canShare && navigator.canShare(shareData)) {
-    try {
-      await navigator.share(shareData);
-    } catch (error) {
-      if (error.name !== "AbortError") {
-        console.error(error);
-      }
-    }
-  } else if (shareData.url) {
-    try {
-      await navigator.clipboard.writeText(shareData.url);
-      complete = true;
-      setTimeout(() => complete = false, delay);
-    } catch (error) {
-      console.error(error);
-    }
-  } else if (shareData.files) {
-    const file = shareData.files.at(0);
-    if (file) {
-      downloadAnchor.download = file.name;
-      downloadAnchor.href = URL.createObjectURL(file);
-      downloadAnchor.click();
-    }
-  }
-};
-onMount(() => clientJs = true);
-</script>
-
-<button
-	type="button"
-	disabled={!clientJs || (!shareData.url && !shareData.files)}
-	on:click={onClick}
-	class={className}
-	{id}
-	{title}
->
-	{#if complete}
-		<slot name="complete">Copied</slot>
-	{:else}
-		<slot>Share</slot>
-	{/if}
-</button>
-
-<a href="/" bind:this={downloadAnchor} style:display="none">Download</a>
-
-{#if shareData.url}
-	<noscript><span class={classNoscript}>{shareData.url}</span></noscript>
-{/if}

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

@@ -1,93 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        title?: string | undefined;
-        /** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) */ shareData?: ShareData | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        complete: {};
-        default: {};
-    };
-};
-export type ShareButtonProps = typeof __propDef.props;
-export type ShareButtonEvents = typeof __propDef.events;
-export type ShareButtonSlots = typeof __propDef.slots;
-/**
- * ### ShareButton
- *
- * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
- *
- * - If the browser cannot share the provided data:
- * - `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
- * - `files` - uses a hidden `anchor` element to download the first file in the `files` array
- * - If no JavaScript:
- * - `button` is disabled
- * - `url` - displayed after the `button`
- *
- * @props
- *
- * - `classNoscript` - `noscript` class
- * - `class`
- * - `id`
- * - `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
- * - `title`
- *
- * @slots
- *
- * | name       | purpose                         | default value |
- * | ---------- | ------------------------------- | ------------- |
- * | `default`  | default                         | `Share`       |
- * | `complete` | displays after copy is complete | `Copied`      |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { ShareButton } from "drab";
- *
- * let fileInput: HTMLInputElement;
- *
- * let fileShareData: ShareData;
- *
- * const onInput = () => {
- * 	if (fileInput.files) {
- * 		fileShareData.files = [fileInput.files[0]];
- * 	}
- * };
- * </script>
- *
- * <ShareButton
- * class="button button-primary mb-8"
- * shareData={{
- * 	text: "Check out this page: ",
- * 	title: "drab",
- * 	url: "https://drab.robino.dev",
- * }}
- * >
- * Share URL
- * </ShareButton>
- *
- * <div>
- * <label class="label" for="fileInput">Upload File</label>
- * <input
- * 	type="file"
- * 	id="fileInput"
- * 	class="input mb-4"
- * 	bind:this={fileInput}
- * 	on:input={onInput}
- * />
- * <ShareButton class="button button-primary" bind:shareData={fileShareData}>
- * 	Share File
- * </ShareButton>
- * </div>
- * ```
- */
-export default class ShareButton extends SvelteComponent<ShareButtonProps, ShareButtonEvents, ShareButtonSlots> {
-}
-export {};

package/dist/components/Sheet.svelte

@@ -1,180 +0,0 @@
-<!--
-@component
-
-### Sheet
-
-Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
-
-@props
-
-- `classSheet` - sheet class - not the backdrop
-- `class` 
-- `display` - controls whether the sheet is displayed
-- `id` 
-- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
-- `position` - determines the position of sheet
-- `transition` - flies the sheet, set to `false` to remove
-
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | content                         | `Content`     |
-
-@events
-
-| name      | event              |
-| --------- | ------------------ |
-| `mount`   | sheet is mounted   | 
-| `destroy` | sheet is destroyed | 
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Sheet } from "drab";
-
-	let display = false;
-</script>
-
-<button
-	type="button"
-	class="button button-primary"
-	on:click={() => (display = true)}
->
-	Open
-</button>
-
-<Sheet
-	bind:display
-	class="z-40 backdrop-blur"
-	classSheet="card rounded-none border-none"
-	position="r"
->
-	<div class="mb-4 flex items-center justify-between">
-		<h2 class="my-0">Sheet</h2>
-		<button
-			type="button"
-			class="button button-ghost"
-			on:click={() => (display = false)}
-		>
-			Close
-		</button>
-	</div>
-	<div>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-		cillum dolore eu fugiat nulla pariatur.
-	</div>
-</Sheet>
-```
--->
-
-<script>import { createEventDispatcher, onMount, tick } from "svelte";
-import { fly } from "svelte/transition";
-import { prefersReducedMotion } from "../util/accessibility";
-import { duration } from "../util/transition";
-let className = "";
-export { className as class };
-export let id = "";
-export let classSheet = "";
-export let display = false;
-export let position = "l";
-export let maxSize = 488;
-export let transition = { duration, opacity: 1 };
-let sheet;
-let backdropStyles = true;
-let displaySheet = false;
-const dispatch = createEventDispatcher();
-const close = () => display = false;
-const onKeyDown = (e) => {
-  if (e.key === "Escape")
-    close();
-};
-const lifecycle = (node) => {
-  dispatch("mount");
-  if (node instanceof HTMLElement)
-    node.focus();
-  return { destroy: () => dispatch("destroy") };
-};
-const displayController = async (display2) => {
-  if (display2) {
-    backdropStyles = true;
-    displaySheet = true;
-  } else {
-    backdropStyles = false;
-    await tick();
-    displaySheet = false;
-  }
-};
-if (transition && !transition.x && !transition.y) {
-  if (position === "b") {
-    transition.y = maxSize;
-  } else if (position === "t") {
-    transition.y = -maxSize;
-  } else if (position === "r") {
-    transition.x = maxSize;
-  } else {
-    transition.x = -maxSize;
-  }
-}
-onMount(() => {
-  if (prefersReducedMotion())
-    transition = false;
-});
-$:
-  displayController(display);
-</script>
-
-<svelte:body on:keydown={onKeyDown} />
-
-{#if displaySheet}
-	<div
-		class="backdrop {backdropStyles ? className : ''}"
-		class:backdrop-bottom={position === "b"}
-		class:backdrop-top={position === "t"}
-		class:backdrop-right={position === "r"}
-		{id}
-	>
-		<div
-			bind:this={sheet}
-			transition:fly={transition ? transition : { duration: 0 }}
-			use:lifecycle
-			role="dialog"
-			tabindex="-1"
-			style="outline: none; {position === 't' || position === 'b'
-				? `max-height: ${maxSize}px;`
-				: `max-width: ${maxSize}px`}"
-			class={classSheet}
-		>
-			<slot>Content</slot>
-		</div>
-		<button title="Close" on:click={close}></button>
-	</div>
-{/if}
-
-<style>
-	button {
-		flex-grow: 1;
-	}
-	.backdrop {
-		display: flex;
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		overflow: hidden;
-	}
-	.backdrop-bottom {
-		flex-direction: column-reverse;
-	}
-	.backdrop-top {
-		flex-direction: column;
-	}
-	.backdrop-right {
-		flex-direction: row-reverse;
-	}
-</style>

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

@@ -1,99 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type FlyParams } from "svelte/transition";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        /** sheet class - not the backdrop */ classSheet?: string | undefined;
-        /** controls whether the sheet is displayed*/ display?: boolean | undefined;
-        /** determines the position of sheet */ position?: "t" | "r" | "b" | "l" | undefined;
-        /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
-        /** flies the sheet, set to `false` to remove */ transition?: false | FlyParams | undefined;
-    };
-    events: {
-        mount: CustomEvent<any>;
-        destroy: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type SheetProps = typeof __propDef.props;
-export type SheetEvents = typeof __propDef.events;
-export type SheetSlots = typeof __propDef.slots;
-/**
- * ### Sheet
- *
- * Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
- *
- * @props
- *
- * - `classSheet` - sheet class - not the backdrop
- * - `class`
- * - `display` - controls whether the sheet is displayed
- * - `id`
- * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
- * - `position` - determines the position of sheet
- * - `transition` - flies the sheet, set to `false` to remove
- *
- * @slots
- *
- * | name       | purpose                         | default value |
- * | ---------- | ------------------------------- | ------------- |
- * | `default`  | content                         | `Content`     |
- *
- * @events
- *
- * | name      | event              |
- * | --------- | ------------------ |
- * | `mount`   | sheet is mounted   |
- * | `destroy` | sheet is destroyed |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { Sheet } from "drab";
- *
- * let display = false;
- * </script>
- *
- * <button
- * type="button"
- * class="button button-primary"
- * on:click={() => (display = true)}
- * >
- * Open
- * </button>
- *
- * <Sheet
- * bind:display
- * class="z-40 backdrop-blur"
- * classSheet="card rounded-none border-none"
- * position="r"
- * >
- * <div class="mb-4 flex items-center justify-between">
- * 	<h2 class="my-0">Sheet</h2>
- * 	<button
- * 		type="button"
- * 		class="button button-ghost"
- * 		on:click={() => (display = false)}
- * 	>
- * 		Close
- * 	</button>
- * </div>
- * <div>
- * 	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- * 	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- * 	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- * 	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
- * 	cillum dolore eu fugiat nulla pariatur.
- * </div>
- * </Sheet>
- * ```
- */
-export default class Sheet extends SvelteComponent<SheetProps, SheetEvents, SheetSlots> {
-}
-export {};

package/dist/components/Tablature.svelte

@@ -1,173 +0,0 @@
-<!--
-@component
-
-### Tablature
-
-A complementary component to the `FrettedChord` for displaying a measure of tablature for a fretted instrument like guitar or ukulele. Created with HTML elements so it is customizable and responsive to the size of the container.
-
-@props
-
-- `beats` - number of beats in the measure, defaults to `4`
-- `class` 
-- `id` 
-- `notes` - an array of notes
-- `repeatEnd` - puts a repeat at the end of the measure
-- `repeatStart` - puts a repeat at the start of the measure
-- `strings` - number of strings on the instrument, defaults to `6`
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Tablature } from "drab";
-	import type { ComponentProps } from "svelte";
-
-	const notes: ComponentProps<Tablature>["notes"] = [
-		{
-			fret: 0,
-			beat: 1,
-			string: 1,
-		},
-		{
-			fret: 1,
-			beat: 2,
-			string: 2,
-		},
-		{
-			fret: "X",
-			beat: 2,
-			string: 3,
-		},
-		{
-			fret: 2,
-			beat: 3,
-			string: 4,
-			mod: "/3p2",
-		},
-		{
-			fret: 7,
-			beat: 4,
-			string: 3,
-		},
-	];
-</script>
-
-<div class="font-mono font-semibold">
-	<div class="mb-8 h-24">
-		<Tablature {notes} repeatStart />
-	</div>
-	<div class="h-16 text-sm">
-		<Tablature {notes} strings={4} repeatEnd />
-	</div>
-</div>
-```
--->
-
-<script>let className = "";
-export { className as class };
-export let id = "";
-export let strings = 6;
-export let beats = 4;
-export let repeatStart = false;
-export let repeatEnd = false;
-export let notes = [];
-const dotSize = 5;
-const dotXOffset = 9;
-const yOffset = (stringNumber) => {
-  return 100 / strings * stringNumber + 100 / strings / 2;
-};
-const xOffset = (beat) => {
-  return 100 / beats * beat - 100 / beats / 2;
-};
-const dotYOffset = () => {
-  const stringPosition = strings < 5 ? 0.5 : 1.5;
-  return yOffset(stringPosition) - dotSize / 2;
-};
-</script>
-
-<div
-	class="measure {className}"
-	{id}
-	style:--top-offset="{yOffset(0)}%"
-	style:--dot-size="{dotSize}%"
->
-	{#each Array.from({ length: strings }, (v, k) => k) as string}
-		<div class="string" style:top="{yOffset(string)}%"></div>
-	{/each}
-	{#each notes as note}
-		<div
-			class="note"
-			style:top="{yOffset(note.string - 1)}%"
-			style:left="{xOffset(note.beat)}%"
-		>
-			<div style:display="flex">
-				<span>{note.fret}</span>
-				{#if note.mod}
-					<span>{note.mod}</span>
-				{/if}
-			</div>
-		</div>
-	{/each}
-	<div class="bar" style:left="0" style:width={repeatStart ? "3px" : ""}></div>
-	<div class="bar" style:right="0" style:width={repeatEnd ? "3px" : ""}></div>
-	{#if repeatStart}
-		<div class="bar" style:left="5px"></div>
-		<div
-			class="dot"
-			style:top="{dotYOffset()}%"
-			style:left="{dotXOffset}px"
-		></div>
-		<div
-			class="dot"
-			style:bottom="{dotYOffset()}%"
-			style:left="{dotXOffset}px"
-		></div>
-	{/if}
-	{#if repeatEnd}
-		<div class="bar" style:right="5px"></div>
-		<div
-			class="dot"
-			style:top="{dotYOffset()}%"
-			style:right="{dotXOffset}px"
-		></div>
-		<div
-			class="dot"
-			style:bottom="{dotYOffset()}%"
-			style:right="{dotXOffset}px"
-		></div>
-	{/if}
-</div>
-
-<style>
-	.measure {
-		position: relative;
-		width: 100%;
-		height: 100%;
-	}
-	.note {
-		position: absolute;
-		line-height: 0;
-		margin-left: -0.5ch;
-		letter-spacing: 0.1em;
-	}
-	.string {
-		position: absolute;
-		opacity: 35%;
-		width: 100%;
-		border-top: 1px solid currentColor;
-	}
-	.bar {
-		position: absolute;
-		background-color: currentColor;
-		width: 1.2px;
-		top: var(--top-offset);
-		bottom: calc(var(--top-offset) - 0.8px);
-	}
-	.dot {
-		position: absolute;
-		height: var(--dot-size);
-		aspect-ratio: 1;
-		background-color: currentColor;
-		border-radius: 999px;
-	}
-</style>