rimecms 0.22.0

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

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

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

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

package/dist/panel/components/ui/calendar/calendar.css

@@ -0,0 +1,187 @@
+.rz-calendar {
+	background-color: var(--rz-popover-bg);
+	border-radius: var(--rz-radius-lg);
+	padding: var(--rz-size-3);
+}
+
+.rz-date__popover-content {
+	border-radius: var(--rz-radius-md);
+}
+/**************************************/
+/* Cell
+/**************************************/
+
+.rz-calendar-cell {
+	position: relative;
+	padding: 0;
+	flex: 1;
+	text-align: center;
+	font-size: var(--rz-text-sm);
+	&:has([data-selected][data-outside-month]) {
+		background-color: hsl(var(--rz-color-spot) / 0.5);
+	}
+	&:focus-within {
+		position: relative;
+		z-index: 20;
+	}
+	&:has([data-selected]) {
+		background-color: hsl(var(--rz-color-spot));
+		border-radius: var(--rz-radius-md);
+	}
+}
+
+/**************************************/
+/* Day
+/**************************************/
+
+.rz-calendar-day {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--rz-text-sm);
+	border-radius: var(--rz-radius-md);
+	white-space: nowrap;
+	transition: colors 0.2s ease-in-out;
+	width: var(--rz-size-8);
+	height: var(--rz-size-8);
+	padding: 0;
+	font-variation-settings: 'wght' 400;
+	font-weight: 400;
+}
+
+.rz-calendar-day:focus-visible {
+	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-calendar-day:hover {
+	background-color: hsl(var(--rz-gray-13));
+	color: hsl(var(--rz-color-fg));
+}
+
+.rz-calendar-day[data-today]:not([data-selected]) {
+	border: 1px solid hsl(var(--rz-color-border));
+	color: hsl(var(--rz-color-fg));
+}
+
+.rz-calendar-day[data-selected] {
+	background-color: hsl(var(--rz-color-spot));
+	color: hsl(var(--rz-color-spot-fg));
+	opacity: 1;
+}
+
+.rz-calendar-day[data-selected]:hover,
+.rz-calendar-day[data-selected]:focus {
+	background-color: hsl(var(--rz-color-spot));
+	color: hsl(var(--rz-color-spot-fg));
+}
+
+.rz-calendar-day[data-disabled] {
+	color: hsl(var(--rz-color-fg) / 0.7);
+	opacity: 0.5;
+}
+
+.rz-calendar-day[data-unavailable] {
+	color: hsl(var(--rz-color-fg) / 0.5);
+	text-decoration: line-through;
+}
+
+.rz-calendar-day[data-outside-month] {
+	color: hsl(var(--rz-color-fg) / 0.7);
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.rz-calendar-day[data-outside-month][data-selected] {
+	background-color: hsl(var(--rz-color-spot) / 0.5);
+	color: hsl(var(--rz-color-fg));
+	opacity: 0.3;
+}
+
+/**************************************/
+/* Grid
+/**************************************/
+
+.rz-calendar-grid {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+/**************************************/
+/* Grid-row
+/**************************************/
+
+.rz-calendar-grid-row {
+	display: flex;
+	width: 100%;
+	margin-top: var(--rz-size-2);
+	gap: var(--rz-size-1);
+}
+
+/**************************************/
+/* Head
+/**************************************/
+
+.rz-calendar-header {
+	position: relative;
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: space-between;
+	padding-top: var(--rz-size-1);
+}
+
+/**************************************/
+/* Head-cell
+/**************************************/
+
+.rz-calendar-head-cell {
+	color: hsl(var(--rz-color-fg) / 0.7);
+	flex: 1;
+	font-size: var(--rz-text-xs);
+	font-variation-settings: 'wght' 400;
+	font-weight: 400;
+}
+
+/**************************************/
+/* Heading
+/**************************************/
+
+.rz-calendar-heading {
+	font-size: var(--rz-text-sm);
+	font-variation-settings: 'wght' 500;
+	font-weight: 500;
+}
+
+/**************************************/
+/* Next / Prev
+/**************************************/
+
+/** Next */
+.rz-calendar-next-button {
+	height: var(--rz-size-7);
+	width: var(--rz-size-7);
+	background-color: transparent;
+	padding: 0;
+	opacity: 0.5;
+	transition: opacity 0.2s ease;
+}
+
+.rz-calendar-next-button:hover {
+	opacity: 1;
+}
+
+/** Prev */
+.rz-calendar-prev-button {
+	height: var(--rz-size-7);
+	width: var(--rz-size-7);
+	background-color: transparent;
+	padding: 0;
+	opacity: 0.5;
+}
+
+.rz-calendar-prev-button:hover {
+	opacity: 1;
+}

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import * as Calendar from './index.js';
+	import './calendar.css';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = 'short',
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+</script>
+
+<CalendarPrimitive.Root
+	bind:ref
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class="rz-calendar {className}"
+	{...restProps as any}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header>
+			<Calendar.PrevButton />
+			<Calendar.Heading />
+			<Calendar.NextButton />
+		</Calendar.Header>
+		<Calendar.Months>
+			{#each months as month, index (index)}
+				<Calendar.Grid>
+					<Calendar.GridHead>
+						<Calendar.GridRow>
+							{#each weekdays as weekday, index (index)}
+								<Calendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as weekDates, index (index)}
+							<Calendar.GridRow>
+								{#each weekDates as date, index (index)}
+									<Calendar.Cell {date} month={month.value}>
+										<Calendar.Day />
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>

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

@@ -0,0 +1,6 @@
+import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+import * as Calendar from './index.js';
+import './calendar.css';
+declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "value" | "placeholder" | "ref">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

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

@@ -0,0 +1,14 @@
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Root as Calendar };

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

@@ -0,0 +1,16 @@
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, 
+//
+Root as Calendar };

package/dist/panel/components/ui/card/card-content.svelte

@@ -0,0 +1,21 @@
+<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-card-content {className}" {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.rz-card-content {
+		padding: var(--rz-size-6);
+		padding-top: 0;
+	}
+	.rz-card-content > :global(* + *) {
+		margin-top: var(--rz-size-4);
+	}
+</style>

package/dist/panel/components/ui/card/card-content.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 CardContent: import("svelte").Component<PrimitiveDivAttributes, {}, "ref">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

package/dist/panel/components/ui/card/card-description.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type PrimitiveElementAttributes = WithElementRef<HTMLAttributes<HTMLElement>>;
+	let { ref = $bindable(null), class: className, children, ...restProps }: PrimitiveElementAttributes = $props();
+</script>
+
+<p bind:this={ref} class="rz-card-description {className}" {...restProps}>
+	{@render children?.()}
+</p>
+
+<style>
+	.rz-card-description {
+		font-size: var(--rz-text-sm);
+		color: hsl(var(--rz-color-fr) / 0.7);
+	}
+</style>

package/dist/panel/components/ui/card/card-description.svelte.d.ts

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

package/dist/panel/components/ui/card/card-footer.svelte

@@ -0,0 +1,21 @@
+<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-card-footer {className}" {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.rz-card-footer {
+		display: flex;
+		gap: var(--rz-size-3);
+		align-items: center;
+		padding: var(--rz-size-6);
+		padding-top: 0;
+	}
+</style>

package/dist/panel/components/ui/card/card-footer.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 CardFooter: import("svelte").Component<PrimitiveDivAttributes, {}, "ref">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

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

@@ -0,0 +1,19 @@
+<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-card-header {className}" {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.rz-card-header {
+		display: flex;
+		gap: var(--rz-size-1-5);
+		padding: var(--rz-size-6);
+	}
+</style>

