@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.2

package/dist/esm/components/editors/cell-format/number-formats.d.ts

@@ -0,0 +1,90 @@
+import type { NumberFormat, NumberFormatType } from "@rowsncolumns/spreadsheet";
+export type NumberCategoryId = "general" | "number" | "currency" | "accounting" | "date" | "time" | "percentage" | "fraction" | "scientific" | "text" | "special" | "custom";
+export type NumberCategory = {
+    id: NumberCategoryId;
+    name: string;
+    type: NumberFormatType;
+    description: string;
+};
+/** Excel's category list, in Excel's order. */
+export declare const NUMBER_CATEGORIES: NumberCategory[];
+/** Excel's four "Negative numbers" styles. */
+export type NegativeStyle = "minus" | "red" | "parens" | "redParens";
+export declare const NEGATIVE_STYLES: NegativeStyle[];
+/** Number: decimal places, 1000 separator, negative numbers. */
+export declare const buildNumberPattern: ({ decimals, thousands, negative, }: {
+    decimals: number;
+    thousands: boolean;
+    negative: NegativeStyle;
+}) => string;
+/** Currency: decimal places, symbol, negative numbers. */
+export declare const buildCurrencyPattern: ({ decimals, symbol, negative, }: {
+    decimals: number;
+    symbol: string;
+    negative: NegativeStyle;
+}) => string;
+/**
+ * Accounting: decimal places and symbol. The symbol sits at the left edge
+ * (`* ` repeats the space to fill the cell), zero shows a dash, and the `_(`
+ * / `_)` paddings line the decimal points up across positive and negative.
+ */
+export declare const buildAccountingPattern: ({ decimals, symbol, }: {
+    decimals: number;
+    symbol: string;
+}) => string;
+export declare const buildPercentPattern: (decimals: number) => string;
+export declare const buildScientificPattern: (decimals: number) => string;
+/** Excel's Currency / Accounting symbol list (a representative subset). */
+export declare const CURRENCY_SYMBOLS: {
+    symbol: string;
+    label: string;
+}[];
+export declare const FRACTION_TYPES: {
+    label: string;
+    pattern: string;
+}[];
+/** Excel's Special types for English (United States). */
+export declare const SPECIAL_TYPES: {
+    label: string;
+    pattern: string;
+}[];
+/** Locales offered by the Date / Time / Special "Locale (location)" list. */
+export type FormatLocale = {
+    /** BCP-47 tag. */
+    tag: string;
+    label: string;
+    /** Windows LCID (hex) written as Excel's `[$-xxxx]` locale prefix. */
+    lcid: string;
+    /** Day before month in the short date. */
+    dayFirst: boolean;
+};
+export declare const FORMAT_LOCALES: FormatLocale[];
+export declare const findFormatLocale: (tag: string | undefined) => FormatLocale;
+/**
+ * The Date / Time types for a locale. The default locale's codes are written
+ * bare (they follow the workbook); another locale's carry Excel's
+ * `[$-lcid]` prefix so the cell keeps that locale's names and order.
+ */
+export declare const getDateTimeTypes: (kind: "date" | "time", locale: FormatLocale, defaultLocale: FormatLocale) => string[];
+/** The locale a format code's `[$-lcid]` prefix names, if any. */
+export declare const getPatternLocale: (pattern: string | null | undefined) => FormatLocale | undefined;
+/** The pieces the Number / Currency options read back off a code. */
+export declare const parseNumericPattern: (pattern: string | null | undefined) => {
+    decimals: number;
+    thousands: boolean;
+    negative: NegativeStyle;
+    symbol: string;
+};
+/** Which category a cell's number format opens the Number tab on. */
+export declare const detectCategory: (format: NumberFormat | null | undefined) => NumberCategoryId;
+/** The format a category gets when it is first picked (Excel's defaults). */
+export declare const defaultFormatForCategory: (id: NumberCategoryId, { currencySymbol, locale, defaultLocale, }: {
+    currencySymbol: string;
+    locale: FormatLocale;
+    defaultLocale: FormatLocale;
+}) => NumberFormat | null;
+/** Excel's Custom type list (the built-in codes). */
+export declare const CUSTOM_PATTERNS: string[];
+/** The NumberFormatType a typed custom code is closest to. */
+export declare const inferTypeFromPattern: (pattern: string) => NumberFormatType;
+//# sourceMappingURL=number-formats.d.ts.map

