@taqwim/solid 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 boussadjra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# @taqwim/solid
+
+Headless Solid components for Hijri calendars. No styles, no markup opinions — just behaviour, accessibility and the `data-*` attributes to hang a design on.
+
+Want something that already looks like a calendar? Use [`@taqwim/solid-styled`](../solid-styled).
+
+## Install
+
+```sh
+pnpm add @taqwim/solid
+```
+
+Solid 1.8 or later.
+
+## Use
+
+```tsx
+import {
+  HijriCalendarCell,
+  HijriCalendarCellTrigger,
+  HijriCalendarGrid,
+  HijriCalendarGridBody,
+  HijriCalendarGridHead,
+  HijriCalendarGridRow,
+  HijriCalendarHeadCell,
+  HijriCalendarHeader,
+  HijriCalendarHeading,
+  HijriCalendarNext,
+  HijriCalendarPrev,
+  HijriCalendarRoot,
+} from '@taqwim/solid'
+import { createSignal, For, Index } from 'solid-js'
+
+export function Calendar() {
+  const [value, setValue] = createSignal()
+
+  return (
+    <HijriCalendarRoot value={value()} onValueChange={setValue} initialFocus>
+      {({ months, weekDays }) => (
+        <>
+          <HijriCalendarHeader>
+            <HijriCalendarPrev>←</HijriCalendarPrev>
+            <HijriCalendarHeading />
+            <HijriCalendarNext>→</HijriCalendarNext>
+          </HijriCalendarHeader>
+
+          <Index each={months}>
+            {month => (
+              <HijriCalendarGrid month={month()}>
+                <HijriCalendarGridHead>
+                  <HijriCalendarGridRow>
+                    <For each={weekDays}>{day => <HijriCalendarHeadCell>{day}</HijriCalendarHeadCell>}</For>
+                  </HijriCalendarGridRow>
+                </HijriCalendarGridHead>
+
+                <HijriCalendarGridBody>
+                  <Index each={month().weeks}>
+                    {week => (
+                      <HijriCalendarGridRow>
+                        <Index each={week()}>
+                          {day => (
+                            <HijriCalendarCell day={day()}>
+                              <HijriCalendarCellTrigger day={day()} />
+                            </HijriCalendarCell>
+                          )}
+                        </Index>
+                      </HijriCalendarGridRow>
+                    )}
+                  </Index>
+                </HijriCalendarGridBody>
+              </HijriCalendarGrid>
+            )}
+          </Index>
+        </>
+      )}
+    </HijriCalendarRoot>
+  )
+}
+```
+
+Use `Index` rather than `For` for the grid. The store rebuilds its arrays on every snapshot and `For` keys by reference, so it would throw away and recreate every cell on each change.
+
+## How it works
+
+All behaviour lives in [`@taqwim/calendar-core`](../calendar-core), a framework-free state machine. `HijriCalendarRoot` mirrors the store's snapshot into a signal and shares it through Solid context; every part spreads attributes the store computed.
+
+That is why the Vue, React, Svelte and Angular adapters behave identically: one implementation of grid layout, selection, paging and keyboard navigation, and one set of emitted attributes.
+
+Drop to the store directly with `createCalendarStore`:
+
+```ts
+import { createCalendarStore } from '@taqwim/solid'
+
+const { store, state } = createCalendarStore(() => ({ locale: 'ar', dir: 'rtl' }))
+```
+
+The accessor is a function so that reading props inside it registers them as dependencies — Solid props are getters, and destructuring would freeze the calendar at its initial configuration.
+
+The package ships uncompiled JSX under the `solid` export condition so your compiler can target DOM or SSR; `dist/index.js` is a DOM-compiled fallback for bundlers that ignore the condition.
+
+## Props
+
+The same names every adapter uses: `defaultValue` · `value` · `onValueChange` · `defaultPlaceholder` · `placeholder` · `onPlaceholderChange` · `weekStartsOn` · `weekdayFormat` · `numberOfMonths` · `pagedNavigation` · `fixedWeeks` · `multiple` · `preventDeselect` · `minValue` · `maxValue` · `isDateDisabled` · `isDateUnavailable` · `disableDaysOutsideCurrentView` · `disabled` · `readonly` · `locale` · `dir` · `initialFocus` · `nextPage` · `prevPage` · `calendarLabel`.
+
+`minValue`/`maxValue` disable the out-of-range days themselves, not only the paging buttons, and the matchers are enforced for keyboard selection as well as clicks.
+
+Full reference: [Calendar options](https://boussadjra.github.io/taqwim/reference/options/).
+
+## Keyboard
+
+| Key                           |                                                  |
+| ----------------------------- | ------------------------------------------------ |
+| `←` `→`                       | Previous / next day — mirrored under `dir="rtl"` |
+| `↑` `↓`                       | Previous / next week                             |
+| `Home` `End`                  | First / last day of the week                     |
+| `PageUp` `PageDown`           | Previous / next month                            |
+| `Shift` + `PageUp`/`PageDown` | Previous / next year                             |
+| `Enter` `Space`               | Select the focused day                           |
+
+A roving tabindex keeps exactly one cell in the tab order, so `Tab` enters and leaves the grid rather than walking 42 buttons.
+
+## Attributes to style against
+
+Root `[data-taqwim-calendar]`, with `data-disabled`, `data-readonly`, `data-invalid`.
+Cell trigger `[data-taqwim-calendar-cell-trigger]`, with `data-selected`, `data-today`, `data-outside-month`, `data-disabled`, `data-unavailable`, `data-focused`, `data-value` (`iYYYY-iMM-iDD`).
+
+[`@taqwim/themes`](../themes) is a ready-made stylesheet over exactly these.
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,221 @@
+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";
+//#region src/context.ts
+var g = s();
+function _() {
+	let e = m(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"
+];
+//#endregion
+//#region src/useCalendar.ts
+function y(e) {
+	let t = h(e()), [n, r] = u(t.getSnapshot());
+	return d(t.subscribe(() => {
+		r(t.getSnapshot());
+	})), l(() => {
+		t.setOptions(e());
+	}), {
+		store: t,
+		state: n
+	};
+}
+//#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;
+}
+function j(n) {
+	let [a, s, l] = p(n, v, ["children", "initialFocus"]), u, d, { store: m, state: h } = y(() => ({
+		...a,
+		onFocusedDateChange: (e) => {
+			d = e ? m.formatter.isoDate(e) : void 0;
+		}
+	}));
+	c(() => {
+		if (h(), !d) return;
+		let e = d;
+		d = void 0, u?.querySelector(`[data-taqwim-calendar-cell-trigger][data-value="${e}"]`)?.focus();
+	}), f(() => {
+		s.initialFocus && m.focusInitial();
+	});
+	let _ = (e) => {
+		m.handleKeydown(e) && e.preventDefault();
+	}, x = () => (h(), m.getRootProps());
+	return e(g.Provider, {
+		value: {
+			store: m,
+			state: h
+		},
+		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, () => ({
+				get months() {
+					return h().months;
+				},
+				get weekDays() {
+					return h().weekDays;
+				},
+				get state() {
+					return h();
+				},
+				store: m
+			})), n), t(a, () => h().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"]);
+	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;
+	})();
+}
+function P(e) {
+	let { store: n, state: a } = _(), [o, s] = p(e, ["children"]), c = () => (a(), n.getPrevButtonProps());
+	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;
+	})();
+}
+function F(e) {
+	let { store: n, state: a } = _(), [o, s] = p(e, ["children"]), c = () => (a(), n.getNextButtonProps());
+	return (() => {
+		var e = C();
+		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;
+	})();
+}
+function L(e) {
+	let { state: n } = _(), [r, a] = p(e, ["children"]);
+	return (() => {
+		var e = T();
+		return i(e, a, !1, !0), t(e, () => A(r.children, () => n().weekDays)), e;
+	})();
+}
+function R(e) {
+	let [n, r] = p(e, ["children"]);
+	return (() => {
+		var e = E();
+		return i(e, r, !1, !0), t(e, () => n.children), e;
+	})();
+}
+function z(e) {
+	let [n, r] = p(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"]);
+	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"]);
+	return (() => {
+		var e = k();
+		return i(e, r({
+			get "aria-selected"() {
+				return n.day.isSelected || void 0;
+			},
+			get "aria-disabled"() {
+				return n.day.isDisabled || n.day.isUnavailable || void 0;
+			},
+			get "data-disabled"() {
+				return n.day.isDisabled ? "" : void 0;
+			},
+			get "data-outside-month"() {
+				return n.day.isOutsideMonth ? "" : void 0;
+			}
+		}, 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() {
+		s.day.isDisabled || s.day.isUnavailable || a.select(s.day.date);
+	}
+	function f() {
+		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
+		}), !1, !0), t(e, (() => {
+			var e = n(() => s.children === void 0);
+			return () => e() ? l() : A(s.children, () => ({
+				dayValue: l(),
+				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 };

package/dist/source/HijriCalendar.d.ts

@@ -0,0 +1,47 @@
+import type { CalendarDay, CalendarMonth } from '@taqwim/calendar-core';
+import { type JSX } from 'solid-js';
+import { type HijriCalendarRootProps } from './types';
+type DivProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;
+type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'type'>;
+export declare function HijriCalendarRoot(props: HijriCalendarRootProps): JSX.Element;
+export declare function HijriCalendarHeader(props: DivProps & {
+    children?: JSX.Element;
+}): JSX.Element;
+export declare function HijriCalendarHeading(props: DivProps & {
+    children?: JSX.Element | ((headingValue: string) => JSX.Element);
+}): JSX.Element;
+export declare function HijriCalendarPrev(props: ButtonProps & {
+    children?: JSX.Element | ((disabled: boolean) => JSX.Element);
+}): JSX.Element;
+export declare function HijriCalendarNext(props: ButtonProps & {
+    children?: JSX.Element | ((disabled: boolean) => JSX.Element);
+}): JSX.Element;
+export declare function HijriCalendarGrid(props: DivProps & {
+    /** Optional for the single-month case, where it defaults to the only month. */
+    month?: CalendarMonth;
+    children?: JSX.Element | ((month: CalendarMonth) => JSX.Element);
+}): JSX.Element;
+export declare function HijriCalendarGridHead(props: DivProps & {
+    children?: JSX.Element | ((weekDays: string[]) => JSX.Element);
+}): JSX.Element;
+export declare function HijriCalendarGridBody(props: DivProps & {
+    children?: JSX.Element;
+}): JSX.Element;
+export declare function HijriCalendarGridRow(props: DivProps & {
+    children?: JSX.Element;
+}): JSX.Element;
+export declare function HijriCalendarHeadCell(props: DivProps & {
+    children?: JSX.Element;
+}): JSX.Element;
+export declare function HijriCalendarCell(props: DivProps & {
+    day: CalendarDay;
+    children?: JSX.Element;
+}): JSX.Element;
+export declare function HijriCalendarCellTrigger(props: ButtonProps & {
+    day: CalendarDay;
+    children?: JSX.Element | ((props: {
+        dayValue: string;
+        day: CalendarDay;
+    }) => JSX.Element);
+}): JSX.Element;
+export {};

package/dist/source/HijriCalendar.jsx

@@ -0,0 +1,227 @@
+import { createEffect, onMount, splitProps } from 'solid-js';
+import { HijriCalendarContext, useHijriCalendarContext } from './context';
+import { OPTION_KEYS } from './types';
+import { createCalendarStore } from './useCalendar';
+/*
+ * Every part below spreads props the store computed. Because those are the same
+ * `data-*` and `aria-*` attributes the Vue and React adapters emit,
+ * `@taqwim/themes` styles all of them and one Playwright spec covers all of
+ * them.
+ *
+ * Props are never destructured — Solid props are getters, and destructuring
+ * would read them once and lose reactivity.
+ */
+/*
+ * `props` is an accessor, not a value, and that is the whole point.
+ *
+ * Every call site sits inside a JSX expression, which Solid compiles into a
+ * tracked computation. Passing `month()` or `state().weekDays` evaluates the
+ * signal *to build the argument*, which subscribes the computation to it — so
+ * every store change threw the subtree away and built a new one, even for the
+ * common case where `children` is plain JSX and the argument is never used.
+ *
+ * For the grid that was not a performance detail. A browser focuses a button
+ * before it clicks it, the focus handler calls `store.focusDate`, and Solid
+ * delegates `click` to the document: the click was dispatched at a button that
+ * had already been replaced, and selection by mouse did not work at all.
+ *
+ * Read lazily, the argument is only built when a caller actually passed a
+ * 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;
+}
+export function HijriCalendarRoot(props) {
+    const [options, local, domProps] = splitProps(props, OPTION_KEYS, ['children', 'initialFocus']);
+    let rootElement;
+    // Set by the store when the roving focus moves; consumed after the render.
+    let pendingFocus;
+    const { store, state } = createCalendarStore(() => ({
+        ...options,
+        onFocusedDateChange: date => {
+            pendingFocus = date ? store.formatter.isoDate(date) : undefined;
+        },
+    }));
+    /*
+     * The store owns which date has focus; the adapter owns the DOM. Solid's
+     * effects run after the DOM is updated, so the target cell exists even when
+     * the move paged the calendar into a month that was not rendered a moment
+     * ago.
+     */
+    createEffect(() => {
+        // Read the state so this re-runs on every change.
+        state();
+        if (!pendingFocus)
+            return;
+        const value = pendingFocus;
+        pendingFocus = undefined;
+        rootElement?.querySelector(`[data-taqwim-calendar-cell-trigger][data-value="${value}"]`)?.focus();
+    });
+    onMount(() => {
+        if (local.initialFocus)
+            store.focusInitial();
+    });
+    const onKeyDown = event => {
+        if (store.handleKeydown(event))
+            event.preventDefault();
+    };
+    const rootProps = () => {
+        void state();
+        return store.getRootProps();
+    };
+    return (<HijriCalendarContext.Provider value={{ store, state }}>
+      <div ref={rootElement} {...rootProps()} {...domProps} onKeyDown={onKeyDown}>
+        {renderChildren(local.children, () => ({
+            get months() {
+                return state().months;
+            },
+            get weekDays() {
+                return state().weekDays;
+            },
+            get state() {
+                return state();
+            },
+            store,
+        }))}
+
+        {/* Inlined rather than classed: the headless package must not require a stylesheet. */}
+        <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}>
+            {state().fullCalendarLabel}
+          </div>
+        </div>
+      </div>
+    </HijriCalendarContext.Provider>);
+}
+export function HijriCalendarHeader(props) {
+    const { state } = useHijriCalendarContext();
+    const [local, rest] = splitProps(props, ['children']);
+    return (<div role="group" aria-label={state().fullCalendarLabel} data-taqwim-calendar-header="" {...rest}>
+      {local.children}
+    </div>);
+}
+export function HijriCalendarHeading(props) {
+    const { state } = useHijriCalendarContext();
+    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)}
+    </div>);
+}
+export function HijriCalendarPrev(props) {
+    const { store, state } = useHijriCalendarContext();
+    const [local, rest] = splitProps(props, ['children']);
+    const prevProps = () => {
+        void state();
+        return store.getPrevButtonProps();
+    };
+    return (<button {...prevProps()} {...rest} disabled={state().isPrevDisabled} onClick={() => store.prevPage()}>
+      {renderChildren(local.children, () => state().isPrevDisabled)}
+    </button>);
+}
+export function HijriCalendarNext(props) {
+    const { store, state } = useHijriCalendarContext();
+    const [local, rest] = splitProps(props, ['children']);
+    const nextProps = () => {
+        void state();
+        return store.getNextButtonProps();
+    };
+    return (<button {...nextProps()} {...rest} disabled={state().isNextDisabled} onClick={() => store.nextPage()}>
+      {renderChildren(local.children, () => state().isNextDisabled)}
+    </button>);
+}
+export function HijriCalendarGrid(props) {
+    const { store, state } = useHijriCalendarContext();
+    const [local, rest] = splitProps(props, ['month', 'children']);
+    const month = () => local.month ?? state().months[0];
+    const gridProps = () => {
+        void state();
+        return store.getGridProps(month());
+    };
+    return (<div tabindex={-1} {...gridProps()} {...rest}>
+      {/*
+          `month`, not `month()`. Handing over the accessor keeps this expression
+          from reading the store, so the grid is built once and then updated in
+          place; passing the value rebuilt every cell on every state change and
+          broke selection by mouse outright. See `renderChildren` above.
+        */}
+      {renderChildren(local.children, month)}
+    </div>);
+}
+export function HijriCalendarGridHead(props) {
+    const { state } = useHijriCalendarContext();
+    const [local, rest] = splitProps(props, ['children']);
+    // The weekday row duplicates each cell's accessible label, so it is hidden
+    // from assistive technology rather than read out twice.
+    return (<div aria-hidden="true" data-taqwim-calendar-grid-head="" {...rest}>
+      {renderChildren(local.children, () => state().weekDays)}
+    </div>);
+}
+export function HijriCalendarGridBody(props) {
+    const [local, rest] = splitProps(props, ['children']);
+    return (<div data-taqwim-calendar-grid-body="" {...rest}>
+      {local.children}
+    </div>);
+}
+export function HijriCalendarGridRow(props) {
+    const [local, rest] = splitProps(props, ['children']);
+    return (<div role="row" data-taqwim-calendar-grid-row="" {...rest}>
+      {local.children}
+    </div>);
+}
+export function HijriCalendarHeadCell(props) {
+    const [local, rest] = splitProps(props, ['children']);
+    return (<div data-taqwim-calendar-head-cell="" {...rest}>
+      {local.children}
+    </div>);
+}
+export function HijriCalendarCell(props) {
+    const [local, rest] = splitProps(props, ['day', 'children']);
+    return (<div role="gridcell" aria-selected={local.day.isSelected || undefined} aria-disabled={local.day.isDisabled || local.day.isUnavailable || undefined} data-taqwim-calendar-cell="" data-disabled={local.day.isDisabled ? '' : undefined} data-outside-month={local.day.isOutsideMonth ? '' : undefined} {...rest}>
+      {local.children}
+    </div>);
+}
+export function HijriCalendarCellTrigger(props) {
+    const { store, state } = useHijriCalendarContext();
+    const [local, rest] = splitProps(props, ['day', 'children']);
+    const dayValue = () => store.formatter.dayOfMonth(local.day.date);
+    /*
+     * 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
+     * it the attributes only refresh when the day object happens to change
+     * identity, which leaves the rendered selection one interaction behind.
+     */
+    const triggerProps = () => {
+        void state();
+        return store.getCellTriggerProps(local.day);
+    };
+    function onClick() {
+        // `select` re-checks these itself; this only avoids the pointless call.
+        if (local.day.isDisabled || local.day.isUnavailable)
+            return;
+        store.select(local.day.date);
+    }
+    function onFocus() {
+        // Tabbing or clicking into a cell makes it the roving-focus target.
+        // Re-reporting a date the store already holds would echo its own
+        // programmatic `.focus()` back at it, so that case is skipped.
+        if (local.day.isDisabled || local.day.isFocused)
+            return;
+        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 }))}
+    </button>);
+}