package/dist/panel/components/ui/card/card-header.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 CardHeader: import("svelte").Component<PrimitiveDivAttributes, {}, "ref">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/panel/components/ui/card/card-title.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { CardHeadingLevel } from './index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	type PrimitiveDivAttributes = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: PrimitiveDivAttributes & {
+		level?: CardHeadingLevel;
+	} = $props();
+</script>
+
+<div role="heading" aria-level={level} bind:this={ref} class="rz-card-title {className}" {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.rz-card-title {
+		font-variation-settings: 'wght' 600;
+		font-weight: 600;
+	}
+</style>

package/dist/panel/components/ui/card/card-title.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { WithElementRef } from 'bits-ui';
+import type { CardHeadingLevel } from './index.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type PrimitiveDivAttributes = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+type $$ComponentProps = PrimitiveDivAttributes & {
+    level?: CardHeadingLevel;
+};
+declare const CardTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

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

@@ -0,0 +1,24 @@
+<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-card {className}" {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	:root{
+		--rz-card-color-bg: hsl(var(--rz-color-bg));
+	}
+	.rz-card {
+		width: var(--rz-card-width, auto);
+		background-color: var(--rz-card-color-bg);
+		border-radius: var(--rz-radius-lg);
+		border: var(--rz-border);
+	}
+</style>