package/dist/esm/components/editors/cell-format/number-formats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-formats.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/number-formats.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/editors/cell-format/number-formats.js

@@ -0,0 +1,383 @@
+/** Excel's category list, in Excel's order. */
+export const NUMBER_CATEGORIES = [
+    {
+        id: "general",
+        name: "General",
+        type: "GENERAL",
+        description: "General format cells have no specific number format.",
+    },
+    {
+        id: "number",
+        name: "Number",
+        type: "NUMBER",
+        description: "Number is used for general display of numbers. Currency and Accounting offer specialized formatting for monetary value.",
+    },
+    {
+        id: "currency",
+        name: "Currency",
+        type: "CURRENCY",
+        description: "Currency formats are used for general monetary values. Use Accounting formats to align decimal points in a column.",
+    },
+    {
+        id: "accounting",
+        name: "Accounting",
+        type: "ACCOUNTING",
+        description: "Accounting formats line up the currency symbols and decimal points in a column.",
+    },
+    {
+        id: "date",
+        name: "Date",
+        type: "DATE",
+        description: "Date formats display date and time serial numbers as date values.",
+    },
+    {
+        id: "time",
+        name: "Time",
+        type: "DATE_TIME",
+        description: "Time formats display date and time serial numbers as time values.",
+    },
+    {
+        id: "percentage",
+        name: "Percentage",
+        type: "PERCENT",
+        description: "Percentage formats multiply the cell value by 100 and display the result with a percent symbol.",
+    },
+    {
+        id: "fraction",
+        name: "Fraction",
+        type: "FRACTION",
+        description: "Fraction formats display a number as a fraction.",
+    },
+    {
+        id: "scientific",
+        name: "Scientific",
+        type: "SCIENTIFIC",
+        description: "Scientific formats display a number in exponential notation.",
+    },
+    {
+        id: "text",
+        name: "Text",
+        type: "TEXT",
+        description: "Text format cells are treated as text even when a number is in the cell. The cell is displayed exactly as entered.",
+    },
+    {
+        id: "special",
+        name: "Special",
+        type: "SPECIAL",
+        description: "Special formats are useful for tracking list and database values.",
+    },
+    {
+        id: "custom",
+        name: "Custom",
+        type: "NUMBER",
+        description: "Type the number format code, using one of the existing codes as a starting point.",
+    },
+];
+export const NEGATIVE_STYLES = [
+    "minus",
+    "red",
+    "parens",
+    "redParens",
+];
+const digits = (decimals, thousands) => {
+    const d = Math.max(0, Math.min(30, Math.floor(decimals)));
+    const base = thousands ? "#,##0" : "0";
+    return d > 0 ? `${base}.${"0".repeat(d)}` : base;
+};
+/** `prefix` wraps a currency symbol in quotes so it never reads as a code. */
+const symbolPrefix = (symbol) => symbol ? `"${symbol.replace(/"/g, "")}"` : "";
+const withNegative = (positive, style) => {
+    switch (style) {
+        case "red":
+            return `${positive};[Red]${positive}`;
+        case "parens":
+            return `${positive}_);(${positive})`;
+        case "redParens":
+            return `${positive}_);[Red](${positive})`;
+        default:
+            return positive;
+    }
+};
+/** Number: decimal places, 1000 separator, negative numbers. */
+export const buildNumberPattern = ({ decimals, thousands, negative, }) => withNegative(digits(decimals, thousands), negative);
+/** Currency: decimal places, symbol, negative numbers. */
+export const buildCurrencyPattern = ({ decimals, symbol, negative, }) => withNegative(`${symbolPrefix(symbol)}${digits(decimals, true)}`, negative);
+/**
+ * Accounting: decimal places and symbol. The symbol sits at the left edge
+ * (`* ` repeats the space to fill the cell), zero shows a dash, and the `_(`
+ * / `_)` paddings line the decimal points up across positive and negative.
+ */
+export const buildAccountingPattern = ({ decimals, symbol, }) => {
+    const d = Math.max(0, Math.min(30, Math.floor(decimals)));
+    const num = digits(d, true);
+    const sym = symbolPrefix(symbol);
+    const zero = d > 0 ? `"-"${"?".repeat(d)}` : `"-"`;
+    return `_(${sym}* ${num}_);_(${sym}* \\(${num}\\);_(${sym}* ${zero}_);_(@_)`;
+};
+export const buildPercentPattern = (decimals) => `${digits(decimals, false)}%`;
+export const buildScientificPattern = (decimals) => `${digits(decimals, false)}E+00`;
+/** Excel's Currency / Accounting symbol list (a representative subset). */
+export const CURRENCY_SYMBOLS = [
+    { symbol: "", label: "None" },
+    { symbol: "$", label: "$" },
+    { symbol: "€", label: "€ Euro" },
+    { symbol: "£", label: "£ English (United Kingdom)" },
+    { symbol: "¥", label: "¥ Japanese" },
+    { symbol: "₹", label: "₹ English (India)" },
+    { symbol: "CHF", label: "CHF Swiss" },
+    { symbol: "kr", label: "kr Swedish" },
+    { symbol: "R$", label: "R$ Portuguese (Brazil)" },
+    { symbol: "₩", label: "₩ Korean" },
+];
+export const FRACTION_TYPES = [
+    { label: "Up to one digit (1/4)", pattern: "# ?/?" },
+    { label: "Up to two digits (21/25)", pattern: "# ??/??" },
+    { label: "Up to three digits (312/943)", pattern: "# ???/???" },
+    { label: "As halves (1/2)", pattern: "# ?/2" },
+    { label: "As quarters (2/4)", pattern: "# ?/4" },
+    { label: "As eighths (4/8)", pattern: "# ?/8" },
+    { label: "As sixteenths (8/16)", pattern: "# ??/16" },
+    { label: "As tenths (3/10)", pattern: "# ?/10" },
+    { label: "As hundredths (30/100)", pattern: "# ??/100" },
+];
+/** Excel's Special types for English (United States). */
+export const SPECIAL_TYPES = [
+    { label: "Zip Code", pattern: "00000" },
+    { label: "Zip Code + 4", pattern: "00000-0000" },
+    { label: "Phone Number", pattern: "[<=9999999]###-####;(###) ###-####" },
+    { label: "Social Security Number", pattern: "000-00-0000" },
+];
+export const FORMAT_LOCALES = [
+    { tag: "en-US", label: "English (United States)", lcid: "409", dayFirst: false },
+    { tag: "en-GB", label: "English (United Kingdom)", lcid: "809", dayFirst: true },
+    { tag: "en-IN", label: "English (India)", lcid: "4009", dayFirst: true },
+    { tag: "en-AU", label: "English (Australia)", lcid: "C09", dayFirst: true },
+    { tag: "en-CA", label: "English (Canada)", lcid: "1009", dayFirst: true },
+    { tag: "fr-FR", label: "French (France)", lcid: "40C", dayFirst: true },
+    { tag: "de-DE", label: "German (Germany)", lcid: "407", dayFirst: true },
+    { tag: "es-ES", label: "Spanish (Spain)", lcid: "C0A", dayFirst: true },
+    { tag: "it-IT", label: "Italian (Italy)", lcid: "410", dayFirst: true },
+    { tag: "ja-JP", label: "Japanese", lcid: "411", dayFirst: false },
+    { tag: "zh-CN", label: "Chinese (PRC)", lcid: "804", dayFirst: false },
+];
+export const findFormatLocale = (tag) => FORMAT_LOCALES.find((l) => l.tag === tag) ??
+    FORMAT_LOCALES.find((l) => tag && l.tag.split("-")[0] === tag.split("-")[0]) ??
+    FORMAT_LOCALES[0];
+/** Excel's Date types for English (United States). */
+const DATE_TYPES_US = [
+    "m/d/yyyy",
+    "dddd, mmmm d, yyyy",
+    "m/d;@",
+    "m/d/yy;@",
+    "mm/dd/yy;@",
+    "d-mmm;@",
+    "d-mmm-yy;@",
+    "dd-mmm-yy;@",
+    "mmm-yy;@",
+    "mmmm-yy;@",
+    "mmmm d, yyyy;@",
+    "m/d/yy h:mm AM/PM;@",
+    "m/d/yy h:mm;@",
+    "mmmmm;@",
+    "mmmmm-yy;@",
+    "m/d/yyyy;@",
+    "d-mmm-yyyy;@",
+];
+/** Excel's Time types for English (United States). */
+const TIME_TYPES_US = [
+    "h:mm:ss AM/PM",
+    "h:mm;@",
+    "h:mm AM/PM;@",
+    "h:mm:ss;@",
+    "h:mm:ss AM/PM;@",
+    "mm:ss.0;@",
+    "[h]:mm:ss;@",
+    "m/d/yy h:mm AM/PM;@",
+    "m/d/yy h:mm;@",
+];
+/** A month-first numeric date code reordered day-first (`m/d/yy` → `d/m/yy`). */
+const dayFirst = (pattern) => pattern.replace(/\b(m{1,2})\/(d{1,2})\b/g, "$2/$1");
+/**
+ * The Date / Time types for a locale. The default locale's codes are written
+ * bare (they follow the workbook); another locale's carry Excel's
+ * `[$-lcid]` prefix so the cell keeps that locale's names and order.
+ */
+export const getDateTimeTypes = (kind, locale, defaultLocale) => {
+    const base = kind === "date" ? DATE_TYPES_US : TIME_TYPES_US;
+    const ordered = locale.dayFirst ? base.map(dayFirst) : base;
+    if (locale.tag === defaultLocale.tag)
+        return ordered;
+    return ordered.map((p) => `[$-${locale.lcid}]${p}`);
+};
+const LOCALE_PREFIX = /^\[\$-([0-9A-Fa-f]+)\]/;
+/** The locale a format code's `[$-lcid]` prefix names, if any. */
+export const getPatternLocale = (pattern) => {
+    const lcid = pattern?.match(LOCALE_PREFIX)?.[1]?.toUpperCase();
+    return lcid
+        ? FORMAT_LOCALES.find((l) => l.lcid.toUpperCase() === lcid)
+        : undefined;
+};
+/** The pieces the Number / Currency options read back off a code. */
+export const parseNumericPattern = (pattern) => {
+    const p = pattern ?? "";
+    const first = p.split(";")[0] ?? "";
+    const decimals = first.match(/\.(0+)/)?.[1]?.length ?? 0;
+    const thousands = /#,##0/.test(first);
+    const sections = p.split(";");
+    const second = sections[1] ?? "";
+    const negative = !second
+        ? "minus"
+        : second.includes("[Red]")
+            ? second.includes("(")
+                ? "redParens"
+                : "red"
+            : second.includes("(")
+                ? "parens"
+                : "minus";
+    const symbol = first.match(/"([^"]+)"/)?.[1] ?? "";
+    return { decimals, thousands, negative, symbol };
+};
+/** Which category a cell's number format opens the Number tab on. */
+export const detectCategory = (format) => {
+    const pattern = format?.pattern ?? "";
+    if (SPECIAL_TYPES.some((t) => t.pattern === pattern))
+        return "special";
+    switch (format?.type) {
+        case undefined:
+        case "GENERAL":
+            return pattern && pattern !== "General" ? "custom" : "general";
+        case "NUMBER":
+            return "number";
+        case "CURRENCY":
+            return pattern.startsWith("_(") ? "accounting" : "currency";
+        case "ACCOUNTING":
+            return "accounting";
+        case "DATE":
+            return "date";
+        case "TIME":
+        case "DATE_TIME":
+            return "time";
+        case "PERCENT":
+            return "percentage";
+        case "FRACTION":
+            return "fraction";
+        case "SCIENTIFIC":
+            return "scientific";
+        case "TEXT":
+            return "text";
+        case "SPECIAL":
+            return "special";
+        default:
+            return "custom";
+    }
+};
+/** The format a category gets when it is first picked (Excel's defaults). */
+export const defaultFormatForCategory = (id, { currencySymbol, locale, defaultLocale, }) => {
+    switch (id) {
+        case "general":
+            return null;
+        case "number":
+            return {
+                type: "NUMBER",
+                pattern: buildNumberPattern({
+                    decimals: 2,
+                    thousands: false,
+                    negative: "minus",
+                }),
+            };
+        case "currency":
+            return {
+                type: "CURRENCY",
+                pattern: buildCurrencyPattern({
+                    decimals: 2,
+                    symbol: currencySymbol,
+                    negative: "minus",
+                }),
+            };
+        case "accounting":
+            return {
+                type: "ACCOUNTING",
+                pattern: buildAccountingPattern({ decimals: 2, symbol: currencySymbol }),
+            };
+        case "date":
+            return {
+                type: "DATE",
+                pattern: getDateTimeTypes("date", locale, defaultLocale)[0],
+            };
+        case "time":
+            return {
+                type: "DATE_TIME",
+                pattern: getDateTimeTypes("time", locale, defaultLocale)[0],
+            };
+        case "percentage":
+            return { type: "PERCENT", pattern: buildPercentPattern(2) };
+        case "fraction":
+            return { type: "FRACTION", pattern: FRACTION_TYPES[0].pattern };
+        case "scientific":
+            return { type: "SCIENTIFIC", pattern: buildScientificPattern(2) };
+        case "text":
+            return { type: "TEXT", pattern: "@" };
+        case "special":
+            return { type: "SPECIAL", pattern: SPECIAL_TYPES[0].pattern };
+        case "custom":
+            return null;
+    }
+};
+/** Excel's Custom type list (the built-in codes). */
+export const CUSTOM_PATTERNS = [
+    "General",
+    "0",
+    "0.00",
+    "#,##0",
+    "#,##0.00",
+    "#,##0_);(#,##0)",
+    "#,##0_);[Red](#,##0)",
+    "#,##0.00_);(#,##0.00)",
+    "#,##0.00_);[Red](#,##0.00)",
+    '"$"#,##0_);("$"#,##0)',
+    '"$"#,##0_);[Red]("$"#,##0)',
+    '"$"#,##0.00_);("$"#,##0.00)',
+    '"$"#,##0.00_);[Red]("$"#,##0.00)',
+    "0%",
+    "0.00%",
+    "0.00E+00",
+    "##0.0E+0",
+    "# ?/?",
+    "# ??/??",
+    "m/d/yyyy",
+    "d-mmm-yy",
+    "d-mmm",
+    "mmm-yy",
+    "h:mm AM/PM",
+    "h:mm:ss AM/PM",
+    "h:mm",
+    "h:mm:ss",
+    "m/d/yyyy h:mm",
+    "mm:ss",
+    "mm:ss.0",
+    "@",
+    "[h]:mm:ss",
+    '_("$"* #,##0_);_("$"* \\(#,##0\\);_("$"* "-"_);_(@_)',
+    '_(* #,##0_);_(* \\(#,##0\\);_(* "-"_);_(@_)',
+    '_("$"* #,##0.00_);_("$"* \\(#,##0.00\\);_("$"* "-"??_);_(@_)',
+    '_(* #,##0.00_);_(* \\(#,##0.00\\);_(* "-"??_);_(@_)',
+];
+/** The NumberFormatType a typed custom code is closest to. */
+export const inferTypeFromPattern = (pattern) => {
+    const p = pattern.replace(/"[^"]*"/g, "").replace(/\[[^\]]*\]/g, "");
+    if (!pattern || pattern === "General")
+        return "GENERAL";
+    if (p === "@")
+        return "TEXT";
+    if (/[yd]/i.test(p) || /m{3,}/i.test(p))
+        return "DATE";
+    if (/[hs]/i.test(p) || /AM\/PM/i.test(p))
+        return "DATE_TIME";
+    if (/E[+-]/i.test(p))
+        return "SCIENTIFIC";
+    if (p.includes("%"))
+        return "PERCENT";
+    if (/\?\/[?\d]/.test(p))
+        return "FRACTION";
+    return "NUMBER";
+};

