sve-ui 0.0.9 → 0.1.1

package/dist/components/GridItem/GridItem.svelte

@@ -0,0 +1,22 @@
+<script>export let colStart = "auto";
+export let colEnd = "auto";
+export let rowStart = "auto";
+export let rowEnd = "auto";
+export let area = "";
+export let justifySelf = "auto";
+export let alignSelf = "auto";
+</script>
+
+<div
+	style="
+    grid-column-start: {colStart};
+    grid-column-end: {colEnd};
+    grid-row-start: {rowStart};
+    grid-row-end: {rowEnd};
+    grid-area: {area};
+    justify-self: {justifySelf};
+    align-self: {alignSelf};
+  "
+>
+	<slot />
+</div>

package/dist/components/GridItem/GridItem.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { BoxProps } from "../Box/Box.svelte";
+declare const __propDef: {
+    props: {
+        colStart?: string | undefined;
+        colEnd?: string | undefined;
+        rowStart?: string | undefined;
+        rowEnd?: string | undefined;
+        area?: string | undefined;
+        justifySelf?: "center" | "inherit" | "auto" | "flex-start" | "stretch" | "start" | "end" | "initial" | "unset" | "revert" | "normal" | "baseline" | "first baseline" | "last baseline" | "self-start" | "self-end" | "left" | "right" | "safe center" | "unsafe center" | "flex-end" | undefined;
+        alignSelf?: "center" | "inherit" | "auto" | "stretch" | "start" | "end" | "initial" | "unset" | "revert" | "normal" | "baseline" | "first baseline" | "last baseline" | undefined;
+    } & BoxProps
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GridItemProps = typeof __propDef.props;
+export type GridItemEvents = typeof __propDef.events;
+export type GridItemSlots = typeof __propDef.slots;
+/**
+ * A item component inside a grid layout.
+ * @see Docs https://sveui.org/components/griditem
+ */
+export default class GridItem extends SvelteComponentTyped<GridItemProps, GridItemEvents, GridItemSlots> {
+}
+export { GridItem, GridItemProps };

package/dist/components/Loaders/DotPulse.svelte

@@ -0,0 +1,62 @@
+<script>import { theme } from "../../theme";
+export let size = 14;
+export let color = "white";
+export let speed = "1.2";
+</script>
+
+<div
+	class="dot-pulse"
+	style="
+  --sve-size: {theme.spacing[size]};
+  --sve-speed: {speed}s;
+  --sve-color: {color};
+"
+>
+	<div class="dot-pulse__dot" />
+</div>
+
+<style>
+	.dot-pulse {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: var(--sve-size);
+		height: calc(var(--sve-size) * 0.27);
+	}
+
+	.dot-pulse__dot,
+	.dot-pulse::before,
+	.dot-pulse::after {
+		content: '';
+		display: block;
+		height: calc(var(--sve-size) * 0.18);
+		width: calc(var(--sve-size) * 0.18);
+		border-radius: 50%;
+		background-color: var(--sve-color);
+		transform: scale(0);
+	}
+
+	.dot-pulse::before {
+		animation: pulse var(--sve-speed) ease-in-out infinite;
+	}
+
+	.dot-pulse__dot {
+		animation: pulse var(--sve-speed) ease-in-out calc(var(--sve-speed) * 0.125) infinite both;
+	}
+
+	.dot-pulse::after {
+		animation: pulse var(--sve-speed) ease-in-out calc(var(--sve-speed) * 0.25) infinite;
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			transform: scale(0);
+		}
+
+		50% {
+			transform: scale(1.5);
+		}
+	}
+</style>

