@multiplatform.one/forms 6.0.0

package/dist/esm/fields/Switch/Switch.stories.native.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Label, Paragraph, Switch as TamaguiSwitch, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { Switch } from "./index.native.js";
+var meta = {
+  title: "Forms/Switch",
+  component: Switch,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    checked: {
+      control: "boolean"
+    }
+  }
+};
+var Switch_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          notifications: true,
+          marketing: false,
+          analytics: true
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */_jsx(Form, {
+        form,
+        children: /* @__PURE__ */_jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(Switch, {
+            label: "Push Notifications",
+            name: "notifications",
+            helperText: "Receive notifications about updates"
+          }), /* @__PURE__ */_jsx(Switch, {
+            label: "Marketing Emails",
+            name: "marketing",
+            helperText: "Receive promotional emails"
+          }), /* @__PURE__ */_jsx(Switch, {
+            label: "Analytics Tracking",
+            name: "analytics",
+            helperText: "Help improve our service"
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Save Preferences"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Dark mode",
+    helperText: "Toggle dark mode",
+    disabled: false,
+    required: false,
+    size: "$3"
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(Switch, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Enable notifications",
+    helperText: "Receive push notifications",
+    defaultValue: false
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true
+  }
+};
+var WithError = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true
+  }
+};
+var Pointy = {
+  render: function render3() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(Switch, {
+        label: "Pointy (hard angles)",
+        pointy: true,
+        defaultValue: true
+      }), /* @__PURE__ */_jsx(Switch, {
+        label: "Regular (default)",
+        pointy: false,
+        defaultValue: true
+      })]
+    });
+  }
+};
+var Sizes = {
+  render: function render4() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(Switch, {
+        label: "Small",
+        size: "$2"
+      }), /* @__PURE__ */_jsx(Switch, {
+        label: "Medium (default)",
+        size: "$3"
+      }), /* @__PURE__ */_jsx(Switch, {
+        label: "Large",
+        size: "$4"
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render5() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [checked, setChecked] = useState(false);
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */_jsx(Switch, {
+          label: "Enable notifications",
+          checked,
+          onCheckedChange: function onCheckedChange(val) {
+            setChecked(!!val);
+            action("onCheckedChange")(val);
+          }
+        }), /* @__PURE__ */_jsxs(Paragraph, {
+          size: "$2",
+          children: ["Current value: ", checked ? "ON" : "OFF"]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(InteractiveExample, {});
+  }
+};
+var Comparison = {
+  render: function render6() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customChecked, setCustomChecked] = useState(false);
+      var [tamaguiChecked, setTamaguiChecked] = useState(false);
+      return /* @__PURE__ */_jsxs(XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */_jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom Switch"
+          }), /* @__PURE__ */_jsx(Switch, {
+            label: "Enable notifications",
+            defaultValue: customChecked,
+            onCheckedChange: function onCheckedChange(val) {
+              setCustomChecked(!!val);
+              action("custom.onCheckedChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */_jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui Switch"
+          }), /* @__PURE__ */_jsxs(XStack, {
+            gap: "$2",
+            alignItems: "center",
+            children: [/* @__PURE__ */_jsx(TamaguiSwitch, {
+              id: "tamagui-sw",
+              checked: tamaguiChecked,
+              onCheckedChange: function onCheckedChange(val) {
+                setTamaguiChecked(val);
+                action("tamagui.onCheckedChange")(val);
+              },
+              children: /* @__PURE__ */_jsx(TamaguiSwitch.Thumb, {})
+            }), /* @__PURE__ */_jsx(Label, {
+              htmlFor: "tamagui-sw",
+              children: "Enable notifications"
+            })]
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Interactive, Main, Pointy, Sizes, Standalone, WithError, Switch_stories_default as default };
+//# sourceMappingURL=Switch.stories.native.js.map

package/dist/esm/fields/Switch/Switch.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","useForm","useState","Label","Paragraph","Switch","TamaguiSwitch","XStack","YStack","Button","Form","meta","title","component","parameters","status","type","argTypes","label","control","helperText","error","required","disabled","size","options","checked","Switch_stories_default","Main","name","render","FormExample","FormExample2","form","defaultValues","notifications","marketing","analytics","onSubmit","param","value","children","gap","Standalone","args","render2","Basic","defaultValue","Disabled","WithError","Pointy","render3","maxWidth","pointy","Sizes","render4","Interactive","render5","InteractiveExample","InteractiveExample2","setChecked"],"sources":["../../../../src/fields/Switch/Switch.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/Switch/index.mjs

@@ -0,0 +1,442 @@
+import { useEffect, useState } from "react";
+import { SwitchStyledContext, Label, View, XStack, createSwitch, getFontSize, getTokens, getVariable, getVariableValue, isWeb, styled, useGetThemedIcon, useTheme, withStaticProperties } from "tamagui";
+import { getSize } from "@tamagui/get-token";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { formCommonColors, formControlColors } from "../../shared/colorRamps.mjs";
+import { getElevationWrapperProps, getFieldError, mergeFieldHandler, stripRadiusFromStateProps, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const getSwitchHeight = val => Math.round(getVariableValue(getSize(val)) * 0.65);
+const getSwitchWidth = val => getSwitchHeight(val) * 2;
+const resolveRadiusValue = radius => {
+  if (typeof radius === "number") return radius;
+  if (typeof radius !== "string") return void 0;
+  const radiusToken = getTokens().radius?.[radius];
+  const resolved = getVariableValue(radiusToken || radius);
+  if (typeof resolved === "number" && Number.isFinite(resolved)) return resolved;
+  const parsed = Number.parseFloat(String(resolved));
+  return Number.isFinite(parsed) ? parsed : void 0;
+};
+const SwitchThumbStyled = styled(View, {
+  name: "SwitchThumb",
+  transition: "quick",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        backgroundColor: formControlColors.thumb.base,
+        borderRadius: 1e3,
+        justifyContent: "center",
+        alignItems: "center",
+        ...(!isWeb ? {
+          shadowColor: "#000",
+          shadowOffset: {
+            width: 0,
+            height: 1
+          },
+          shadowOpacity: 0.15,
+          shadowRadius: 2,
+          elevation: 2
+        } : void 0)
+      }
+    },
+    checked: {
+      true: {}
+    },
+    size: {
+      "...size": val => {
+        const size = getSwitchHeight(val);
+        return {
+          height: size,
+          width: size
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const SwitchFrameStyled = styled(View, {
+  name: "Switch",
+  render: "button",
+  variants: {
+    unstyled: {
+      false: {
+        position: "relative",
+        borderRadius: 1e3,
+        backgroundColor: formControlColors.background,
+        borderWidth: 1,
+        borderColor: formControlColors.border,
+        hoverStyle: {
+          borderColor: formControlColors.border
+        },
+        pressStyle: {
+          borderColor: formControlColors.border
+        },
+        focusStyle: {
+          borderColor: formControlColors.border
+        },
+        focusVisibleStyle: {
+          borderColor: formControlColors.border,
+          outlineColor: "$outlineColor",
+          outlineStyle: "solid",
+          outlineWidth: 2
+        }
+      }
+    },
+    checked: {
+      true: {
+        backgroundColor: formControlColors.border,
+        borderColor: formControlColors.border
+      },
+      false: {
+        backgroundColor: formControlColors.background,
+        borderColor: formControlColors.border
+      }
+    },
+    size: {
+      "...size": val => {
+        const height = getSwitchHeight(val);
+        const width = getSwitchWidth(val);
+        return {
+          height,
+          minHeight: height,
+          width
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const SwitchIconFrame = styled(View, {
+  position: "absolute",
+  context: SwitchStyledContext,
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center",
+  variants: {
+    placement: {
+      right: (_, {
+        props,
+        tokens
+      }) => {
+        const amount = tokens.space[props.size]?.val * 0.35 || 4;
+        return {
+          right: amount
+        };
+      },
+      left: (_, {
+        props,
+        tokens
+      }) => {
+        const amount = tokens.space[props.size]?.val * 0.35 || 4;
+        return {
+          left: amount
+        };
+      }
+    },
+    size: {
+      "...size": {}
+    }
+  },
+  defaultVariants: {
+    placement: "right"
+  }
+});
+const getIconSize = (size, scale) => {
+  return (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scale;
+};
+const SwitchIcon = SwitchIconFrame.styleable((iconProps, ref) => {
+  const {
+    children,
+    color: colorProp,
+    scaleIcon = 1.2,
+    ...props
+  } = iconProps;
+  const {
+    size
+  } = SwitchStyledContext.useStyledContext();
+  const theme = useTheme();
+  const color = getVariable(colorProp || theme[colorProp]?.get("web") || theme.color10?.get("web"));
+  const iconSize = getIconSize(size, scaleIcon);
+  const getThemedIcon = useGetThemedIcon({
+    size: iconSize,
+    color
+  });
+  return /* @__PURE__ */jsx(SwitchIconFrame, {
+    ref,
+    ...props,
+    children: getThemedIcon(children)
+  });
+});
+const SwitchComp = createSwitch({
+  Frame: SwitchFrameStyled,
+  Thumb: SwitchThumbStyled
+});
+const StyledSwitch = withStaticProperties(SwitchComp, {
+  Icon: SwitchIcon
+});
+function Switch({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size,
+  id: idProp,
+  checked,
+  defaultValue,
+  onCheckedChange,
+  onBlur,
+  leftIcon,
+  rightIcon,
+  switchProps,
+  pointy,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    control,
+    text,
+    elevation,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name, v => !v);
+  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const [internalChecked, setInternalChecked] = useState(defaultValue ?? false);
+  useEffect(() => {
+    if (checked === void 0 && defaultValue !== void 0) {
+      setInternalChecked(defaultValue);
+    }
+  }, [defaultValue, checked]);
+  const renderSwitch = (switchChecked, handleChange, handleBlur, hasError) => {
+    const resolvedPointy = pointy ?? knobProps.pointy;
+    const knobRadius = knobProps.borderRadius.borderRadius;
+    const isSquare = resolvedPointy || knobRadius === "$0";
+    const overrideRadius = switchProps?.borderRadius;
+    const borderWidth = knobProps.borderRadius.borderWidth ?? 1;
+    const thumbHeight = getSwitchHeight(knobProps.sizeToken);
+    let frameProps = {};
+    let thumbRadius = 1e3;
+    if (overrideRadius != null) {
+      frameProps = {
+        borderRadius: overrideRadius,
+        height: thumbHeight + borderWidth * 2,
+        minHeight: thumbHeight + borderWidth * 2,
+        width: thumbHeight * 2 + borderWidth * 2
+      };
+      thumbRadius = resolveRadiusValue(overrideRadius) ?? 1e3;
+    } else if (isSquare) {
+      frameProps = {
+        borderRadius: 0,
+        height: thumbHeight + borderWidth * 2,
+        minHeight: thumbHeight + borderWidth * 2,
+        width: thumbHeight * 2 + borderWidth * 2
+      };
+      thumbRadius = 0;
+    } else {
+      frameProps = {
+        height: thumbHeight + borderWidth * 2,
+        minHeight: thumbHeight + borderWidth * 2,
+        width: thumbHeight * 2 + borderWidth * 2
+      };
+    }
+    const switchElement = /* @__PURE__ */jsxs(StyledSwitch, {
+      ...knobProps.inputSurface,
+      transition: knobProps.transition || "quick",
+      size: knobProps.sizeToken,
+      ...(stripRadiusFromStateProps(control.hoverKnobProps) && {
+        hoverStyle: {
+          borderColor: formControlColors.border,
+          ...stripRadiusFromStateProps(control.hoverKnobProps)
+        }
+      }),
+      ...(stripRadiusFromStateProps(control.pressKnobProps) && {
+        pressStyle: {
+          borderColor: formControlColors.border,
+          ...stripRadiusFromStateProps(control.pressKnobProps)
+        }
+      }),
+      ...(stripRadiusFromStateProps(control.focusKnobProps) && {
+        focusStyle: {
+          borderColor: formControlColors.border,
+          ...stripRadiusFromStateProps(control.focusKnobProps)
+        }
+      }),
+      ...(stripRadiusFromStateProps(control.focusVisibleKnobProps) && {
+        focusVisibleStyle: {
+          borderColor: formControlColors.border,
+          ...stripRadiusFromStateProps(control.focusVisibleKnobProps)
+        }
+      }),
+      activeStyle: {
+        backgroundColor: formControlColors.border,
+        borderColor: formControlColors.border
+      },
+      ...frameProps,
+      ...switchProps,
+      disabled,
+      id,
+      checked: switchChecked,
+      ...(readOnly ? {
+        pointerEvents: "none"
+      } : void 0),
+      ...(readOnly ? {
+        "aria-readonly": true
+      } : void 0),
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      onCheckedChange: val => {
+        if (disabled || readOnly) return;
+        handleChange?.(val);
+        onCheckedChange?.(val);
+      },
+      ...(handleBlur ? {
+        onBlur: handleBlur
+      } : void 0),
+      children: [leftIcon && /* @__PURE__ */jsx(StyledSwitch.Icon, {
+        placement: "left",
+        children: leftIcon
+      }), rightIcon && /* @__PURE__ */jsx(StyledSwitch.Icon, {
+        placement: "right",
+        children: rightIcon
+      }), /* @__PURE__ */jsx(StyledSwitch.Thumb, {
+        borderRadius: thumbRadius,
+        transition: knobProps.transition || "quick"
+      })]
+    });
+    if (elevationWrapperProps.elevation) {
+      return /* @__PURE__ */jsx(View, {
+        ...elevationWrapperProps,
+        borderRadius: isSquare ? 0 : 1e3,
+        children: switchElement
+      });
+    }
+    return switchElement;
+  };
+  if (skeleton) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      size,
+      knobProps,
+      compactSpacing: true,
+      children: /* @__PURE__ */jsxs(XStack, {
+        gap: "$2",
+        alignItems: "center",
+        height: size || knobProps.sizeToken,
+        children: [/* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: 44,
+          height: 24
+        }), label && /* @__PURE__ */jsx(Skeleton, {
+          variant: "text",
+          width: "40%",
+          height: 14
+        })]
+      })
+    });
+  }
+  if (!resolvedForm || !name) {
+    const resolvedChecked = checked !== void 0 ? checked : internalChecked;
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      error,
+      helperText,
+      size,
+      knobProps,
+      children: /* @__PURE__ */jsxs(XStack, {
+        ...knobProps.gap,
+        alignItems: "center",
+        height: size || knobProps.sizeToken,
+        children: [renderSwitch(resolvedChecked, checked === void 0 ? val => setInternalChecked(val) : void 0, onBlur, !!error), label && /* @__PURE__ */jsxs(Label, {
+          htmlFor: id,
+          size: size || "$true",
+          ...knobProps.textWeight,
+          color: error ? formCommonColors.error : knobProps.textAccentColor,
+          hoverStyle: {
+            color: knobProps.textAccentColor,
+            ...text.hoverKnobProps
+          },
+          pressStyle: {
+            color: knobProps.textAccentColor,
+            ...text.pressKnobProps
+          },
+          focusStyle: {
+            color: knobProps.textAccentColor,
+            ...text.focusKnobProps
+          },
+          focusVisibleStyle: {
+            color: knobProps.textAccentColor,
+            ...text.focusVisibleKnobProps
+          },
+          paddingRight: "$1",
+          ...labelProps,
+          children: [label, required && " *"]
+        })]
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = getFieldError(field, error);
+      const formLabelColor = resolvedError ? formCommonColors.error : knobProps.textAccentColor;
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        error: resolvedError,
+        helperText,
+        size,
+        knobProps,
+        children: /* @__PURE__ */jsxs(XStack, {
+          ...knobProps.gap,
+          alignItems: "center",
+          height: size || knobProps.sizeToken,
+          children: [renderSwitch(checked !== void 0 ? checked : Boolean(field.state.value), val => field.handleChange(val), mergeFieldHandler(field, "handleBlur", onBlur), !!resolvedError), label && /* @__PURE__ */jsxs(Label, {
+            htmlFor: id,
+            size: size || "$true",
+            ...knobProps.textWeight,
+            color: formLabelColor,
+            hoverStyle: {
+              color: formLabelColor,
+              ...text.hoverKnobProps
+            },
+            pressStyle: {
+              color: formLabelColor,
+              ...text.pressKnobProps
+            },
+            focusStyle: {
+              color: formLabelColor,
+              ...text.focusKnobProps
+            },
+            focusVisibleStyle: {
+              color: formLabelColor,
+              ...text.focusVisibleKnobProps
+            },
+            paddingRight: "$1",
+            ...labelProps,
+            children: [label, required && " *"]
+          })]
+        })
+      });
+    }
+  });
+}
+export { Switch };
+//# sourceMappingURL=index.mjs.map