@max-ts/svelte 0.2.0 → 0.3.0

package/dist/components/Calendar/Calendar.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+import { type DateValue, isEqualMonth } from '@internationalized/date';
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ButtonVariant } from '../../index.js';
+import type { WithoutChildrenOrChild } from '../../styles/index.js';
+
+import { Caption } from './Caption/index.js';
+import { Cell } from './Cell/index.js';
+import { Day } from './Day/index.js';
+import { Grid } from './Grid/index.js';
+import { GridBody } from './GridBody/index.js';
+import { GridHead } from './GridHead/index.js';
+import { GridRow } from './GridRow/index.js';
+import { HeadCell } from './HeadCell/index.js';
+import { Header } from './Header/index.js';
+import { Month } from './Month/index.js';
+import { Months } from './Months/index.js';
+import { Nav } from './Nav/index.js';
+import { NextButton } from './NextButton/index.js';
+import { PrevButton } from './PrevButton/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	value = $bindable(),
+	placeholder = $bindable(),
+	class: className,
+	weekdayFormat = 'short',
+	buttonVariant = 'ghost',
+	captionLayout = 'label',
+	locale = 'ru-RU',
+	months: monthsProp,
+	years,
+	monthFormat: monthFormatProp,
+	yearFormat = 'numeric',
+	day,
+	disableDaysOutsideMonth = false,
+	...restProps
+}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+	buttonVariant?: ButtonVariant;
+	captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+	months?: CalendarPrimitive.MonthSelectProps['months'];
+	years?: CalendarPrimitive.YearSelectProps['years'];
+	monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
+	yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
+	day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+} = $props();
+
+const monthFormat = $derived.by(() => {
+	if (monthFormatProp) return monthFormatProp;
+	if (captionLayout.startsWith('dropdown')) return 'short';
+	return 'long';
+});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class={[styles.calendar, className]}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Months>
+			<Nav>
+				<PrevButton variant={buttonVariant} />
+				<NextButton variant={buttonVariant} />
+			</Nav>
+			{#each months as month, monthIndex (month)}
+				<Month>
+					<Header>
+						<Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Header>
+					<Grid>
+						<GridHead>
+							<GridRow class={styles.gridRowHead}>
+								{#each weekdays as weekday (weekday)}
+									<HeadCell>
+										{weekday.slice(0, 2)}
+									</HeadCell>
+								{/each}
+							</GridRow>
+						</GridHead>
+						<GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<GridRow class={styles.gridRow}>
+									{#each weekDates as date (date)}
+										<Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<Day />
+											{/if}
+										</Cell>
+									{/each}
+								</GridRow>
+							{/each}
+						</GridBody>
+					</Grid>
+				</Month>
+			{/each}
+		</Months>
+	{/snippet}
+</CalendarPrimitive.Root>

package/dist/components/Calendar/Calendar.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type DateValue } from '@internationalized/date';
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ButtonVariant } from '../../index.js';
+import type { WithoutChildrenOrChild } from '../../styles/index.js';
+type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    months?: CalendarPrimitive.MonthSelectProps['months'];
+    years?: CalendarPrimitive.YearSelectProps['years'];
+    monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
+    yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
+    day?: Snippet<[{
+        day: DateValue;
+        outsideMonth: boolean;
+    }]>;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Calendar/Caption/Caption.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+import {
+	DateFormatter,
+	type DateValue,
+	getLocalTimeZone,
+} from '@internationalized/date';
+import type { ComponentProps } from 'svelte';
+import Calendar from '../Calendar.svelte';
+import { MonthSelect } from '../MonthSelect/index.js';
+import { YearSelect } from '../YearSelect/index.js';
+
+let {
+	captionLayout,
+	months,
+	monthFormat,
+	years,
+	yearFormat,
+	month,
+	locale,
+	placeholder = $bindable(),
+	monthIndex = 0,
+}: {
+	captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
+	months: ComponentProps<typeof MonthSelect>['months'];
+	monthFormat: ComponentProps<typeof MonthSelect>['monthFormat'];
+	years: ComponentProps<typeof YearSelect>['years'];
+	yearFormat: ComponentProps<typeof YearSelect>['yearFormat'];
+	month: DateValue;
+	placeholder: DateValue | undefined;
+	locale: string;
+	monthIndex: number;
+} = $props();
+
+function formatYear(date: DateValue) {
+	const dateObj = date.toDate(getLocalTimeZone());
+	if (typeof yearFormat === 'function')
+		return yearFormat(dateObj.getFullYear());
+	return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+}
+
+function formatMonth(date: DateValue) {
+	const dateObj = date.toDate(getLocalTimeZone());
+	if (typeof monthFormat === 'function')
+		return monthFormat(dateObj.getMonth() + 1);
+	return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+}
+</script>
+
+{#snippet monthSelect()}
+	<MonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet yearSelect()}
+	<YearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render monthSelect()}
+	{@render yearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render monthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render yearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}

