@r2digisolutions/ui 0.31.1 → 0.32.0

package/dist/components/index.d.ts

@@ -25,4 +25,6 @@ export * from './ui/Dialog/index.js';
 import Selector from './ui/Selector/Selector.svelte';
 import SelectTile from './ui/SelectTile/SelectTile.svelte';
 import MobileSheet from './ui/MobileSheet/MobileSheet.svelte';
-export { MobileSheet, SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import Dock from './ui/Dock/Dock.svelte';
+import DockItem from './ui/Dock/DockItem.svelte';
+export { Dock, DockItem, MobileSheet, SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/index.js

@@ -25,4 +25,6 @@ export * from './ui/Dialog/index.js';
 import Selector from './ui/Selector/Selector.svelte';
 import SelectTile from './ui/SelectTile/SelectTile.svelte';
 import MobileSheet from './ui/MobileSheet/MobileSheet.svelte';
-export { MobileSheet, SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import Dock from './ui/Dock/Dock.svelte';
+import DockItem from './ui/Dock/DockItem.svelte';
+export { Dock, DockItem, MobileSheet, SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/ui/Dock/Dock.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	type Props = {
+		class?: ClassValue;
+		size?: 'mini' | 'sm' | 'md';
+		children?: Snippet;
+	};
+
+	const { size = 'mini', children, ...props }: Props = $props();
+
+	const sizes: Record<NonNullable<Props['size']>, string> = {
+		mini: 'rounded-full p-0.5',
+		sm: 'rounded-full p-0.5',
+		md: 'rounded-2xl p-1'
+	};
+
+	const base = 'isolate inline-flex items-center overflow-hidden border backdrop-blur-md shadow-sm';
+
+	const theme =
+		'border-neutral-200/70 bg-neutral-50/70 shadow-black/5 ' +
+		'dark:border-neutral-800/70 dark:bg-neutral-950/40';
+</script>
+
+<div class={[base, theme, sizes[size], props.class]}>
+	{@render children?.()}
+</div>

package/dist/components/ui/Dock/Dock.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type Props = {
+    class?: ClassValue;
+    size?: 'mini' | 'sm' | 'md';
+    children?: Snippet;
+};
+declare const Dock: import("svelte").Component<Props, {}, "">;
+type Dock = ReturnType<typeof Dock>;
+export default Dock;

package/dist/components/ui/Dock/DockItem.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	type Props = {
+		as?: 'button' | 'a';
+		href?: string;
+		onclick?: (e: MouseEvent) => void;
+		disabled?: boolean;
+		active?: boolean;
+		size?: 'mini' | 'sm' | 'md';
+		ariaLabel?: string;
+		class?: ClassValue;
+		children?: Snippet;
+	};
+
+	const {
+		as = 'button',
+		href,
+		onclick,
+		disabled,
+		active = false,
+		size = 'mini',
+		ariaLabel,
+		children,
+		...props
+	}: Props = $props();
+
+	const sizes: Record<NonNullable<Props['size']>, string> = {
+		mini: 'h-7 px-2 text-[11px]',
+		sm: 'h-8 px-2.5 text-xs',
+		md: 'h-9 px-3 text-sm'
+	};
+
+	const base =
+		'relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap select-none transition-all ' +
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/60';
+
+	const disabledCls = disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer';
+
+	const inactive =
+		'text-neutral-700 hover:bg-white/55 hover:text-neutral-900 ' +
+		'dark:text-neutral-200 dark:hover:bg-white/10 dark:hover:text-neutral-50';
+
+	const activeCls =
+		'bg-white text-neutral-900 shadow-sm ring-1 ring-neutral-200/70 ' +
+		'dark:bg-neutral-900/80 dark:text-neutral-50 dark:ring-neutral-800/70';
+</script>
+
+{#if as === 'a'}
+	<a
+		{href}
+		aria-label={ariaLabel}
+		data-active={active || undefined}
+		class={[
+			base,
+			sizes[size],
+			active ? activeCls : inactive,
+			// 🎯 SOLO CSS: posición automática
+			'[&[data-active]:first-child]:rounded-l-full',
+			'[&[data-active]:last-child]:rounded-r-full',
+			'[&[data-active]:not(:first-child):not(:last-child)]:rounded-full',
+			disabledCls,
+			props.class
+		]}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		type="button"
+		{disabled}
+		aria-label={ariaLabel}
+		data-active={active || undefined}
+		{onclick}
+		class={[
+			base,
+			sizes[size],
+			active ? activeCls : inactive,
+			'[&[data-active]:first-child]:rounded-l-full',
+			'[&[data-active]:last-child]:rounded-r-full',
+			'[&[data-active]:not(:first-child):not(:last-child)]:rounded-full',
+			disabledCls,
+			props.class
+		]}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/ui/Dock/DockItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type Props = {
+    as?: 'button' | 'a';
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    active?: boolean;
+    size?: 'mini' | 'sm' | 'md';
+    ariaLabel?: string;
+    class?: ClassValue;
+    children?: Snippet;
+};
+declare const DockItem: import("svelte").Component<Props, {}, "">;
+type DockItem = ReturnType<typeof DockItem>;
+export default DockItem;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.31.1",
+	"version": "0.32.0",
 	"private": false,
 	"packageManager": "bun@1.3.4",
 	"publishConfig": {
@@ -55,14 +55,14 @@
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-svelte-csf": "5.0.10",
 		"@storybook/blocks": "8.6.14",
-		"@storybook/svelte": "10.1.6",
-		"@storybook/sveltekit": "10.1.6",
+		"@storybook/svelte": "10.1.7",
+		"@storybook/sveltekit": "10.1.7",
 		"@storybook/test": "8.6.14",
 		"@sveltejs/adapter-static": "3.0.10",
 		"@sveltejs/kit": "2.49.2",
 		"@sveltejs/package": "2.5.7",
 		"@sveltejs/vite-plugin-svelte": "6.2.1",
-		"@tailwindcss/postcss": "4.1.17",
+		"@tailwindcss/postcss": "4.1.18",
 		"@testing-library/svelte": "5.2.9",
 		"@vitest/browser": "4.0.15",
 		"changeset": "0.2.6",
@@ -71,15 +71,15 @@
 		"eslint-plugin-svelte": "3.13.1",
 		"globals": "16.5.0",
 		"jsdom": "27.3.0",
-		"lucide-svelte": "0.560.0",
+		"lucide-svelte": "0.561.0",
 		"prettier": "3.7.4",
 		"prettier-plugin-svelte": "3.4.0",
 		"prettier-plugin-tailwindcss": "0.7.2",
 		"publint": "0.3.16",
-		"storybook": "10.1.6",
-		"svelte": "5.45.8",
+		"storybook": "10.1.7",
+		"svelte": "5.45.10",
 		"svelte-check": "4.3.4",
-		"tailwindcss": "4.1.17",
+		"tailwindcss": "4.1.18",
 		"typescript": "5.9.3",
 		"typescript-eslint": "8.49.0",
 		"vite": "7.2.7",