package/dist/esm/components/editors/cell-format/number-tab.d.ts

@@ -0,0 +1,12 @@
+import type { NumberFormat } from "@rowsncolumns/spreadsheet";
+import React from "react";
+export type NumberTabProps = {
+    numberFormat: NumberFormat | null | undefined;
+    onChange(numberFormat: NumberFormat | null): void;
+    sampleValue: unknown;
+    locale?: string;
+    currencySymbol: string;
+};
+/** Format Cells → Number. */
+export declare const NumberTab: ({ numberFormat, onChange, sampleValue, locale, currencySymbol, }: NumberTabProps) => React.JSX.Element;
+//# sourceMappingURL=number-tab.d.ts.map

package/dist/esm/components/editors/cell-format/number-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/number-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAG9D,OAAO,KAA4B,MAAM,OAAO,CAAC;AA6CjD,MAAM,MAAM,cAAc,GAAG;IAC3B,YAAY,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;IAClD,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,SAAS,GAAI,kEAMvB,cAAc,sBAiThB,CAAC"}

package/dist/esm/components/editors/cell-format/number-tab.js

@@ -0,0 +1,165 @@
+import { Input } from "@rowsncolumns/ui";
+import { ssfFormat, ssfFormatColor } from "@rowsncolumns/utils";
+import React, { useMemo, useState } from "react";
+import { CheckboxField, ListBox, SelectField } from "./list-box";
+import { buildAccountingPattern, buildCurrencyPattern, buildNumberPattern, buildPercentPattern, buildScientificPattern, CURRENCY_SYMBOLS, CUSTOM_PATTERNS, defaultFormatForCategory, detectCategory, findFormatLocale, FORMAT_LOCALES, FRACTION_TYPES, getDateTimeTypes, getPatternLocale, inferTypeFromPattern, NEGATIVE_STYLES, NUMBER_CATEGORIES, parseNumericPattern, SPECIAL_TYPES, } from "./number-formats";
+const SAMPLE_NEGATIVE = -1234.1;
+const render = (pattern, value) => {
+    try {
+        return ssfFormat(pattern, value) || " ";
+    }
+    catch {
+        return " ";
+    }
+};
+const colorOf = (pattern, value) => {
+    try {
+        return ssfFormatColor(pattern, value);
+    }
+    catch {
+        return undefined;
+    }
+};
+/** Format Cells → Number. */
+export const NumberTab = ({ numberFormat, onChange, sampleValue, locale, currencySymbol, }) => {
+    const defaultLocale = findFormatLocale(locale);
+    const [category, setCategory] = useState(() => detectCategory(numberFormat));
+    const [formatLocale, setFormatLocale] = useState(() => getPatternLocale(numberFormat?.pattern) ?? defaultLocale);
+    const pattern = numberFormat?.pattern ?? "General";
+    const parsed = parseNumericPattern(numberFormat?.pattern);
+    const definition = NUMBER_CATEGORIES.find((c) => c.id === category);
+    const sample = render(pattern, sampleValue);
+    const pickCategory = (id) => {
+        setCategory(id);
+        if (id === "custom")
+            return;
+        onChange(defaultFormatForCategory(id, {
+            currencySymbol,
+            locale: formatLocale,
+            defaultLocale,
+        }));
+    };
+    const dateTimeTypes = useMemo(() => category === "date" || category === "time"
+        ? getDateTimeTypes(category, formatLocale, defaultLocale)
+        : [], [category, formatLocale, defaultLocale]);
+    const decimalsField = (onDecimals) => (React.createElement("label", { className: "flex flex-col gap-1 font-system text-sm" },
+        "Decimal places",
+        React.createElement(Input, { "aria-label": "Decimal places", type: "number", min: 0, max: 30, className: "text-xs", value: parsed.decimals, onChange: (event) => {
+                const n = parseInt(event.target.value, 10);
+                if (Number.isFinite(n))
+                    onDecimals(Math.max(0, Math.min(30, n)));
+            } })));
+    const symbolField = (onSymbol) => (React.createElement(SelectField, { label: "Symbol", value: parsed.symbol, options: CURRENCY_SYMBOLS.map((s) => ({ value: s.symbol, label: s.label })), onChange: onSymbol }));
+    const negativeList = (build, selected) => (React.createElement("div", { className: "flex flex-col gap-1" },
+        React.createElement("span", { className: "font-system text-sm" }, "Negative numbers"),
+        React.createElement(ListBox, { label: "Negative numbers", value: selected, items: NEGATIVE_STYLES.map((style) => {
+                const p = build(style);
+                return {
+                    value: style,
+                    label: (React.createElement("span", { style: { color: colorOf(p, SAMPLE_NEGATIVE) } }, render(p, SAMPLE_NEGATIVE))),
+                };
+            }), onChange: (style) => onChange({ type: numberFormat?.type ?? "NUMBER", pattern: build(style) }) })));
+    const localeField = (React.createElement(SelectField, { label: "Locale (location)", value: formatLocale.tag, options: FORMAT_LOCALES.map((l) => ({ value: l.tag, label: l.label })), onChange: (tag) => {
+            const next = findFormatLocale(tag);
+            setFormatLocale(next);
+            if (category === "date" || category === "time") {
+                onChange({
+                    type: category === "date" ? "DATE" : "DATE_TIME",
+                    pattern: getDateTimeTypes(category, next, defaultLocale)[0],
+                });
+            }
+        } }));
+    let options = null;
+    switch (category) {
+        case "number":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField((decimals) => onChange({
+                    type: "NUMBER",
+                    pattern: buildNumberPattern({ ...parsed, decimals }),
+                })),
+                React.createElement(CheckboxField, { label: "Use 1000 Separator (,)", checked: parsed.thousands, onChange: (thousands) => onChange({
+                        type: "NUMBER",
+                        pattern: buildNumberPattern({ ...parsed, thousands }),
+                    }) }),
+                negativeList((negative) => buildNumberPattern({ ...parsed, negative }), parsed.negative)));
+            break;
+        case "currency":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField((decimals) => onChange({
+                    type: "CURRENCY",
+                    pattern: buildCurrencyPattern({ ...parsed, decimals }),
+                })),
+                symbolField((symbol) => onChange({
+                    type: "CURRENCY",
+                    pattern: buildCurrencyPattern({ ...parsed, symbol }),
+                })),
+                negativeList((negative) => buildCurrencyPattern({ ...parsed, negative }), parsed.negative)));
+            break;
+        case "accounting":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField((decimals) => onChange({
+                    type: "ACCOUNTING",
+                    pattern: buildAccountingPattern({ ...parsed, decimals }),
+                })),
+                symbolField((symbol) => onChange({
+                    type: "ACCOUNTING",
+                    pattern: buildAccountingPattern({ ...parsed, symbol }),
+                }))));
+            break;
+        case "percentage":
+            options = decimalsField((decimals) => onChange({ type: "PERCENT", pattern: buildPercentPattern(decimals) }));
+            break;
+        case "scientific":
+            options = decimalsField((decimals) => onChange({ type: "SCIENTIFIC", pattern: buildScientificPattern(decimals) }));
+            break;
+        case "date":
+        case "time":
+            options = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("span", { className: "font-system text-sm" }, "Type"),
+                    React.createElement(ListBox, { label: "Type", value: pattern, items: dateTimeTypes.map((p) => ({
+                            value: p,
+                            label: render(p, sampleDate()),
+                        })), onChange: (p) => onChange({
+                            type: category === "date" ? "DATE" : "DATE_TIME",
+                            pattern: p,
+                        }) })),
+                localeField));
+            break;
+        case "fraction":
+            options = (React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Type"),
+                React.createElement(ListBox, { label: "Type", value: pattern, items: FRACTION_TYPES.map((t) => ({ value: t.pattern, label: t.label })), onChange: (p) => onChange({ type: "FRACTION", pattern: p }) })));
+            break;
+        case "special":
+            options = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("span", { className: "font-system text-sm" }, "Type"),
+                    React.createElement(ListBox, { label: "Type", value: pattern, items: SPECIAL_TYPES.map((t) => ({ value: t.pattern, label: t.label })), onChange: (p) => onChange({ type: "SPECIAL", pattern: p }) })),
+                React.createElement(SelectField, { label: "Locale (location)", value: "en-US", options: [{ value: "en-US", label: "English (United States)" }], onChange: () => undefined })));
+            break;
+        case "custom":
+            options = (React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("label", { className: "flex flex-col gap-1 font-system text-sm" },
+                    "Type",
+                    React.createElement(Input, { "aria-label": "Custom format code", type: "text", className: "text-xs", value: pattern, onChange: (event) => onChange({
+                            type: inferTypeFromPattern(event.target.value),
+                            pattern: event.target.value,
+                        }) })),
+                React.createElement(ListBox, { label: "Custom formats", value: pattern, items: CUSTOM_PATTERNS.map((p) => ({ value: p, label: p })), onChange: (p) => onChange(p === "General" ? null : { type: inferTypeFromPattern(p), pattern: p }) })));
+            break;
+    }
+    return (React.createElement("div", { className: "grid grid-cols-[140px_1fr] gap-3" },
+        React.createElement("div", { className: "flex flex-col gap-1" },
+            React.createElement("span", { className: "font-system text-sm" }, "Category"),
+            React.createElement(ListBox, { label: "Category", value: category, items: NUMBER_CATEGORIES.map((c) => ({ value: c.id, label: c.name })), onChange: pickCategory, className: "max-h-[260px]" })),
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Sample"),
+                React.createElement("div", { "data-testid": "number-sample", className: "rounded-sm bg-rnc-muted p-1 px-2 text-rnc-foreground", style: { color: colorOf(pattern, sampleValue) } }, sample)),
+            options,
+            React.createElement("p", { className: "font-system text-xs text-rnc-muted-foreground" }, definition?.description))));
+};
+// Excel previews date and time types on the active cell's value when it is a
+// date; a fixed date keeps the list stable otherwise.
+const sampleDate = () => new Date(2012, 2, 14, 13, 30, 55);