sveltacular 0.0.1

package/dist/generic/card/card.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 CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/dist/generic/card/card.svelte

@@ -0,0 +1,39 @@
+<script>import { navigateTo } from "../../../helpers/navigate-to.js";
+export let title = void 0;
+export let href = void 0;
+$:
+  role = href ? "link" : "listitem";
+const onClick = () => {
+  if (!href)
+    return;
+  navigateTo(href);
+};
+</script>
+
+<li {role} on:click={onClick}>
+	{#if title}
+		<strong>{title}</strong>
+	{/if}
+	<slot />
+</li>
+
+<style>li {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  max-width: 30rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: #fff;
+  color: #555;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+li strong {
+  display: block;
+}
+li[role=link] {
+  cursor: pointer;
+}</style>

package/dist/generic/card/card.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        href?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/dist/generic/divider/divider.stories.svelte

@@ -0,0 +1,9 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Divider from "./divider.svelte";
+</script>
+
+<Meta title="Generic/Divider" component={Divider} />
+
+<Story name="Standard">
+	<Divider />
+</Story>

package/dist/generic/divider/divider.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 DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
+}
+export {};

package/dist/generic/divider/divider.svelte

@@ -0,0 +1,10 @@
+<hr />
+
+<style>hr {
+  border: 0;
+  height: 0.1rem;
+  background: #333;
+  background-image: linear-gradient(to right, #ccc, #333, #ccc);
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}</style>

package/dist/generic/divider/divider.svelte.d.ts

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

package/dist/generic/link/link.stories.svelte

@@ -0,0 +1,21 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Link from "./link.svelte";
+</script>
+
+<Meta title="Generic/Link" component={Link} />
+
+<Story name="Standard">
+	<Link href="https://www.google.com">Google</Link>
+</Story>
+
+<Story name="Underline on hover">
+	<Link href="https://www.google.com" underline="hover">Google</Link>
+</Story>
+
+<Story name="Underline always">
+	<Link href="https://www.google.com" underline="always">Google</Link>
+</Story>
+
+<Story name="Disabled">
+	<Link href="https://www.google.com" disabled={true}>Google</Link>
+</Story>

package/dist/generic/link/link.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 LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/dist/generic/link/link.svelte

@@ -0,0 +1,41 @@
+<script>export let href;
+export let target = void 0;
+export let underline = "none";
+export let disabled = false;
+export let display = "inline";
+</script>
+
+{#if disabled}
+	<span class="link underline-{underline} {display}">
+		<slot />
+	</span>
+{:else}
+	<a {href} {target} class="link underline-{underline} {display}">
+		<slot />
+	</a>
+{/if}
+
+<style>.link {
+  text-decoration: underline;
+  color: inherit;
+  cursor: pointer;
+}
+.link.underline-none, .link.underline-hover {
+  text-decoration: none;
+}
+.link.block {
+  display: block;
+  width: 100%;
+}
+.link.inline-block {
+  display: inline-block;
+}
+
+a.link.underline-hover:hover {
+  text-decoration: underline;
+}
+
+span.link {
+  cursor: default;
+  color: rgba(255, 255, 255, 0.5);
+}</style>

package/dist/generic/link/link.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        href: string;
+        target?: string | undefined;
+        underline?: "none" | "hover" | "always" | undefined;
+        disabled?: boolean | undefined;
+        display?: "block" | "inline-block" | "inline" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/dist/generic/overlay.svelte

@@ -0,0 +1,24 @@
+<script>
+	export let show = true;
+</script>
+
+<div class:show>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: none;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 9998;
+
+		&.show {
+			display: block;
+		}
+	}
+</style>

package/dist/generic/overlay.svelte.d.ts

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

package/dist/generic/pill/pill.stories.svelte

@@ -0,0 +1,29 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Pill from "./pill.svelte";
+</script>
+
+<Meta title="Generic/Pill" component={Pill} />
+
+<Story name="Small">
+	<Pill size="sm">Small</Pill>
+</Story>
+
+<Story name="Medium">
+	<Pill size="md">Medium</Pill>
+</Story>
+
+<Story name="Large">
+	<Pill size="lg">Large</Pill>
+</Story>
+
+<Story name="X-Large">
+	<Pill size="xl">Extra Large</Pill>
+</Story>
+
+<Story name="Badge">
+	<Pill size="lg" style="badge">Badge</Pill>
+</Story>
+
+<Story name="Square">
+	<Pill size="lg" style="square">Square</Pill>
+</Story>

package/dist/generic/pill/pill.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 PillProps = typeof __propDef.props;
+export type PillEvents = typeof __propDef.events;
+export type PillSlots = typeof __propDef.slots;
+export default class Pill extends SvelteComponent<PillProps, PillEvents, PillSlots> {
+}
+export {};

package/dist/generic/pill/pill.svelte

@@ -0,0 +1,35 @@
+<script>export let size = "md";
+export let style = "standard";
+</script>
+
+<span class="pill {size} {style}">
+	<slot />
+</span>
+
+<style>.pill {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 1.5rem;
+  background-color: #f1f5f9;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #4a5568;
+}
+.pill.sm {
+  font-size: 0.625rem;
+  padding: 0.125rem 0.25rem;
+}
+.pill.lg {
+  font-size: 0.875rem;
+  padding: 0.375rem 0.75rem;
+}
+.pill.xl {
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+}
+.pill.badge {
+  border-radius: 0.5rem;
+}
+.pill.square {
+  border-radius: 0;
+}</style>

package/dist/generic/pill/pill.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../../types/form.js';
+declare const __propDef: {
+    props: {
+        size?: FormFieldSizeOptions | undefined;
+        style?: "standard" | "badge" | "square" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PillProps = typeof __propDef.props;
+export type PillEvents = typeof __propDef.events;
+export type PillSlots = typeof __propDef.slots;
+export default class Pill extends SvelteComponent<PillProps, PillEvents, PillSlots> {
+}
+export {};

package/dist/generic/scorecard/scorecard.stories.svelte

@@ -0,0 +1,9 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Scorecard from "./scorecard.svelte";
+</script>
+
+<Meta title="Generic/Scorecard" component={Scorecard} />
+
+<Story name="Default">
+	<Scorecard value={123}>Page Views</Scorecard>
+</Story>

package/dist/generic/scorecard/scorecard.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 ScorecardProps = typeof __propDef.props;
+export type ScorecardEvents = typeof __propDef.events;
+export type ScorecardSlots = typeof __propDef.slots;
+export default class Scorecard extends SvelteComponent<ScorecardProps, ScorecardEvents, ScorecardSlots> {
+}
+export {};

package/dist/generic/scorecard/scorecard.svelte

@@ -0,0 +1,28 @@
+<script>export let value;
+</script>
+
+<figure>
+	<div>{value}</div>
+	<figcaption><slot /></figcaption>
+</figure>
+
+<style>figure {
+  display: inline-block;
+  text-align: center;
+  background: #fff;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  font-family: sans-serif;
+  min-width: 6rem;
+}
+figure div {
+  font-size: 2.5rem;
+  font-weight: 500;
+  color: #000;
+}
+figure figcaption {
+  font-size: 0.875rem;
+  font-weight: 300;
+  color: #4a5568;
+}</style>

package/dist/generic/scorecard/scorecard.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string | number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ScorecardProps = typeof __propDef.props;
+export type ScorecardEvents = typeof __propDef.events;
+export type ScorecardSlots = typeof __propDef.slots;
+export default class Scorecard extends SvelteComponent<ScorecardProps, ScorecardEvents, ScorecardSlots> {
+}
+export {};

package/dist/icons/angle-right-icon.svelte

@@ -0,0 +1,12 @@
+<script>import SvgIcon from "./svg-icon.svelte";
+</script>
+
+<SvgIcon>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1"
+	/>
+</SvgIcon>

package/dist/icons/angle-right-icon.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 AngleRightIconProps = typeof __propDef.props;
+export type AngleRightIconEvents = typeof __propDef.events;
+export type AngleRightIconSlots = typeof __propDef.slots;
+export default class AngleRightIcon extends SvelteComponent<AngleRightIconProps, AngleRightIconEvents, AngleRightIconSlots> {
+}
+export {};

package/dist/icons/angle-up-icon.svelte

@@ -0,0 +1,9 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"
+	/>
+</svg>

package/dist/icons/angle-up-icon.svelte.d.ts

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

package/dist/icons/home-icon.svelte

@@ -0,0 +1,8 @@
+<script>import SvgIcon from "./svg-icon.svelte";
+</script>
+
+<SvgIcon width={20} height={20} fill="currentColor">
+	<path
+		d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+	/>
+</SvgIcon>

package/dist/icons/home-icon.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 HomeIconProps = typeof __propDef.props;
+export type HomeIconEvents = typeof __propDef.events;
+export type HomeIconSlots = typeof __propDef.slots;
+export default class HomeIcon extends SvelteComponent<HomeIconProps, HomeIconEvents, HomeIconSlots> {
+}
+export {};

package/dist/icons/svg-icon.svelte

@@ -0,0 +1,16 @@
+<script>export let fill = "none";
+export let width = 16;
+export let height = 16;
+export let x = 0;
+export let y = 0;
+export let aspectRatioBehavior = "meet";
+export let aspectRatioAlign = "xMidYMid";
+$:
+  viewBox = `${x} ${y} ${width} ${height}`;
+$:
+  preserveAspectRatio = `${aspectRatioAlign} ${aspectRatioBehavior}`;
+</script>
+
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" {fill} {viewBox} {preserveAspectRatio}>
+	<slot />
+</svg>

package/dist/icons/svg-icon.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        fill?: "none" | "currentColor" | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        x?: string | number | undefined;
+        y?: string | number | undefined;
+        aspectRatioBehavior?: "none" | "slice" | "meet" | undefined;
+        aspectRatioAlign?: "none" | "xMinYMin" | "xMidYMin" | "xMaxYMin" | "xMinYMid" | "xMidYMid" | "xMaxYMid" | "xMinYMax" | "xMidYMax" | "xMaxYMax" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SvgIconProps = typeof __propDef.props;
+export type SvgIconEvents = typeof __propDef.events;
+export type SvgIconSlots = typeof __propDef.slots;
+export default class SvgIcon extends SvelteComponent<SvgIconProps, SvgIconEvents, SvgIconSlots> {
+}
+export {};

package/dist/icons/upload-icon.svelte

@@ -0,0 +1,9 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 19">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M15 15h.01M4 12H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-3m-5.5 0V1.07M5.5 5l4-4 4 4"
+	/>
+</svg>

package/dist/icons/upload-icon.svelte.d.ts

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

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry components here

package/dist/layout/flex-col.svelte

@@ -0,0 +1,14 @@
+<script>export let marginY = 1;
+export let marginX = 0;
+export let gap = 1;
+</script>
+
+<div style={`margin: ${marginY}rem ${marginX}rem; gap: ${gap}rem`}>
+	<slot />
+</div>
+
+<style>div {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}</style>