@journ/nude 0.1.0

package/dist/data-table-parts.js

@@ -0,0 +1,220 @@
+"use client";
+import { BulkBar } from "./bulk-bar.js";
+import { Button } from "./button.js";
+import { Indicator, Root as Root$1 } from "./checkbox-parts.js";
+import { Pagination } from "./pagination.js";
+import { Content, Root as Root$2, Trigger } from "./popover-parts.js";
+import { Table } from "./table.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createRequiredContext } from "@journ/lift";
+import { columnVisibilityFeature, createColumnHelper, createPaginatedRowModel, createSortedRowModel, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
+//#region src/data-table-parts.tsx
+/** The table features journ turns on. Declared once so every part sees the same types. */
+const features = tableFeatures({
+	rowSortingFeature,
+	sortedRowModel: createSortedRowModel(),
+	rowSelectionFeature,
+	columnVisibilityFeature,
+	rowPaginationFeature,
+	paginatedRowModel: createPaginatedRowModel()
+});
+/** Typed helper for building columns: `const column = dataTableColumns<Row>()`. */
+const dataTableColumns = () => createColumnHelper();
+const defaultComponents = {
+	Table,
+	Checkbox: {
+		Root: Root$1,
+		Indicator
+	},
+	Popover: {
+		Root: Root$2,
+		Trigger,
+		Content
+	},
+	Pagination,
+	BulkBar,
+	TriggerButton: Button,
+	ActionButton: Button
+};
+const [DataTableContext, useShared] = createRequiredContext("DataTable.Root");
+/** The TanStack table instance, for custom parts such as a search box or a footer. */
+const useDataTable = () => useShared().table;
+const noClassNames = {};
+const noIcons = {};
+/** Owns sorting, selection, column visibility and paging, and shares the table with its parts. */
+const Root = ({ data, columns, pageSize = 10, getRowId, initialSorting = [], onSelectionChange, components, classNames = noClassNames, icons = noIcons, children }) => {
+	const table = useTable({
+		features,
+		data,
+		columns,
+		getRowId,
+		initialState: {
+			sorting: initialSorting,
+			pagination: {
+				pageIndex: 0,
+				pageSize
+			}
+		}
+	}, (state) => state);
+	const { rowSelection } = table.state;
+	const mounted = useRef(false);
+	useEffect(() => {
+		if (!mounted.current) {
+			mounted.current = true;
+			return;
+		}
+		onSelectionChange?.(table.getSelectedRowModel().flatRows.map((row) => row.original));
+	}, [rowSelection]);
+	return /* @__PURE__ */ jsx(DataTableContext, {
+		value: {
+			table,
+			state: table.state,
+			components: {
+				...defaultComponents,
+				...components
+			},
+			classNames,
+			icons
+		},
+		children
+	});
+};
+const Toolbar = (props) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "data-table-toolbar",
+	...props
+});
+const sortLabel = {
+	asc: "ascending",
+	desc: "descending"
+};
+const HeaderCell = ({ header }) => {
+	const { table, components, classNames, icons } = useShared();
+	const { column } = header;
+	const sorted = column.getIsSorted();
+	const content = header.isPlaceholder ? null : /* @__PURE__ */ jsx(table.FlexRender, { header });
+	return /* @__PURE__ */ jsx(components.Table.Header, {
+		"aria-sort": column.getCanSort() ? sorted ? sortLabel[sorted] : "none" : void 0,
+		children: column.getCanSort() ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-slot": "data-table-sort",
+			onClick: column.getToggleSortingHandler(),
+			className: classNames.sortButton,
+			children: [content, sorted === "asc" ? icons.sortAscending : sorted === "desc" ? icons.sortDescending : icons.unsorted]
+		}) : content
+	});
+};
+/** Renders the header, rows and cells from the table state with the Table parts. */
+const View = ({ empty = "No results", ...props }) => {
+	const { table, components, classNames } = useShared();
+	const { Table: Parts } = components;
+	const rows = table.getRowModel().rows;
+	return /* @__PURE__ */ jsxs(Parts.Root, {
+		...props,
+		children: [/* @__PURE__ */ jsx(Parts.Head, { children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(Parts.Row, { children: group.headers.map((header) => /* @__PURE__ */ jsx(HeaderCell, { header }, header.id)) }, group.id)) }), /* @__PURE__ */ jsx(Parts.Body, { children: rows.length > 0 ? rows.map((row) => /* @__PURE__ */ jsx(Parts.Row, {
+			"data-state": row.getIsSelected() ? "selected" : void 0,
+			className: classNames.row,
+			children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Parts.Cell, { children: /* @__PURE__ */ jsx(table.FlexRender, { cell }) }, cell.id))
+		}, row.id)) : /* @__PURE__ */ jsx(Parts.Row, { children: /* @__PURE__ */ jsx(Parts.Cell, {
+			colSpan: table.getVisibleLeafColumns().length,
+			className: classNames.emptyCell,
+			children: empty
+		}) }) })]
+	});
+};
+/** A checkbox built from whichever Checkbox parts the root was given. */
+const TableCheckbox = ({ onCheckedChange, ...props }) => {
+	const { Checkbox } = useShared().components;
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		...props,
+		onCheckedChange: (checked) => onCheckedChange(checked === true),
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+	});
+};
+/** A checkbox column with select all for the current page. Put it first in `columns`. */
+const selectColumn = () => ({
+	id: "select",
+	enableSorting: false,
+	enableHiding: false,
+	header: ({ table }) => /* @__PURE__ */ jsx(TableCheckbox, {
+		"aria-label": "Select all rows",
+		checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+		onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked)
+	}),
+	cell: ({ row }) => /* @__PURE__ */ jsx(TableCheckbox, {
+		"aria-label": "Select row",
+		checked: row.getIsSelected(),
+		onCheckedChange: (checked) => row.toggleSelected(checked)
+	})
+});
+const columnLabel = (column) => typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+/** A popover with one checkbox per hideable column. Children replace the default trigger label. */
+const ColumnPicker = ({ children = "Columns" }) => {
+	const { table, components, classNames, icons } = useShared();
+	const { Popover, TriggerButton } = components;
+	const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(TriggerButton, { children: [icons.columns, children] })
+	}), /* @__PURE__ */ jsx(Popover.Content, {
+		align: "start",
+		className: classNames.columnPickerContent,
+		children: columns.map((column) => /* @__PURE__ */ jsxs("label", {
+			"data-slot": "data-table-column-option",
+			className: classNames.columnOption,
+			children: [/* @__PURE__ */ jsx(TableCheckbox, {
+				checked: column.getIsVisible(),
+				onCheckedChange: (visible) => column.toggleVisibility(visible)
+			}), columnLabel(column)]
+		}, column.id))
+	})] });
+};
+/** Previous and next with the current page. Uses buttons, since paging stays on the page. */
+const Pager = (props) => {
+	const { table, components, classNames, icons } = useShared();
+	const { ActionButton } = components;
+	const { pageIndex } = table.state.pagination;
+	return /* @__PURE__ */ jsxs(components.Pagination.Root, {
+		"aria-label": "Table pagination",
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(ActionButton, {
+				disabled: !table.getCanPreviousPage(),
+				onClick: () => table.previousPage(),
+				children: [icons.previous, "Previous"]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": "data-table-page",
+				"aria-live": "polite",
+				className: classNames.pagerStatus,
+				children: [
+					"Page ",
+					pageIndex + 1,
+					" of ",
+					Math.max(table.getPageCount(), 1)
+				]
+			}),
+			/* @__PURE__ */ jsxs(ActionButton, {
+				disabled: !table.getCanNextPage(),
+				onClick: () => table.nextPage(),
+				children: ["Next", icons.next]
+			})
+		]
+	});
+};
+/** Appears while rows are selected. Children are the bulk actions. */
+const SelectionBar = ({ children, ...props }) => {
+	const { table, components } = useShared();
+	const { BulkBar: Bar, ActionButton } = components;
+	const count = table.getSelectedRowModel().rows.length;
+	if (count === 0) return null;
+	return /* @__PURE__ */ jsxs(Bar.Root, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(Bar.Count, { children: [count, " selected"] }), /* @__PURE__ */ jsxs(Bar.Actions, { children: [children, /* @__PURE__ */ jsx(ActionButton, {
+			onClick: () => table.resetRowSelection(),
+			children: "Clear"
+		})] })]
+	});
+};
+//#endregion
+export { ColumnPicker, Pager, Root, SelectionBar, Toolbar, View, dataTableColumns, selectColumn, useDataTable };