package/dist/components/Loaders/DotPulse.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+         * The size of the dots, expressed in rem style system.
+         * @default 14
+         * @type {1 | 1.5 | "px" | 0.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96}
+         * @example <DotPulse size={20}>
+         */
+        size?: 1 | 1.5 | "px" | 0.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+        /**
+         * The color of the dots.
+         * @default 'white'
+         * @type {string}
+         * @example <DotPulse color={'black'}>
+         */
+        color?: string | undefined;
+        /**
+         * The speed of the animation, expressed in seconds.
+         * @default '1.2'
+         * @type {string}
+         * @example <DotPulse speed={'.8'}>
+         */
+        speed?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DotPulseProps = typeof __propDef.props;
+export type DotPulseEvents = typeof __propDef.events;
+export type DotPulseSlots = typeof __propDef.slots;
+/**
+ * A dot pulse loader.
+ * @see Docs https://sveui.org/components/loaders/dot-pulse
+ */
+export default class DotPulse extends SvelteComponentTyped<DotPulseProps, DotPulseEvents, DotPulseSlots> {
+}
+export { DotPulse, DotPulseProps };

package/dist/components/Loaders/DotSpinner.svelte

@@ -0,0 +1,121 @@
+<script>import { theme } from "../../theme";
+export let size = 14;
+export let color = "white";
+export let speed = "0.9";
+let dotAmount = 8;
+</script>
+
+<div
+	class="dot-spinner"
+	style="
+	--sve-size: {theme.spacing[size]};
+	--sve-color: {color};
+	--sve-speed: {speed}s;
+"
+>
+	{#each Array(dotAmount) as _, i}
+		<div class="dot-spinner__dot" />
+	{/each}
+</div>
+
+<style>
+	.dot-spinner {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		height: var(--sve-size);
+		width: var(--sve-size);
+	}
+
+	.dot-spinner__dot {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		height: 100%;
+		width: 100%;
+	}
+
+	.dot-spinner__dot::before {
+		content: '';
+		height: 20%;
+		width: 20%;
+		border-radius: 50%;
+		background-color: var(--sve-color);
+		transform: scale(0);
+		opacity: 0.5;
+		animation: pulse calc(var(--sve-speed) * 1.111) ease-in-out infinite;
+	}
+
+	.dot-spinner__dot:nth-child(2) {
+		transform: rotate(45deg);
+	}
+
+	.dot-spinner__dot:nth-child(2)::before {
+		animation-delay: calc(var(--sve-speed) * -0.875);
+	}
+
+	.dot-spinner__dot:nth-child(3) {
+		transform: rotate(90deg);
+	}
+
+	.dot-spinner__dot:nth-child(3)::before {
+		animation-delay: calc(var(--sve-speed) * -0.75);
+	}
+
+	.dot-spinner__dot:nth-child(4) {
+		transform: rotate(135deg);
+	}
+
+	.dot-spinner__dot:nth-child(4)::before {
+		animation-delay: calc(var(--sve-speed) * -0.625);
+	}
+
+	.dot-spinner__dot:nth-child(5) {
+		transform: rotate(180deg);
+	}
+
+	.dot-spinner__dot:nth-child(5)::before {
+		animation-delay: calc(var(--sve-speed) * -0.5);
+	}
+
+	.dot-spinner__dot:nth-child(6) {
+		transform: rotate(225deg);
+	}
+
+	.dot-spinner__dot:nth-child(6)::before {
+		animation-delay: calc(var(--sve-speed) * -0.375);
+	}
+
+	.dot-spinner__dot:nth-child(7) {
+		transform: rotate(270deg);
+	}
+
+	.dot-spinner__dot:nth-child(7)::before {
+		animation-delay: calc(var(--sve-speed) * -0.25);
+	}
+
+	.dot-spinner__dot:nth-child(8) {
+		transform: rotate(315deg);
+	}
+
+	.dot-spinner__dot:nth-child(8)::before {
+		animation-delay: calc(var(--sve-speed) * -0.125);
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			transform: scale(0);
+			opacity: 0.5;
+		}
+
+		50% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/Loaders/DotSpinner.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+         * The size of the dots, expressed in rem style system.
+         * @default 14
+         * @type {1 | 1.5 | "px" | 0.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96}
+         * @example <DotSpinner size={20}>
+         */
+        size?: 1 | 1.5 | "px" | 0.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+        /**
+         * The color of the dots.
+         * @default 'white'
+         * @type {string}
+         * @example <DotSpinner color={'black'}>
+         */
+        color?: string | undefined;
+        /**
+         * The speed of the animation, expressed in seconds.
+         * @default '0.9'
+         * @type {string}
+         * @example <DotSpinner speed={'1.5'}>
+         */
+        speed?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DotSpinnerProps = typeof __propDef.props;
+export type DotSpinnerEvents = typeof __propDef.events;
+export type DotSpinnerSlots = typeof __propDef.slots;
+/**
+ * A dot spinner loader.
+ * @see Docs https://sveui.org/components/loaders/dot-spinner
+ */
+export default class DotSpinner extends SvelteComponentTyped<DotSpinnerProps, DotSpinnerEvents, DotSpinnerSlots> {
+}
+export { DotSpinner, DotSpinnerProps };

package/dist/components/Loaders/DotWave.svelte

@@ -0,0 +1,67 @@
+<script>import { theme } from "../../theme";
+export let size = 14;
+export let color = "white";
+export let speed = "1";
+</script>
+
+<div
+	class="dot-wave"
+	style="
+  --sve-size: {theme.spacing[size]};
+  --sve-speed: {speed}s;
+  --sve-color: {color};
+"
+>
+	<div class="dot-wave__dot" />
+	<div class="dot-wave__dot" />
+	<div class="dot-wave__dot" />
+	<div class="dot-wave__dot" />
+</div>
+
+<style>
+	.dot-wave {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		justify-content: space-between;
+		width: var(--sve-size);
+		height: calc(var(--sve-size) * 0.17);
+		padding-top: calc(var(--sve-size) * 0.34);
+	}
+
+	.dot-wave__dot {
+		flex-shrink: 0;
+		width: calc(var(--sve-size) * 0.17);
+		height: calc(var(--sve-size) * 0.17);
+		border-radius: 50%;
+		background-color: var(--sve-color);
+		will-change: transform;
+	}
+
+	.dot-wave__dot:nth-child(1) {
+		animation: jump var(--sve-speed) ease-in-out calc(var(--sve-speed) * -0.45) infinite;
+	}
+
+	.dot-wave__dot:nth-child(2) {
+		animation: jump var(--sve-speed) ease-in-out calc(var(--sve-speed) * -0.3) infinite;
+	}
+
+	.dot-wave__dot:nth-child(3) {
+		animation: jump var(--sve-speed) ease-in-out calc(var(--sve-speed) * -0.15) infinite;
+	}
+
+	.dot-wave__dot:nth-child(4) {
+		animation: jump var(--sve-speed) ease-in-out infinite;
+	}
+
+	@keyframes jump {
+		0%,
+		100% {
+			transform: translateY(0px);
+		}
+
+		50% {
+			transform: translateY(-200%);
+		}
+	}
+</style>

package/dist/components/Loaders/DotWave.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+         * The size of the dots, expressed in rem style system.
+         * @default 14
+         * @type {1 | 1.5 | "px" | 0.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96}
+         * @example <DotWave size={20}>
+         */
+        size?: 1 | 1.5 | "px" | 0.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+        /**
+         * The color of the dots.
+         * @default 'white'
+         * @type {string}
+         * @example <DotWave color={'black'}>
+         */
+        color?: string | undefined;
+        /**
+         * The speed of the animation, expressed in seconds.
+         * @default '1'
+         * @type {string}
+         * @example <DotWave speed={'.6'}>
+         */
+        speed?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DotWaveProps = typeof __propDef.props;
+export type DotWaveEvents = typeof __propDef.events;
+export type DotWaveSlots = typeof __propDef.slots;
+/**
+ * A dot wave loader.
+ * @see Docs https://sveui.org/components/loaders/dot-wave
+ */
+export default class DotWave extends SvelteComponentTyped<DotWaveProps, DotWaveEvents, DotWaveSlots> {
+}
+export { DotWave, DotWaveProps };

package/dist/components/Spacer/Spacer.svelte

@@ -0,0 +1,5 @@
+<script>import Box from "../Box/Box.svelte";
+export let size = 1;
+</script>
+
+<Box width={`${size}rem`} height={`${size}rem`} {...$$restProps} />

package/dist/components/Spacer/Spacer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { BoxProps } from "../Box/Box.svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    } & BoxProps
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpacerProps = typeof __propDef.props;
+export type SpacerEvents = typeof __propDef.events;
+export type SpacerSlots = typeof __propDef.slots;
+/**
+ * A spacer component that can be used to create layouts.
+ * @see Docs https://sveui.org/components/spacer
+ */
+export default class Spacer extends SvelteComponentTyped<SpacerProps, SpacerEvents, SpacerSlots> {
+}
+export { Spacer, SpacerProps };

package/dist/components/Square/Square.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Flex from '../Flex/Flex.svelte';
+
+	export let size = '1rem';
+</script>
+
+<Flex
+	d="flex"
+	align="center"
+	justify="center"
+	color={'white'}
+	width={size}
+	height={size}
+	{...$$restProps}
+>
+	<slot />
+</Flex>

package/dist/components/Square/Square.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  SquareProps */
+/** @typedef {typeof __propDef.events}  SquareEvents */
+/** @typedef {typeof __propDef.slots}  SquareSlots */
+/**
+ * A square flex component that can be used to create layouts.
+ * @see Docs https://sveui.org/components/square
+ */
+export default class Square extends SvelteComponentTyped<{
+  [x: string]: any;
+  size?: string | undefined;
+}, {
+  [evt: string]: CustomEvent<any>;
+}, {
+  default: {};
+}> {
+}
+export type SquareProps = typeof __propDef.props;
+export type SquareEvents = typeof __propDef.events;
+export type SquareSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+import type { FlexProps } from "../Flex/Flex.svelte";
+declare const __propDef: {
+  props: {
+      [x: string]: any;
+      size?: string | undefined;
+  } & FlexProps
+  events: {
+      [evt: string]: CustomEvent<any>;
+  };
+  slots: {
+      default: {};
+  };
+};
+export { Square, SquareProps };

package/dist/components/Text/Text.svelte

@@ -0,0 +1,51 @@
+<script>import { theme } from "../../theme";
+export let as = "p";
+export let color = "black";
+export let fontWeight = "normal";
+export let fontSize = "md";
+export let fontStyle = "normal";
+export let textDecoration = "none";
+export let letterSpacing = "normal";
+export let lineHeight = "normal";
+export let textAlign = "left";
+</script>
+
+<svelte:element
+	this={as}
+	style={`
+    font-size: ${theme.fontSizes[fontSize]};
+    color: ${color};
+    font-weight: ${theme.fontWeights[fontWeight]};
+    font-style: ${fontStyle};
+    text-decoration: ${textDecoration};
+    letter-spacing: ${theme.letterSpacings[letterSpacing]};
+    line-height: ${lineHeight};
+    text-align: ${textAlign};
+  `}
+>
+	<slot />
+</svelte:element>
+
+<style>
+	/* :root {
+		--breakpoint-sm: 640px;
+		--breakpoint-md: 768px;
+		--breakpoint-lg: 1024px;
+	}
+
+	.container {
+		width: var(--width-container-base);
+
+		@media only screen and (min-width: var(--breakpoint-sm)) {
+			width: var(--width-container-sm);
+		}
+
+		@media only screen and (min-width: var(--breakpoint-md)) {
+			width: var(--width-container-md);
+		}
+
+		@media only screen and (min-width: var(--breakpoint-lg)) {
+			width: var(--width-container-lg);
+		}
+	} */
+</style>

package/dist/components/Text/Text.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+         * @default "p"
+         */
+        as?: "div" | "p" | "br" | "a" | "abbr" | "address" | "b" | "bdi" | "bdo" | "blockquote" | "cite" | "code" | "del" | "dfn" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "i" | "ins" | "kbd" | "mark" | "meter" | "pre" | "q" | "span" | "var" | undefined;
+        /**
+         * @default "black"
+         */
+        color?: string | undefined;
+        fontWeight?: "normal" | "hairline" | "thin" | "light" | "medium" | "semibold" | "bold" | "extrabold" | "black" | undefined;
+        /**
+         * @default "md"
+         */
+        fontSize?: "sm" | "md" | "lg" | "xl" | "6xs" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | undefined;
+        fontStyle?: string | undefined;
+        textDecoration?: string | undefined;
+        /**
+         * @default "normal"
+         */
+        letterSpacing?: "normal" | "tighter" | "tight" | "wide" | "wider" | "widest" | undefined;
+        /**
+         * @default "normal"
+         */
+        lineHeight?: string | undefined;
+        textAlign?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TextProps = typeof __propDef.props;
+export type TextEvents = typeof __propDef.events;
+export type TextSlots = typeof __propDef.slots;
+/**
+ * Text is the used to render text and paragraphs of text.
+ * @see Docs https://sveui.org/components/text
+ */
+export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
+}
+export { Text, TextProps };