package/dist/source/context.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarState, CalendarStore } from '@taqwim/calendar-core';
+import { type Accessor } from 'solid-js';
+export interface HijriCalendarContextValue {
+    store: CalendarStore;
+    state: Accessor<CalendarState>;
+}
+declare const HijriCalendarContext: import("solid-js").Context<HijriCalendarContextValue | undefined>;
+export { HijriCalendarContext };
+export declare function useHijriCalendarContext(): HijriCalendarContextValue;

package/dist/source/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'solid-js';
+const HijriCalendarContext = createContext();
+export { HijriCalendarContext };
+export function useHijriCalendarContext() {
+    const context = useContext(HijriCalendarContext);
+    if (!context) {
+        throw new Error('Taqwim calendar parts must be rendered inside <HijriCalendarRoot>');
+    }
+    return context;
+}

package/dist/source/index.d.ts

@@ -0,0 +1,5 @@
+export { HijriCalendarCell, HijriCalendarCellTrigger, HijriCalendarGrid, HijriCalendarGridBody, HijriCalendarGridHead, HijriCalendarGridRow, HijriCalendarHeadCell, HijriCalendarHeader, HijriCalendarHeading, HijriCalendarNext, HijriCalendarPrev, HijriCalendarRoot, } from './HijriCalendar';
+export { useHijriCalendarContext, type HijriCalendarContextValue } from './context';
+export type { HijriCalendarRenderProps, HijriCalendarRootOptions, HijriCalendarRootProps } from './types';
+export { createCalendarStore, type UseCalendarReturn } from './useCalendar';
+export type { CalendarDay, CalendarFormatter, CalendarMonth, CalendarOptions, CalendarState, CalendarStore, Direction, Matcher, WeekDayFormat, WeekStartsOn, } from '@taqwim/calendar-core';