package/dist/data-table.d.ts

@@ -0,0 +1,12 @@
+import { ColumnPicker, DataTableClassNames, DataTableColumn, DataTableComponents, DataTableIcons, Pager, Root, RootProps, SelectionBar, Toolbar, View, dataTableColumns, selectColumn, useDataTable } from "./data-table-parts.js";
+//#region src/data-table.d.ts
+declare const DataTable: {
+  Root: typeof Root;
+  Toolbar: typeof Toolbar;
+  ColumnPicker: typeof ColumnPicker;
+  Table: typeof View;
+  Pager: typeof Pager;
+  SelectionBar: typeof SelectionBar;
+};
+//#endregion
+export { DataTable, type DataTableClassNames, type DataTableColumn, type DataTableComponents, type DataTableIcons, type RootProps as DataTableProps, dataTableColumns, selectColumn, useDataTable };

package/dist/data-table.js

@@ -0,0 +1,12 @@
+import { ColumnPicker, Pager, Root, SelectionBar, Toolbar, View, dataTableColumns, selectColumn, useDataTable } from "./data-table-parts.js";
+//#region src/data-table.tsx
+const DataTable = {
+	Root,
+	Toolbar,
+	ColumnPicker,
+	Table: View,
+	Pager,
+	SelectionBar
+};
+//#endregion
+export { DataTable, dataTableColumns, selectColumn, useDataTable };

