sveltacular 0.0.56 → 0.0.58

package/dist/data/canada.d.ts

@@ -1,4 +1,8 @@
-export declare const Canada: {
+export declare const Canada_Provinces: {
+    name: string;
+    value: string;
+}[];
+export declare const Canada_ProvinceCodes: {
     name: string;
     value: string;
 }[];

package/dist/data/canada.js

@@ -1,4 +1,4 @@
-export const Canada = [
+export const Canada_Provinces = [
     { name: 'Alberta', value: 'ALB' },
     { name: 'British Columbia', value: 'BC' },
     { name: 'Labrador', value: 'LAB' },
@@ -15,3 +15,4 @@ export const Canada = [
     { name: 'Saskatchewan', value: 'SAS' },
     { name: 'Yukon', value: 'YT' }
 ];
+export const Canada_ProvinceCodes = Canada_Provinces.map((row) => ({ ...row, name: row.value }));

package/dist/data/colors.d.ts

@@ -0,0 +1,4 @@
+export declare const Colors: {
+    name: string;
+    value: string;
+}[];

package/dist/data/colors.js

@@ -0,0 +1,151 @@
+// A list of all of the named HTML colors and their hex values
+export const Colors = [
+    { name: 'AliceBlue', value: '#F0F8FF' },
+    { name: 'AntiqueWhite', value: '#FAEBD7' },
+    { name: 'Aqua', value: '#00FFFF' },
+    { name: 'Aquamarine', value: '#7FFFD4' },
+    { name: 'Azure', value: '#F0FFFF' },
+    { name: 'Beige', value: '#F5F5DC' },
+    { name: 'Bisque', value: '#FFE4C4' },
+    { name: 'Black', value: '#000000' },
+    { name: 'BlanchedAlmond', value: '#FFEBCD' },
+    { name: 'Blue', value: '#0000FF' },
+    { name: 'BlueViolet', value: '#8A2BE2' },
+    { name: 'Brown', value: '#A52A2A' },
+    { name: 'BurlyWood', value: '#DEB887' },
+    { name: 'CadetBlue', value: '#5F9EA0' },
+    { name: 'Chartreuse', value: '#7FFF00' },
+    { name: 'Chocolate', value: '#D2691E' },
+    { name: 'Coral', value: '#FF7F50' },
+    { name: 'CornflowerBlue', value: '#6495ED' },
+    { name: 'Cornsilk', value: '#FFF8DC' },
+    { name: 'Crimson', value: '#DC143C' },
+    { name: 'Cyan', value: '#00FFFF' },
+    { name: 'DarkBlue', value: '#00008B' },
+    { name: 'DarkCyan', value: '#008B8B' },
+    { name: 'DarkGoldenRod', value: '#B8860B' },
+    { name: 'DarkGray', value: '#A9A9A9' },
+    { name: 'DarkGrey', value: '#A9A9A9' },
+    { name: 'DarkGreen', value: '#006400' },
+    { name: 'DarkKhaki', value: '#BDB76B' },
+    { name: 'DarkMagenta', value: '#8B008B' },
+    { name: 'DarkOliveGreen', value: '#556B2F' },
+    { name: 'DarkOrange', value: '#FF8C00' },
+    { name: 'DarkOrchid', value: '#9932CC' },
+    { name: 'DarkRed', value: '#8B0000' },
+    { name: 'DarkSalmon', value: '#E9967A' },
+    { name: 'DarkSeaGreen', value: '#8FBC8F' },
+    { name: 'DarkSlateBlue', value: '#483D8B' },
+    { name: 'DarkSlateGray', value: '#2F4F4F' },
+    { name: 'DarkSlateGrey', value: '#2F4F4F' },
+    { name: 'DarkTurquoise', value: '#00CED1' },
+    { name: 'DarkViolet', value: '#9400D3' },
+    { name: 'DeepPink', value: '#FF1493' },
+    { name: 'DeepSkyBlue', value: '#00BFFF' },
+    { name: 'DimGray', value: '#696969' },
+    { name: 'DimGrey', value: '#696969' },
+    { name: 'DodgerBlue', value: '#1E90FF' },
+    { name: 'FireBrick', value: '#B22222' },
+    { name: 'FloralWhite', value: '#FFFAF0' },
+    { name: 'ForestGreen', value: '#228B22' },
+    { name: 'Fuchsia', value: '#FF00FF' },
+    { name: 'Gainsboro', value: '#DCDCDC' },
+    { name: 'GhostWhite', value: '#F8F8FF' },
+    { name: 'Gold', value: '#FFD700' },
+    { name: 'GoldenRod', value: '#DAA520' },
+    { name: 'Gray', value: '#808080' },
+    { name: 'Grey', value: '#808080' },
+    { name: 'Green', value: '#008000' },
+    { name: 'GreenYellow', value: '#ADFF2F' },
+    { name: 'HoneyDew', value: '#F0FFF0' },
+    { name: 'HotPink', value: '#FF69B4' },
+    { name: 'IndianRed', value: '#CD5C5C' },
+    { name: 'Indigo', value: '#4B0082' },
+    { name: 'Ivory', value: '#FFFFF0' },
+    { name: 'Khaki', value: '#F0E68C' },
+    { name: 'Lavender', value: '#E6E6FA' },
+    { name: 'LavenderBlush', value: '#FFF0F5' },
+    { name: 'LawnGreen', value: '#7CFC00' },
+    { name: 'LemonChiffon', value: '#FFFACD' },
+    { name: 'LightBlue', value: '#ADD8E6' },
+    { name: 'LightCoral', value: '#F08080' },
+    { name: 'LightCyan', value: '#E0FFFF' },
+    { name: 'LightGoldenRodYellow', value: '#FAFAD2' },
+    { name: 'LightGray', value: '#D3D3D3' },
+    { name: 'LightGrey', value: '#D3D3D3' },
+    { name: 'LightGreen', value: '#90EE90' },
+    { name: 'LightPink', value: '#FFB6C1' },
+    { name: 'LightSalmon', value: '#FFA07A' },
+    { name: 'LightSeaGreen', value: '#20B2AA' },
+    { name: 'LightSkyBlue', value: '#87CEFA' },
+    { name: 'LightSlateGray', value: '#778899' },
+    { name: 'LightSlateGrey', value: '#778899' },
+    { name: 'LightSteelBlue', value: '#B0C4DE' },
+    { name: 'LightYellow', value: '#FFFFE0' },
+    { name: 'Lime', value: '#00FF00' },
+    { name: 'LimeGreen', value: '#32CD32' },
+    { name: 'Linen', value: '#FAF0E6' },
+    { name: 'Magenta', value: '#FF00FF' },
+    { name: 'Maroon', value: '#800000' },
+    { name: 'MediumAquaMarine', value: '#66CDAA' },
+    { name: 'MediumBlue', value: '#0000CD' },
+    { name: 'MediumOrchid', value: '#BA55D3' },
+    { name: 'MediumPurple', value: '#9370DB' },
+    { name: 'MediumSeaGreen', value: '#3CB371' },
+    { name: 'MediumSlateBlue', value: '#7B68EE' },
+    { name: 'MediumSpringGreen', value: '#00FA9A' },
+    { name: 'MediumTurquoise', value: '#48D1CC' },
+    { name: 'MediumVioletRed', value: '#C71585' },
+    { name: 'MidnightBlue', value: '#191970' },
+    { name: 'MintCream', value: '#F5FFFA' },
+    { name: 'MistyRose', value: '#FFE4E1' },
+    { name: 'Moccasin', value: '#FFE4B5' },
+    { name: 'NavajoWhite', value: '#FFDEAD' },
+    { name: 'Navy', value: '#000080' },
+    { name: 'OldLace', value: '#FDF5E6' },
+    { name: 'Olive', value: '#808000' },
+    { name: 'OliveDrab', value: '#6B8E23' },
+    { name: 'Orange', value: '#FFA500' },
+    { name: 'OrangeRed', value: '#FF4500' },
+    { name: 'Orchid', value: '#DA70D6' },
+    { name: 'PaleGoldenRod', value: '#EEE8AA' },
+    { name: 'PaleGreen', value: '#98FB98' },
+    { name: 'PaleTurquoise', value: '#AFEEEE' },
+    { name: 'PaleVioletRed', value: '#DB7093' },
+    { name: 'PapayaWhip', value: '#FFEFD5' },
+    { name: 'PeachPuff', value: '#FFDAB9' },
+    { name: 'Peru', value: '#CD853F' },
+    { name: 'Pink', value: '#FFC0CB' },
+    { name: 'Plum', value: '#DDA0DD' },
+    { name: 'PowderBlue', value: '#B0E0E6' },
+    { name: 'Purple', value: '#800080' },
+    { name: 'RebeccaPurple', value: '#663399' },
+    { name: 'Red', value: '#FF0000' },
+    { name: 'RosyBrown', value: '#BC8F8F' },
+    { name: 'RoyalBlue', value: '#4169E1' },
+    { name: 'SaddleBrown', value: '#8B4513' },
+    { name: 'Salmon', value: '#FA8072' },
+    { name: 'SandyBrown', value: '#F4A460' },
+    { name: 'SeaGreen', value: '#2E8B57' },
+    { name: 'SeaShell', value: '#FFF5EE' },
+    { name: 'Sienna', value: '#A0522D' },
+    { name: 'Silver', value: '#C0C0C0' },
+    { name: 'SkyBlue', value: '#87CEEB' },
+    { name: 'SlateBlue', value: '#6A5ACD' },
+    { name: 'SlateGray', value: '#708090' },
+    { name: 'SlateGrey', value: '#708090' },
+    { name: 'Snow', value: '#FFFAFA' },
+    { name: 'SpringGreen', value: '#00FF7F' },
+    { name: 'SteelBlue', value: '#4682B4' },
+    { name: 'Tan', value: '#D2B48C' },
+    { name: 'Teal', value: '#008080' },
+    { name: 'Thistle', value: '#D8BFD8' },
+    { name: 'Tomato', value: '#FF6347' },
+    { name: 'Turquoise', value: '#40E0D0' },
+    { name: 'Violet', value: '#EE82EE' },
+    { name: 'Wheat', value: '#F5DEB3' },
+    { name: 'White', value: '#FFFFFF' },
+    { name: 'WhiteSmoke', value: '#F5F5F5' },
+    { name: 'Yellow', value: '#FFFF00' },
+    { name: 'YellowGreen', value: '#9ACD32' }
+];

package/dist/data/countries.d.ts

@@ -1,4 +1,8 @@
-export declare const countriesArray: {
+export declare const Countries: {
+    name: string;
+    value: string;
+}[];
+export declare const CountryCodes: {
     name: string;
     value: string;
 }[];

package/dist/data/countries.js

@@ -1,4 +1,4 @@
-export const countriesArray = [
+export const Countries = [
     { name: 'Aruba', value: 'ABW' },
     { name: 'Afghanistan', value: 'AFG' },
     { name: 'Angola', value: 'AGO' },
@@ -246,3 +246,4 @@ export const countriesArray = [
     { name: 'Zambia', value: 'ZMB' },
     { name: 'Zimbabwe', value: 'ZWE' }
 ];
+export const CountryCodes = Countries.map((row) => ({ ...row, name: row.value }));

package/dist/data/index.d.ts

@@ -4,7 +4,16 @@ declare const Data: {
         value: string;
         type: string;
     }[];
-    Canadian_Provinces: {
+    US_StateCodes: {
+        name: string;
+        value: string;
+        type: string;
+    }[];
+    Canada_Provinces: {
+        name: string;
+        value: string;
+    }[];
+    Canada_ProvinceCodes: {
         name: string;
         value: string;
     }[];
@@ -12,5 +21,13 @@ declare const Data: {
         name: string;
         value: string;
     }[];
+    CountryCodes: {
+        name: string;
+        value: string;
+    }[];
+    Colors: {
+        name: string;
+        value: string;
+    }[];
 };
 export default Data;

package/dist/data/index.js

@@ -1,9 +1,14 @@
-import { Canada } from './canada.js';
-import { countriesArray } from './countries.js';
-import { UnitedStates } from './united-states.js';
+import { Canada_Provinces, Canada_ProvinceCodes } from './canada.js';
+import { Countries, CountryCodes } from './countries.js';
+import { US_States, US_StateCodes } from './united-states.js';
+import { Colors } from './colors.js';
 const Data = {
-    US_States: UnitedStates,
-    Canadian_Provinces: Canada,
-    Countries: countriesArray
+    US_States,
+    US_StateCodes,
+    Canada_Provinces,
+    Canada_ProvinceCodes,
+    Countries,
+    CountryCodes,
+    Colors
 };
 export default Data;

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

@@ -1,4 +1,9 @@
-export declare const UnitedStates: {
+export declare const US_States: {
+    name: string;
+    value: string;
+    type: string;
+}[];
+export declare const US_StateCodes: {
     name: string;
     value: string;
     type: string;

package/dist/data/united-states.js

@@ -1,4 +1,4 @@
-export const UnitedStates = [
+export const US_States = [
     { name: 'Alabama', value: 'AL', type: 'state' },
     { name: 'Alaska', value: 'AK', type: 'state' },
     { name: 'American Samoa', value: 'AS', type: 'territory' },
@@ -59,3 +59,4 @@ export const UnitedStates = [
     { name: 'Wisconsin', value: 'WI', type: 'state' },
     { name: 'Wyoming', value: 'WY', type: 'state' }
 ];
+export const US_StateCodes = US_States.map((row) => ({ ...row, name: row.value }));

package/dist/generic/notice/notice.svelte

@@ -4,11 +4,20 @@ export let title = void 0;
 export let style = "info";
 export let size = "md";
 export let dismissable = false;
+export let dismissMilliseconds = 0;
 let visible = true;
-let fading = false;
+let going = false;
+let coming = false;
+const hello = () => {
+  dispatch("show");
+  coming = true;
+  setTimeout(() => {
+    coming = false;
+  }, 500);
+};
 const goodbye = () => {
   dispatch("dismiss");
-  fading = true;
+  going = true;
   setTimeout(() => {
     visible = false;
     dispatch("hidden");
@@ -19,9 +28,14 @@ const onClick = (e) => {
   e.stopPropagation();
   goodbye();
 };
+$:
+  if (dismissMilliseconds > 0) {
+    setTimeout(goodbye, dismissMilliseconds);
+  }
+hello();
 </script>
 
-<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {fading ? 'fading' : ''}">
+<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {going ? 'going' : ''} {coming ? 'coming' : ''}">
 	{#if $$slots.icon}
 		<div class="icon">
 			<slot name="icon" />
@@ -64,10 +78,13 @@ const onClick = (e) => {
 .notice.hidden {
   display: none;
 }
-.notice.fading {
+.notice.going {
   transform: translateY(-100%);
   opacity: 0;
 }
+.notice.coming {
+  opacity: 0;
+}
 .notice .icon {
   position: relative;
   width: 3rem;

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

@@ -5,10 +5,12 @@ declare const __propDef: {
         style?: ("outline" | "attention" | "success" | "error" | "info") | undefined;
         size?: ("sm" | "md" | "lg" | "xl") | undefined;
         dismissable?: boolean | undefined;
+        dismissMilliseconds?: number | undefined;
     };
     events: {
         dismiss: CustomEvent<void>;
         hidden: CustomEvent<void>;
+        show: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/generic/toaster/toaster.svelte

@@ -0,0 +1,17 @@
+<script></script>
+
+<section>
+    <slot />
+</section>
+
+<style>section {
+  display: flex;
+  flex-direction: column-reverse;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  gap: 1rem;
+  z-index: 9999;
+  max-width: 100%;
+  width: 20rem;
+}</style>

package/dist/generic/toaster/toaster.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 ToasterProps = typeof __propDef.props;
+export type ToasterEvents = typeof __propDef.events;
+export type ToasterSlots = typeof __propDef.slots;
+export default class Toaster extends SvelteComponent<ToasterProps, ToasterEvents, ToasterSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { default as Empty } from './generic/empty/empty.svelte';
 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 FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';
@@ -97,4 +98,4 @@ export * from './helpers/subscribable.js';
 export * from './helpers/ucfirst.js';
 export * from './helpers/capitalize.js';
 export * from './helpers/split-new-lines.js';
-export * as Data from './data/index.js';
+export * from './data/index.js';

package/dist/index.js

@@ -44,6 +44,7 @@ export { default as Empty } from './generic/empty/empty.svelte';
 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';
 // Layout
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
@@ -109,4 +110,4 @@ export * from './helpers/ucfirst.js';
 export * from './helpers/capitalize.js';
 export * from './helpers/split-new-lines.js';
 // Data
-export * as Data from './data/index.js';
+export * from './data/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.56",
+	"version": "0.0.58",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -30,7 +30,7 @@
 		"helpers"
 	],
 	"scripts": {
-		"watch": "npm run dev -- --open",
+		"watch": "storybook dev -p 6006",
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",