do-ui-design-system 0.0.5 → 0.0.6

package/dist/atoms/Button/Button.svelte

@@ -9,17 +9,18 @@
 	export let type: iProps['type'] = 'button';
 </script>
 
-<!--
-  @component
-Props:
-- color?: btn-primary | btn-secondary | btn-neutral | btn-accent, or any other tailwind color class
-- size?: any tailwind size class.
-- label: string
-- onClick: () => void
-- disabled: boolean
-- loading: boolean
-- type: 'button' | 'submit' | 'reset'
+<!-- @component
+  ```Svelte
+  <Button color?={color} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
+  	```
+	- `color?`: btn-primary | btn-secondary | btn-neutral | btn-accent, or any other tailwind color class
+	- `size?`: any tailwind size class.
+	- `label?`: string
+	- `disabled?`: boolean
+	- `loading?`: boolean
+	- `type?`: 'button' | 'submit' | 'reset'
 -->
+
 <button
 	{...$$restProps}
 	{type}

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

@@ -17,14 +17,15 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
     children?: any;
 } : {});
 /**
- * Props:
- * - color?: btn-primary | btn-secondary | btn-neutral | btn-accent, or any other tailwind color class
- * - size?: any tailwind size class.
- * - label: string
- * - onClick: () => void
- * - disabled: boolean
- * - loading: boolean
- * - type: 'button' | 'submit' | 'reset'
+ * ```Svelte
+ *  <Button color?={color} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
+ *  	```
+ * - `color?`: btn-primary | btn-secondary | btn-neutral | btn-accent, or any other tailwind color class
+ * - `size?`: any tailwind size class.
+ * - `label?`: string
+ * - `disabled?`: boolean
+ * - `loading?`: boolean
+ * - `type?`: 'button' | 'submit' | 'reset'
  */
 declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/atoms/Button/iProps.d.ts

@@ -5,7 +5,6 @@ export interface iProps extends HTMLButtonAttributes {
     size?: string;
     label?: string;
     disabled?: boolean;
-    onClick?: () => void;
     loading?: boolean;
     loadingIcon?: undefined;
 }

package/dist/atoms/Icons/Icon.svelte

@@ -18,5 +18,5 @@
 
   <i    
     {...$$restProps}
-    class={`no-underline inline-block py-1.5 px-1 ${name} ${color} ${size}`}
+    class={`${name} ${color} ${size}`}
   ></i> 

package/dist/do-theme/button.css

@@ -1,6 +1,7 @@
 .btn {
 	font-weight: 500;
 	padding: 6px 16px;
+	gap: 0.5rem;
 }
 
 .loading-spinner {
@@ -54,8 +55,16 @@
 .btn-neutral:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
 	border-color: var(--do-transparent);
 	background-color: var(--do-transparent);
+	/* text-decoration: underline; */
+}
+
+.btn-neutral:not(i){
 	text-decoration: underline;
 }
+/* .btn-neutral i{
+	text-decoration: none;
+	display: inline-block;
+} */
 
 .btn-accent:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
 	color: var(--color-neutral);

package/dist/do-theme/post-compiled.css

@@ -850,9 +850,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .\!inline {
   display: inline !important;
 }
-.block {
-  display: block;
-}
 .contents {
   display: contents;
 }
@@ -865,9 +862,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .hidden {
   display: none;
 }
-.inline-block {
-  display: inline-block;
-}
 .table {
   display: table;
 }
@@ -893,11 +887,8 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
 }
