sve-ui 0.0.9 → 0.1.1

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

@@ -0,0 +1,48 @@
+<script>export let as = "div";
+export let p = 0;
+export let padding = 0;
+export let m = 0;
+export let margin = 0;
+export let w = "";
+export let width = "";
+export let h = "";
+export let height = "";
+export let bg = "transparent";
+export let backgroundColor = "transparent";
+export let color = "inherit";
+export let border = "none";
+export let br = "";
+export let borderRadius = "";
+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>
+
+<svelte:element
+	this={as}
+	style={`
+		padding: ${p || padding}rem;
+		margin: ${m || margin}rem;
+		width: ${w || width || 'auto'};
+		height: ${h || height || 'auto'};
+		background-color: ${bg || backgroundColor};
+		color: ${color};
+		border: ${border};
+		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 />
+</svelte:element>

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

@@ -1,23 +1,160 @@
-/** @typedef {typeof __propDef.props}  BoxProps */
-/** @typedef {typeof __propDef.events}  BoxEvents */
-/** @typedef {typeof __propDef.slots}  BoxSlots */
-export default class Box extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BoxProps = typeof __propDef.props;
-export type BoxEvents = typeof __propDef.events;
-export type BoxSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        /**
+         * @default 0
+         * @description The padding around the box.
+         * @type number | undefined
+         */
+        p?: number | undefined;
+        /**
+         * @default 0
+         * @description The padding around the box.
+         * @type number | undefined
+         */
+        padding?: number | undefined;
+        /**
+         * @default 0
+         * @description The margin around the box.
+         * @type number | undefined
+         */
+        m?: number | undefined;
+        /**
+         * @default 0
+         * @description The margin around the box.
+         * @type number | undefined
+         */
+        margin?: number | undefined;
+        /**
+         * @default undefined
+         * @description The width of the box.
+         * @type string | undefined
+         */
+        w?: string | undefined;
+        /**
+         * @default undefined
+         * @description The width of the box.
+         * @type string | undefined
+         */
+        width?: string | undefined;
+        /**
+         * @default undefined
+         * @description The height of the box.
+         * @type string | undefined
+         */
+        h?: string | undefined;
+        /**
+         * @default undefined
+         * @description The height of the box.
+         * @type string | undefined
+         */
+        height?: string | undefined;
+        /**
+         * @default undefined
+         * @description The background color of the box.
+         * @type string | undefined
+         */
+        bg?: string | undefined;
+        /**
+         * @default undefined
+         * @description The background color of the box.
+         * @type string | undefined
+         */
+        backgroundColor?: string | undefined;
+        /**
+         * @default 'white'
+         * @description The color of the text.
+         * @type string | undefined
+         */
+        color?: string | undefined;
+        /**
+         * @default undefined
+         * @description The border of the box.
+         * @type string | undefined
+         */
+        border?: string | undefined;
+        /**
+         * @default undefined
+         * @description The border radius of the box.
+         * @type string | undefined
+         */
+        br?: string | undefined;
+        /**
+         * @default undefined
+         * @description The border radius of the box.
+         * @type string | undefined
+         */
+        borderRadius?: string | undefined;
+        /**
+         * @default undefined
+         * @description The display of the box.
+         * @type string | undefined
+         */
+        d?: string | undefined;
+        /**
+         * @default undefined
+         * @description The display of the box.
+         * @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.
+         * @type string | undefined
+         */
+        style?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
-export {};
+export type BoxProps = typeof __propDef.props;
+export type BoxEvents = typeof __propDef.events;
+export type BoxSlots = typeof __propDef.slots;
+
+/**
+ * A box component is used to create a container for other components. Is a wrapper for the HTML div element.
+ * @see Docs https://sveui.org/components/box
+ */
+export default class Box extends SvelteComponentTyped<BoxProps, BoxEvents, BoxSlots> {
+}
+export { Box, BoxProps };

package/dist/components/Center/Center.svelte

@@ -0,0 +1,15 @@
+<script>import Box from "../Box/Box.svelte";
+export let width = "100%";
+export let height = "100%";
+</script>
+
+<Box
+	display={'flex'}
+	justifyContent={'center'}
+	alignItems={'center'}
+	{width}
+	{height}
+	{...$$restProps}
+>
+	<slot />
+</Box>

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

@@ -0,0 +1,25 @@
+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>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 { Center, CenterProps };

package/dist/components/Circle/Circle.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Square from '../Square/Square.svelte';
+
+	export let size = '1rem';
+</script>
+
+<Square {size} borderRadius="100%" {...$$restProps}>
+	<slot />
+</Square>

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

@@ -0,0 +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;
+}, {
+  [evt: string]: CustomEvent<any>;
+}, {
+  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;
+  } & SquareProps
+  events: {
+      [evt: string]: CustomEvent<any>;
+  };
+  slots: {
+      default: {};
+  };
+};
+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

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

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

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