package/dist/components/Calendar/Caption/Caption.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type DateValue } from '@internationalized/date';
+import type { ComponentProps } from 'svelte';
+import Calendar from '../Calendar.svelte';
+import { MonthSelect } from '../MonthSelect/index.js';
+import { YearSelect } from '../YearSelect/index.js';
+type $$ComponentProps = {
+    captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
+    months: ComponentProps<typeof MonthSelect>['months'];
+    monthFormat: ComponentProps<typeof MonthSelect>['monthFormat'];
+    years: ComponentProps<typeof YearSelect>['years'];
+    yearFormat: ComponentProps<typeof YearSelect>['yearFormat'];
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+};
+declare const Caption: import("svelte").Component<$$ComponentProps, {}, "placeholder">;
+type Caption = ReturnType<typeof Caption>;
+export default Caption;

package/dist/components/Calendar/Caption/index.js

@@ -0,0 +1 @@
+export { default as Caption } from './Caption.svelte';

package/dist/components/Calendar/Cell/Cell.svelte

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

package/dist/components/Calendar/Cell/Cell.svelte.d.ts

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

package/dist/components/Calendar/Cell/index.js

@@ -0,0 +1 @@
+export { default as Cell } from './Cell.svelte';

package/dist/components/Calendar/Cell/styles.css.js

@@ -0,0 +1,23 @@
+import { globalStyle, style, theme } from '../../../styles/index.js';
+const cell = style({
+    position: 'relative',
+    width: 'var(--cell-size)',
+    height: 'var(--cell-size)',
+    padding: 0,
+    textAlign: 'center',
+    fontSize: theme.fontSize.sm,
+    ':focus-within': {
+        zIndex: 20,
+    },
+});
+globalStyle(`${cell}:first-child[data-selected] [data-bits-day]`, {
+    borderTopLeftRadius: theme.borderRadius.md,
+    borderBottomLeftRadius: theme.borderRadius.md,
+});
+globalStyle(`${cell}:last-child[data-selected] [data-bits-day]`, {
+    borderTopRightRadius: theme.borderRadius.md,
+    borderBottomRightRadius: theme.borderRadius.md,
+});
+export default {
+    cell,
+};

package/dist/components/Calendar/Day/Day.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import { buttonVariants } from '../../Button/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	bind:ref
+	class={[buttonVariants.ghost, styles.day, className]}
+	{...restProps}
+/>

package/dist/components/Calendar/Day/Day.svelte.d.ts

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

package/dist/components/Calendar/Day/index.js

@@ -0,0 +1 @@
+export { default as Day } from './Day.svelte';

package/dist/components/Calendar/Day/styles.css.js

@@ -0,0 +1,55 @@
+import { globalStyle, style, theme } from '../../../styles/index.js';
+const day = style({
+    display: 'flex',
+    width: 'var(--cell-size)',
+    height: 'var(--cell-size)',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing[1],
+    padding: 0,
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    ':focus': {
+        position: 'relative',
+    },
+    selectors: {
+        '&[data-selected]': {
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.foreground.primary,
+        },
+        '&[data-today]': {
+            textDecoration: 'underline',
+            textUnderlineOffset: theme.spacing[1],
+            textDecorationThickness: 2,
+        },
+        '&[data-disabled]': {
+            color: theme.colors.text.secondary,
+            pointerEvents: 'none',
+            opacity: 0.5,
+        },
+        '&[data-unavailable]': {
+            color: theme.colors.text.secondary,
+            textDecoration: 'line-through',
+        },
+    },
+});
+globalStyle(`${day} > span`, {
+    fontSize: theme.fontSize.xs,
+    opacity: 0.7,
+});
+// globalStyle(`${day}[data-today][data-selected]`, {
+// 	textDecoration: 'underline',
+// });
+globalStyle(`${day}[data-today][data-disabled]`, {
+    color: theme.colors.text.hint,
+});
+globalStyle(`${day}[data-outside-month]:not([data-selected])`, {
+    color: theme.colors.text.hint,
+});
+globalStyle(`${day}[data-outside-month]:not([data-selected]):hover`, {
+    color: theme.colors.text.primary,
+});
+export default {
+    day,
+};

