rimecms 0.22.0

package/dist/panel/components/sections/page-layout/Page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		main: Snippet;
+		aside?: Snippet;
+	};
+	const { main, aside }: Props = $props();
+</script>
+
+<div class="rz-page" class:rz-page-with-aside={aside}>
+	<main>
+		{@render main()}
+	</main>
+
+	{#if aside}
+		<aside>
+			{@render aside()}
+		</aside>
+	{/if}
+</div>
+
+<style>
+	main {
+		container: main / inline-size;
+		--rz-page-gutter: var(--rz-size-20);
+	}
+
+	/* aside {
+		margin-left: var(--rz-size-72);
+	} */
+
+	.rz-page-with-aside {
+		display: grid;
+		grid-template-columns: 1fr var(--rz-size-xs);
+	}
+</style>

package/dist/panel/components/sections/page-layout/Page.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    main: Snippet;
+    aside?: Snippet;
+};
+declare const Page: import("svelte").Component<Props, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/panel/components/sections/unauthorized/Unauthorized.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Ban } from '@lucide/svelte';
+	import { t__ } from '../../../../core/i18n/index.js';
+</script>
+
+<div class="rz-unauthorized">
+	<Ban />
+	<p>{t__('errors.unauthorized')}</p>
+</div>
+
+<style>
+	.rz-unauthorized {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		justify-content: center;
+		align-items: center;
+		gap: var(--rz-size-3);
+		padding-bottom: 15vh;
+		p {
+			max-width: 300px;
+			text-align: center;
+		}
+	}
+	.rz-unauthorized p {
+		font-variation-settings: 'wght' 600;
+		font-weight: 600;
+		font-size: var(--rz-text-lg);
+	}
+</style>

