sveltacular 0.0.1

package/dist/navigation/accordian/accordian.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 AccordianProps = typeof __propDef.props;
+export type AccordianEvents = typeof __propDef.events;
+export type AccordianSlots = typeof __propDef.slots;
+export default class Accordian extends SvelteComponent<AccordianProps, AccordianEvents, AccordianSlots> {
+}
+export {};

package/dist/navigation/accordian/accordian.svelte

@@ -0,0 +1,62 @@
+<script>import AngleUpIcon from "../../icons/angle-up-icon.svelte";
+export let title;
+export let expanded = false;
+</script>
+
+<div class:expanded class="accordian">
+	<button on:click={() => (expanded = !expanded)}>
+		<span class="title">
+			{title}
+		</span>
+		<span class="icon">
+			<AngleUpIcon />
+		</span>
+	</button>
+	<div class="menu">
+		<slot />
+	</div>
+</div>
+
+<style>.accordian {
+  background: #eee;
+  color: #000;
+  max-height: 3rem;
+  transition: max-height 1s ease;
+  overflow: hidden;
+}
+.accordian button {
+  appearance: none;
+  width: 100%;
+  padding: 1rem;
+  border: none;
+  text-align: left;
+  outline: none;
+  transition: background 0.3s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1rem;
+}
+.accordian button .icon {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+  transition: transform 0.3s linear;
+}
+.accordian button:hover {
+  background: #ccc;
+}
+.accordian .menu {
+  padding: 1rem;
+  opacity: 0;
+  transition: opacity 0.3s linear;
+}
+.accordian.expanded {
+  max-height: 800px;
+}
+.accordian.expanded .menu {
+  opacity: 1;
+}
+.accordian.expanded .icon {
+  transform: rotate(180deg);
+}</style>

package/dist/navigation/accordian/accordian.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        expanded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AccordianProps = typeof __propDef.props;
+export type AccordianEvents = typeof __propDef.events;
+export type AccordianSlots = typeof __propDef.slots;
+export default class Accordian extends SvelteComponent<AccordianProps, AccordianEvents, AccordianSlots> {
+}
+export {};

package/dist/navigation/app-bar/app-bar.stories.svelte

@@ -0,0 +1,21 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import AppBar from "./app-bar.svelte";
+</script>
+
+<Meta title="Navigation/AppBar" component={AppBar} />
+
+<Story name="Top (Medium)">
+	<AppBar size="md" position="top">
+		<strong>Site Header</strong>
+	</AppBar>
+</Story>
+
+<Story name="Top (X-Large)">
+	<AppBar size="xl" position="top">
+		<strong>Site Header</strong>
+	</AppBar>
+</Story>
+
+<Story name="Bottom (Small)">
+	<AppBar size="xs" position="bottom" isFixed={true}>This is the footer</AppBar>
+</Story>

package/dist/navigation/app-bar/app-bar.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 AppBarProps = typeof __propDef.props;
+export type AppBarEvents = typeof __propDef.events;
+export type AppBarSlots = typeof __propDef.slots;
+export default class AppBar extends SvelteComponent<AppBarProps, AppBarEvents, AppBarSlots> {
+}
+export {};

package/dist/navigation/app-bar/app-bar.svelte

@@ -0,0 +1,53 @@
+<script>export let isFixed = true;
+export let position = "top";
+export let size = "md";
+export let padding = "md";
+</script>
+
+<header class="{position} {size} padding-{padding} {isFixed ? 'fixed' : 'absolute'}">
+	<slot />
+</header>
+
+<style>header {
+  display: block;
+  background: #fff;
+  color: #000;
+  padding: 0.5rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  height: 3rem;
+}
+header.fixed {
+  position: fixed;
+}
+header.bottom {
+  top: auto;
+  bottom: 0;
+}
+header.xs {
+  height: 1rem;
+}
+header.sm {
+  height: 2rem;
+}
+header.lg {
+  height: 4rem;
+}
+header.xl {
+  height: 5rem;
+}
+header.padding-none {
+  padding: 0;
+}
+header.padding-sm {
+  padding: 0.25rem;
+}
+header.padding-lg {
+  padding: 1rem;
+}
+header.padding-xl {
+  padding: 1.5rem;
+}</style>

