do-ui-design-system 0.0.1

package/dist/do-theme/var-dark.css

@@ -0,0 +1,34 @@
+@plugin "daisyui/theme" {
+    name: "dark";
+    prefersdark: true;
+    color-scheme: dark;
+    --color-base-100: oklch(98% 0.02 240);
+    --color-base-200: oklch(95% 0.03 240);
+    --color-base-300: oklch(92% 0.04 240);
+    --color-base-content: oklch(20% 0.05 240);
+    --color-primary: red;
+    --color-primary-content: oklch(98% 0.01 240);
+    --color-secondary: oklch(70% 0.25 200);
+    --color-secondary-content: oklch(98% 0.01 200);
+    --color-accent: oklch(65% 0.25 160);
+    --color-accent-content: oklch(98% 0.01 160);
+    --color-neutral: oklch(50% 0.05 240);
+    --color-neutral-content: oklch(98% 0.01 240);
+    --color-info: oklch(70% 0.2 220);
+    --color-info-content: oklch(98% 0.01 220);
+    --color-success: oklch(65% 0.25 140);
+    --color-success-content: oklch(98% 0.01 140);
+    --color-warning: oklch(80% 0.25 80);
+    --color-warning-content: oklch(20% 0.05 80);
+    --color-error: oklch(65% 0.3 30);
+    --color-error-content: oklch(98% 0.01 30);
+  
+    /* base sizes */
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+
+    /* border radius */
+    --radius-selector: 0.25rem;
+    --radius-field: 0.25rem;
+    --radius-box: 0.25rem;
+}

package/dist/do-theme/var-hybrid.css

@@ -0,0 +1,47 @@
+
+@plugin "daisyui/theme" {
+    name: "hybrid";
+    default: true;
+    color-scheme: light;
+    --color-primary: #27272A;
+    --color-primary-content: #FAFAFA;
+    --color-secondary: #FAFAFA;
+    --color-secondary-content: #27272A;
+    --color-neutral: #FAFAFA;
+    --color-neutral-content: none;
+    --color-accent: #1D4ED8;
+    --color-accent-content: #EFF6FF;
+    --color-info: oklch(70% 0.2 220);
+    --color-info-content: oklch(98% 0.01 220);
+    --color-success: oklch(65% 0.25 140);
+    --color-success-content: oklch(98% 0.01 140);
+    --color-warning: oklch(80% 0.25 80);
+    --color-warning-content: oklch(20% 0.05 80);
+    --color-error: oklch(65% 0.3 30);
+    --color-error-content: oklch(98% 0.01 30);
+
+    
+    /* base sizes */
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    
+    /* border radius */
+    --radius-selector: 0.25rem;
+    --radius-field: 0.25rem;
+    --radius-box: 0.25rem;
+    
+    /*variables DO*/
+    /*hover color*/
+    --do-color-primary-hover: #f5f5f5;
+    --do-color-secondary-hover: #3e3e45;
+    /*disabled color*/
+    --do-color-primary-disabled: #a4a4a6;
+    --do-color-accent-disabled: #a4b6ed;
+    /*buttons border color*/
+    --do-color-border-primary: #3F3F46;
+    --do-color-border-secondary: #F4F4F5;
+    --do-color-border-accent: #2563EB;
+    --do-color-border-accent-hover: #3B82F6;
+    /*styles*/
+    --do-transparent: transparent;
+}

package/dist/do-theme/var-light.css

