do-ui-design-system 0.0.10 → 0.0.11

package/dist/components/atoms/Button/Button.stories.svelte

@@ -0,0 +1,92 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+	import { fn } from '@storybook/test';
+	import type { ArgTypes, Args } from '@storybook/core/types';
+
+	const colorOptions = ['btn-primary', 'btn-secondary', 'btn-accent', 'btn-neutral'];
+	const sizeOptions = ['btn-sm', 'btn-md', 'btn-lg'];
+	// const typeOptions = ['rounded'];
+
+	const { Story } = defineMeta({
+		title: 'DO - Sistema de diseño/Átomos/Botón',
+		component: Button,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				toc: {
+					disable: true // 👈 Disables the table of contents
+				}
+			}
+		}
+	});
+	const argTypes: ArgTypes = {
+		label: {
+			control: { type: 'text' },
+			description: 'Texto del botón'
+		},
+		color: {
+			control: { type: 'radio' },
+			options: colorOptions,
+			description: 'Color del botón'
+		},
+		size: {
+			control: { type: 'radio' },
+			options: sizeOptions,
+			description: 'Tamaño del botón'
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Deshabilitar el botón'
+		},
+		loading: {
+			control: { type: 'boolean' },
+			description: 'Mostrar el estado de carga'
+		},
+		type: {
+			control: { type: 'radio' },
+			options: ['button', 'submit', 'reset'],
+			description: 'Tipo de botón'
+		}
+	};
+	const args: Args = {
+		size: 'btn-md',
+		label: 'Botón',
+		color: 'btn-primary',
+		type: 'button',
+		disabled: false,
+		loading: false
+	};
+	const colors = [
+		{ color: 'btn-primary', label: 'Primary', size: 'btn-md' },
+		{ color: 'btn-secondary', label: 'Secondary', size: 'btn-md' },
+		{ color: 'btn-neutral', label: 'Neutral', size: 'btn-md' },
+		{ color: 'btn-accent', label: 'Accent', size: 'btn-md' }
+	] as const;
+</script>
+
+<Story name="Botón" {argTypes} {args} />
+
+<Story name="Colores" parameters={{ controls: { disable: true } }}>
+	<div class="margin mb-4 flex flex-row gap-[2rem]">
+		{#each colors as { color, label, size }}
+			<Button {color} {size} {label} on:click={()=> args.onClick()} />
+		{/each}
+	</div>
+</Story>
+
+<Story name="Modo: disabled" parameters={{ controls: { disable: true } }}>
+	<div class="margin mb-4 flex flex-row gap-[2rem]">
+		{#each colors as { color, label, size }}
+			<Button {color} {size} {label} onClick={fn()} disabled={true} />
+		{/each}
+	</div>
+</Story>
+
+<Story name="Modo: loading" parameters={{ controls: { disable: true } }}>
+	<div class="margin mb-4 flex flex-row gap-[2rem]">
+		{#each colors as { color, label, size }}
+			<Button {color} {size} loading {label} onClick={fn()} />
+		{/each}
+	</div>
+</Story>

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

@@ -0,0 +1,19 @@
+import Button from './Button.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/{atoms → components/atoms}/Icons/Icon.svelte.d.ts

@@ -22,7 +22,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  */
 declare const Icon: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;
-    name?: iProps["name"] | undefined;
+    name?: iProps["name"];
     color?: string | undefined;
     size?: string | undefined;
 }, {

package/dist/components/atoms/Icons/Icons.stories.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { ArgTypes, Args } from '@storybook/core/types';
+  import Icon from './Icon.svelte';
+  import iconList from "../../../do-theme/icomoon/iconList.ts";
+
+  const colorOptions = ['text-red-600', 'text-zinc-600', 'text-green-600', 'text-blue-600'];
+	const sizeOptions = ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl'];
+
+  const { Story } = defineMeta({
+    title: 'DO - Sistema de diseño/Átomos/Íconos',
+    component: Icon,
+    tags: ['autodocs'],
+    parameters:{ 
+      docs: {
+        source: {
+          code: `
+          <i class="icon-name some-tw-text-size some-tw-text-color"></i>
+          `
+        }
+      }
+    }
+  });
+
+  const argTypes: ArgTypes = {
+    name: {
+      control: { type: 'select' }
+    },
+    color: {
+      control: { type: 'select' },
+      defaultValue: 'text-red-600',
+      options: colorOptions
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizeOptions
+    },
+  }
+</script>
+
+<Story name="Ícono" {argTypes} />
+
+
+<Story name="Listado" {argTypes} parameters={{ controls: { disable: true } }}>
+  <section class="flex flex-wrap gap-4">
+    {#each iconList as icon}
+      <Icon name={icon}/>
+    {/each}
+  </section>
+</Story>

package/dist/components/atoms/Icons/Icons.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Icons: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Icons = InstanceType<typeof Icons>;
+export default Icons;

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './atoms';
+export * from './molecules';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+// src/lib/components/index.ts
+export * from './atoms';
+export * from './molecules';

package/dist/components/molecules/IconButton/IconButton.stories.svelte

@@ -0,0 +1,77 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import IconButton from './IconButton.svelte';
+	import { fn } from '@storybook/test';
+	import type { Args, ArgTypes } from '@storybook/core/types';
+
+	const colorOptions = ['btn-primary', 'btn-secondary', 'btn-accent', 'btn-neutral'];
+	const sizeOptions = ['btn-sm', 'btn-md', 'btn-lg'];
+
+	// const typeOptions = ['rounded'];
+
+	const { Story } = defineMeta({
+		title: 'DO - Sistema de diseño/Moléculas',
+		component: IconButton,
+		argTypes: {
+			label: {
+				control: { type: 'text' },
+				description: 'Texto del botón',
+			}
+		}
+	});
+	const argTypes: ArgTypes = {
+		disabled: {
+			control: { type: 'boolean' },
+			options: [true, false],
+			description: 'Deshabilitar el botón'
+		},
+		size: {
+			control: { type: 'radio' },
+			options: sizeOptions,
+			description: 'Tamaño del botón'
+		},
+		label: {
+			control: { type: 'text' },
+			description: 'Texto del botón'
+		},
+		color: {
+			control: { type: 'radio' },
+			options: colorOptions,
+			description: 'Color del botón'
+		},
+		onClick: {
+			action: 'clicked',
+			description: 'Función que se ejecuta al hacer clic en el botón',
+		},
+		iconPosition: {
+			control: { type: 'radio' },
+			options: ['start', 'end'],
+			description: 'Posición del ícono'
+		},
+		iconSize: {
+			control: { type: 'select' },
+			options: ['inherit', 'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl'],
+			description: 'Tamaño del ícono'
+		},
+		iconName: {
+			control: { type: 'select' },
+			description: 'Nombre del ícono'
+		},
+	};
+
+	const args: Args = {
+		color: 'btn-primary',
+		size: 'btn-md',
+		label: 'Botón ícono',
+		disabled: false,
+		onClick: fn(),
+		iconName: 'icon-arrow',
+		iconColor: 'inherit',
+		iconPosition: 'end',
+		type: 'button',
+		loading: false,
+		iconSize: 'inherit'
+	};
+</script>
+
+<Story name="Boton ícono" {argTypes} {args}/>

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

@@ -0,0 +1,19 @@
+import IconButton from './IconButton.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconButton = InstanceType<typeof IconButton>;
+export default IconButton;

package/dist/{molecules → components/molecules}/IconButton/iProps.d.ts

@@ -1,4 +1,4 @@
-import type { IconNames } from '../../do-theme/icomoon/iconList.ts';
+import type { IconNames } from '../../../do-theme/icomoon/iconList.ts';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface iProps extends HTMLButtonAttributes {
     color?: 'btn-primary' | 'btn-secondary' | 'btn-neutral' | 'btn-accent' | string;

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

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
 @layer properties;
 *, ::after, ::before, ::backdrop, ::file-selector-button {
   box-sizing: border-box;
@@ -444,6 +444,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   border-style: solid;
   border-color: var(--btn-border);
   text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
+  touch-action: manipulation;
   box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
   --size: calc(var(--size-field, 0.25rem) * 10);
   --btn-bg: var(--btn-color, var(--color-base-200));
@@ -474,6 +475,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   &:focus-visible {
     outline-width: 2px;
     outline-style: solid;
+    isolation: isolate;
   }
   &:active:not(.btn-active) {
     translate: 0 0.5px;
@@ -547,6 +549,112 @@ 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");
 }
+.input {
+  cursor: text;
+  border: var(--border) solid #0000;
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 1;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  align-items: center;
+  gap: calc(0.25rem * 2);
+  background-color: var(--color-base-100);
+  padding-inline: calc(0.25rem * 3);
+  vertical-align: middle;
+  white-space: nowrap;
+  width: clamp(3rem, 20rem, 100%);
+  height: var(--size);
+  font-size: 0.875rem;
+  border-start-start-radius: var(--join-ss, var(--radius-field));
+  border-start-end-radius: var(--join-se, var(--radius-field));
+  border-end-start-radius: var(--join-es, var(--radius-field));
+  border-end-end-radius: var(--join-ee, var(--radius-field));
+  border-color: var(--input-color);
+  box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+  @supports (color: color-mix(in lab, red, red)) {
+    box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+  }
+  --size: calc(var(--size-field, 0.25rem) * 10);
+  --input-color: var(--color-base-content);
+  @supports (color: color-mix(in lab, red, red)) {
+    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+  }
+  &:where(input) {
+    display: inline-flex;
+  }
+  :where(input) {
+    display: inline-flex;
+    height: 100%;
+    width: 100%;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background-color: transparent;
+    border: none;
+    &:focus, &:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  :where(input[type="date"]) {
+    display: inline-block;
+  }
+  &:focus, &:focus-within {
+    --input-color: var(--color-base-content);
+    box-shadow: 0 1px var(--input-color);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    outline: 2px solid var(--input-color);
+    outline-offset: 2px;
+    isolation: isolate;
+    z-index: 1;
+  }
+  &:has(> input[disabled]), &:is(:disabled, [disabled]) {
+    cursor: not-allowed;
+    border-color: var(--color-base-200);
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    &::-moz-placeholder {
+      color: var(--color-base-content);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+      }
+    }
+    &::placeholder {
+      color: var(--color-base-content);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+      }
+    }
+    box-shadow: none;
+  }
+  &:has(> input[disabled]) > input[disabled] {
+    cursor: not-allowed;
+  }
+  &::-webkit-date-and-time-value {
+    text-align: inherit;
+  }
+  &[type="number"] {
+    &::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+  }
+  &::-webkit-calendar-picker-indicator {
+    position: absolute;
+    inset-inline-end: 0.75em;
+  }
+}
 .table {
   font-size: 0.875rem;
   position: relative;
@@ -683,6 +791,8 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
     outline: 2px solid var(--input-color);
     outline-offset: 2px;
+    isolation: isolate;
+    z-index: 1;
   }
   &:has(> select[disabled]), &:is(:disabled, [disabled]) {
     cursor: not-allowed;
@@ -829,7 +939,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   vertical-align: middle;
   color: color-mix(in srgb, #000 30%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    color: color-mix(in srgb, #000 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
   }
   background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 );
   box-shadow: 0 2px 3px -1px currentColor;
@@ -1414,21 +1527,6 @@ body {
     --noise: 0;
   }
 }
-@layer base {
-  @property --radialprogress {
-    syntax: "<percentage>";
-    inherits: true;
-    initial-value: 0%;
-  }
-}
-@layer base {
-  :root {
-    scrollbar-color: currentColor #0000;
-    @supports (color: color-mix(in lab, red, red)) {
-      scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
-    }
-  }
-}
 @layer base {
   :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
     overflow: hidden;
@@ -1442,10 +1540,17 @@ body {
 }
 @layer base {
   :root {
-    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+    scrollbar-color: currentColor #0000;
+    @supports (color: color-mix(in lab, red, red)) {
+      scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
+    }
   }
-  .chat {
-    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
+}
+@layer base {
+  @property --radialprogress {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
   }
 }
 @layer base {
@@ -1457,32 +1562,37 @@ body {
       --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
     }
   }
-}
-@keyframes skeleton {
-  0% {
-    background-position: 150%;
-  }
-  100% {
-    background-position: -50%;
+  :where(.modal[open], .modal-open, .modal-toggle:checked + .modal):not(.modal-start, .modal-end) {
+    scrollbar-gutter: stable;
   }
 }
-@keyframes progress {
-  50% {
-    background-position-x: -115%;
+@layer base {
+  :root {
+    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+  }
+  .chat {
+    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
   }
 }
-@keyframes radio {
+@keyframes dropdown {
   0% {
-    padding: 5px;
+    opacity: 0;
   }
+}
+@keyframes progress {
   50% {
-    padding: 3px;
+    background-position-x: -115%;
   }
 }
-@keyframes dropdown {
+@keyframes toast {
   0% {
+    scale: 0.9;
     opacity: 0;
   }
+  100% {
+    scale: 1;
+    opacity: 1;
+  }
 }
 @keyframes rating {
   0%, 40% {
@@ -1490,14 +1600,20 @@ body {
     filter: brightness(1.05) contrast(1.05);
   }
 }
-@keyframes toast {
+@keyframes radio {
   0% {
-    scale: 0.9;
-    opacity: 0;
+    padding: 5px;
+  }
+  50% {
+    padding: 3px;
+  }
+}
+@keyframes skeleton {
+  0% {
+    background-position: 150%;
   }
   100% {
-    scale: 1;
-    opacity: 1;
+    background-position: -50%;
   }
 }
 @layer base {

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 import './do-theme/index.css';
-export * from './atoms';
-export * from './molecules';
+export * from './components/atoms';
+export * from './components/molecules';

package/dist/index.js

@@ -1,12 +1,3 @@
-//css export
 import './do-theme/index.css';
-// import {Button, Icon} from './atoms/index.ts';
-// import {IconButton} from './molecules/index.ts';
-// export {Button, Icon, IconButton};
-export * from './atoms';
-export * from './molecules';
-// //export atoms
-// export { default as Button } from './atoms/Button/Button.svelte';
-// export { default as Icon } from './atoms/Icons/Icon.svelte';
-// //export molecules
-// export { default as IconButton } from './molecules/IconButton/IconButton.svelte';
+export * from './components/atoms';
+export * from './components/molecules';

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "do-ui-design-system",
-	"version": "0.0.10",
+	"version": "0.0.11",
 	"description": "Design system en Svelte + Tailwind + DaisyUI",
 	"author": "Data Observatory",
 	"license": "MIT",
 	"main": "./dist/index.js",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "postcss src/app.css -o src/lib/do-theme/post-compiled.css && vite build && npm run prepack",
+		"build": "postcss src/app.css -o src/lib/do-theme/post-compiled.css && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
@@ -26,11 +26,10 @@
 	"files": [
 		"dist",
 		"src/lib/do-theme/index.css",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"!dist/**/*.stories.*",
-		"!dist/**/*.mdx*",
-		"!dist/**/*.iProps*"
+		"!src/lib/**/*.stories.svelte",
+		"!src/lib/**/*.test.*",
+		"!src/lib/**/*.spec.*",
+		"!src/lib/**/*.mdx"
 	],
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -42,17 +41,20 @@
 			"import": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
+		"./styles.css": {
+			"default": "./src/lib/do-theme/index.css"
+		},
 		"./atoms": {
-			"types": "./dist/atoms/index.d.ts",
-			"svelte": "./dist/atoms/index.js",
-			"import": "./dist/atoms/index.js",
-			"default": "./dist/atoms/index.js"
+			"types": "./dist/components/atoms/index.d.ts",
+			"svelte": "./dist/components/atoms/index.js",
+			"import": "./dist/components/atoms/index.js",
+			"default": "./dist/components/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"
+			"types": "./dist/components/molecules/index.d.ts",
+			"svelte": "./dist/components/molecules/index.js",
+			"import": "./dist/components/molecules/index.js",
+			"default": "./dist/components/molecules/index.js"
 		}
 	},
 	"peerDependencies": {
@@ -74,10 +76,11 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/vite": "^4.0.0",
 		"@tailwindcss/postcss": "^4.1.4",
+		"@tailwindcss/vite": "^4.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
+		"@types/node": "^22.15.17",
 		"@vitest/browser": "^3.1.1",
 		"@vitest/coverage-v8": "^3.1.1",
 		"autoprefixer": "^10.4.21",
@@ -95,7 +98,7 @@
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"publint": "^0.3.2",
 		"storybook": "^8.6.11",
-		"svelte": "^5.25.10",
+		"svelte": "^5.28.2",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.1.4",
 		"typescript": "^5.8.3",

package/dist/do-theme/icomoon/generate-icon-list.d.cts

@@ -1 +0,0 @@
-export {};