package/dist/date-input-parts.d.ts

@@ -0,0 +1,15 @@
+import { Input } from "./input.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/date-input-parts.d.ts
+type RootProps = {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (date: Date | null) => void;
+  locale?: string;
+  children?: ReactNode;
+};
+/** Holds the typed text and commits a real date on blur or Enter. */
+declare const Root: ({ value, defaultValue, onValueChange, locale, children }: RootProps) => import("react").JSX.Element;
+declare const Field: ({ onBlur, onKeyDown, ...props }: ComponentPropsWithRef<typeof Input>) => import("react").JSX.Element;
+//#endregion
+export { Field, Root, type RootProps };

package/dist/date-input-parts.js

@@ -0,0 +1,54 @@
+"use client";
+import { Input } from "./input.js";
+import { commitOn } from "./lib/commit-on.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createRequiredContext, useControllableState } from "@journ/lift";
+import { datePlaceholder, formatDate, parseDate } from "@journ/fitter-happier";
+//#region src/date-input-parts.tsx
+const [DateInputContext, useDateInput] = createRequiredContext("DateInput.Root");
+/** Holds the typed text and commits a real date on blur or Enter. */
+const Root = ({ value, defaultValue = null, onValueChange, locale = "en", children }) => {
+	const [date, setDate] = useControllableState(value, defaultValue, onValueChange);
+	const [text, setText] = useState(date ? formatDate(date, locale) : "");
+	const [invalid, setInvalid] = useState(false);
+	const commit = () => {
+		const parsed = parseDate(text, locale);
+		if (text.trim() && !parsed) {
+			setInvalid(true);
+			return;
+		}
+		setInvalid(false);
+		setText(parsed ? formatDate(parsed, locale) : "");
+		setDate(parsed);
+	};
+	return /* @__PURE__ */ jsx(DateInputContext, {
+		value: {
+			text,
+			invalid,
+			locale,
+			setText: (next) => (setInvalid(false), setText(next)),
+			commit
+		},
+		children
+	});
+};
+const Field = ({ onBlur, onKeyDown, ...props }) => {
+	const { text, invalid, locale, setText, commit } = useDateInput();
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "date-input",
+		inputMode: "numeric",
+		autoComplete: "off",
+		placeholder: datePlaceholder(locale),
+		"aria-invalid": invalid || void 0,
+		...props,
+		value: text,
+		onChange: (event) => setText(event.target.value),
+		...commitOn(commit, {
+			onBlur,
+			onKeyDown
+		})
+	});
+};
+//#endregion
+export { Field, Root };

package/dist/date-input.d.ts

@@ -0,0 +1,8 @@
+import { Field, Root } from "./date-input-parts.js";
+//#region src/date-input.d.ts
+declare const DateInput: {
+  Root: typeof Root;
+  Field: typeof Field;
+};
+//#endregion
+export { DateInput };

package/dist/date-input.js

@@ -0,0 +1,8 @@
+import { Field, Root } from "./date-input-parts.js";
+//#region src/date-input.tsx
+const DateInput = {
+	Root,
+	Field
+};
+//#endregion
+export { DateInput };

package/dist/date-picker-parts.d.ts

