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

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 { createCalendar as s, getCellDisplayValues as c } from "@taqwim/calendar-core";
+import { 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 = s(e()), [n, r] = f(t.getSnapshot());
+	return p(t.subscribe(() => {
 		r(t.getSnapshot());
-	})), l(() => {
+	})), d(() => {
 		t.setOptions(e());
 	}), {
 		store: t,
@@ -52,133 +26,139 @@ 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) {
+var x = /*#__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>"), S = /*#__PURE__*/ a("<div role=group data-taqwim-calendar-header>"), C = /*#__PURE__*/ a("<div data-taqwim-calendar-heading>"), w = /*#__PURE__*/ a("<button>"), T = /*#__PURE__*/ a("<div tabindex=-1>"), E = /*#__PURE__*/ a("<div aria-hidden=true data-taqwim-calendar-grid-head>"), D = /*#__PURE__*/ a("<div data-taqwim-calendar-grid-body>"), O = /*#__PURE__*/ a("<div role=row data-taqwim-calendar-grid-row>"), k = /*#__PURE__*/ a("<div data-taqwim-calendar-head-cell>"), A = /*#__PURE__*/ a("<div role=gridcell data-taqwim-calendar-cell>");
+function j(e, t) {
 	return typeof e == "function" ? e(t()) : e;
 }
-function j(n) {
-	let [a, s, l] = p(n, v, ["children", "initialFocus"]), u, d, { store: m, state: h } = y(() => ({
+function M(n) {
+	let [a, s, c] = h(n, y, ["children", "initialFocus"]), l, d, { store: f, state: p } = b(() => ({
 		...a,
 		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(), n = e.firstChild, a = n.firstChild, u = l;
+			return typeof u == "function" ? o(u, e) : l = e, i(e, r(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
+			})), n), t(a, () => p().fullCalendarLabel), e;
 		}
 	});
 }
-function M(e) {
-	let { state: n } = _(), [a, o] = p(e, ["children"]);
+function N(e) {
+	let { state: n } = v(), [a, o] = h(e, ["children"]);
 	return (() => {
-		var e = x();
+		var e = S();
 		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"]);
+function P(e) {
+	let { state: a } = v(), [o, s] = h(e, ["children"]);
 	return (() => {
-		var e = S();
+		var e = C();
 		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);
+			return () => e() ? a().headingValue : j(o.children, () => a().headingValue);
 		})()), e;
 	})();
 }
-function P(e) {
-	let { store: n, state: a } = _(), [o, s] = p(e, ["children"]), c = () => (a(), n.getPrevButtonProps());
+function F(e) {
+	let { store: n, state: a } = v(), [o, s] = h(e, ["children"]), c = () => (a(), n.getPrevButtonProps());
 	return (() => {
-		var e = C();
+		var e = w();
 		return i(e, r(c, s, {
 			get disabled() {
 				return a().isPrevDisabled;
 			},
 			onClick: () => n.prevPage()
-		}), !1, !0), t(e, () => A(o.children, () => a().isPrevDisabled)), e;
+		}), !1, !0), t(e, () => j(o.children, () => a().isPrevDisabled)), e;
 	})();
 }
-function F(e) {
-	let { store: n, state: a } = _(), [o, s] = p(e, ["children"]), c = () => (a(), n.getNextButtonProps());
+function I(e) {
+	let { store: n, state: a } = v(), [o, s] = h(e, ["children"]), c = () => (a(), n.getNextButtonProps());
 	return (() => {
-		var e = C();
+		var e = w();
 		return i(e, r(c, s, {
 			get disabled() {
 				return a().isNextDisabled;
 			},
 			onClick: () => n.nextPage()
-		}), !1, !0), t(e, () => A(o.children, () => a().isNextDisabled)), 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()));
-	return (() => {
-		var e = w();
-		return i(e, r(l, s), !1, !0), t(e, () => A(o.children, c)), e;
+		}), !1, !0), t(e, () => j(o.children, () => a().isNextDisabled)), e;
 	})();
 }
 function L(e) {
-	let { state: n } = _(), [r, a] = p(e, ["children"]);
+	let { store: n, state: a } = v(), [o, s] = h(e, ["month", "children"]), c = () => o.month ?? a().months[0], l = () => (a(), n.getGridProps(c()));
 	return (() => {
 		var e = T();
-		return i(e, a, !1, !0), t(e, () => A(r.children, () => n().weekDays)), e;
+		return i(e, r(l, s), !1, !0), t(e, () => j(o.children, c)), e;
 	})();
 }
 function R(e) {
-	let [n, r] = p(e, ["children"]);
+	let { state: n } = v(), [r, a] = h(e, ["children"]);
 	return (() => {
 		var e = E();
-		return i(e, r, !1, !0), t(e, () => n.children), e;
+		return i(e, a, !1, !0), t(e, () => j(r.children, () => n().weekDays)), e;
 	})();
 }
 function z(e) {
-	let [n, r] = p(e, ["children"]);
+	let [n, r] = h(e, ["children"]);
 	return (() => {
 		var e = D();
 		return i(e, r, !1, !0), t(e, () => n.children), e;
 	})();
 }
 function B(e) {
-	let [n, r] = p(e, ["children"]);
+	let [n, r] = h(e, ["children"]);
 	return (() => {
 		var e = O();
 		return i(e, r, !1, !0), t(e, () => n.children), e;
 	})();
 }
 function V(e) {
-	let [n, a] = p(e, ["day", "children"]);
+	let [n, r] = h(e, ["children"]);
 	return (() => {
 		var e = k();
+		return i(e, r, !1, !0), t(e, () => n.children), e;
+	})();
+}
+function H(e) {
+	let [n, a] = h(e, ["day", "children"]);
+	return (() => {
+		var e = A();
 		return i(e, r({
 			get "aria-selected"() {
 				return n.day.isSelected || void 0;
@@ -195,27 +175,31 @@ function V(e) {
 		}, a), !1, !0), t(e, () => n.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() {
+function U(e) {
+	let { store: a, state: o } = v(), [s, l] = h(e, ["day", "children"]), u = () => c(s.day, a.formatter, o().showGregorian, o().dateEmphasis), d = () => (o(), a.getCellTriggerProps(s.day));
+	function f() {
 		s.day.isDisabled || s.day.isUnavailable || a.select(s.day.date);
 	}
-	function f() {
+	function p() {
 		s.day.isDisabled || s.day.isFocused || a.focusDate(s.day.date);
 	}
 	return (() => {
-		var e = C();
-		return i(e, r(u, c, {
-			onClick: d,
-			onFocus: f
+		var e = w();
+		return i(e, r(d, l, {
+			onClick: f,
+			onFocus: p
 		}), !1, !0), t(e, (() => {
 			var e = n(() => s.children === void 0);
-			return () => e() ? l() : A(s.children, () => ({
-				dayValue: l(),
+			return () => e() ? u().dayValue : j(s.children, () => ({
+				dayValue: u().dayValue,
+				hijriDayValue: u().hijriDayValue,
+				gregorianDayValue: u().gregorianDayValue,
+				primaryDayValue: u().primaryDayValue,
+				secondaryDayValue: u().secondaryDayValue,
 				day: s.day
 			}));
 		})()), 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,3 +1,4 @@
+import { getCellDisplayValues } from '@taqwim/calendar-core';
 import { createEffect, onMount, splitProps } from 'solid-js';
 import { HijriCalendarContext, useHijriCalendarContext } from './context';
 import { OPTION_KEYS } from './types';
@@ -79,6 +80,12 @@ export function HijriCalendarRoot(props) {
             get weekDays() {
                 return state().weekDays;
             },
+            get modelValue() {
+                return state().value;
+            },
+            get gregorianValue() {
+                return state().gregorianValue;
+            },
             get state() {
                 return state();
             },
@@ -194,7 +201,7 @@ export function HijriCalendarCell(props) {
 export function HijriCalendarCellTrigger(props) {
     const { store, state } = useHijriCalendarContext();
     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
@@ -221,7 +228,14 @@ export function HijriCalendarCellTrigger(props) {
     }
     return (<button {...triggerProps()} {...rest} onClick={onClick} onFocus={onFocus}>
       {local.children === undefined
-            ? dayValue()
-            : renderChildren(local.children, () => ({ dayValue: dayValue(), day: local.day }))}
+            ? display().dayValue
+            : renderChildren(local.children, () => ({
+                dayValue: display().dayValue,
+                hijriDayValue: display().hijriDayValue,
+                gregorianDayValue: display().gregorianDayValue,
+                primaryDayValue: display().primaryDayValue,
+                secondaryDayValue: display().secondaryDayValue,
+                day: local.day,
+            }))}
     </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.3",
   "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.3",
+    "@taqwim/core": "0.1.0-beta.3"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",