-.px-1 {
-  padding-inline: calc(var(--spacing) * 1);
-}
-.py-1\.5 {
-  padding-block: calc(var(--spacing) * 1.5);
+.px-1\.5 {
+  padding-inline: calc(var(--spacing) * 1.5);
 }
 .text-2xl {
   font-size: var(--text-2xl);
@@ -942,9 +933,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .text-zinc-600 {
   color: var(--color-zinc-600);
 }
-.no-underline {
-  text-decoration-line: none;
-}
 .underline {
   text-decoration-line: underline;
 }
@@ -1172,6 +1160,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .btn {
   font-weight: 500;
   padding: 6px 16px;
+  gap: 0.5rem;
 }
 .loading-spinner {
   width: 1em;
@@ -1215,6 +1204,8 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .btn-neutral:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
   border-color: var(--do-transparent);
   background-color: var(--do-transparent);
+}
+.btn-neutral:not(i) {
   text-decoration: underline;
 }
 .btn-accent:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {

package/dist/molecules/IconButton/IconButton.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import Icon from '../../atoms/Icons/Icon.svelte';
-	import Button from '../../atoms/Button/Button.svelte';
+	import {Button, Icon} from '../../atoms/index.ts';
 	import type { iProps } from './iProps.ts';
 
 	export let color: iProps['color'] = 'btn-primary';
@@ -16,32 +15,31 @@
 
 <!-- @component
       ```Svelte
+	  <IconButton label?={'text'} color?={'color'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
       ```
-      - `color`: 'btn-primary' | 'btn-secondary' | 'btn-accent' | 'btn-neutral', or any Tailwind color class
-      - `size`: any Tailwind size class
-      - `label`: string
-      - `onClick`: () => void
-      - `disabled`: boolean
-	  - `loading`: boolean
-	  - `iconName`: any icon name from the Icon component
-	  - `iconSize`: any Tailwind text size class
-	  - `iconColor`: any tailwind color class
-	  - `iconPosition`: 'start' | 'end'
+      - `color?`: 'btn-primary' | 'btn-secondary' | 'btn-accent' | 'btn-neutral', or any Tailwind color class
+      - `size?`: any Tailwind size class
+      - `label?`: string
+      - `disabled?`: boolean
+	  - `loading?`: boolean
+	  - `iconName?`: any icon name from the Icon component
+	  - `iconSize?`: any Tailwind text size class
+	  - `iconColor?`: any tailwind color class
+	  - `iconPosition?`: 'start' | 'end'
 	  ```
-	  @endcomponent
   -->
 
 <Button {...$$restProps} {color} {size} {disabled} on:click>
 
 	{#if loading}
 		<span
-			class={`loading loading-spinner ${iconPosition === 'start' ? 'order-1' : 'order-2'}`}
+			class={`loading loading-spinner ${iconPosition === 'start' ? 'order-1' : 'order-2'} px-1.5`}
 			class:!inline={loading}
 			role="status">&nbsp;</span
 		>
 	{:else}
 		<div class={`${iconPosition === 'start' ? 'order-1' : 'order-2'}`}>
-			<Icon name={iconName} size={iconSize} color={iconColor} class='block'/>
+			<Icon name={iconName} size={iconSize} color={iconColor}/>
 		</div>
 	{/if}
 	{#if label}

package/dist/molecules/IconButton/IconButton.svelte.d.ts

@@ -14,19 +14,18 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 /**
  * ```Svelte
+ * <IconButton label?={'text'} color?={'color'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
  *    ```
- *    - `color`: 'btn-primary' | 'btn-secondary' | 'btn-accent' | 'btn-neutral', or any Tailwind color class
- *    - `size`: any Tailwind size class
- *    - `label`: string
- *    - `onClick`: () => void
- *    - `disabled`: boolean
- * - `loading`: boolean
- * - `iconName`: any icon name from the Icon component
- * - `iconSize`: any Tailwind text size class
- * - `iconColor`: any tailwind color class
- * - `iconPosition`: 'start' | 'end'
+ *    - `color?`: 'btn-primary' | 'btn-secondary' | 'btn-accent' | 'btn-neutral', or any Tailwind color class
+ *    - `size?`: any Tailwind size class
+ *    - `label?`: string
+ *    - `disabled?`: boolean
+ * - `loading?`: boolean
+ * - `iconName?`: any icon name from the Icon component
+ * - `iconSize?`: any Tailwind text size class
+ * - `iconColor?`: any tailwind color class
+ * - `iconPosition?`: 'start' | 'end'
  * ```
- * @endcomponent
  */
 declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;

package/dist/molecules/IconButton/iProps.d.ts

@@ -5,7 +5,6 @@ export interface iProps extends HTMLButtonAttributes {
     size?: 'btn-sm' | 'btn-md' | 'btn-lg' | string;
     label?: string;
     disabled?: boolean;
-    onClick?: () => void | undefined;
     loading?: boolean;
     iconName: IconNames | '';
     iconSize?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "do-ui-design-system",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"description": "Design system en Svelte + Tailwind + DaisyUI",
 	"author": "Data Observatory",
 	"license": "MIT",
@@ -38,7 +38,20 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
-			"import": "./dist/index.js"
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./atoms": {
+			"types": "./dist/atoms/index.d.ts",
+			"svelte": "./dist/atoms/index.js",
+			"import": "./dist/atoms/index.js",
+			"default": "./dist/atoms/index.js"
+		},
+		"./molecules": {
+			"types": "./dist/molecules/index.d.ts",
+			"svelte": "./dist/molecules/index.js",
+			"import": "./dist/molecules/index.js",
+			"default": "./dist/molecules/index.js"
 		}
 	},
 	"peerDependencies": {