package/dist/panel/components/ui/card/card.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 Card: import("svelte").Component<PrimitiveDivAttributes, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

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

@@ -0,0 +1,8 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+export { Root, Content, Description, Footer, Header, Title, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle };
+export type CardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

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

@@ -0,0 +1,9 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+export { Root, Content, Description, Footer, Header, Title, 
+//
+Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle };

package/dist/panel/components/ui/card-document/card-document.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { GenericDoc } from '../../../../types';
+	import UploadThumbCell from '../../sections/collection/upload-thumb-cell/UploadThumbCell.svelte';
+
+	type Props = { doc: GenericDoc };
+	const { doc }: Props = $props();
+
+	const hasPreview = $derived(doc.mimeType && doc.mimeType.includes('image'));
+	const thumbnailUrl = $derived.by(() => {
+		if (doc.mimeType && doc.mimeType.includes('image')) {
+			return doc._thumbnail;
+		}
+		return null;
+	});
+</script>
+
+<div class="rz-document-card">
+	<div class="rz-document-card__preview">
+		{#if hasPreview}
+			<UploadThumbCell mimeType={doc.mimeType} url={thumbnailUrl} />
+		{/if}
+	</div>
+
+	<div class="rz-document-card__body">
+		<p class="rz-document-card__title">
+			{doc.title}
+		</p>
+
+		<div class="rz-document-card__metadata">
+			{#each ['filesize', 'mimeType'] as key, index (index)}
+				<p>{doc[key]}</p>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	/** */
+	:root {
+		--rz-card-hover-bg: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-1)));
+	}
+
+	.rz-document-card {
+		border: var(--rz-border);
+		background-color: var(--rz-card-bg);
+		border-radius: var(--rz-radius-lg);
+		aspect-ratio: 4 / 5;
+		width: 100%;
+	}
+
+	.rz-document-card:hover {
+		background-color: var(--rz-card-hover-bg);
+	}
+
+	.rz-document-card :global(.rz-upload-preview-cell) {
+		width: 100%;
+		height: 100%;
+		aspect-ratio: 5/4;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+		padding: var(--rz-size-1);
+
+		> div {
+			border-radius: var(--rz-radius-sm);
+			overflow: hidden;
+		}
+	}
+
+	.rz-document-card__title {
+		margin-top: var(--rz-size-2);
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		word-break: break-all;
+		text-align: left;
+		font-size: var(--rz-text-xs);
+		font-variation-settings: 'wght' 700;
+		font-weight: 700;
+	}
+
+	.rz-document-card__body {
+		display: block;
+		text-align: left;
+		padding: 0 0.6rem 0.6rem 0.6rem;
+	}
+
+	.rz-document-card__metadata {
+		font-size: var(--rz-text-xs);
+		opacity: 0.6;
+	}
+</style>

package/dist/panel/components/ui/card-document/card-document.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { GenericDoc } from '../../../../types';
+type Props = {
+    doc: GenericDoc;
+};
+declare const CardDocument: import("svelte").Component<Props, {}, "">;
+type CardDocument = ReturnType<typeof CardDocument>;
+export default CardDocument;