package/dist/navigation/app-bar/app-bar.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../../types/form.js';
+declare const __propDef: {
+    props: {
+        isFixed?: boolean | undefined;
+        position?: "top" | "bottom" | undefined;
+        size?: FormFieldSizeOptions | "xs" | undefined;
+        padding?: FormFieldSizeOptions | "none" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AppBarProps = typeof __propDef.props;
+export type AppBarEvents = typeof __propDef.events;
+export type AppBarSlots = typeof __propDef.slots;
+export default class AppBar extends SvelteComponent<AppBarProps, AppBarEvents, AppBarSlots> {
+}
+export {};

package/dist/navigation/breadcrumbs/breadcrumbs.stories.svelte

@@ -0,0 +1,16 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Breadcrumbs from "./breadcrumbs.svelte";
+</script>
+
+<Meta title="Navigation/Breadcrumbs" component={Breadcrumbs} />
+
+<Story name="Standard">
+	<Breadcrumbs
+		homeUrl="https://www.google.com"
+		crumbs={[
+			{ label: 'Search', href: 'https://www.google.com' },
+			{ label: 'Search Term', href: 'https://www.google.com' },
+			'Results'
+		]}
+	/>
+</Story>

package/dist/navigation/breadcrumbs/breadcrumbs.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 BreadcrumbsProps = typeof __propDef.props;
+export type BreadcrumbsEvents = typeof __propDef.events;
+export type BreadcrumbsSlots = typeof __propDef.slots;
+export default class Breadcrumbs extends SvelteComponent<BreadcrumbsProps, BreadcrumbsEvents, BreadcrumbsSlots> {
+}
+export {};

package/dist/navigation/breadcrumbs/breadcrumbs.svelte

@@ -0,0 +1,56 @@
+<script>import Link from "../../generic/link/link.svelte";
+import AngleRightIcon from "../../icons/angle-right-icon.svelte";
+import HomeIcon from "../../icons/home-icon.svelte";
+export let homeUrl = null;
+export let crumbs = [];
+</script>
+
+<nav>
+	{#if homeUrl}
+		<li class="icon">
+			<Link href={homeUrl} display="block">
+				<HomeIcon />
+			</Link>
+		</li>
+	{/if}
+	{#each crumbs as crumb, i}
+		{#if typeof crumb === 'string'}
+			<li>{crumb}</li>
+		{:else}
+			<li>
+				<Link href={crumb.href}>
+					{crumb.label}
+				</Link>
+			</li>
+		{/if}
+		{#if i < crumbs.length - 1}
+			<li class="icon">
+				<AngleRightIcon />
+			</li>
+		{/if}
+	{/each}
+</nav>
+
+<style>nav {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1.5rem;
+}
+nav li {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.5);
+  min-width: 12px;
+}
+nav li:first-child {
+  margin-left: 0;
+}
+nav li.icon {
+  padding-top: 2px;
+}</style>

package/dist/navigation/breadcrumbs/breadcrumbs.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        homeUrl?: string | null | undefined;
+        crumbs?: (string | {
+            label: string;
+            href: string;
+        })[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BreadcrumbsProps = typeof __propDef.props;
+export type BreadcrumbsEvents = typeof __propDef.events;
+export type BreadcrumbsSlots = typeof __propDef.slots;
+export default class Breadcrumbs extends SvelteComponent<BreadcrumbsProps, BreadcrumbsEvents, BreadcrumbsSlots> {
+}
+export {};

package/dist/navigation/side-bar/side-bar.stories.svelte

@@ -0,0 +1,19 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import SideBar from "./side-bar.svelte";
+let open = true;
+</script>
+
+<Meta title="Navigation/SideBar" component={SideBar} />
+
+<Story name="Standard">
+	<SideBar {open}>
+		<ul>
+			<li>Item 1</li>
+			<li>Item 2</li>
+		</ul>
+	</SideBar>
+
+	<div style="text-align: right; position: relative; z-index: 99999">
+		<button on:click={() => (open = !open)}>Toggle</button>
+	</div>
+</Story>

package/dist/navigation/side-bar/side-bar.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 SideBarProps = typeof __propDef.props;
+export type SideBarEvents = typeof __propDef.events;
+export type SideBarSlots = typeof __propDef.slots;
+export default class SideBar extends SvelteComponent<SideBarProps, SideBarEvents, SideBarSlots> {
+}
+export {};

package/dist/navigation/side-bar/side-bar.svelte

@@ -0,0 +1,33 @@
+<script>import Overlay from "../../generic/overlay.svelte";
+export let open = false;
+</script>
+
+<div class:open>
+	<Overlay show={open} />
+	<aside>
+		<slot />
+	</aside>
+</div>
+
+<style>div aside {
+  width: 300px;
+  padding: 0 1rem;
+  margin: 0 auto;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: -300px;
+  bottom: 0;
+  background: #fff;
+  color: #000;
+  z-index: 9999;
+  transition: left 0.3s ease-in-out;
+  border-right: solid 1px #e5e5e5;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+div.open {
+  display: block;
+}
+div.open aside {
+  left: 0;
+}</style>

package/dist/navigation/side-bar/side-bar.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SideBarProps = typeof __propDef.props;
+export type SideBarEvents = typeof __propDef.events;
+export type SideBarSlots = typeof __propDef.slots;
+export default class SideBar extends SvelteComponent<SideBarProps, SideBarEvents, SideBarSlots> {
+}
+export {};

package/dist/navigation/tabs/tab-group.svelte

@@ -0,0 +1,20 @@
+<script context="module">import { writable } from "svelte/store";
+import { setContext } from "svelte";
+export const tabContext = "tabContext";
+</script>
+
+<script>const ctx = {
+  active: writable(null)
+};
+setContext(tabContext, ctx);
+</script>
+
+<div>
+	<slot />
+</div>
+
+<style>div {
+  position: relative;
+  display: block;
+  width: 100%;
+}</style>

package/dist/navigation/tabs/tab-group.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from 'svelte/store';
+export interface TabContext {
+    active: Writable<string | null>;
+}
+export declare const tabContext = "tabContext";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TabGroupProps = typeof __propDef.props;
+export type TabGroupEvents = typeof __propDef.events;
+export type TabGroupSlots = typeof __propDef.slots;
+export default class TabGroup extends SvelteComponent<TabGroupProps, TabGroupEvents, TabGroupSlots> {
+}
+export {};

package/dist/navigation/tabs/tab.svelte

@@ -0,0 +1,87 @@
+<script>import { createEventDispatcher, getContext } from "svelte";
+import { tabContext } from "./tab-group.svelte";
+export let title;
+export let active = false;
+const dispatch = createEventDispatcher();
+const ctx = getContext(tabContext);
+const selectThisTab = () => {
+  dispatch("selectTab", title);
+  ctx.active.set(title);
+};
+if (active)
+  selectThisTab();
+ctx.active.subscribe((value) => {
+  active = value === title;
+});
+</script>
+
+<section class:active>
+	<header>
+		<button on:click={selectThisTab} type="button">
+			{title}
+		</button>
+	</header>
+	<div>
+		{#if active}
+			<slot />
+		{/if}
+	</div>
+</section>
+
+<style>section {
+  display: inline;
+}
+section header {
+  display: inline-block;
+  line-height: 2rem;
+  font-size: 0.8rem;
+  font-weight: 300;
+  cursor: pointer;
+  color: var(--sv-color-light);
+  height: 2rem;
+  overflow: hidden;
+  padding: 0 1rem;
+  border-width: 0.1rem 0.1rem 0 0.1rem;
+  border-style: solid;
+  border-radius: 0.5rem 0.5rem 0 0;
+  margin-right: 0.5rem;
+  border-color: transparent;
+  position: relative;
+  z-index: 2;
+}
+section header button {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+section header button:focus {
+  outline: none;
+}
+section header:hover {
+  color: #aaa;
+}
+section div {
+  display: none;
+  width: 100%;
+  position: absolute;
+  top: 2rem;
+  left: 0;
+  border-top: solid 0.2rem #ccc;
+  padding-top: 1rem;
+  z-index: 1;
+  color: var(--sv-color-fg);
+}
+section.active header {
+  font-weight: 700;
+  background: #ddd;
+  color: #000;
+}
+section.active div {
+  display: block;
+}</style>

package/dist/navigation/tabs/tab.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        active?: boolean | undefined;
+    };
+    events: {
+        selectTab: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TabProps = typeof __propDef.props;
+export type TabEvents = typeof __propDef.events;
+export type TabSlots = typeof __propDef.slots;
+export default class Tab extends SvelteComponent<TabProps, TabEvents, TabSlots> {
+}
+export {};

package/dist/navigation/tabs/tabs.stories.svelte

@@ -0,0 +1,20 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Tab from "./tab.svelte";
+import TabGroup from "./tab-group.svelte";
+</script>
+
+<Meta title="Navigation/TabGroup" component={TabGroup} />
+
+<Story name="Standard">
+	<TabGroup>
+		<Tab title="Tab 1" active>
+			<p>Tab 1 content</p>
+		</Tab>
+		<Tab title="Tab 2">
+			<p>Tab 2 content</p>
+		</Tab>
+		<Tab title="Tab 3">
+			<p>Tab 3 content</p>
+		</Tab>
+	</TabGroup>
+</Story>

package/dist/navigation/tabs/tabs.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 TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/tables/data-grid.stories.svelte

@@ -0,0 +1,40 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import DataGrid from "./data-grid.svelte";
+const data = [
+  {
+    id: 1,
+    name: "John Doe",
+    age: 30,
+    email: "john.doe@gmail.com"
+  },
+  {
+    id: 2,
+    name: "Jane Doe",
+    age: 79,
+    email: "jd1954@aol.com"
+  },
+  {
+    id: 3,
+    name: "John Smith",
+    age: 35,
+    email: "johnnyboy23@yahoo.com"
+  },
+  {
+    id: 4,
+    name: "Jane Smith",
+    age: 40,
+    email: "countrySky983@live.com"
+  }
+];
+const cols = [
+  { key: "name", label: "Name" },
+  { key: "age", label: "Age" },
+  { key: "email", label: "Email" }
+];
+</script>
+
+<Meta title="Tables/DataGrid" component={DataGrid} />
+
+<Story name="Standard">
+	<DataGrid {data} {cols} />
+</Story>

package/dist/tables/data-grid.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 DataGridProps = typeof __propDef.props;
+export type DataGridEvents = typeof __propDef.events;
+export type DataGridSlots = typeof __propDef.slots;
+export default class DataGrid extends SvelteComponent<DataGridProps, DataGridEvents, DataGridSlots> {
+}
+export {};