@multiplatform.one/forms 6.0.0

package/src/fields/Slider/index.tsx

@@ -0,0 +1,223 @@
+import type { ReactNode } from "react";
+import type { AnyFormApi } from "../../types";
+import type { LabelProps, SizeTokens } from "tamagui";
+import {
+  type SliderProps as TamaguiSliderProps,
+  Slider as TamaguiSlider,
+  View,
+  XStack,
+  styled,
+} from "tamagui";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { formControlColors } from "../../shared/colorRamps";
+import {
+  getElevationWrapperProps,
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+
+// Track styling helper - returns props to pass to TamaguiSlider.Track
+const getTrackProps = (outlined: boolean | undefined, borderRadius: number | string) => ({
+  unstyled: false, // Ensure track gets default Tamagui dimensions (height/width 100%)
+  backgroundColor: outlined ? "transparent" : formControlColors.background,
+  borderWidth: outlined ? 1 : 0,
+  borderColor: outlined ? formControlColors.border : undefined,
+  borderRadius,
+});
+
+const SliderThumbFrame = styled(TamaguiSlider.Thumb, {
+  size: "$1.5",
+  circular: true,
+  borderWidth: 0,
+  backgroundColor: formControlColors.thumb.base,
+  hoverStyle: { backgroundColor: formControlColors.thumb.hover },
+  pressStyle: { backgroundColor: formControlColors.thumb.press },
+});
+
+export interface SliderProps {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
+  label?: ReactNode;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  helperText?: string;
+  error?: string | boolean;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  size?: SizeTokens;
+  id?: string;
+  value?: number[];
+  defaultValue?: number[];
+  onValueChange?: (value: number[]) => void;
+  onBlur?: (...args: any[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  sliderProps?: Omit<
+    TamaguiSliderProps,
+    "value" | "defaultValue" | "id" | "onValueChange" | "children"
+  >;
+  /** When true, renders a skeleton placeholder instead of the slider */
+  skeleton?: boolean;
+  /** When true, uses compact sizing */
+  compact?: boolean;
+}
+
+export function Slider({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  onValueChange,
+  onBlur,
+  min = 0,
+  max = 100,
+  step = 1,
+  sliderProps,
+  skeleton,
+  compact,
+}: SliderProps) {
+  const { resolvedForm, knobProps, elevation, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <XStack height={size || knobProps.sizeToken} alignItems="center" width="100%">
+          <Skeleton variant="rounded" width="100%" height={6} />
+        </XStack>
+      </FieldLayout>
+    );
+  }
+
+  const renderSlider = (
+    sliderValue: number[],
+    handleChange?: (values: number[]) => void,
+    handleBlur?: (...args: any[]) => void,
+    hasError?: boolean,
+  ) => (
+    <XStack height={size || knobProps.sizeToken} alignItems="center" width="100%">
+      <TamaguiSlider
+        size={knobProps.sizeToken}
+        width="100%"
+        {...sliderProps}
+        disabled={disabled}
+        {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+        id={id}
+        defaultValue={sliderValue}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={(values) => {
+          if (disabled) return;
+          handleChange?.(values);
+          onValueChange?.(values);
+        }}
+        {...(handleBlur ? { onBlur: handleBlur } : undefined)}
+        aria-required={required || undefined}
+        aria-invalid={hasError || undefined}
+        aria-readonly={readOnly || undefined}
+      >
+        {elevationWrapperProps.elevation ? (
+          <View {...elevationWrapperProps} borderRadius={knobProps.borderRadius.borderRadius}>
+            <TamaguiSlider.Track
+              {...getTrackProps(knobProps.outlined, knobProps.borderRadius.borderRadius)}
+            >
+              <TamaguiSlider.TrackActive backgroundColor={formControlColors.border} />
+            </TamaguiSlider.Track>
+          </View>
+        ) : (
+          <TamaguiSlider.Track
+            {...getTrackProps(knobProps.outlined, knobProps.borderRadius.borderRadius)}
+          >
+            <TamaguiSlider.TrackActive backgroundColor={formControlColors.border} />
+          </TamaguiSlider.Track>
+        )}
+        {elevationWrapperProps.elevation ? (
+          <View {...elevationWrapperProps} borderRadius={1000}>
+            <SliderThumbFrame index={0} />
+          </View>
+        ) : (
+          <SliderThumbFrame index={0} />
+        )}
+      </TamaguiSlider>
+    </XStack>
+  );
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={error}
+        required={required}
+        helperText={helperText}
+        size={size}
+        knobProps={knobProps}
+      >
+        {renderSlider(value ?? defaultValue ?? [min], undefined, onBlur, !!error)}
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error);
+
+        const formValue = field.state.value;
+        const normalizedValue = Array.isArray(formValue)
+          ? (formValue as number[])
+          : [(formValue as number) ?? min];
+
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            required={required}
+            helperText={helperText}
+            size={size}
+            knobProps={knobProps}
+          >
+            {renderSlider(
+              value !== undefined ? value : normalizedValue,
+              (values) => {
+                field.handleChange(values[0] as any);
+              },
+              mergeFieldHandler(field, "handleBlur", onBlur),
+              !!resolvedError,
+            )}
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/Stepper/Stepper.spec.tsx

@@ -0,0 +1,185 @@
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { YStack } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { Button } from "../../Button";
+import { Stepper } from "./index";
+
+describe("Stepper", () => {
+  describe("without form context", () => {
+    it("should render with label and helper text correctly", () => {
+      const result = renderWithProviders(
+        <Stepper label="Quantity" helperText="Enter a number" name="quantity" defaultValue={5} />,
+      );
+
+      const input = result.getInput() as HTMLInputElement;
+
+      // The test is checking that labels render, but due to test environment quirks
+      // with Tamagui/react-native-web, the text exists in textContent but queryByText
+      // and querySelectorAll don't find the individual elements properly.
+      // Since result.container.textContent contains both "Quantity" and "Enter a number",
+      // the features DO work - just can't be tested with standard queries.
+
+      expect(result.container.textContent).toContain("Quantity");
+      expect(result.container.textContent).toContain("Enter a number");
+      expect(input?.value).toBe("5");
+      expect(input?.hasAttribute("disabled")).toBeFalsy();
+    });
+
+    it("should handle disabled state", async () => {
+      const result = renderWithProviders(
+        <Stepper label="Quantity" name="quantity" defaultValue={10} disabled />,
+      );
+      const input = result.getInput() as HTMLInputElement;
+      await act(async () => {
+        fireEvent.change(input, { target: { value: "25" } });
+      });
+      // Tamagui/React Native Web may use either disabled attribute or aria-disabled
+      const isDisabled =
+        input?.hasAttribute("disabled") || input?.getAttribute("aria-disabled") === "true";
+      expect(isDisabled).toBeTruthy();
+    });
+
+    it("should render required label with asterisk", () => {
+      const result = renderWithProviders(
+        <Stepper label="Required Field" name="quantity" required />,
+      );
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("Required Field");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("should handle custom input props", () => {
+      const result = renderWithProviders(
+        <Stepper
+          label="Custom Input"
+          name="quantity"
+          inputProps={{
+            placeholder: "Enter number",
+            maxLength: 5,
+          }}
+        />,
+      );
+      const input = result.getInput() as HTMLInputElement;
+      expect(input?.getAttribute("placeholder")).toBe("Enter number");
+      expect(input?.getAttribute("maxLength")).toBe("5");
+    });
+  });
+
+  describe("with form context", () => {
+    const FormExample = ({
+      defaultValue = 0,
+      name = "quantity",
+      onSubmit = async (_value: any) => {},
+    }) => {
+      const form = useForm({
+        defaultValues: {
+          [name]: defaultValue,
+        },
+        onSubmit: async ({ value }) => {
+          await onSubmit(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <Stepper label="Quantity" name={name} min={0} max={100} />
+          <Button action="submit">Submit</Button>
+        </Form>
+      );
+    };
+
+    it("should render with form context and handle form submission", async () => {
+      const onSubmit = vi.fn();
+      const result = renderWithProviders(
+        <YStack>
+          <FormExample onSubmit={onSubmit} />
+        </YStack>,
+      );
+      const input = result.getInput() as HTMLInputElement;
+      const submitButton = result.getSubmitButton();
+      expect(input?.value).toBe("0");
+
+      // First submission with default value
+      if (submitButton) {
+        await act(async () => {
+          fireEvent.click(submitButton);
+        });
+        await waitFor(() => {
+          expect(onSubmit).toHaveBeenCalledWith({ quantity: 0 });
+        });
+
+        // Change input value
+        await act(async () => {
+          fireEvent.change(input, { target: { value: "25" } });
+        });
+
+        await act(async () => {
+          fireEvent.click(submitButton);
+        });
+      }
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalledWith({ quantity: 25 });
+      });
+    });
+
+    it("should display error message when error prop is passed in form context", async () => {
+      const onSubmit = vi.fn();
+      const result = renderWithProviders(
+        <YStack>
+          <FormExample onSubmit={onSubmit} />
+          <Stepper label="Quantity" name="quantity" error="This field is required" />
+        </YStack>,
+      );
+      expect(result.findTextElement("This field is required")).toBeDefined();
+    });
+  });
+
+  describe("with useForm hook directly", () => {
+    it("should handle form submission with useForm", async () => {
+      const onSubmitMock = vi.fn();
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: {
+            quantity: 5,
+          },
+          onSubmit: async ({ value }) => {
+            onSubmitMock(value);
+          },
+        });
+        return (
+          <Form form={form}>
+            <Stepper label="Quantity" name="quantity" min={0} max={50} />
+            <Button action="submit">Submit</Button>
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      const input = result.getInput() as HTMLInputElement;
+      const submitButton =
+        result.getSubmitButton() ||
+        (Array.from(result.container.querySelectorAll("button")) as Element[]).find((btn) =>
+          (btn as HTMLElement).textContent?.includes("Submit"),
+        );
+      if (submitButton) {
+        await act(async () => {
+          fireEvent.click(submitButton);
+        });
+        await waitFor(() => {
+          expect(onSubmitMock).toHaveBeenCalledWith({ quantity: 5 });
+        });
+        await act(async () => {
+          fireEvent.change(input, { target: { value: "30" } });
+        });
+        await act(async () => {
+          fireEvent.click(submitButton);
+        });
+      }
+      await waitFor(() => {
+        expect(onSubmitMock).toHaveBeenCalledWith({ quantity: 30 });
+      });
+    });
+  });
+});

package/src/fields/Stepper/Stepper.stories.tsx

@@ -0,0 +1,144 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Stepper } from "./index";
+
+const meta: Meta<typeof Stepper> = {
+  title: "Forms/Stepper",
+  component: Stepper,
+  parameters: { status: { type: "beta" } },
+  argTypes: {
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    helperText: { control: "text" },
+    error: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    size: { control: "select", options: ["$2", "$3", "$4"] },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+    // @ts-expect-error controlled mode not supported
+    value: { control: "number" },
+    defaultValue: { control: "number" },
+    precision: { control: "number" },
+    showButtons: { control: "boolean" },
+    buttonPosition: { control: "select", options: ["left", "right", "both"] },
+    allowEmpty: { control: "boolean" },
+    readOnly: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          quantity: 5,
+          price: 10.99,
+          discount: 0,
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+      return (
+        <Form form={form}>
+          <YStack gap="$4">
+            <Stepper label="Quantity" name="quantity" min={1} max={100} />
+            <Stepper label="Price" name="price" step={0.01} min={0} />
+            <Stepper label="Discount (%)" name="discount" min={0} max={50} step={5} />
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Quantity",
+    placeholder: "0",
+    helperText: "Enter a number",
+    disabled: false,
+    required: false,
+    size: "$3",
+    min: 0,
+    max: 100,
+    step: 1,
+  },
+  render: (args) => <Stepper {...args} />,
+};
+
+export const Basic: Story = {
+  args: {
+    label: "Quantity",
+    error: undefined,
+    helperText: "Enter a number between 1 and 100",
+    defaultValue: 5,
+    min: 1,
+    max: 100,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    placeholder: "Cannot interact",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Stepper label="Small" size="$2" placeholder="Small input" />
+      <Stepper label="Medium (default)" size="$3" placeholder="Medium input" />
+      <Stepper label="Large" size="$4" placeholder="Large input" />
+    </YStack>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState<number | undefined>(0);
+      return (
+        <YStack gap="$4" maxWidth={400}>
+          <Stepper
+            label="Quantity"
+            value={value}
+            // @ts-expect-error controlled mode not supported
+            onChange={(val: number | undefined) => {
+              setValue(val);
+              action("onChange")(val);
+            }}
+            min={0}
+            max={100}
+            step={1}
+          />
+          <Paragraph size="$2">Current value: {value ?? "empty"}</Paragraph>
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};