@@ -0,0 +1,29 @@
+import { RootProps as RootProps$1 } from "./calendar-parts.js";
+import { PickerActions, PickerContextValue, PickerProviderProps, PickerState } from "./lib/picker.js";
+import { ReactNode } from "react";
+//#region src/date-picker-parts.d.ts
+type DatePickerMeta = {
+  locale?: string;
+};
+type DatePickerState = PickerState<Date>;
+type DatePickerActions = PickerActions<Date>;
+type DatePickerContextValue = PickerContextValue<Date, DatePickerMeta>;
+declare const Provider: ({ children, ...props }: PickerProviderProps<Date, DatePickerMeta>) => import("react").JSX.Element, Trigger: (props: import("react").ComponentPropsWithRef<'button'>) => import("react").JSX.Element, PickerValue: ({ placeholder, children, ...props }: import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+  placeholder?: string;
+}) => import("react").JSX.Element, useDatePicker: any;
+type RootProps = {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (date: Date) => void;
+  locale?: string;
+  children?: ReactNode;
+};
+declare const Root: ({ value, defaultValue, onValueChange, locale, children }: RootProps) => import("react").JSX.Element;
+type ValueProps = Omit<React.ComponentProps<typeof PickerValue>, 'children'> & {
+  format?: Intl.DateTimeFormatOptions;
+};
+declare const Value: ({ format, ...props }: ValueProps) => import("react").JSX.Element;
+type CalendarProps = Omit<RootProps$1, 'value' | 'defaultValue' | 'onValueChange' | 'locale'>;
+declare const Calendar: (props: CalendarProps) => import("react").JSX.Element;
+//#endregion
+export { Calendar, type DatePickerActions, type DatePickerContextValue, type DatePickerMeta, type DatePickerState, Provider, Root, type RootProps, Trigger, Value, useDatePicker };

package/dist/date-picker-parts.js

@@ -0,0 +1,33 @@
+"use client";
+import { Root as Root$1 } from "./calendar-parts.js";
+import { createPicker } from "./lib/picker.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/date-picker-parts.tsx
+const { Provider, Trigger, Value: PickerValue, usePicker: useDatePicker, usePickerState } = createPicker("DatePicker", "date-picker");
+const Root = ({ value, defaultValue = null, onValueChange, locale = "en", children }) => {
+	const { state, actions } = usePickerState(value, defaultValue, onValueChange);
+	return /* @__PURE__ */ jsx(Provider, {
+		state,
+		actions,
+		meta: { locale },
+		children
+	});
+};
+const Value = ({ format = { dateStyle: "medium" }, ...props }) => {
+	const { state, meta } = useDatePicker();
+	return /* @__PURE__ */ jsx(PickerValue, {
+		...props,
+		children: state.value && new Intl.DateTimeFormat(meta.locale, format).format(state.value)
+	});
+};
+const Calendar = (props) => {
+	const { state, actions, meta } = useDatePicker();
+	return /* @__PURE__ */ jsx(Root$1, {
+		...props,
+		value: state.value,
+		onValueChange: actions.select,
+		locale: meta.locale
+	});
+};
+//#endregion
+export { Calendar, Provider, Root, Trigger, Value, useDatePicker };

package/dist/date-picker.d.ts

