@taqwim/solid 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/index.js

@@ -1,49 +1,23 @@
-import { createComponent as e, insert as t, memo as n, mergeProps as r, spread as i, template as a, use as o } from "solid-js/web";
-import { createContext as s, createEffect as c, createRenderEffect as l, createSignal as u, onCleanup as d, onMount as f, splitProps as p, useContext as m } from "solid-js";
-import { createCalendar as h } from "@taqwim/calendar-core";
+import { createComponent as e, insert as t, mergeProps as n, spread as r, template as i, use as a } from "solid-js/web";
+import { createCalendar as o, getCellDisplayValues as s } from "@taqwim/calendar-core";
+import { children as c, createContext as l, createEffect as u, createRenderEffect as d, createSignal as f, onCleanup as p, onMount as m, splitProps as h, useContext as g } from "solid-js";
 //#region src/context.ts
-var g = s();
-function _() {
-	let e = m(g);
+var _ = l();
+function v() {
+	let e = g(_);
 	if (!e) throw Error("Taqwim calendar parts must be rendered inside <HijriCalendarRoot>");
 	return e;
 }
 //#endregion
 //#region src/types.ts
-var v = [
-	"defaultValue",
-	"value",
-	"onValueChange",
-	"defaultPlaceholder",
-	"placeholder",
-	"onPlaceholderChange",
-	"weekStartsOn",
-	"weekdayFormat",
-	"calendarLabel",
-	"fixedWeeks",
-	"numberOfMonths",
-	"pagedNavigation",
-	"multiple",
-	"preventDeselect",
-	"disableDaysOutsideCurrentView",
-	"disabled",
-	"readonly",
-	"minValue",
-	"maxValue",
-	"locale",
-	"dir",
-	"isDateDisabled",
-	"isDateUnavailable",
-	"nextPage",
-	"prevPage"
-];
+var y = /* @__PURE__ */ "defaultValue.value.onValueChange.defaultPlaceholder.placeholder.onPlaceholderChange.weekStartsOn.weekdayFormat.calendarLabel.fixedWeeks.numberOfMonths.pagedNavigation.multiple.preventDeselect.disableDaysOutsideCurrentView.disabled.readonly.minValue.maxValue.locale.showGregorian.dateEmphasis.gregorianLocale.dir.isDateDisabled.isDateUnavailable.nextPage.prevPage".split(".");
 //#endregion
 //#region src/useCalendar.ts
-function y(e) {
-	let t = h(e()), [n, r] = u(t.getSnapshot());
-	return d(t.subscribe(() => {
+function b(e) {
+	let t = o(e()), [n, r] = f(t.getSnapshot());
+	return p(t.subscribe(() => {
 		r(t.getSnapshot());
-	})), l(() => {
+	})), d(() => {
 		t.setOptions(e());
 	}), {
 		store: t,
@@ -52,170 +26,174 @@ function y(e) {
 }
 //#endregion
 //#region src/HijriCalendar.tsx
-var b = /*#__PURE__*/ a("<div><div style=position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0><div role=heading aria-level=2>"), x = /*#__PURE__*/ a("<div role=group data-taqwim-calendar-header>"), S = /*#__PURE__*/ a("<div data-taqwim-calendar-heading>"), C = /*#__PURE__*/ a("<button>"), w = /*#__PURE__*/ a("<div tabindex=-1>"), T = /*#__PURE__*/ a("<div aria-hidden=true data-taqwim-calendar-grid-head>"), E = /*#__PURE__*/ a("<div data-taqwim-calendar-grid-body>"), D = /*#__PURE__*/ a("<div role=row data-taqwim-calendar-grid-row>"), O = /*#__PURE__*/ a("<div data-taqwim-calendar-head-cell>"), k = /*#__PURE__*/ a("<div role=gridcell data-taqwim-calendar-cell>");
-function A(e, t) {
-	return typeof e == "function" ? e(t()) : e;
+var x = /*#__PURE__*/ i("<div><div style=position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0><div role=heading aria-level=2>"), S = /*#__PURE__*/ i("<div role=group data-taqwim-calendar-header>"), C = /*#__PURE__*/ i("<div data-taqwim-calendar-heading>"), w = /*#__PURE__*/ i("<button>"), T = /*#__PURE__*/ i("<div tabindex=-1>"), E = /*#__PURE__*/ i("<div aria-hidden=true data-taqwim-calendar-grid-head>"), D = /*#__PURE__*/ i("<div data-taqwim-calendar-grid-body>"), O = /*#__PURE__*/ i("<div role=row data-taqwim-calendar-grid-row>"), k = /*#__PURE__*/ i("<div data-taqwim-calendar-head-cell>"), A = /*#__PURE__*/ i("<div role=gridcell data-taqwim-calendar-cell>");
+function j(e, t) {
+	return typeof e == "function" ? c(() => e(t()))() : e;
 }
-function j(n) {
-	let [a, s, l] = p(n, v, ["children", "initialFocus"]), u, d, { store: m, state: h } = y(() => ({
-		...a,
+function M(i) {
+	let [o, s, c] = h(i, y, ["children", "initialFocus"]), l, d, { store: f, state: p } = b(() => ({
+		...o,
 		onFocusedDateChange: (e) => {
-			d = e ? m.formatter.isoDate(e) : void 0;
+			d = e ? f.formatter.isoDate(e) : void 0;
 		}
 	}));
-	c(() => {
-		if (h(), !d) return;
+	u(() => {
+		if (p(), !d) return;
 		let e = d;
-		d = void 0, u?.querySelector(`[data-taqwim-calendar-cell-trigger][data-value="${e}"]`)?.focus();
-	}), f(() => {
-		s.initialFocus && m.focusInitial();
+		d = void 0, l?.querySelector(`[data-taqwim-calendar-cell-trigger][data-value="${e}"]`)?.focus();
+	}), m(() => {
+		s.initialFocus && f.focusInitial();
 	});
-	let _ = (e) => {
-		m.handleKeydown(e) && e.preventDefault();
-	}, x = () => (h(), m.getRootProps());
-	return e(g.Provider, {
+	let g = (e) => {
+		f.handleKeydown(e) && e.preventDefault();
+	}, v = () => (p(), f.getRootProps());
+	return e(_.Provider, {
 		value: {
-			store: m,
-			state: h
+			store: f,
+			state: p
 		},
 		get children() {
-			var e = b(), n = e.firstChild, a = n.firstChild, c = u;
-			return typeof c == "function" ? o(c, e) : u = e, i(e, r(x, l, { onKeyDown: _ }), !1, !0), t(e, () => A(s.children, () => ({
+			var e = x(), i = e.firstChild, o = i.firstChild, u = l;
+			return typeof u == "function" ? a(u, e) : l = e, r(e, n(v, c, { onKeyDown: g }), !1, !0), t(e, () => j(s.children, () => ({
 				get months() {
-					return h().months;
+					return p().months;
 				},
 				get weekDays() {
-					return h().weekDays;
+					return p().weekDays;
+				},
+				get modelValue() {
+					return p().value;
+				},
+				get gregorianValue() {
+					return p().gregorianValue;
 				},
 				get state() {
-					return h();
+					return p();
 				},
-				store: m
-			})), n), t(a, () => h().fullCalendarLabel), e;
+				store: f
+			})), i), t(o, () => p().fullCalendarLabel), e;
 		}
 	});
 }
-function M(e) {
-	let { state: n } = _(), [a, o] = p(e, ["children"]);
-	return (() => {
-		var e = x();
-		return i(e, r({ get "aria-label"() {
-			return n().fullCalendarLabel;
-		} }, o), !1, !0), t(e, () => a.children), e;
-	})();
-}
 function N(e) {
-	let { state: a } = _(), [o, s] = p(e, ["children"]);
+	let { state: i } = v(), [a, o] = h(e, ["children"]);
 	return (() => {
 		var e = S();
-		return i(e, r({ get "data-disabled"() {
-			return a().disabled ? "" : void 0;
-		} }, s), !1, !0), t(e, (() => {
-			var e = n(() => o.children === void 0);
-			return () => e() ? a().headingValue : A(o.children, () => a().headingValue);
-		})()), e;
+		return r(e, n({ get "aria-label"() {
+			return i().fullCalendarLabel;
+		} }, o), !1, !0), t(e, () => a.children), e;
 	})();
 }
 function P(e) {
-	let { store: n, state: a } = _(), [o, s] = p(e, ["children"]), c = () => (a(), n.getPrevButtonProps());
+	let { state: i } = v(), a = "children" in e, [o, s] = h(e, ["children"]);
 	return (() => {
 		var e = C();
-		return i(e, r(c, s, {
-			get disabled() {
-				return a().isPrevDisabled;
-			},
-			onClick: () => n.prevPage()
-		}), !1, !0), t(e, () => A(o.children, () => a().isPrevDisabled)), e;
+		return r(e, n({ get "data-disabled"() {
+			return i().disabled ? "" : void 0;
+		} }, s), !1, !0), t(e, () => a ? j(o.children, () => i().headingValue) : i().headingValue), e;
 	})();
 }
 function F(e) {
-	let { store: n, state: a } = _(), [o, s] = p(e, ["children"]), c = () => (a(), n.getNextButtonProps());
+	let { store: i, state: a } = v(), [o, s] = h(e, ["children"]), c = () => (a(), i.getPrevButtonProps());
 	return (() => {
-		var e = C();
-		return i(e, r(c, s, {
+		var e = w();
+		return r(e, n(c, s, {
 			get disabled() {
-				return a().isNextDisabled;
+				return a().isPrevDisabled;
 			},
-			onClick: () => n.nextPage()
-		}), !1, !0), t(e, () => A(o.children, () => a().isNextDisabled)), e;
+			onClick: () => i.prevPage()
+		}), !1, !0), t(e, () => j(o.children, () => a().isPrevDisabled)), e;
 	})();
 }
 function I(e) {
-	let { store: n, state: a } = _(), [o, s] = p(e, ["month", "children"]), c = () => o.month ?? a().months[0], l = () => (a(), n.getGridProps(c()));
+	let { store: i, state: a } = v(), [o, s] = h(e, ["children"]), c = () => (a(), i.getNextButtonProps());
 	return (() => {
 		var e = w();
-		return i(e, r(l, s), !1, !0), t(e, () => A(o.children, c)), e;
+		return r(e, n(c, s, {
+			get disabled() {
+				return a().isNextDisabled;
+			},
+			onClick: () => i.nextPage()
+		}), !1, !0), t(e, () => j(o.children, () => a().isNextDisabled)), e;
 	})();
 }
 function L(e) {
-	let { state: n } = _(), [r, a] = p(e, ["children"]);
+	let { store: i, state: a } = v(), [o, s] = h(e, ["month", "children"]), c = () => o.month ?? a().months[0], l = () => (a(), i.getGridProps(c()));
 	return (() => {
 		var e = T();
-		return i(e, a, !1, !0), t(e, () => A(r.children, () => n().weekDays)), e;
+		return r(e, n(l, s), !1, !0), t(e, () => j(o.children, c)), e;
 	})();
 }
 function R(e) {
-	let [n, r] = p(e, ["children"]);
+	let { state: n } = v(), [i, a] = h(e, ["children"]);
 	return (() => {
 		var e = E();
-		return i(e, r, !1, !0), t(e, () => n.children), e;
+		return r(e, a, !1, !0), t(e, () => j(i.children, () => n().weekDays)), e;
 	})();
 }
 function z(e) {
-	let [n, r] = p(e, ["children"]);
+	let [n, i] = h(e, ["children"]);
 	return (() => {
 		var e = D();
-		return i(e, r, !1, !0), t(e, () => n.children), e;
+		return r(e, i, !1, !0), t(e, () => n.children), e;
 	})();
 }
 function B(e) {
-	let [n, r] = p(e, ["children"]);
+	let [n, i] = h(e, ["children"]);
 	return (() => {
 		var e = O();
-		return i(e, r, !1, !0), t(e, () => n.children), e;
+		return r(e, i, !1, !0), t(e, () => n.children), e;
 	})();
 }
 function V(e) {
-	let [n, a] = p(e, ["day", "children"]);
+	let [n, i] = h(e, ["children"]);
 	return (() => {
 		var e = k();
-		return i(e, r({
+		return r(e, i, !1, !0), t(e, () => n.children), e;
+	})();
+}
+function H(e) {
+	let [i, a] = h(e, ["day", "children"]);
+	return (() => {
+		var e = A();
+		return r(e, n({
 			get "aria-selected"() {
-				return n.day.isSelected || void 0;
+				return i.day.isSelected || void 0;
 			},
 			get "aria-disabled"() {
-				return n.day.isDisabled || n.day.isUnavailable || void 0;
+				return i.day.isDisabled || i.day.isUnavailable || void 0;
 			},
 			get "data-disabled"() {
-				return n.day.isDisabled ? "" : void 0;
+				return i.day.isDisabled ? "" : void 0;
 			},
 			get "data-outside-month"() {
-				return n.day.isOutsideMonth ? "" : void 0;
+				return i.day.isOutsideMonth ? "" : void 0;
 			}
-		}, a), !1, !0), t(e, () => n.children), e;
+		}, a), !1, !0), t(e, () => i.children), e;
 	})();
 }
-function H(e) {
-	let { store: a, state: o } = _(), [s, c] = p(e, ["day", "children"]), l = () => a.formatter.dayOfMonth(s.day.date), u = () => (o(), a.getCellTriggerProps(s.day));
-	function d() {
-		s.day.isDisabled || s.day.isUnavailable || a.select(s.day.date);
-	}
+function U(e) {
+	let { store: i, state: a } = v(), o = "children" in e, [c, l] = h(e, ["day", "children"]), u = () => s(c.day, i.formatter, a().showGregorian, a().dateEmphasis), d = () => (a(), i.getCellTriggerProps(c.day));
 	function f() {
-		s.day.isDisabled || s.day.isFocused || a.focusDate(s.day.date);
+		c.day.isDisabled || c.day.isUnavailable || i.select(c.day.date);
+	}
+	function p() {
+		c.day.isDisabled || c.day.isFocused || i.focusDate(c.day.date);
 	}
 	return (() => {
-		var e = C();
-		return i(e, r(u, c, {
-			onClick: d,
-			onFocus: f
-		}), !1, !0), t(e, (() => {
-			var e = n(() => s.children === void 0);
-			return () => e() ? l() : A(s.children, () => ({
-				dayValue: l(),
-				day: s.day
-			}));
-		})()), e;
+		var e = w();
+		return r(e, n(d, l, {
+			onClick: f,
+			onFocus: p
+		}), !1, !0), t(e, () => o ? j(c.children, () => ({
+			dayValue: u().dayValue,
+			hijriDayValue: u().hijriDayValue,
+			gregorianDayValue: u().gregorianDayValue,
+			primaryDayValue: u().primaryDayValue,
+			secondaryDayValue: u().secondaryDayValue,
+			day: c.day
+		})) : u().dayValue), e;
 	})();
 }
 //#endregion
-export { V as HijriCalendarCell, H as HijriCalendarCellTrigger, I as HijriCalendarGrid, R as HijriCalendarGridBody, L as HijriCalendarGridHead, z as HijriCalendarGridRow, B as HijriCalendarHeadCell, M as HijriCalendarHeader, N as HijriCalendarHeading, F as HijriCalendarNext, P as HijriCalendarPrev, j as HijriCalendarRoot, y as createCalendarStore, _ as useHijriCalendarContext };
+export { H as HijriCalendarCell, U as HijriCalendarCellTrigger, L as HijriCalendarGrid, z as HijriCalendarGridBody, R as HijriCalendarGridHead, B as HijriCalendarGridRow, V as HijriCalendarHeadCell, N as HijriCalendarHeader, P as HijriCalendarHeading, I as HijriCalendarNext, F as HijriCalendarPrev, M as HijriCalendarRoot, b as createCalendarStore, v as useHijriCalendarContext };

package/dist/source/HijriCalendar.d.ts

@@ -41,6 +41,10 @@ export declare function HijriCalendarCellTrigger(props: ButtonProps & {
     day: CalendarDay;
     children?: JSX.Element | ((props: {
         dayValue: string;
+        hijriDayValue: string;
+        gregorianDayValue: string;
+        primaryDayValue: string;
+        secondaryDayValue?: string;
         day: CalendarDay;
     }) => JSX.Element);
 }): JSX.Element;

package/dist/source/HijriCalendar.jsx

@@ -1,4 +1,5 @@
-import { createEffect, onMount, splitProps } from 'solid-js';
+import { getCellDisplayValues } from '@taqwim/calendar-core';
+import { children, createEffect, onMount, splitProps } from 'solid-js';
 import { HijriCalendarContext, useHijriCalendarContext } from './context';
 import { OPTION_KEYS } from './types';
 import { createCalendarStore } from './useCalendar';
@@ -29,8 +30,11 @@ import { createCalendarStore } from './useCalendar';
  * function, and the JSX subtree is created once and then updated in place by
  * the fine-grained bindings inside it.
  */
-function renderChildren(children, props) {
-    return typeof children === 'function' ? children(props()) : children;
+function renderChildren(raw, props) {
+    if (typeof raw !== 'function')
+        return raw;
+    const resolved = children(() => raw(props()));
+    return resolved();
 }
 export function HijriCalendarRoot(props) {
     const [options, local, domProps] = splitProps(props, OPTION_KEYS, ['children', 'initialFocus']);
@@ -79,6 +83,12 @@ export function HijriCalendarRoot(props) {
             get weekDays() {
                 return state().weekDays;
             },
+            get modelValue() {
+                return state().value;
+            },
+            get gregorianValue() {
+                return state().gregorianValue;
+            },
             get state() {
                 return state();
             },
@@ -113,9 +123,10 @@ export function HijriCalendarHeader(props) {
 }
 export function HijriCalendarHeading(props) {
     const { state } = useHijriCalendarContext();
+    const hasChildren = 'children' in props;
     const [local, rest] = splitProps(props, ['children']);
     return (<div data-taqwim-calendar-heading="" data-disabled={state().disabled ? '' : undefined} {...rest}>
-      {local.children === undefined ? state().headingValue : renderChildren(local.children, () => state().headingValue)}
+      {hasChildren ? renderChildren(local.children, () => state().headingValue) : state().headingValue}
     </div>);
 }
 export function HijriCalendarPrev(props) {
@@ -193,8 +204,9 @@ export function HijriCalendarCell(props) {
 }
 export function HijriCalendarCellTrigger(props) {
     const { store, state } = useHijriCalendarContext();
+    const hasChildren = 'children' in props;
     const [local, rest] = splitProps(props, ['day', 'children']);
-    const dayValue = () => store.formatter.dayOfMonth(local.day.date);
+    const display = () => getCellDisplayValues(local.day, store.formatter, state().showGregorian, state().dateEmphasis);
     /*
      * The prop getters read the store's snapshot directly, which is not a signal.
      * Touching `state()` here is what makes this a tracked dependency — without
@@ -220,8 +232,15 @@ export function HijriCalendarCellTrigger(props) {
         store.focusDate(local.day.date);
     }
     return (<button {...triggerProps()} {...rest} onClick={onClick} onFocus={onFocus}>
-      {local.children === undefined
-            ? dayValue()
-            : renderChildren(local.children, () => ({ dayValue: dayValue(), day: local.day }))}
+      {hasChildren
+            ? renderChildren(local.children, () => ({
+                dayValue: display().dayValue,
+                hijriDayValue: display().hijriDayValue,
+                gregorianDayValue: display().gregorianDayValue,
+                primaryDayValue: display().primaryDayValue,
+                secondaryDayValue: display().secondaryDayValue,
+                day: local.day,
+            }))
+            : display().dayValue}
     </button>);
 }

package/dist/source/types.d.ts

@@ -33,6 +33,9 @@ export interface HijriCalendarRootOptions {
     minValue?: HijriDateObject;
     maxValue?: HijriDateObject;
     locale?: string;
+    showGregorian?: boolean;
+    dateEmphasis?: import('@taqwim/calendar-core').DateEmphasis;
+    gregorianLocale?: string;
     dir?: 'ltr' | 'rtl';
     isDateDisabled?: Matcher;
     isDateUnavailable?: Matcher;
@@ -44,6 +47,8 @@ export interface HijriCalendarRootOptions {
 export interface HijriCalendarRenderProps {
     months: CalendarMonth[];
     weekDays: string[];
+    modelValue: HijriDateObject | HijriDateObject[] | undefined;
+    gregorianValue: Date | Date[] | undefined;
     state: CalendarState;
     store: CalendarStore;
 }
@@ -52,4 +57,4 @@ export type HijriCalendarRootProps = HijriCalendarRootOptions & Omit<JSX.HTMLAtt
     children?: JSX.Element | ((props: HijriCalendarRenderProps) => JSX.Element);
 };
 /** The option names, so the root can tell them from DOM attributes. */
-export declare const OPTION_KEYS: readonly ["defaultValue", "value", "onValueChange", "defaultPlaceholder", "placeholder", "onPlaceholderChange", "weekStartsOn", "weekdayFormat", "calendarLabel", "fixedWeeks", "numberOfMonths", "pagedNavigation", "multiple", "preventDeselect", "disableDaysOutsideCurrentView", "disabled", "readonly", "minValue", "maxValue", "locale", "dir", "isDateDisabled", "isDateUnavailable", "nextPage", "prevPage"];
+export declare const OPTION_KEYS: readonly ["defaultValue", "value", "onValueChange", "defaultPlaceholder", "placeholder", "onPlaceholderChange", "weekStartsOn", "weekdayFormat", "calendarLabel", "fixedWeeks", "numberOfMonths", "pagedNavigation", "multiple", "preventDeselect", "disableDaysOutsideCurrentView", "disabled", "readonly", "minValue", "maxValue", "locale", "showGregorian", "dateEmphasis", "gregorianLocale", "dir", "isDateDisabled", "isDateUnavailable", "nextPage", "prevPage"];

package/dist/source/types.js

@@ -20,6 +20,9 @@ export const OPTION_KEYS = [
     'minValue',
     'maxValue',
     'locale',
+    'showGregorian',
+    'dateEmphasis',
+    'gregorianLocale',
     'dir',
     'isDateDisabled',
     'isDateUnavailable',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taqwim/solid",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.4",
   "private": false,
   "description": "Headless Solid components for Hijri calendars, built on @taqwim/calendar-core",
   "keywords": [
@@ -46,8 +46,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@taqwim/core": "0.1.0-beta.2",
-    "@taqwim/calendar-core": "0.1.0-beta.2"
+    "@taqwim/calendar-core": "0.1.0-beta.4",
+    "@taqwim/core": "0.1.0-beta.4"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",