@multiplatform.one/forms 6.0.0

package/src/fields/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,280 @@
+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,
+  SizableText,
+  Text,
+  ToggleGroup as TamaguiToggleGroup,
+  XStack,
+  YStack,
+} from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { ToggleGroup } from "./index";
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: "Forms/ToggleGroup",
+  component: ToggleGroup,
+  parameters: { status: { type: "beta" } },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the toggle group",
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the toggle group",
+    },
+    error: {
+      control: "text",
+      description: "Error message to display",
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the toggle group is required",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the toggle group is disabled",
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the toggle group",
+    },
+    type: {
+      control: "select",
+      options: ["single", "multiple"],
+      description: "Whether single or multiple items can be selected",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          alignment: "center",
+          features: ["comments"],
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <YStack gap="$4">
+            <ToggleGroup
+              label="Alignment"
+              name="alignment"
+              type="single"
+              options={[
+                { label: "Left", value: "left" },
+                { label: "Center", value: "center" },
+                { label: "Right", value: "right" },
+              ]}
+            />
+            <ToggleGroup
+              label="Enabled features"
+              name="features"
+              type="multiple"
+              options={[
+                { label: "Comments", value: "comments" },
+                { label: "Mentions", value: "mentions" },
+                { label: "Attachments", value: "attachments" },
+              ]}
+            />
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Alignment",
+    helperText: "Choose alignment",
+    type: "single",
+    defaultValue: "left",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" },
+    ],
+  },
+  render: (args) => <ToggleGroup {...args} />,
+};
+
+export const Basic: Story = {
+  args: {
+    label: "Text alignment",
+    helperText: "Choose one alignment",
+    type: "single",
+    defaultValue: "left",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" },
+    ],
+    onValueChange: action("onValueChange"),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Toggle Group",
+    disabled: true,
+    type: "single",
+    defaultValue: "left",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" },
+    ],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Toggle Group with Error",
+    error: "This field is required",
+    required: true,
+    type: "single",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" },
+    ],
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <ToggleGroup
+        label="Small"
+        size="$2"
+        type="single"
+        defaultValue="left"
+        options={[
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" },
+          { label: "Right", value: "right" },
+        ]}
+      />
+      <ToggleGroup
+        label="Medium (default)"
+        size="$3"
+        type="single"
+        defaultValue="center"
+        options={[
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" },
+          { label: "Right", value: "right" },
+        ]}
+      />
+      <ToggleGroup
+        label="Large"
+        size="$4"
+        type="single"
+        defaultValue="right"
+        options={[
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" },
+          { label: "Right", value: "right" },
+        ]}
+      />
+    </YStack>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState("left");
+      return (
+        <YStack gap="$4" maxWidth={400}>
+          <ToggleGroup
+            label="Text alignment"
+            type="single"
+            value={value}
+            onValueChange={(val) => setValue(val as string)}
+            options={[
+              { label: "Left", value: "left" },
+              { label: "Center", value: "center" },
+              { label: "Right", value: "right" },
+            ]}
+          />
+          <Text>Selected: {value}</Text>
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};
+
+const alignmentOptions = [
+  { label: "Left", value: "left" },
+  { label: "Center", value: "center" },
+  { label: "Right", value: "right" },
+];
+
+export const Comparison: Story = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customVal, setCustomVal] = useState("left");
+      const [tamaguiVal, setTamaguiVal] = useState("left");
+      return (
+        <XStack gap="$6" alignItems="flex-start" padding="$4">
+          <YStack gap="$3" width={300}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Custom ToggleGroup
+            </Paragraph>
+            <ToggleGroup
+              type="single"
+              value={customVal}
+              options={alignmentOptions}
+              onValueChange={(val) => {
+                setCustomVal(val as string);
+                action("custom.onValueChange")(val);
+              }}
+            />
+          </YStack>
+
+          <YStack gap="$3" width={300}>
+            <Paragraph size="$2" color="$placeholderColor">
+              Tamagui ToggleGroup
+            </Paragraph>
+            <TamaguiToggleGroup
+              type="single"
+              value={tamaguiVal}
+              onValueChange={(val) => {
+                setTamaguiVal(val);
+                action("tamagui.onValueChange")(val);
+              }}
+            >
+              {alignmentOptions.map((opt) => (
+                <TamaguiToggleGroup.Item key={opt.value} value={opt.value}>
+                  <SizableText>{opt.label}</SizableText>
+                </TamaguiToggleGroup.Item>
+              ))}
+            </TamaguiToggleGroup>
+          </YStack>
+        </XStack>
+      );
+    };
+    return <ComparisonExample />;
+  },
+};

package/src/fields/ToggleGroup/index.tsx