package/dist/panel/components/sections/unauthorized/Unauthorized.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Unauthorized;
+type Unauthorized = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Unauthorized: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/panel/components/ui/breadcrumb/BreadCrumb.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { getConfigContext } from '../../../context/config.svelte.js';
+	import type { Route } from '../../../../types';
+	import { getContext } from 'svelte';
+	import Button from '../button/button.svelte';
+
+	const config = getConfigContext();
+	const titleContext = getContext<{ value: string }>('title');
+
+	const aria = $derived<Route[]>(page.data.aria);
+</script>
+
+<div class="rz-aria">
+	{#each aria as route}
+		{@const Icon = config.raw.icons[route.icon]}
+		{#if route.url}
+			<Button variant="text" icon={Icon} href={route.url}>
+				{route.title}
+			</Button>
+			<span>/</span>
+		{:else}
+			<span class="rz-aria__last">{route.title || titleContext.value}</span>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.rz-aria {
+		display: flex;
+		align-items: center;
+		gap: var(--rz-size-3);
+		> *,
+		> :global(.rz-button) {
+			opacity: 0.5;
+			transition: opacity 0.3s ease;
+		}
+		> *:hover,
+		> :global(.rz-button:hover) {
+			opacity: 1;
+		}
+	}
+	.rz-aria__last {
+		opacity: 1;
+	}
+</style>

package/dist/panel/components/ui/breadcrumb/BreadCrumb.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const BreadCrumb: import("svelte").Component<Record<string, never>, {}, "">;
+type BreadCrumb = ReturnType<typeof BreadCrumb>;
+export default BreadCrumb;

package/dist/panel/components/ui/button/button.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import type { Props } from './index.js';
+	
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		icon,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+{#snippet iconProp()}
+	{#if icon}
+		{@const IconProp = icon}
+		{#if variant === 'text'}
+			<div class="rz-button--text__icon">
+				<IconProp size="15" strokeWidth="2px" />
+			</div>
+		{:else}
+			<div class="rz-button__icon">
+				<IconProp size="14" strokeWidth="2px" />
+			</div>
+		{/if}
+	{/if}
+{/snippet}
+
+{#if href}
+	<a bind:this={ref} {href} class="rz-button rz-button--size-{size} rz-button--{variant} {className}" {...restProps}>
+		{@render iconProp()}
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class="rz-button rz-button--size-{size} rz-button--{variant} {className}"
+		{type}
+		{...restProps}
+	>
+		{@render iconProp()}
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	:root {
+
+		--rz-button-tl-radius: var(--rz-radius-md);
+		--rz-button-tr-radius: var(--rz-radius-md);
+		--rz-button-br-radius: var(--rz-radius-md);
+		--rz-button-bl-radius: var(--rz-radius-md);
+
+		/* Default variant */
+		--rz-button-default-bg: light-dark(hsl(var(--rz-gray-0)), hsl(var(--rz-gray-15)));
+		--rz-button-default-bg-hover: light-dark(hsl(var(--rz-gray-2)), hsl(var(--rz-gray-19)));
+		--rz-button-default-bg-disabled: light-dark(hsl(var(--rz-gray-3)), hsl(var(--rz-gray-12)));
+		--rz-button-default-fg: light-dark(hsl(var(--rz-gray-13)), hsl(var(--rz-gray-2)));
+		
+		/* Success variant */
+		--rz-button-success-bg: hsl(var(--rz-color-spot) / 1);
+		--rz-button-success-bg-hover: hsl(var(--rz-color-spot) / 0.6);
+		--rz-button-success-bg-disabled: hsl(var(--rz-color-spot) / 0.3);
+		--rz-button-success-fg: hsl(var(--rz-color-spot-fg) / 1);
+		
+		/* Outline variant */
+		--rz-button-outline-bg: transparent;
+		--rz-button-outline-fg: light-dark(hsl(var(--rz-gray-4)), hsl(var(--rz-gray-12))) ;
+		--rz-button-outline-border: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-8)));
+		--rz-button-outline-bg-hover: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-4)));
+		/* border-width */
+		--rz-button-outline-border-left-width: 1px;
+		--rz-button-outline-border-top-width: 1px;
+		--rz-button-outline-border-right-width: 1px;
+		--rz-button-outline-border-bottom-width: 1px;
+		
+		/* Ghost variant */
+		--rz-button-ghost-bg: transparent;
+		--rz-button-ghost-bg-hover: light-dark( hsl(var(--rz-gray-16)), hsl(var(--rz-gray-4)));
+		--rz-button-ghost-fg: hsl(var(--rz-color-fg));
+		
+		/* Secondary variant */
+		--rz-button-secondary-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
+		--rz-button-secondary-bg-hover: light-dark(
+			hsl(var(--rz-gray-16)),
+			color-mix( in hsl, white 3%, hsl(var(--rz-gray-3)))
+		);
+		--rz-button-secondary-fg: hsl(var(--rz-color-fg));
+
+		/* Link variant */
+		--rz-button-link-bg: transparent;
+		--rz-button-link-bg-hover: transparent;
+		--rz-button-link-fg: hsl(var(--rz-color-fg));
+
+		/* Text variant */
+		--rz-button-text-bg: transparent;
+		--rz-button-text-fg: hsl(var(--rz-color-fg) / 0.6);
+		--rz-button-text-fg-hover: hsl(var(--rz-color-fg) / 1);
+		--rz-button-text-fg-disabled: hsl(var(--rz-color-fg) / 0.4);
+	}
+
+	.rz-button {
+		flex-shrink: var(--rz-flex-shrink, unset);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--rz-button-tl-radius) var(--rz-button-tr-radius) var(--rz-button-br-radius) var(--rz-button-bl-radius);
+		white-space: nowrap;
+		font-variation-settings: 'wght' 500;
+		font-weight: 500;
+		transition-property: box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke;
+		transition-duration: 0.25s;
+		gap: var(--rz-size-2);
+		fill: currentColor;
+	}
+
+	.rz-button:focus-visible {
+		/* --rz-ring-offset: 1px; */
+		outline: none;
+		box-shadow:
+		0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
+		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+	}
+
+	.rz-button:disabled,
+	.rz-button[disabled='true'] {
+		opacity: 0.5;
+		cursor: no-drop !important;
+	}
+
+	/**************************************/
+	/* Sizes */
+	/**************************************/
+
+	.rz-button--size-default {
+		font-size: var(--rz-text-md);
+		height: var(--rz-size-9);
+		padding: var(--rz-size-2) var(--rz-size-4);
+	}
+
+	.rz-button--size-xs {
+		height: var(--rz-size-6);
+		padding: var(--rz-size-1) var(--rz-size-2);
+		font-size: var(--rz-text-2xs);
+		border-radius: var(--rz-radius-md);
+	}
+
+	.rz-button--size-sm {
+		font-size: var(--rz-text-md);
+		height: var(--rz-size-8);
+		padding: var(--rz-size-2) var(--rz-size-3);
+		border-radius: var(--rz-radius-md);
+	}
+
+	.rz-button--size-lg {
+		font-size: var(--rz-text-md);
+		height: var(--rz-size-12);
+		padding: var(--rz-size-2) var(--rz-size-8);
+		border-radius: var(--rz-radius-md);
+	}
+
+	.rz-button--size-xl {
+		height: var(--rz-size-14);
+		font-size: var(--rz-text-md);
+		padding: var(--rz-size-2) var(--rz-size-8);
+		border-radius: var(--rz-radius-md);
+	}
+
+	.rz-button--size-icon {
+		border-radius: var(--rz-radius-lg);
+		height: var(--rz-size-9);
+		width: var(--rz-size-9);
+		padding: var(--rz-size-1);
+	}
+
+	.rz-button--size-icon-sm {
+		height: var(--rz-size-8);
+		width: var(--rz-size-8);
+	}
+
+	/**************************************/
+	/* Variants */
+	/**************************************/
+
+	/** Default */
+	.rz-button--default {
+		background-color: var(--rz-button-default-bg);
+		color: var(--rz-button-default-fg);
+		&:hover:not(:disabled) {
+			background-color: var(--rz-button-default-bg-hover);
+		}
+		&:disabled {
+			background-color: var(--rz-button-default-bg-disabled);
+		}
+	}
+
+	/** Success */
+	.rz-button--success {
+		background-color: var(--rz-button-success-bg);
+		color: var(--rz-button-success-fg);
+		&:hover {
+			background-color: var(--rz-button-success-bg-hover);
+		}
+		&:disabled:not(:disabled) {
+			background-color: var(--rz-button-success-bg-disabled);
+		}
+	}
+
+	/** Outline */
+	.rz-button--outline {
+		border-style: solid;
+		border-color: var(--rz-button-outline-border);
+		
+		border-left-width: var(--rz-button-outline-border-left-width);
+		border-top-width: var(--rz-button-outline-border-top-width);
+		border-right-width: var(--rz-button-outline-border-right-width);
+		border-bottom-width: var(--rz-button-outline-border-bottom-width);
+		
+		background-color: var(--rz-button-outline-bg);
+		color: var(--rz-button-outline-fg);
+		
+		&:hover:not(:disabled) {
+			/* border-color: var(--rz-button-outline-border-hover); */
+			background-color: var(--rz-button-outline-bg-hover);
+		}
+	}
+
+	/** Ghost */
+	.rz-button--ghost {
+		background-color: var(--rz-button-ghost-bg);
+		color: var(--rz-button-ghost-fg);
+
+		&:hover:not(:disabled) {
+			background-color: var(--rz-button-ghost-bg-hover);
+		}
+	}
+
+	/** Secondary */
+	.rz-button--secondary {
+		background-color: var(--rz-button-secondary-bg);
+		color: var(--rz-button-secondary-fg);
+
+		&:hover:not(:disabled) {
+			background-color: var(--rz-button-secondary-bg-hover);
+		}
+	}
+
+	/** Link */
+	.rz-button--link {
+		background: var(--rz-button-link-bg);
+		color: var(--rz-button-link-fg);
+		text-underline-offset: 4px;
+
+		&:hover:not(:disabled) {
+			background-color: var(--rz-button-link-bg-hover);
+			text-decoration: underline;
+		}
+	}
+
+	/** Text */
+	.rz-button--text {
+		padding-left: 0;
+		padding-right: 0;
+		background-color: var(--rz-button-text-bg);
+		color: var(--rz-button-text-fg);
+		font-variation-settings: 'wght' 600;
+		font-weight: 600;
+		gap: var(-rz-size-2);
+
+		&:hover {
+			color: var(--rz-button-text-fg-hover);
+		}
+
+		&:disabled {
+			color: var(--rz-button-text-fg-disabled);
+		}
+	}
+
+	/**************************************/
+	/* With Icon */
+	/**************************************/
+
+	.rz-button__icon,
+	.rz-button--text__icon {
+		display: grid;
+		place-content: center;
+		border-radius: var(--rz-radius-sm);
+		height: var(--rz-size-5);
+		width: var(--rz-size-5);
+	}
+</style>

