next: docs

.github/workflows/preview-release.yml

@@ -3,6 +3,7 @@ on:
     pull_request:
         types: [ready_for_review, synchronize, opened, labeled]
         paths: [packages/**]
+    workflow_dispatch:
 
 jobs:
     preview-release:

sites/docs/src/lib/content/api-reference/extended-types/shared/date-range-change-fn.md

@@ -0,0 +1,3 @@
+```ts
+(date: DateRange) => void
+```

sites/docs/src/lib/content/api-reference/extended-types/shared/date-range.md

@@ -0,0 +1,8 @@
+```ts
+import type { DateValue } from "@internationalized/date";
+
+type DateRange = {
+	start: DateValue | undefined;
+	end: DateValue | undefined;
+};
+```

sites/docs/src/lib/content/api-reference/helpers.ts

@@ -7,6 +7,8 @@ import OnEscapeKeydown from "./extended-types/shared/on-escape-keydown.md";
 import EscapeKeydownBehavior from "./extended-types/shared/escape-keydown-behavior.md";
 import Dir from "./extended-types/shared/dir.md";
 import To from "./extended-types/portal/to.md";
+import DateRange from "./extended-types/shared/date-range.md";
+import DateRangeChangeFn from "./extended-types/shared/date-range-change-fn.md";
 import type { APISchema, CSSVarSchema, DataAttrSchema, PropSchema } from "$lib/types/api.js";
 import * as C from "$lib/content/constants.js";
 
@@ -518,3 +520,17 @@ export const disabledDataAttr: DataAttrSchema = {
 	value: "''",
 	description: "Present when the component is disabled.",
 };
+
+export const valueDateRangeProp: PropSchema = createPropSchema({
+	type: {
+		type: "DateRange",
+		definition: DateRange,
+	},
+	description: "The selected date range.",
+	bindable: true,
+});
+
+export const valueDateRangeChangeFn: PropSchema = createFunctionProp({
+	definition: DateRangeChangeFn,
+	description: "A function that is called when the selected date range changes.",
+});

sites/docs/src/lib/content/api-reference/range-calendar.ts

@@ -1,9 +1,19 @@
-import type { RangeCalendarRootPropsWithoutHTML } from "bits-ui";
-import { createApiSchema, createFunctionProp, withChildProps } from "./helpers.js";
+import type {
+	RangeCalendarCellPropsWithoutHTML,
+	RangeCalendarDayPropsWithoutHTML,
+	RangeCalendarRootPropsWithoutHTML,
+} from "bits-ui";
 import {
+	createApiSchema,
+	createDataAttrSchema,
+	valueDateRangeChangeFn,
+	valueDateRangeProp,
+	withChildProps,
+} from "./helpers.js";
+import {
+	cell as calendarCell,
+	day as calendarDay,
 	root as calendarRoot,
-	cell,
-	day,
 	grid,
 	gridBody,
 	gridHead,
@@ -20,18 +30,8 @@ export const root = createApiSchema<RangeCalendarRootPropsWithoutHTML>({
 	title: "Root",
 	description: "The root range calendar component which contains all other calendar components.",
 	props: {
-		value: {
-			type: {
-				type: "DateRange",
-				definition: "{ start: DateValue | undefined; end: DateValue | undefined; }",
-			},
-			description: "The selected date range.",
-			bindable: true,
-		},
-		onValueChange: createFunctionProp({
-			definition: "(date: DateRange | undefined) => void",
-			description: "A function that is called when the selected date range changes.",
-		}),
+		value: valueDateRangeProp,
+		onValueChange: valueDateRangeChangeFn,
 		placeholder: calendarRoot.props!.placeholder,
 		onPlaceholderChange: calendarRoot.props!.onPlaceholderChange,
 		pagedNavigation: calendarRoot.props!.pagedNavigation,
@@ -73,6 +73,31 @@ export const root = createApiSchema<RangeCalendarRootPropsWithoutHTML>({
 	],
 });
 
+const dayCellAttrs = [
+	...(calendarCell.dataAttributes ?? []),
+	createDataAttrSchema({
+		name: "selection-start",
+		description: "Present when the cell is the start of a selection.",
+	}),
+	createDataAttrSchema({
+		name: "selection-end",
+		description: "Present when the cell is the end of a selection.",
+	}),
+	createDataAttrSchema({
+		name: "highlighted",
+		description: "Present when the cell is highlighted within a range.",
+	}),
+];
+
+export const cell = createApiSchema<RangeCalendarCellPropsWithoutHTML>({
+	...calendarCell,
+	dataAttributes: dayCellAttrs,
+});
+
+export const day = createApiSchema<RangeCalendarDayPropsWithoutHTML>({
+	...calendarDay,
+	dataAttributes: dayCellAttrs,
+});
 export const rangeCalendar = [
 	root,
 	header,