@multiplatform.one/forms 6.0.0

package/src/index.ts

@@ -0,0 +1,231 @@
+// ── Core Form ────────────────────────────────────────────────
+export { Form, useFormContext } from "./Form";
+export type { FormProps } from "./Form";
+
+// ── Field Layout & Infrastructure ────────────────────────────
+export { Field, FieldLayout } from "./fieldLayout";
+export type { FieldProps, FormFieldProps, FieldLayoutProps } from "./fieldLayout";
+
+// ── Types ────────────────────────────────────────────────────
+export type {
+  AnyFormApi,
+  SimpleFieldApi,
+  Validator,
+  FieldComponentProps,
+  ColorValue,
+  WebInputProps,
+  WebInputType,
+  WebInputMode,
+  FieldState,
+  AnyFieldApi,
+  MinimalFormApi,
+  LinkResolver,
+  ChildTableLinkResolver,
+} from "./types";
+
+// ── Core Primitives ──────────────────────────────────────────
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";
+
+export { Input } from "./fields/Input";
+export type { InputProps } from "./fields/Input";
+
+export { TextArea } from "./fields/TextArea";
+export type { TextAreaProps } from "./fields/TextArea";
+
+export { Select } from "./fields/Select";
+export type { SelectProps, SelectOption } from "./fields/Select";
+
+export { Combobox } from "./fields/Combobox";
+export type { ComboboxProps, ComboboxOption } from "./fields/Combobox";
+
+export { Checkbox, Checkboxes, CheckboxGroup } from "./fields/Checkbox";
+export type {
+  CheckboxProps,
+  CheckboxGroupProps,
+  CheckboxGroupOption,
+  CheckboxesProps,
+} from "./fields/Checkbox";
+
+export { Switch } from "./fields/Switch";
+export type { SwitchProps } from "./fields/Switch";
+
+export { RadioGroup } from "./fields/RadioGroup";
+export type { RadioGroupProps } from "./fields/RadioGroup";
+
+export { Slider } from "./fields/Slider";
+export type { SliderProps } from "./fields/Slider";
+
+export { ToggleGroup } from "./fields/ToggleGroup";
+export type { ToggleGroupProps } from "./fields/ToggleGroup";
+
+export { Label } from "./Label";
+
+export { Spinner } from "./Spinner";
+export type { SpinnerProps } from "./Spinner";
+
+export { Progress } from "./fields/Progress";
+export type { ProgressProps } from "./fields/Progress";
+
+// ── Compound Components ──────────────────────────────────────
+export {
+  DatePicker,
+  MultiDatePicker,
+  DateRangePicker,
+  Calendar,
+  MonthPicker,
+  DatetimePicker,
+} from "./fields/DatePicker";
+export type {
+  DatePickerProps,
+  DateRange,
+  MultiDatePickerProps,
+  DateRangePickerProps,
+  CalendarProps,
+  CalendarMode,
+  MonthPickerProps,
+  MonthPickerValue,
+  DatetimePickerProps,
+} from "./fields/DatePicker";
+
+export { OTPInput } from "./fields/OTPInput";
+export type { OTPInputProps } from "./fields/OTPInput";
+
+export { PhoneInput } from "./fields/PhoneInput";
+export type { PhoneInputProps } from "./fields/PhoneInput";
+
+export { ColorPicker } from "./fields/ColorPicker";
+export type { ColorPickerProps } from "./fields/ColorPicker";
+
+export { MentionInput } from "./fields/MentionInput";
+export type { MentionInputProps } from "./fields/MentionInput";
+
+export { Stepper } from "./fields/Stepper";
+export type { StepperProps } from "./fields/Stepper";
+
+export { FileUpload } from "./fields/FileUpload";
+export type { FileUploadProps } from "./fields/FileUpload";
+
+export { Rating } from "./fields/Rating";
+export type { RatingProps } from "./fields/Rating";
+
+export { Duration } from "./fields/Duration";
+export type { DurationProps } from "./fields/Duration";
+
+export { TimePicker } from "./fields/TimePicker";
+export type { TimePickerProps } from "./fields/TimePicker";
+
+export { Signature, signatureValueToSvg } from "./fields/Signature";
+export type { SignatureProps } from "./fields/Signature";
+
+export { Barcode } from "./fields/Barcode";
+export type { BarcodeProps } from "./fields/Barcode";
+
+export { Geolocation } from "./fields/Geolocation";
+export type { GeolocationProps, GeolocationMapProps } from "./fields/Geolocation";
+
+export { ImageField } from "./fields/ImageField";
+export type { ImageFieldProps } from "./fields/ImageField";
+
+// ── FieldDisplay (read-only render variants for table cells) ─
+export { FieldDisplay } from "./FieldDisplay";
+export type { FieldDisplayProps, FieldDisplayType } from "./FieldDisplay";
+export { FIELD_EDIT_MODE, getEditMode } from "./FieldDisplay/editMode";
+export type { EditMode } from "./FieldDisplay/editMode";
+
+// ── Table Primitives (re-exported from @multiplatform.one/table-primitives) ─
+export { Table } from "./Table";
+export type {
+  TableProps,
+  TableRowProps,
+  TableCellProps,
+  TableHeaderCellProps,
+  TableBodyProps,
+  TableHeadProps,
+  TableFootProps,
+  TableCaptionProps,
+} from "./Table";
+
+// ── Floating Panel ────────────────────────────────────────────
+export {
+  FloatingPanel,
+  useFloatingPanel,
+  useViewportGtSm,
+  panelAnimationDuration,
+  panelGrowDuration,
+  panelTransition,
+  panelViewportPadding,
+} from "./FloatingPanel";
+export type {
+  FloatingPanelProps,
+  UseFloatingPanelOptions,
+  UseFloatingPanelReturn,
+} from "./FloatingPanel";
+
+// ── Adaptive Popup (Dialog on desktop, Sheet on mobile) ───────
+export { AdaptivePopup } from "./AdaptivePopup";
+export type { AdaptivePopupProps } from "./AdaptivePopup";
+
+// ── Control Group (squish box-shaped controls into one unit) ──
+export { ControlGroup } from "./ControlGroup";
+export type { ControlGroupProps } from "./ControlGroup";
+
+// ── Form Grid (multi-column layout with correct row-by-row tab order) ─────────
+export { FormGrid } from "./FormGrid";
+export type { FormGridProps } from "./FormGrid";
+
+// ── Input compound sub-components (for advanced composition) ─
+export {
+  InputContext,
+  InputContainerFrame,
+  InputIconFrame,
+  InputFieldMeta,
+  InputInfo,
+  InputLabel,
+  FocusContext,
+  useForwardFocus,
+  defaultInputGroupStyles,
+  inputSizeVariant,
+} from "./InputParts";
+
+export { useControlGrouped } from "./shared/groupContext";
+
+// ── Focus Management ─────────────────────────────────────────
+export { useFocusManagement } from "./hooks/useFocusManagement";
+export type { FocusManagementOptions, FocusManagementReturn } from "./hooks/useFocusManagement";
+
+// ── Shared Utilities ──────────────────────────────────────────
+export {
+  useFormField,
+  getFieldError,
+  mergeFieldHandler,
+  useResolvedValidators,
+  clampRadiusForControl,
+  clampRadiusForLargeComponent,
+} from "./shared/utils";
+
+// ── Table Cell Context (for chromeless field rendering) ───────
+export { TableCellContext, useTableCellContext, useIsInTableCell } from "./shared/tableCellContext";
+export type { TableCellContextValue } from "./shared/tableCellContext";
+
+// ── Chip, Skeleton, Wheel (used by forms; re-exported for components consumers) ─
+export { Chip } from "./Chip";
+export type { ChipProps, ChipVariant, ChipColor, ChipSize, ChipFrameProps } from "./Chip";
+export { Skeleton, SkeletonText, SkeletonCircle } from "./Skeleton";
+export type { SkeletonProps, SkeletonVariant, SkeletonFrameProps } from "./Skeleton";
+export { Wheel } from "./Wheel";
+export type { WheelProps, WheelItem, WheelContainerProps, WheelItemProps } from "./Wheel";
+
+// ── Z-Index Scale ─────────────────────────────────────────────
+export { zIndex } from "./shared/zIndex";
+export type { ZIndexKey } from "./shared/zIndex";
+
+// ── TanStack Form re-exports ─────────────────────────────────
+export {
+  useForm,
+  type FormApi,
+  type FormOptions,
+  type FieldApi,
+  type DeepKeys,
+  type DeepValue,
+} from "@tanstack/react-form";