package/dist/components/Calendar/Grid/Grid.svelte

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

package/dist/components/Calendar/Grid/Grid.svelte.d.ts

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

package/dist/components/Calendar/Grid/index.js

@@ -0,0 +1 @@
+export { default as Grid } from './Grid.svelte';

package/dist/components/Calendar/Grid/styles.css.js

@@ -0,0 +1,12 @@
+import { style, theme } from '../../../styles/index.js';
+const grid = style({
+    marginTop: theme.spacing[4],
+    display: 'flex',
+    width: '100%',
+    borderCollapse: 'collapse',
+    flexDirection: 'column',
+    gap: theme.spacing[1],
+});
+export default {
+    grid,
+};

package/dist/components/Calendar/GridBody/GridBody.svelte

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

package/dist/components/Calendar/GridBody/GridBody.svelte.d.ts

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

package/dist/components/Calendar/GridBody/index.js

@@ -0,0 +1 @@
+export { default as GridBody } from './GridBody.svelte';

package/dist/components/Calendar/GridHead/GridHead.svelte

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

package/dist/components/Calendar/GridHead/GridHead.svelte.d.ts

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

package/dist/components/Calendar/GridHead/index.js

@@ -0,0 +1 @@
+export { default as GridHead } from './GridHead.svelte';

package/dist/components/Calendar/GridRow/GridRow.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={[styles.gridRow, className]} {...restProps} />

package/dist/components/Calendar/GridRow/GridRow.svelte.d.ts

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

package/dist/components/Calendar/GridRow/index.js

@@ -0,0 +1 @@
+export { default as GridRow } from './GridRow.svelte';

package/dist/components/Calendar/GridRow/styles.css.js

@@ -0,0 +1,8 @@
+import { style, theme } from '../../../styles/index.js';
+const gridRow = style({
+    display: 'flex',
+    columnGap: theme.spacing[1],
+});
+export default {
+    gridRow,
+};

package/dist/components/Calendar/HeadCell/HeadCell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+	bind:ref
+	class={[styles.headCell, className]}
+	{...restProps}
+/>

package/dist/components/Calendar/HeadCell/HeadCell.svelte.d.ts

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

package/dist/components/Calendar/HeadCell/index.js

@@ -0,0 +1 @@
+export { default as HeadCell } from './HeadCell.svelte';

package/dist/components/Calendar/HeadCell/styles.css.js

@@ -0,0 +1,11 @@
+import { style, theme } from '../../../styles/index.js';
+const headCell = style({
+    color: theme.colors.text.secondary,
+    width: 'var(--cell-size)',
+    borderRadius: theme.borderRadius.md,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+});
+export default {
+    headCell,
+};

package/dist/components/Calendar/Header/Header.svelte

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

package/dist/components/Calendar/Header/Header.svelte.d.ts

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

package/dist/components/Calendar/Header/index.js

@@ -0,0 +1 @@
+export { default as Header } from './Header.svelte';

package/dist/components/Calendar/Header/styles.css.js

@@ -0,0 +1,14 @@
+import { style, theme } from '../../../styles/index.js';
+const header = style({
+    display: 'flex',
+    height: 'var(--cell-size)',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.375rem',
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+});
+export default {
+    header,
+};

package/dist/components/Calendar/Heading/Heading.svelte

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

package/dist/components/Calendar/Heading/Heading.svelte.d.ts

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

package/dist/components/Calendar/Heading/index.js

@@ -0,0 +1 @@
+export { default as Heading } from './Heading.svelte';

package/dist/components/Calendar/Heading/styles.css.js

@@ -0,0 +1,10 @@
+import { style, theme } from '../../../styles/index.js';
+const heading = style({
+    paddingLeft: 'var(--cell-size)',
+    paddingRight: 'var(--cell-size)',
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+});
+export default {
+    heading,
+};

package/dist/components/Calendar/Month/Month.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../styles/index.js';
+
+let {
+	ref = $bindable(null),
+	children,
+	...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} style="display:flex;flex-direction:column;">
+	{@render children?.()}
+</div>

package/dist/components/Calendar/Month/Month.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../styles/index.js';
+declare const Month: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/Calendar/Month/index.js

@@ -0,0 +1 @@
+export { default as Month } from './Month.svelte';