sve-ui 0.0.4 → 0.0.6

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

@@ -38,6 +38,9 @@ let props = { ...$$restProps };
 		font-weight: bold;
 		padding: 8px 16px;
 		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 	.blue {
 		background-color: #007bff;

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

@@ -4,10 +4,32 @@ export type ButtonSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        
+        /**
+         * The button label o title
+         *  @default "Button"
+         */
         label?: string | undefined;
+
+        /**
+         * The button click handler
+         */
         onClick?: (() => void) | undefined;
+
+        /**
+         * The button color
+         */
         color?: string | undefined;
+
+        /**
+         * The button size (xsm, sm, md, lg, xl, xxl, xxxl)
+         */
         size?: ButtonSize | undefined;
+
+        /**
+         * The button disabled state
+         * @default false
+         */
         disabled?: boolean | undefined;
     };
     events: {
@@ -20,6 +42,11 @@ declare const __propDef: {
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
+
+/**
+ * A button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+ * @see Docs https://sveui.org/components/button
+ */
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }
-export {};
+export { Button, ButtonProps };

package/dist/components/CodeExample/CodeExample.svelte

@@ -0,0 +1,113 @@
+<script>
+	export let typeCodeLabel = 'Sve-UI';
+
+	let copied = false;
+	let text = globalThis?.document?.getElementById('textCode')?.innerHTML || '';
+
+	const copyToClipboard = async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+			copied = true;
+			setTimeout(() => {
+				copied = false;
+			}, 1500);
+		} catch (err) {
+			console.error('Failed to copy: ', err);
+		}
+	};
+</script>
+
+<section class="code-box">
+	<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>
+
+	<pre>
+    <code id="textCode" class={copied ? 'textCode' : ''}>
+      <slot />
+    </code>
+  </pre>
+</section>
+
+<style>
+	.code-box {
+		background-color: #070606;
+		border-radius: 4px;
+		max-width: 75ch;
+		border-top-left-radius: 0.375rem;
+		border-top-right-radius: 0.375rem;
+		margin: 0 auto;
+	}
+
+	.code-box pre code {
+		font-size: 0.9rem;
+		font-family: 'Söhne Mono', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
+		color: #fffdfa;
+	}
+
+	.textCode {
+		background-color: #71c562;
+	}
+
+	button {
+		display: flex;
+		margin-left: auto;
+		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;
+	}
+
+	.button-copy {
+		display: flex;
+		align-items: center;
+		background-color: rgba(52, 53, 65, 0.6);
+		border-top-left-radius: 0.375rem;
+		border-top-right-radius: 0.375rem;
+		padding: 0.8rem;
+	}
+
+	@media only screen and (max-width: 768px) {
+		.code-box {
+			max-width: 100%;
+		}
+
+		.button-copy {
+			padding: 0.8rem 1.8rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  CodeExampleProps */
+/** @typedef {typeof __propDef.events}  CodeExampleEvents */
+/** @typedef {typeof __propDef.slots}  CodeExampleSlots */
+
+/**
+ * A code example component is used to show a code example with UI experiencie.
+ * @see Docs https://sveui.org/components/codeexample
+ */
+export default class CodeExample extends SvelteComponentTyped<{
+  typeCodeLabel?: string | undefined;
+}, {
+  [evt: string]: CustomEvent<any>;
+}, {
+  default: {};
+}> {
+}
+export type CodeExampleProps = typeof __propDef.props;
+export type CodeExampleEvents = typeof __propDef.events;
+export type CodeExampleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+  props: {
+      /**
+      * The type code label
+      *  @default 'Sve-UI'
+      */
+      typeCodeLabel?: string | undefined;
+  };
+  events: {
+      [evt: string]: CustomEvent<any>;
+  };
+  slots: {
+      default: {};
+  };
+};
+export { CodeExample, CodeExampleProps };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sve-ui",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -56,6 +56,7 @@
 	"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",