breaking: rename Date to Day in Calendar components (#210)

.changeset/brown-kangaroos-warn.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+breaking: rename `Date` to `Day` in Calendar components 

content/components/calendar.md

@@ -44,7 +44,7 @@ description: Displays dates and days of the week, facilitating date-related inte
 					<Calendar.GridRow>
 						{#each weekDates as date}
 							<Calendar.Cell {date}>
-								<Calendar.Date {date} month={month.value} />
+								<Calendar.Day {date} month={month.value} />
 							</Calendar.Cell>
 						{/each}
 					</Calendar.GridRow>

content/components/date-picker.md

@@ -54,7 +54,7 @@ description: Facilitates the selection of dates through an input and calendar-ba
 							<DatePicker.GridRow>
 								{#each weekDates as date}
 									<DatePicker.Cell {date}>
-										<DatePicker.Date {date} month={month.value} />
+										<DatePicker.Day {date} month={month.value} />
 									</DatePicker.Cell>
 								{/each}
 							</DatePicker.GridRow>

content/components/date-range-picker.md

@@ -54,7 +54,7 @@ description: Facilitates the selection of date ranges through an input and calen
 							<DateRangePicker.GridRow>
 								{#each weekDates as date}
 									<DateRangePicker.Cell {date}>
-										<DateRangePicker.Date {date} month={month.value} />
+										<DateRangePicker.Day {date} month={month.value} />
 									</DateRangePicker.Cell>
 								{/each}
 							</DateRangePicker.GridRow>

content/components/range-calendar.md

@@ -43,7 +43,7 @@ description: Presents a calendar view tailored for selecting date ranges.
 					<RangeCalendar.GridRow>
 						{#each weekDates as date}
 							<RangeCalendar.Cell {date}>
-								<RangeCalendar.Date {date} month={month.value} />
+								<RangeCalendar.Day {date} month={month.value} />
 							</RangeCalendar.Cell>
 						{/each}
 					</RangeCalendar.GridRow>

package.json

@@ -92,7 +92,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.64.4",
+		"@melt-ui/svelte": "0.64.5",
 		"nanoid": "^5.0.4"
 	},
 	"peerDependencies": {

src/components/demos/calendar-demo.svelte

@@ -52,7 +52,7 @@
 									{date}
 									class="relative !p-0 text-center text-sm sq-10"
 								>
-									<Calendar.Date
+									<Calendar.Day
 										{date}
 										month={month.value}
 										class="group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent bg-transparent p-0 text-sm font-normal text-foreground sq-10 hover:border-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through"
@@ -61,7 +61,7 @@
 											class="absolute top-[5px] hidden rounded-full bg-foreground sq-1 group-data-[today]:block group-data-[selected]:bg-background"
 										/>
 										{date.day}
-									</Calendar.Date>
+									</Calendar.Day>
 								</Calendar.Cell>
 							{/each}
 						</Calendar.GridRow>

src/components/demos/date-picker-demo.svelte

@@ -74,7 +74,7 @@
 												{date}
 												class="relative !p-0 text-center text-sm sq-10"
 											>
-												<DatePicker.Date
+												<DatePicker.Day
 													{date}
 													month={month.value}
 													class="group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent bg-transparent p-0 text-sm font-normal text-foreground transition-all sq-10 hover:border-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through"
@@ -83,7 +83,7 @@
 														class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
 													/>
 													{date.day}
-												</DatePicker.Date>
+												</DatePicker.Day>
 											</DatePicker.Cell>
 										{/each}
 									</DatePicker.GridRow>

src/components/demos/date-range-picker-demo.svelte

@@ -95,7 +95,7 @@
 												{date}
 												class="relative m-0 !p-0 text-center text-sm sq-10"
 											>
-												<DateRangePicker.Date
+												<DateRangePicker.Day
 													{date}
 													month={month.value}
 													class={cn(
@@ -106,7 +106,7 @@
 														class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
 													/>
 													{date.day}
-												</DateRangePicker.Date>
+												</DateRangePicker.Day>
 											</DateRangePicker.Cell>
 										{/each}
 									</DateRangePicker.GridRow>

src/components/demos/range-calendar-demo.svelte

@@ -48,7 +48,7 @@
 									{date}
 									class="relative m-0 !p-0 text-center text-sm sq-10"
 								>
-									<RangeCalendar.Date
+									<RangeCalendar.Day
 										{date}
 										month={month.value}
 										class={cn(
@@ -59,7 +59,7 @@
 											class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
 										/>
 										{date.day}
-									</RangeCalendar.Date>
+									</RangeCalendar.Day>
 								</RangeCalendar.Cell>
 							{/each}
 						</RangeCalendar.GridRow>

src/content/api-reference/calendar.ts

@@ -175,9 +175,9 @@ export const cell: APISchema<Calendar.CellProps> = {
 	]
 };
 
-export const date: APISchema<Calendar.DateProps> = {
-	title: "Date",
-	description: "A date in the calendar grid.",
+export const day: APISchema<Calendar.DayProps> = {
+	title: "Day",
+	description: "A day in the calendar grid.",
 	props: {
 		asChild,
 		date: {
@@ -238,8 +238,8 @@ export const date: APISchema<Calendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "calendar-date",
-			description: "Present on the date element."
+			name: "calendar-day",
+			description: "Present on the day element."
 		}
 	]
 };
@@ -404,7 +404,7 @@ export const calendar = [
 	nextButton,
 	prevButton,
 	cell,
-	date,
+	day,
 	grid,
 	gridBody,
 	gridHead,

src/content/api-reference/date-picker.ts

@@ -20,7 +20,7 @@ import {
 	heading,
 	nextButton,
 	prevButton,
-	date,
+	day,
 	grid
 } from "./calendar";
 import { content, trigger } from "./popover";
@@ -310,5 +310,5 @@ export const datePicker = [
 	headCell,
 	gridBody,
 	cell,
-	date
+	day
 ];

src/content/api-reference/date-range-picker.ts

@@ -20,7 +20,7 @@ import {
 	heading,
 	nextButton,
 	prevButton,
-	date,
+	day,
 	grid
 } from "./range-calendar";
 import { content, trigger } from "./popover";
@@ -309,5 +309,5 @@ export const dateRangePicker = [
 	headCell,
 	gridBody,
 	cell,
-	date
+	day
 ];

src/content/api-reference/range-calendar.ts

@@ -174,9 +174,9 @@ export const cell: APISchema<RangeCalendar.CellProps> = {
 	]
 };
 
-export const date: APISchema<RangeCalendar.DateProps> = {
-	title: "Date",
-	description: "A date in the calendar grid.",
+export const day: APISchema<RangeCalendar.DayProps> = {
+	title: "Day",
+	description: "A day in the calendar grid.",
 	props: {
 		asChild,
 		date: {
@@ -250,8 +250,8 @@ export const date: APISchema<RangeCalendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "calendar-date",
-			description: "Present on the date element."
+			name: "calendar-day",
+			description: "Present on the day element."
 		}
 	]
 };
@@ -386,7 +386,7 @@ export const rangeCalendar = [
 	nextButton,
 	prevButton,
 	cell,
-	date,
+	day,
 	grid,
 	gridBody,
 	gridHead,

src/lib/bits/calendar/_export.types.ts

@@ -10,10 +10,10 @@ export type {
 	HeadCellProps as CalendarHeadCellProps,
 	GridHeadProps as CalendarGridHeadProps,
 	HeaderProps as CalendarHeaderProps,
-	DateProps as CalendarDateProps,
+	DayProps as CalendarDayProps,
 	//
 	Events as CalendarEvents,
 	PrevButtonEvents as CalendarPrevButtonEvents,
 	NextButtonEvents as CalendarNextButtonEvents,
-	DateEvents as CalendarDateEvents
+	DayEvents as CalendarDayEvents
 } from "./types.js";

src/lib/bits/calendar/_types.ts

@@ -79,7 +79,7 @@ type GridBodyProps = AsChild;
 
 type GridRowProps = AsChild;
 
-type BaseDateProps = Expand<
+type BaseDayProps = Expand<
 	{
 		/**
 		 * The date value of the cell.
@@ -93,9 +93,9 @@ type BaseDateProps = Expand<
 	} & AsChild
 >;
 
-type CellProps = Expand<Omit<BaseDateProps, "month">>;
+type CellProps = Expand<Omit<BaseDayProps, "month">>;
 
-type DateProps = Expand<BaseDateProps>;
+type DayProps = Expand<BaseDayProps>;
 
 export type {
 	Props,
@@ -109,5 +109,5 @@ export type {
 	GridBodyProps,
 	GridRowProps,
 	CellProps,
-	DateProps
+	DayProps
 };

src/lib/bits/calendar/components/calendar-date.svelte → src/lib/bits/calendar/components/calendar-day.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { DateEvents, DateProps } from "../types.js";
+	import type { DayEvents, DayProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
-	type $$Props = DateProps;
-	type $$Events = DateEvents;
+	type $$Props = DayProps;
+	type $$Events = DayEvents;
 
 	export let date: $$Props["date"];
 	export let month: $$Props["month"];
@@ -15,12 +15,12 @@
 		elements: { cell },
 		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
 	} = getCtx();
-	const attrs = getAttrs("date");
 
-	$: builder = $cell(date, month);
+	const attrs = getAttrs("day");
+	const dispatch = createDispatcher();
 
+	$: builder = $cell(date, month);
 	$: Object.assign(builder, attrs);
-	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,

src/lib/bits/calendar/ctx.ts

@@ -13,7 +13,7 @@ const PARTS = [
 	"next-button",
 	"heading",
 	"grid",
-	"date",
+	"day",
 	"header",
 	"grid-head",
 	"head-cell",

src/lib/bits/calendar/index.ts

@@ -1,5 +1,5 @@
 export { default as Root } from "./components/calendar.svelte";
-export { default as Date } from "./components/calendar-date.svelte";
+export { default as Day } from "./components/calendar-day.svelte";
 export { default as Grid } from "./components/calendar-grid.svelte";
 export { default as GridBody } from "./components/calendar-grid-body.svelte";
 export { default as Cell } from "./components/calendar-cell.svelte";

src/lib/bits/calendar/types.ts

@@ -32,7 +32,7 @@ type GridRowProps = I.GridRowProps & HTMLAttributes<HTMLTableRowElement>;
 
 type CellProps = I.CellProps & HTMLTdAttributes;
 
-type DateProps = I.DateProps & HTMLDivAttributes;
+type DayProps = I.DayProps & HTMLDivAttributes;
 
 /**
  * Events
@@ -46,7 +46,7 @@ type PrevButtonEvents = ButtonEvents;
 
 type NextButtonEvents = ButtonEvents;
 
-type DateEvents = {
+type DayEvents = {
 	click: CustomEventHandler<MouseEvent, HTMLDivElement>;
 };
 
@@ -66,10 +66,10 @@ export type {
 	HeadCellProps,
 	GridHeadProps,
 	HeaderProps,
-	DateProps,
+	DayProps,
 	//
 	Events,
 	PrevButtonEvents,
 	NextButtonEvents,
-	DateEvents
+	DayEvents
 };