@@ -0,0 +1,29 @@
+
+@plugin "daisyui/theme" {
+    name: "light";
+    default: true;
+    color-scheme: light;
+    --color-primary: hsl(240, 6%, 10%);
+    --color-primary-content: hsl(0, 0%, 100%);
+    --color-secondary: oklch(70% 0.25 200);
+    --color-secondary-content: oklch(98% 0.01 200);
+    --color-accent: oklch(65% 0.25 160);
+    --color-accent-content: oklch(98% 0.01 160);
+    --color-info: oklch(70% 0.2 220);
+    --color-info-content: oklch(98% 0.01 220);
+    --color-success: oklch(65% 0.25 140);
+    --color-success-content: oklch(98% 0.01 140);
+    --color-warning: oklch(80% 0.25 80);
+    --color-warning-content: oklch(20% 0.05 80);
+    --color-error: oklch(65% 0.3 30);
+    --color-error-content: oklch(98% 0.01 30);
+
+    /* base sizes */
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+
+    /* border radius */
+    --radius-selector: 0.25rem;
+    --radius-field: 0.25rem;
+    --radius-box: 0.25rem;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import './do-theme/index.css';
+export { default as Button } from './atoms/Button/Button.svelte';
+export { default as Icon } from './atoms/Icons/Icon.svelte';
+export { default as IconButton } from './molecules/IconButton/IconButton.svelte';

package/dist/index.js

@@ -0,0 +1,7 @@
+//css export
+import './do-theme/index.css';
+//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';

package/dist/molecules/IconButton/IconButton.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import Icon from '../../atoms/Icons/Icon.svelte';
+	import type { iProps } from './iProps.ts';
+
+	export let variant: iProps['variant'] = 'primary';
+	export let size: iProps['size'] = 'md';
+	export let label: iProps['label'] = '';
+	export let disabled: iProps['disabled'] = false;
+	export let onClick: iProps['onClick'];
+	export let loading: iProps['loading'] = false;
+	export let iconName: iProps['iconName'] = '';
+	export let iconSize: iProps['iconSize'] = 'text-md';
+	export let iconColor: iProps['iconColor'] = 'inherit';
+	export let iconPosition: iProps['iconPosition'] = 'end';
+</script>
+
+<!-- @component
+      ```Svelte
+      <Button variant='primary' size='md' label="Click me!" onClick={onClick} disabled={false} />
+      ```
+      - `variant`: 'primary' | 'secondary' | 'accent' | 'neutral'
+      - `size`: 'sm' | 'md' | 'lg'
+      - `label`: string
+      - `onClick`: () => void
+      - `disabled`: boolean
+	  - `loading`: boolean
+	  - `iconName`: string
+	  - `iconSize`: 'text-sm' | 'text-md' | 'text-lg' | 'text-xl' | 'text-2xl'
+	  - `iconColor`: string
+	  - `iconPosition`: 'left' | 'right'
+	  ```
+	  @endcomponent
+  -->
+
+<button {...$$restProps} class={['btn', `btn-${size}`, `btn-${variant}`].join(' ')} disabled={disabled} on:click={onClick}>
+	{#if loading}
+		<span
+			class="loading loading-spinner {iconPosition === 'start' ? 'order-1' : 'order-2'}"
+			class:!inline={loading}
+			role="status"
+			style="width: 16px; height: 16px;">&nbsp;</span
+		>
+	{:else}
+		<div class={iconPosition === 'start' ? 'order-1' : 'order-2'}>
+			<Icon name={iconName} size={iconSize} color={iconColor} />
+		</div>
+	{/if}
+	{#if label}
+		<span class={iconPosition === 'start' ? 'order-2' : 'order-1'}>{label}</span>
+	{/if}
+</button>

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

@@ -0,0 +1,48 @@
+import type { iProps } from './iProps.ts';
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * ```Svelte
+ *    <Button variant='primary' size='md' label="Click me!" onClick={onClick} disabled={false} />
+ *    ```
+ *    - `variant`: 'primary' | 'secondary' | 'accent' | 'neutral'
+ *    - `size`: 'sm' | 'md' | 'lg'
+ *    - `label`: string
+ *    - `onClick`: () => void
+ *    - `disabled`: boolean
+ * - `loading`: boolean
+ * - `iconName`: string
+ * - `iconSize`: 'text-sm' | 'text-md' | 'text-lg' | 'text-xl' | 'text-2xl'
+ * - `iconColor`: string
+ * - `iconPosition`: 'left' | 'right'
+ * ```
+ * @endcomponent
+ */
+declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    variant?: "primary" | "secondary" | "neutral" | "accent" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    onClick: iProps["onClick"];
+    loading?: boolean | undefined;
+    iconName?: iProps["iconName"];
+    iconSize?: string | undefined;
+    iconColor?: string | undefined;
+    iconPosition?: "start" | "end" | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconButton = InstanceType<typeof IconButton>;
+export default IconButton;

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

@@ -0,0 +1,14 @@
+import type { IconNames } from '../../atoms/Icons/icon-list.ts';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface iProps extends HTMLButtonAttributes {
+    variant?: 'primary' | 'secondary' | 'neutral' | 'accent';
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    disabled?: boolean;
+    onClick?: () => void | undefined;
+    loading?: boolean;
+    iconName: IconNames | '';
+    iconSize?: string;
+    iconColor?: string;
+    iconPosition?: 'start' | 'end';
+}

package/dist/molecules/IconButton/iProps.js

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

package/package.json

@@ -0,0 +1,95 @@
+{
+	"name": "do-ui-design-system",
+	"version": "0.0.1",
+	"description": "Design system en Svelte + Tailwind + DaisyUI",
+	"author": "Data Observatory",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "postcss src/app.css -o src/lib/do-theme/post-compiled.css && vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run",
+		"lint": "eslint . && prettier --check .",
+		"format": "prettier --write .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"deploy:sb": "aws s3 sync ./storybook-static/ \"s3://doui-douis334ee98a3-exurk2nzipoy\" --delete --profile aplicaciones",
+		"invalidate:sb": "aws cloudfront create-invalidation --distribution-id EV3SCINCO86TM --paths \"/*\" --profile aplicaciones",
+		"full-deploy:sb": "npm run build-storybook && npm run deploy:sb && npm run invalidate:sb"
+	},
+	"files": [
+		"dist",
+		"src/lib/do-theme/index.css",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/**/*.stories.*",
+		"!dist/**/*.mdx*",
+		"!dist/**/*.iProps*"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"import": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^3",
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@storybook/addon-docs": "^8.6.12",
+		"@storybook/addon-essentials": "^8.6.11",
+		"@storybook/addon-svelte-csf": "^5.0.0-next.0",
+		"@storybook/blocks": "^8.6.11",
+		"@storybook/experimental-addon-test": "^8.6.11",
+		"@storybook/svelte": "^8.6.12",
+		"@storybook/sveltekit": "^8.6.11",
+		"@storybook/test": "^8.6.11",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@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",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.4",
+		"@vitest/browser": "^3.1.1",
+		"@vitest/coverage-v8": "^3.1.1",
+		"autoprefixer": "^10.4.21",
+		"daisyui": "^5.0.9",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"jsdom": "^26.0.0",
+		"playwright": "^1.51.1",
+		"postcss": "^8.5.3",
+		"postcss-cli": "^11.0.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.2",
+		"storybook": "^8.6.11",
+		"svelte": "^5.25.10",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.1.4",
+		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0",
+		"vitest": "^3.0.0"
+	},
+	"keywords": [
+		"svelte"
+	]
+}

package/src/lib/do-theme/index.css

@@ -0,0 +1,29 @@
+@plugin "daisyui";
+
+@import "./var-light.css";
+@import "./var-dark.css";
+@import "./var-hybrid.css";
+@import "./button.css";
+@import "./border.css";
+@import "./color.css";
+@import "./icomoon/icons.css";
+
+/* 
+  There are 2 ways to modify themes (light [default] and dark):
+
+    Specifying variables for each theme:
+    @plugin "daisyui/theme" {
+      name: "light" | "dark";
+      default: true;
+      --daisy-variable: some value;
+    }
+
+    Specifying classes for each theme:
+    [data-theme="dark"] {
+      .daisy-class {
+          background-color: red;
+        }
+    } 
+
+  For more info and variables: https://daisyui.com/docs/themes/ 
+*/