sve-ui 0.0.9 → 0.1.0

package/dist/components/Box/Box.svelte

@@ -0,0 +1,38 @@
+<script>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 = "";
+</script>
+
+<div
+	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;
+		${style}
+	`}
+	{...$$restProps}
+>
+	<slot />
+</div>

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

@@ -1,23 +1,124 @@
-/** @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 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,10 @@
+<script>export let width = "100%";
+export let height = "100%";
+</script>
+
+<div
+	style="display: flex; justify-content: center; align-items: center; width: {width}; height: {height}"
+	{...$$restProps}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        width?: string | undefined;
+        height?: string | undefined;
+    };
+    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;
+export default class Center extends SvelteComponentTyped<CenterProps, CenterEvents, CenterSlots> {
+}
+export {};

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,29 @@
+/** @typedef {typeof __propDef.props}  CircleProps */
+/** @typedef {typeof __propDef.events}  CircleEvents */
+/** @typedef {typeof __propDef.slots}  CircleSlots */
+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";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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,30 @@
+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;
+export default class Flex extends SvelteComponentTyped<FlexProps, FlexEvents, FlexSlots> {
+}
+export { Flex, FlexProps };

package/dist/components/Spacer/Spacer.svelte

@@ -0,0 +1,4 @@
+<script>export let size = 1;
+</script>
+
+<div style={`width: ${size}rem; height: ${size}rem;`} />

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpacerProps = typeof __propDef.props;
+export type SpacerEvents = typeof __propDef.events;
+export type SpacerSlots = typeof __propDef.slots;
+export default class Spacer extends SvelteComponentTyped<SpacerProps, SpacerEvents, SpacerSlots> {
+}
+export {};

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,29 @@
+/** @typedef {typeof __propDef.props}  SquareProps */
+/** @typedef {typeof __propDef.events}  SquareEvents */
+/** @typedef {typeof __propDef.slots}  SquareSlots */
+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";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/index.d.ts

@@ -1,2 +1,12 @@
-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 { 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';

package/dist/index.js

@@ -1,3 +1,9 @@
 // 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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sve-ui",
-	"version": "0.0.9",
+	"version": "0.1.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",