sve-ui 0.1.0 → 0.1.2

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Rodrigo Abregu / Alcino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,94 @@
 # Sve-UI
+## _Best UI components library for Svelte_
 
-Sve-UI is a collection of reusable Svelte components that provide an easy and customizable way to build user interfaces for web applications [`sve-ui`](https://github.com/rodriabregu/sve-ui).
+Sve-UI is a UI component library for Svelte that provides the best collection of components for building modern web applications and fast.
 
-#### to do list of components.
+<br />
+
+---
+
+<br />
+
+## Features
+
+- Responsive components that work seamlessly across all devices and screen sizes
+- Easy to use and highly customizable components
+- Well-documented API and usage examples
+- Regularly updated with new components and features
+
+<br />
+
+---
+
+<br />
+
+## Installation
+
+> You can install Sve-UI using pnpm, npm or yarn.
+
+```sh
+pnpm add sve-ui
+npm install sve-ui
+yarn add sve-ui
+```
+
+To use:
+
+```sh
+<script>
+  import { Button } from 'sve-ui';
+
+  function handleClick() {
+    alert('Button clicked!');
+  }
+</script>
+
+<Button onClick={handleClick}>Click me!</Button>
+```
+
+---
+
+<br />
+
+## Showcase & docs
+
+<br />
+
+
+| Showcase | Link |
+| ------ | ------ |
+| Docs | [/docs][docs] |
+| Github page | [/sve-ui][Gp] |
+| GitHub issues | [/sve-ui/issues][Gpi] |
+| Github PR | [/sve-ui/pulls][Gppr] |
+| Npmjs | [/package/sve-ui][LSjs] |
+
+<br />
+
+---
+
+<br />
+
+## List of components
+
+- Box, Center, Spacer, Flex, Grid, GridItem
+- Button, Text
+- CodeExample
+- Square, Circle
+
+<br />
+
+---
+
+<br />
+
+## License
+
+MIT
+
+
+[Gp]: <https://github.com/rodriabregu/sve-ui>
+[Gpi]: <https://github.com/rodriabregu/sve-ui/issues>
+[Gppr]: <https://github.com/rodriabregu/sve-ui/pulls>
+[LSjs]: <https://www.npmjs.com/package/sve-ui>
+[docs]: <https://sveui.org/>

package/dist/components/Box/Box.svelte

@@ -1,4 +1,5 @@
-<script>export let p = 0;
+<script>export let as = "div";
+export let p = 0;
 export let padding = 0;
 export let m = 0;
 export let margin = 0;
@@ -16,9 +17,14 @@ export let d = "";
 export let display = "";
 export let fontSize = 1;
 export let style = "";
+export let textAlign = "";
+export let alignItems = "";
+export let justifyContent = "";
+export let justifyItems = "";
 </script>
 
-<div
+<svelte:element
+	this={as}
 	style={`
 		padding: ${p || padding}rem;
 		margin: ${m || margin}rem;
@@ -30,9 +36,13 @@ export let style = "";
 		border-radius: ${br || borderRadius || 'none'};
 		display: ${d || display};
 		font-size: ${fontSize}rem;
+		text-align: ${textAlign};
+		align-items: ${alignItems};
+		justify-content: ${justifyContent};
+		justify-items: ${justifyItems};
 		${style}
-	`}
+		`}
 	{...$$restProps}
 >
 	<slot />
-</div>
+</svelte:element>

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

@@ -97,6 +97,42 @@ declare const __propDef: {
          * @type string | undefined
          */
         display?: string | undefined;
+
+        /**
+         * @default undefined
+         * @description The position of the text in the box.
+         * @type string | undefined
+         */
+        textAlign?: string | undefined;
+
+        /**
+         * @default undefined
+         * @description The align items of the box.
+         * @type string | undefined
+         */
+        alignItems?: string | undefined;
+
+        /**
+         * @default undefined
+         * @description The justify content of the box.
+         * @type string | undefined
+         */
+        justifyContent?: string | undefined;
+
+        /**
+         * @default undefined
+         * @description The justify items of the box.
+         * @type string | undefined
+         */
+        justifyItems?: string | undefined;
+
+        /**
+         * @default undefined
+         * @description The font size of the text.
+         * @type string | undefined
+         */
+        fontSize?: string | undefined;
+
         /**
          * @default undefined
          * @description Style of the box.

package/dist/components/Center/Center.svelte

@@ -1,10 +1,15 @@
-<script>export let width = "100%";
+<script>import Box from "../Box/Box.svelte";
+export let width = "100%";
 export let height = "100%";
 </script>
 
-<div
-	style="display: flex; justify-content: center; align-items: center; width: {width}; height: {height}"
+<Box
+	display={'flex'}
+	justifyContent={'center'}
+	alignItems={'center'}
+	{width}
+	{height}
 	{...$$restProps}
 >
 	<slot />
-</div>
+</Box>

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

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BoxProps } from "../Box/Box.svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         width?: string | undefined;
         height?: string | undefined;
-    };
+    } & BoxProps
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -15,6 +16,10 @@ declare const __propDef: {
 export type CenterProps = typeof __propDef.props;
 export type CenterEvents = typeof __propDef.events;
 export type CenterSlots = typeof __propDef.slots;
+/**
+ * A box component that can be used to center its children.
+ * @see Docs https://sveui.org/components/center
+ */
 export default class Center extends SvelteComponentTyped<CenterProps, CenterEvents, CenterSlots> {
 }
-export {};
+export { Center, CenterProps };

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

@@ -1,29 +1,34 @@
 /** @typedef {typeof __propDef.props}  CircleProps */
 /** @typedef {typeof __propDef.events}  CircleEvents */
 /** @typedef {typeof __propDef.slots}  CircleSlots */
+/**
+ * A square flex component with full border radius apply.
+ * @see Docs https://sveui.org/components/circle
+ */
 export default class Circle 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 CircleProps = typeof __propDef.props;
 export type CircleEvents = typeof __propDef.events;
 export type CircleSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { SquareProps } from "../Square/Square.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;
+  } & SquareProps
+  events: {
+      [evt: string]: CustomEvent<any>;
+  };
+  slots: {
+      default: {};
+  };
 };
-export {};
+export { Circle, CircleProps };

package/dist/components/CodeExample/CodeExample.svelte

@@ -1,54 +1,59 @@
-<script>
-	export let typeCodeLabel = 'Sve-UI';
-
-	let copied = false;
-	const copyToClipboard = async () => {
-		try {
-			const codeElement = document.querySelector('.code-box code');
-			if (codeElement) {
-				const text = codeElement.textContent;
-				text && (await navigator.clipboard.writeText(text));
-				copied = true;
-				setTimeout(() => {
-					copied = false;
-				}, 1500);
-			}
-		} catch (err) {
-			console.error('Failed to copy: ', err);
-		}
-	};
+<script>export let typeCodeLabel = "Sve-UI";
+export let basic = false;
+let copied = false;
+const copyToClipboard = async () => {
+  try {
+    const codeElement = document.querySelector(".code-box code");
+    if (codeElement) {
+      const text = codeElement.textContent;
+      text && await navigator.clipboard.writeText(text);
+      copied = true;
+      setTimeout(() => {
+        copied = false;
+      }, 1500);
+    }
+  } catch (err) {
+    console.error("Failed to copy: ", err);
+  }
+};
 </script>
 
 <pre class="code-box">
-	<article class="button-copy">
+	{#if basic}
+		<code>
+    	<slot />
+  	</code>
+	{:else}
+		<article class="button-copy">
 		<span>{typeCodeLabel}</span>
 		<button on:click={copyToClipboard}>
 			{#if copied}
-				<span>Copied</span>
-			{:else}
-				<svg
-					stroke="currentColor"
-					fill="none"
-					stroke-width="2"
-					viewBox="0 0 24 24"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="h-4 w-4"
-					height="1em"
-					width="1em"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
-					/><rect x="8" y="2" width="8" height="4" rx="1" ry="1" /></svg
-				>
+					<span>Copied</span>
+				{:else}
+					<svg
+						stroke="currentColor"
+						fill="none"
+						stroke-width="2"
+						viewBox="0 0 24 24"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="h-4 w-4"
+						height="1em"
+						width="1em"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+						/><rect x="8" y="2" width="8" height="4" rx="1" ry="1" /></svg
+					>
 				<span>Copy</span>
-			{/if}
+				{/if}
 		</button>
 	</article>
 
   <code id="textCode" class={copied ? 'textCode' : ''}>
     <slot />
   </code>
+	{/if}
 </pre>
 
 <style>

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

@@ -9,9 +9,18 @@
 export default class CodeExample extends SvelteComponentTyped<{
   /**
   * The type code label text, show in the top of the code example component.
-  *  @default 'Sve-UI'
+  * @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>;
 }, {
@@ -25,6 +34,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
   props: {
       typeCodeLabel?: string | undefined;
+      basic?: boolean | undefined;
   };
   events: {
       [evt: string]: CustomEvent<any>;

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

@@ -25,6 +25,10 @@ declare const __propDef: {
 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

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

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

@@ -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 };