@saykit/react 0.6.0 → 0.7.0

package/dist/index.d.mts

@@ -1,6 +1,17 @@
-import { PropsWithChildren, ReactElement, ReactNode } from "react";
-import { Disallow, Named, NumeralOptions, SelectOptions } from "saykit";
+import { ReactElement, ReactNode } from "react";
+import { DateTimeOptions, Disallow, Named, NumberOptions, NumeralOptions, SelectOptions } from "saykit";
 //#region src/types.d.ts
+/**
+ * What a message is allowed to contain. On top of everything React renders, a
+ * named placeholder — `{{ name: value }}` — reaches the type checker as a plain
+ * object child, so the object form has to be part of the contract even though
+ * nothing ever renders it: the transform reads the name off it and compiles the
+ * child away before React sees the tree.
+ */
+type SayNode = ReactNode | Named<unknown> | Iterable<SayNode>;
+type PropsWithSayChildren<P = unknown> = P & {
+  children?: SayNode;
+};
 type PropsWithJSXSafeKeys<T> = { [K in keyof T as K extends number | `${number}${string}` ? `_${K}` : K extends `_${number}${string}` ? never : K]: T[K]; };
 //#endregion
 //#region src/runtime/index.d.ts
@@ -11,7 +22,7 @@ type PropsWithJSXSafeKeys<T> = { [K in keyof T as K extends number | `${number}$
  * @returns The translation node for the descriptor
  * @remark This is a macro and must be used with the relevant saykit plugin
  */
-declare function Say(props: PropsWithChildren<Disallow<{
+declare function Say(props: PropsWithSayChildren<Disallow<{
   context?: string;
   whitespace?: boolean;
 }, 'id'>>): ReactElement;
@@ -77,8 +88,60 @@ declare namespace Say {
    * @remark This is a macro and must be used with the relevant saykit plugin
    */
   function Select(props: {
-    _: string | Named<string>;
+    _: string | number | Named<string | number>;
   } & PropsWithJSXSafeKeys<Disallow<SelectOptions, 'id' | 'context'>>): ReactNode;
+  /**
+   * Format a number the way the active locale writes one.
+   *
+   * Unlike `Say.Plural`, `Say.Ordinal`, and `Say.Select`, this is a fragment
+   * rather than a whole message, and is normally written inside one.
+   *
+   * @example
+   * ```tsx
+   * <Say>You have <Say.Number _={items.length} /> items</Say>
+   * <Say>Battery at <Say.Number _={level} style="percent" /></Say>
+   * ```
+   *
+   * @param props._ Number to format
+   * @param props.style Formatting style, either a named style or a literal number pattern
+   * @returns The formatted number, as a React node
+   * @remark This is a macro and must be used with the relevant saykit plugin
+   */
+  function Number(props: {
+    _: number | Named<number>;
+  } & Disallow<NumberOptions, 'id' | 'context'>): ReactNode;
+  /**
+   * Format the date portion of a value the way the active locale writes one.
+   *
+   * @example
+   * ```tsx
+   * <Say>Published <Say.Date _={post.publishedAt} style="medium" /></Say>
+   * ```
+   *
+   * @param props._ Date to format
+   * @param props.style Formatting style
+   * @returns The formatted date, as a React node
+   * @remark This is a macro and must be used with the relevant saykit plugin
+   */
+  function Date(props: {
+    _: globalThis.Date | number | Named<globalThis.Date | number>;
+  } & Disallow<DateTimeOptions, 'id' | 'context'>): ReactNode;
+  /**
+   * Format the time portion of a value the way the active locale writes one.
+   *
+   * @example
+   * ```tsx
+   * <Say>Doors open at <Say.Time _={opensAt} style="short" /></Say>
+   * ```
+   *
+   * @param props._ Date to format
+   * @param props.style Formatting style
+   * @returns The formatted time, as a React node
+   * @remark This is a macro and must be used with the relevant saykit plugin
+   */
+  function Time(props: {
+    _: globalThis.Date | number | Named<globalThis.Date | number>;
+  } & Disallow<DateTimeOptions, 'id' | 'context'>): ReactNode;
 }
 //#endregion
 export { Say };

package/dist/index.mjs

@@ -101,6 +101,18 @@ function Say(props) {
 		throw new Error("'Say.Select' is a macro and must be used with the relevant saykit plugin");
 	}
 	_Say.Select = Select;
+	function Number(props) {
+		throw new Error("'Say.Number' is a macro and must be used with the relevant saykit plugin");
+	}
+	_Say.Number = Number;
+	function Date(props) {
+		throw new Error("'Say.Date' is a macro and must be used with the relevant saykit plugin");
+	}
+	_Say.Date = Date;
+	function Time(props) {
+		throw new Error("'Say.Time' is a macro and must be used with the relevant saykit plugin");
+	}
+	_Say.Time = Time;
 })(Say || (Say = {}));
 //#endregion
 export { Say };

package/dist/index.server.mjs

@@ -101,6 +101,18 @@ function Say(props) {
 		throw new Error("'Say.Select' is a macro and must be used with the relevant saykit plugin");
 	}
 	_Say.Select = Select;
+	function Number(props) {
+		throw new Error("'Say.Number' is a macro and must be used with the relevant saykit plugin");
+	}
+	_Say.Number = Number;
+	function Date(props) {
+		throw new Error("'Say.Date' is a macro and must be used with the relevant saykit plugin");
+	}
+	_Say.Date = Date;
+	function Time(props) {
+		throw new Error("'Say.Time' is a macro and must be used with the relevant saykit plugin");
+	}
+	_Say.Time = Time;
 })(Say || (Say = {}));
 //#endregion
 export { Say };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saykit/react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React integration for saykit, i18n hooks and components",
   "keywords": [
     "i18n",
@@ -52,7 +52,7 @@
     "jsdom": "^29.1.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "saykit": "^0.6.0"
+    "saykit": "^0.7.0"
   },
   "peerDependencies": {
     "react": "*",