@cosmicdrift/kumiko-renderer-web 0.136.0 → 0.136.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.136.0",
+  "version": "0.136.1",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.136.0",
-    "@cosmicdrift/kumiko-headless": "0.136.0",
-    "@cosmicdrift/kumiko-renderer": "0.136.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.136.1",
+    "@cosmicdrift/kumiko-headless": "0.136.1",
+    "@cosmicdrift/kumiko-renderer": "0.136.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/widgets/__tests__/form-kit.test.tsx

@@ -38,14 +38,16 @@ describe("NumberField", () => {
     expect(onChange).toHaveBeenCalledWith(undefined);
   });
 
-  test("MoneyField/PercentField zeigen ihre Einheit", () => {
+  test("MoneyField/PercentField rendern als beschriftetes Zahlenfeld ohne Einheit-Badge", () => {
     const noop = (): void => {};
     const { rerender } = render(
-      <MoneyField label="Betrag" id="b" name="b" value={1} onChange={noop} />,
+      <MoneyField label="Betrag (€)" id="b" name="b" value={1} onChange={noop} />,
     );
-    expect(screen.getByText("€")).toBeTruthy();
-    rerender(<PercentField label="Zins" id="z" name="z" value={1} onChange={noop} />);
-    expect(screen.getByText("%")).toBeTruthy();
+    expect(screen.getByText("Betrag (€)")).toBeTruthy();
+    expect(screen.getByRole("spinbutton")).toBeTruthy();
+    expect(screen.queryByText("€")).toBeNull(); // Einheit lebt im Label, kein separates Badge
+    rerender(<PercentField label="Zins (%)" id="z" name="z" value={1} onChange={noop} />);
+    expect(screen.queryByText("%")).toBeNull();
   });
 });
 

package/src/widgets/form-fields.tsx

@@ -9,14 +9,13 @@ export interface NumberFieldProps {
   readonly onChange: (v: number | undefined) => void;
   readonly required?: boolean;
   readonly disabled?: boolean;
-  /** Einheit rechts neben dem Label (z.B. "€", "%"). */
-  readonly unit?: string;
   readonly testId?: string;
 }
 
 /** Zahlenfeld = Field + Input(kind:"number") in einem — nimmt der Screen die
  *  wiederholte id/name/value/onChange-Verdrahtung ab. `value` darf `undefined`
- *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt. */
+ *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt.
+ *  Einheiten (€/%) gehören ins Label (`t("…Summe (€)")`), nicht als Badge. */
 export function NumberField({
   label,
   id,
@@ -25,22 +24,11 @@ export function NumberField({
   onChange,
   required,
   disabled,
-  unit,
   testId,
 }: NumberFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field
-      id={id}
-      label={label}
-      required={required}
-      labelAppendix={
-        unit !== undefined ? (
-          <span className="text-xs text-muted-foreground">{unit}</span>
-        ) : undefined
-      }
-      testId={testId}
-    >
+    <Field id={id} label={label} required={required} testId={testId}>
       <Input
         kind="number"
         id={id}
@@ -54,13 +42,13 @@ export function NumberField({
   );
 }
 
-/** Euro-Betrag in ganzen Einheiten (kein Cent-Integer wie Input kind:"money").
- *  Preset über NumberField mit "€"-Einheit. */
-export function MoneyField(props: Omit<NumberFieldProps, "unit">): ReactNode {
-  return <NumberField {...props} unit="€" />;
+// MoneyField/PercentField markieren die Feld-Absicht am Call-Site (lesbarer als
+// NumberField überall) und sind der Ort, an dem später geld-/prozent-spezifische
+// Formatierung andocken kann. Aktuell rendern sie identisch zu NumberField.
+export function MoneyField(props: NumberFieldProps): ReactNode {
+  return <NumberField {...props} />;
 }
 
-/** Prozentwert (Zins, Tilgung, Rendite). Preset über NumberField mit "%". */
-export function PercentField(props: Omit<NumberFieldProps, "unit">): ReactNode {
-  return <NumberField {...props} unit="%" />;
+export function PercentField(props: NumberFieldProps): ReactNode {
+  return <NumberField {...props} />;
 }