sve-ui 0.1.1 → 0.2.0

package/package.json

@@ -1,69 +1,76 @@
 {
-	"name": "sve-ui",
-	"version": "0.1.1",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test:unit": "vitest",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist"
-	],
-	"peerDependencies": {
-		"svelte": "^3.54.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
-		"@sveltejs/package": "^2.0.0",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
-		"publint": "^0.1.9",
-		"svelte": "^3.54.0",
-		"svelte-check": "^3.0.1",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.2.0",
-		"vitest": "^0.25.3"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"license": "MIT",
-	"author": "Rodrigo Abregu <me@rodriab.io> (https://rodriab.io/)",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/rodriabregu/sve-ui.git"
-	},
-	"bugs": {
-		"url": "https://github.com/rodriabregu/sve-ui/issues"
-	},
-	"homepage": "https://sveui.org/",
-	"description": "Sve-UI is a collection of customizable UI components for Svelte applications. These components are designed to be easy to use and highly flexible, allowing developers to quickly build beautiful interfaces. Sve-UI includes buttons, forms, modals, and other commonly used UI elements, all built with Svelte's lightweight and efficient framework.",
-	"keywords": [
-		"components",
-		"svelte",
-		"kit",
-		"ui",
-		"vite",
-		"component library"
-	]
+  "name": "sve-ui",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Sve-UI is a collection of customizable UI components for Svelte applications. These components are designed to be easy to use and highly flexible, allowing developers to quickly build beautiful interfaces. Sve-UI includes buttons, forms, modals, and other commonly used UI elements, all built with Svelte's lightweight and efficient framework.",
+  "author": "Rodrigo Abregu <me@rodriab.io> (https://rodriab.io/)",
+  "license": "MIT",
+  "homepage": "https://sveui.org/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rodriabregu/sve-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rodriabregu/sve-ui/issues"
+  },
+  "keywords": [
+    "components",
+    "svelte",
+    "kit",
+    "ui",
+    "vite",
+    "component library"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "svelte": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    },
+    "./theme.css": {
+      "default": "./dist/theme/theme.css"
+    }
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5"
+  },
+  "dependencies": {
+    "bits-ui": "^2.18.1"
+  },
+  "devDependencies": {
+    "@internationalized/date": "^3.8.1",
+    "jsdom": "^26.0.0",
+    "@sveltejs/kit": "^2.66.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@testing-library/svelte": "^5.3.1",
+    "eslint": "^10.5.0",
+    "eslint-plugin-svelte": "^3.19.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.0.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.61.1",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "vite build && pnpm package",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
 }

package/README.md

@@ -1,94 +0,0 @@
-# Sve-UI
-## _Best UI components library for Svelte_
-
-Sve-UI is a UI component library for Svelte that provides the best collection of components for building modern web applications and fast.
-
-<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,48 +0,0 @@
-<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,160 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-         * @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: {
-        default: {};
-    };
-};
-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

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

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

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

@@ -1,34 +0,0 @@
-/** @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,128 +0,0 @@
-<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">
-	{#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>Copy</span>
-				{/if}
-		</button>
-	</article>
-
-  <code id="textCode" class={copied ? 'textCode' : ''}>
-    <slot />
-  </code>
-	{/if}
-</pre>
-
-<style>
-	.code-box {
-		background-color: #070606;
-		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-			Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-		border-radius: 4px;
-		max-width: 75ch;
-		margin: 0 auto;
-		color: #fffdfa;
-		position: relative;
-	}
-
-	.code-box code {
-		font-size: 0.9rem;
-		font-family: 'Söhne Mono', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
-		display: block;
-		padding: 0 0.6rem;
-		overflow: auto;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.textCode {
-		background-color: #71c562;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.button-copy {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background-color: rgba(52, 53, 65, 0.6);
-		border-top-left-radius: 0.375rem;
-		border-top-right-radius: 0.375rem;
-		padding: 0.8rem;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-	}
-
-	button {
-		display: flex;
-		gap: 0.5rem;
-		cursor: pointer;
-		background-color: transparent;
-		border: none;
-		color: #fffdfa;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	button:hover {
-		background-color: #71c56250;
-		border-radius: 4px;
-	}
-
-	button:active {
-		background-color: #71c562;
-		border-radius: 4px;
-	}
-
-	@media only screen and (max-width: 768px) {
-		.code-box {
-			max-width: 100%;
-		}
-
-		.button-copy {
-			padding: 0.8rem 1.8rem;
-		}
-	}
-</style>