@r2digisolutions/components 0.1.1

package/dist/components/molecules/QuickActionGrid/QuickActionGrid.stories.js

@@ -0,0 +1,40 @@
+import QuickActionGridStory from './QuickActionGridStory.svelte';
+const meta = {
+    title: 'Molecules/QuickActionGrid',
+    component: QuickActionGridStory,
+    tags: ['autodocs'],
+    argTypes: {
+        example: {
+            control: 'select',
+            options: ['workspace', 'create', 'compact', 'list', 'emoji']
+        },
+        layout: {
+            control: 'select',
+            options: ['tiles', 'compact', 'list']
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg']
+        },
+        columns: {
+            control: 'select',
+            options: [2, 3, 4, 5, 6]
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: { example: 'workspace', layout: 'tiles', size: 'md' }
+};
+export const CreateMenu = {
+    args: { example: 'create', layout: 'tiles', columns: 4 }
+};
+export const CompactResponsive = {
+    args: { example: 'compact', layout: 'compact', size: 'md' }
+};
+export const List = {
+    args: { example: 'list', layout: 'list' }
+};
+export const EmojiIcons = {
+    args: { example: 'emoji', layout: 'tiles', columns: 4 }
+};

package/dist/components/molecules/QuickActionGrid/QuickActionGrid.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconBox from '../../atoms/IconBox/IconBox.svelte';
+	import type { IconBoxTone } from '../../atoms/IconBox/IconBox.svelte';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Upload from '@lucide/svelte/icons/upload';
+	import Share2 from '@lucide/svelte/icons/share-2';
+	import Search from '@lucide/svelte/icons/search';
+	import Zap from '@lucide/svelte/icons/zap';
+	import FilePlus from '@lucide/svelte/icons/file-plus';
+	import Users from '@lucide/svelte/icons/users';
+	import Settings from '@lucide/svelte/icons/settings';
+	import Download from '@lucide/svelte/icons/download';
+	import Link from '@lucide/svelte/icons/link';
+	import MessageSquare from '@lucide/svelte/icons/message-square';
+	import Calendar from '@lucide/svelte/icons/calendar';
+	import FolderPlus from '@lucide/svelte/icons/folder-plus';
+	import Sparkles from '@lucide/svelte/icons/sparkles';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+
+	export type QuickActionTone = IconBoxTone;
+	export type QuickActionSize = 'sm' | 'md' | 'lg';
+	export type QuickActionLayout = 'tiles' | 'compact' | 'list';
+	export type QuickActionIconName =
+		| 'plus'
+		| 'upload'
+		| 'share'
+		| 'search'
+		| 'zap'
+		| 'file'
+		| 'users'
+		| 'settings'
+		| 'download'
+		| 'link'
+		| 'message'
+		| 'calendar'
+		| 'folder'
+		| 'sparkles';
+
+	export interface QuickAction {
+		id: string;
+		label: string;
+		description?: string;
+		/** Lucide name, emoji, or custom snippet */
+		icon?: Snippet | QuickActionIconName | (string & {});
+		tone?: QuickActionTone;
+		badge?: string;
+		disabled?: boolean;
+	}
+
+	interface QuickActionGridProps {
+		actions?: QuickAction[];
+		/** Max columns for tiles. Compact uses auto-fill and treats this as a soft max. */
+		columns?: 2 | 3 | 4 | 5 | 6;
+		size?: QuickActionSize;
+		layout?: QuickActionLayout;
+		/** Show chevron on list layout */
+		showChevron?: boolean;
+		title?: string;
+		description?: string;
+		class?: string;
+		onaction?: (id: string) => void;
+	}
+
+	const {
+		actions = [],
+		columns = 3,
+		size = 'md',
+		layout = 'tiles',
+		showChevron = true,
+		title,
+		description,
+		class: className = '',
+		onaction
+	}: QuickActionGridProps = $props();
+
+	const columnClasses: Record<2 | 3 | 4 | 5 | 6, string> = {
+		2: 'grid-cols-1 sm:grid-cols-2',
+		3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+		4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+		5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
+		6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6'
+	};
+
+	const compactMin: Record<QuickActionSize, string> = {
+		sm: '4.75rem',
+		md: '5.5rem',
+		lg: '6.25rem'
+	};
+
+	const iconSize: Record<QuickActionSize, 'sm' | 'md' | 'lg'> = {
+		sm: 'sm',
+		md: 'md',
+		lg: 'lg'
+	};
+
+	const pad: Record<QuickActionSize, string> = {
+		sm: 'p-2',
+		md: 'p-2.5',
+		lg: 'p-3'
+	};
+
+	const labelSize: Record<QuickActionSize, string> = {
+		sm: 'text-[11px]',
+		md: 'text-xs',
+		lg: 'text-sm'
+	};
+
+	const descSize: Record<QuickActionSize, string> = {
+		sm: 'text-[10px]',
+		md: 'text-xs',
+		lg: 'text-xs'
+	};
+
+	function isSnippet(icon: QuickAction['icon']): icon is Snippet {
+		return typeof icon === 'function';
+	}
+
+	function isEmoji(icon: string): boolean {
+		return !ICON_NAMES.has(icon) && [...icon].length <= 3;
+	}
+
+	const ICON_NAMES = new Set<string>([
+		'plus',
+		'upload',
+		'share',
+		'search',
+		'zap',
+		'file',
+		'users',
+		'settings',
+		'download',
+		'link',
+		'message',
+		'calendar',
+		'folder',
+		'sparkles'
+	]);
+
+	const isList = $derived(layout === 'list');
+	const isCompact = $derived(layout === 'compact');
+
+	const compactStyle = $derived(
+		isCompact
+			? `grid-template-columns: repeat(auto-fit, minmax(min(100%, ${compactMin[size]}), 1fr));`
+			: undefined
+	);
+</script>
+
+{#snippet iconGlyph(name: string)}
+	{#if name === 'plus'}
+		<Plus class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'upload'}
+		<Upload class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'share'}
+		<Share2 class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'search'}
+		<Search class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'file'}
+		<FilePlus class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'users'}
+		<Users class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'settings'}
+		<Settings class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'download'}
+		<Download class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'link'}
+		<Link class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'message'}
+		<MessageSquare class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'calendar'}
+		<Calendar class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'folder'}
+		<FolderPlus class="h-4 w-4" aria-hidden="true" />
+	{:else if name === 'sparkles'}
+		<Sparkles class="h-4 w-4" aria-hidden="true" />
+	{:else}
+		<Zap class="h-4 w-4" aria-hidden="true" />
+	{/if}
+{/snippet}
+
+<div class={['w-full space-y-3', className]}>
+	{#if title || description}
+		<div class="min-w-0">
+			{#if title}
+				<p class="text-sm font-semibold text-primary">{title}</p>
+			{/if}
+			{#if description}
+				<p class="mt-0.5 text-xs text-muted">{description}</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class={[
+			isList ? 'flex flex-col gap-1.5' : isCompact ? 'grid gap-2' : ['grid gap-2', columnClasses[columns]],
+			isCompact && 'gap-2'
+		]}
+		style={compactStyle}
+		role="group"
+		aria-label={title ?? 'Quick actions'}
+	>
+		{#each actions as action (action.id)}
+			<button
+				type="button"
+				disabled={action.disabled}
+				class={[
+					'group text-left transition-all duration-150',
+					'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
+					'disabled:cursor-not-allowed disabled:opacity-45',
+					isList
+						? [
+								'flex w-full items-center gap-3 rounded-xl border border-border bg-surface-elevated px-3 py-2.5',
+								'hover:border-brand-500/25 hover:bg-surface-overlay active:scale-[0.995]'
+							]
+						: isCompact
+							? [
+									'flex min-h-[4.75rem] flex-col items-center justify-center gap-2 rounded-2xl border border-border bg-surface-elevated text-center',
+									pad[size],
+									'hover:border-brand-500/30 hover:bg-surface-overlay hover:shadow-sm active:scale-[0.98]'
+								]
+							: [
+									'flex flex-col items-start gap-2.5 rounded-2xl border border-border bg-surface-elevated',
+									pad[size],
+									'hover:border-brand-500/30 hover:bg-surface-overlay hover:shadow-sm active:scale-[0.985]'
+								]
+				]}
+				onclick={() => {
+					if (action.disabled) return;
+					onaction?.(action.id);
+				}}
+			>
+				{#if isList}
+					<IconBox tone={action.tone ?? 'brand'} size={iconSize[size]} rounded="lg">
+						{#if isSnippet(action.icon)}
+							{@render action.icon()}
+						{:else if typeof action.icon === 'string' && isEmoji(action.icon)}
+							<span class="text-sm leading-none">{action.icon}</span>
+						{:else}
+							{@render iconGlyph(typeof action.icon === 'string' ? action.icon : 'zap')}
+						{/if}
+					</IconBox>
+					<span class="min-w-0 flex-1">
+						<span class="flex flex-wrap items-center gap-1.5">
+							<span class={['font-semibold text-primary', labelSize[size]]}>{action.label}</span>
+							{#if action.badge}
+								<Badge size="sm" variant="secondary" rounded>{action.badge}</Badge>
+							{/if}
+						</span>
+						{#if action.description}
+							<span class={['mt-0.5 block leading-snug text-muted', descSize[size]]}>
+								{action.description}
+							</span>
+						{/if}
+					</span>
+					{#if showChevron}
+						<ChevronRight
+							class="h-4 w-4 shrink-0 text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-secondary"
+							aria-hidden="true"
+						/>
+					{/if}
+				{:else}
+					<div class={['flex w-full items-start', isCompact ? 'justify-center' : 'justify-between gap-2']}>
+						<IconBox
+							tone={action.tone ?? 'brand'}
+							size={isCompact ? 'md' : iconSize[size]}
+							rounded={isCompact ? 'full' : 'xl'}
+						>
+							{#if isSnippet(action.icon)}
+								{@render action.icon()}
+							{:else if typeof action.icon === 'string' && isEmoji(action.icon)}
+								<span class="text-sm leading-none">{action.icon}</span>
+							{:else}
+								{@render iconGlyph(typeof action.icon === 'string' ? action.icon : 'zap')}
+							{/if}
+						</IconBox>
+						{#if action.badge && !isCompact}
+							<Badge size="sm" variant="secondary" rounded>{action.badge}</Badge>
+						{/if}
+					</div>
+					<span class={['min-w-0', isCompact && 'w-full']}>
+						<span
+							class={[
+								'block font-semibold text-primary',
+								labelSize[size],
+								isCompact && 'truncate text-center'
+							]}
+						>
+							{action.label}
+						</span>
+						{#if action.description && !isCompact}
+							<span class={['mt-0.5 block leading-snug text-muted', descSize[size]]}>
+								{action.description}
+							</span>
+						{/if}
+						{#if action.badge && isCompact}
+							<span class="mt-1 flex justify-center">
+								<Badge size="sm" variant="secondary" rounded>{action.badge}</Badge>
+							</span>
+						{/if}
+					</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+</div>

package/dist/components/molecules/QuickActionGrid/QuickActionGrid.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { IconBoxTone } from '../../atoms/IconBox/IconBox.svelte';
+export type QuickActionTone = IconBoxTone;
+export type QuickActionSize = 'sm' | 'md' | 'lg';
+export type QuickActionLayout = 'tiles' | 'compact' | 'list';
+export type QuickActionIconName = 'plus' | 'upload' | 'share' | 'search' | 'zap' | 'file' | 'users' | 'settings' | 'download' | 'link' | 'message' | 'calendar' | 'folder' | 'sparkles';
+export interface QuickAction {
+    id: string;
+    label: string;
+    description?: string;
+    /** Lucide name, emoji, or custom snippet */
+    icon?: Snippet | QuickActionIconName | (string & {});
+    tone?: QuickActionTone;
+    badge?: string;
+    disabled?: boolean;
+}
+interface QuickActionGridProps {
+    actions?: QuickAction[];
+    /** Max columns for tiles. Compact uses auto-fill and treats this as a soft max. */
+    columns?: 2 | 3 | 4 | 5 | 6;
+    size?: QuickActionSize;
+    layout?: QuickActionLayout;
+    /** Show chevron on list layout */
+    showChevron?: boolean;
+    title?: string;
+    description?: string;
+    class?: string;
+    onaction?: (id: string) => void;
+}
+declare const QuickActionGrid: import("svelte").Component<QuickActionGridProps, {}, "">;
+type QuickActionGrid = ReturnType<typeof QuickActionGrid>;
+export default QuickActionGrid;

package/dist/components/molecules/QuickActionGrid/QuickActionGridStory.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import QuickActionGrid from './QuickActionGrid.svelte';
+	import type { QuickAction, QuickActionLayout, QuickActionSize } from './QuickActionGrid.svelte';
+
+	interface Props {
+		example?: 'workspace' | 'create' | 'compact' | 'list' | 'emoji';
+		layout?: QuickActionLayout;
+		size?: QuickActionSize;
+		columns?: 2 | 3 | 4 | 5 | 6;
+	}
+
+	let { example = 'workspace', layout, size = 'md', columns }: Props = $props();
+
+	let last = $state('');
+
+	const resolvedLayout = $derived(
+		layout ?? (example === 'list' ? 'list' : example === 'compact' ? 'compact' : 'tiles')
+	);
+
+	const resolvedColumns = $derived(
+		columns ?? (example === 'create' || example === 'emoji' ? 4 : 3)
+	);
+
+	const sets: Record<NonNullable<Props['example']>, QuickAction[]> = {
+		workspace: [
+			{
+				id: 'invite',
+				label: 'Invite people',
+				description: 'Add members to this workspace',
+				icon: 'users',
+				tone: 'brand',
+				badge: 'New'
+			},
+			{
+				id: 'upload',
+				label: 'Upload files',
+				description: 'Docs, images, and folders',
+				icon: 'upload',
+				tone: 'info'
+			},
+			{
+				id: 'link',
+				label: 'Copy invite link',
+				description: 'Anyone with the link can join',
+				icon: 'link',
+				tone: 'neutral'
+			},
+			{
+				id: 'settings',
+				label: 'Workspace settings',
+				description: 'Roles, billing, and branding',
+				icon: 'settings',
+				tone: 'neutral'
+			},
+			{
+				id: 'message',
+				label: 'Start a thread',
+				description: 'Ask the team a question',
+				icon: 'message',
+				tone: 'success'
+			},
+			{
+				id: 'calendar',
+				label: 'Schedule',
+				description: 'Book a kickoff call',
+				icon: 'calendar',
+				tone: 'warning'
+			}
+		],
+		create: [
+			{ id: 'doc', label: 'Document', description: 'Blank page', icon: 'file', tone: 'brand' },
+			{ id: 'folder', label: 'Folder', description: 'Organize files', icon: 'folder', tone: 'info' },
+			{
+				id: 'ai',
+				label: 'AI draft',
+				description: 'Generate a start',
+				icon: 'sparkles',
+				tone: 'warning',
+				badge: 'Beta'
+			},
+			{ id: 'import', label: 'Import', description: 'From Notion/CSV', icon: 'download', tone: 'neutral' }
+		],
+		compact: [
+			{ id: 'a', label: 'Create', icon: 'plus', tone: 'brand' },
+			{ id: 'b', label: 'Upload', icon: 'upload', tone: 'info' },
+			{ id: 'c', label: 'Share', icon: 'share', tone: 'success' },
+			{ id: 'd', label: 'Search', icon: 'search', tone: 'neutral' },
+			{ id: 'e', label: 'AI', icon: 'sparkles', tone: 'warning', badge: 'New' },
+			{ id: 'f', label: 'Link', icon: 'link', tone: 'neutral' },
+			{ id: 'g', label: 'Invite', icon: 'users', tone: 'brand' },
+			{ id: 'h', label: 'Files', icon: 'folder', tone: 'info' }
+		],
+		list: [
+			{
+				id: 'project',
+				label: 'New project',
+				description: 'Start from a template',
+				icon: 'folder',
+				tone: 'brand'
+			},
+			{
+				id: 'task',
+				label: 'Add task',
+				description: 'Assign to a teammate',
+				icon: 'plus',
+				tone: 'success'
+			},
+			{
+				id: 'invite',
+				label: 'Invite',
+				description: 'Email or link',
+				icon: 'users',
+				tone: 'info',
+				badge: '3 seats'
+			},
+			{
+				id: 'disabled',
+				label: 'Billing',
+				description: 'Requires admin role',
+				icon: 'settings',
+				tone: 'neutral',
+				disabled: true
+			}
+		],
+		emoji: [
+			{ id: 'idea', label: 'Ideas', description: 'Brainstorm board', icon: '💡', tone: 'warning' },
+			{ id: 'design', label: 'Design', description: 'Figma links', icon: '🎨', tone: 'brand' },
+			{ id: 'code', label: 'Code', description: 'Repos & PRs', icon: '💻', tone: 'info' },
+			{ id: 'ship', label: 'Ship', description: 'Release checklist', icon: '🚀', tone: 'success' }
+		]
+	};
+
+	const actions = $derived(sets[example]);
+</script>
+
+<div class="w-full space-y-4">
+	{#if example === 'compact'}
+		<p class="text-xs text-muted">
+			Compact usa <code class="rounded bg-surface-overlay px-1">auto-fit</code> — cambia el ancho del
+			panel o de la ventana para ver cómo reflowea (móvil → tablet → desktop).
+		</p>
+		<div class="grid gap-4 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)_minmax(0,1.25fr)]">
+			<div class="rounded-2xl border border-border bg-surface p-3">
+				<p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted">~ Mobile</p>
+				<QuickActionGrid
+					{actions}
+					layout="compact"
+					{size}
+					title="Shortcuts"
+					onaction={(id) => (last = id)}
+				/>
+			</div>
+			<div class="rounded-2xl border border-border bg-surface p-4">
+				<p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted">~ Tablet</p>
+				<QuickActionGrid
+					{actions}
+					layout="compact"
+					{size}
+					title="Shortcuts"
+					onaction={(id) => (last = id)}
+				/>
+			</div>
+			<div class="rounded-2xl border border-border bg-surface p-5">
+				<p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted">~ Desktop</p>
+				<QuickActionGrid
+					{actions}
+					layout="compact"
+					{size}
+					title="Shortcuts"
+					onaction={(id) => (last = id)}
+				/>
+			</div>
+		</div>
+	{:else}
+		<div class="mx-auto w-full max-w-2xl rounded-2xl border border-border bg-surface p-4 sm:p-5">
+			<QuickActionGrid
+				{actions}
+				layout={resolvedLayout}
+				columns={resolvedColumns}
+				{size}
+				title={example === 'workspace'
+					? 'Quick actions'
+					: example === 'create'
+						? 'Create new'
+						: example === 'list'
+							? 'Get started'
+							: example === 'emoji'
+								? 'Spaces'
+								: undefined}
+				description={example === 'workspace'
+					? 'Common things people do in this workspace'
+					: example === 'list'
+						? 'Pick a next step'
+						: undefined}
+				onaction={(id) => (last = id)}
+			/>
+		</div>
+	{/if}
+
+	{#if last}
+		<p class="text-xs text-muted">
+			Selected: <span class="font-medium text-primary">{last}</span>
+		</p>
+	{/if}
+</div>

package/dist/components/molecules/QuickActionGrid/QuickActionGridStory.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { QuickActionLayout, QuickActionSize } from './QuickActionGrid.svelte';
+interface Props {
+    example?: 'workspace' | 'create' | 'compact' | 'list' | 'emoji';
+    layout?: QuickActionLayout;
+    size?: QuickActionSize;
+    columns?: 2 | 3 | 4 | 5 | 6;
+}
+declare const QuickActionGridStory: import("svelte").Component<Props, {}, "">;
+type QuickActionGridStory = ReturnType<typeof QuickActionGridStory>;
+export default QuickActionGridStory;

package/dist/components/molecules/QuietHoursRow/QuietHoursRow.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/QuietHoursRow/QuietHoursRow.stories.js

@@ -0,0 +1,8 @@
+import QuietHoursRowStory from './QuietHoursRowStory.svelte';
+const meta = {
+    title: 'Molecules/QuietHoursRow',
+    component: QuietHoursRowStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/QuietHoursRow/QuietHoursRow.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import SettingsRow from '../SettingsRow/SettingsRow.svelte';
+	import TimePicker from '../TimePicker/TimePicker.svelte';
+	import type { TimeFormat } from '../TimePicker/TimePicker.svelte';
+	import Moon from '@lucide/svelte/icons/moon';
+
+	export interface QuietHoursValue {
+		enabled: boolean;
+		start: string;
+		end: string;
+	}
+
+	interface QuietHoursRowProps {
+		enabled?: boolean;
+		/** Start time as `HH:mm` (24h) */
+		start?: string;
+		/** End time as `HH:mm` (24h) */
+		end?: string;
+		format?: TimeFormat;
+		minuteStep?: number;
+		title?: string;
+		description?: string;
+		class?: string;
+		onchange?: (value: QuietHoursValue) => void;
+	}
+
+	let {
+		enabled = $bindable(false),
+		start = $bindable('22:00'),
+		end = $bindable('07:00'),
+		format = '24h',
+		minuteStep = 15,
+		title = 'Quiet hours',
+		description = 'Pause notifications during set hours.',
+		class: className = '',
+		onchange
+	}: QuietHoursRowProps = $props();
+
+	function emit() {
+		onchange?.({ enabled, start, end });
+	}
+</script>
+
+<div class={['w-full space-y-3 rounded-xl border border-border bg-surface-elevated p-4', className]}>
+	<SettingsRow
+		{title}
+		{description}
+		bind:checked={enabled}
+		variant="plain"
+		onchange={() => emit()}
+	/>
+
+	{#if enabled}
+		<div class="grid gap-3 border-t border-border pt-3 sm:grid-cols-2">
+			<TimePicker
+				label="Starts"
+				bind:value={start}
+				{format}
+				{minuteStep}
+				placeholder="Select start"
+				onchange={() => emit()}
+			/>
+			<TimePicker
+				label="Ends"
+				bind:value={end}
+				{format}
+				{minuteStep}
+				placeholder="Select end"
+				onchange={() => emit()}
+			/>
+		</div>
+		<p class="flex items-center gap-1.5 text-xs text-muted">
+			<Moon class="h-3.5 w-3.5 shrink-0" strokeWidth={2} aria-hidden="true" />
+			Notifications muted from {start} to {end}
+		</p>
+	{/if}
+</div>