sveltacular 0.0.61 → 0.0.63

package/dist/data/index.d.ts

@@ -6,6 +6,7 @@ export declare const Data: {
     }[];
     US_StateCodes: {
         name: string;
+        index: number;
         value: string;
         type: string;
     }[];

package/dist/data/united-states.d.ts

@@ -5,6 +5,7 @@ export declare const US_States: {
 }[];
 export declare const US_StateCodes: {
     name: string;
+    index: number;
     value: string;
     type: string;
 }[];

package/dist/data/united-states.js

@@ -59,4 +59,4 @@ export const US_States = [
     { name: 'Wisconsin', value: 'WI', type: 'state' },
     { name: 'Wyoming', value: 'WY', type: 'state' }
 ];
-export const US_StateCodes = US_States.map((row) => ({ ...row, name: row.value }));
+export const US_StateCodes = US_States.map((row, index) => ({ ...row, name: row.value, index }));

package/dist/generic/list/list-item.svelte

@@ -0,0 +1,5 @@
+<script></script>
+
+<li>
+    <slot />
+</li>

package/dist/generic/list/list-item.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/dist/generic/list/list.svelte

@@ -0,0 +1,37 @@
+<script>export let type = "unordered";
+export let style = "none";
+</script>
+
+{#if type === 'unordered'}
+    <ul class="{style}">
+        <slot />
+    </ul>
+{:else}
+    <ol>
+        <slot />
+    </ol>
+{/if}
+
+<style>.none {
+  list-style-type: none;
+}
+
+.disc {
+  list-style-type: disc;
+}
+
+.circle {
+  list-style-type: circle;
+}
+
+.square {
+  list-style-type: square;
+}
+
+.decimal {
+  list-style-type: decimal;
+}
+
+.decimal-leading-zero {
+  list-style-type: decimal-leading-zero;
+}</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: "unordered" | "ordered" | undefined;
+        style?: "none" | "circle" | "square" | "disc" | "decimal" | "decimal-leading-zero" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/dist/generic/section/section.svelte

@@ -3,10 +3,11 @@ import Header from "../header/header.svelte";
 export let title = void 0;
 export let level = 2;
 export let size = "full";
+export let hidden = false;
 setContext("section", { level, title });
 </script>
 
-<section class="level-{level} {size}">
+<section class="level-{level} {size}" class:hidden>
 	{#if title}
 		<Header />
 	{/if}
@@ -19,6 +20,9 @@ setContext("section", { level, title });
   margin-bottom: 1rem;
   font-family: var(--base-font-family, sans-serif);
 }
+section.hidden {
+  display: none;
+}
 section.sm {
   max-width: 25rem;
 }

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         title?: string | undefined;
         level?: SectionLevel | undefined;
         size?: FormFieldSizeOptions | undefined;
+        hidden?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -43,6 +43,8 @@ export { default as Email } from './generic/email/email.svelte';
 export { default as Phone } from './generic/phone/phone.svelte';
 export { default as Address } from './generic/address/address.svelte';
 export { default as Toaster } from './generic/toaster/toaster.svelte';
+export { default as List } from './generic/list/list.svelte';
+export { default as ListItem } from './generic/list/list-item.svelte';
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';

package/dist/index.js

@@ -45,6 +45,8 @@ export { default as Email } from './generic/email/email.svelte';
 export { default as Phone } from './generic/phone/phone.svelte';
 export { default as Address } from './generic/address/address.svelte';
 export { default as Toaster } from './generic/toaster/toaster.svelte';
+export { default as List } from './generic/list/list.svelte';
+export { default as ListItem } from './generic/list/list-item.svelte';
 // Layout
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';

package/dist/modals/alert.svelte

@@ -12,6 +12,7 @@ export let open = false;
 export let title = void 0;
 export let size = "md";
 export let buttonText = "OK";
+export let buttonStyle = "primary";
 export let showCloseButton = true;
 const close = () => {
   dispatch("close");
@@ -34,7 +35,7 @@ const close = () => {
 			</DialogBody>
 			<Divider />
 			<DialogFooter>
-				<Button on:click={close} size="full">
+				<Button on:click={close} size="full" style={buttonStyle}>
 					{buttonText}
 				</Button>
 			</DialogFooter>

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         title?: string | undefined;
         size?: FormFieldSizeOptions | undefined;
         buttonText?: string | undefined;
+        buttonStyle?: "primary" | "secondary" | "danger" | undefined;
         showCloseButton?: boolean | undefined;
     };
     events: {

package/dist/modals/confirm.svelte

@@ -12,6 +12,8 @@ export let title = void 0;
 export let size = "md";
 export let yesText = "Yes";
 export let noText = "No";
+export let yesStyle = "primary";
+export let noStyle = "secondary";
 export let showCloseButton = true;
 const dispatch = createEventDispatcher();
 const no = () => {
@@ -39,10 +41,10 @@ const yes = () => {
 			</DialogBody>
 			<Divider />
 			<DialogFooter>
-				<Button on:click={no} style="secondary" size="full">
+				<Button on:click={no} style={noStyle} size="full">
 					{noText}
 				</Button>
-				<Button on:click={yes} style="primary" size="full">
+				<Button on:click={yes} style={yesStyle} size="full">
 					{yesText}
 				</Button>
 			</DialogFooter>

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         size?: FormFieldSizeOptions | undefined;
         yesText?: string | undefined;
         noText?: string | undefined;
+        yesStyle?: "primary" | "secondary" | "danger" | undefined;
+        noStyle?: "primary" | "secondary" | "danger" | undefined;
         showCloseButton?: boolean | undefined;
     };
     events: {

package/dist/modals/prompt.svelte

@@ -13,6 +13,8 @@ export let title = void 0;
 export let size = "md";
 export let okText = "Yes";
 export let cancelText = "No";
+export let okStyle = "primary";
+export let cancelStyle = "secondary";
 export let showCloseButton = true;
 export let placeholder = "";
 export let type = "text";
@@ -48,10 +50,10 @@ const yes = () => {
 			</DialogBody>
 			<Divider />
 			<DialogFooter>
-				<Button on:click={no} style="secondary" size="full">
+				<Button on:click={no} style={cancelStyle} size="full">
 					{cancelText}
 				</Button>
-				<Button on:click={yes} style="primary" size="full">
+				<Button on:click={yes} style={okStyle} size="full">
 					{okText}
 				</Button>
 			</DialogFooter>

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         size?: FormFieldSizeOptions | undefined;
         okText?: string | undefined;
         cancelText?: string | undefined;
+        okStyle?: "primary" | "secondary" | "danger" | undefined;
+        cancelStyle?: "primary" | "secondary" | "danger" | undefined;
         showCloseButton?: boolean | undefined;
         placeholder?: string | undefined;
         type?: AllowedTextInputTypes | undefined;

package/dist/types/form.d.ts

@@ -5,7 +5,7 @@ export type DropdownOption = {
     name: string;
 };
 export type MenuOption = DropdownOption & {
-    index: number;
+    index?: number;
 };
 export type AllowedTextInputTypes = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
 export type RadioButtonValue = string | number | boolean | undefined;

package/dist/typography/text.svelte

@@ -1,13 +1,31 @@
 <script>export let transform = "none";
+export let size = "md";
+export let display = "block";
 </script>
 
-<div class={transform}>
-	<slot />
+<div class="{transform} {size} {display}">
+	{#if size === 'sm'}
+		<small><slot /></small>
+	{:else}
+		<slot />
+	{/if}
 </div>
 
 <style>div {
   font-family: var(--base-font-family, sans-serif);
 }
+div.sm {
+  font-size: 60%;
+}
+div.lg {
+  font-size: 140%;
+}
+div.block {
+  display: block;
+}
+div.inline {
+  display: inline;
+}
 div.uppercase {
   text-transform: uppercase;
 }

package/dist/typography/text.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         transform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        display?: "block" | "inline" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.61",
+	"version": "0.0.63",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",