@r2digisolutions/ui 0.25.5 → 0.26.0

package/dist/components/ui/Dialog/Dialog.svelte

@@ -3,10 +3,11 @@
 	import type { DialogProps } from './type.js';
 	import { createDialogContext } from './context.svelte';
 	import { tick } from 'svelte';
+	import { STYLES } from '../../../constants/styles.js';
 
 	let {
 		open = $bindable(),
-		padding = 'md',
+		padding = 'none',
 		children,
 		header,
 		footer,
@@ -14,6 +15,9 @@
 		size = 'lg',
 		onOpenChange,
 		closedby = 'any',
+		aside,
+		asideWidth = '320px',
+		showGridBackground = false,
 		...props
 	}: DialogProps = $props();
 
@@ -25,11 +29,13 @@
 		onclose?.();
 	};
 
+	(cx as any).onclose = _onclose;
+
 	const paddings: Record<typeof padding, string> = {
 		none: 'p-0',
-		sm: 'md:p-4 p-4',
-		md: 'md:p-6 p-4',
-		lg: 'md:p-8 p-4'
+		sm: 'p-4 md:p-4',
+		md: 'p-4 md:p-6',
+		lg: 'p-4 md:p-8'
 	};
 
 	const sizes: Record<typeof size, string> = {
@@ -44,9 +50,12 @@
 		'5xl': 'w-full md:max-w-5xl',
 		'6xl': 'w-full md:max-w-6xl',
 		'7xl': 'w-full md:max-w-7xl',
-		full: 'w-full md:max-w-full h-full md:h-full'
+		full: 'w-full max-w-full h-full max-h-full'
 	};
 
