@multiplatform.one/forms 6.0.0

package/src/Button/index.tsx

@@ -0,0 +1,288 @@
+import {
+  createElement,
+  isValidElement,
+  useCallback,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useFormField } from "../shared/utils";
+import {
+  Button as TamaguiButton,
+  type ButtonProps as TamaguiButtonProps,
+  SizableText,
+  View,
+  Theme,
+  Spinner,
+  styled,
+  isWeb,
+} from "tamagui";
+import type { ThemeName } from "@tamagui/web";
+import type { GestureResponderEvent } from "react-native";
+import type { AnyFormApi } from "../types";
+import { Store, useStore } from "@tanstack/react-store";
+import { getSpace } from "@tamagui/get-token";
+import { themeableVariants } from "@tamagui/stacks";
+import type { SizeTokens, VariantSpreadExtras } from "@tamagui/web";
+import { formButtonColors, formCommonColors } from "../shared/colorRamps";
+import { useControlGrouped } from "../shared/groupContext";
+
+type IconLike = ReactNode | ComponentType<{ size?: number }>;
+
+/** Many call sites pass Phosphor `Icon` (component) instead of `<Icon />`. */
+function normalizeButtonIcon(icon: IconLike | undefined): ReactNode {
+  if (icon == null || icon === false) return null;
+  if (isValidElement(icon)) return icon;
+  if (typeof icon === "function") {
+    return createElement(icon, { size: 16 });
+  }
+  if (typeof icon === "object" && icon !== null && "$$typeof" in icon) {
+    return createElement(icon as unknown as ComponentType<{ size?: number }>, { size: 16 });
+  }
+  return icon;
+}
+
+const getButtonSized = (val: SizeTokens | number, { props }: VariantSpreadExtras<any>) => {
+  if (!val || props.circular) return;
+  if (typeof val === "number") {
+    return { paddingHorizontal: val * 0.25, height: val };
+  }
+  return { paddingHorizontal: getSpace(val), height: val };
+};
+
+const textAccentLow = {
+  default: formButtonColors.textLow.base,
+  hover: formButtonColors.textLow.hover,
+  press: formButtonColors.textLow.active,
+} as const;
+
+const dummyStore = new Store({ isValid: true });
+
+const ButtonFrame = styled(View, {
+  name: "Button",
+  role: "button",
+  tabIndex: 0,
+  cursor: "pointer",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  flexDirection: "row",
+  backgroundColor: formButtonColors.background.base,
+  borderWidth: 1,
+  borderColor: formButtonColors.border.base,
+  hoverStyle: {
+    backgroundColor: formButtonColors.background.hover,
+  },
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent",
+        hoverStyle: { backgroundColor: "transparent" },
+        pressStyle: { backgroundColor: "transparent" },
+      },
+    },
+    circular: themeableVariants.circular,
+    chromeless: themeableVariants.chromeless,
+    size: {
+      "...size": getButtonSized,
+    },
+    disabled: {
+      true: {
+        pointerEvents: "none",
+      },
+    },
+  } as const,
+  defaultVariants: {
+    size: "$true" as any,
+  },
+});
+
+export interface ButtonProps extends Omit<TamaguiButtonProps, "form" | "icon" | "iconAfter"> {
+  action?: "submit" | "reset";
+  form?: AnyFormApi;
+  loading?: boolean;
+  accent?: boolean;
+  error?: boolean;
+  warning?: boolean;
+  success?: boolean;
+  skeleton?: boolean;
+  outlined?: boolean;
+  icon?: IconLike;
+  iconAfter?: IconLike;
+  compact?: boolean;
+}
+
+export function Button({
+  children,
+  action,
+  form: formProp,
+  loading,
+  accent,
+  error,
+  warning,
+  success,
+  skeleton = false,
+  outlined,
+  disabled,
+  theme,
+  onPress,
+  tabIndex,
+  icon,
+  iconAfter,
+  compact,
+  ...props
+}: ButtonProps) {
+  const { resolvedForm: formFromHook } = useFormField({ form: formProp });
+  const resolvedForm = action ? formFromHook : undefined;
+
+  const { isValid } = useStore(
+    (resolvedForm?.store ?? dummyStore) as Store<{ isValid: boolean }>,
+    (s) => ({ isValid: s.isValid ?? true }),
+  );
+
+  const intent =
+    (accent && "accent") ||
+    (error && "error") ||
+    (warning && "warning") ||
+    (success && "success") ||
+    undefined;
+  const { knobProps, control, text } = useResolvedKnobs({
+    intent,
+    component: "Button",
+    compact,
+  });
+  const grouped = useControlGrouped();
+  if (skeleton) {
+    return (
+      <View
+        {...knobProps.borderRadius}
+        backgroundColor="$gray5"
+        height={knobProps.sizeToken}
+        width={120}
+        opacity={0.5}
+        {...props}
+      />
+    );
+  }
+
+  const isDisabled = disabled || loading || (action === "submit" && resolvedForm && !isValid);
+
+  const handlePress = (e: GestureResponderEvent) => {
+    if (action === "submit" && resolvedForm) resolvedForm.handleSubmit();
+    if (action === "reset" && resolvedForm) resolvedForm.reset();
+    onPress?.(e as Parameters<NonNullable<TamaguiButtonProps["onPress"]>>[0]);
+  };
+
+  const activeThemeName = theme ?? intent;
+  outlined = outlined ?? knobProps.outlined;
+  const isLow = knobProps.textAccent === "low";
+  const isMedium = knobProps.textAccent === "medium";
+  const baseBorderWidth = knobProps.borderRadius.borderWidth;
+  const resolvedBorderWidth = baseBorderWidth > 0 ? Math.max(baseBorderWidth, 1) : outlined ? 1 : 0;
+  const [hovering, setHovering] = useState(false);
+  const [pressing, setPressing] = useState(false);
+  const handlePressIn = useCallback(() => {
+    setPressing(true);
+    if (isWeb) {
+      const up = () => setPressing(false);
+      document.addEventListener("pointerup", up, { once: true });
+    }
+  }, []);
+  const handlePressOut = useCallback(() => setPressing(false), []);
+  const textColor = isLow
+    ? pressing
+      ? textAccentLow.press
+      : hovering
+        ? textAccentLow.hover
+        : textAccentLow.default
+    : isMedium
+      ? formCommonColors.text
+      : undefined;
+
+  const textContent = loading ? (
+    <Spinner size="small" />
+  ) : typeof children === "string" ? (
+    <SizableText
+      userSelect="none"
+      flexGrow={0}
+      flexShrink={1}
+      textOverflow="ellipsis"
+      whiteSpace="nowrap"
+      overflow="hidden"
+      {...knobProps.body}
+      {...(textColor ? { color: textColor } : undefined)}
+      transition={knobProps.transition}
+    >
+      {children}
+    </SizableText>
+  ) : (
+    children
+  );
+
+  const hasIcon = icon || iconAfter;
+  const iconElement = icon ? <View flexShrink={0}>{normalizeButtonIcon(icon)}</View> : null;
+  const iconAfterElement = iconAfter ? (
+    <View flexShrink={0}>{normalizeButtonIcon(iconAfter)}</View>
+  ) : null;
+
+  const buttonElement = (
+    <ButtonFrame
+      disabled={isDisabled || false}
+      opacity={isDisabled ? 0.5 : 1}
+      transition={knobProps.transition}
+      {...knobProps.borderRadius}
+      borderWidth={resolvedBorderWidth}
+      size={knobProps.sizeToken}
+      elevation={knobProps.elevation}
+      outlined={outlined}
+      {...(outlined ? { variant: "outlined" as const } : undefined)}
+      {...(isLow
+        ? {
+            onHoverIn: () => setHovering(true),
+            onHoverOut: () => setHovering(false),
+            onPressIn: handlePressIn,
+            onPressOut: handlePressOut,
+          }
+        : undefined)}
+      hoverStyle={{
+        backgroundColor: outlined ? "transparent" : formButtonColors.background.hover,
+        ...(outlined ? { borderColor: formButtonColors.border.hover } : undefined),
+        ...control.hoverKnobProps,
+        ...text.hoverKnobProps,
+      }}
+      pressStyle={{
+        backgroundColor: outlined ? "transparent" : formButtonColors.background.active,
+        ...(outlined ? { borderColor: formButtonColors.border.active } : undefined),
+        ...control.pressKnobProps,
+        ...text.pressKnobProps,
+      }}
+      focusStyle={{}}
+      focusVisibleStyle={{}}
+      onPress={handlePress}
+      {...(tabIndex != null ? { tabIndex } : undefined)}
+      {...props}
+      {...(grouped
+        ? {
+            borderWidth: 0,
+            borderRadius: 0,
+            elevation: undefined,
+            height: "100%",
+          }
+        : undefined)}
+      gap={hasIcon && (children || textContent) ? "$2" : undefined}
+    >
+      {iconElement}
+      {textContent}
+      {iconAfterElement}
+    </ButtonFrame>
+  );
+
+  if (activeThemeName) {
+    return <Theme name={activeThemeName as ThemeName}>{buttonElement}</Theme>;
+  }
+  return buttonElement;
+}
+
+Button.Icon = TamaguiButton.Icon;
+Button.Text = SizableText;

