sve-ui 0.0.1 → 0.0.3

package/README.md

@@ -1,58 +1,5 @@
-# create-svelte
+# Sve-UI
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-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).
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+#### to do list of components.

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

@@ -0,0 +1,23 @@
+/** @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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Button/Button.svelte

@@ -1,15 +1,30 @@
+<!-- TO DO
+La idea seria que reciba Padding 1, 2, 3, 4
+Y utilizar una clase css global para que se aplique el padding
+
+ej:
+.padding-style-1 {
+	padding: 2px 4px;
+}
+
+-->
+
 <script>export let label = "Button";
 export let onClick = () => {
 };
 export let color = "blue";
-export let size = "medium";
+export let size = "md";
 export let disabled = false;
+export let style = "";
+export let bg = "";
+export let p = "3";
 let props = { ...$$restProps };
 </script>
 
 <button
-	class={`${props.class} ${props.style} button ${color} ${size}`}
+	class={`${props.class} button padding-${p} ${color} ${size} ${style}`}
 	on:click={onClick}
+	style={`background-color: ${bg}`}
 	{disabled}
 >
 	<slot>{label}</slot>
@@ -19,7 +34,7 @@ let props = { ...$$restProps };
 	.button {
 		border: none;
 		border-radius: 4px;
-		font-size: 16px;
+		font-size: 1rem;
 		font-weight: bold;
 		padding: 8px 16px;
 		cursor: pointer;
@@ -36,20 +51,45 @@ let props = { ...$$restProps };
 		background-color: #28a745;
 		color: #fff;
 	}
-	.small {
+
+	.xsm {
+		font-size: 8px;
+		padding: 2px 4px;
+	}
+
+	.sm {
 		font-size: 12px;
 		padding: 4px 8px;
 	}
-	.medium {
+
+	.md {
 		font-size: 16px;
 		padding: 8px 16px;
 	}
-	.large {
+
+	.lg {
 		font-size: 24px;
 		padding: 12px 24px;
 	}
+
+	.xl {
+		font-size: 32px;
+		padding: 16px 32px;
+	}
+
+	.xxl {
+		font-size: 48px;
+		padding: 24px 48px;
+	}
+
+	.xxxl {
+		font-size: 64px;
+		padding: 32px 64px;
+	}
+
 	.button:hover {
 		opacity: 0.94;
+		transition: 0.2s ease-in-out;
 	}
 	button:disabled {
 		cursor: not-allowed;
@@ -58,4 +98,20 @@ let props = { ...$$restProps };
 	button:disabled:hover {
 		opacity: 0.5;
 	}
+
+	.padding-1 {
+		padding: 2px 4px;
+	}
+
+	.padding-2 {
+		padding: 4px 8px;
+	}
+
+	.padding-3 {
+		padding: 8px 16px;
+	}
+
+	.padding-4 {
+		padding: 16px 32px;
+	}
 </style>

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

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+
+export type ButtonSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string | undefined;
         onClick?: (() => void) | undefined;
         color?: string | undefined;
-        size?: string | undefined;
+        size?: ButtonSize | undefined;
         disabled?: boolean | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sve-ui",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -47,5 +47,22 @@
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
-	"license": "MIT"
+	"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"
+	},
+	"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"
+	]
 }