package/src/router.d.ts

@@ -0,0 +1,16 @@
+declare module "@multiplatform.one/router" {
+  import type { ReactElement, ReactNode } from "react";
+
+  export type Href = string | { pathname: string; params?: Record<string, unknown> };
+
+  export function useUrlState<T>(
+    initialState: T,
+    options?: { debounceMs?: number },
+  ): [T, (nextState: T) => void];
+
+  export function Link(props: {
+    href: Href;
+    children?: ReactNode;
+    [key: string]: unknown;
+  }): ReactElement;
+}

package/src/shared/TimeColumn.tsx

@@ -0,0 +1,101 @@
+import type { KnobProps } from "@multiplatform.one/theme";
+import { Wheel } from "../Wheel";
+import { useMemo } from "react";
+import { Text, View, XStack, YStack } from "tamagui";
+import { formCommonColors, formInputColors } from "./colorRamps";
+
+const itemHeight = 36;
+const visibleItems = 5;
+
+export interface TimeColumnProps {
+  label: string;
+  values: number[];
+  selected: number;
+  onChange: (value: number) => void;
+  format?: (value: number) => string;
+  knobProps: KnobProps;
+}
+
+function defaultFormat(v: number): string {
+  return String(v).padStart(2, "0");
+}
+
+export function TimeColumn({
+  label,
+  values,
+  selected,
+  onChange,
+  format = defaultFormat,
+  knobProps,
+}: TimeColumnProps) {
+  const items = useMemo(
+    () => values.map((v) => ({ value: v, label: format(v) })),
+    [values, format],
+  );
+
+  return (
+    <YStack alignItems="center" gap="$1">
+      <Text
+        fontSize="$1"
+        {...knobProps.body}
+        color={formCommonColors.muted}
+        textTransform="uppercase"
+        letterSpacing={1}
+      >
+        {label}
+      </Text>
+      <View
+        {...knobProps.borderRadius}
+        backgroundColor={formInputColors.background.base}
+        borderWidth={knobProps.inputSurface.borderWidth}
+        borderColor={formInputColors.border.base}
+        overflow="hidden"
+        width={56}
+      >
+        <Wheel
+          items={items}
+          value={selected}
+          onChange={onChange}
+          visibleItems={visibleItems}
+          itemHeight={itemHeight}
+          renderItem={(item, _index, isSelected) => (
+            <XStack
+              width="100%"
+              height="100%"
+              alignItems="center"
+              justifyContent="center"
+              backgroundColor={isSelected ? formInputColors.background.focus : "transparent"}
+              hoverStyle={{ backgroundColor: formInputColors.background.focus }}
+              {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+            >
+              <Text
+                fontSize="$4"
+                {...knobProps.body}
+                fontWeight={isSelected ? "700" : "400"}
+                color={isSelected ? formCommonColors.text : formCommonColors.muted}
+              >
+                {format(item)}
+              </Text>
+            </XStack>
+          )}
+        />
+      </View>
+    </YStack>
+  );
+}
+
+export function TimeColumnSeparator({ knobProps }: { knobProps: KnobProps }) {
+  return (
+    <Text fontSize="$6" {...knobProps.body} color={formCommonColors.text} paddingTop="$5">
+      :
+    </Text>
+  );
+}
+
+export function generateRange(min: number, max: number, step = 1): number[] {
+  const result: number[] = [];
+  for (let i = min; i <= max; i += step) {
+    result.push(i);
+  }
+  return result;
+}

package/src/shared/colorRamps.ts

@@ -0,0 +1,57 @@
+export const formButtonColors = {
+  background: {
+    base: "$color5",
+    hover: "$color4",
+    active: "$color6",
+  },
+  border: {
+    base: "$color7",
+    hover: "$color6",
+    active: "$color8",
+  },
+  textLow: {
+    base: "$color7",
+    hover: "$color7",
+    active: "$color10",
+  },
+} as const;
+
+export const formInputColors = {
+  background: {
+    base: "$color3",
+    focus: "$color4",
+  },
+  border: {
+    base: "$color7",
+    focus: "$color8",
+  },
+} as const;
+
+export const formControlColors = {
+  background: "$color5",
+  border: "$color7",
+  thumb: {
+    base: "$color10",
+    hover: "$color9",
+    press: "$color11",
+  },
+} as const;
+
+export const formCardColors = {
+  background: {
+    base: "$color2",
+    active: "$color3",
+  },
+  border: {
+    base: "$color6",
+    hover: "$color7",
+    active: "$color7",
+  },
+} as const;
+
+export const formCommonColors = {
+  muted: "$color7",
+  text: "$color11",
+  error: "$red10",
+  divider: "$color8",
+} as const;

package/src/shared/floatingList.tsx

@@ -0,0 +1,174 @@
+import { type RefObject, useCallback, useEffect, useRef } from "react";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { View } from "tamagui";
+import { FocusContext } from "../InputParts";
+
+const dropdownMaxRadiusTokenNum = 8;
+
+export function clampDropdownRadius(fieldRadius: string): string | 0 {
+  if (fieldRadius === "$0") return 0;
+  if (typeof fieldRadius === "string" && fieldRadius.startsWith("$")) {
+    const num = Number.parseInt(fieldRadius.slice(1), 10);
+    return num > dropdownMaxRadiusTokenNum ? `$${dropdownMaxRadiusTokenNum}` : fieldRadius;
+  }
+  return fieldRadius;
+}
+
+export function SyncFocusToOpen({ open }: { open: boolean }) {
+  const { setFocused } = FocusContext.useStyledContext();
+  useEffect(() => {
+    setFocused(open);
+  }, [open, setFocused]);
+  return null;
+}
+
+export const scrollArrowThreshold = 8;
+
+// ── Scroll Arrow (sticky inside scrollable panels) ────────────
+
+export function ScrollArrow({
+  direction,
+  scrollRef,
+  visible,
+  arrowScrollDirRef,
+}: {
+  direction: "up" | "down";
+  scrollRef: RefObject<HTMLElement | null>;
+  visible: boolean;
+  arrowScrollDirRef: RefObject<"up" | "down" | null>;
+}) {
+  const isUp = direction === "up";
+  const animationFrameRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const resumeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hoveringRef = useRef(false);
+  const activeRef = useRef(false);
+  const selfScrollingRef = useRef(false);
+  const resumeDelay = 100;
+
+  const stopLoop = useCallback(() => {
+    activeRef.current = false;
+    cancelAnimationFrame(animationFrameRef.current);
+    animationFrameRef.current = 0;
+  }, []);
+
+  const startLoop = useCallback(() => {
+    if (activeRef.current || !hoveringRef.current) return;
+    activeRef.current = true;
+    lastTimeRef.current = performance.now();
+    const tick = () => {
+      const el = scrollRef.current;
+      if (!el || !hoveringRef.current || !activeRef.current) {
+        activeRef.current = false;
+        return;
+      }
+      const now = performance.now();
+      const elapsed = now - lastTimeRef.current;
+      lastTimeRef.current = now;
+      const px = Math.min(
+        elapsed / 2,
+        Math.max(isUp ? el.scrollTop : el.scrollHeight - el.clientHeight - el.scrollTop, 0),
+      );
+      if (px > 0) {
+        selfScrollingRef.current = true;
+        arrowScrollDirRef.current = isUp ? "up" : "down";
+        el.scrollTop += isUp ? -px : px;
+      }
+      animationFrameRef.current = requestAnimationFrame(tick);
+    };
+    animationFrameRef.current = requestAnimationFrame(tick);
+  }, [isUp, scrollRef]);
+
+  const openTimestampRef = useRef(0);
+  useEffect(() => {
+    openTimestampRef.current = performance.now();
+  }, [visible]);
+
+  const handlePointerEnter = useCallback(() => {
+    hoveringRef.current = true;
+    const elapsed = performance.now() - openTimestampRef.current;
+    const wasOverOnOpen = elapsed < 80;
+    if (wasOverOnOpen) {
+      if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = setTimeout(() => {
+        resumeTimerRef.current = null;
+        if (hoveringRef.current) startLoop();
+      }, 600);
+    } else {
+      startLoop();
+    }
+  }, [startLoop]);
+
+  const handlePointerLeave = useCallback(() => {
+    hoveringRef.current = false;
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = null;
+    }
+    stopLoop();
+  }, [stopLoop]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !visible) return;
+    const onScroll = () => {
+      if (selfScrollingRef.current) {
+        selfScrollingRef.current = false;
+        return;
+      }
+      if (!hoveringRef.current) return;
+      stopLoop();
+      if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = setTimeout(() => {
+        resumeTimerRef.current = null;
+        if (hoveringRef.current) startLoop();
+      }, resumeDelay);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [scrollRef, visible, startLoop, stopLoop]);
+
+  useEffect(
+    () => () => {
+      handlePointerLeave();
+    },
+    [handlePointerLeave],
+  );
+
+  const Icon = isUp ? CaretUpIcon : CaretDownIcon;
+
+  return (
+    <View
+      position="sticky"
+      top={isUp ? 0 : undefined}
+      bottom={isUp ? undefined : 0}
+      height={0}
+      zIndex={2}
+    >
+      <View
+        position="absolute"
+        left={0}
+        right={0}
+        top={isUp ? 0 : undefined}
+        bottom={isUp ? undefined : 0}
+        height={28}
+        alignItems="center"
+        justifyContent="center"
+        pointerEvents={visible ? "auto" : "none"}
+        opacity={visible ? 1 : 0}
+        style={{
+          background: isUp
+            ? "linear-gradient(to bottom, var(--background) 40%, transparent)"
+            : "linear-gradient(to top, var(--background) 40%, transparent)",
+          transition: "opacity 160ms ease-out",
+        }}
+        onPointerEnter={visible ? handlePointerEnter : undefined}
+        onPointerLeave={handlePointerLeave}
+      >
+        <View position="relative" zIndex={1} style={{ lineHeight: 0 }}>
+          <Icon size={20} />
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/shared/groupContext.ts

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+
+export const ControlGroupCtx = createContext(false);
+export const useControlGrouped = () => useContext(ControlGroupCtx);

package/src/shared/tableCellContext.ts

@@ -0,0 +1,14 @@
+/**
+ * TableCellContext - re-exported from @multiplatform.one/table.
+ *
+ * The canonical TableCellContext lives in `@multiplatform.one/table-primitives`.
+ * This re-export ensures forms field components share the same context instance
+ * as Table.Cell, so chromeless rendering detection works correctly.
+ */
+
+export {
+  TableCellContext,
+  useTableCellContext,
+  useIsInTableCell,
+  type TableCellContextValue,
+} from "@multiplatform.one/table-primitives";