package/src/Chip/index.tsx

@@ -0,0 +1,157 @@
+import type { ReactNode } from "react";
+import { XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ColorTokens, GetProps } from "tamagui";
+import { Text, View, styled } from "tamagui";
+
+// ── Types ─────────────────────────────────────────────────────
+
+export type ChipVariant = "solid" | "subtle" | "outline";
+export type ChipColor = "gray" | "red" | "green" | "blue" | "yellow" | "orange" | "purple";
+export type ChipSize = "$2" | "$3" | "$4" | "$5";
+
+export interface ChipProps {
+  children: ReactNode;
+  size?: ChipSize;
+  variant?: ChipVariant;
+  color?: ChipColor;
+  onDismiss?: () => void;
+  disabled?: boolean;
+}
+
+// ── Color mappings ────────────────────────────────────────────
+
+const colorMap: Record<ChipColor, { bg: ColorTokens; text: ColorTokens; border: ColorTokens }> = {
+  gray: { bg: "$color4", text: "$color11", border: "$color7" },
+  red: { bg: "$red4", text: "$red11", border: "$red7" },
+  green: { bg: "$green4", text: "$green11", border: "$green7" },
+  blue: { bg: "$blue4", text: "$blue11", border: "$blue7" },
+  yellow: { bg: "$yellow4", text: "$yellow11", border: "$yellow7" },
+  orange: { bg: "$orange4", text: "$orange11", border: "$orange7" },
+  purple: { bg: "$purple4", text: "$purple11", border: "$purple7" },
+};
+
+// ── Styled components ─────────────────────────────────────────
+
+const ChipFrame = styled(View, {
+  name: "Chip",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$1",
+  borderRadius: "$3",
+  paddingHorizontal: "$2.5",
+  paddingVertical: "$1",
+
+  variants: {
+    size: {
+      $2: { paddingHorizontal: "$1.5", paddingVertical: "$0.5" },
+      $3: { paddingHorizontal: "$2", paddingVertical: "$1" },
+      $4: { paddingHorizontal: "$2.5", paddingVertical: "$1" },
+      $5: { paddingHorizontal: "$3", paddingVertical: "$1.5" },
+    },
+    variant: {
+      solid: {},
+      subtle: {},
+      outline: {
+        borderWidth: 1,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    variant: "subtle",
+    size: "$3",
+  },
+});
+
+const ChipText = styled(Text, {
+  name: "ChipText",
+  fontSize: "$2",
+  fontWeight: "500",
+  numberOfLines: 1,
+  userSelect: "none",
+
+  variants: {
+    size: {
+      $2: { fontSize: "$1" },
+      $3: { fontSize: "$2" },
+      $4: { fontSize: "$3" },
+      $5: { fontSize: "$3" },
+    },
+  } as const,
+});
+
+const DismissButton = styled(View, {
+  name: "ChipDismiss",
+  cursor: "pointer",
+  opacity: 0.7,
+  borderRadius: "$1",
+  padding: "$0.5",
+  marginRight: -4,
+  hoverStyle: {
+    opacity: 1,
+    backgroundColor: "$color5",
+  },
+  pressStyle: {
+    opacity: 0.9,
+    backgroundColor: "$color6",
+  },
+});
+
+// ── Chip Component ────────────────────────────────────────────
+
+export function Chip({
+  children,
+  size = "$3",
+  variant = "subtle",
+  color = "gray",
+  onDismiss,
+  disabled,
+}: ChipProps) {
+  const { knobProps } = useResolvedKnobs();
+  const colors = colorMap[color];
+
+  const getBackgroundColor = (): ColorTokens | "transparent" => {
+    switch (variant) {
+      case "solid":
+        return colors.bg;
+      case "subtle":
+        return colors.bg;
+      case "outline":
+        return "transparent";
+    }
+  };
+
+  const textColor = colors.text;
+  const borderColor = variant === "outline" ? colors.border : "transparent";
+  const iconSize = size === "$2" ? 10 : size === "$3" ? 12 : 14;
+
+  return (
+    <ChipFrame
+      size={size}
+      variant={variant}
+      backgroundColor={getBackgroundColor()}
+      borderColor={borderColor}
+      opacity={disabled ? 0.5 : 1}
+      {...knobProps.borderRadius}
+    >
+      <ChipText size={size} color={textColor} {...knobProps.body}>
+        {children}
+      </ChipText>
+      {onDismiss && !disabled && (
+        <DismissButton
+          onPress={(e) => {
+            e.stopPropagation?.();
+            onDismiss();
+          }}
+          accessibilityRole="button"
+          accessibilityLabel="Remove"
+        >
+          <XIcon size={iconSize} color={textColor as string} />
+        </DismissButton>
+      )}
+    </ChipFrame>
+  );
+}
+
+export type ChipFrameProps = GetProps<typeof ChipFrame>;

package/src/ControlGroup/index.tsx

@@ -0,0 +1,173 @@
+import { Children, isValidElement, useMemo, useState, type ReactNode } from "react";
+import { View, isWeb, styled } from "tamagui";
+import type { GetProps } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { FocusContext, InputContext } from "../InputParts";
+import { formInputColors } from "../shared/colorRamps";
+import { getElevationWrapperProps } from "../shared/utils";
+import { ControlGroupCtx } from "../shared/groupContext";
+import { useIsInTableCell } from "../shared/tableCellContext";
+
+// ---------------------------------------------------------------------------
+// Frame
+// ---------------------------------------------------------------------------
+
+const ControlGroupFrame = styled(View, {
+  context: InputContext,
+  alignItems: "stretch",
+  overflow: "hidden",
+  minWidth: 0,
+  borderWidth: 1,
+  borderColor: formInputColors.border.base,
+  backgroundColor: formInputColors.background.base,
+  outlineStyle: "none" as any,
+
+  ...(isWeb ? { tabIndex: -1 } : { focusable: false }),
+
+  variants: {
+    scaleIcon: {
+      ":number": {} as any,
+    },
+    size: {
+      "...size": (val: any, { tokens }: any) => ({
+        height: val,
+        borderRadius: (tokens.radius as any)[val],
+      }),
+    },
+  } as const,
+});
+
+// ---------------------------------------------------------------------------
+// ControlGroup
+// ---------------------------------------------------------------------------
+
+export interface ControlGroupProps extends GetProps<typeof ControlGroupFrame> {
+  children: ReactNode;
+  /** Layout direction. Default "horizontal". */
+  orientation?: "horizontal" | "vertical";
+}
+
+export function ControlGroup({
+  children,
+  orientation = "horizontal",
+  ...props
+}: ControlGroupProps) {
+  const [focused, setFocused] = useState(false);
+  const { knobProps, control, elevation } = useResolvedKnobs();
+  const inTableCell = useIsInTableCell();
+  const elevationWrapperProps = useMemo(
+    () => getElevationWrapperProps(knobProps, elevation),
+    [knobProps, elevation],
+  );
+
+  // Chromeless rendering inside table cells
+  if (inTableCell) {
+    return (
+      <ControlGroupCtx.Provider value={true}>
+        <FocusContext.Provider focused={focused} setFocused={setFocused}>
+          <ControlGroupFrame
+            {...knobProps.body}
+            size={knobProps.sizeToken}
+            flexDirection={orientation === "vertical" ? "column" : "row"}
+            borderWidth={0}
+            borderRadius={0}
+            backgroundColor="transparent"
+            {...props}
+          >
+            {Children.map(children, (child) => {
+              if (!isValidElement(child)) return child;
+              return <View flex={1}>{child}</View>;
+            })}
+          </ControlGroupFrame>
+        </FocusContext.Provider>
+      </ControlGroupCtx.Provider>
+    );
+  }
+
+  return (
+    <ControlGroupCtx.Provider value={true}>
+      <FocusContext.Provider focused={focused} setFocused={setFocused}>
+        <ControlGroupFrame
+          {...knobProps.body}
+          size={knobProps.sizeToken}
+          flexDirection={orientation === "vertical" ? "column" : "row"}
+          backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
+          {...knobProps.borderRadius}
+          {...elevationWrapperProps}
+          {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+          {...(control.hoverKnobProps ? { hoverStyle: control.hoverKnobProps } : undefined)}
+          {...(control.pressKnobProps ? { pressStyle: control.pressKnobProps } : undefined)}
+          {...(control.focusKnobProps
+            ? {
+                focusStyle: {
+                  borderColor: formInputColors.border.focus,
+                  backgroundColor: knobProps.outlined
+                    ? "transparent"
+                    : formInputColors.background.focus,
+                  outlineStyle: "none",
+                  ...control.focusKnobProps,
+                },
+              }
+            : undefined)}
+          {...(control.focusVisibleKnobProps
+            ? {
+                focusVisibleStyle: {
+                  borderColor: formInputColors.border.focus,
+                  backgroundColor: knobProps.outlined
+                    ? "transparent"
+                    : formInputColors.background.focus,
+                  outlineStyle: "none",
+                  ...control.focusVisibleKnobProps,
+                },
+              }
+            : undefined)}
+          {...props}
+          {...(focused
+            ? {
+                borderColor: formInputColors.border.focus,
+                backgroundColor: knobProps.outlined
+                  ? "transparent"
+                  : formInputColors.background.focus,
+                ...control.focusKnobProps,
+              }
+            : undefined)}
+          overflow="hidden"
+        >
+          {Children.map(children, (child, index) => {
+            if (!isValidElement(child)) return child;
+            // Intentional: extract raw radius value to compute per-child individual
+            // corner radii (borderTopLeftRadius, borderBottomRightRadius, etc.).
+            // This cannot be achieved with a knobProps fragment spread.
+            const radius = knobProps.borderRadius.borderRadius;
+            const count = Children.count(children);
+            const isFirst = index === 0;
+            const isLast = index === count - 1;
+            const isMiddle = count > 2 && !isFirst && !isLast;
+            const needsFlex = isMiddle || count === 2;
+            const isVertical = orientation === "vertical";
+            const wrapperProps =
+              isFirst && isLast
+                ? { borderRadius: radius }
+                : isFirst
+                  ? isVertical
+                    ? { borderTopLeftRadius: radius, borderTopRightRadius: radius }
+                    : { borderTopLeftRadius: radius, borderBottomLeftRadius: radius }
+                  : isLast
+                    ? isVertical
+                      ? { borderBottomLeftRadius: radius, borderBottomRightRadius: radius }
+                      : { borderTopRightRadius: radius, borderBottomRightRadius: radius }
+                    : {};
+            const flexProps = needsFlex
+              ? { flex: 1, ...(isVertical ? { minHeight: 0 } : { minWidth: 0 }) }
+              : {};
+            return (
+              <View {...flexProps} {...wrapperProps} overflow="hidden">
+                {child}
+              </View>
+            );
+          })}
+        </ControlGroupFrame>
+      </FocusContext.Provider>
+    </ControlGroupCtx.Provider>
+  );
+}

package/src/FieldDisplay/editMode.ts

@@ -0,0 +1,64 @@
+/**
+ * Field edit-mode classification.
+ *
+ * `inline`  → field renders directly in the table cell at row height.
+ * `popover` → field's full UI lives in a floating popover anchored to the cell;
+ *             cell shows a compact trigger.
+ * `modal`   → field's UI is too big for inline or popover (drop zone, signature
+ *             pad, rich text editor); cell shows a summary chip and clicking
+ *             opens a centered modal (web) or sheet (native).
+ *
+ * Used by DataTableCell to decide how to mount each field type. Centralized
+ * here rather than as static props on every field so the routing is in one
+ * place; if a field's natural shape changes, update one map entry.
+ */
+
+import type { FieldDisplayType } from "./index";
+
+export type EditMode = "inline" | "popover" | "modal";
+
+export const FIELD_EDIT_MODE: Record<FieldDisplayType, EditMode> = {
+  // Plain inline text/number/boolean controls
+  input: "inline",
+  textarea: "inline",
+  stepper: "inline",
+  slider: "inline",
+  checkbox: "inline",
+  switch: "inline",
+  rating: "inline",
+  progress: "inline",
+  otp: "inline",
+
+  // Popover-anchored selectors
+  select: "popover",
+  combobox: "popover",
+  radiogroup: "popover",
+  togglegroup: "popover",
+  datepicker: "popover",
+  datetimepicker: "popover",
+  timepicker: "popover",
+  daterangepicker: "popover",
+  multidatepicker: "popover",
+  duration: "popover",
+  colorpicker: "popover",
+  phoneinput: "popover",
+  barcode: "popover",
+
+  // Modal/sheet — too tall for inline or popover
+  fileupload: "modal",
+  signature: "modal",
+  mentioninput: "modal",
+  geolocation: "modal",
+  image: "modal",
+  richtexteditor: "modal",
+  markdowneditor: "modal",
+  codeeditor: "modal",
+
+  // Caller-provided render
+  custom: "inline",
+};
+
+export function getEditMode(field: FieldDisplayType | undefined): EditMode {
+  if (!field) return "inline";
+  return FIELD_EDIT_MODE[field] ?? "inline";
+}