sve-ui 0.1.0 → 0.1.2

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

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

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BoxProps } from "../Box/Box.svelte";
 declare const __propDef: {
     props: {
         size?: number | undefined;
-    };
+    } & BoxProps
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -11,6 +12,10 @@ declare const __propDef: {
 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 {};
+export { Spacer, SpacerProps };

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

@@ -1,29 +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;
+  [x: string]: any;
+  size?: string | undefined;
 }, {
-    [evt: string]: CustomEvent<any>;
+  [evt: string]: CustomEvent<any>;
 }, {
-    default: {};
+  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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+  props: {
+      [x: string]: any;
+      size?: string | undefined;
+  } & FlexProps
+  events: {
+      [evt: string]: CustomEvent<any>;
+  };
+  slots: {
+      default: {};
+  };
 };
-export {};
+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

@@ -7,6 +7,22 @@ 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';
+export { default as Text } from './components/Text/Text.svelte';
+export type { TextProps } from './components/Text/Text.svelte';
+export { default as DotPulse } from './components/Loaders/DotPulse.svelte';
+export type { DotPulseProps } from './components/Loaders/DotPulse.svelte';
+export { default as DotSpinner } from './components/Loaders/DotSpinner.svelte';
+export type { DotSpinnerProps } from './components/Loaders/DotSpinner.svelte';
+export { default as DotWave } from './components/Loaders/DotWave.svelte';
+export type { DotWaveProps } from './components/Loaders/DotWave.svelte';

package/dist/index.js

@@ -7,3 +7,9 @@ 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';
+export { default as Text } from './components/Text/Text.svelte';
+export { default as DotPulse } from './components/Loaders/DotPulse.svelte';
+export { default as DotSpinner } from './components/Loaders/DotSpinner.svelte';
+export { default as DotWave } from './components/Loaders/DotWave.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",
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,183 @@
+export declare const theme: {
+    fonts: {
+        heading: string;
+        body: string;
+    };
+    fontSizes: {
+        '6xs': string;
+        '5xs': string;
+        "4xs": string;
+        "3xs": string;
+        "2xs": string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    lineHeights: {
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
+        taller: string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "10": string;
+    };
+    colors: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        dark: string;
+        light: string;
+    };
+    sizes: {
+        container: {
+            base: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        px: string;
+        0.5: string;
+        1: string;
+        1.5: string;
+        2: string;
+        2.5: string;
+        3: string;
+        3.5: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        max: string;
+        min: string;
+        full: string;
+        "3xs": string;
+        "2xs": string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        prose: string;
+    };
+    spacing: {
+        px: string;
+        0.5: string;
+        1: string;
+        1.5: string;
+        2: string;
+        2.5: string;
+        3: string;
+        3.5: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        full: string;
+    };
+    breakpoints: {
+        base: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+};