@@ -0,0 +1,29 @@
+import { ModalContentProps } from "./lib/modal-content.js";
+import { PickerProviderProps } from "./lib/picker.js";
+import { Calendar, DatePickerActions, DatePickerContextValue, DatePickerMeta, DatePickerState, Root, RootProps, Value, useDatePicker } from "./date-picker-parts.js";
+//#region src/date-picker.d.ts
+declare const DatePicker: {
+  Provider: ({ children, ...props }: PickerProviderProps<Date, DatePickerMeta>) => import("react").JSX.Element;
+  Root: typeof Root;
+  Trigger: (props: import("react").ComponentPropsWithRef<'button'>) => import("react").JSX.Element;
+  Value: typeof Value;
+  Content: ({ classNames, overlayRef, ...props }: ModalContentProps<{
+    Root: typeof import("vaul").Root;
+    NestedRoot: typeof import("vaul").NestedRoot;
+    Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: typeof import("vaul").Portal;
+    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+      preventCycle?: boolean | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+  }>) => import("react").JSX.Element;
+  Title: (props: import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
+  Description: (props: import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
+  Calendar: typeof Calendar;
+};
+//#endregion
+export { DatePicker, type DatePickerActions, type DatePickerContextValue, type DatePickerMeta, type RootProps as DatePickerProps, type DatePickerState, useDatePicker };

package/dist/date-picker.js

@@ -0,0 +1,15 @@
+import { Content, Description, Title } from "./drawer-parts.js";
+import { Calendar, Provider, Root, Trigger, Value, useDatePicker } from "./date-picker-parts.js";
+//#region src/date-picker.tsx
+const DatePicker = {
+	Provider,
+	Root,
+	Trigger,
+	Value,
+	Content,
+	Title,
+	Description,
+	Calendar
+};
+//#endregion
+export { DatePicker, useDatePicker };

package/dist/date-range-picker-parts.d.ts

@@ -0,0 +1,37 @@
+import { RootProps as RootProps$1 } from "./calendar-parts.js";
+import { PickerActions, PickerContextValue, PickerProviderProps, PickerState } from "./lib/picker.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/date-range-picker-parts.d.ts
+type DateRange = {
+  from: Date;
+  to: Date;
+};
+type DateRangePickerMeta = {
+  locale?: string;
+};
+type DateRangePickerState = PickerState<DateRange>;
+type DateRangePickerActions = PickerActions<DateRange>;
+type DateRangePickerContextValue = PickerContextValue<DateRange, DateRangePickerMeta>;
+declare const Provider: ({ children, ...props }: PickerProviderProps<DateRange, DateRangePickerMeta>) => import("react").JSX.Element, Trigger: (props: import("react").ComponentPropsWithRef<'button'>) => import("react").JSX.Element, PickerValue: ({ placeholder, children, ...props }: import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+  placeholder?: string;
+}) => import("react").JSX.Element, useDateRangePicker: any;
+type RootProps = {
+  value?: DateRange | null;
+  defaultValue?: DateRange | null;
+  onValueChange?: (range: DateRange) => void;
+  locale?: string;
+  children?: ReactNode;
+};
+declare const Root: ({ value, defaultValue, onValueChange, locale, children }: RootProps) => import("react").JSX.Element;
+type ValueProps = Omit<ComponentProps<typeof PickerValue>, 'children'> & {
+  format?: Intl.DateTimeFormatOptions;
+};
+declare const Value: ({ format, ...props }: ValueProps) => import("react").JSX.Element;
+type CalendarProps = Pick<RootProps$1, 'defaultMonth' | 'weekStartsOn' | 'children'>;
+/**
+ * The first click sets one end, the second completes the range (in either
+ * order) and closes the picker. A third click on a finished range starts over.
+ */
+declare const Calendar: ({ defaultMonth, weekStartsOn, children }: CalendarProps) => import("react").JSX.Element;
+//#endregion
+export { Calendar, type DateRange, type DateRangePickerActions, type DateRangePickerContextValue, type DateRangePickerMeta, type DateRangePickerState, Provider, Root, type RootProps, Trigger, Value, useDateRangePicker };

package/dist/date-range-picker-parts.js

@@ -0,0 +1,63 @@
+"use client";
+import { Provider as Provider$1, useCalendarNavigation } from "./calendar-parts.js";
+import { createPicker } from "./lib/picker.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/date-range-picker-parts.tsx
+const { Provider, Trigger, Value: PickerValue, usePicker: useDateRangePicker, usePickerState } = createPicker("DateRangePicker", "date-range-picker");
+const Root = ({ value, defaultValue = null, onValueChange, locale = "en", children }) => {
+	const { state, actions } = usePickerState(value, defaultValue, onValueChange);
+	return /* @__PURE__ */ jsx(Provider, {
+		state,
+		actions,
+		meta: { locale },
+		children
+	});
+};
+const Value = ({ format = { dateStyle: "medium" }, ...props }) => {
+	const { state, meta } = useDateRangePicker();
+	return /* @__PURE__ */ jsx(PickerValue, {
+		...props,
+		children: state.value && new Intl.DateTimeFormat(meta.locale, format).formatRange(state.value.from, state.value.to)
+	});
+};
+/**
+* The first click sets one end, the second completes the range (in either
+* order) and closes the picker. A third click on a finished range starts over.
+*/
+const Calendar = ({ defaultMonth, weekStartsOn = 0, children }) => {
+	const { state, actions, meta } = useDateRangePicker();
+	const [anchor, setAnchor] = useState(null);
+	const { month, view, navigation } = useCalendarNavigation(defaultMonth ?? state.value?.from ?? /* @__PURE__ */ new Date());
+	const calendarActions = {
+		...navigation,
+		select: (date) => {
+			if (!anchor) return setAnchor(date);
+			const [from, to] = date.getTime() < anchor.getTime() ? [date, anchor] : [anchor, date];
+			setAnchor(null);
+			actions.select({
+				from,
+				to
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(Provider$1, {
+		state: {
+			selected: null,
+			range: anchor ? {
+				from: anchor,
+				to: null
+			} : state.value,
+			month,
+			view
+		},
+		actions: calendarActions,
+		meta: {
+			locale: meta.locale,
+			weekStartsOn
+		},
+		children
+	});
+};
+//#endregion
+export { Calendar, Provider, Root, Trigger, Value, useDateRangePicker };

package/dist/date-range-picker.d.ts

@@ -0,0 +1,29 @@
+import { ModalContentProps } from "./lib/modal-content.js";
+import { PickerProviderProps } from "./lib/picker.js";
+import { Calendar, DateRange, DateRangePickerActions, DateRangePickerContextValue, DateRangePickerMeta, DateRangePickerState, Root, RootProps, Value, useDateRangePicker } from "./date-range-picker-parts.js";
+//#region src/date-range-picker.d.ts
+declare const DateRangePicker: {
+  Provider: ({ children, ...props }: PickerProviderProps<DateRange, DateRangePickerMeta>) => import("react").JSX.Element;
+  Root: typeof Root;
+  Trigger: (props: import("react").ComponentPropsWithRef<'button'>) => import("react").JSX.Element;
+  Value: typeof Value;
+  Content: ({ classNames, overlayRef, ...props }: ModalContentProps<{
+    Root: typeof import("vaul").Root;
+    NestedRoot: typeof import("vaul").NestedRoot;
+    Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: typeof import("vaul").Portal;
+    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+      preventCycle?: boolean | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+  }>) => import("react").JSX.Element;
+  Title: (props: import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
+  Description: (props: import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
+  Calendar: typeof Calendar;
+};
+//#endregion
+export { type DateRange, DateRangePicker, type DateRangePickerActions, type DateRangePickerContextValue, type DateRangePickerMeta, type RootProps as DateRangePickerProps, type DateRangePickerState, useDateRangePicker };

package/dist/date-range-picker.js

@@ -0,0 +1,15 @@
+import { Content, Description, Title } from "./drawer-parts.js";
+import { Calendar, Provider, Root, Trigger, Value, useDateRangePicker } from "./date-range-picker-parts.js";
+//#region src/date-range-picker.tsx
+const DateRangePicker = {
+	Provider,
+	Root,
+	Trigger,
+	Value,
+	Content,
+	Title,
+	Description,
+	Calendar
+};
+//#endregion
+export { DateRangePicker, useDateRangePicker };

package/dist/description-list.d.ts

@@ -0,0 +1,8 @@
+//#region src/description-list.d.ts
+declare const DescriptionList: {
+  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>) => import("react").ReactNode;
+  Term: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
+  Details: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
+};
+//#endregion
+export { DescriptionList };

package/dist/description-list.js

@@ -0,0 +1,9 @@
+import { part } from "./lib/part.js";
+//#region src/description-list.tsx
+const DescriptionList = {
+	Root: part("dl", "description-list"),
+	Term: part("dt", "description-list-term"),
+	Details: part("dd", "description-list-details")
+};
+//#endregion
+export { DescriptionList };

package/dist/dialog-parts.d.ts

@@ -0,0 +1,12 @@
+import { ModalContentProps } from "./lib/modal-content.js";
+import { Actions, Body } from "./lib/modal-parts.js";
+import * as RadixDialog from "@radix-ui/react-dialog";
+//#region src/dialog-parts.d.ts
+declare const Root: import("react").FC<RadixDialog.DialogProps>;
+declare const Trigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Close: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Content: ({ classNames, overlayRef, ...props }: ModalContentProps<typeof RadixDialog>) => import("react").JSX.Element;
+declare const Title: (props: RadixDialog.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
+declare const Description: (props: RadixDialog.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
+//#endregion
+export { Actions, Body, Close, Content, Description, Root, Title, Trigger };

package/dist/dialog-parts.js

@@ -0,0 +1,14 @@
+"use client";
+import { part } from "./lib/part.js";
+import { createModalContent } from "./lib/modal-content.js";
+import { Actions, Body } from "./lib/modal-parts.js";
+import * as RadixDialog from "@radix-ui/react-dialog";
+//#region src/dialog-parts.tsx
+const Root = RadixDialog.Root;
+const Trigger = RadixDialog.Trigger;
+const Close = RadixDialog.Close;
+const Content = createModalContent(RadixDialog, "dialog");
+const Title = part(RadixDialog.Title, "dialog-title");
+const Description = part(RadixDialog.Description, "dialog-description");
+//#endregion
+export { Actions, Body, Close, Content, Description, Root, Title, Trigger };