package/dist/index.d.ts

@@ -1,2 +1,20 @@
-export { default as Button } from "./components/Button/Button.svelte";
-export { default as CodeExample } from "./components/CodeExample/CodeExample.svelte";
+export { default as Button } from './components/Button/Button.svelte';
+export type { ButtonProps } from './components/Button/Button.svelte';
+export { default as CodeExample } from './components/CodeExample/CodeExample.svelte';
+export type { CodeExampleProps } from './components/CodeExample/CodeExample.svelte';
+export { default as Box } from './components/Box/Box.svelte';
+export type { BoxProps } from './components/Box/Box.svelte';
+export { default as Flex } from './components/Flex/Flex.svelte';
+export type { FlexProps } from './components/Flex/Flex.svelte';
+export { default as Center } from './components/Center/Center.svelte';
+export type { CenterProps } from './components/Center/Center.svelte';
+export { default as Spacer } from './components/Spacer/Spacer.svelte';
+export type { SpacerProps } from './components/Spacer/Spacer.svelte';
+export { default as Square } from './components/Square/Square.svelte';
+export type { SquareProps } from './components/Square/Square.svelte';
+export { default as Circle } from './components/Circle/Circle.svelte';
+export type { CircleProps } from './components/Circle/Circle.svelte';
+export { default as Grid } from './components/Grid/Grid.svelte';
+export type { GridProps } from './components/Grid/Grid.svelte';
+export { default as GridItem } from './components/GridItem/GridItem.svelte';
+export type { GridItemProps } from './components/GridItem/GridItem.svelte';

package/dist/index.js

@@ -1,3 +1,11 @@
 // Reexport your entry components here
 export { default as Button } from './components/Button/Button.svelte';
 export { default as CodeExample } from './components/CodeExample/CodeExample.svelte';
+export { default as Box } from './components/Box/Box.svelte';
+export { default as Flex } from './components/Flex/Flex.svelte';
+export { default as Center } from './components/Center/Center.svelte';
+export { default as Spacer } from './components/Spacer/Spacer.svelte';
+export { default as Square } from './components/Square/Square.svelte';
+export { default as Circle } from './components/Circle/Circle.svelte';
+export { default as Grid } from './components/Grid/Grid.svelte';
+export { default as GridItem } from './components/GridItem/GridItem.svelte';

package/dist/theme/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const breakpoints: {
+    base: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+};

package/dist/theme/breakpoints.js

@@ -0,0 +1,8 @@
+export const breakpoints = {
+    base: "0em",
+    sm: "30em",
+    md: "48em",
+    lg: "62em",
+    xl: "80em",
+    "2xl": "96em",
+};