sveltacular 0.0.1

package/dist/forms/form.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        action?: "get" | "post" | "put" | "delete" | undefined;
+    };
+    events: {
+        submit: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
+}
+export {};

package/dist/forms/number-box/number-box.stories.svelte

@@ -0,0 +1,21 @@
+<script>import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+import NumberBox from "./number-box.svelte";
+</script>
+
+<Meta title="Forms/NumberBox" component={NumberBox} />
+
+<Template let:args>
+	<NumberBox {...args}>Value</NumberBox>
+</Template>
+
+<Story name="Stanard" args={{ placeholder: 'Enter a Number', type: 'number' }} />
+
+<Story
+	name="Currency"
+	args={{ placeholder: 'Price of tea in china', type: 'currency', decimals: 0, symbol: '$' }}
+/>
+
+<Story
+	name="Units"
+	args={{ placeholder: 'Enter your weight', type: 'number', decimals: 0, units: 'pounds' }}
+/>

package/dist/forms/number-box/number-box.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 NumberBoxProps = typeof __propDef.props;
+export type NumberBoxEvents = typeof __propDef.events;
+export type NumberBoxSlots = typeof __propDef.slots;
+export default class NumberBox extends SvelteComponent<NumberBoxProps, NumberBoxEvents, NumberBoxSlots> {
+}
+export {};

package/dist/forms/number-box/number-box.svelte

