@wirekyt/solid 0.0.1 → 0.0.3

package/dist/date-picker.js

@@ -0,0 +1,506 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as mergeProps$2, d as createContext$1, i as useMachine, l as createSplitProps, r as normalizeProps, u as composeRefs } from "./core-7QKBNp9p.js";
+import { t as runIfFn } from "./run-if-fn-CjvD7VzQ.js";
+import { t as wire } from "./factory-D2A7xdtl.js";
+import { a as useLocaleContext, l as useEnvironmentContext } from "./providers-B-Vi5wQ7.js";
+import { a as splitPresenceProps, i as usePresence, n as usePresenceContext, t as PresenceProvider } from "./presence-CE6lXCu5.js";
+import { uniq } from "@wirekyt/dom/utils";
+import { For, Index, Show, createMemo, createUniqueId } from "solid-js";
+import { createComponent, memo, mergeProps as mergeProps$1 } from "solid-js/web";
+import * as datePicker from "@wirekyt/dom/machines/date-picker";
+import { anatomy, parse as parseDate } from "@wirekyt/dom/machines/date-picker";
+//#region src/components/date-picker/use-context.ts
+const [DatePickerProvider, useDatePickerContext] = createContext$1({
+	hookName: "useDatePickerContext",
+	providerName: "<DatePickerProvider />"
+});
+//#endregion
+//#region src/components/date-picker/clear-trigger.tsx
+const DatePickerClearTrigger = (props) => {
+	const api = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => api().getClearTriggerProps(), props);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/content.tsx
+const DatePickerContent = (props) => {
+	const api = useDatePickerContext();
+	const presenceApi = usePresenceContext();
+	const mergedProps = mergeProps$2(() => api().getContentProps(), () => presenceApi().presenceProps, props);
+	return createComponent(Show, {
+		get when() {
+			return !presenceApi().unmounted;
+		},
+		get children() {
+			return createComponent(wire.div, mergeProps$1(mergedProps, { ref(r$) {
+				var _ref$ = composeRefs(presenceApi().ref, props.ref);
+				typeof _ref$ === "function" && _ref$(r$);
+			} }));
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/context.tsx
+const DatePickerContext = (props) => props.children(useDatePickerContext());
+//#endregion
+//#region src/components/date-picker/control.tsx
+const DatePickerControl = (props) => {
+	const api = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => api().getControlProps(), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/input.tsx
+const DatePickerInput = (props) => {
+	const [inputProps, localProps] = createSplitProps()(props, ["index", "fixOnBlur"]);
+	const datePicker = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => datePicker().getInputProps(inputProps), localProps);
+	return createComponent(wire.input, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/label.tsx
+const DatePickerLabel = (props) => {
+	const api = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => api().getLabelProps(), props);
+	return createComponent(wire.label, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/month-select.tsx
+const DatePickerMonthSelect = (props) => {
+	const datePicker = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => datePicker().getMonthSelectProps(), props);
+	return createComponent(wire.select, mergeProps$1(mergedProps, { get children() {
+		return createComponent(Index, {
+			get each() {
+				return datePicker().getMonths();
+			},
+			children: (month) => createComponent(wire.option, {
+				get value() {
+					return month().value;
+				},
+				get children() {
+					return month().label;
+				}
+			})
+		});
+	} }));
+};
+//#endregion
+//#region src/components/date-picker/use-view-props-context.ts
+const [DatePickerViewProvider, useDatePickerViewContext] = createContext$1({
+	hookName: "useDatePickerViewContext",
+	providerName: "<DatePickerViewProvider />",
+	strict: false,
+	defaultValue: { view: "day" }
+});
+//#endregion
+//#region src/components/date-picker/next-trigger.tsx
+const DatePickerNextTrigger = (props) => {
+	const api = useDatePickerContext();
+	const viewProps = useDatePickerViewContext();
+	const mergedProps = mergeProps$2(() => api().getNextTriggerProps(viewProps), props);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/positioner.tsx
+const DatePickerPositioner = (props) => {
+	const api = useDatePickerContext();
+	const presenceApi = usePresenceContext();
+	const mergedProps = mergeProps$2(() => api().getPositionerProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return !presenceApi().unmounted;
+		},
+		get children() {
+			return createComponent(wire.div, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/preset-trigger.tsx
+const DatePickerPresetTrigger = (props) => {
+	const [presetTriggerProps, localProps] = createSplitProps()(props, ["value"]);
+	const api = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/prev-trigger.tsx
+const DatePickerPrevTrigger = (props) => {
+	const api = useDatePickerContext();
+	const viewProps = useDatePickerViewContext();
+	const mergedProps = mergeProps$2(() => api().getPrevTriggerProps(viewProps), props);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/range-text.tsx
+const DatePickerRangeText = (props) => {
+	const api = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => api().getRangeTextProps(), props);
+	const visibleRangeText = createMemo(() => {
+		const { start, end } = api().visibleRangeText;
+		return uniq([start, end]).filter(Boolean).join(" - ");
+	});
+	return createComponent(wire.div, mergeProps$1(mergedProps, { get children() {
+		return visibleRangeText();
+	} }));
+};
+//#endregion
+//#region src/components/date-picker/anatomy.ts
+const datePickerAnatomy = anatomy.extendWith("view", "valueText");
+//#endregion
+//#region src/components/date-picker/value-text.tsx
+const DatePickerValueText = (props) => {
+	const api = useDatePickerContext();
+	const hasValue = () => api().value.length > 0;
+	return createComponent(Show, {
+		get when() {
+			return typeof props.children === "function";
+		},
+		get fallback() {
+			return createComponent(wire.span, mergeProps$1(() => datePickerAnatomy.build().valueText.attrs, props, { get children() {
+				return memo(() => !!hasValue())() ? api().valueAsString.join(props.separator ?? ", ") : props.placeholder;
+			} }));
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return hasValue();
+				},
+				get fallback() {
+					return props.placeholder;
+				},
+				get children() {
+					return createComponent(For, {
+						get each() {
+							return api().value;
+						},
+						children: (value, index) => memo(() => props.children({
+							value,
+							index: index(),
+							valueAsString: api().valueAsString[index()],
+							remove: () => {
+								api().setValue(api().value.filter((_, i) => i !== index()));
+							}
+						}))
+					});
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/use.ts
+const useDatePicker = (props) => {
+	const id = createUniqueId();
+	const locale = useLocaleContext();
+	const environment = useEnvironmentContext();
+	const machineProps = createMemo(() => ({
+		id,
+		dir: locale().dir,
+		locale: locale().locale,
+		getRootNode: environment().getRootNode,
+		...runIfFn(props)
+	}));
+	const service = useMachine(datePicker.machine, machineProps);
+	return createMemo(() => datePicker.connect(service, normalizeProps));
+};
+//#endregion
+//#region src/components/date-picker/root.tsx
+const DatePickerRoot = (props) => {
+	const [presenceProps, datePickerProps] = splitPresenceProps(props);
+	const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
+		"closeOnSelect",
+		"createCalendar",
+		"defaultFocusedValue",
+		"defaultOpen",
+		"defaultValue",
+		"defaultView",
+		"disabled",
+		"fixedWeeks",
+		"focusedValue",
+		"format",
+		"id",
+		"ids",
+		"inline",
+		"invalid",
+		"isDateUnavailable",
+		"locale",
+		"max",
+		"maxSelectedDates",
+		"maxView",
+		"min",
+		"minView",
+		"name",
+		"numOfMonths",
+		"onFocusChange",
+		"onOpenChange",
+		"onValueChange",
+		"onViewChange",
+		"onVisibleRangeChange",
+		"open",
+		"openOnClick",
+		"outsideDaySelectable",
+		"parse",
+		"placeholder",
+		"positioning",
+		"readOnly",
+		"required",
+		"selectionMode",
+		"showWeekNumbers",
+		"startOfWeek",
+		"timeZone",
+		"translations",
+		"value",
+		"view"
+	]);
+	const api = useDatePicker(useDatePickerProps);
+	const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({ present: api().open })));
+	const mergedProps = mergeProps$2(() => api().getRootProps(), localProps);
+	return createComponent(DatePickerProvider, {
+		value: api,
+		get children() {
+			return createComponent(PresenceProvider, {
+				value: apiPresence,
+				get children() {
+					return createComponent(wire.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/root-provider.tsx
+const DatePickerRootProvider = (props) => {
+	const [presenceProps, datePickerProps] = splitPresenceProps(props);
+	const [{ value: datePicker }, localProps] = createSplitProps()(datePickerProps, ["value"]);
+	const presence = usePresence(mergeProps$2(presenceProps, () => ({ present: datePicker().open })));
+	const mergedProps = mergeProps$2(() => datePicker().getRootProps(), localProps);
+	return createComponent(DatePickerProvider, {
+		value: datePicker,
+		get children() {
+			return createComponent(PresenceProvider, {
+				value: presence,
+				get children() {
+					return createComponent(wire.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/use-table-props-context.ts
+const [DatePickerTableProvider, useDatePickerTableContext] = createContext$1({
+	hookName: "useDatePickerTableContext",
+	providerName: "<DatePickerTableProvider />"
+});
+//#endregion
+//#region src/components/date-picker/table.tsx
+const DatePickerTable = (props) => {
+	const [columnProps, localProps] = createSplitProps()(props, ["columns"]);
+	const api = useDatePickerContext();
+	const viewProps = useDatePickerViewContext();
+	const id = createUniqueId();
+	const tableProps = mergeProps$2(() => ({
+		columns: columnProps.columns,
+		id
+	}), viewProps);
+	const mergedProps = mergeProps$2(() => api().getTableProps(tableProps), localProps);
+	return createComponent(DatePickerTableProvider, {
+		value: tableProps,
+		get children() {
+			return createComponent(wire.table, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/table-body.tsx
+const DatePickerTableBody = (props) => {
+	const api = useDatePickerContext();
+	const tableProps = useDatePickerTableContext();
+	const mergedProps = mergeProps$2(() => api().getTableBodyProps(tableProps), props);
+	return createComponent(wire.tbody, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/use-table-cell-props-context.ts
+const [DatePickerTableCellProvider, useDatePickerTableCellContext] = createContext$1({
+	hookName: "useDatePickerTableCellContext",
+	providerName: "<DatePickerTableCellProvider />"
+});
+//#endregion
+//#region src/components/date-picker/table-cell.tsx
+const DatePickerTableCell = (props) => {
+	const [cellProps, localProps] = createSplitProps()(props, [
+		"disabled",
+		"value",
+		"visibleRange",
+		"columns"
+	]);
+	const api = useDatePickerContext();
+	const viewProps = useDatePickerViewContext();
+	const mergedProps = mergeProps$2(createMemo(() => {
+		const viewFn = {
+			day: api().getDayTableCellProps,
+			month: api().getMonthTableCellProps,
+			year: api().getYearTableCellProps
+		}[viewProps.view];
+		return viewFn(cellProps);
+	}), localProps);
+	return createComponent(DatePickerTableCellProvider, {
+		value: cellProps,
+		get children() {
+			return createComponent(wire.td, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/table-cell-trigger.tsx
+const DatePickerTableCellTrigger = (props) => {
+	const api = useDatePickerContext();
+	const cellProps = useDatePickerTableCellContext();
+	const viewProps = useDatePickerViewContext();
+	const mergedProps = mergeProps$2(createMemo(() => {
+		const viewFn = {
+			day: api().getDayTableCellTriggerProps,
+			month: api().getMonthTableCellTriggerProps,
+			year: api().getYearTableCellTriggerProps
+		}[viewProps.view];
+		return viewFn(cellProps);
+	}), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/table-head.tsx
+const DatePickerTableHead = (props) => {
+	const api = useDatePickerContext();
+	const tableProps = useDatePickerTableContext();
+	const mergedProps = mergeProps$2(() => api().getTableHeadProps(tableProps), props);
+	return createComponent(wire.thead, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/table-header.tsx
+const DatePickerTableHeader = (props) => {
+	const api = useDatePickerContext();
+	const tableProps = useDatePickerTableContext();
+	const mergedProps = mergeProps$2(() => api().getTableHeaderProps(tableProps), props);
+	return createComponent(wire.th, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/table-row.tsx
+const DatePickerTableRow = (props) => {
+	const api = useDatePickerContext();
+	const tableProps = useDatePickerTableContext();
+	const mergedProps = mergeProps$2(() => api().getTableRowProps(tableProps), props);
+	return createComponent(wire.tr, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/trigger.tsx
+const DatePickerTrigger = (props) => {
+	const api = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => api().getTriggerProps(), props);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/view.tsx
+const DatePickerView = (props) => {
+	const [viewProps, localProps] = createSplitProps()(props, ["view"]);
+	const api = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => datePickerAnatomy.build().view.attrs, localProps);
+	return createComponent(DatePickerViewProvider, {
+		value: viewProps,
+		get children() {
+			return createComponent(wire.div, mergeProps$1(mergedProps, { get hidden() {
+				return api().view !== viewProps.view;
+			} }));
+		}
+	});
+};
+//#endregion
+//#region src/components/date-picker/view-control.tsx
+const DatePickerViewControl = (props) => {
+	const api = useDatePickerContext();
+	const viewProps = useDatePickerViewContext();
+	const mergedProps = mergeProps$2(() => api().getViewControlProps(viewProps), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/view-trigger.tsx
+const DatePickerViewTrigger = (props) => {
+	const api = useDatePickerContext();
+	const viewProps = useDatePickerViewContext();
+	const mergedProps = mergeProps$2(() => api().getViewTriggerProps(viewProps), props);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/week-number-cell.tsx
+const splitWeekNumberCellProps = createSplitProps();
+const DatePickerWeekNumberCell = (props) => {
+	const [cellProps, localProps] = splitWeekNumberCellProps(props, ["weekIndex", "week"]);
+	const datePicker = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => datePicker().getWeekNumberCellProps(cellProps), localProps);
+	return createComponent(wire.td, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/week-number-header-cell.tsx
+const DatePickerWeekNumberHeaderCell = (props) => {
+	const api = useDatePickerContext();
+	const tableProps = useDatePickerTableContext();
+	const mergedProps = mergeProps$2(() => api().getWeekNumberHeaderCellProps(tableProps), props);
+	return createComponent(wire.th, mergedProps);
+};
+//#endregion
+//#region src/components/date-picker/year-select.tsx
+const DatePickerYearSelect = (props) => {
+	const datePicker = useDatePickerContext();
+	const mergedProps = mergeProps$2(() => datePicker().getYearSelectProps(), props);
+	return createComponent(wire.select, mergeProps$1(mergedProps, { get children() {
+		return createComponent(Index, {
+			get each() {
+				return datePicker().getYears();
+			},
+			children: (year) => createComponent(wire.option, {
+				get value() {
+					return year().value;
+				},
+				get children() {
+					return year().label;
+				}
+			})
+		});
+	} }));
+};
+//#endregion
+//#region src/components/date-picker/date-picker.ts
+var date_picker_exports = /* @__PURE__ */ __exportAll({
+	ClearTrigger: () => DatePickerClearTrigger,
+	Content: () => DatePickerContent,
+	Context: () => DatePickerContext,
+	Control: () => DatePickerControl,
+	Input: () => DatePickerInput,
+	Label: () => DatePickerLabel,
+	MonthSelect: () => DatePickerMonthSelect,
+	NextTrigger: () => DatePickerNextTrigger,
+	Positioner: () => DatePickerPositioner,
+	PresetTrigger: () => DatePickerPresetTrigger,
+	PrevTrigger: () => DatePickerPrevTrigger,
+	RangeText: () => DatePickerRangeText,
+	Root: () => DatePickerRoot,
+	RootProvider: () => DatePickerRootProvider,
+	Table: () => DatePickerTable,
+	TableBody: () => DatePickerTableBody,
+	TableCell: () => DatePickerTableCell,
+	TableCellTrigger: () => DatePickerTableCellTrigger,
+	TableHead: () => DatePickerTableHead,
+	TableHeader: () => DatePickerTableHeader,
+	TableRow: () => DatePickerTableRow,
+	Trigger: () => DatePickerTrigger,
+	ValueText: () => DatePickerValueText,
+	View: () => DatePickerView,
+	ViewControl: () => DatePickerViewControl,
+	ViewTrigger: () => DatePickerViewTrigger,
+	WeekNumberCell: () => DatePickerWeekNumberCell,
+	WeekNumberHeaderCell: () => DatePickerWeekNumberHeaderCell,
+	YearSelect: () => DatePickerYearSelect
+});
+//#endregion
+export { date_picker_exports as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerRootProvider, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerValueText, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerWeekNumberCell, DatePickerWeekNumberHeaderCell, DatePickerYearSelect, datePickerAnatomy, parseDate, useDatePicker, useDatePickerContext };