+	const effectiveSize = $derived(cx.is_maximized ? 'full' : size);
+	const effectivePadding = $derived(cx.is_minimized ? 'none' : padding);
+
 	$effect(() => {
 		if (open) {
 			document.body.style.overflow = 'hidden';
@@ -65,21 +74,76 @@
 		bind:this={cx.ref_dialog}
 		aria-modal="true"
 		class={[
-			'fixed inset-0 flex h-full max-h-full w-full max-w-full flex-col gap-4 overflow-hidden bg-white shadow-lg duration-200 backdrop:bg-black/50 backdrop:backdrop-blur-xs md:m-auto md:h-fit dark:border-gray-600 dark:bg-gray-800',
-			props.class,
-			// paddings[padding],
-			sizes[size],
-			{
-				'sm:rounded-lg': size !== 'full'
-			}
+			'fixed inset-0 z-50 m-0 flex h-full max-h-full w-full max-w-full items-center justify-center p-5 backdrop:p-0',
+			'bg-transparent backdrop:bg-black/60 backdrop:backdrop-blur-sm',
+			'duration-200',
+			props.class
 		]}
 	>
-		{#if header}
-			{@render header()}
-		{/if}
-		{@render children()}
-		{#if footer}
-			{@render footer()}
-		{/if}
+		<div
+			class={[
+				'flex max-h-[min(90vh,700px)] flex-col overflow-hidden',
+				STYLES.SHELL_TRANSPARENT,
+				paddings[effectivePadding],
+				sizes[effectiveSize],
+				effectiveSize !== 'full' && 'rounded-lg'
+			]}
+		>
+			{#if aside}
+				<!-- Layout con sidebar (similar a tu React LayoutWithAside) -->
+				<div
+					class="grid h-full w-full gap-0"
+					style={`grid-template-columns: minmax(0, ${asideWidth}) minmax(0, 1fr);`}
+				>
+					<aside
+						class="hidden h-full border-r border-neutral-200/80 bg-white/20 p-4 md:block dark:border-neutral-800/80 dark:bg-black/20"
+					>
+						<div
+							class="h-full overflow-hidden rounded-xl bg-white/70 p-3 ring-1 ring-black/10 dark:bg-neutral-900/60 dark:ring-white/10"
+						>
+							{@render aside()}
+						</div>
+					</aside>
+
+					<section class="relative flex h-full flex-1 flex-col overflow-hidden">
+						{#if showGridBackground}
+							<div
+								aria-hidden="true"
+								class="pointer-events-none absolute inset-0 opacity-[0.06]"
+								style="
+									background-image:
+										linear-gradient(to bottom, rgba(0,0,0,0.8) 1px, transparent 1px),
+										linear-gradient(to right, rgba(0,0,0,0.8) 1px, transparent 1px);
+									background-size: 22px 22px;
+								"
+							></div>
+						{/if}
+
+						<div class="relative flex h-full flex-col">
+							{#if header}
+								{@render header()}
+							{/if}
+
+							{@render children()}
+
+							{#if footer}
+								{@render footer()}
+							{/if}
+						</div>
+					</section>
+				</div>
+			{:else}
+				<!-- Layout normal sin sidebar -->
+				{#if header}
+					{@render header()}
+				{/if}
+
+				{@render children()}
+
+				{#if footer}
+					{@render footer()}
+				{/if}
+			{/if}
+		</div>
 	</dialog>
 {/if}

package/dist/components/ui/Dialog/DialogContent.svelte

@@ -5,9 +5,9 @@
 
 	const paddings: Record<typeof padding, string> = {
 		none: 'p-0',
-		sm: 'md:px-4 px-4 pb-4',
-		md: 'md:px-6 px-4 pb-4',
-		lg: 'md:px-8 px-4 pb-4'
+		sm: 'md:p-4 p-4',
+		md: 'md:p-6 p-4',
+		lg: 'md:p-8 p-4'
 	};
 </script>
 

package/dist/components/ui/Dialog/DialogDescription.svelte

@@ -4,6 +4,12 @@
 	const { children, ...props }: DialogDescriptionProps = $props();
 </script>
 
-<p class={['text-md text-center text-pretty sm:text-left dark:text-gray-300', props.class]}>
+<p
+	class={[
+		'text-md text-center text-pretty sm:text-left',
+		'text-neutral-600 dark:text-neutral-300',
+		props.class
+	]}
+>
 	{@render children()}
 </p>

package/dist/components/ui/Dialog/DialogHeader.svelte

@@ -1,19 +1,81 @@
 <script lang="ts">
-	import { X } from 'lucide-svelte';
+	import { useDialogContext } from './context.svelte.js';
 	import type { DialogPropsgHeaderProps } from './type.js';
+	import { X } from 'lucide-svelte';
 
 	let { children, ...props }: DialogPropsgHeaderProps = $props();
+	const dialog = useDialogContext();
+
+	const handleClose = () => {
+		dialog.onclose?.();
+	};
+
+	const handleMinimize = () => {
+		dialog.onRequestMinimize?.();
+	};
+
+	const handleMaximize = () => {
+		dialog.onRequestMaximize?.();
+	};
 </script>
 
-<header class={['flex flex-col px-6 text-center sm:text-left', props.class, children && 'pt-6']}>
-	{@render children?.()}
-	<form method="dialog" class="absolute top-0 right-0">
+<header
+	class={[
+		'relative flex flex-col px-6 pb-3 text-center sm:text-left',
+		'border-b border-neutral-200/80 dark:border-neutral-800/80',
+		children && 'pt-8',
+		props.class
+	]}
+>
+	<div class="absolute top-3 left-6 flex items-center gap-2">
+		<button
+			type="button"
+			class="
+				inline-flex h-3.5 w-3.5 cursor-pointer items-center justify-center rounded-full
+				border border-black/10 bg-[#ff5f57]
+				transition hover:border-black/20
+			"
+			aria-label="Cerrar"
+			onclick={handleClose}
+		></button>
+		<button
+			type="button"
+			class="
+				inline-flex h-3.5 w-3.5 cursor-pointer items-center justify-center
+				rounded-full
+				border border-black/10 bg-[#febc2e]
+				transition hover:border-black/20
+			"
+			aria-label="Minimizar"
+			onclick={handleMinimize}
+		></button>
+		<button
+			type="button"
+			class="
+				inline-flex h-3.5 w-3.5 cursor-pointer items-center justify-center
+				rounded-full
+				border border-black/10 bg-[#28c840]
+				transition hover:border-black/20
+			"
+			aria-label="Maximizar"
+			onclick={handleMaximize}
+		></button>
+	</div>
+
+	<form method="dialog" class="absolute top-2 right-2">
 		<button
 			type="submit"
-			class="cursor-pointer p-2 text-gray-400 hover:text-gray-500 focus:outline-none"
-			aria-label="Close"
+			class="
+				cursor-pointer rounded-full p-1.5
+				text-neutral-400 hover:bg-neutral-100/70 hover:text-neutral-700
+				focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70
+				dark:text-neutral-500 dark:hover:bg-neutral-800/80 dark:hover:text-neutral-100
+			"
+			aria-label="Cerrar"
 		>
-			<X class="h-6 w-6" />
+			<X class="h-4 w-4" />
 		</button>
 	</form>
+
+	{@render children?.()}
 </header>

package/dist/components/ui/Dialog/DialogTitle.svelte

@@ -4,6 +4,12 @@
 	const { children, ...props }: DialogTitleProps = $props();
 </script>
 
-<h2 class={['text-center text-2xl font-bold sm:text-left dark:text-white', props.class]}>
+<h2
+	class={[
+		'text-center text-2xl font-bold sm:text-left',
+		'text-neutral-900 dark:text-neutral-50',
+		props.class
+	]}
+>
 	{@render children()}
 </h2>

package/dist/components/ui/Dialog/ModalContext.svelte.d.ts

@@ -2,8 +2,12 @@ export declare class ModalContext {
     #private;
     constructor(initialOpen?: boolean);
     onclose(): void;
+    onRequestMinimize(): void;
+    onRequestMaximize(): void;
     get open(): boolean;
     set open(value: boolean);
     get ref_dialog(): HTMLDialogElement | undefined;
+    get is_minimized(): boolean;
+    get is_maximized(): boolean;
     set ref_dialog(value: HTMLDialogElement | undefined);
 }

package/dist/components/ui/Dialog/ModalContext.svelte.js

@@ -1,5 +1,7 @@
 export class ModalContext {
     #open = $state(false);
+    #is_minimized = $state(false);
+    #is_maximized = $state(false);
     #ref_dialog = $state();
     constructor(initialOpen = false) {
         this.#open = initialOpen;
@@ -16,6 +18,12 @@ export class ModalContext {
         this.#open = false;
         this.#ref_dialog?.close();
     }
+    onRequestMinimize() {
+        this.#is_minimized = !this.#is_minimized;
+    }
+    onRequestMaximize() {
+        this.#is_maximized = !this.#is_maximized;
+    }
     get open() {
         return this.#open;
     }
@@ -25,6 +33,12 @@ export class ModalContext {
     get ref_dialog() {
         return this.#ref_dialog;
     }
+    get is_minimized() {
+        return this.#is_minimized;
+    }
+    get is_maximized() {
+        return this.#is_maximized;
+    }
     set ref_dialog(value) {
         this.#ref_dialog = value;
         if (value) {

package/dist/components/ui/Dialog/type.d.ts

@@ -7,6 +7,9 @@ export interface DialogProps {
     class?: ClassValue;
     children: Snippet;
     open?: boolean;
+    aside?: Snippet;
+    asideWidth?: string;
+    showGridBackground?: boolean;
     header?: Snippet;
     footer?: Snippet;
     onclose?(): void;

package/dist/constants/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const STYLES: {
+    SHELL: string;
+    SHELL_TRANSPARENT: "backdrop-blur-xl ring-1 ring-neutral-200/80 dark:ring-neutral-800/80 shadow-xs shadow-black/10";
+    SHELL_ROUNDED: string;
+    INPUT_SHELL: string;
+    ITEM_BASE: "flex items-center rounded-xl px-2 py-1.5 select-none transition shadow-none ring-1 ring-transparent border border-transparent";
+    ITEM_HOVER: "hover:bg-neutral-100/60 hover:dark:bg-neutral-800/50 cursor-pointer";
+    ITEM_ACTIVE: "bg-neutral-50/95 dark:bg-neutral-900/85 ring-1 !ring-indigo-400/60 dark:ring-indigo-500/70 border !border-indigo-200/70 dark:border-indigo-600/70";
+    GROUP_TITLE: "px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400";
+    ACCENT_GRADIENT: "from-indigo-500 via-violet-500 to-blue-500";
+    ACCENT: string;
+};

package/dist/constants/styles.js

@@ -0,0 +1,23 @@
+const SHELL_TRANSPARENT = "backdrop-blur-xl ring-1 ring-neutral-200/80 dark:ring-neutral-800/80 shadow-xs shadow-black/10";
+const SHELL = 'bg-white/95 dark:bg-neutral-950/95 ' + SHELL_TRANSPARENT;
+const ACCENT_GRADIENT = 'from-indigo-500 via-violet-500 to-blue-500';
+const LOCAL_STYLES = {
+    SHELL,
+    SHELL_TRANSPARENT,
+    SHELL_ROUNDED: 'rounded-2xl ' + SHELL,
+    INPUT_SHELL: [
+        'flex h-11 w-full items-center gap-3 rounded-xl',
+        'border border-neutral-200/80 bg-white/90 px-3 text-sm text-neutral-900',
+        'shadow-xs ring-1 ring-black/5 transition',
+        'hover:border-neutral-300 hover:bg-white',
+        'dark:border-neutral-800 dark:bg-neutral-900/80 dark:text-neutral-100 dark:ring-white/5',
+        'hover:dark:border-neutral-600 hover:dark:bg-neutral-900'
+    ].join(' '),
+    ITEM_BASE: 'flex items-center rounded-xl px-2 py-1.5 select-none transition shadow-none ring-1 ring-transparent border border-transparent',
+    ITEM_HOVER: 'hover:bg-neutral-100/60 hover:dark:bg-neutral-800/50 cursor-pointer',
+    ITEM_ACTIVE: 'bg-neutral-50/95 dark:bg-neutral-900/85 ring-1 !ring-indigo-400/60 dark:ring-indigo-500/70 border !border-indigo-200/70 dark:border-indigo-600/70',
+    GROUP_TITLE: 'px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400',
+    ACCENT_GRADIENT,
+    ACCENT: 'bg-gradient-to-b ' + ACCENT_GRADIENT
+};
+export const STYLES = { ...LOCAL_STYLES };

package/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.25.5",
+	"version": "0.26.0",
 	"private": false,
-	"packageManager": "bun@1.3.1",
+	"packageManager": "bun@1.3.2",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -55,35 +55,35 @@
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-svelte-csf": "5.0.10",
 		"@storybook/blocks": "8.6.14",
-		"@storybook/svelte": "10.0.2",
-		"@storybook/sveltekit": "10.0.2",
+		"@storybook/svelte": "10.0.6",
+		"@storybook/sveltekit": "10.0.6",
 		"@storybook/test": "8.6.14",
 		"@sveltejs/adapter-static": "3.0.10",
 		"@sveltejs/kit": "2.48.4",
 		"@sveltejs/package": "2.5.4",
 		"@sveltejs/vite-plugin-svelte": "6.2.1",
-		"@tailwindcss/postcss": "4.1.16",
+		"@tailwindcss/postcss": "4.1.17",
 		"@testing-library/svelte": "5.2.8",
-		"@vitest/browser": "4.0.6",
+		"@vitest/browser": "4.0.8",
 		"changeset": "0.2.6",
-		"eslint": "9.38.0",
+		"eslint": "9.39.1",
 		"eslint-config-prettier": "10.1.8",
 		"eslint-plugin-svelte": "3.13.0",
-		"globals": "16.4.0",
+		"globals": "16.5.0",
 		"jsdom": "27.1.0",
-		"lucide-svelte": "0.552.0",
+		"lucide-svelte": "0.553.0",
 		"prettier": "3.6.2",
 		"prettier-plugin-svelte": "3.4.0",
 		"prettier-plugin-tailwindcss": "0.7.1",
 		"publint": "0.3.15",
-		"storybook": "10.0.2",
-		"svelte": "5.43.2",
+		"storybook": "10.0.6",
+		"svelte": "5.43.5",
 		"svelte-check": "4.3.3",
-		"tailwindcss": "4.1.16",
+		"tailwindcss": "4.1.17",
 		"typescript": "5.9.3",
-		"typescript-eslint": "8.46.2",
-		"vite": "7.1.12",
-		"vitest": "4.0.6"
+		"typescript-eslint": "8.46.3",
+		"vite": "7.2.2",
+		"vitest": "4.0.8"
 	},
 	"dependencies": {
 		"@tailwindcss/container-queries": "0.1.1",