package/dist/source/index.js

@@ -0,0 +1,3 @@
+export { HijriCalendarCell, HijriCalendarCellTrigger, HijriCalendarGrid, HijriCalendarGridBody, HijriCalendarGridHead, HijriCalendarGridRow, HijriCalendarHeadCell, HijriCalendarHeader, HijriCalendarHeading, HijriCalendarNext, HijriCalendarPrev, HijriCalendarRoot, } from './HijriCalendar';
+export { useHijriCalendarContext } from './context';
+export { createCalendarStore } from './useCalendar';

package/dist/source/types.d.ts

@@ -0,0 +1,55 @@
+import type { CalendarMonth, CalendarState, CalendarStore, Matcher, WeekDayFormat, WeekStartsOn } from '@taqwim/calendar-core';
+import type { HijriDateObject } from '@taqwim/core';
+import type { JSX } from 'solid-js';
+/**
+ * Deliberately the same names as the Vue and React adapters.
+ *
+ * Parity is a hard requirement — the shared end-to-end suite runs one spec file
+ * against every framework — so the surfaces differ only where the host
+ * framework forces it.
+ */
+export interface HijriCalendarRootOptions {
+    /** Initial selection, for uncontrolled use. */
+    defaultValue?: HijriDateObject | HijriDateObject[];
+    /** Controlled selection. */
+    value?: HijriDateObject | HijriDateObject[] | undefined;
+    onValueChange?: (value: HijriDateObject | HijriDateObject[] | undefined) => void;
+    /** Month to display when nothing is selected. */
+    defaultPlaceholder?: HijriDateObject;
+    /** Controlled placeholder. */
+    placeholder?: HijriDateObject;
+    onPlaceholderChange?: (placeholder: HijriDateObject) => void;
+    weekStartsOn?: WeekStartsOn;
+    weekdayFormat?: WeekDayFormat;
+    calendarLabel?: string;
+    fixedWeeks?: boolean;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    multiple?: boolean;
+    preventDeselect?: boolean;
+    disableDaysOutsideCurrentView?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    minValue?: HijriDateObject;
+    maxValue?: HijriDateObject;
+    locale?: string;
+    dir?: 'ltr' | 'rtl';
+    isDateDisabled?: Matcher;
+    isDateUnavailable?: Matcher;
+    nextPage?: (placeholder: HijriDateObject) => HijriDateObject;
+    prevPage?: (placeholder: HijriDateObject) => HijriDateObject;
+    /** Focus the selected day, today, or the first of the month on mount. */
+    initialFocus?: boolean;
+}
+export interface HijriCalendarRenderProps {
+    months: CalendarMonth[];
+    weekDays: string[];
+    state: CalendarState;
+    store: CalendarStore;
+}
+export type HijriCalendarRootProps = HijriCalendarRootOptions & Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'dir'> & {
+    /** A render function is the Solid equivalent of Vue's scoped slot. */
+    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"];

package/dist/source/types.js

@@ -0,0 +1,28 @@
+/** The option names, so the root can tell them from DOM attributes. */
+export const OPTION_KEYS = [
+    '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',
+];

package/dist/source/useCalendar.d.ts

@@ -0,0 +1,14 @@
+import type { CalendarOptions, CalendarState, CalendarStore } from '@taqwim/calendar-core';
+import { type Accessor } from 'solid-js';
+export interface UseCalendarReturn {
+    store: CalendarStore;
+    state: Accessor<CalendarState>;
+}
+/**
+ * Binds a `@taqwim/calendar-core` store to Solid's reactivity.
+ *
+ * `options` is an accessor so that reading props inside it registers them as
+ * dependencies of the effect below — Solid props are getters, so destructuring
+ * them here would freeze the calendar at its initial configuration.
+ */
+export declare function createCalendarStore(options: Accessor<CalendarOptions>): UseCalendarReturn;

package/dist/source/useCalendar.js

@@ -0,0 +1,30 @@
+import { createCalendar } from '@taqwim/calendar-core';
+import { createRenderEffect, createSignal, onCleanup } from 'solid-js';
+/**
+ * Binds a `@taqwim/calendar-core` store to Solid's reactivity.
+ *
+ * `options` is an accessor so that reading props inside it registers them as
+ * dependencies of the effect below — Solid props are getters, so destructuring
+ * them here would freeze the calendar at its initial configuration.
+ */
+export function createCalendarStore(options) {
+    const store = createCalendar(options());
+    const [state, setState] = createSignal(store.getSnapshot());
+    onCleanup(store.subscribe(() => {
+        setState(store.getSnapshot());
+    }));
+    /*
+     * A render effect, not a plain effect: options have to reach the store
+     * before the components read the snapshot for this render. With
+     * `createEffect` the push lands after the DOM is written, so a controlled
+     * `value` handed back through `onValueChange` shows up one interaction late.
+     *
+     * Safe to run on every dependency change — the store compares the state it
+     * builds and stays quiet when nothing observable moved, so this cannot feed
+     * back into itself.
+     */
+    createRenderEffect(() => {
+        store.setOptions(options());
+    });
+    return { store, state };
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@taqwim/solid",
+  "version": "0.1.0-beta.0",
+  "private": false,
+  "description": "Headless Solid components for Hijri calendars, built on @taqwim/calendar-core",
+  "keywords": [
+    "accessibility",
+    "calendar",
+    "datepicker",
+    "headless",
+    "hijri",
+    "islamic",
+    "solid",
+    "solid-js",
+    "taqwim",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "Brahim Boussadjra",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boussadjra/taqwim.git",
+    "directory": "packages/solid"
+  },
+  "files": [
+    "dist/**/*",
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/source/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/source/index.d.ts",
+      "solid": "./dist/source/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@taqwim/calendar-core": "0.1.0-beta.0",
+    "@taqwim/core": "0.1.0-beta.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/dom": "^10.4.0",
+    "jsdom": "^26.1.0",
+    "publint": "^0.3.14",
+    "solid-js": "^1.9.14",
+    "typescript": "~5.9.3",
+    "vite": "^8.1.5",
+    "vite-plugin-solid": "^2.11.14",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "_comment": "build / test are declared as vp tasks in vite.config.ts",
+    "test:watch": "vp exec vitest"
+  }
+}