@@ -0,0 +1,399 @@
+import type { ReactNode } from "react";
+import type { AnyFormApi } from "../../types";
+import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
+import { SizableText, ToggleGroup as TamaguiToggleGroup, View, XStack, styled } from "tamagui";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { formButtonColors } from "../../shared/colorRamps";
+import {
+  getElevationWrapperProps,
+  getFieldError,
+  mergeFieldHandler,
+  stripRadiusFromStateProps,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+
+const ToggleItemFrame = styled(TamaguiToggleGroup.Item, {
+  cursor: "pointer",
+  userSelect: "none",
+  backgroundColor: formButtonColors.background.base,
+  borderColor: formButtonColors.border.base,
+  borderWidth: 1,
+  hoverStyle: {
+    backgroundColor: formButtonColors.background.hover,
+  },
+  pressStyle: {
+    backgroundColor: formButtonColors.background.active,
+  },
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent",
+        hoverStyle: {
+          backgroundColor: "transparent",
+          borderColor: formButtonColors.border.hover,
+        },
+        pressStyle: {
+          backgroundColor: "transparent",
+          borderColor: formButtonColors.border.active,
+        },
+      },
+    },
+    active: {
+      true: {
+        backgroundColor: formButtonColors.border.active,
+        borderColor: formButtonColors.border.active,
+        hoverStyle: {
+          backgroundColor: formButtonColors.border.active,
+          borderColor: formButtonColors.border.active,
+        },
+        pressStyle: {
+          backgroundColor: formButtonColors.border.active,
+          borderColor: formButtonColors.border.active,
+        },
+      },
+    },
+  } as const,
+});
+
+/** Returns position-aware border radius so items connect as a segmented group. */
+function getGroupedBorderRadius(
+  index: number,
+  count: number,
+  orientation: "horizontal" | "vertical",
+  radius: string | number | undefined,
+): Record<string, unknown> {
+  const zero = 0;
+  if (count <= 1 || radius === 0 || radius === "$0") {
+    return { borderRadius: radius };
+  }
+  const isFirst = index === 0;
+  const isLast = index === count - 1;
+  if (isFirst && isLast) return { borderRadius: radius };
+  if (orientation === "horizontal") {
+    return isFirst
+      ? {
+          borderTopLeftRadius: radius,
+          borderBottomLeftRadius: radius,
+          borderTopRightRadius: zero,
+          borderBottomRightRadius: zero,
+        }
+      : isLast
+        ? {
+            borderTopRightRadius: radius,
+            borderBottomRightRadius: radius,
+            borderTopLeftRadius: zero,
+            borderBottomLeftRadius: zero,
+          }
+        : {
+            borderRadius: zero,
+            borderTopLeftRadius: zero,
+            borderTopRightRadius: zero,
+            borderBottomLeftRadius: zero,
+            borderBottomRightRadius: zero,
+          };
+  }
+  return isFirst
+    ? {
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        borderBottomLeftRadius: zero,
+        borderBottomRightRadius: zero,
+      }
+    : isLast
+      ? {
+          borderBottomLeftRadius: radius,
+          borderBottomRightRadius: radius,
+          borderTopLeftRadius: zero,
+          borderTopRightRadius: zero,
+        }
+      : {
+          borderRadius: zero,
+          borderTopLeftRadius: zero,
+          borderTopRightRadius: zero,
+          borderBottomLeftRadius: zero,
+          borderBottomRightRadius: zero,
+        };
+}
+
+function ToggleItemWithElevation({
+  elevationWrapperProps,
+  groupedRadius,
+  ...props
+}: {
+  elevationWrapperProps: Record<string, any>;
+  value: string;
+  groupedRadius: Record<string, unknown>;
+} & Record<string, any>) {
+  if (elevationWrapperProps.elevation) {
+    return (
+      <View {...elevationWrapperProps} {...groupedRadius}>
+        <ToggleItemFrame {...props} {...groupedRadius} />
+      </View>
+    );
+  }
+  return <ToggleItemFrame {...props} {...groupedRadius} />;
+}
+
+export interface ToggleGroupProps {
+  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;
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  onBlur?: (...args: any[]) => void;
+  options?: Array<{ label: string; value: string; icon?: ReactNode }>;
+  orientation?: "horizontal" | "vertical";
+  children?: ReactNode;
+  /** When true, renders a skeleton placeholder instead of the toggle group */
+  skeleton?: boolean;
+  /** When true, uses compact sizing */
+  compact?: boolean;
+}
+
+export function ToggleGroup({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size,
+  id: idProp,
+  type = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  onBlur,
+  options,
+  orientation = "horizontal",
+  children,
+  skeleton,
+  compact,
+}: ToggleGroupProps) {
+  const { resolvedForm, knobProps, control, text, 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) {
+    const optionCount = options?.length ?? 3;
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <XStack gap={0} alignSelf="flex-start">
+          {Array.from({ length: optionCount }, (_, i) => (
+            <Skeleton key={i} variant="rounded" width={60} height={knobProps.sizeToken} />
+          ))}
+        </XStack>
+      </FieldLayout>
+    );
+  }
+
+  const renderContent = (resolvedValue: string | string[] | undefined) => {
+    if (children) return children;
+    if (!options) return null;
+    const radius = knobProps.borderRadius.borderRadius;
+    const count = options.length;
+    const isSelected = (val: string) =>
+      type === "multiple"
+        ? Array.isArray(resolvedValue) && resolvedValue.includes(val)
+        : resolvedValue === val;
+
+    return options.map((option, index) => {
+      const groupedRadius = getGroupedBorderRadius(index, count, orientation, radius);
+      const selected = isSelected(option.value);
+      const activeColors = {
+        backgroundColor: formButtonColors.border.active,
+        borderColor: formButtonColors.border.active,
+      };
+
+      return (
+        <ToggleItemWithElevation
+          key={option.value}
+          elevationWrapperProps={elevationWrapperProps}
+          groupedRadius={groupedRadius}
+          value={option.value}
+          size={knobProps.sizeToken}
+          width="auto"
+          height="auto"
+          minHeight={knobProps.sizeToken}
+          flexShrink={0}
+          flexGrow={orientation === "horizontal" ? 1 : 0}
+          paddingHorizontal="$2"
+          borderWidth={knobProps.borderRadius.borderWidth}
+          outlined={knobProps.outlined}
+          animation={knobProps.transition}
+          disabled={disabled}
+          {...(selected ? activeColors : undefined)}
+          {...(selected ? { active: true, activeStyle: activeColors } : undefined)}
+          {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+          hoverStyle={{
+            ...stripRadiusFromStateProps(control.hoverKnobProps),
+            ...(selected
+              ? activeColors
+              : knobProps.outlined
+                ? {
+                    backgroundColor: "transparent",
+                    borderColor: formButtonColors.border.hover,
+                  }
+                : {
+                    backgroundColor: formButtonColors.background.hover,
+                    borderColor: formButtonColors.border.base,
+                  }),
+          }}
+          pressStyle={{
+            ...stripRadiusFromStateProps(control.pressKnobProps),
+            ...(selected
+              ? activeColors
+              : knobProps.outlined
+                ? {
+                    backgroundColor: "transparent",
+                    borderColor: formButtonColors.border.active,
+                  }
+                : {
+                    backgroundColor: formButtonColors.background.active,
+                    borderColor: formButtonColors.border.base,
+                  }),
+          }}
+          {...(stripRadiusFromStateProps(control.focusKnobProps) && {
+            focusStyle: {
+              borderColor: formButtonColors.border.active,
+              ...stripRadiusFromStateProps(control.focusKnobProps),
+            },
+          })}
+          {...(stripRadiusFromStateProps(control.focusVisibleKnobProps) && {
+            focusVisibleStyle: {
+              borderColor: formButtonColors.border.active,
+              ...stripRadiusFromStateProps(control.focusVisibleKnobProps),
+            },
+          })}
+        >
+          {option.icon}
+          <SizableText
+            size={knobProps.sizeToken as FontSizeTokens}
+            userSelect="none"
+            {...knobProps.body}
+            hoverStyle={text.hoverKnobProps}
+            pressStyle={text.pressKnobProps}
+            focusStyle={text.focusKnobProps}
+            focusVisibleStyle={text.focusVisibleKnobProps}
+          >
+            {option.label}
+          </SizableText>
+        </ToggleItemWithElevation>
+      );
+    });
+  };
+
+  const renderToggleGroup = (
+    resolvedValue: string | string[] | undefined,
+    isControlled: boolean,
+    handleChange?: (val: string | string[]) => void,
+    handleBlur?: (...args: any[]) => void,
+    hasError?: boolean,
+  ) => {
+    const emptyValue = type === "multiple" ? [] : "";
+
+    const toggleProps: any = {
+      type,
+      ...(type === "single" ? { disableDeactivation: true } : {}),
+      ...(isControlled
+        ? { value: resolvedValue ?? emptyValue }
+        : { defaultValue: resolvedValue ?? emptyValue }),
+      onValueChange: (val: string | string[]) => {
+        if (disabled || readOnly) return;
+        handleChange?.(val);
+        onValueChange?.(val);
+      },
+      id,
+      disabled,
+      orientation,
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      size: knobProps.sizeToken,
+      gap: 0,
+      alignSelf: "flex-start",
+      ...(handleBlur ? { onBlur: handleBlur } : undefined),
+      "aria-required": required || undefined,
+      "aria-invalid": hasError || undefined,
+      "aria-readonly": readOnly || undefined,
+    };
+
+    return (
+      <TamaguiToggleGroup {...toggleProps}>
+        {renderContent(resolvedValue ?? emptyValue)}
+      </TamaguiToggleGroup>
+    );
+  };
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={error}
+        required={required}
+        helperText={helperText}
+        size={size}
+        knobProps={knobProps}
+      >
+        {renderToggleGroup(value ?? defaultValue, value !== undefined, undefined, onBlur, !!error)}
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error);
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            required={required}
+            helperText={helperText}
+            size={size}
+            knobProps={knobProps}
+          >
+            {renderToggleGroup(
+              value !== undefined ? value : (field.state.value as string | string[]),
+              true,
+              (val) => field.handleChange(val as any),
+              mergeFieldHandler(field, "handleBlur", onBlur),
+              !!resolvedError,
+            )}
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}
+
+ToggleGroup.Item = TamaguiToggleGroup.Item;