package/dist/panel/components/ui/button/button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './index.js';
+declare const Button: import("svelte").Component<Props, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/panel/components/ui/button/index.d.ts

@@ -0,0 +1,15 @@
+import type { WithElementRef } from 'bits-ui';
+import Root from './button.svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type PrimitiveAnchorAttributes = WithElementRef<HTMLAnchorAttributes>;
+type PrimitiveButtonAttributes = WithElementRef<HTMLButtonAttributes>;
+export type ButtonVariant = 'success' | 'default' | 'ghost' | 'link' | 'text' | 'secondary' | 'outline';
+export type ButtonSize = 'default' | 'xs' | 'sm' | 'lg' | 'xl' | 'icon' | 'icon-sm';
+type Props = PrimitiveButtonAttributes & PrimitiveAnchorAttributes & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: any;
+    disabled?: boolean;
+};
+export { Root, type Props, Root as Button, type Props as ButtonProps };

package/dist/panel/components/ui/button/index.js

@@ -0,0 +1,4 @@
+import Root from './button.svelte';
+export { Root, 
+//
+Root as Button };

package/dist/panel/components/ui/calendar/calendar-cell.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell bind:ref class="rz-calendar-cell {className}" {...restProps} />

package/dist/panel/components/ui/calendar/calendar-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarCell: import("svelte").Component<CalendarPrimitive.CellProps, {}, "ref">;
+type CalendarCell = ReturnType<typeof CalendarCell>;
+export default CalendarCell;

