@saykit/react 0.6.1 → 0.8.0

package/README.md

@@ -23,7 +23,7 @@ function App() {
   return (
     <SayProvider locale="fr" messages={fr}>
       <Say>Hello, {name}!</Say>
-      <Say.Plural _={count} one="# item" other="# items" />
+      <Say.Plural _={count} one={<>{count} item</>} other={<>{count} items</>} />
     </SayProvider>
   );
 }

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from "react";
-import { Disallow, Named, NumeralOptions, SelectOptions } from "saykit";
+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
@@ -35,7 +35,7 @@ declare namespace Say {
    * <Say.Plural
    *   _={count}
    *   one="You have 1 item"
-   *   other="You have # items"
+   *   other={<>You have {count} items</>}
    * />
    * ```
    *
@@ -46,7 +46,7 @@ declare namespace Say {
    */
   function Plural(props: {
     _: number | Named<number>;
-  } & PropsWithJSXSafeKeys<Disallow<NumeralOptions, 'id' | 'context'>>): ReactNode;
+  } & PropsWithJSXSafeKeys<Disallow<NumeralOptions<ReactNode>, 'id' | 'context'>>): ReactNode;
   /**
    * Define an ordinal message (e.g. "1st", "2nd", "3rd").
    *
@@ -54,10 +54,10 @@ declare namespace Say {
    * ```tsx
    * <Say.Ordinal
    *   _={position}
-   *   1="#st"
-   *   2="#nd"
-   *   3="#rd"
-   *   other="#th"
+   *   1={<>{position}st</>}
+   *   2={<>{position}nd</>}
+   *   3={<>{position}rd</>}
+   *   other={<>{position}th</>}
    * />
    * ```
    *
@@ -68,7 +68,7 @@ declare namespace Say {
    */
   function Ordinal(props: {
     _: number | Named<number>;
-  } & PropsWithJSXSafeKeys<Disallow<NumeralOptions, 'id' | 'context'>>): ReactNode;
+  } & PropsWithJSXSafeKeys<Disallow<NumeralOptions<ReactNode>, 'id' | 'context'>>): ReactNode;
   /**
    * Define a select message, useful for handling gender, status, or other categories.
    *
@@ -88,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>;
-  } & PropsWithJSXSafeKeys<Disallow<SelectOptions, 'id' | 'context'>>): ReactNode;
+    _: string | number | Named<string | number>;
+  } & PropsWithJSXSafeKeys<Disallow<SelectOptions<ReactNode>, '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.1",
+  "version": "0.8.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.1"
+    "saykit": "^0.8.0"
   },
   "peerDependencies": {
     "react": "*",