@@ -0,0 +1,83 @@
+<script>import { roundToDecimals } from "../../../helpers/round-to-decimals.js";
+import { uniqueId } from "../../../helpers/unique-id.js";
+import FormField from "../form-field.svelte";
+import FormLabel from "../form-label.svelte";
+const id = uniqueId();
+export let value = 0;
+export let placeholder = "";
+export let size = "md";
+export let type = "number";
+export let step = 1;
+export let min = 0;
+export let max = 1e6;
+export let decimals = 0;
+export let symbol = null;
+export let units = null;
+$:
+  hasSymbol = symbol !== null;
+const valueChanged = () => {
+  value = roundToDecimals(value, decimals);
+};
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id}><slot /></FormLabel>
+	{/if}
+	<div class={type} class:hasSymbol>
+		<input
+			{id}
+			{placeholder}
+			bind:value
+			type="number"
+			{step}
+			{min}
+			{max}
+			on:change={valueChanged}
+		/>
+		{#if symbol}
+			<span class="symbol">{symbol}</span>
+		{/if}
+		{#if units}
+			<span class="units">{units}</span>
+		{/if}
+	</div>
+</FormField>
+
+<style>div {
+  position: relative;
+}
+div .symbol {
+  position: absolute;
+  top: 0.32rem;
+  left: 0.5rem;
+  color: #000;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+div .units {
+  position: absolute;
+  top: 0.32rem;
+  right: 2.5rem;
+  color: #888;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  text-align: right;
+}
+div input {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid #b7b7b7;
+  background-color: #fff;
+  color: #5c5c5c;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}
+div.hasSymbol input {
+  padding-left: 2rem;
+}</style>

package/dist/forms/number-box/number-box.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../../types/form.js';
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+        placeholder?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        type?: ("number" | "currency") | undefined;
+        step?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        decimals?: number | undefined;
+        symbol?: string | null | undefined;
+        units?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type NumberBoxProps = typeof __propDef.props;
+export type NumberBoxEvents = typeof __propDef.events;
+export type NumberBoxSlots = typeof __propDef.slots;
+export default class NumberBox extends SvelteComponent<NumberBoxProps, NumberBoxEvents, NumberBoxSlots> {
+}
+export {};

package/dist/forms/switch/switch.stories.svelte

@@ -0,0 +1,13 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Switch from "./switch.svelte";
+</script>
+
+<Meta title="Forms/Switch" component={Switch} />
+
+<Story name="Standard">
+	<Switch isChecked={true}>Turn on sync</Switch>
+</Story>
+
+<Story name="No Label">
+	<Switch isChecked={false} />
+</Story>

package/dist/forms/switch/switch.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 SwitchProps = typeof __propDef.props;
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
+}
+export {};

package/dist/forms/switch/switch.svelte

@@ -0,0 +1,73 @@
+<script>import { uniqueId } from "../../../helpers/unique-id.js";
+import { createEventDispatcher } from "svelte";
+export let isChecked = false;
+const id = uniqueId();
+const dispatch = createEventDispatcher();
+const onClick = () => {
+  isChecked = !isChecked;
+};
+</script>
+
+<div class:isChecked>
+	<input
+		type="checkbox"
+		bind:checked={isChecked}
+		on:change={() => dispatch('change', isChecked)}
+		{id}
+	/>
+	<!-- svelte-ignore a11y-interactive-supports-focus -->
+	<span
+		class="switch"
+		on:click={onClick}
+		on:keypress={onClick}
+		role="checkbox"
+		aria-checked={isChecked}
+	>
+		<span class="switch__toggle" />
+	</span>
+	{#if $$slots.default}
+		<label for={id}>
+			<slot />
+		</label>
+	{/if}
+</div>
+
+<style>div {
+  line-height: 2rem;
+  font-size: 1rem;
+}
+div input {
+  display: none;
+}
+div .switch {
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: #ccc;
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  vertical-align: middle;
+}
+div .switch__toggle {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: left 0.2s ease-in-out;
+}
+div.isChecked .switch {
+  background-color: #55f;
+}
+div.isChecked .switch__toggle {
+  left: 22px;
+}
+div label {
+  vertical-align: middle;
+  margin-left: 0.5rem;
+}</style>

package/dist/forms/switch/switch.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isChecked?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<boolean>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SwitchProps = typeof __propDef.props;
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
+}
+export {};

package/dist/forms/text-area/text-area.stories.svelte

@@ -0,0 +1,13 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import TextArea from "./text-area.svelte";
+</script>
+
+<Meta title="Forms/TextArea" component={TextArea} />
+
+<Story name="Text Area (small)">
+	<TextArea placeholder="Placeholder text" rows={3} size="sm">Form Field</TextArea>
+</Story>
+
+<Story name="Text Area (large)">
+	<TextArea placeholder="Placeholder text" rows={10} size="lg">Form Field</TextArea>
+</Story>

package/dist/forms/text-area/text-area.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 TextAreaProps = typeof __propDef.props;
+export type TextAreaEvents = typeof __propDef.events;
+export type TextAreaSlots = typeof __propDef.slots;
+export default class TextArea extends SvelteComponent<TextAreaProps, TextAreaEvents, TextAreaSlots> {
+}
+export {};

package/dist/forms/text-area/text-area.svelte

@@ -0,0 +1,34 @@
+<script>import { uniqueId } from "../../../helpers/unique-id.js";
+import FormField from "../form-field.svelte";
+import FormLabel from "../form-label.svelte";
+const id = uniqueId();
+export let size = "xl";
+export let value = "";
+export let placeholder = "";
+export let rows = 4;
+export let disabled = false;
+export let required = false;
+export let readonly = false;
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<textarea {id} {placeholder} {rows} bind:value {required} {disabled} {readonly} />
+</FormField>
+
+<style>textarea {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid #b7b7b7;
+  background-color: #fff;
+  color: #5c5c5c;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}</style>

package/dist/forms/text-area/text-area.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../../types/form.js';
+declare const __propDef: {
+    props: {
+        size?: FormFieldSizeOptions | undefined;
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        rows?: number | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        readonly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TextAreaProps = typeof __propDef.props;
+export type TextAreaEvents = typeof __propDef.events;
+export type TextAreaSlots = typeof __propDef.slots;
+export default class TextArea extends SvelteComponent<TextAreaProps, TextAreaEvents, TextAreaSlots> {
+}
+export {};

package/dist/forms/text-box/text-box.stories.svelte

@@ -0,0 +1,17 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import TextBox from "./text-box.svelte";
+</script>
+
+<Meta title="Forms/TextBox" component={TextBox} />
+
+<Story name="Stanard">
+	<TextBox
+		type="text"
+		placeholder="Placeholder text"
+		helperText="Here is some additional requirements for the input.">Form Field</TextBox
+	>
+</Story>
+
+<Story name="Units">
+	<TextBox type="text" units="cm" value="10" placeholder="Placeholder text">Desired Length</TextBox>
+</Story>

package/dist/forms/text-box/text-box.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 TextBoxProps = typeof __propDef.props;
+export type TextBoxEvents = typeof __propDef.events;
+export type TextBoxSlots = typeof __propDef.slots;
+export default class TextBox extends SvelteComponent<TextBoxProps, TextBoxEvents, TextBoxSlots> {
+}
+export {};

package/dist/forms/text-box/text-box.svelte

@@ -0,0 +1,83 @@
+<script>import { uniqueId } from "../../../helpers/unique-id.js";
+import FormField from "../form-field.svelte";
+import FormLabel from "../form-label.svelte";
+const id = uniqueId();
+export let value = "";
+export let placeholder = "";
+export let helperText = "";
+export let size = "md";
+export let type = "text";
+export let disabled = false;
+export let required = false;
+export let readonly = false;
+export let maxlength = void 0;
+export let minlength = void 0;
+export let pattern = void 0;
+export let units = void 0;
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div>
+		<input
+			{id}
+			{placeholder}
+			bind:value
+			{...{ type }}
+			{disabled}
+			{readonly}
+			{required}
+			{maxlength}
+			{minlength}
+			{pattern}
+		/>
+		{#if helperText}
+			<div class="helper-text">{helperText}</div>
+		{/if}
+		{#if units}
+			<div class="units">{units}</div>
+		{/if}
+	</div>
+</FormField>
+
+<style>div {
+  position: relative;
+}
+div input {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid #b7b7b7;
+  background-color: #fff;
+  color: #5c5c5c;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}
+div input::placeholder {
+  color: #b7b7b7;
+  font-style: italic;
+}
+div .units {
+  position: absolute;
+  top: 0.32rem;
+  right: 1rem;
+  color: #888;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  text-align: right;
+}
+div .helper-text {
+  font-size: 0.75rem;
+  font-weight: 300;
+  line-height: 1.2rem;
+  display: none;
+}
+div input:focus + .helper-text {
+  display: block;
+}</style>

package/dist/forms/text-box/text-box.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../../types/form.js';
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        helperText?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        type?: AllowedTextInputTypes | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        readonly?: boolean | undefined;
+        maxlength?: number | undefined;
+        minlength?: number | undefined;
+        pattern?: string | undefined;
+        units?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TextBoxProps = typeof __propDef.props;
+export type TextBoxEvents = typeof __propDef.events;
+export type TextBoxSlots = typeof __propDef.slots;
+export default class TextBox extends SvelteComponent<TextBoxProps, TextBoxEvents, TextBoxSlots> {
+}
+export {};

package/dist/forms/upload-dropzone/upload-dropzone.stories.svelte

@@ -0,0 +1,11 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import UploadDropzone from "./upload-dropzone.svelte";
+</script>
+
+<Meta title="Forms/UploadDropzone" component={UploadDropzone} />
+
+<Story name="Stanard">
+	<div style="width: 300px; height: 300px;">
+		<UploadDropzone />
+	</div>
+</Story>

package/dist/forms/upload-dropzone/upload-dropzone.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 UploadDropzoneProps = typeof __propDef.props;
+export type UploadDropzoneEvents = typeof __propDef.events;
+export type UploadDropzoneSlots = typeof __propDef.slots;
+export default class UploadDropzone extends SvelteComponent<UploadDropzoneProps, UploadDropzoneEvents, UploadDropzoneSlots> {
+}
+export {};

package/dist/forms/upload-dropzone/upload-dropzone.svelte

@@ -0,0 +1,82 @@
+<script>import UploadIcon from "../../icons/upload-icon.svelte";
+import { createEventDispatcher } from "svelte";
+let disabled = false;
+let isDragging = false;
+const dispatch = createEventDispatcher();
+const selectFiles = async (e) => {
+  const target = e.target;
+  if (!target?.files || !target.files.length)
+    return;
+  const files = [...target.files].filter((file) => file.type.startsWith("image/"));
+  if (!files.length)
+    return;
+  dispatch("filesSelected", files);
+};
+const dropFiles = async (e) => {
+  dragStop(e);
+  if (!e.dataTransfer)
+    return;
+  const files = e.dataTransfer.items ? [...e.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((item) => !!item) : e.dataTransfer.files;
+  if (!files.length)
+    return;
+  dispatch("filesSelected", files);
+};
+const dragStart = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  isDragging = true;
+};
+const dragStop = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  isDragging = false;
+};
+</script>
+
+<div class="dropzone" class:disabled class:isDragging>
+	<label
+		on:drop={dropFiles}
+		on:dragenter={dragStart}
+		on:dragstart={dragStart}
+		on:dragover={dragStart}
+		on:dragend={dragStop}
+		on:dragleave={dragStop}
+		on:dragexit={dragStop}
+	>
+		<input type="file" id="upload-button" accept="image/*" on:change={selectFiles} {disabled} />
+		<div class="icon"><UploadIcon /></div>
+		<div class="text">
+			{#if $$slots.default}
+				<slot />
+			{:else}
+				<span>Drop file or click to select</span>
+			{/if}
+		</div>
+	</label>
+</div>
+
+<style>input[type=file] {
+  display: none;
+}
+
+.dropzone {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border: 2px dashed #ccc;
+  border-radius: 0.25rem;
+  color: #ccc;
+  font-size: 1.5rem;
+  font-weight: bold;
+  cursor: pointer;
+}
+.dropzone.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dropzone.isDragging {
+  background-color: #bbf;
+  color: #333;
+}</style>

package/dist/forms/upload-dropzone/upload-dropzone.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        filesSelected: CustomEvent<FileList | File[]>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type UploadDropzoneProps = typeof __propDef.props;
+export type UploadDropzoneEvents = typeof __propDef.events;
+export type UploadDropzoneSlots = typeof __propDef.slots;
+export default class UploadDropzone extends SvelteComponent<UploadDropzoneProps, UploadDropzoneEvents, UploadDropzoneSlots> {
+}
+export {};

package/dist/generic/card/card.stories.svelte

@@ -0,0 +1,9 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Card from "./card.svelte";
+</script>
+
+<Meta title="Generic/Card" component={Card} />
+
+<Story name="Primary">
+	<Card title="Card title">This is the content of the card</Card>
+</Story>