package/dist/panel/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day bind:ref class="rz-calendar-day {className}" {...restProps} />

package/dist/panel/components/ui/calendar/calendar-day.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarDay: import("svelte").Component<CalendarPrimitive.DayProps, {}, "ref">;
+type CalendarDay = ReturnType<typeof CalendarDay>;
+export default CalendarDay;

package/dist/panel/components/ui/calendar/calendar-grid-body.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={className} {...restProps} />

package/dist/panel/components/ui/calendar/calendar-grid-body.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGridBody: import("svelte").Component<CalendarPrimitive.GridBodyProps, {}, "ref">;
+type CalendarGridBody = ReturnType<typeof CalendarGridBody>;
+export default CalendarGridBody;

package/dist/panel/components/ui/calendar/calendar-grid-head.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={className} {...restProps} />

package/dist/panel/components/ui/calendar/calendar-grid-head.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGridHead: import("svelte").Component<CalendarPrimitive.GridHeadProps, {}, "ref">;
+type CalendarGridHead = ReturnType<typeof CalendarGridHead>;
+export default CalendarGridHead;

package/dist/panel/components/ui/calendar/calendar-grid-row.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class="rz-calendar-grid-row {className}" {...restProps} />

package/dist/panel/components/ui/calendar/calendar-grid-row.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGridRow: import("svelte").Component<CalendarPrimitive.GridRowProps, {}, "ref">;
+type CalendarGridRow = ReturnType<typeof CalendarGridRow>;
+export default CalendarGridRow;

package/dist/panel/components/ui/calendar/calendar-grid.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid bind:ref class="rz-calendar-grid {className}" {...restProps} />

package/dist/panel/components/ui/calendar/calendar-grid.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGrid: import("svelte").Component<CalendarPrimitive.GridProps, {}, "ref">;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/panel/components/ui/calendar/calendar-head-cell.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell bind:ref class="rz-calendar-head-cell {className}" {...restProps} />

package/dist/panel/components/ui/calendar/calendar-head-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarHeadCell: import("svelte").Component<CalendarPrimitive.HeadCellProps, {}, "ref">;
+type CalendarHeadCell = ReturnType<typeof CalendarHeadCell>;
+export default CalendarHeadCell;

package/dist/panel/components/ui/calendar/calendar-header.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header bind:ref class="rz-calendar-header {className}" {...restProps} />

package/dist/panel/components/ui/calendar/calendar-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarHeader: import("svelte").Component<CalendarPrimitive.HeaderProps, {}, "ref">;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;

package/dist/panel/components/ui/calendar/calendar-heading.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading bind:ref class="rz-calendar-heading {className}" {...restProps} />

package/dist/panel/components/ui/calendar/calendar-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarHeading: import("svelte").Component<CalendarPrimitive.HeadingProps, {}, "ref">;
+type CalendarHeading = ReturnType<typeof CalendarHeading>;
+export default CalendarHeading;

package/dist/panel/components/ui/calendar/calendar-months.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	type PrimitiveDivAttributes = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: PrimitiveDivAttributes = $props();
+</script>
+
+<div bind:this={ref} class="rz-calendar-months {className}" {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.rz-calendar-months {
+		margin-top: var(--rz-size-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--rz-size-4);
+	}
+
+	@media (min-width: 640px) {
+		.rz-calendar-months {
+			flex-direction: row;
+		}
+	}
+</style>

package/dist/panel/components/ui/calendar/calendar-months.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type PrimitiveDivAttributes = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const CalendarMonths: import("svelte").Component<PrimitiveDivAttributes, {}, "ref">;
+type CalendarMonths = ReturnType<typeof CalendarMonths>;
+export default CalendarMonths;

package/dist/panel/components/ui/calendar/calendar-next-button.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { ChevronRight } from '@lucide/svelte';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: CalendarPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRight size={16} />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class="rz-calendar-next-button rz-button rz-button--outline {className}"
+	children={children || Fallback}
+	{...restProps}
+/>

package/dist/panel/components/ui/calendar/calendar-next-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarNextButton: import("svelte").Component<CalendarPrimitive.NextButtonProps, {}, "ref">;
+type CalendarNextButton = ReturnType<typeof CalendarNextButton>;
+export default CalendarNextButton;