@multiplatform.one/forms 6.3.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -69,9 +69,9 @@
     "perfect-freehand": "^1.2.3",
     "react-native-svg": "15.15.4",
     "tamagui": "2.0.0-rc.41",
-    "@multiplatform.one/router": "6.3.0",
-    "@multiplatform.one/table-primitives": "6.3.0",
-    "@multiplatform.one/theme": "6.3.0"
+    "@multiplatform.one/router": "6.4.0",
+    "@multiplatform.one/table-primitives": "6.4.0",
+    "@multiplatform.one/theme": "6.4.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.0.0-rc.41",
@@ -92,9 +92,9 @@
     "react-i18next": "^16.6.6",
     "react-native-web": "^0.21.2",
     "vitest": "^4.1.5",
-    "@multiplatform.one/storybook": "6.3.0",
-    "@multiplatform.one/config": "6.3.0",
-    "@multiplatform.one/test-utils": "6.3.0"
+    "@multiplatform.one/storybook": "6.4.0",
+    "@multiplatform.one/test-utils": "6.4.0",
+    "@multiplatform.one/config": "6.4.0"
   },
   "peerDependencies": {
     "expo-maps": "*",

package/src/fields/DatePicker/Calendar.tsx

@@ -184,7 +184,7 @@ function CalendarDayGrid({
                         {isSelected ? (
                           <Button.Text
                             key="text-selected"
-                            transition="quicker"
+                            transition="quick"
                             enterStyle={{ opacity: 0, y: 20 }}
                             exitStyle={{ opacity: 0, y: 20 }}
                             opacity={1}

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -203,7 +203,7 @@ function RangeDayGrid({
                         {isSelected ? (
                           <Button.Text
                             key="text-selected"
-                            transition="quicker"
+                            transition="quick"
                             enterStyle={{ opacity: 0, y: 20 }}
                             exitStyle={{ opacity: 0, y: 20 }}
                             opacity={1}

package/src/fields/DatePicker/DatetimePicker.tsx

@@ -197,7 +197,7 @@ function DayGrid({ calendarData, selectedDate, onSelectDate, minDate, maxDate }:
                     {isSelected ? (
                       <Button.Text
                         key="text-selected"
-                        transition="quicker"
+                        transition="quick"
                         enterStyle={{ opacity: 0, y: 20 }}
                         exitStyle={{ opacity: 0, y: 20 }}
                         opacity={1}

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -141,7 +141,7 @@ function MultiDayGrid({
                     {isSelected ? (
                       <Button.Text
                         key="text-selected"
-                        transition="quicker"
+                        transition="quick"
                         enterStyle={{ opacity: 0, y: 20 }}
                         exitStyle={{ opacity: 0, y: 20 }}
                         opacity={1}

package/src/fields/DatePicker/index.tsx

@@ -143,7 +143,7 @@ function DayGrid({ calendarData, selectedDate, onSelectDate, minDate, maxDate }:
                     {isSelected ? (
                       <Button.Text
                         key="text-selected"
-                        transition="quicker"
+                        transition="quick"
                         enterStyle={{ opacity: 0, y: 20 }}
                         exitStyle={{ opacity: 0, y: 20 }}
                         opacity={1}

package/src/fields/Progress/index.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
+import { Intent } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 import {
   Progress as TamaguiProgress,
@@ -36,6 +37,26 @@ const ProgressIndicator = styled(TamaguiProgress.Indicator, {
   backgroundColor: formControlColors.border,
 });
 
+/** Semantic indicator intent — matches the theme's Intent union. */
+export type ProgressIntent = "accent" | "error" | "warning" | "success";
+
+/**
+ * Semantic intents ride their hue sub-theme (`<Intent name>` → `$color9`,
+ * tint-independent, LC-05); `accent` stays on the base theme's
+ * `$accentBackground` (the "accent" sub-theme is the SOLID ramp — wrong for
+ * a fill on the page surface, same reasoning as Gantt bars / Toast).
+ */
+function IndicatorIntentWrap({
+  intent,
+  children,
+}: {
+  intent?: ProgressIntent;
+  children: ReactNode;
+}) {
+  if (!intent || intent === "accent") return <>{children}</>;
+  return <Intent name={intent}>{children}</Intent>;
+}
+
 export interface ProgressProps {
   name?: string;
   form?: AnyFormApi;
@@ -53,6 +74,13 @@ export interface ProgressProps {
   max?: number;
   onBlur?: (...args: any[]) => void;
   progressProps?: Omit<TamaguiProgressProps, "value" | "max" | "id" | "children">;
+  /**
+   * Semantic indicator fill resolved via the theme ramps (LC-05): `accent`
+   * fills with the base theme's `$accentBackground`; `error`/`warning`/
+   * `success` ride their hue sub-theme's `$color9`. Omit to keep the gray
+   * form ramp.
+   */
+  intent?: ProgressIntent;
   /** When true, renders a skeleton placeholder instead of the progress bar */
   skeleton?: boolean;
   /** When true, uses compact sizing */
@@ -75,6 +103,7 @@ export function Progress({
   max = 100,
   onBlur,
   progressProps,
+  intent,
   skeleton,
   compact,
 }: ProgressProps) {
@@ -101,6 +130,12 @@ export function Progress({
     blurHandler?: (...args: any[]) => void,
     hasError?: boolean,
   ) => {
+    // undefined keeps the styled default (gray form ramp) for existing consumers.
+    const indicatorFill = intent
+      ? intent === "accent"
+        ? ("$accentBackground" as const)
+        : ("$color9" as const)
+      : undefined;
     const progressElement = (
       <ProgressFrame
         width="100%"
@@ -117,7 +152,9 @@ export function Progress({
         aria-required={required || undefined}
         aria-invalid={hasError || undefined}
       >
-        <ProgressIndicator />
+        <IndicatorIntentWrap intent={intent}>
+          <ProgressIndicator backgroundColor={indicatorFill} />
+        </IndicatorIntentWrap>
       </ProgressFrame>
     );
 

package/src/fields/Progress/scratch-debug.spec.tsx

@@ -0,0 +1,35 @@
+import { writeFileSync } from "node:fs";
+import { describe, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { View } from "tamagui";
+
+describe("scratch", () => {
+  it("dumps config + view classes", () => {
+    const lines: string[] = [];
+    const { container } = renderWithProviders(
+      <>
+        <View data-testid="v-color7" backgroundColor="$color7" />
+        <View data-testid="v-accentbg" backgroundColor="$accentBackground" />
+        <View data-testid="v-color9" backgroundColor="$color9" />
+      </>,
+    );
+    for (const id of ["v-color7", "v-accentbg", "v-color9"]) {
+      const el = container.querySelector(`[data-testid='${id}']`) as HTMLElement;
+      lines.push(`${id}: class=${el?.className}`);
+      lines.push(`${id}: style=${el?.getAttribute("style")}`);
+    }
+    const { configWithoutAnimations } = require("@tamagui/config");
+    const themeNames = Object.keys(configWithoutAnimations.themes ?? {});
+    lines.push(`\nTHEME COUNT: ${themeNames.length}`);
+    lines.push(
+      `INTENT-ISH THEMES: ${themeNames.filter((n) => /error|warning|success|accent|red|green|yellow/.test(n)).join(", ")}`,
+    );
+    const light = (configWithoutAnimations.themes ?? {}).light ?? {};
+    lines.push(
+      `LIGHT KEYS (accent/color7/color9): ${Object.keys(light)
+        .filter((k) => /accent|color7|color9|^background$/.test(k))
+        .join(", ")}`,
+    );
+    writeFileSync("/tmp/progress-config-dump.txt", lines.join("\n"));
+  });
+});

package/src/index.ts

@@ -124,7 +124,7 @@ export { Spinner } from "./Spinner";
 export type { SpinnerProps } from "./Spinner";
 
 export { Progress } from "./fields/Progress";
-export type { ProgressProps } from "./fields/Progress";
+export type { ProgressIntent, ProgressProps } from "./fields/Progress";
 
 // ── Compound Components ──────────────────────────────────────
 export {