sveltacular 0.0.1

package/dist/layout/flex-col.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        marginY?: number | undefined;
+        marginX?: number | undefined;
+        gap?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FlexColProps = typeof __propDef.props;
+export type FlexColEvents = typeof __propDef.events;
+export type FlexColSlots = typeof __propDef.slots;
+export default class FlexCol extends SvelteComponent<FlexColProps, FlexColEvents, FlexColSlots> {
+}
+export {};

package/dist/layout/flex-item.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let grow = false;
+</script>
+
+<div style={`flex: ${grow ? 1 : 0}`}>
+	<slot />
+</div>

package/dist/layout/flex-item.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FlexItemProps */
+/** @typedef {typeof __propDef.events}  FlexItemEvents */
+/** @typedef {typeof __propDef.slots}  FlexItemSlots */
+export default class FlexItem extends SvelteComponent<{
+    grow?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type FlexItemProps = typeof __propDef.props;
+export type FlexItemEvents = typeof __propDef.events;
+export type FlexItemSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        grow?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/layout/flex-row.svelte

@@ -0,0 +1,33 @@
+<script>export let gap = 1;
+export let layout = "stretch";
+export let size = "full";
+</script>
+
+<div style={`gap: ${gap}rem`} class="{layout} {size}">
+	<slot />
+</div>
+
+<style>div {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+div *.auto {
+  width: auto;
+}
+div.stretch {
+  justify-content: space-between;
+  align-items: stretch;
+}
+div.stretch div {
+  flex: 1;
+}
+div.end {
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+div.start {
+  justify-content: flex-start;
+  align-items: flex-start;
+}</style>

package/dist/layout/flex-row.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        gap?: number | undefined;
+        layout?: "stretch" | "center" | "end" | "start" | undefined;
+        size?: "full" | "auto" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FlexRowProps = typeof __propDef.props;
+export type FlexRowEvents = typeof __propDef.events;
+export type FlexRowSlots = typeof __propDef.slots;
+export default class FlexRow extends SvelteComponent<FlexRowProps, FlexRowEvents, FlexRowSlots> {
+}
+export {};

package/dist/modals/alert.stories.svelte

@@ -0,0 +1,19 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Alert from "./alert.svelte";
+</script>
+
+<Meta title="Modals/Alert" component={Alert} />
+
+<Story name="Alert">
+	<Alert title="Error" open>Something went wrong and we need to make sure you see this.</Alert>
+</Story>
+
+<Story name="Alert (No Title)">
+	<Alert open>Something went wrong and we need to make sure you see this.</Alert>
+</Story>
+
+<Story name="Alert (X-Large)">
+	<Alert title="Extra Large" open size="xl"
+		>Something went wrong and we need to make sure you see this.</Alert
+	>
+</Story>

package/dist/modals/alert.stories.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 AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/modals/alert.svelte

@@ -0,0 +1,44 @@
+<script>import DialogBody from "./dialog-body.svelte";
+import DialogFooter from "./dialog-footer.svelte";
+import DialogHeader from "./dialog-header.svelte";
+import Dialog from "./dialog-window.svelte";
+import Divider from "../generic/divider/divider.svelte";
+import Overlay from "../generic/overlay.svelte";
+import Button from "../forms/button/button.svelte";
+export let open = false;
+export let title = void 0;
+export let size = "md";
+export let buttonText = "OK";
+export let showCloseButton = true;
+const close = () => open = false;
+</script>
+
+{#if open}
+	<Overlay>
+		<Dialog {size}>
+			<div>
+				{#if title}
+					<DialogHeader on:close={close} {showCloseButton}>
+						{title}
+					</DialogHeader>
+					<Divider />
+				{/if}
+				<DialogBody>
+					<slot />
+				</DialogBody>
+				<Divider />
+			</div>
+			<DialogFooter>
+				<Button on:click={close} size="full">
+					{buttonText}
+				</Button>
+			</DialogFooter>
+		</Dialog>
+	</Overlay>
+{/if}
+
+<style>
+	div {
+		padding-bottom: 3rem;
+	}
+</style>

package/dist/modals/alert.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../types/form.js';
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        title?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        buttonText?: string | undefined;
+        showCloseButton?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/modals/confirm.stories.svelte

@@ -0,0 +1,9 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Confirm from "./confirm.svelte";
+</script>
+
+<Meta title="Modals/Confirm" component={Confirm} />
+
+<Story name="Confirm">
+	<Confirm title="Something Will Happen" open>Do you want to do this thing?</Confirm>
+</Story>

package/dist/modals/confirm.stories.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 ConfirmProps = typeof __propDef.props;
+export type ConfirmEvents = typeof __propDef.events;
+export type ConfirmSlots = typeof __propDef.slots;
+export default class Confirm extends SvelteComponent<ConfirmProps, ConfirmEvents, ConfirmSlots> {
+}
+export {};

package/dist/modals/confirm.svelte

@@ -0,0 +1,57 @@
+<script>import DialogBody from "./dialog-body.svelte";
+import DialogFooter from "./dialog-footer.svelte";
+import DialogHeader from "./dialog-header.svelte";
+import Dialog from "./dialog-window.svelte";
+import Overlay from "../generic/overlay.svelte";
+import { createEventDispatcher } from "svelte";
+import Button from "../forms/button/button.svelte";
+import Divider from "../generic/divider/divider.svelte";
+export let open = false;
+export let title = void 0;
+export let size = "md";
+export let yesText = "Yes";
+export let noText = "No";
+export let showCloseButton = true;
+const dispatch = createEventDispatcher();
+const no = () => {
+  open = false;
+  dispatch("no");
+};
+const yes = () => {
+  open = false;
+  dispatch("yes");
+};
+</script>
+
+{#if open}
+	<Overlay>
+		<Dialog {size}>
+			<div class="body">
+				{#if title}
+					<DialogHeader on:close={no} {showCloseButton}>
+						{title}
+					</DialogHeader>
+					<Divider />
+				{/if}
+				<DialogBody>
+					<slot />
+				</DialogBody>
+				<Divider />
+			</div>
+			<DialogFooter>
+				<Button on:click={no} style="secondary" size="full">
+					{noText}
+				</Button>
+				<Button on:click={yes} style="primary" size="full">
+					{yesText}
+				</Button>
+			</DialogFooter>
+		</Dialog>
+	</Overlay>
+{/if}
+
+<style>
+	.body {
+		padding-bottom: 3rem;
+	}
+</style>

package/dist/modals/confirm.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../types/form.js';
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        title?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        yesText?: string | undefined;
+        noText?: string | undefined;
+        showCloseButton?: boolean | undefined;
+    };
+    events: {
+        yes: CustomEvent<void>;
+        no: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ConfirmProps = typeof __propDef.props;
+export type ConfirmEvents = typeof __propDef.events;
+export type ConfirmSlots = typeof __propDef.slots;
+export default class Confirm extends SvelteComponent<ConfirmProps, ConfirmEvents, ConfirmSlots> {
+}
+export {};

package/dist/modals/dialog-body.svelte

@@ -0,0 +1,9 @@
+<div>
+	<slot />
+</div>
+
+<style>div {
+  color: #000;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}</style>

package/dist/modals/dialog-body.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  DialogBodyProps */
+/** @typedef {typeof __propDef.events}  DialogBodyEvents */
+/** @typedef {typeof __propDef.slots}  DialogBodySlots */
+export default class DialogBody extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DialogBodyProps = typeof __propDef.props;
+export type DialogBodyEvents = typeof __propDef.events;
+export type DialogBodySlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/modals/dialog-footer.svelte

@@ -0,0 +1,19 @@
+<script>
+	import FlexRow from '../layout/flex-row.svelte';
+</script>
+
+<footer>
+	<FlexRow layout="stretch">
+		<slot />
+	</FlexRow>
+</footer>
+
+<style>footer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 4rem;
+  padding: 0 0.5rem;
+  text-align: center;
+}</style>

package/dist/modals/dialog-footer.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  DialogFooterProps */
+/** @typedef {typeof __propDef.events}  DialogFooterEvents */
+/** @typedef {typeof __propDef.slots}  DialogFooterSlots */
+export default class DialogFooter extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DialogFooterProps = typeof __propDef.props;
+export type DialogFooterEvents = typeof __propDef.events;
+export type DialogFooterSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/modals/dialog-header.svelte

@@ -0,0 +1,38 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let showCloseButton = true;
+</script>
+
+<header>
+	<h1><slot /></h1>
+	{#if showCloseButton}
+		<div>
+			<button on:click={() => dispatch('close')}>X</button>
+		</div>
+	{/if}
+</header>
+
+<style>header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 2rem;
+  overflow: hidden;
+  color: #000;
+}
+header h1 {
+  margin: 0;
+  flex-grow: 1;
+  font-size: 1.25rem;
+  line-height: 2rem;
+}
+header div {
+  text-align: right;
+}
+header div button {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font-size: 1.5rem;
+  cursor: pointer;
+}</style>

package/dist/modals/dialog-header.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        showCloseButton?: boolean | undefined;
+    };
+    events: {
+        close: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DialogHeaderProps = typeof __propDef.props;
+export type DialogHeaderEvents = typeof __propDef.events;
+export type DialogHeaderSlots = typeof __propDef.slots;
+export default class DialogHeader extends SvelteComponent<DialogHeaderProps, DialogHeaderEvents, DialogHeaderSlots> {
+}
+export {};

package/dist/modals/dialog-window.svelte

@@ -0,0 +1,33 @@
+<script>export let size = "md";
+</script>
+
+<div class={size}>
+	<slot />
+</div>
+
+<style>div {
+  position: absolute;
+  border: solid 0.1rem #000;
+  padding: 1rem;
+  margin: 1rem;
+  background-color: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  width: 20rem;
+  max-width: 70%;
+  z-index: 9999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+div.sm {
+  width: 15rem;
+  max-width: 50%;
+}
+div.lg {
+  width: 25rem;
+  max-width: 80%;
+}
+div.xl {
+  width: 90%;
+}</style>

package/dist/modals/dialog-window.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../types/form.js';
+declare const __propDef: {
+    props: {
+        size?: FormFieldSizeOptions | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DialogWindowProps = typeof __propDef.props;
+export type DialogWindowEvents = typeof __propDef.events;
+export type DialogWindowSlots = typeof __propDef.slots;
+export default class DialogWindow extends SvelteComponent<DialogWindowProps, DialogWindowEvents, DialogWindowSlots> {
+}
+export {};

package/dist/modals/prompt.stories.svelte

@@ -0,0 +1,9 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Prompt from "./prompt.svelte";
+</script>
+
+<Meta title="Modals/Prompt" component={Prompt} />
+
+<Story name="Default">
+	<Prompt open title="Rename File">What would you like to rename this file to?</Prompt>
+</Story>

package/dist/modals/prompt.stories.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 PromptProps = typeof __propDef.props;
+export type PromptEvents = typeof __propDef.events;
+export type PromptSlots = typeof __propDef.slots;
+export default class Prompt extends SvelteComponent<PromptProps, PromptEvents, PromptSlots> {
+}
+export {};

package/dist/modals/prompt.svelte

@@ -0,0 +1,66 @@
+<script>import DialogBody from "./dialog-body.svelte";
+import DialogFooter from "./dialog-footer.svelte";
+import DialogHeader from "./dialog-header.svelte";
+import Dialog from "./dialog-window.svelte";
+import Overlay from "../generic/overlay.svelte";
+import { createEventDispatcher } from "svelte";
+import Button from "../forms/button/button.svelte";
+import Divider from "../generic/divider/divider.svelte";
+import TextBox from "../forms/text-box/text-box.svelte";
+export let open = false;
+export let title = void 0;
+export let size = "md";
+export let okText = "Yes";
+export let cancelText = "No";
+export let showCloseButton = true;
+export let placeholder = "";
+export let type = "text";
+export let required = false;
+let value = "";
+const dispatch = createEventDispatcher();
+const no = () => {
+  open = false;
+  dispatch("cancel");
+};
+const yes = () => {
+  if (required && !value)
+    return;
+  open = false;
+  dispatch("ok", value);
+};
+</script>
+
+{#if open}
+	<Overlay>
+		<Dialog {size}>
+			<div class="body">
+				{#if title}
+					<DialogHeader on:close={no} {showCloseButton}>
+						{title}
+					</DialogHeader>
+					<Divider />
+				{/if}
+				<DialogBody>
+					<TextBox bind:value {placeholder} {type} {required} size="full">
+						<slot />
+					</TextBox>
+				</DialogBody>
+				<Divider />
+			</div>
+			<DialogFooter>
+				<Button on:click={no} style="secondary" size="full">
+					{cancelText}
+				</Button>
+				<Button on:click={yes} style="primary" size="full">
+					{okText}
+				</Button>
+			</DialogFooter>
+		</Dialog>
+	</Overlay>
+{/if}
+
+<style>
+	.body {
+		padding-bottom: 3rem;
+	}
+</style>

package/dist/modals/prompt.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        title?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        okText?: string | undefined;
+        cancelText?: string | undefined;
+        showCloseButton?: boolean | undefined;
+        placeholder?: string | undefined;
+        type?: AllowedTextInputTypes | undefined;
+        required?: boolean | undefined;
+    };
+    events: {
+        ok: CustomEvent<string>;
+        cancel: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PromptProps = typeof __propDef.props;
+export type PromptEvents = typeof __propDef.events;
+export type PromptSlots = typeof __propDef.slots;
+export default class Prompt extends SvelteComponent<PromptProps, PromptEvents, PromptSlots> {
+}
+export {};

package/dist/navigation/accordian/accordian.stories.svelte

@@ -0,0 +1,18 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Accordian from "./accordian.svelte";
+</script>
+
+<Meta title="Navigation/Accordian" component={Accordian} />
+
+<Story name="Standard">
+	<Accordian title="Card title">
+		<nav>
+			<li>Item 1</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+			<li>Item 4</li>
+			<li>Item 5</li>
+			<li>Item 6</li>
+		</nav>
+	</Accordian>
+</Story>