sve-ui 0.1.2 → 0.2.0

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

@@ -1,46 +0,0 @@
-/** @typedef {typeof __propDef.props}  CodeExampleProps */
-/** @typedef {typeof __propDef.events}  CodeExampleEvents */
-/** @typedef {typeof __propDef.slots}  CodeExampleSlots */
-
-/**
- * A code example component is used to show a code example with UI experiencie.
- * @see Docs https://sveui.org/components/codeexample
- */
-export default class CodeExample extends SvelteComponentTyped<{
-  /**
-  * The type code label text, show in the top of the code example component.
-  * @default 'Sve-UI'
-  * @type {string}
-  * @example <CodeExample typeCodeLabel="Svelte">
-  */
-  typeCodeLabel?: string | undefined;
-  /**
-   * If you want a more compact and simpler version, without the top copy button, you can use the basic option of the component with this property set to true.
-   * @default false
-   * @type {boolean}
-   * @example <CodeExample isBasic={true}>
-   */
-  basic?: boolean | undefined;
-}, {
-  [evt: string]: CustomEvent<any>;
-}, {
-  default: {};
-}> {
-}
-export type CodeExampleProps = typeof __propDef.props;
-export type CodeExampleEvents = typeof __propDef.events;
-export type CodeExampleSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-  props: {
-      typeCodeLabel?: string | undefined;
-      basic?: boolean | undefined;
-  };
-  events: {
-      [evt: string]: CustomEvent<any>;
-  };
-  slots: {
-      default: {};
-  };
-};
-export { CodeExample, CodeExampleProps };

package/dist/components/Flex/Flex.svelte

@@ -1,26 +0,0 @@
-<script>import Box from "../Box/Box.svelte";
-export let dir = "row";
-export let direction = "row";
-export let justify = "flex-start";
-export let align = "stretch";
-export let wrap = "nowrap";
-export let gap = 0;
-export let d = "";
-export let display = "";
-export let style = "";
-</script>
-
-<Box
-	style={`
-    display: ${d || display || 'flex'};
-    flex-direction: ${dir || direction};
-    justify-content: ${justify};
-    align-items: ${align};
-    flex-wrap: ${wrap};
-    gap: ${gap}rem;
-    ${style}
-  `}
-	{...$$restProps}
->
-	<slot />
-</Box>

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

@@ -1,34 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { BoxProps } from '../Box/Box.svelte';
-
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        dir?: string | undefined;
-        direction?: string | undefined;
-        justify?: string | undefined;
-        align?: string | undefined;
-        wrap?: string | undefined;
-        gap?: number | undefined;
-        d?: string | undefined;
-        display?: string | undefined;
-        style?: string | undefined;
-    } & BoxProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        default: {};
-    };
-};
-export type FlexProps = typeof __propDef.props;
-export type FlexEvents = typeof __propDef.events;
-export type FlexSlots = typeof __propDef.slots;
-/**
- * A flex box component that can be used to create layouts.
- * @see Docs https://sveui.org/components/flex
- */
-export default class Flex extends SvelteComponentTyped<FlexProps, FlexEvents, FlexSlots> {
-}
-export { Flex, FlexProps };

package/dist/components/Grid/Grid.svelte

@@ -1,16 +0,0 @@
-<script>export let columns = 1;
-export let gap = 1;
-export let flow = "row";
-</script>
-
-<div
-	style="
-    display: grid;
-    grid-template-columns: repeat({columns}, 1fr);
-    grid-gap: {gap}rem;
-    grid-auto-flow: {flow};
-  "
-	{...$$restProps}
->
-	<slot />
-</div>

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

@@ -1,44 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { BoxProps } from "../Box/Box.svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        /**
-         * The number of columns in the grid.
-         * @default 1
-         * @type {number}
-         * @example <Grid columns={2}>
-         */
-        columns?: number | undefined;
-        /**
-         * The number of gap in the grid, expressed in rem.
-         * @default 1
-         * @type {number}
-         * @example <Grid gap={2}>
-         */
-        gap?: string | undefined;
-        /**
-         * The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
-         * @default 'row'
-         * @type {string}
-         * @example <Grid flow={'column'}>
-         */
-        flow?: string | undefined;
-    } & BoxProps
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type GridProps = typeof __propDef.props;
-export type GridEvents = typeof __propDef.events;
-export type GridSlots = typeof __propDef.slots;
-/**
- * A grid component that can be used to create layouts.
- * @see Docs https://sveui.org/components/grid
- */
-export default class Grid extends SvelteComponentTyped<GridProps, GridEvents, GridSlots> {
-}
-export { Grid, GridProps };

package/dist/components/GridItem/GridItem.svelte

@@ -1,22 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-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

@@ -1,62 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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

@@ -1,121 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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

@@ -1,67 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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,5 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-/** @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 };