@joyautomation/salt 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/actions.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from '@sveltejs/kit';
+export declare const setTheme: Action;

package/dist/actions.js

@@ -0,0 +1,15 @@
+export const setTheme = async ({ request, cookies }) => {
+    const data = await request.formData();
+    const theme = data.get('theme');
+    cookies.set(`theme`, theme, {
+        path: '/',
+        secure: false,
+    });
+    const themeName = theme === 'themeDark' ? 'dark mode' : 'light mode';
+    return {
+        context: 'setTheme',
+        type: 'success',
+        message: `You are now in ${themeName}.`,
+        theme,
+    };
+};

package/dist/client.d.ts

@@ -0,0 +1,3 @@
+export declare function setTheme<ActionData extends {
+    [x: string]: string;
+}>(form?: ActionData | null): void;

package/dist/client.js

@@ -0,0 +1,12 @@
+export function setTheme(form) {
+    if (form?.context === 'setTheme') {
+        if (form?.theme === 'themeDark') {
+            document.body.classList.add('themeDark');
+            document.body.classList.remove('themeLight');
+        }
+        else {
+            document.body.classList.remove('themeDark');
+            document.body.classList.add('themeLight');
+        }
+    }
+}

package/dist/components/ThemeButton.svelte

@@ -0,0 +1,17 @@
+<script>import { enhance } from "$app/forms";
+import Moon from "./icons/Moon.svelte";
+import Sun from "./icons/Sun.svelte";
+export let theme;
+export let action = "setTheme";
+</script>
+
+<form method="POST" action={`?/${action}`} use:enhance>
+  <input
+    type="hidden"
+    name="theme"
+    value={theme === 'themeDark' ? 'themeLight' : 'themeDark'}
+  />
+  <button class="button--icon button__dark-mode"
+    >{#if theme === 'themeDark'}<Moon />{:else}<Sun />{/if}</button
+  >
+</form>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        theme: string;
+        action?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeButtonProps = typeof __propDef.props;
+export type ThemeButtonEvents = typeof __propDef.events;
+export type ThemeButtonSlots = typeof __propDef.slots;
+export default class ThemeButton extends SvelteComponent<ThemeButtonProps, ThemeButtonEvents, ThemeButtonSlots> {
+}
+export {};

package/dist/components/Toast.svelte

@@ -0,0 +1,67 @@
+<script>import { page } from "$app/stores";
+import { notifications, addNotification } from "../stores/notifications.js";
+import { slide } from "svelte/transition";
+let notifications_value;
+$:
+  if ($page.form && $page.form?.message) {
+    addNotification($page.form);
+  }
+notifications.subscribe((value) => {
+  notifications_value = value;
+});
+</script>
+
+<div class="toast">
+	{#each notifications_value as notification}
+		<div
+			class:toast--success={notification.type === 'success'}
+			class:toast--error={notification.type === 'error'}
+			class:toast--warning={notification.type === 'warning'}
+			transition:slide
+		>
+			{notification.message}
+		</div>
+	{/each}
+</div>
+
+<style>.toast {
+  position: fixed;
+  top: var(--spacing-unit);
+  right: 0;
+  left: 0;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: calc(var(--spacing-unit) * 3);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--spacing-unit);
+  pointer-events: none;
+  border-radius: var(--rounded-md);
+}
+.toast > div {
+  padding: calc(var(--spacing-unit) * 2);
+  border-radius: var(--rounded-md);
+  font-size: var(--text-sm);
+  pointer-events: auto;
+}
+
+.toast--success {
+  border: solid 1px var(--green-600);
+  background-color: var(--green-200);
+  color: var(--green-600);
+}
+
+.toast--error {
+  border: solid 1px var(--red-600);
+  background-color: var(--red-200);
+  color: var(--red-600);
+}
+
+.toast--warning {
+  border: solid 1px var(--amber-600);
+  background-color: var(--amber-200);
+  color: var(--amber-600);
+}</style>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastProps = typeof __propDef.props;
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/dist/components/Toggle.svelte

@@ -0,0 +1,75 @@
+<script>import { enhance } from "$app/forms";
+export let id;
+export let checked = false;
+export let name;
+export let selector = null;
+export let selectorName = "";
+export let buttonType = "button";
+</script>
+
+<button
+	type={buttonType}
+	class="toggle-switch"
+	class:toggle-switch--active={checked}
+	on:click={() => {if (buttonType === 'button') checked = !checked }}
+>
+	<span class="slider" />
+</button>
+<input {id} {name} type="hidden" value={!checked} />
+{#if selector !== null}
+	<input id={`selector${id}`} name={selectorName} type="hidden" value={selector} />
+{/if}
+
+<style>/* Define the size variable */
+:root {
+  --toggle-size: 40px;
+}
+
+/* Use the size variable for the toggle switch */
+.toggle-switch {
+  display: inline-block;
+  position: relative;
+  width: var(--toggle-size);
+  height: calc(var(--toggle-size) * 0.6); /* 60% of the width */
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: calc(var(--toggle-size) * 0.6); /* 60% of the width */
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  top: calc(var(--toggle-size) * 0.1);
+  height: calc(var(--toggle-size) * 0.4);
+  width: calc(var(--toggle-size) * 0.4); /* 52% of the width */
+  left: calc(var(--toggle-size) * 0.08); /* 8% of the width */
+  bottom: calc(var(--toggle-size) * 0.08); /* 8% of the width */
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+.toggle-switch--active > .slider {
+  background-color: var(--theme-primary);
+}
+
+.toggle-switch:focus > .slider {
+  box-shadow: 0 0 1px var(--theme-primary);
+}
+
+.toggle-switch--active > .slider:before {
+  -webkit-transform: translateX(calc(var(--toggle-size) * 0.45)); /* 52% of the width */
+  -ms-transform: translateX(calc(var(--toggle-size) * 0.45)); /* 52% of the width */
+  transform: translateX(calc(var(--toggle-size) * 0.45)); /* 52% of the width */
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        checked?: boolean | undefined;
+        name: string;
+        selector?: string | null | undefined;
+        selectorName?: string | undefined;
+        buttonType?: "button" | "submit" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponent<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

package/dist/components/icons/ArrowPath.svelte

@@ -0,0 +1,19 @@
+<script>
+	export let size = '1.5rem';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:height={size}
+	style:width={size}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+	/>
+</svg>

package/dist/components/icons/ArrowPath.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ArrowPathProps */
+/** @typedef {typeof __propDef.events}  ArrowPathEvents */
+/** @typedef {typeof __propDef.slots}  ArrowPathSlots */
+export default class ArrowPath extends SvelteComponent<{
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ArrowPathProps = typeof __propDef.props;
+export type ArrowPathEvents = typeof __propDef.events;
+export type ArrowPathSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/icons/ChevronDown.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let size = '1.5rem';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:height={size}
+	style:width={size}
+>
+	<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>

package/dist/components/icons/ChevronDown.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ChevronDownProps */
+/** @typedef {typeof __propDef.events}  ChevronDownEvents */
+/** @typedef {typeof __propDef.slots}  ChevronDownSlots */
+export default class ChevronDown extends SvelteComponent<{
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ChevronDownProps = typeof __propDef.props;
+export type ChevronDownEvents = typeof __propDef.events;
+export type ChevronDownSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/icons/ChevronUpDown.svelte

@@ -0,0 +1,18 @@
+<script>export let size = "1.5rem";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:height={size}
+	style:width={size}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+	/>
+</svg>

package/dist/components/icons/ChevronUpDown.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChevronUpDownProps = typeof __propDef.props;
+export type ChevronUpDownEvents = typeof __propDef.events;
+export type ChevronUpDownSlots = typeof __propDef.slots;
+export default class ChevronUpDown extends SvelteComponent<ChevronUpDownProps, ChevronUpDownEvents, ChevronUpDownSlots> {
+}
+export {};

package/dist/components/icons/DocumentMinus.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let size = '1.5rem'
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  style:height={size}
+  style:width={size}
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+  />
+</svg>

package/dist/components/icons/DocumentMinus.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  DocumentMinusProps */
+/** @typedef {typeof __propDef.events}  DocumentMinusEvents */
+/** @typedef {typeof __propDef.slots}  DocumentMinusSlots */
+export default class DocumentMinus extends SvelteComponent<{
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DocumentMinusProps = typeof __propDef.props;
+export type DocumentMinusEvents = typeof __propDef.events;
+export type DocumentMinusSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/icons/DocumentPlus.svelte

@@ -0,0 +1,19 @@
+<script>
+	export let size = '1.5rem';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:height={size}
+	style:width={size}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+	/>
+</svg>

package/dist/components/icons/DocumentPlus.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  DocumentPlusProps */
+/** @typedef {typeof __propDef.events}  DocumentPlusEvents */
+/** @typedef {typeof __propDef.slots}  DocumentPlusSlots */
+export default class DocumentPlus extends SvelteComponent<{
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DocumentPlusProps = typeof __propDef.props;
+export type DocumentPlusEvents = typeof __propDef.events;
+export type DocumentPlusSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/icons/Link.svelte

@@ -0,0 +1,19 @@
+<script>
+	export let size = '1.5rem';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:height={size}
+	style:width={size}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+	/>
+</svg>

package/dist/components/icons/Link.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LinkProps */
+/** @typedef {typeof __propDef.events}  LinkEvents */
+/** @typedef {typeof __propDef.slots}  LinkSlots */
+export default class Link extends SvelteComponent<{
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/icons/Moon.svelte

@@ -0,0 +1,18 @@
+<script>export let size = "1.5rem";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:width={size}
+	style:height={size}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+	/>
+</svg>

package/dist/components/icons/Moon.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MoonProps = typeof __propDef.props;
+export type MoonEvents = typeof __propDef.events;
+export type MoonSlots = typeof __propDef.slots;
+export default class Moon extends SvelteComponent<MoonProps, MoonEvents, MoonSlots> {
+}
+export {};

package/dist/components/icons/PauseCircle.svelte

@@ -0,0 +1,18 @@
+<script>export let size = "1.5rem";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:height={size}
+	style:width={size}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+	/>
+</svg>

package/dist/components/icons/PauseCircle.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PauseCircleProps = typeof __propDef.props;
+export type PauseCircleEvents = typeof __propDef.events;
+export type PauseCircleSlots = typeof __propDef.slots;
+export default class PauseCircle extends SvelteComponent<PauseCircleProps, PauseCircleEvents, PauseCircleSlots> {
+}
+export {};

package/dist/components/icons/Pencil.svelte

@@ -0,0 +1,18 @@
+<script>export let size = "1.5rem";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style:height={size}
+	style:width={size}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+	/>
+</svg>